/* ==========================================================================
   Lozy — E-commerce Warehousing (/services/ecommerce-warehousing)  ·  v1
   Page-scoped stylesheet. Loaded ONLY by FrontEndPanel/EcommerceWarehousing.blade.php.
   Never edit service-detail.css for this page: five other views share it.

   The page is one continuous walk through a warehouse, so the motion lives in a single
   progress number per section:
     --p  0..1   the section's travel through the viewport (one rAF listener, no library)
     --s  n      the stop it has reached, for staged scenes (0..n-1)
     --r  n      this element's place in a ladder (1-based)
     --k  0..1   derived: ((--s|--p) - --r + 1) clamped, i.e. "has my turn come"
   Every recipe below is arithmetic on those four. Nothing downstream of the driver reads
   the DOM, so scrolling back up rewinds the whole page for free.

   Two rules that are easy to break and are load-bearing here:
   · the root is overflow-x:clip, never hidden — `hidden` makes it a scroll container and
     silently kills every position:sticky inside it (this page is mostly sticky).
   · the ungated default of every recipe is its FINISHED state; the hidden start state is
     gated on `.js`. No JS, no animation, no missing content.

   Markup : resources/views/FrontEndPanel/EcommerceWarehousing.blade.php
            resources/views/FrontEndPanel/partials/ecommerce/*.blade.php
   Script : assets/js/ecommerce-warehousing.js
   Spec   : design-system/lozy-services/pages/ecommerce-warehousing.md
   ========================================================================== */

/* registered so --p/--s/--k are NUMBERS and stay inheritable: an unregistered custom
   property cannot be used in calc(), and the recipe then dies silently at its initial
   value (which looks exactly like "the animation ran instantly") */
@property --p {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

@property --s {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

@property --k {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

@property --i {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

@property --r {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

/* ---------------------------------------------------------------- tokens */
.ew-page {
    /* surfaces — light only, no dark band anywhere on this page */
    --paper: #FFFFFF;
    --surface: #F6F6F7;
    --surface-2: #EFEFF1;
    --line: #E6E6E8;
    --line-strong: #D5D5DA;

    --text: #17171A;
    --text-2: #5A5A5F;

    --red: #D71920;
    --red-deep: #C0161B;
    --red-fill: #D71920;

    --display: "Archivo", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", sans-serif;
    --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --maxw: 1240px;
    --gutter: 24px;
    --band: clamp(64px, 8vw, 132px);
    --ew-head: var(--headerheight, 91px);
    --ease: cubic-bezier(.16, 1, .3, 1);
    --ease-soft: cubic-bezier(.4, 0, .2, 1);

    font-family: var(--body);
    color: var(--text);
    background: var(--paper);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    overflow-x: clip;
}

.ew-page *,
.ew-page *::before,
.ew-page *::after {
    box-sizing: border-box;
}

.ew-page p,
.ew-page h1,
.ew-page h2,
.ew-page h3,
.ew-page h4,
.ew-page ul,
.ew-page ol,
.ew-page li,
.ew-page dl,
.ew-page dd,
.ew-page dt,
.ew-page figure,
.ew-page figcaption {
    margin: 0;
    padding: 0;
}

.ew-page ul,
.ew-page ol {
    list-style: none;
}

.ew-page img,
.ew-page svg {
    display: block;
    max-width: 100%;
}

.ew-page a {
    color: inherit;
    text-decoration: none;
}

.ew-page button {
    font: inherit;
    cursor: pointer;
}

.ew-page h1,
.ew-page h2,
.ew-page h3 {
    font-family: var(--display);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1;
    text-transform: uppercase;
}

.ew-page :focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
    border-radius: 4px;
}

.ew-wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gutter);
    position: relative;
    z-index: 2;
}

/* ------------------------------------------------------------ utilities */
.ew-mono {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    line-height: 1.25;
}

.ew-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-2);
}

.ew-eyebrow::before {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--red);
    flex: none;
}

.ew-h2 {
    margin-top: 16px;
    font-size: clamp(30px, 4.4vw, 60px);
    line-height: .98;
}

.ew-lead {
    font-size: clamp(15px, 1.35vw, 18px);
    line-height: 1.6;
    max-width: 46ch;
    color: var(--text-2);
}

.ew-body {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--text-2);
    max-width: 60ch;
}

.ew-note {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--text-2);
    border-top: 1px solid var(--line);
    padding-top: 10px;
    margin-top: 16px;
    max-width: 46ch;
}

.ew-tag {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    fill: var(--text-2);
    stroke: none;
}

.ew-num {
    font-variant-numeric: tabular-nums;
}

.ew-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 26px;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-2);
}

.ew-chip--live {
    color: #14603A;
    border-color: #B7DCC8;
    background: #F1FAF4;
}

.ew-chip--live::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1E8E52;
}

.ew-frame {
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--paper);
    box-shadow: 0 16px 40px rgba(23, 23, 26, .06);
    overflow: hidden;
    padding: clamp(10px, 1.4vw, 20px);
}

.ew-frame svg {
    width: 100%;
    height: auto;
}

/* ------------------------------------------------------------- buttons */
.ew-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 26px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    background: none;
    color: var(--text);
    font-family: var(--body);
    font-weight: 600;
    font-size: 15.5px;
    white-space: nowrap;
    will-change: transform;
    transition: background-color .22s var(--ease-soft), border-color .22s var(--ease-soft),
        color .22s var(--ease-soft), box-shadow .22s var(--ease-soft), transform .3s var(--ease);
}

.ew-btn svg {
    width: 18px;
    height: 18px;
    flex: none;
}

.ew-btn--primary {
    background: var(--red-fill);
    color: #fff;
    box-shadow: 0 10px 26px rgba(215, 25, 32, .20);
}

.ew-btn--primary:hover {
    background: var(--red-deep);
    box-shadow: 0 14px 34px rgba(215, 25, 32, .26);
}

.ew-btn--ghost {
    background: #fff;
    color: var(--text);
    border-color: var(--line-strong);
}

.ew-btn--ghost:hover {
    border-color: var(--text);
}

.ew-btn--lg {
    min-height: 52px;
    font-size: 16px;
    padding: 0 30px;
}

.ew-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--red-deep);
    font-weight: 600;
    font-size: 15px;
}

.ew-link:hover {
    color: var(--text);
}

/* --------------------------------------------------------- reveal prim */
.js .ew-rv {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity .52s var(--ease-soft), transform .52s var(--ease-soft);
    transition-delay: calc(var(--i, 0) * 55ms);
}

.js .ew-rv.is-in {
    opacity: 1;
    transform: none;
}

/* ------------------------------------------------------------- progress */
.ew-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 6000;
    pointer-events: none;
    display: none;
}

.js .ew-progress {
    display: block;
}

.ew-progress i {
    display: block;
    height: 100%;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: 0 50%;
    will-change: transform;
}

/* ============================================================== 01 HERO */
.ew-hero {
    position: relative;
    background: var(--paper);
}

.js .ew-hero {
    min-height: 330vh;
}

.ew-hero__stage {
    position: relative;
    min-height: 88svh;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
}

/* 100svh minus whatever chrome is still above it (the script keeps --ew-top current), so
   at rest the hero fills the visible screen exactly and the strip lands on the fold */
