/* =====================================================================
   WePicks — Landing page only: 3D scenes, lighting, scroll-driven motion.
   Loaded by index.html AFTER wepicks-modern.css. Nothing in here is used
   by track.php / track-history.php, so the tracking pages are unaffected.
   ===================================================================== */

:root {
    --kraft-1: #f0d3a4;   /* lit top face of a parcel */
    --kraft-2: #d9ad72;   /* front face */
    --kraft-3: #b7884d;   /* shaded side face */
    --tape: #1fb0b4;
    --glass: rgba(255, 255, 255, 0.07);
    --glass-line: rgba(255, 255, 255, 0.16);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html { scroll-padding-top: 80px; }
body { background: var(--bg); }

/* Tighter section rhythm on the landing page than the generic 84px. */
.wp-section { padding: 96px 0; }
.wp-section--tight { padding: 56px 0; }

/* ---------------------------------------------------------------------
   Page enter / leave transition
   The whole document slides up on load; leaving to track.php runs a mint
   wipe that starts from the button you clicked (see wepicks-landing.js).
   --------------------------------------------------------------------- */
/* .wp-wipe__box is excluded too: the fade-in's opacity:1 fill would
   otherwise flash the hidden mint cube in the middle of every page load. */
body.wp-enter > *:not(.wp-wipe):not(.wp-wipe__box):not(.wp-drawer):not(.wp-drawer-overlay) {
    animation: wpPageIn .8s var(--ease-out) both;
}
@keyframes wpPageIn {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}
.wp-wipe {
    position: fixed;
    z-index: 5000;
    left: var(--x, 50%);
    top: var(--y, 50%);
    width: 40px; height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 50%;
    background: radial-gradient(circle, #8fe6ea 0%, #159599 45%, #071f66 100%);
    transform: scale(0);
    pointer-events: none;
    display: grid; place-items: center;
}
.wp-wipe.is-on { pointer-events: auto; animation: wpWipe .75s var(--ease-out) forwards; }
@keyframes wpWipe { to { transform: scale(90); } }
.wp-wipe__box {
    position: fixed;
    left: 50%; top: 50%;
    width: 64px; height: 64px;
    margin: -32px 0 0 -32px;
    opacity: 0;
    z-index: 5001;
    pointer-events: none;
}
.wp-wipe.is-on + .wp-wipe__box { animation: wpWipeBox .75s .15s var(--ease-out) forwards; }
@keyframes wpWipeBox {
    0% { opacity: 0; transform: translateY(40px) scale(.6); }
    40% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 1; transform: translateY(-14px) scale(1.05); }
}

/* ---------------------------------------------------------------------
   Nav polish
   --------------------------------------------------------------------- */
.wp-nav { background: rgba(244, 247, 252, 0.72); }
.wp-nav.is-scrolled { background: rgba(255, 255, 255, 0.9); }
.wp-nav .wp-btn--primary { padding: 12px 20px; font-size: 14px; }

/* ---------------------------------------------------------------------
   Parcel cube — six lit faces, isometric, reusable everywhere
   --------------------------------------------------------------------- */
.wp-cube {
    --s: 48px;
    position: absolute;
    width: var(--s); height: var(--s);
    transform-style: preserve-3d;
    transform: rotateX(-28deg) rotateY(38deg);
    will-change: transform;
}
.wp-cube i {
    position: absolute; inset: 0;
    display: block;
    border: 1px solid rgba(0, 0, 0, 0.10);
    backface-visibility: hidden;
}
.wp-cube .f { background: var(--kraft-2); transform: translateZ(calc(var(--s) / 2)); }
.wp-cube .b { background: var(--kraft-3); transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.wp-cube .r { background: var(--kraft-3); transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.wp-cube .l { background: var(--kraft-2); transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.wp-cube .t { background: var(--kraft-1); transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.wp-cube .d { background: #8d6636; transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
/* Tape stripe across the top and down the front. */
.wp-cube .t::after, .wp-cube .f::after {
    content: "";
    position: absolute;
    left: 50%; top: 0; bottom: 0;
    width: 18%;
    transform: translateX(-50%);
    background: var(--tape);
    opacity: .95;
}
.wp-cube .f::before {
    content: "";
    position: absolute;
    left: 14%; bottom: 14%;
    width: 34%; height: 18%;
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .35) 0 2px, transparent 2px 4px);
    opacity: .5;
}
/* Mint variant for the "delivered" moment. */
.wp-cube--mint .f { background: #22b3b7; }
.wp-cube--mint .l { background: #22b3b7; }
.wp-cube--mint .r, .wp-cube--mint .b { background: #0f7478; }
.wp-cube--mint .t { background: #8fe6ea; }
.wp-cube--mint .t::after, .wp-cube--mint .f::after { background: #fff; }

/* ---------------------------------------------------------------------
   Hero — dark, lit, mouse-reactive, 3D scene on the right
   --------------------------------------------------------------------- */
.wp-hero {
    padding: 72px 0 110px;
    background: radial-gradient(120% 90% at 80% -10%, #0e5a80 0%, transparent 55%),
                radial-gradient(90% 70% at 0% 100%, #0f3aa8 0%, transparent 60%),
                linear-gradient(160deg, #051a52 0%, #071f66 45%, #0b3f6e 100%);
    isolation: isolate;
    perspective: 1400px;
}
/* Cursor spotlight, driven by --mx / --my from JS. */
.wp-hero::after {
    content: "";
    position: absolute; inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(520px circle at var(--mx, 70%) var(--my, 40%), rgba(31, 176, 180, 0.16), transparent 60%);
    transition: background-position .2s;
}
.wp-hero__bg { z-index: 0; }
.wp-hero__grid {
    background-size: 54px 54px;
    transform: perspective(700px) rotateX(58deg) translateY(-40px) scale(1.6);
    transform-origin: 50% 100%;
    animation: wpGridDrift 12s linear infinite;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 60%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 60%, #000 20%, transparent 75%);
    opacity: .7;
}
@keyframes wpGridDrift { to { background-position: 0 54px; } }
.wp-beam {
    position: absolute;
    top: -30%; left: 55%;
    width: 38vw; height: 160%;
    background: linear-gradient(90deg, transparent, rgba(143, 230, 234, 0.10), transparent);
    transform: skewX(-18deg);
    filter: blur(24px);
    animation: wpBeam 9s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes wpBeam { from { transform: skewX(-18deg) translateX(-20%); } to { transform: skewX(-18deg) translateX(30%); } }

.wp-hero__inner { z-index: 2; }
.wp-hero-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
.wp-hero h1 { font-size: clamp(36px, 5.4vw, 64px); letter-spacing: -0.025em; }
.wp-hero h1 .accent {
    background: linear-gradient(120deg, #8fe6ea 0%, #1fb0b4 40%, #d3f8f9 60%, #1fb0b4 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    animation: wpShimmer 5s ease-in-out infinite;
}
@keyframes wpShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.wp-hero__lead { max-width: 520px; }
.wp-hero__trust { gap: 18px 28px; }
.wp-hero__trust > div {
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--glass);
    border: 1px solid var(--glass-line);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Lit, glowing button. */
.wp-btn--mint { position: relative; overflow: hidden; }
.wp-btn--mint::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .6s var(--ease-out);
}
.wp-btn--mint:hover::after { transform: translateX(120%); }

/* ---- 3D scene ---- */
.wp-scene {
    position: relative;
    aspect-ratio: 5 / 4;
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
    transform-style: preserve-3d;
    transform: rotateY(calc(var(--px, 0) * -6deg)) rotateX(calc(var(--py, 0) * 5deg));
    transition: transform .25s ease-out;
}
.wp-scene__floor {
    position: absolute;
    left: 50%; bottom: 8%;
    width: 130%; height: 46%;
    transform: translateX(-50%) perspective(600px) rotateX(64deg);
    transform-origin: 50% 100%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(31, 176, 180, 0.32) 0%, rgba(31, 176, 180, 0.08) 40%, transparent 70%);
    filter: blur(6px);
}

/* ---- 3D container truck (CSS cuboids, markup in index.html) ----
   The stage is a flat, masked window with perspective; everything inside
   .wp-rig lives in one preserve-3d space. Ground is y = 0 (CSS y points
   down, so "up" is negative), the truck runs along x, and the rig is turned
   to the same isometric angle as the parcel cubes on the rest of the page.

   One 12s timeline shared by every moving part, so the wheels, the doors,
   the conveyor and the parcels can never drift out of step with the drive:
     0–12%   drives in from the left (x -640 → 0), brakes, nose dips
     13–19%  rear doors swing open 270° and fold against the sides;
             the telescopic conveyor extends to the door line
     19–44%  three parcels ride the belt into the hold, one behind the other
             (the last one stops just inside the doors, where it stays visible)
     45–54%  conveyor retracts, doors close
     56–86%  squats and pulls away to the right (x 0 → 720)
     86–100% empty bay, then the next truck arrives
   Wheel angle = distance / radius (26px) in degrees, so tyres roll, not skate.
   --k is the rig scale: wepicks-landing.js sets it from the scene's width so
   the truck fills the column at any size; the media queries are the no-JS
   fallback. */
.wp-scene__stage {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    perspective: 1100px;
    /* Fade the edges so the truck arrives out of the dark, not out of a box. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    transform: translateY(calc(var(--scroll, 0) * -40px));
    transition: transform .1s linear;
}
.wp-rig {
    --k: 1;
    position: absolute;
    left: 44%; top: 66%;
    width: 0; height: 0;
    transform-style: preserve-3d;
    /* The cursor (--px/--py, set on .wp-hero) turns the whole rig a little. */
    transform: rotateX(calc(-28deg + var(--py, 0) * -4deg)) rotateY(calc(38deg + var(--px, 0) * 8deg)) scale3d(var(--k), var(--k), var(--k));
    transition: transform .3s ease-out;
}

/* Cuboid primitive: six faces pushed out from a zero-size centre. */
.wp-b {
    position: absolute;
    left: 0; top: 0;
    width: 0; height: 0;
    transform-style: preserve-3d;
    transform: translate3d(var(--x, 0px), var(--y, 0px), var(--z, 0px));
}
.wp-b > i { position: absolute; left: 0; top: 0; display: block; backface-visibility: hidden; }
.wp-b > .fz, .wp-b > .bz { width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2); }
.wp-b > .px, .wp-b > .nx { width: var(--d); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--d) / -2); }
.wp-b > .ny, .wp-b > .py { width: var(--w); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--w) / -2); }
.wp-b > .fz { transform: translateZ(calc(var(--d) / 2)); }
.wp-b > .bz { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.wp-b > .px { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.wp-b > .nx { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.wp-b > .ny { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.wp-b > .py { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); }
/* Inside-out box: the same faces, turned to face inward (the hold's lining). */
.wp-b--in > .fz { transform: translateZ(calc(var(--d) / 2)) rotateY(180deg); }
.wp-b--in > .bz { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)) rotateY(180deg); }
.wp-b--in > .px { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)) rotateY(180deg); }
.wp-b--in > .nx { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)) rotateY(180deg); }
.wp-b--in > .ny { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)) rotateY(180deg); }
.wp-b--in > .py { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)) rotateY(180deg); }

