/* ==========================================================================
   Lozy — Services Hub (/services)  ·  v2 — LIGHT
   Page-scoped stylesheet. Loaded ONLY by FrontEndPanel/WarehouseSolutions.blade.php.
   Never edit service-detail.css for this page: 5 other views share it.

   v2: no dark bands. The page is white / light grey with a single red accent —
   no black or near-black surfaces anywhere. Text stays dark grey because that is
   what makes it readable on white; nothing else is dark.

   Markup : resources/views/FrontEndPanel/WarehouseSolutions.blade.php
   Script : assets/js/services-hub.js
   Spec   : design-system/lozy-services/pages/services-hub.md
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
.sh-page{
  /* surfaces — light only */
  --paper:#FFFFFF;
  --surface:#F6F6F7;       /* the grey band that alternates with white */
  --surface-2:#EFEFF1;     /* raised panel inside a grey band */
  --line:#E6E6E8;          /* hairline */
  --line-strong:#D5D5DA;   /* a rule that must be visible on its own */

  /* text */
  --text:#17171A;          /* 16.9:1 on white */
  --text-2:#5A5A5F;        /* 7.4:1 on white — body, labels, captions */

  /* one accent */
  --red:#D71920;           /* rules, icons, focus, decoration */
  --red-deep:#C0161B;      /* red TEXT under 18.66px — 6.23:1 on white */
  --red-fill:#D71920;      /* the same red everywhere — 5.19:1 with a white label */

  --display:-apple-system, BlinkMacSystemFont, "SF Pro", "SF Pro Display", "SF Pro Text", sans-serif;
  --body:-apple-system, BlinkMacSystemFont, "SF Pro", "SF Pro Display", "SF Pro Text", sans-serif;
  --mono:ui-monospace, SFMono-Regular, "SF Mono", monospace;

  --maxw:1240px;
  --gutter:24px;
  --band:clamp(72px,9vw,136px);

  --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;
  /* clip, not hidden: `overflow-x:hidden` turns .sh-page into a scroll container and
     silently kills every position:sticky inside it (the preview panel and the milestone
     aside). `clip` contains the same overflow without creating one. */
  overflow-x:hidden;
  overflow-x:clip;
}
.sh-page *,.sh-page *::before,.sh-page *::after{box-sizing:border-box}
.sh-page p,.sh-page h1,.sh-page h2,.sh-page h3,.sh-page h4,.sh-page ul,.sh-page li,.sh-page figure{margin:0;padding:0}
.sh-page ul{list-style:none}
.sh-page img,.sh-page svg{display:block;max-width:100%}
.sh-page a{color:inherit;text-decoration:none}
.sh-page button{font:inherit;cursor:pointer}
.sh-page h1,.sh-page h2,.sh-page h3{font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1}

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

/* keyboard focus — visible on every control and every row */
.sh-page :focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}

/* ------------------------------------------------------------ utilities */
.sh-mono{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing: 0.012em;
  text-transform:uppercase;line-height:1.2}
.sh-eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--text-2)}
.sh-eyebrow::before{content:"";width:26px;height:1px;background:var(--red);flex:none}
.sh-lead{font-size:clamp(15px,1.35vw,18px);line-height:1.6;max-width:46ch;color:var(--text-2)}

/* reveal primitives — visible unless JS is present, then animated in */
.js .sh-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 .sh-rv.is-in{opacity:1;transform:none}

/* -------------------------------------------------------------- buttons */
.sh-btn{position:relative;display:inline-flex;align-items:center;gap:10px;
  min-height:48px;padding:0 26px;border-radius:999px;border:0;background:none;color:var(--text);
  font-family:var(--body);font-weight:600;font-size:15.5px;letter-spacing:.01em;
  white-space:nowrap;transition:background-color .22s var(--ease-soft),color .22s var(--ease-soft),
  border-color .22s var(--ease-soft),transform .3s var(--ease),box-shadow .22s var(--ease-soft);
  will-change:transform}