.js .ew-hero__stage {
    position: sticky;
    top: 0;
    height: calc(100svh - var(--ew-top, 0px));
    min-height: 0;
}

/* ------------------------------------------------------------ the warehouse strip
   A letterbox at rest that opens to the whole screen. The copy above it collapses as
   the page is scrolled, so the strip is never given a height it has to share and the
   headline is never laid over the drawing. */
.ew-hero__gate {
    position: relative;
    flex: 1 1 auto;
    min-height: 20svh;
    overflow: hidden;
    border-top: 1px solid var(--line-strong);
    background: var(--paper);
}

.ew-hero__art {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ew-hero__art svg {
    width: 100%;
    height: 100%;
}

/* when the four words arrive, this calms the drawing behind them so the type reads */
.ew-hero__veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: #fff;
    opacity: 0;
}

.js .ew-hero__veil {
    opacity: calc(clamp(0, calc((var(--p) - .26) * 2.2), 1) * .55);
}

.ew-hero__copy {
    position: relative;
    z-index: 3;
    width: 100%;
    flex: 0 0 auto;
    overflow: hidden;
}

/* the copy leaves by collapsing — max-height and padding both driven by the same progress
   number, because a border-box can never be shorter than its own padding. At rest the
   ceiling is the viewport (nothing is ever clipped); it only comes down once the scroll
   starts. */
.js .ew-hero__copy {
    --collapse: clamp(0, calc(var(--p) * 3.1), 1);
    max-height: calc((1 - var(--collapse)) * 100svh);
    opacity: calc(1 - clamp(0, calc(var(--p) * 4.2 - .1), 1));
    padding-top: calc((1 - var(--collapse)) * (var(--ew-head) + clamp(10px, 2.4vh, 26px)));
    padding-bottom: calc((1 - var(--collapse)) * clamp(10px, 2.4vh, 24px));
}

.ew-hero__crumbs {
    margin-bottom: clamp(10px, 1.6vw, 20px);
}

.ew-hero__crumbs .breadcrumps {
    margin: 0;
}

.ew-hero__title {
    margin-top: 12px;
    font-size: clamp(34px, 5.8vw, 72px);
    line-height: .92;
    letter-spacing: -.03em;
    font-stretch: 92%;
}

.ew-hero__title span {
    display: block;
}

/* keyframes, not a JS-added class: a later script error cannot leave the H1 invisible */
.js .ew-hero__title span {
    animation: ew-rise .74s var(--ease) both;
    animation-delay: calc(var(--i, 0) * 80ms);
}

@keyframes ew-rise {
    from {
        opacity: 0;
        transform: translate3d(0, 28px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.ew-hero__lead {
    margin-top: 16px;
}

.ew-hero__cta {
    display: flex;
    gap: 12px;
    margin-top: 22px;
    flex-wrap: wrap;
}

/* four proof numbers on one hairline row, given room to breathe so they do not read as a
   dense band between the buttons and the drawing */
.ew-hero__facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 16px;
    margin-top: 26px;
    border-top: 1px solid var(--line-strong);
    padding-top: 14px;
    max-width: 760px;
}

.ew-hero__facts dt {
    color: var(--text-2);
    font-size: 10px;
    letter-spacing: .13em;
}

.ew-hero__facts dd {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(17px, 1.5vw, 21px);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    margin-top: 3px;
}

/* the copy leaves by collapsing (see .js .ew-hero__copy above) — the legacy fade-and-lift
   pair was dropping the facts out from under the headline mid-scroll */

.ew-hero__cue {
    position: absolute;
    left: 50%;
    bottom: 26px;
    z-index: 3;
    transform: translateX(-50%);
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--text-2);
}

/* a "scroll to play it" hint only means something when the script is there to play it */
.js .ew-hero__cue {
    display: flex;
}

.ew-hero__cue i {
    width: 1px;
    height: 46px;
    background: linear-gradient(180deg, var(--line-strong), var(--red));
    transform-origin: 50% 0;
    animation: ew-cue 2.4s var(--ease-soft) infinite;
}

@keyframes ew-cue {
    0% {
        transform: scaleY(.2);
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    100% {
        transform: scaleY(1);
        opacity: 0;
    }
}

.js .ew-hero__cue {
    opacity: calc(1 - clamp(0, calc(var(--p) * 5), 1));
}

/* the camera move: the strip drifts as it opens, the far layers further than the near, so
   the elevation reads as depth without any perspective. The lane on the floor draws left
   to right, then its stop ticks appear. */
.ew-hero__art svg {
    width: 100%;
    height: 100%;
}

.js .ew-hero__art {
    transform: scale(calc(1 + var(--p) * .06));
    transform-origin: 50% 100%;
}

.js .ew-hero__art [data-ew-depth="0.55"] {
    transform: translate3d(calc(var(--p) * 26px), 0, 0);
}

.js .ew-hero__art [data-ew-depth="0.75"] {
    transform: translate3d(calc(var(--p) * 15px), 0, 0);
}

.js .ew-hero__art [data-ew-depth="0.9"] {
    transform: translate3d(calc(var(--p) * 6px), 0, 0);
}

/* the elevation's palette: ink outlines, paper fills, hairline detail, one red */
.ew-hs__ink,
.ew-hs__hair,
.ew-hs__red,
.ew-hs__bay,
.ew-hs__label {
    fill: none;
}

.ew-hs__ink,
.ew-hs__red,
.ew-hs__bay,
.ew-hs__label {
    stroke: var(--text);
}

.ew-hs__hair {
    stroke: var(--line-strong);
}

.ew-hs__paper {
    fill: var(--paper);
    stroke: var(--text);
}

.ew-hs__red,
.ew-hs__bay,
.ew-hs__label {
    stroke: var(--red);
}

.ew-hs__stop circle {
    fill: var(--red);
    stroke: none;
}

.ew-hs__route {
    fill: none;
    stroke: var(--red);
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}

.js .ew-hs__route {
    stroke-dashoffset: calc((1 - clamp(0, calc(var(--p) * 2.1), 1)) * 1);
}

.ew-hs__stop {
    opacity: 1;
}

.js .ew-hs__stop {
    opacity: clamp(0, calc((var(--p) - .26) * 5), 1);
}

/* the four words the camera passes. The dolly only exists when the script can play it —
   without JS the words would stack on top of the headline. --pd delays them until the
   headline has left, and each word holds at full strength for about 0.09 of the section
   before the next takes over (without the hold they are only ever seen mid-crossfade). */
.ew-dolly {
    display: none;
}

.js .ew-dolly {
    display: grid;
    position: absolute;
    inset: 0;
    z-index: 2;
    place-items: center;
    pointer-events: none;
}

.ew-dolly__item {
    grid-area: 1 / 1;
    text-align: center;
    color: var(--text);
}

.ew-dolly__item .ew-mono {
    color: var(--text-2);
    display: block;
    margin-bottom: 14px;
}

.ew-dolly__item b {
    display: block;
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(52px, 11vw, 168px);
    line-height: .9;
    letter-spacing: -.045em;
    text-transform: uppercase;
    font-stretch: 90%;
}

.js .ew-dolly__item {
    --pd: clamp(0, calc((var(--p) - .16) * 1.2), 1);
    --t: calc(var(--i) / 4);
    /* in over .08, hold for .09, out over .08: without the plateau the words are only
       ever seen mid-crossfade, and without kin starting at 0 the first word shows
       through the headline before the scroll has begun */
    --kin: clamp(0, calc((var(--pd) - var(--t)) * 12.5), 1);
    --kout: clamp(0, calc((var(--t) + .25 - var(--pd)) * 12.5), 1);
    opacity: calc(var(--kin) * var(--kout));
    transform: translate3d(0, calc((1 - var(--kin)) * 44px), 0);
}

/* ======================================================= 02 INVENTORY */
.ew-inv {
    background: var(--surface);
    padding: var(--band) 0;
    border-top: 1px solid var(--line);
}

.ew-bandhead {
    max-width: 62ch;
}

.ew-bandhead--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    gap: clamp(24px, 4vw, 72px);
    align-items: end;
    max-width: none;
}

.ew-inv__stage {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    gap: clamp(26px, 4vw, 64px);
    margin-top: clamp(30px, 4.4vw, 64px);
    align-items: start;
}

.ew-inv__scene {
    position: sticky;
    top: calc(var(--ew-head) + 24px);
}

.ew-inv__scene figcaption {
    color: var(--text-2);
    margin-top: 14px;
}

.ew-inv__panel {
    padding-top: clamp(8px, 2vw, 28px);
}

.ew-inv__panel>p:first-child {
    color: var(--text-2);
}

.ew-inv__card {
    margin-top: 18px;
    border-top: 1px solid var(--line-strong);
}

.ew-inv__card>div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}