/* Ground grid, the lane and the warehouse wall behind the bay. */
.wp-ground {
    position: absolute;
    left: -700px; top: -350px;
    width: 1400px; height: 700px;
    transform: rotateX(90deg);
    background:
        linear-gradient(rgba(143, 230, 234, .12) 1px, transparent 1px) 0 0 / 60px 60px,
        linear-gradient(90deg, rgba(143, 230, 234, .12) 1px, transparent 1px) 0 0 / 60px 60px,
        radial-gradient(50% 50% at 50% 50%, rgba(31, 176, 180, .16), transparent 70%);
    -webkit-mask-image: radial-gradient(55% 55% at 50% 50%, #000 35%, transparent 100%);
    mask-image: radial-gradient(55% 55% at 50% 50%, #000 35%, transparent 100%);
}
.wp-lane {
    position: absolute;
    left: -700px; top: -70px;
    width: 1400px; height: 140px;
    transform: translate3d(0, -.5px, 0) rotateX(90deg);
    background:
        repeating-linear-gradient(90deg, rgba(143, 230, 234, .45) 0 26px, transparent 26px 50px) 0 50% / 100% 3px no-repeat,
        linear-gradient(rgba(10, 24, 56, .9), rgba(10, 24, 56, .9));
    box-shadow: 0 0 0 1.5px rgba(143, 230, 234, .18);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
.wp-wall > .fz {
    background:
        repeating-linear-gradient(90deg, transparent 0 132px, rgba(143, 230, 234, .30) 132px 140px),
        linear-gradient(180deg, #16408a, #0b1e4a);
    box-shadow: inset 0 2px 0 rgba(143, 230, 234, .35);
}
.wp-wall > .ny { background: #1d4f9a; }
.wp-wall > .nx, .wp-wall > .px { background: #0a1a40; }

/* Telescopic conveyor: scaleX from its off-stage end. */
.wp-conv {
    position: absolute;
    left: 0; top: 0;
    width: 0; height: 0;
    transform-style: preserve-3d;
    transform: translate3d(-430px, -44px, 0) scaleX(0);
    animation: wpConv 12s infinite;
}
@keyframes wpConv {
    0%, 13% { transform: translate3d(-430px, -44px, 0) scaleX(0); }
    18%, 45% { transform: translate3d(-430px, -44px, 0) scaleX(1); }
    49%, 100% { transform: translate3d(-430px, -44px, 0) scaleX(0); }
}
.wp-conv__boom > .fz { background: linear-gradient(#2f4a82, #16294f); box-shadow: inset 0 1px 0 #8fe6ea; }
.wp-conv__boom > .bz, .wp-conv__boom > .px, .wp-conv__boom > .nx { background: #16294f; }
.wp-conv__boom > .py { background: #0b1633; }
.wp-conv__boom > .ny {
    background: repeating-linear-gradient(90deg, #3b5590 0 10px, #22366a 10px 20px);
    box-shadow: inset 0 0 0 1.5px rgba(143, 230, 234, .5);
    animation: wpBelt .5s linear infinite;
}
@keyframes wpBelt { to { background-position: 20px 0; } }
.wp-conv__leg > i { background: #16294f; }
.wp-conv__leg > .fz { background: #2f4a82; }

/* Parcels: the shared .wp-cube, but centred and un-rotated (the rig is). */
.wp-pk {
    position: absolute;
    left: 0; top: 0;
    width: 0; height: 0;
    transform-style: preserve-3d;
    opacity: 0;
    animation: 12s linear infinite;
}
.wp-pk .wp-cube { --s: 40px; left: -20px; top: -20px; transform: none; will-change: auto; }
.wp-pk--1 { animation-name: wpPk1; }
.wp-pk--2 { animation-name: wpPk2; }
.wp-pk--3 { animation-name: wpPk3; }
@keyframes wpPk1 {
    0%, 18.9% { opacity: 0; transform: translate3d(-450px, -71px, 0); }
    19%  { opacity: 1; transform: translate3d(-450px, -71px, 0); }
    31%, 55% { opacity: 1; transform: translate3d(-30px, -71px, 0); }
    56%, 100% { opacity: 0; transform: translate3d(-30px, -71px, 0); }
}
@keyframes wpPk2 {
    0%, 25.9% { opacity: 0; transform: translate3d(-450px, -71px, 0); }
    26%  { opacity: 1; transform: translate3d(-450px, -71px, 0); }
    37%, 55% { opacity: 1; transform: translate3d(-76px, -71px, 0); }
    56%, 100% { opacity: 0; transform: translate3d(-76px, -71px, 0); }
}
@keyframes wpPk3 {
    0%, 32.9% { opacity: 0; transform: translate3d(-450px, -71px, 0); }
    33%  { opacity: 1; transform: translate3d(-450px, -71px, 0); }
    44%, 55% { opacity: 1; transform: translate3d(-124px, -71px, 0); }
    56%, 100% { opacity: 0; transform: translate3d(-124px, -71px, 0); }
}

/* The truck: drive, then pitch (brake dip / pull-away squat) on the body. */
.wp-t {
    position: absolute;
    left: 0; top: 0;
    width: 0; height: 0;
    transform-style: preserve-3d;
    animation: wpTDrive 12s infinite;
}
@keyframes wpTDrive {
    0%  { transform: translate3d(-640px, 0, 0); animation-timing-function: cubic-bezier(.2, .7, .25, 1); }
    12% { transform: translate3d(0, 0, 0); }
    56% { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(.65, 0, .9, .45); }
    86%, 100% { transform: translate3d(720px, 0, 0); }
}
.wp-t__body {
    position: absolute;
    left: 0; top: 0;
    width: 0; height: 0;
    transform-style: preserve-3d;
    transform-origin: 40px -26px 0;
    animation: wpTPitch 12s infinite;
}
@keyframes wpTPitch {
    0%, 10%, 17%, 56%, 64%, 100% { transform: rotateZ(0deg); }
    12.5% { transform: rotateZ(1.4deg); }
    14.5% { transform: rotateZ(-.45deg); }
    59%   { transform: rotateZ(-1.1deg); }
}
.wp-t__shadow {
    position: absolute;
    left: -260px; top: -90px;
    width: 520px; height: 180px;
    transform: translate3d(50px, -1px, 0) rotateX(90deg);
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .25) 45%, transparent 70%);
}

/* Chassis */
.wp-t__chassis > i { background: #0b1633; }
.wp-t__chassis > .fz { background: linear-gradient(#1a2a52, #0b1633); }

/* Container skin: corrugated white, mint band, navy skirt, logo on the near side. */
.wp-t__box > .fz {
    background:
        linear-gradient(90deg, #8fe6ea, #159599) 0 calc(100% - 10px) / 100% 12px no-repeat,
        linear-gradient(#071f66, #071f66) 0 100% / 100% 10px no-repeat,
        linear-gradient(180deg, #ffffff 0%, #eef3fa 70%, #d9e2ee 100%);
    box-shadow: inset 0 0 0 1.5px #c5d1e2;
}
.wp-t__box > .bz {
    background:
        linear-gradient(90deg, #159599, #0f7478) 0 calc(100% - 10px) / 100% 12px no-repeat,
        linear-gradient(#071f66, #071f66) 0 100% / 100% 10px no-repeat,
        linear-gradient(180deg, #d5dfeb, #b9c6d8);
}
.wp-t__box > .px { background: linear-gradient(180deg, #e2e9f3, #c9d4e3); box-shadow: inset 0 0 0 1.5px #b3c0d3; }
.wp-t__box > .ny {
    background: repeating-linear-gradient(90deg, rgba(7, 31, 102, .10) 0 2px, transparent 2px 14px), linear-gradient(90deg, #f6f9fd, #e4ebf4);
    box-shadow: inset 0 0 0 1.5px #d0dae7;
}
.wp-t__box > .py { background: #0b1633; }
.wp-t__rib {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(90deg, rgba(7, 31, 102, .08) 0 2px, transparent 2px 14px);
    -webkit-mask-image: linear-gradient(#000 0 82%, transparent 82%);
    mask-image: linear-gradient(#000 0 82%, transparent 82%);
    pointer-events: none;
}
.wp-t__logo {
    position: absolute;
    left: 74px; top: 30px;
    z-index: 1;
    display: flex; align-items: flex-start; gap: 7px;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 32px;
    line-height: 1;
    letter-spacing: -.5px;
    color: var(--blue);
    white-space: nowrap;
}
/* The pin from the logo, in front of the wordmark like the real lock-up. */
.wp-t__pin { display: block; width: 40px; height: 40px; margin-top: -5px; }
.wp-t__wm > span { color: var(--teal); }
.wp-t__logo small {
    display: block;
    margin-top: 8px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 1.6px;
    color: #6a7a94;
}
/* The hold: a dark lining with one warm lamp near the rear. */
.wp-t__hold > i { background: #0e1d42; }
.wp-t__hold > .bz { background: radial-gradient(70% 90% at 22% 40%, rgba(255, 231, 168, .28), transparent 70%), #13254d; }
.wp-t__hold > .py {
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 24px),
        radial-gradient(60% 100% at 20% 50%, rgba(255, 231, 168, .18), transparent 70%),
        linear-gradient(90deg, #1a2d58, #0a1633);
}
.wp-t__hold > .px { background: #0c1a3c; }
.wp-t__hold > .ny { background: radial-gradient(40% 70% at 18% 50%, rgba(255, 231, 168, .55), transparent 70%), #0a1633; }

/* Rear doors: the group sits on the rear face; each door hinges on its outer edge. */
.wp-t__doors {
    position: absolute;
    left: 0; top: 0;
    width: 0; height: 0;
    transform-style: preserve-3d;
    transform: translate3d(-150px, -116px, 0) rotateY(-90deg);
}
.wp-door {
    position: absolute;
    top: -66px;
    width: 60px; height: 132px;
    transform-style: preserve-3d;
    animation: 12s cubic-bezier(.5, 0, .3, 1) infinite;
}
.wp-door--a { left: -60px; transform-origin: 0 50%; animation-name: wpDoorA; }
.wp-door--b { left: 0; transform-origin: 100% 50%; animation-name: wpDoorB; }
@keyframes wpDoorA {
    0%, 13% { transform: rotateY(0deg); }
    19%, 48% { transform: rotateY(-270deg); }
    54%, 100% { transform: rotateY(0deg); }
}
@keyframes wpDoorB {
    0%, 13% { transform: rotateY(0deg); }
    19%, 48% { transform: rotateY(270deg); }
    54%, 100% { transform: rotateY(0deg); }
}
.wp-door > i { position: absolute; inset: 0; backface-visibility: hidden; }
.wp-door > .o {
    transform: translateZ(.6px);
    background:
        linear-gradient(90deg, #159599, #0f7478) 0 calc(100% - 10px) / 100% 12px no-repeat,
        linear-gradient(#071f66, #071f66) 0 100% / 100% 10px no-repeat,
        repeating-linear-gradient(180deg, rgba(7, 31, 102, .07) 0 2px, transparent 2px 12px),
        linear-gradient(180deg, #eef3fa, #d4deeb);
    box-shadow: inset 0 0 0 1.5px #b3c0d3;
}
/* Lock rod, hinges and a tail light on each door's outer edge. */
.wp-door > .o::before {
    content: "";
    position: absolute;
    top: 12px; bottom: 24px;
    width: 4px;
    background: #8391a9;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}
.wp-door--a > .o::before { right: 12px; }
.wp-door--b > .o::before { left: 12px; }
.wp-door > .o::after {
    content: "";
    position: absolute;
    bottom: 26px;
    width: 8px; height: 16px;
    border-radius: 2px;
    background: #ff5a6a;
    box-shadow: 0 0 6px rgba(255, 90, 106, .6);
    animation: wpBrake 12s infinite;
}
.wp-door--a > .o::after { left: 6px; }
.wp-door--b > .o::after { right: 6px; }
@keyframes wpBrake {
    0%, 7%, 15%, 100% { box-shadow: 0 0 6px rgba(255, 90, 106, .6); background: #ff5a6a; }
    9%, 13% { box-shadow: 0 0 16px 4px rgba(255, 70, 90, .95); background: #ff8a95; }
}
.wp-door > .n { transform: rotateY(180deg) translateZ(.6px); background: linear-gradient(180deg, #c3cedd, #aab8cc); }

/* Cab: navy, side window and door on the near face, roof fairing on top. */
.wp-t__cab > i { background: #0f2f6e; }
.wp-t__cab > .fz {
    background:
        linear-gradient(90deg, #8fe6ea, #159599) 0 74px / 100% 8px no-repeat,
        linear-gradient(135deg, #c9eeff, #5b8fc7 55%, #1a3a73) 8px 12px / 80px 38px no-repeat,
        linear-gradient(#051a52, #051a52) 58px 12px / 2px 84px no-repeat,
        linear-gradient(#8fe6ea, #8fe6ea) 66px 58px / 16px 4px no-repeat,
        linear-gradient(180deg, #1d4f9a, #0f2f6e 55%, #071f66);
    box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .18);
}
.wp-t__cab > .bz { background: linear-gradient(180deg, #0f3aa8, #071f66); }
.wp-t__cab > .px {
    background:
        linear-gradient(135deg, #c9eeff, #5b8fc7 55%, #1a3a73) 10px 10px / 88px 40px no-repeat,
        repeating-linear-gradient(180deg, #051a52 0 4px, #2b4478 4px 8px) 14px 62px / 80px 24px no-repeat,
        linear-gradient(#fff6c8, #fff6c8) 8px 84px / 14px 10px no-repeat,
        linear-gradient(#fff6c8, #fff6c8) 86px 84px / 14px 10px no-repeat,
        linear-gradient(180deg, #1d4f9a, #0f2f6e 55%, #071f66);
}
.wp-t__cab > .ny { background: linear-gradient(90deg, #1d4f9a, #16408a); }
.wp-t__cab > .py { background: #06112e; }
.wp-t__fair > i { background: #16408a; }
.wp-t__fair > .fz { background: linear-gradient(180deg, #1d4f9a, #0f3aa8); }
.wp-t__fair > .ny { background: #2a63b5; }
.wp-t__mirror > i { background: #051a52; }
.wp-t__mirror > .fz { background: #9fb6d6; }
.wp-t__stack > i { background: linear-gradient(90deg, #7d8ba3, #f2f6fb 50%, #7d8ba3); }
.wp-t__stack > .ny { background: #3a4763; }
.wp-t__tank > i { background: linear-gradient(180deg, #8391a9, #56637c); }
.wp-t__tank > .ny { background: #aab8cc; }
.wp-t__tank > .py { background: #3a4763; }

/* Exhaust: three puffs, billboarded so they always face the visitor. */
.wp-t__puffs {
    position: absolute;
    left: 0; top: 0;
    width: 0; height: 0;
    transform: translate3d(154px, -212px, 50px) rotateY(-38deg) rotateX(28deg);
}
.wp-t__puffs > i {
    position: absolute;
    left: -6px; top: -6px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #cfd8e6;
    opacity: 0;
    animation: wpPuff 1.8s ease-out infinite;
}
.wp-t__puffs > i:nth-child(2) { animation-delay: .6s; }
.wp-t__puffs > i:nth-child(3) { animation-delay: 1.2s; }
@keyframes wpPuff {
    0%   { opacity: 0; transform: translate(0, 0) scale(.4); }
    15%  { opacity: .45; }
    100% { opacity: 0; transform: translate(-36px, -40px) scale(2.2); }
}

/* Wheels: an 8-segment tread around two discs, spun as a unit. */
.wp-wh {
    position: absolute;
    left: 0; top: 0;
    width: 0; height: 0;
    transform-style: preserve-3d;
    transform: translate3d(var(--x), -26px, var(--z));
}
.wp-wh__spin {
    position: absolute;
    left: 0; top: 0;
    width: 0; height: 0;
    transform-style: preserve-3d;
    animation: wpTWheel 12s infinite;
}
@keyframes wpTWheel {
    0%  { transform: rotate(-1410deg); animation-timing-function: cubic-bezier(.2, .7, .25, 1); }
    12% { transform: rotate(0deg); }
    56% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.65, 0, .9, .45); }
    86%, 100% { transform: rotate(1586deg); }
}
.wp-wh__spin > i { position: absolute; display: block; backface-visibility: hidden; }
.wp-wh__spin > .tr {
    left: -10.75px; top: -10px;
    width: 21.5px; height: 20px;
    background: linear-gradient(90deg, #0d1424, #1b2438 50%, #0d1424);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}
.wp-wh__spin > .tr:nth-child(1) { transform: rotate(0deg)   translateY(-26px) rotateX(90deg); }
.wp-wh__spin > .tr:nth-child(2) { transform: rotate(45deg)  translateY(-26px) rotateX(90deg); }
.wp-wh__spin > .tr:nth-child(3) { transform: rotate(90deg)  translateY(-26px) rotateX(90deg); }
.wp-wh__spin > .tr:nth-child(4) { transform: rotate(135deg) translateY(-26px) rotateX(90deg); }
.wp-wh__spin > .tr:nth-child(5) { transform: rotate(180deg) translateY(-26px) rotateX(90deg); }
.wp-wh__spin > .tr:nth-child(6) { transform: rotate(225deg) translateY(-26px) rotateX(90deg); }
.wp-wh__spin > .tr:nth-child(7) { transform: rotate(270deg) translateY(-26px) rotateX(90deg); }
.wp-wh__spin > .tr:nth-child(8) { transform: rotate(315deg) translateY(-26px) rotateX(90deg); }
.wp-wh__spin > .dk {
    left: -27px; top: -27px;
    width: 54px; height: 54px;
    border-radius: 50%;
    background:
        radial-gradient(circle, #27324a 0 4px, #e9eef5 4px 7px, transparent 7px 17px, #0d1424 17px),
        repeating-conic-gradient(from 0deg, #5d6b85 0 8deg, #dde5ef 8deg 72deg);
    transform: translateZ(10px);
}
.wp-wh__spin > .dk--b { transform: rotateY(180deg) translateZ(10px); }

/* ---------------------------------------------------------------------
   Staggered reveals — items inside a revealed block arrive one after
   another instead of all at once. The parent gets .in from the reveal
   observers (wp-reveal in wepicks-modern.js, wp-reveal3d in this file's
   script); the children only ever depend on that class.
   --------------------------------------------------------------------- */
.wp-reveal .wp-list-check li,
.wp-reveal .wp-card--row,
.wp-cnq .badge,
.wp-faq.wp-reveal .wp-faq__item {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s var(--ease-out), transform .65s var(--ease-out);
    transition-delay: calc(var(--i, 0) * .09s + .1s);
}
.wp-reveal.in .wp-list-check li,
.wp-reveal.in .wp-card--row,
.wp-cnq.in .badge,
.wp-faq.wp-reveal.in .wp-faq__item { opacity: 1; transform: none; }
.wp-list-check li:nth-child(1), .wp-cnq .badge:nth-child(1), .wp-faq__item:nth-child(1), .wp-card--row:nth-child(1) { --i: 0; }
.wp-list-check li:nth-child(2), .wp-cnq .badge:nth-child(2), .wp-faq__item:nth-child(2), .wp-card--row:nth-child(2) { --i: 1; }
.wp-list-check li:nth-child(3), .wp-cnq .badge:nth-child(3), .wp-faq__item:nth-child(3) { --i: 2; }
.wp-list-check li:nth-child(4), .wp-cnq .badge:nth-child(4), .wp-faq__item:nth-child(4) { --i: 3; }
.wp-faq__item:nth-child(5) { --i: 4; }
.wp-faq__item:nth-child(6) { --i: 5; }
/* The tick marks pop in a beat after their line lands. */
.wp-reveal .wp-list-check .tick { transform: scale(.4); transition: transform .45s var(--ease-spring); transition-delay: calc(var(--i, 0) * .09s + .3s); }
.wp-reveal.in .wp-list-check .tick { transform: none; }
/* Step numbers pop when their card arrives. */
.wp-step3d .n { transform: scale(.5); opacity: 0; transition: transform .5s var(--ease-spring), opacity .3s; transition-delay: .35s; }
.wp-step3d.in .n { transform: none; opacity: 1; }
/* Counting numbers should not jitter the layout as digits change. */
.wp-hero__trust .t-num { font-variant-numeric: tabular-nums; }

/* ---- Step 3 van: parked in frame, the road runs under it ---- */
.wp-step3d__stage--drive .road { animation-duration: .5s; z-index: 0; }
.wp-van {
    position: absolute;
    left: 50%; bottom: 14px;
    width: 210px; height: auto;
    transform: translateX(-50%);
    overflow: visible;
    z-index: 1;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35));
}
.wp-van * { transform-box: view-box; }
.wp-van__body { animation: wpVanBob .36s ease-in-out infinite alternate; }
@keyframes wpVanBob { to { transform: translateY(-1.5px); } }
.wp-van__wheel { transform-origin: 0 0; animation: wpVanWheel .75s linear infinite; }
@keyframes wpVanWheel { to { transform: rotate(360deg); } }
.wp-van__speed line { animation: wpVanStreak .6s linear infinite; }
.wp-van__speed line:nth-child(2) { animation-delay: -.25s; }
.wp-van__speed line:nth-child(3) { animation-delay: -.45s; }
@keyframes wpVanStreak {
    from { transform: translateX(10px); opacity: 0; }
    30% { opacity: .7; }
    to { transform: translateX(-40px); opacity: 0; }
}

/* Floating glass status chips with depth. */
.wp-chip3d {
    position: absolute;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 14px;
    border-radius: 14px;
    background: rgba(7, 26, 80, 0.55);
    border: 1px solid rgba(143, 230, 234, 0.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #e6fbfc;
    font-family: var(--font-head);
    font-size: 12.5px; font-weight: 600;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12);
    transform: translate3d(calc(var(--px, 0) * var(--depth, 20) * 1px), calc(var(--py, 0) * var(--depth, 20) * 1px), 0);
    transition: transform .3s ease-out;
    animation: wpChipFloat 5s ease-in-out infinite;
    animation-delay: var(--d, 0s);
    z-index: 4;
    white-space: nowrap;
}
.wp-chip3d .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--mint); }
.wp-chip3d small { display: block; font-weight: 500; font-size: 11px; color: rgba(255, 255, 255, .7); }
.wp-chip3d--1 { top: 6%; left: 2%; --depth: 28; }
.wp-chip3d--2 { top: 0; right: 0; --depth: -22; --d: -1.6s; }
.wp-chip3d--3 { bottom: 0; left: 8%; --depth: 16; --d: -3.2s; }
@keyframes wpChipFloat { 0%, 100% { margin-top: 0; } 50% { margin-top: -10px; } }

/* Track box as glass on the hero. */
.wp-hero .wp-trackbox {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .35), 0 0 0 1px rgba(143, 230, 234, .25);
    position: relative;
}
.wp-hero .wp-trackbox::before {
    content: "";
    position: absolute; inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(120deg, rgba(143, 230, 234, .9), rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 60%, rgba(31, 176, 180, .7));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
}

/* ---------------------------------------------------------------------
   Tilt cards with cursor-tracking glare (data-tilt)
   --------------------------------------------------------------------- */
[data-tilt] {
    transform-style: preserve-3d;
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
    transition: transform .18s ease-out, box-shadow .3s var(--ease), border-color .3s var(--ease);
}
[data-tilt].is-tilting { transition: transform .05s linear, box-shadow .3s var(--ease); }
/* A revealed card keeps tilting: the reveal's `transform: none` and its slow
   .9s transition must not win once the card is in view. */
.wp-reveal3d.in[data-tilt] {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
    transition: transform .18s ease-out, box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.wp-reveal3d.in[data-tilt].is-tilting, [data-tilt].is-tilting {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
    transition: transform .05s linear, box-shadow .3s var(--ease);
    box-shadow: var(--shadow-lg);
}
[data-tilt] > .wp-glare {
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%);
    opacity: 0;
    transition: opacity .3s var(--ease);
    mix-blend-mode: soft-light;
    z-index: 3;
}
[data-tilt].is-tilting > .wp-glare { opacity: 1; }
.wp-card[data-tilt] > * { transform: translateZ(1px); }
.wp-card[data-tilt] .wp-card__icon { transform: translateZ(28px); }
.wp-card[data-tilt]:hover .wp-card__icon { transform: translateZ(40px) scale(1.06) rotate(-4deg); }

/* Lit border that follows the cursor on light cards. */
.wp-card, .wp-widget, .wp-stat, .wp-ai, .wp-faq__item { position: relative; }
.wp-card::before, .wp-widget::before, .wp-stat::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 0%), rgba(21, 149, 153, .85), rgba(21, 149, 153, 0) 60%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0;
    transition: opacity .3s var(--ease);
    pointer-events: none;
    z-index: 2;
}
.wp-card:hover::before, .wp-widget:hover::before, .wp-stat:hover::before { opacity: 1; }

.wp-card__icon {
    background: linear-gradient(145deg, #ffffff, #e6f3ff);
    box-shadow: 0 10px 22px rgba(7, 31, 102, .12), inset 0 1px 0 #fff, inset 0 -2px 0 rgba(7, 31, 102, .08);
    color: var(--navy-2);
}

/* ---------------------------------------------------------------------
   Stats — glass tiles that sweep a highlight when they enter
   --------------------------------------------------------------------- */
.wp-stats { gap: 18px; }
.wp-stat {
    overflow: hidden;
    background: linear-gradient(160deg, #ffffff 0%, #f5f9ff 100%);
    box-shadow: 0 14px 30px rgba(7, 31, 102, .07), inset 0 1px 0 #fff;
}
.wp-stat::after {
    content: "";
    position: absolute;
    top: -40%; left: -60%;
    width: 50%; height: 180%;
    background: linear-gradient(100deg, transparent, rgba(31, 176, 180, .28), transparent);
    transform: skewX(-16deg) translateX(-40px);
    opacity: 0;
}
.wp-stat.in::after { animation: wpSweep 1.3s .35s var(--ease-out) both; }
@keyframes wpSweep {
    0% { opacity: 0; transform: skewX(-16deg) translateX(-60px); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: skewX(-16deg) translateX(420px); }
}
.wp-stat .ic {
    width: 44px; height: 44px; margin: 0 auto 12px;
    border-radius: 13px;
    display: grid; place-items: center;
    background: var(--grad-brand);
    color: #8fe6ea;
    font-size: 20px;
    box-shadow: 0 10px 24px rgba(7, 31, 102, .25);
    transform: translateZ(20px);
}

/* ---------------------------------------------------------------------
   Reveal variants: 3D rise
   --------------------------------------------------------------------- */
.wp-reveal3d {
    opacity: 0;
    transform: perspective(900px) rotateX(14deg) translateY(40px);
    transform-origin: 50% 100%;
    transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.wp-reveal3d.in { opacity: 1; transform: none; }
.wp-reveal3d[data-d="1"] { transition-delay: .1s; }
.wp-reveal3d[data-d="2"] { transition-delay: .2s; }
.wp-reveal3d[data-d="3"] { transition-delay: .3s; }
.wp-reveal3d[data-d="4"] { transition-delay: .4s; }
.wp-reveal3d[data-d="5"] { transition-delay: .5s; }

/* Headline words rise one by one. */
.wp-words .w { display: inline-block; opacity: 0; transform: translateY(.6em) rotateX(-40deg); transform-origin: 50% 100%; transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); }
.wp-words.in .w { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------
   Journey — sticky, scroll-driven parcel route (the centrepiece)
   --------------------------------------------------------------------- */
.wp-journey3d {
    position: relative;
    height: 420vh;
    background: linear-gradient(180deg, #051a52 0%, #071f66 40%, #0b2a44 100%);
    color: #fff;
}
.wp-journey3d__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    display: flex; flex-direction: column;
    justify-content: center;
}
.wp-journey3d__sticky::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(60% 50% at 50% 100%, rgba(31, 176, 180, .18), transparent 70%),
                linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 100% 100%, 54px 54px, 54px 54px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 80%);
    pointer-events: none;
}
.wp-journey3d__head { text-align: center; margin-bottom: 14px; position: relative; z-index: 2; }
.wp-journey3d__head .wp-eyebrow { color: #8fe6ea; background: rgba(143, 230, 234, .12); }
.wp-journey3d__head h2 { color: #fff; font-size: clamp(24px, 3.4vw, 40px); margin-bottom: 4px; }
.wp-journey3d__head p { color: rgba(255, 255, 255, .72); margin: 0; font-size: 15px; }

.wp-journey3d__layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 26px;
    align-items: center;
    position: relative; z-index: 2;
}

/* Left column: one card per stage, only the live one is fully lit. */
.wp-jstage { position: relative; display: grid; gap: 10px; }
.wp-jstage__item {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid transparent;
    opacity: .38;
    transform: translateX(-8px) scale(.98);
    transition: opacity .4s var(--ease), transform .5s var(--ease-out), background .4s var(--ease), border-color .4s;
}
.wp-jstage__item.is-live {
    opacity: 1;
    transform: none;
    background: rgba(255, 255, 255, .07);
    border-color: rgba(143, 230, 234, .35);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.wp-jstage__item.is-past { opacity: .7; }
.wp-jstage__n {
    flex: 0 0 34px; width: 34px; height: 34px;
    border-radius: 10px;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    font-family: var(--font-head); font-weight: 800; font-size: 14px;
    color: rgba(255, 255, 255, .7);
    transition: all .4s var(--ease);
}
.wp-jstage__item.is-live .wp-jstage__n, .wp-jstage__item.is-past .wp-jstage__n { background: var(--grad-mint); color: #03383a; border-color: transparent; box-shadow: 0 0 22px rgba(31, 176, 180, .5); }
.wp-jstage__item h4 { color: #fff; font-size: 16px; margin: 4px 0 3px; }
/* Only the live stage shows its explanation; the rest collapse to a title so
   the list reads as a checklist and leaves room for the hand-over panel. */
.wp-jstage__item p { color: rgba(255, 255, 255, .72); font-size: 13.5px; margin: 0; line-height: 1.5; max-height: 0; overflow: hidden; transition: max-height .45s var(--ease-out); }
.wp-jstage__item.is-live p { max-height: 140px; }
.wp-jstage__item.is-past h4::after { content: "\2713"; margin-left: 8px; color: #8fe6ea; font-size: 13px; }

/* Right column: the route. */
.wp-jmap {
    position: relative;
    aspect-ratio: 1000 / 560;
    width: 100%;
    perspective: 1200px;
}
.wp-jmap__tilt {
    position: absolute; inset: 0;
    transform-style: preserve-3d;
    transform: rotateX(calc(18deg - var(--p, 0) * 10deg)) rotateY(calc(-6deg + var(--p, 0) * 8deg));
    transition: transform .2s linear;
}
.wp-jmap svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wp-jmap .route-bg { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 3; stroke-dasharray: 6 10; stroke-linecap: round; }
.wp-jmap .route-lit {
    fill: none; stroke: url(#wpRouteGrad); stroke-width: 5; stroke-linecap: round;
    filter: drop-shadow(0 0 10px rgba(31, 176, 180, .8));
}
.wp-jmap .route-glow { fill: none; stroke: rgba(31, 176, 180, .28); stroke-width: 18; stroke-linecap: round; filter: blur(8px); }
.wp-jstop {
    position: absolute;
    left: var(--x); top: var(--y);
    transform: translate(-50%, -50%);
    display: grid; justify-items: center; gap: 8px;
    z-index: 3;
}
.wp-jstop__dot {
    width: 46px; height: 46px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(7, 26, 80, .8);
    border: 2px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .55);
    font-size: 19px;
    transition: all .45s var(--ease-spring);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .4);
}
.wp-jstop__lbl {
    font-family: var(--font-head); font-weight: 600; font-size: 12px;
    color: rgba(255, 255, 255, .55);
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(7, 26, 80, .75);
    border: 1px solid rgba(255, 255, 255, .1);
    white-space: nowrap;
    transition: all .4s var(--ease);
}
.wp-jstop.is-lit .wp-jstop__dot {
    background: var(--grad-mint);
    border-color: rgba(255, 255, 255, .6);
    color: #03383a;
    transform: scale(1.12);
    box-shadow: 0 0 0 8px rgba(31, 176, 180, .18), 0 0 34px rgba(31, 176, 180, .7);
}
.wp-jstop.is-lit .wp-jstop__lbl { color: #fff; border-color: rgba(143, 230, 234, .5); }
.wp-jstop.is-lit .wp-jstop__dot::after {
    content: "";
    position: absolute; inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(143, 230, 234, .6);
    animation: wpRing 1.8s ease-out infinite;
}

/* Parcels riding the route (positioned by JS with --x / --y in %). */
.wp-jparcel {
    position: absolute;
    left: var(--x, 0%); top: var(--y, 0%);
    width: 0; height: 0;
    z-index: 4;
    transform: translateZ(30px);
}
.wp-jparcel .wp-cube { --s: 40px; left: -20px; top: -46px; transition: none; transform: rotateX(-28deg) rotateY(calc(38deg + var(--spin, 0deg))); }
.wp-jparcel .shadow {
    position: absolute;
    left: -20px; top: -8px;
    width: 40px; height: 14px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    filter: blur(5px);
}
.wp-jparcel--2 .wp-cube { --s: 30px; left: -15px; top: -36px; }
.wp-jparcel--3 .wp-cube { --s: 24px; left: -12px; top: -30px; }
.wp-jparcel--2 .shadow, .wp-jparcel--3 .shadow { width: 28px; left: -14px; }

/* The ETA / live meter above the map. */
.wp-jmeter {
    position: absolute;
    top: -6px; right: 0;
    z-index: 5;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(7, 26, 80, .7);
    border: 1px solid rgba(143, 230, 234, .28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: var(--font-head);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}
.wp-jmeter .bar { width: 120px; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.wp-jmeter .bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--grad-accent-dark); border-radius: 6px; box-shadow: 0 0 12px rgba(31, 176, 180, .8); }
.wp-jmeter .pct { font-weight: 800; font-size: 15px; color: #8fe6ea; min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; }
.wp-jmeter .lbl { font-size: 11.5px; color: rgba(255, 255, 255, .7); }

/* End-of-journey CTA panel: fades in during the final stretch and hands
   over to track.php with the page wipe. */
.wp-jend {
    position: absolute;
    left: 50%; bottom: 3%;
    transform: translate(-50%, 30px);
    z-index: 6;
    width: min(560px, 92%);
    padding: 18px 20px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .96);
    color: var(--ink);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .45), 0 0 0 1px rgba(143, 230, 234, .4);
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s var(--ease), transform .6s var(--ease-out);
}
.wp-jend.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.wp-jend h3 { font-size: 18px; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.wp-jend h3 i { color: var(--mint-2); }
.wp-jend p { font-size: 13.5px; color: var(--muted); margin: 0 0 12px; }
.wp-jend form { display: flex; gap: 10px; }
.wp-jend .field { flex: 1; position: relative; }
.wp-jend .field i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted-2); }
.wp-jend .wp-input { padding: 13px 14px 13px 40px; }

.wp-jprogress {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, .08);
    z-index: 5;
}
.wp-jprogress i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--grad-accent-dark); box-shadow: 0 0 14px rgba(31, 176, 180, .9); }

/* Scroll hint at the start of the journey. */
.wp-jhint {
    position: absolute; left: 50%; bottom: 22px;
    transform: translateX(-50%);
    font-size: 12.5px; color: rgba(255, 255, 255, .6);
    display: inline-flex; align-items: center; gap: 8px;
    z-index: 5;
    transition: opacity .3s;
}
.wp-jhint i { animation: wpNudge 1.4s ease-in-out infinite; }
@keyframes wpNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.wp-journey3d.is-started .wp-jhint { opacity: 0; }

/* ---------------------------------------------------------------------
   How it works — three isometric steps with a floating cube each
   --------------------------------------------------------------------- */
.wp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.wp-step3d {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 26px 24px 28px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.wp-step3d__stage {
    position: relative;
    height: 150px;
    margin: -6px -8px 14px;
    border-radius: 18px;
    background: radial-gradient(90% 80% at 50% 100%, rgba(21, 149, 153, .18), transparent 70%),
                linear-gradient(160deg, #071f66, #0f3aa8);
    overflow: hidden;
    perspective: 700px;
}
.wp-step3d__stage::before {
    content: "";
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 26px 26px;
    transform: perspective(300px) rotateX(55deg) scale(1.8);
    transform-origin: 50% 100%;
}
.wp-step3d__stage .wp-cube { left: 50%; top: 50%; margin: -24px 0 0 -24px; animation: wpCubeSpin 9s linear infinite; }
.wp-step3d__stage .wp-cube.c2 { --s: 34px; margin: -6px 0 0 -70px; animation-delay: -3s; }
.wp-step3d__stage .wp-cube.c3 { --s: 28px; margin: -10px 0 0 40px; animation-delay: -6s; }
.wp-step3d__stage .glow { position: absolute; left: 50%; bottom: 14px; width: 120px; height: 30px; transform: translateX(-50%); border-radius: 50%; background: rgba(31, 176, 180, .5); filter: blur(14px); }
.wp-step3d__stage .scan {
    position: absolute; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, #8fe6ea, transparent);
    box-shadow: 0 0 14px #1fb0b4;
    animation: wpScan 3s ease-in-out infinite;
}
@keyframes wpScan { 0%, 100% { top: 20%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 85%; } }
.wp-step3d__stage .arm {
    position: absolute; left: 50%; top: -10px;
    width: 4px; height: 58px;
    background: linear-gradient(#8fe6ea, #22b3b7);
    border-radius: 2px;
    transform-origin: 50% 0;
    animation: wpArm 4s ease-in-out infinite;
}
.wp-step3d__stage .arm::after { content: ""; position: absolute; left: -12px; bottom: -8px; width: 28px; height: 10px; border: 3px solid #8fe6ea; border-top: 0; border-radius: 0 0 8px 8px; }
@keyframes wpArm { 0%, 100% { height: 40px; } 50% { height: 74px; } }
.wp-step3d__stage .road {
    position: absolute; left: -10%; right: -10%; bottom: 26px; height: 10px;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .5) 0 20px, transparent 20px 40px);
    background-size: 40px 100%;
    opacity: .35;
    transform: perspective(300px) rotateX(55deg);
    animation: wpBeltRun 1s linear infinite;
}
.wp-step3d .n {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    width: 30px; height: 30px; border-radius: 9px;
    display: grid; place-items: center;
    background: var(--grad-mint); color: #03383a;
    font-family: var(--font-head); font-weight: 800; font-size: 13px;
    box-shadow: 0 8px 20px rgba(21, 149, 153, .45);
}
.wp-step3d h3 { font-size: 19px; margin-bottom: 6px; }
.wp-step3d p { color: var(--muted); font-size: 14.5px; margin: 0; }

/* ---------------------------------------------------------------------
   Coverage marquee
   --------------------------------------------------------------------- */
.wp-marquee {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    padding: 6px 0;
}
.wp-marquee__track { display: flex; gap: 12px; width: max-content; animation: wpMarquee 40s linear infinite; }
.wp-marquee:hover .wp-marquee__track { animation-play-state: paused; }
.wp-marquee span {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    font-family: var(--font-head); font-weight: 600; font-size: 13.5px;
    color: var(--navy);
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
}
.wp-marquee span i { color: var(--mint-2); }
@keyframes wpMarquee { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------------
   Rates section — the two widgets sit side by side in a lit frame
   --------------------------------------------------------------------- */
.wp-rates-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; max-width: 1080px; margin: 0 auto; }
.wp-widget { box-shadow: 0 20px 50px rgba(7, 31, 102, .09), inset 0 1px 0 #fff; }
.wp-widget h3 i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--grad-soft); font-size: 16px; }

/* ---------------------------------------------------------------------
   About split — image in a lit 3D frame
   --------------------------------------------------------------------- */
.wp-frame3d {
    position: relative;
    border-radius: var(--r-lg);
    transform-style: preserve-3d;
}
.wp-frame3d img { border-radius: var(--r-lg); box-shadow: 0 40px 80px rgba(7, 31, 102, .22); }
.wp-frame3d .badge3d {
    position: absolute;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 50px rgba(7, 31, 102, .18);
    border: 1px solid var(--line);
    transform: translateZ(50px);
    font-family: var(--font-head);
}
.wp-frame3d .badge3d .ic { width: 40px; height: 40px; border-radius: 12px; background: var(--grad-mint); color: #03383a; display: grid; place-items: center; font-size: 19px; }
.wp-frame3d .badge3d b { display: block; font-size: 16px; color: var(--navy); }
.wp-frame3d .badge3d small { font-size: 12px; color: var(--muted); }
.wp-frame3d .badge3d--a { top: 22px; right: -18px; animation: wpChipFloat 5s ease-in-out infinite; }
.wp-frame3d .badge3d--b { bottom: 28px; left: -22px; animation: wpChipFloat 6s -2s ease-in-out infinite; }
.wp-frame3d .badge3d--b .ic { background: var(--grad-brand); color: #8fe6ea; }

/* ---------------------------------------------------------------------
   AI strip — messages type in when scrolled into view
   --------------------------------------------------------------------- */
.wp-ai { box-shadow: 0 30px 70px rgba(7, 31, 102, .10); overflow: hidden; }
.wp-ai::before {
    content: "";
    position: absolute; top: -120px; right: -120px;
    width: 320px; height: 320px; border-radius: 50%;
    background: radial-gradient(circle, rgba(31, 176, 180, .28), transparent 65%);
    filter: blur(20px);
    pointer-events: none;
}
.wp-ai__chat { position: relative; perspective: 900px; }
.wp-bubble { opacity: 0; transform: translateY(14px) rotateX(-20deg); transform-origin: 50% 100%; transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.wp-ai.in .wp-bubble { opacity: 1; transform: none; }
.wp-ai.in .wp-bubble:nth-child(1) { transition-delay: .2s; }
.wp-ai.in .wp-bubble:nth-child(2) { transition-delay: .9s; }
.wp-ai.in .wp-bubble:nth-child(3) { transition-delay: 1.8s; }
.wp-ai.in .wp-bubble:nth-child(4) { transition-delay: 2.6s; }
.wp-bubble.user { box-shadow: 0 14px 30px rgba(7, 31, 102, .28); }

/* ---------------------------------------------------------------------
   CNetworQ band — beam of light sweeping across
   --------------------------------------------------------------------- */
.wp-cnq { box-shadow: 0 40px 80px rgba(7, 31, 102, .25); }
.wp-cnq::after {
    content: "";
    position: absolute; top: -50%; left: -20%;
    width: 30%; height: 200%;
    background: linear-gradient(90deg, transparent, rgba(143, 230, 234, .18), transparent);
    transform: skewX(-20deg);
    animation: wpBandBeam 7s ease-in-out infinite;
    pointer-events: none;
}
@keyframes wpBandBeam { 0% { left: -30%; } 60%, 100% { left: 120%; } }
.wp-cnq .badge { transition: transform .25s var(--ease-spring), background .25s; }
.wp-cnq .badge:hover { transform: translateY(-3px) scale(1.03); background: rgba(255, 255, 255, .2); }

/* ---------------------------------------------------------------------
   Contact + FAQ polish
   --------------------------------------------------------------------- */
.wp-card--form { box-shadow: 0 30px 70px rgba(7, 31, 102, .12); }
.wp-faq__item { transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.wp-faq__item:hover, .wp-faq__item.is-open { transform: translateX(6px); box-shadow: var(--shadow-sm); border-color: rgba(31, 176, 180, .5); }

/* Footer top edge gets a soft mint horizon. */
.wp-footer { position: relative; }
.wp-footer::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(31, 176, 180, .7), transparent);
}

/* ---------------------------------------------------------------------
   Reduced motion / touch
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .wp-reveal3d, .wp-words .w, .wp-bubble, .wp-list-check li, .wp-list-check .tick, .wp-card--row, .wp-cnq .badge, .wp-faq__item, .wp-step3d .n { opacity: 1 !important; transform: none !important; transition: none !important; }
    .wp-beam { display: none; }
    /* The truck stays parked with its doors shut; nothing loads or drives. */
    .wp-rig, .wp-rig *, .wp-van * { animation: none !important; }
    .wp-conv, .wp-pk, .wp-t__puffs, .wp-van__speed { display: none; }
    .wp-scene__stage { transform: none; }
    .wp-scene, .wp-chip3d, [data-tilt] { transform: none !important; }
    .wp-journey3d { height: auto; }
    .wp-journey3d__sticky { position: static; height: auto; padding: 80px 0; }
    .wp-jend { position: static; transform: none; opacity: 1; pointer-events: auto; margin: 20px auto 0; }
    body.wp-enter > * { animation: none !important; }
}
@media (hover: none) {
    [data-tilt] { transform: none !important; }
    .wp-hero::after { display: none; }
}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .wp-journey3d__layout { grid-template-columns: 260px 1fr; }
}
@media (max-width: 991px) {
    .wp-hero-grid { grid-template-columns: 1fr; }
    .wp-scene { max-width: 520px; }
    .wp-rig { --k: .82; }
    .wp-steps { grid-template-columns: 1fr; }
    .wp-rates-grid { grid-template-columns: 1fr; }
    .wp-journey3d { height: 380vh; }
    .wp-journey3d__layout { grid-template-columns: 1fr; gap: 12px; }
    .wp-jstage { grid-auto-flow: column; grid-auto-columns: 100%; overflow: hidden; }
    .wp-jstage__item { display: none; }
    .wp-jstage__item.is-live { display: flex; }
    .wp-jstop__lbl { font-size: 11px; }
    .wp-jstop__dot { width: 38px; height: 38px; font-size: 16px; }
    .wp-frame3d .badge3d--a { right: 0; }
    .wp-frame3d .badge3d--b { left: 0; }
}
/* Ending state: the hand-over panel is up, so make room for it. */
.wp-journey3d__head, .wp-journey3d__layout { transition: transform .6s var(--ease-out), opacity .4s var(--ease); }

@media (max-width: 767px) {
    .wp-section { padding: 64px 0; }
    .wp-hero { padding: 44px 0 70px; }
    .wp-hero h1 { font-size: clamp(32px, 9vw, 42px); }
    .wp-scene { aspect-ratio: 6 / 5; max-width: 420px; }
    .wp-rig { --k: .64; top: 70%; }
    .wp-chip3d { font-size: 11.5px; padding: 8px 11px; }
    .wp-chip3d--1 { top: 0; left: 0; }
    .wp-chip3d--2 { display: none; }
    .wp-chip3d--3 { bottom: 0; left: auto; right: 0; }
    .wp-journey3d { height: 340vh; }
    .wp-journey3d__head h2 { font-size: 22px; }
    .wp-journey3d__head p { display: none; }
    .wp-jmap { aspect-ratio: 1000 / 700; }
    /* Top-left of the map is empty (the route starts bottom-left and climbs),
       so the meter lives there on a phone instead of over "Delivered". */
    .wp-jmeter { top: 0; right: auto; left: 0; padding: 8px 10px; }
    .wp-jmeter .bar { width: 70px; }
    .wp-jmeter .lbl { display: none; }
    .wp-jend { width: 94%; padding: 14px; bottom: 2%; }
    .wp-jend p { display: none; }
    .wp-jend h3 { margin-bottom: 10px; }
    .wp-jend form { flex-direction: column; }
    .wp-journey3d.is-ending .wp-journey3d__head { opacity: 0; transform: translateY(-20px); }
    .wp-journey3d.is-ending .wp-journey3d__layout { transform: translateY(-110px); }
    .wp-jhint { display: none; }
    .wp-step3d__stage { height: 130px; }
    .wp-frame3d .badge3d { padding: 9px 12px; }
    .wp-frame3d .badge3d b { font-size: 14px; }
}


/* =====================================================================
   Landing polish layer — added after the 3D work above.

   Six things the page was missing rather than a restyle: a read-progress
   bar, a nav that shows where you are, a way back up, a sweep on the
   primary buttons, keyboard focus rings, and an FAQ that opens to the
   height of its own answer instead of a guessed 320px cap.
   Everything here is additive; no existing selector is overridden.
   ===================================================================== */

/* ---- 1. Read progress ------------------------------------------------
   Sits on the nav's own bottom border, so it reads as part of the bar
   rather than a second stripe above it. */
.wp-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 100%;
    z-index: 1001;
    pointer-events: none;
    background: transparent;
}
.wp-progress > i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg, #0f7478, #159599 45%, #8fe6ea);
    box-shadow: 0 0 12px rgba(21, 149, 153, .55);
    transform-origin: left center;
    transition: width .12s linear;
}
/* ---- 2. Nav: where am I ----------------------------------------------
   The underline already existed for :hover and .active — this only makes
   .active mean "the section you are looking at" instead of "Home, always",
   and gives the swap something to animate through. */
.wp-nav__links a::after { transition: width .34s var(--ease-out), background .3s ease; }
.wp-nav__links a.active { font-weight: 600; }

/* ---- 3. Back to top --------------------------------------------------
   Parked above the WhatsApp pill, which owns the bottom-right corner. */
.wp-totop {
    position: fixed;
    right: 24px;
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    width: 46px; height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-2);
    border-radius: 50%;
    /* Opaque, not glass: it spends the end of its life floating over the dark
       navy footer, where a translucent white turns into a grey smudge. */
    background: #fff;
    color: var(--navy);
    box-shadow: 0 6px 20px rgba(4, 20, 63, .28);
    cursor: pointer;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(.9);
    transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility .3s;
}
.wp-totop.is-on { opacity: 1; visibility: visible; transform: none; }
.wp-totop:hover { color: var(--text-mint); border-color: rgba(31, 176, 180, .55); transform: translateY(-3px); }
.wp-totop i { font-size: 19px; line-height: 1; }
@media (max-width: 640px) {
    .wp-totop { right: 14px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); width: 42px; height: 42px; }
}

/* ---- 4. Sweep on the solid buttons -----------------------------------
   A light band crosses once per hover. .wp-btn is already positioned and
   the arrow icons are real children, so the band goes in ::before at
   z-index 0 with the label lifted above it. */
.wp-btn--primary, .wp-btn--mint { position: relative; overflow: hidden; isolation: isolate; }
.wp-btn--primary > *, .wp-btn--mint > * { position: relative; z-index: 1; }
.wp-btn--primary::before, .wp-btn--mint::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 -60%;
    width: 45%;
    z-index: 0;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
    transform: skewX(-18deg);
    transition: left .65s var(--ease-out);
}
.wp-btn--primary:hover::before, .wp-btn--mint:hover::before { left: 115%; }

/* ---- 5. Keyboard focus -----------------------------------------------
   There was no focus style anywhere outside .wp-input, so tabbing through
   the page was invisible. :focus-visible keeps it off mouse clicks. */
:focus-visible {
    outline: 3px solid rgba(21, 149, 153, .55);
    outline-offset: 3px;
    border-radius: 6px;
}
.wp-hero :focus-visible,
.wp-journey3d :focus-visible,
.wp-cnq :focus-visible { outline-color: rgba(143, 230, 234, .9); }

/* ---- 6. FAQ opens to its own height ----------------------------------
   wepicks-modern.css animates to a flat 320px. Today's longest answer is
   225px at 320px wide, so nothing is clipped — but the easing runs against
   a number the content does not reach, which is what makes the open feel
   slack, and a longer answer added later would be cut off silently. The JS
   measures each answer into --faq-h; 320px stays as the no-JS fallback. */
.wp-faq__item.is-open .wp-faq__a { max-height: var(--faq-h, 320px); }
.wp-faq__q[aria-expanded] { cursor: pointer; }

/* ---- 7. Small brand touches ------------------------------------------ */
::selection { background: rgba(31, 176, 180, .28); color: var(--navy-3); }

/* A mint scrollbar on the desktop browsers that allow it. */
@supports (scrollbar-color: auto) {
    html { scrollbar-color: rgba(21, 149, 153, .55) transparent; scrollbar-width: thin; }
}

@media (prefers-reduced-motion: reduce) {
    .wp-progress > i { transition: none; }
    .wp-totop { transition: opacity .01s; }
    .wp-btn--primary::before, .wp-btn--mint::before { display: none; }
}

/* ---------------------------------------------------------------------
   Answer-first definition in the About column — the one sentence that
   answers "what is WePicks?" for people and for answer engines (it is the
   speakable target in the page's JSON-LD).
   --------------------------------------------------------------------- */
.wp-answer {
    margin: 0 0 14px;
    padding: 14px 18px;
    border-left: 3px solid var(--teal);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: rgba(31, 176, 180, .08);
    color: var(--ink);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.55;
}