.sh-btn svg{width:18px;height:18px;flex:none}
.sh-btn--primary{background:var(--red-fill);color:#fff;box-shadow:0 10px 26px rgba(237,28,36,.20)}
.sh-btn--primary:hover{background:var(--red-deep);box-shadow:0 14px 34px rgba(237,28,36,.26)}
.sh-btn--ghost{background:#fff;color:var(--text);border:1.5px solid var(--line-strong)}
.sh-btn--ghost:hover{border-color:var(--text);background:#fff}
.sh-btn--lg{min-height:52px;font-size:16px;padding:0 30px}

/* ------------------------------------------------------- scroll progress */
.sh-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:6000;
  pointer-events:none;background:transparent}
.sh-progress i{display:block;height:100%;background:var(--red);transform:scaleX(0);
  transform-origin:0 50%;will-change:transform}

/* --------------------------------------------------------- custom cursor */
.sh-cursor,.sh-cursor__dot{position:fixed;top:0;left:0;z-index:5999;pointer-events:none;
  border-radius:50%;opacity:0;transition:opacity .3s ease}
/* difference-blend keeps the ring visible on white and on the grey bands without
   introducing a second colour */
.sh-cursor{width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid #17171A;
  mix-blend-mode:difference;display:grid;place-items:center;
  transition:opacity .3s ease,width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),
  background-color .3s var(--ease),border-color .3s var(--ease)}
.sh-cursor span{font-family:var(--mono);font-size:9.5px;letter-spacing: 0.012em;text-transform:uppercase;
  color:#fff;opacity:0;transform:scale(.6);transition:opacity .2s ease,transform .3s var(--ease)}
.sh-cursor__dot{width:4px;height:4px;margin:-2px 0 0 -2px;background:var(--red)}
.sh-cursor.is-on,.sh-cursor__dot.is-on{opacity:1}
.sh-cursor.is-view{width:80px;height:80px;margin:-40px 0 0 -40px;background:var(--red-fill);
  border-color:var(--red-fill);mix-blend-mode:normal}
.sh-cursor.is-view span{opacity:1;transform:none}

/* ============================================================ 01 · HERO */
.sh-band{position:relative}
.sh-band--light{background:var(--paper)}
.sh-band--grey{background:var(--surface)}

.sh-hero{position:relative;padding:clamp(44px,5.4vw,80px) 0 clamp(40px,5vw,64px);
  overflow:hidden;isolation:isolate;color:var(--text);
  background:
    radial-gradient(720px 420px at 88% -8%,rgba(237,28,36,.10),transparent 62%),
    linear-gradient(180deg,#FFFFFF 0%,#FBFBFC 55%,var(--surface) 100%)}
/* single column: the headline owns the full container, the unit wall sits behind it.
   (Two columns forced the H1 below ~54% of the container and it wrapped to 6 lines.) */
.sh-hero__grid{display:grid;grid-template-columns:minmax(0,1fr)}
.sh-hero__copy{position:relative;z-index:3;max-width:min(1040px,100%)}
.sh-hero__title{margin:18px 0 0;font-family:var(--display);font-weight:800;
  font-size:clamp(36px,6.4vw,86px);line-height:.92;letter-spacing:-.03em;text-transform:uppercase;
  font-stretch:92%;color:var(--text)}
.sh-hero__title span{display:block}
/* keyframes, not a JS-added class: if the script loads but errors later, the headline
   still finishes its entrance */
.js .sh-hero__title span{animation:sh-rise .72s var(--ease) both;
  animation-delay:calc(var(--i,0) * 70ms)}
@keyframes sh-rise{from{opacity:0;transform:translate3d(0,26px,0)}
  to{opacity:1;transform:none}}
.sh-hero__lead{margin-top:22px}
.sh-hero__cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}

/* the unit wall — decoration only, so it is aria-hidden and pointer-events:none */
.sh-wall{position:absolute;top:50%;right:calc((100% - min(100%,var(--maxw)))/2 - 4%);
  width:min(52vw,780px);aspect-ratio:1/1;transform:translateY(-50%);
  z-index:1;pointer-events:none;opacity:1;
  -webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 58%,transparent 100%)}
.sh-wall canvas{width:100%;height:100%}
/* a white scrim keeps the headline readable where it crosses the artwork */
.sh-hero__copy::after{content:"";position:absolute;inset:-14% -8% -14% -34%;z-index:-1;
  background:radial-gradient(closest-side,rgba(255,255,255,.95) 58%,rgba(255,255,255,0) 100%)}

.sh-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin-top:clamp(40px,5vw,68px);border-top:1px solid var(--line-strong);
  position:relative;z-index:3}
.sh-stat{padding:22px 22px 0 0;border-right:1px solid var(--line)}
.sh-stat:last-child{border-right:0}
.sh-stat__num{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;font-stretch:95%;
  color:var(--text)}
.sh-stat__label{margin-top:10px;color:var(--text-2)}

.sh-scrollcue{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(20px,2.4vw,32px);
  padding:8px 0;min-height:44px;color:var(--text-2);position:relative;z-index:3}
.sh-scrollcue:hover{color:var(--text)}
.sh-scrollcue i{display:block;width:1px;height:34px;background:linear-gradient(var(--red),transparent);
  animation:sh-cue 2.2s var(--ease-soft) infinite}
@keyframes sh-cue{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
  100%{transform:scaleY(.2);transform-origin:bottom}}

/* ------------------------------------------------------------ 02 · MARQUEE */
.sh-marquee{background:var(--surface);color:var(--text);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);overflow:hidden;position:relative;padding:18px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.sh-marquee__track{display:flex;width:max-content;animation:sh-marq 46s linear infinite}
.sh-marquee:hover .sh-marquee__track,.sh-marquee:focus-within .sh-marquee__track{animation-play-state:paused}
.sh-marquee__group{display:flex;align-items:center;flex:none}
.sh-marquee__item{display:inline-flex;align-items:center;gap:22px;padding:0 22px;flex:none;
  font-family:var(--display);font-weight:700;font-size:clamp(15px,1.5vw,20px);
  letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap}
.sh-marquee__item::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--red);flex:none}
@keyframes sh-marq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ========================================================== 03 · INDEX */
.sh-index{padding:var(--band) 0;background:var(--paper)}
.sh-index__head{max-width:840px;margin-bottom:clamp(36px,4.5vw,64px)}
.sh-index__head h2{font-size:clamp(30px,4.4vw,60px);line-height:.98;margin:16px 0 18px;
  text-transform:uppercase;font-stretch:95%}