.ew-inv__card dt {
    color: var(--text-2);
}

.ew-inv__card dd {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(18px, 2vw, 26px);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.ew-inv__panel .ew-body {
    margin-top: 22px;
}

/* the shelf: the slot is found, the scan sweeps it */
.js .ew-shelf__slot {
    opacity: clamp(0, calc((var(--p) - .26) * 7), 1);
}

.js .ew-shelf__dot {
    opacity: clamp(0, calc((var(--p) - .3) * 7), 1);
}

.js .ew-shelf__hl {
    transform-box: view-box;
    transform-origin: 304px 291px;
    opacity: clamp(0, calc((var(--p) - .38) * 6), 1);
    transform: scale(calc(1.55 - .55 * clamp(0, calc((var(--p) - .38) * 5), 1)));
}

.js .ew-shelf__beam {
    opacity: calc(.16 * clamp(0, calc((var(--p) - .46) * 5), 1));
}

/* ========================================================= 03 JOURNEY */
.ew-journey {
    position: relative;
    background: var(--paper);
}

.js .ew-journey {
    min-height: calc(8 * 78vh);
}

.ew-journey__stage {
    position: relative;
    padding: clamp(24px, 4vw, 56px) 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(8px, 1.4vw, 18px);
    overflow: hidden;
}

.js .ew-journey__stage {
    position: sticky;
    top: var(--ew-head);
    height: calc(100svh - var(--ew-head));
    /* the bottom padding has to clear the fixed Request-a-Call button and the WhatsApp
       bubble in the bottom-right corner, because the eighth stop column runs to the
       right edge of the container — a smaller pad puts "doorstep." under that button */
    padding: clamp(14px, 2vw, 26px) 0 clamp(100px, 12.5vh, 150px);
}

/* eyebrow + heading occupy the left column, the stop counter sits bottom-right —
   as a flex row the three children drifted into the middle of the page */
.ew-journey__head {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px 24px;
}

.ew-journey__head .ew-h2 {
    font-size: clamp(26px, 3.4vw, 46px);
}

.ew-journey__count {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    text-align: right;
    color: var(--text-2);
    white-space: nowrap;
}

.ew-journey__count b {
    font-family: var(--display);
    font-size: 26px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.ew-journey__frame {
    position: relative;
    overflow: hidden;
    background: var(--paper);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    /* the frame is the camera's gate: its height is whatever is left after the heading,
       the eight stops and the padding, so the whole scene always fits the screen. The
       bottom padding also keeps the last two stop columns clear of the site's fixed
       call button and WhatsApp bubble, which sit in the bottom-right corner. */
    height: clamp(220px, calc(100svh - var(--ew-head) - 430px), 560px);
}

/* With the script running the gate is fluid instead of clamped: the heading and the eight
   stops take their natural height (flex:0 0 auto on both) and the gate absorbs the rest.
   Clamping it was the bug — at a 850px-tall laptop window the column text was the thing
   that got squeezed, and the stage's overflow:hidden then cut it mid-sentence. */
.js .ew-journey__frame {
    height: auto;
    flex: 1 1 auto;
    min-height: 190px;
    max-height: 560px;
}

/* the camera. The scene is wider than its gate on purpose. It is absolutely positioned
   so the gate can be any height: the drawing is scaled by its WIDTH (190% of the gate)
   and `xMinYMax slice` crops the ceiling, never the floor or the station captions —
   that is what keeps the pan table below exact at every window height. */
.ew-page .ew-jscene {
    position: absolute;
    top: 0;
    left: 0;
    width: 190%;
    max-width: none;
    height: 100%;
    transition: transform .95s var(--ease);
    will-change: transform;
}

/* One rule per stop. The pan is in vw (a station's x in scene units x .0742vw, minus
   half the gate) so it does not depend on the gate's height; the gate can show
   190vw - 100vw = 90vw of travel, which is why stops 6-8 share the last value. */
.ew-journey[data-stage="0"] .ew-jscene {
    transform: translateX(0);
}

.ew-journey[data-stage="1"] .ew-jscene {
    transform: translateX(-1.9vw);
}

.ew-journey[data-stage="2"] .ew-jscene {
    transform: translateX(-25vw);
}

.ew-journey[data-stage="3"] .ew-jscene {
    transform: translateX(-47.2vw);
}

.ew-journey[data-stage="4"] .ew-jscene {
    transform: translateX(-70.2vw);
}

.ew-journey[data-stage="5"] .ew-jscene {
    transform: translateX(-89.5vw);
}

.ew-journey[data-stage="6"] .ew-jscene {
    transform: translateX(-90vw);
}

.ew-journey[data-stage="7"] .ew-jscene {
    transform: translateX(-90vw);
}

/* the parcel, one position per stop — a transition on the parcel, never a tween. The
   ungated position is the last stop (the finished picture); JS rewinds it to the first. */
.ew-parcel {
    transform: translate(2270px, 396px);
    transition: transform .85s var(--ease);
}

.ew-journey[data-stage="0"] .ew-parcel {
    transform: translate(150px, 396px);
}

.ew-journey[data-stage="1"] .ew-parcel {
    transform: translate(660px, 386px);
}

.ew-journey[data-stage="2"] .ew-parcel {
    transform: translate(930px, 250px);
}

.ew-journey[data-stage="3"] .ew-parcel {
    transform: translate(1300px, 324px);
}

.ew-journey[data-stage="4"] .ew-parcel {
    transform: translate(1600px, 352px);
}

.ew-journey[data-stage="5"] .ew-parcel {
    transform: translate(1850px, 352px);
}

.ew-journey[data-stage="6"] .ew-parcel {
    transform: translate(2100px, 396px);
}

.ew-journey[data-stage="7"] .ew-parcel {
    transform: translate(2270px, 396px);
}

.ew-parcel__label {
    transition: opacity .5s var(--ease-soft);
}

.ew-parcel__tick {
    transition: opacity .5s var(--ease-soft);
}

.ew-journey[data-stage="5"] .ew-parcel__label,
.ew-journey[data-stage="6"] .ew-parcel__label,
.ew-journey[data-stage="7"] .ew-parcel__label,
.ew-journey[data-stage="7"] .ew-parcel__tick {
    opacity: 1;
}

/* the scan gate fires once, at its own stop */
.ew-scanbeam {
    transition: opacity .45s var(--ease-soft);
}

.ew-journey[data-stage="1"] .ew-scanbeam {
    opacity: .16;
}

.ew-slot {
    transition: opacity .45s var(--ease-soft);
}

.ew-journey[data-stage="2"] .ew-slot {
    opacity: 1;
}

/* out of the gate: the parcel rides the van away */
.ew-van {
    transition: transform 1.1s var(--ease);
}

.ew-journey[data-stage="7"] .ew-van {
    transform: translateX(40px);
}

.ew-roadmarks {
    transition: opacity .5s var(--ease-soft);
}

.ew-journey[data-stage="7"] .ew-roadmarks {
    opacity: 1;
}

/* the route: leg r is drawn once the scroll has reached stop r (the --s / --r ladder).
   The ungated default is DRAWN (no JS, no missing line); only .js hides it to play it. */
.ew-leg {
    fill: none;
    stroke: var(--red);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    --k: 1;
}

.js .ew-leg {
    --k: clamp(0, calc((var(--s) - var(--r) + 1) * 10), 1);
    stroke-dashoffset: calc((1 - var(--k)) * 1);
    transition: stroke-dashoffset .7s var(--ease-soft);
}

.ew-leg[data-r="1"] {
    --r: 1;
}

.ew-leg[data-r="2"] {
    --r: 2;
}

.ew-leg[data-r="3"] {
    --r: 3;
}

.ew-leg[data-r="4"] {
    --r: 4;
}

.ew-leg[data-r="5"] {
    --r: 5;
}

.ew-leg[data-r="6"] {
    --r: 6;
}

.ew-leg[data-r="7"] {
    --r: 7;
}

.ew-slabel {
    font-family: var(--mono);
    font-size: 16px;
    letter-spacing: .15em;
    text-transform: uppercase;
    fill: var(--text-2);
    stroke: none;
}

.ew-sno {
    font-family: var(--display);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .06em;
    text-anchor: middle;
    fill: var(--line-strong);
    stroke: none;
    transition: fill .4s var(--ease-soft);
}

/* the stop that is live is the one that reads as ink */
.ew-journey__step {
    border-top: 1px solid var(--line);
    padding-top: 12px;
    color: var(--text-2);
    transition: color .4s var(--ease-soft), border-color .4s var(--ease-soft);
}

.ew-journey__step .ew-mono {
    color: inherit;
}

.ew-journey__step h3 {
    font-size: 15px;
    margin-top: 8px;
    letter-spacing: -.01em;
}

.ew-journey__step p {
    font-size: 13px;
    line-height: 1.5;
    margin-top: 6px;
}

/* the site's floating call pill steps aside while this page's text is behind it — the page
   runs full width, where the pill's corner would otherwise sit on top of captions */
.fixed-media {
    transition: opacity .28s var(--ease-soft), transform .28s var(--ease-soft);
}

.fixed-media.is-ew-behind {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    pointer-events: none;
}

.ew-journey__step.is-on {
    color: var(--text);
    border-color: var(--red);
}

/* the station ticks on the floor lane: each appears with its own stop */
.ew-tick {
    fill: none;
    stroke: var(--red);
    stroke-width: 2.2;
    stroke-linecap: round;
    opacity: 1;
}

.js .ew-tick {
    opacity: clamp(0, calc((var(--s) - var(--r) + 1) * 10), 1);
    transition: opacity .5s var(--ease-soft);
}

.ew-journey__steps {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: clamp(10px, 1.4vw, 22px);
}

/* =========================================================== 04 ORDER */
.ew-order {
    background: var(--surface);
    padding: var(--band) 0;
    border-top: 1px solid var(--line);
}

.ew-order__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(10px, 1.6vw, 20px);
    margin-top: clamp(30px, 4vw, 56px);
}

/* five equal columns, so each channel box sits exactly above the curve that leaves it
   (the drawing's curves start at 10/30/50/70/90% of its own width) */
.ew-order__channels {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.ew-order__channels li {
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--paper);
    padding: 14px 10px;
    text-align: center;
    font-weight: 600;
    transition: opacity .5s var(--ease-soft), border-color .5s var(--ease-soft);
}

.js .ew-order__channels li {
    --k: clamp(0, calc((var(--s) - var(--r) + 1) * 10), 1);
    opacity: calc(.42 + .58 * var(--k));
    border-color: color-mix(in srgb, var(--red) calc(var(--k) * 100%), var(--line-strong));
}

.ew-order__svg {
    display: block;
}

.ew-page .ew-flow {
    width: 100%;
    max-width: none;
    height: clamp(120px, 15vw, 200px);
}

.ew-lane {
    fill: none;
    stroke: var(--red);
    stroke-width: 2;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}

.js .ew-lane {
    stroke-dashoffset: calc((1 - var(--k)) * 1);
    --k: clamp(0, calc((var(--p) - var(--r) * .12) * 4), 1);
    transition: stroke-dashoffset .8s var(--ease-soft);
}

.ew-order__node {
    grid-column: 1 / -1;
    justify-self: center;
    text-align: center;
    border-top: 1px solid var(--red);
    padding-top: 12px;
    margin-top: clamp(20px, 3vw, 40px);
}

.ew-order__node .ew-mono {
    display: block;
    color: var(--text-2);
    margin-bottom: 6px;
}

.ew-order__node b {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(18px, 2.2vw, 28px);
    letter-spacing: -.02em;
}

.ew-order__pipe {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: clamp(24px, 3vw, 40px);
}

.ew-order__pipe li {
    position: relative;
    border-top: 2px solid var(--line-strong);
    padding-top: 14px;
    color: var(--text-2);
    transition: color .5s var(--ease-soft), border-color .5s var(--ease-soft);
}

.ew-order__pipe li::after {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    height: 2px;
    width: 100%;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .6s var(--ease);
}

.ew-order__pipe li.is-on {
    color: var(--text);
}

.ew-order__pipe li.is-on::after {
    transform: scaleX(1);
}

.ew-order__pipe b {
    display: block;
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(15px, 1.5vw, 20px);
    letter-spacing: -.015em;
    text-transform: uppercase;
    margin-top: 8px;
}

/* ======================================================= 05 PICK & PACK */
.ew-pp {
    background: var(--paper);
    padding: var(--band) 0;
    border-top: 1px solid var(--line);
}

.js .ew-pp {
    padding: 0;
    min-height: calc(380vw + 100svh);
}

.ew-pp__stage {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(18px, 2.6vw, 36px);
    overflow: hidden;
}

.js .ew-pp__stage {
    position: sticky;
    top: var(--ew-head);
    height: calc(100svh - var(--ew-head));
    padding: clamp(20px, 3vw, 44px) 0;
}

.ew-pp__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    gap: clamp(20px, 4vw, 64px);
    align-items: end;
}

.ew-pp__rail {
    margin-top: 22px;
    height: 2px;
    background: var(--line);
    position: relative;
    overflow: hidden;
}

.ew-pp__rail i {
    position: absolute;
    inset: 0;
    background: var(--red);
    transform: scaleX(var(--p));
    transform-origin: 0 50%;
}

.ew-pp__viewport {
    overflow: hidden;
}

.ew-pp__track {
    display: flex;
    gap: 24px;
    padding: 0 var(--gutter);
    will-change: transform;
    transform: translate3d(calc(var(--p) * -1 * (368vw + 168px)), 0, 0);
}

.ew-pp__panel {
    flex: 0 0 74vw;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(18px, 2.6vw, 44px);
    align-items: start;
    border-top: 2px solid var(--line-strong);
    padding-top: clamp(16px, 2vw, 28px);
}

.ew-page .ew-pp__art svg {
    width: 100%;
    height: auto;
    max-height: 48svh;
}

.ew-pp__meta {
    display: grid;
    gap: 12px;
    align-content: start;
    max-width: 46ch;
}

.ew-pp__meta .ew-mono {
    color: var(--red-deep);
}

.ew-pp__meta h3 {
    font-size: clamp(19px, 2.2vw, 30px);
    letter-spacing: -.02em;
}