.sh-index__head p{color:var(--text-2);max-width:60ch}

.sh-index__body{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);align-items:start}

/* sticky preview */
.sh-preview{position:sticky;top:104px;border:1px solid var(--line);border-radius:20px;
  overflow:hidden;background:var(--paper);box-shadow:0 2px 4px rgba(23,23,26,.04),
  0 14px 34px rgba(23,23,26,.06)}
.sh-preview__art{position:relative;background:var(--surface);aspect-ratio:1/1;overflow:hidden;
  display:grid;place-items:center;border-bottom:1px solid var(--line)}
.sh-preview__art::before{content:"";position:absolute;inset:0;opacity:.75;
  background-image:linear-gradient(rgba(23,23,26,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,23,26,.055) 1px,transparent 1px);
  background-size:34px 34px}
.sh-preview__art::after{content:"";position:absolute;left:0;right:0;height:42%;
  background:linear-gradient(180deg,transparent,rgba(237,28,36,.06) 74%,rgba(237,28,36,.26));
  transform:translateY(-115%);
  animation:sh-scan 7s var(--ease-soft) infinite}
@keyframes sh-scan{0%{transform:translateY(-115%)}46%{transform:translateY(300%)}
  100%{transform:translateY(300%)}}
.sh-preview__icon{position:relative;z-index:2;width:112px;height:112px;color:var(--text)}
.sh-preview__icon svg{width:100%;height:100%}
.sh-preview__no{position:absolute;left:18px;top:16px;z-index:2;color:var(--red-deep)}
.sh-preview__body{padding:20px 22px 24px}
.sh-preview__name{font-family:var(--display);font-weight:700;font-size:21px;line-height:1.15;
  letter-spacing:-.02em;margin-bottom:8px;color:var(--text)}