.ew-pp__meta p {
    font-size: 15.5px;
    color: var(--text-2);
}

/* ======================================================== 06 KITTING */
.ew-kit {
    background: var(--surface);
    padding: var(--band) 0;
    border-top: 1px solid var(--line);
}

.ew-kit__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(26px, 4vw, 64px);
    align-items: start;
    margin-top: clamp(30px, 4vw, 60px);
}

.ew-kit__scene figcaption {
    color: var(--text-2);
    margin-top: 14px;
}

.ew-kit__flow {
    border-top: 1px solid var(--line-strong);
}

.ew-kit__flow li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 6px 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    color: var(--text-2);
    transition: color .45s var(--ease-soft);
}

.ew-kit__flow li.is-on {
    color: var(--text);
}

.ew-kit__flow b {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(16px, 1.6vw, 21px);
    letter-spacing: -.02em;
    text-transform: uppercase;
}

.ew-kit__flow p {
    grid-column: 2;
    font-size: 14.5px;
    line-height: 1.55;
}

.ew-kit__services {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-top: clamp(28px, 4vw, 52px);
}

.ew-kit__services li {
    background: var(--paper);
    padding: 20px 22px;
}

.ew-kit__services b {
    display: block;
    font-family: var(--display);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: -.015em;
    text-transform: uppercase;
}

.ew-kit__services span {
    display: block;
    font-size: 14px;
    color: var(--text-2);
    margin-top: 6px;
}

/* the workstation: the parts travel, the strap/pack/label appear — one rule per flag */
.ew-kit__part {
    transition: transform .75s var(--ease);
}

.ew-kit__part--a {
    transform: translate(58px, 116px);
}

.ew-kit__part--b {
    transform: translate(58px, 186px);
}

.ew-kit__part--c {
    transform: translate(58px, 256px);
}

.ew-kit.is-assembled .ew-kit__part--a {
    transform: translate(424px, 166px);
}

.ew-kit.is-assembled .ew-kit__part--b {
    transform: translate(424px, 200px);
}

.ew-kit.is-assembled .ew-kit__part--c {
    transform: translate(424px, 234px);
}

.ew-kit.is-out .ew-kit__part--a {
    transform: translate(846px, 154px);
}

.ew-kit.is-out .ew-kit__part--b {
    transform: translate(846px, 188px);
}

.ew-kit.is-out .ew-kit__part--c {
    transform: translate(846px, 222px);
}

.ew-kit__band,
.ew-kit__pack,
.ew-kit__label,
.ew-kit__tick {
    transition: opacity .5s var(--ease-soft), transform .6s var(--ease);
}

.ew-kit__pack,
.ew-kit__label {
    transform-box: view-box;
    transform-origin: 462px 220px;
    transform: scale(.9);
}

.ew-kit.is-packed .ew-kit__pack {
    opacity: 1;
    transform: scale(1);
}

.ew-kit.is-assembled .ew-kit__band {
    opacity: 1;
}

.ew-kit.is-labelled .ew-kit__label {
    opacity: 1;
    transform: scale(1);
}

.ew-kit.is-out .ew-kit__tick {
    opacity: 1;
}

/* the strap and pack travel to the shelf with the parts */
.ew-kit__band,
.ew-kit__pack {
    transform-box: view-box;
}

.ew-kit.is-out .ew-kit__band {
    transform: translate(422px, -12px);
}

.ew-kit.is-out .ew-kit__pack {
    transform: translate(422px, -12px);
}

.ew-kit.is-out .ew-kit__label {
    transform: translate(422px, -12px);
}

/* ======================================================== 07 RETURNS */
.ew-ret {
    background: var(--paper);
    padding: var(--band) 0;
    border-top: 1px solid var(--line);
}

.ew-ret__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(26px, 4vw, 64px);
    align-items: start;
    margin-top: clamp(30px, 4vw, 60px);
}

.ew-ret__scene figcaption {
    color: var(--text-2);
    margin-top: 14px;
}

.ew-ret__flow ol {
    border-top: 1px solid var(--line-strong);
}

.ew-ret__flow li {
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    color: var(--text-2);
    transition: color .45s var(--ease-soft);
}

.ew-ret__flow li.is-on {
    color: var(--text);
}

.ew-ret__flow b {
    display: block;
    font-family: var(--display);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -.02em;
    text-transform: uppercase;
    margin-top: 6px;
}

.ew-ret__flow p {
    font-size: 14.5px;
    line-height: 1.55;
    margin-top: 6px;
}

.ew-ret__outlabel {
    margin-top: 24px;
    color: var(--text-2);
}

.ew-ret__out {
    margin-top: 12px;
    display: grid;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    transition: opacity .5s var(--ease-soft);
}

.ew-ret__out li {
    background: var(--surface);
    padding: 14px 18px;
}

.ew-ret__out b {
    font-family: var(--display);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: -.01em;
    text-transform: uppercase;
}

.ew-ret__out span {
    display: block;
    font-size: 13.5px;
    color: var(--text-2);
    margin-top: 4px;
}

.js .ew-ret__out {
    opacity: .45;
}

.js .ew-ret.is-routed .ew-ret__out {
    opacity: 1;
}

.js .ew-ret.is-routed .ew-ret__out li {
    border-left: 2px solid var(--red);
}

/* the parcel: back in the dock, along the belt, onto the bench. Ungated default is the
   bench (finished); JS rewinds it into the van. */
.ew-ret__parcel {
    transform: translate(640px, 212px);
    transition: transform .8s var(--ease);
}

.ew-ret[data-stage="0"] .ew-ret__parcel {
    transform: translate(110px, 194px);
}

.ew-ret[data-stage="1"] .ew-ret__parcel {
    transform: translate(432px, 194px);
}

.ew-ret[data-stage="2"] .ew-ret__parcel {
    transform: translate(640px, 212px);
}

.ew-ret[data-stage="3"] .ew-ret__parcel {
    transform: translate(640px, 212px);
}

.ew-ret__light,
.ew-ret__qc {
    transition: opacity .5s var(--ease-soft);
}

.ew-ret[data-stage="2"] .ew-ret__light,
.ew-ret[data-stage="3"] .ew-ret__light {
    opacity: 1;
}

.ew-ret[data-stage="3"] .ew-ret__qc {
    opacity: 1;
}

/* ======================================================== 08 STOCK */
.ew-stock {
    background: var(--surface);
    padding: var(--band) 0;
    border-top: 1px solid var(--line);
}

.ew-stock__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(26px, 4vw, 64px);
    align-items: start;
    margin-top: clamp(30px, 4vw, 60px);
}

.ew-panel {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 16px 40px rgba(23, 23, 26, .06);
    padding: clamp(18px, 2.4vw, 30px);
}

.ew-stock__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
    color: var(--text-2);
}

.ew-stock__rows {
    margin-top: 6px;
}

.ew-stock__rows li {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(60px, 2fr) auto;
    align-items: center;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
}

.ew-stock__rows li:last-child {
    border-bottom: 0;
}

.ew-stock__name {
    font-size: 15px;
    color: var(--text-2);
}

.ew-stock__bar-track {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}

.ew-stock__bar-track i {
    display: block;
    height: 100%;
    width: var(--w, 0%);
    background: var(--red);
    border-radius: 999px;
}

.js .ew-stock__bar-track i {
    width: 0;
    transition: width .95s var(--ease);
}

.js .ew-stock__rows li.is-in .ew-stock__bar-track i {
    width: var(--w, 0%);
}

.ew-stock__rows b {
    font-family: var(--display);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -.02em;
}

.ew-stock__stats {
    display: grid;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

.ew-stock__stats>div {
    background: var(--paper);
    padding: 22px 24px;
}

.ew-stock__stats dt {
    color: var(--text-2);
}

.ew-stock__stats dd {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 10px;
}

.ew-stock__stats dd b {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(30px, 3.6vw, 54px);
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.ew-stock__stats dd span {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-2);
}

.ew-stock__stats p {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text-2);
    margin-top: 10px;
    max-width: 34ch;
}

/* ======================================================== 09 SCALE */
.ew-scale {
    background: var(--paper);
    padding: var(--band) 0;
    border-top: 1px solid var(--line);
}

.ew-scale__scene {
    margin-top: clamp(26px, 4vw, 52px);
}

.ew-scale__unit {
    opacity: 1;
}

.js .ew-scale__unit {
    --k: clamp(0, calc((var(--s) - var(--i) + 1.6) * 4), 1);
    opacity: calc(.2 + .8 * var(--k));
    transform: translateY(calc((1 - var(--k)) * 10px));
    transition: opacity .8s var(--ease-soft), transform .8s var(--ease);
}

.ew-scale__tiers {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-top: clamp(24px, 3vw, 44px);
}

.ew-scale__tiers li {
    background: var(--paper);
    padding: 22px 24px;
    color: var(--text-2);
    transition: color .45s var(--ease-soft);
}

.ew-scale__tiers li.is-on {
    color: var(--text);
}

.ew-scale__tiers b {
    display: block;
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(28px, 3.4vw, 46px);
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.ew-scale__tiers .ew-mono {
    display: block;
    margin-top: 8px;
}

.ew-scale__tiers p {
    font-size: 14.5px;
    line-height: 1.55;
    margin-top: 12px;
}

/* ====================================================== 10 HANDLES */
.ew-handles {
    background: var(--surface);
    padding: var(--band) 0;
    border-top: 1px solid var(--line);
}

.ew-handles__body {
    margin-top: clamp(28px, 4vw, 52px);
}

.ew-handles__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
    gap: clamp(26px, 4vw, 72px);
    align-items: start;
}

.ew-handles__list {
    border-top: 1px solid var(--line-strong);
}

.ew-handles__row {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1.25fr);
    align-items: baseline;
    gap: 18px;
    width: 100%;
    min-height: 64px;
    padding: 18px 6px 18px 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: none;
    text-align: left;
    color: var(--text-2);
    transition: color .35s var(--ease-soft), padding-left .35s var(--ease);
}

.ew-handles__row:hover {
    color: var(--text);
    padding-left: 10px;
}

.ew-handles__title {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(18px, 2.1vw, 28px);
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: var(--text);
}

.ew-handles__line {
    font-size: 15px;
    line-height: 1.55;
}

.ew-handles__row[aria-pressed="true"] {
    border-bottom-color: var(--red);
}

.ew-handles__row[aria-pressed="true"] .ew-handles__line {
    color: var(--text);
}

.ew-handles__panel {
    position: sticky;
    top: calc(var(--ew-head) + 32px);
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--paper);
    box-shadow: 0 16px 40px rgba(23, 23, 26, .06);
    padding: clamp(22px, 2.6vw, 34px);
    min-height: 300px;
}

.ew-handles__pane {
    display: grid;
    gap: 14px;
}

.js .ew-handles__pane {
    display: none;
}

.js .ew-handles__pane.is-on {
    display: grid;
}

.ew-handles__glyph {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    border: 1px solid var(--line-strong);
    display: grid;
    place-items: center;
    color: var(--red-deep);
}

.ew-handles__glyph svg {
    width: 26px;
    height: 26px;
}

.ew-handles__pane-title {
    font-family: var(--display);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -.02em;
    text-transform: uppercase;
}

.ew-handles__pane p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-2);
}

/* ========================================================== 11 WHO */
.ew-who {
    background: var(--paper);
    padding: var(--band) 0;
    border-top: 1px solid var(--line);
}

.ew-who__body {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(26px, 4vw, 72px);
    align-items: start;
    margin-top: clamp(28px, 4vw, 52px);
}

.ew-who__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ew-who__row {
    min-height: 44px;
    padding: 0 18px;
    border: 1.5px solid var(--line-strong);
    border-radius: 999px;
    background: var(--paper);
    color: var(--text-2);
    font-weight: 600;
    font-size: 14.5px;
    transition: color .3s var(--ease-soft), border-color .3s var(--ease-soft), background-color .3s var(--ease-soft);
}

.ew-who__row:hover {
    border-color: var(--text);
    color: var(--text);
}

.ew-who__row[aria-pressed="true"] {
    background: var(--text);
    border-color: var(--text);
    color: #fff;
}

.ew-who__panes {
    border-top: 1px solid var(--line-strong);
}

.ew-who__pane {
    padding-top: 22px;
}

.js .ew-who__pane {
    display: none;
}

.js .ew-who__pane.is-on {
    display: block;
}

.ew-who__pane>b {
    display: block;
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(22px, 2.6vw, 34px);
    letter-spacing: -.025em;
    text-transform: uppercase;
}

.ew-who__pane>p {
    font-size: 16.5px;
    line-height: 1.6;
    margin-top: 12px;
    max-width: 52ch;
}

.ew-who__ops {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.ew-who__ops li {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13.5px;
    color: var(--text-2);
    background: var(--surface);
}

/* ========================================================== 12 WHY */
.ew-why {
    background: var(--surface);
    padding: var(--band) 0;
    border-top: 1px solid var(--line);
}

.ew-why__list {
    margin-top: clamp(28px, 4vw, 52px);
    border-top: 1px solid var(--line-strong);
}

.ew-why__item {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) minmax(0, .95fr);
    gap: clamp(16px, 3vw, 56px);
    align-items: start;
    padding: clamp(24px, 3.4vw, 46px) 0;
    border-bottom: 1px solid var(--line);
}