.sh-preview__desc{font-size:14.5px;color:var(--text-2);line-height:1.6}
.sh-preview__link{margin-top:16px;display:flex;align-items:center;gap:8px;max-width:100%;
  font-weight:600;font-size:14.5px;color:var(--red-deep);white-space:nowrap}
.sh-preview__link span{overflow:hidden;text-overflow:ellipsis}
.sh-preview__link svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.sh-preview__link:hover svg{transform:translateX(4px)}
.js .sh-preview__swap{transition:opacity .22s ease,transform .3s var(--ease)}
.js .sh-preview__swap.is-out{opacity:0;transform:translate3d(0,8px,0)}

/* the list */
.sh-list{border-top:1px solid var(--line)}
.sh-row{position:relative;display:grid;grid-template-columns:74px minmax(0,1fr) 48px;
  gap:clamp(10px,2vw,26px);align-items:center;min-height:96px;padding:20px 8px 20px 0;
  border-bottom:1px solid var(--line);cursor:pointer}
.sh-row::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--red);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .34s var(--ease)}
.sh-row.is-active::before{transform:none}
.sh-row__no{font-family:var(--mono);font-size:12px;letter-spacing: 0.012em;color:var(--text-2);
  align-self:start;padding-top:8px;font-variant-numeric:tabular-nums}
.sh-row.is-active .sh-row__no{color:var(--red-deep)}
.sh-row__body{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start}
.sh-row__icon{width:44px;height:44px;color:var(--text);opacity:.34;
  transition:opacity .25s ease,color .25s ease,transform .35s var(--ease)}
.sh-row.is-active .sh-row__icon{opacity:1;color:var(--red);transform:translateY(-2px)}
.sh-row__icon svg{width:100%;height:100%}
.sh-row__name{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.3vw,32px);
  line-height:1.08;letter-spacing:-.02em;transition:transform .35s var(--ease)}
.sh-row.is-active .sh-row__name{transform:translateX(6px)}
.sh-row__desc{margin-top:8px;font-size:14.5px;color:var(--text-2);max-width:52ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sh-row__arrow{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line-strong);color:var(--text);transition:background-color .25s ease,
  color .25s ease,border-color .25s ease,transform .35s var(--ease)}
.sh-row__arrow svg{width:18px;height:18px}
.sh-row.is-active .sh-row__arrow{background:var(--red-fill);border-color:var(--red-fill);color:#fff;
  transform:rotate(-45deg)}
.sh-row:focus-visible{outline:2px solid var(--red);outline-offset:-2px;border-radius:6px}
.sh-index__foot{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  justify-content:space-between;border-top:1px solid var(--line);padding-top:26px}
.sh-index__foot p{font-size:14.5px;color:var(--text-2)}

/* ======================================================= 04 · MILESTONES */
.sh-miles{background:var(--surface);padding:var(--band) 0;position:relative;overflow:hidden}
.sh-miles::before{content:"";position:absolute;inset:0;
  background:radial-gradient(620px 420px at 6% 8%,rgba(237,28,36,.07),transparent 62%)}
.sh-miles__head{margin-bottom:clamp(34px,4vw,60px);max-width:760px}
.sh-miles__head h2{font-size:clamp(30px,4.4vw,60px);line-height:.98;margin:16px 0 18px;
  text-transform:uppercase;font-stretch:95%}
.sh-miles__head p{color:var(--text-2);max-width:56ch}
.sh-miles__body{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(30px,5vw,80px);align-items:start}
.sh-miles__aside{position:sticky;top:104px}
.sh-miles__art{position:relative;border:1px solid var(--line);border-radius:20px;
  overflow:hidden;background:var(--paper);aspect-ratio:4/5}
.sh-miles__art canvas{width:100%;height:100%}
.sh-miles__art .sh-mono{position:absolute;left:18px;bottom:16px;color:var(--text-2)}
.sh-rail{margin-top:22px;height:2px;background:var(--line-strong);position:relative;overflow:hidden}
.sh-rail i{display:block;height:100%;background:var(--red);transform:scaleX(var(--p,0));
  transform-origin:0 50%;transition:transform .25s linear}
.sh-mile{padding:30px 0;border-top:1px solid var(--line-strong);opacity:.5;
  transition:opacity .4s var(--ease-soft)}
.sh-mile:first-child{border-top:0;padding-top:6px}
.sh-mile.is-on{opacity:1}
.sh-mile__no{color:var(--red-deep)}
.sh-mile__title{margin:12px 0 10px;font-family:var(--display);font-weight:800;font-size:clamp(23px,2.6vw,38px);
  line-height:1.02;letter-spacing:-.02em;text-transform:uppercase}
.sh-mile p{color:var(--text-2);max-width:56ch}
.sh-miles__net{margin-top:clamp(30px,4vw,52px);border-top:1px solid var(--line-strong);padding-top:26px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.sh-miles__net div{font-size:14.5px;color:var(--text-2)}
.sh-miles__net b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(24px,2.6vw,38px);
  color:var(--text);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-bottom:8px}

/* ================================================= 04 · FULFILMENT FLOW */
/* The scroll-scrubbed piece: one parcel travels the whole warehouse while you
   scroll the six stages. data-stage lives on .sh-flow and is set by
   services-hub.js — every position below is in the scene's own 1200x560 units. */
.sh-flow{padding:var(--band) 0;background:var(--paper)}
.sh-flow__head{max-width:820px;margin-bottom:clamp(34px,4vw,58px)}
.sh-flow__head h2{font-size:clamp(30px,4.4vw,60px);line-height:.98;margin:16px 0 18px;
  text-transform:uppercase;font-stretch:95%}
.sh-flow__head p{color:var(--text-2);max-width:58ch}
.sh-flow__body{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(28px,4vw,64px);align-items:start}
.sh-flow__scene{position:sticky;top:96px}
.sh-flow__frame{border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF 0%,var(--surface) 100%);
  box-shadow:0 2px 4px rgba(23,23,26,.04),0 16px 40px rgba(23,23,26,.06);
  padding:14px 14px 4px}
.sh-scene{display:block;width:100%;height:auto}
.sh-flow__legend{display:flex;gap:10px;align-items:center;padding:12px 4px 8px;color:var(--text-2)}
.sh-flow__legend b{font-family:var(--mono);font-size:11px;letter-spacing: 0.012em;text-transform:uppercase;
  font-weight:500;color:var(--text)}
.sh-flow__stages{border-top:1px solid var(--line)}
.sh-stage{padding:30px 0 34px;min-height:clamp(150px,21vh,250px);border-bottom:1px solid var(--line);
  opacity:.45;transition:opacity .35s var(--ease-soft)}
.sh-stage:last-child{border-bottom:0}
.sh-stage.is-on{opacity:1}
.sh-stage__no{color:var(--red-deep)}
.sh-stage__title{margin:10px 0 8px;font-family:var(--display);font-weight:800;
  font-size:clamp(21px,2.2vw,30px);line-height:1.06;letter-spacing:-.02em;text-transform:uppercase}
.sh-stage p{font-size:15px;color:var(--text-2);max-width:48ch}