.ew-why__no {
    color: var(--text-2);
    padding-top: 12px;
}

.ew-why__title {
    font-size: clamp(26px, 3.6vw, 52px);
    line-height: .98;
    letter-spacing: -.03em;
}

.ew-why__line {
    font-size: 16px;
    line-height: 1.65;
    color: var(--text-2);
    max-width: 46ch;
    padding-top: 6px;
}

.ew-why__item {
    --k: clamp(0, calc((var(--p) - var(--i) * .14) * 5), 1);
}

.js .ew-why__title {
    opacity: calc(.25 + .75 * var(--k));
    transform: translate3d(0, calc((1 - var(--k)) * 20px), 0);
    transition: opacity .6s var(--ease-soft), transform .6s var(--ease);
}

.js .ew-why__line {
    opacity: calc(.2 + .8 * var(--k));
    transition: opacity .6s var(--ease-soft);
}

/* ======================================================== 13 INDIA */
.ew-india {
    background: var(--paper);
    padding: var(--band) 0;
    border-top: 1px solid var(--line);
}

.ew-india__grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(26px, 4vw, 64px);
    align-items: start;
    margin-top: clamp(28px, 4vw, 52px);
}

.ew-india__figure {
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--paper);
    padding: clamp(12px, 2vw, 26px);
    box-shadow: 0 16px 40px rgba(23, 23, 26, .06);
}

.ew-page .ew-map__svg {
    width: 100%;
    max-width: 560px;
    height: auto;
    margin: 0 auto;
}

.ew-india__figure figcaption {
    color: var(--text-2);
    margin-top: 16px;
    text-align: center;
}

/* the country is drawn, not a screenshot: one light grey fill and a hairline coast, so
   the red network reads at a glance and nothing on the page goes dark */
.ew-map__land-path {
    fill: #EFEFF1;
    stroke: #D5D5DA;
    stroke-width: 1.1;
    stroke-linejoin: round;
}

.ew-pin__dot {
    fill: var(--red);
}

.ew-pin__halo {
    fill: none;
    stroke: var(--red);
    stroke-width: 1.4;
    opacity: 0;
}

.js .ew-pin {
    --k: clamp(0, calc((var(--p) - var(--r) * .7 - .25) * 4), 1);
    opacity: calc(.35 + .65 * var(--k));
}

.js .ew-pin__halo {
    opacity: calc(.55 * clamp(0, calc((var(--p) - var(--r) * .72 - .16) * 4), 1));
    transition: opacity .6s var(--ease-soft);
}

.ew-map__lanes .ew-lane {
    stroke-width: 1.6;
    opacity: .85;
}

.js .ew-map__lanes .ew-lane {
    --k: clamp(0, calc((var(--p) - var(--r)) * 3.2), 1);
    stroke-dashoffset: calc((1 - var(--k)) * 1);
}

.ew-india__rel {
    border-top: 1px solid var(--line-strong);
}

.ew-india__rel li {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    color: var(--text-2);
    transition: color .45s var(--ease-soft);
}

.ew-india__rel li.is-on {
    color: var(--text);
}

.ew-india__rel b {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(18px, 2vw, 26px);
    letter-spacing: -.02em;
    text-transform: uppercase;
}

.ew-india__aside .ew-body {
    margin-top: 22px;
}

.ew-india__places {
    margin-top: 22px;
    color: var(--text-2);
    line-height: 1.9;
    letter-spacing: .08em;
    border-top: 1px solid var(--line);
    padding-top: 16px;
    column-count: 2;
    column-gap: 28px;
    max-width: 62ch;
}

/* ========================================================== 14 CTA */
.ew-cta {
    background: var(--paper);
    padding: clamp(72px, 11vw, 190px) 0 clamp(56px, 8vw, 120px);
    border-top: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}

/* the one red glow on the page, behind the closing statement */
.ew-cta::before {
    content: "";
    position: absolute;
    right: -10%;
    top: 50%;
    width: min(60vw, 760px);
    aspect-ratio: 1;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(215, 25, 32, .10), rgba(215, 25, 32, 0) 68%);
    pointer-events: none;
}

.ew-cta__title {
    margin-top: 20px;
    font-size: clamp(38px, 7vw, 104px);
    line-height: .9;
    letter-spacing: -.035em;
}

.ew-cta__sub {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(20px, 2.6vw, 40px);
    letter-spacing: -.025em;
    text-transform: uppercase;
    color: var(--text-2);
    margin-top: 14px;
}

.ew-cta__row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: clamp(28px, 4vw, 46px);
}

.ew-cta__note {
    margin-top: 20px;
    color: var(--text-2);
}

/* ==================================================== responsive 1100 */
@media (max-width: 1100px) {

    .ew-bandhead--split,
    .ew-inv__stage,
    .ew-kit__grid,
    .ew-ret__grid,
    .ew-stock__grid,
    .ew-handles__grid,
    .ew-who__body,
    .ew-india__grid,
    .ew-pp__head,
    .ew-order__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ew-inv__scene,
    .ew-handles__panel {
        position: static;
    }

    .ew-journey__steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        row-gap: 20px;
    }

    .ew-order__svg {
        height: 140px;
    }

    .ew-page .ew-flow {
        height: 140px;
    }

    .ew-who__list {
        margin-bottom: 8px;
    }

    .ew-why__item {
        grid-template-columns: 60px minmax(0, 1fr);
        row-gap: 12px;
    }

    .ew-why__line {
        grid-column: 2;
        padding-top: 0;
    }

    .ew-stock__rows li {
        grid-template-columns: minmax(96px, 1fr) minmax(48px, 1.4fr) auto;
        gap: 12px;
    }
}

/* ===================================================== responsive 900 */
/* A small tablet in landscape has neither the width for eight readable columns nor the
   height for two rows of descriptions: the stops keep their names and drop the copy. */
@media (max-width: 1100px) and (max-height: 820px) {

    .ew-page .ew-journey__step p {
        display: none;
    }

    .ew-page .ew-journey__step h3 {
        font-size: 13.5px;
    }
}

/* short phones: the proof numbers are the first thing to go so the drawing keeps its
   strip — the same figures are in the coverage section further down */
@media (max-width: 640px) and (max-height: 720px) {

    .ew-page .ew-hero__facts {
        display: none;
    }

    .ew-page .ew-hero__title {
        font-size: clamp(30px, 8.4vw, 46px);
    }
}