/* --- the scene's own parts ------------------------------------------------ */
.sh-scene .zone-label{font-family:var(--mono);font-size:20px;letter-spacing: 0.012em;
  text-transform:uppercase;fill:#7C7C84;transition:fill .3s var(--ease-soft)}
.sh-flow[data-stage="0"] .zone--dock .zone-label,
.sh-flow[data-stage="1"] .zone--scan .zone-label,
.sh-flow[data-stage="2"] .zone--rack .zone-label,
.sh-flow[data-stage="3"] .zone--rack .zone-label,
.sh-flow[data-stage="4"] .zone--pack .zone-label,
.sh-flow[data-stage="5"] .zone--van .zone-label{fill:var(--text)}
.sh-scene .roller,.sh-scene .wheel{transform-box:fill-box;transform-origin:center}
.sh-scene .roller,.sh-scene .roller + path{animation:sh-roll 3.4s linear infinite}
.sh-scene .belt-slats{animation:sh-belt 1.6s linear infinite}
@keyframes sh-roll{to{transform:rotate(360deg)}}
@keyframes sh-belt{to{transform:translateX(-22px)}}
.sh-scene .van{transition:transform .6s var(--ease)}
.sh-flow[data-stage="5"] .van{transform:translateX(10px)}
.sh-flow[data-stage="5"] .wheel,.sh-flow[data-stage="5"] .wheel + path{animation:sh-roll 1.1s linear infinite}
.sh-scene .beam{transition:opacity .3s ease}
.sh-flow[data-stage="1"] .beam{opacity:.22;animation:sh-beam 1.5s ease-in-out infinite}
@keyframes sh-beam{0%,100%{opacity:.10}50%{opacity:.30}}
.sh-scene .slot{transition:opacity .3s ease}
.sh-flow[data-stage="2"] .slot,.sh-flow[data-stage="3"] .slot{opacity:1}

/* the parcel itself */
.sh-scene .fbox{transform:translate(140px,376px);
  transition:transform .62s cubic-bezier(.3,.9,.35,1)}
.sh-flow[data-stage="0"] .fbox{transform:translate(140px,376px)}
.sh-flow[data-stage="1"] .fbox{transform:translate(472px,344px)}
.sh-flow[data-stage="2"] .fbox{transform:translate(600px,231px)}
.sh-flow[data-stage="3"] .fbox{transform:translate(600px,344px)}
.sh-flow[data-stage="4"] .fbox{transform:translate(930px,312px)}
.sh-flow[data-stage="5"] .fbox{transform:translate(1050px,376px)}

/* --- the route line ---------------------------------------------------------
   One LOZY-red hairline follows the parcel for the whole journey. Each leg
   carries its own index (--r); .sh-flow carries the stage it has reached (--s).
   A leg stays hidden (dashoffset 1) until its stage is reached, then draws
   (dashoffset 0). Same clamp arithmetic as the scroll motifs, so a seventh leg
   is one <path> plus one --r line, and no script touches the paths. */
.sh-flow{--s:0}
.sh-flow[data-stage="1"]{--s:1}
.sh-flow[data-stage="2"]{--s:2}
.sh-flow[data-stage="3"]{--s:3}
.sh-flow[data-stage="4"]{--s:4}
.sh-flow[data-stage="5"]{--s:5}
.sh-scene .route{fill:none;stroke:var(--red);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:clamp(0, calc(1 - (var(--s) - var(--r,1) + 1) * 10), 1);
  transition:stroke-dashoffset .7s var(--ease)}
.sh-scene .route--1{--r:1}
.sh-scene .route--2{--r:2}
.sh-scene .route--3{--r:3}
.sh-scene .route--4{--r:4}
.sh-scene .route--5{--r:5}
html:not(.js) .sh-scene .route{stroke-dashoffset:0}
.sh-scene .fbox-tick,.sh-scene .fbox-check{transition:opacity .3s ease}
.sh-flow:not([data-stage="0"]) .fbox-tick,
.sh-flow:not([data-stage="0"]) .fbox-check{opacity:1}

/* ========================================================= 05 · PROCESS */
.sh-process{padding:var(--band) 0;background:var(--paper)}
.sh-process__head{margin-bottom:clamp(34px,4vw,58px);max-width:760px}
.sh-process__head h2{font-size:clamp(30px,4.4vw,60px);line-height:.98;margin:16px 0 18px;
  text-transform:uppercase;font-stretch:95%}
.sh-process__head p{color:var(--text-2);max-width:58ch}
.sh-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border-top:1px solid var(--line)}
.sh-step{padding:26px 26px 34px;border-right:1px solid var(--line);position:relative}
.sh-step:last-child{border-right:0}
.sh-step__no{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);
  display:grid;place-items:center;color:var(--text);margin-bottom:20px;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.sh-step.is-in .sh-step__no{background:var(--red-fill);border-color:var(--red-fill);color:#fff}
.sh-step__title{font-family:var(--display);font-weight:700;font-size:20px;line-height:1.15;
  letter-spacing:-.02em;margin-bottom:10px}
.sh-step p{font-size:14.5px;color:var(--text-2)}

/* ============================================================= 06 · CTA */
.sh-cta{background:var(--surface);padding:var(--band) 0;position:relative;overflow:hidden}
.sh-cta::before{content:"";position:absolute;left:50%;top:-30%;width:min(900px,110%);aspect-ratio:2/1;
  transform:translateX(-50%);background:radial-gradient(closest-side,rgba(237,28,36,.10),transparent 70%);
  animation:sh-breathe 9s var(--ease-soft) infinite}
@keyframes sh-breathe{0%,100%{opacity:.6;transform:translateX(-50%) scale(1)}
  50%{opacity:1;transform:translateX(-50%) scale(1.07)}}
.sh-cta__inner{position:relative;z-index:2;text-align:center;max-width:820px;margin:0 auto}
.sh-cta h2{font-size:clamp(34px,6vw,78px);line-height:.94;margin:16px 0 20px;
  text-transform:uppercase;font-stretch:92%}
.sh-cta p{color:var(--text-2);margin:0 auto;max-width:52ch}
.sh-cta__row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.sh-cta__note{margin-top:22px;color:var(--text-2)}

/* ============================================================ responsive */
@media (max-width:1024px){
  /* the wall becomes a band that follows the copy instead of a panel above it:
     as a relative block it would otherwise render BEFORE the headline */
  .sh-hero{display:flex;flex-direction:column}
  .sh-hero .sh-wrap{order:1}
  .sh-hero__grid{grid-template-columns:minmax(0,1fr)}
  .sh-wall{position:relative;order:2;top:auto;right:auto;width:100%;height:190px;
    aspect-ratio:auto;margin:26px 0 0;transform:none;opacity:.9;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
  .sh-hero__copy::after{display:none}
  .sh-index__body{grid-template-columns:minmax(0,1fr)}
  .sh-preview{display:none}
  /* the flow scene stays stuck to the top on small screens so it keeps playing
     while the six stages scroll underneath it */
  .sh-flow__body{grid-template-columns:minmax(0,1fr)}
  .sh-flow__scene{position:sticky;top:92px;z-index:4;margin:0 0 18px}
  .sh-flow__frame{padding:10px 10px 2px;border-radius:16px;
    box-shadow:0 10px 26px rgba(23,23,26,.10)}
  .sh-flow__legend{display:none}
  .sh-scene .zone-label{font-size:22px}
  /* On a phone a 1200-unit drawing at 358px is unreadable, so the scene is drawn at
     200% and panned like a camera to keep the zone the parcel is in on screen.
     Specificity note: this must out-rank `.sh-page svg{max-width:100%}` (0,1,1). */
  .sh-page .sh-scene{width:200%;max-width:none;transition:transform .6s var(--ease)}
  .sh-flow[data-stage="0"] .sh-scene{transform:translateX(0)}
  .sh-flow[data-stage="1"] .sh-scene{transform:translateX(-21%)}
  .sh-flow[data-stage="2"] .sh-scene{transform:translateX(-29%)}
  .sh-flow[data-stage="3"] .sh-scene{transform:translateX(-29%)}
  .sh-flow[data-stage="4"] .sh-scene{transform:translateX(-46%)}
  .sh-flow[data-stage="5"] .sh-scene{transform:translateX(-50%)}
  .sh-miles__body{grid-template-columns:minmax(0,1fr)}
  .sh-miles__aside{position:relative;top:auto}
  /* square, not 16:9 — the dot-matrix map is nearly square and 16:9 left it tiny */
  .sh-miles__art{aspect-ratio:1/1}
  .sh-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sh-step{border-bottom:1px solid var(--line)}
  .sh-step:nth-child(2n){border-right:0}
}
@media (max-width:760px){
  .sh-page{--gutter:16px}
  .sh-hero__title{font-size:clamp(30px,8vw,50px)}
  .sh-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sh-stat{padding:18px 16px 0 0;border-bottom:1px solid var(--line)}
  .sh-stat:nth-child(2n){border-right:0}
  .sh-miles__net{grid-template-columns:minmax(0,1fr)}
  .sh-row{grid-template-columns:44px minmax(0,1fr) 44px;min-height:0;padding:18px 4px 18px 0}
  .sh-row__body{grid-template-columns:minmax(0,1fr);gap:0}
  .sh-row__icon{display:none}
  .sh-row__desc{-webkit-line-clamp:3}
  .sh-row__arrow{width:44px;height:44px}
  .sh-steps{grid-template-columns:minmax(0,1fr)}
  .sh-step,.sh-step:nth-child(2n){border-right:0}
  .sh-btn{min-height:48px;width:100%;justify-content:center}
  .sh-hero__cta,.sh-cta__row{flex-direction:column}
  /* keep clear of the fixed mobile CTA strip */
  .sh-cta{padding-bottom:calc(var(--band) + 64px)}
}
@media (max-width:420px){
  .sh-hero__title{font-size:clamp(30px,9.6vw,44px)}
}

/* ------------------------------------------------- reduced motion & print */
@media (prefers-reduced-motion:reduce){
  .sh-page .sh-marquee__track{animation:none;transform:none}
  .sh-page .sh-preview__art::after,.sh-page .sh-scrollcue i,.sh-page .sh-cta::before{animation:none}
  .sh-page .sh-cta::before{opacity:.8}
  .sh-page .sh-scene .roller,.sh-page .sh-scene .belt-slats,.sh-page .sh-scene .beam,
  .sh-page .sh-scene .wheel{animation:none!important}
  .sh-page .sh-scene .beam{opacity:.18}
  .sh-page .sh-scene .fbox,.sh-page .sh-scene{transition:none}
  /* the route legs jump in with the stages, exactly like the parcel */
  .sh-page .sh-scene .route{transition:none}
  .js .sh-page .sh-rv,.js .sh-page .sh-hero__title span{opacity:1!important;transform:none!important;
    animation:none!important}
  .sh-page .sh-btn,.sh-page .sh-row__arrow,.sh-page .sh-row__icon,.sh-page .sh-row__name{transition:none}
  .sh-page .sh-rail i{transition:none}
}

/* Bold-text touchups — 6 Oct 2026 (client direction). Removable. */
.sh-btn--primary { font-weight: 700; }
.sh-page button.sh-btn { font-weight: 600; }
.sh-page button.sh-btn--primary, .sh-page a.sh-btn--primary { font-weight: 700; }

/* Apple-website base tracking (6 Oct 2026): body text crisp like apple.com. */
body { letter-spacing: -0.01em; }