@media (max-width: 900px) {

    /* the phone camera: same scene, drawn wider than the gate and panned like a camera
       tracking the parcel. Specificity has to beat `.ew-page svg{max-width:100%}` (0,1,1).
       Back in flow (not absolute) so the gate takes the drawing's own height, which is
       what the percentage pan table below assumes. The width is capped by the height that
       is actually free, so a short window gets a smaller complete drawing instead of a
       cropped one or a stage that clips its own stop list. */
    .ew-page .ew-jscene {
        position: static;
        width: max(130%, min(300%, calc((100svh - 520px) * 4.74)));
        height: auto;
    }

    /* `.ew-page .x` (0,2,0) again: the base rule for this frame is `.js .ew-journey__frame`,
       so a bare class here would lose and the gate would stretch past the drawing on a
       phone (a tall empty band under the scene) */
    .ew-page .ew-journey__frame {
        height: auto;
        flex: 0 0 auto;
        min-height: 0;
        max-height: none;
    }

    /* below 900px the drawing needs the vertical room, so the stops keep their names and
       drop the copy (it is in the markup, and it is the section's body copy on desktop) */
    .ew-page .ew-journey__step p {
        display: none;
    }

    .ew-page .ew-journey__step h3 {
        font-size: 13px;
    }

    .ew-journey[data-stage="1"] .ew-jscene {
        transform: translateX(-10.7%);
    }

    .ew-journey[data-stage="2"] .ew-jscene {
        transform: translateX(-22.8%);
    }

    .ew-journey[data-stage="3"] .ew-jscene {
        transform: translateX(-34.5%);
    }

    .ew-journey[data-stage="4"] .ew-jscene {
        transform: translateX(-46.6%);
    }

    .ew-journey[data-stage="5"] .ew-jscene {
        transform: translateX(-56.8%);
    }

    .ew-journey[data-stage="6"] .ew-jscene {
        transform: translateX(-66.7%);
    }

    .ew-journey[data-stage="7"] .ew-jscene {
        transform: translateX(-66.7%);
    }

    /* the sideways track becomes a stack: no sideways scrolling on a phone.
       `.ew-page .x` (0,2,0) ties with the `.js .x` layout rules above and wins on order —
       a bare `.x` here would lose to them and the section would stay pinned and bleed
       into the section below. */
    .ew-page .ew-pp {
        min-height: 0;
        padding: 0 0 var(--band);
    }

    .ew-page .ew-pp__stage {
        position: static;
        height: auto;
        overflow: visible;
        padding: 0;
    }

    .ew-pp__viewport {
        overflow: visible;
    }

    .ew-pp__track {
        display: grid;
        gap: clamp(28px, 7vw, 48px);
        padding: 0 var(--gutter);
        transform: none;
    }

    .ew-pp__panel {
        flex: none;
        border-top: 1px solid var(--line);
        grid-template-columns: minmax(0, 1fr);
    }

    .ew-page .ew-pp__art svg {
        max-height: none;
    }

    .ew-page .ew-map__svg {
        max-width: 420px;
    }
}

/* ===================================================== responsive 640 */
@media (max-width: 640px) {

    /* phones keep a shorter hero than a laptop, but not so short that the four words
       fly past: `.ew-page .x` again, to out-rank the `.js .ew-hero` above */
    .ew-page .ew-hero {
        min-height: 300vh;
    }

    /* a phone needs more of the screen for the copy at rest, and less strip */
    .js .ew-hero__copy {
        padding-top: calc((1 - var(--collapse)) * (var(--ew-head) + 14px));
        padding-bottom: calc((1 - var(--collapse)) * 16px);
    }

    .ew-hero__gate {
        min-height: 20svh;
    }

    /* the crumb line is the least useful thing in a phone hero, and the four proof
       numbers fold onto one row — together that is ~90px the drawing gets to keep */
    .ew-hero__crumbs {
        display: none;
    }

    .ew-hero__facts {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .ew-hero__facts dt {
        font-size: 9.5px;
        letter-spacing: .12em;
    }

    .ew-hero__facts dd {
        font-size: 16px;
    }

    .ew-hero__title {
        font-size: clamp(30px, 9vw, 52px);
    }

    .ew-dolly__item b {
        font-size: clamp(46px, 17vw, 92px);
    }

    .ew-hero__facts {
        gap: 18px 26px;
    }

    .ew-hero__facts dd {
        font-size: 20px;
    }

    .ew-journey__steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        row-gap: 16px;
    }

    /* a phone has no room for eight descriptions under the camera; the stop names stay,
       and the descriptions stay in the markup (they are the section's copy on desktop) */
    .ew-journey__step p {
        display: none;
    }

    .ew-journey__step h3 {
        font-size: 12.5px;
    }

    .ew-kit__services,
    .ew-scale__tiers {
        grid-template-columns: minmax(0, 1fr);
    }

    .ew-order__pipe {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 18px;
    }

    .ew-handles__row {
        grid-template-columns: 40px minmax(0, 1fr);
        row-gap: 6px;
    }

    .ew-handles__line {
        grid-column: 2;
    }

    .ew-stock__rows li {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .ew-stock__bar-track {
        grid-column: 1 / -1;
    }

    .ew-journey__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ============================================== prefers-reduced-motion
   Every recipe resolves to its finished state: --p is pinned to 1 and the scenes are
   told to jump instead of travel. Nothing is hidden and nothing moves. */
@media (prefers-reduced-motion: reduce) {

    .ew-page {
        --p: 1;
        --s: 12;
    }

    /* `.ew-page .x` (0,2,0) so these tie with the `.js .x` layout rules above and win on
       order — a media query does not add specificity, so a bare `.x` here would lose. */
    .ew-page .ew-journey__stage,
    .ew-page .ew-pp__stage,
    .ew-page .ew-hero__stage {
        position: static;
        height: auto;
        min-height: 0;
    }

    .ew-page .ew-journey {
        min-height: 0;
    }

    .ew-page .ew-pp {
        min-height: 0;
        padding: 0 0 var(--band);
    }

    /* a hero with no camera to move is just a hero: 330vh of pinned scroll would be
       2 screens of empty page for a visitor who asked for less motion */
    .ew-page .ew-hero {
        min-height: 88vh;
    }

    /* the stage fills that 88vh so the strip still lands on the fold */
    .ew-page .ew-hero__stage {
        min-height: 88svh;
    }

    .ew-page .ew-progress,
    .ew-page .ew-hero__cue {
        display: none;
    }

    .ew-progress,
    .ew-hero__cue {
        display: none;
    }

    /* the hero's copy must never be left faded out — or collapsed to nothing — by a
       pinned progress number it is no longer tracking */
    .js .ew-hero__copy,
    .js .ew-hero__facts {
        --collapse: 0;
        opacity: 1;
        transform: none;
    }

    .js .ew-dolly__item {
        opacity: 0;
    }

    .ew-page .ew-jscene,
    .ew-parcel,
    .ew-leg,
    .ew-flow .ew-lane,
    .ew-pp__track,
    .ew-kit__part,
    .ew-kit__band,
    .ew-kit__pack,
    .ew-kit__label,
    .ew-ret__parcel,
    .ew-map__lanes .ew-lane,
    .ew-stock__bar-track i {
        transition: none !important;
    }

    .js .ew-hero__title span,
    .js .ew-rv {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .ew-hero__cue i {
        animation: none;
    }

    .js .ew-hero__art,
    .js .ew-hero__art [data-ew-depth] {
        transform: none;
    }

    .js .ew-hero__copy,
    .js .ew-hero__facts {
        opacity: 1;
        transform: none;
    }

    /* the pinned tracks stop being cameras and become ordinary lists */
    .ew-pp__viewport {
        overflow-x: auto;
    }

    .ew-pp__track {
        transform: none;
    }

    .ew-why__item {
        --k: 1;
    }
}