/* Waypoint 3PL - stylesheet shared by every public marketing page.
   Page-specific rules stay in that page's own <style> block; anything two
   pages both use belongs here. Linked with a filemtime query string (see
   site.php), so an edit is live for everyone on the next request. */
:root{
    --navy:#0a2540;
    --muted:#6e7387;
    --body:#425466;
    --faint:#87909f;
    --line:#ebedf2;
    --accent:#f29600;
    --accent-dark:#cc7d00;
    --accent-text:#a66600;   /* darker amber: passes 4.5:1 on white for small text */
    --font:'Inter',-apple-system,sans-serif;
    --shadow-md:0 13px 27px -5px rgba(50,50,93,.14),0 8px 16px -8px rgba(0,0,0,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--body);background:#fff;line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--navy);letter-spacing:-.025em;line-height:1.12}
a{color:inherit;text-decoration:none}
ul{list-style:none}
::selection{background:var(--accent);color:#fff}

/* Swiss hairline frame around the whole content column */
.frame{max-width:1160px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.pad{padding-left:clamp(22px,4vw,56px);padding-right:clamp(22px,4vw,56px)}
.hr{border-top:1px solid var(--line)}
section{padding-top:clamp(64px,9vh,104px);padding-bottom:clamp(64px,9vh,104px)}

/* Two-tone Stripe-style headline: lead sentence navy, rest muted */
/* A section heading and the line under it. The heading is the short version -
   one line, and the thing somebody scanning the page reads. The standfirst
   carries the sentence that used to sit inside the heading at the same size,
   which is how a heading became a paragraph set in 50px type. */
.duo{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:700;letter-spacing:-.03em;line-height:1.15;color:var(--navy)}
.duo-sub{font-size:clamp(1.02rem,1.4vw,1.18rem);line-height:1.5;color:var(--muted);margin-top:13px}
/* In half a column both step down again. */
.split .duo{font-size:clamp(1.4rem,2.2vw,1.85rem)}
.split .duo-sub{font-size:1.02rem}
.sub{font-size:1.05rem;margin-top:20px}

/* Reveal-on-scroll, and only for the pictures. Text that arrives a beat after
   the page has settled is a cost with no benefit: it delays the thing somebody
   came for, and on a long page it never stops happening. A photograph or a
   panel rising into place is a different thing - it is the page saying where
   to look - so those keep it.
   Marked with data-reveal, hidden only once the script confirms it can put
   them back. This is the whole of what animate.css was being loaded for. */
html.reveal-ready [data-reveal]{opacity:0}
html.reveal-ready [data-reveal].revealed{opacity:1;animation:rise .5s cubic-bezier(.2,.6,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    html.reveal-ready [data-reveal]{opacity:1}
    html.reveal-ready [data-reveal].revealed{animation:none}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.94rem;padding:10px 20px;border-radius:999px;border:none;cursor:pointer;font-family:var(--font);transition:background .15s ease,color .15s ease,box-shadow .15s ease;white-space:nowrap}
.btn i{font-size:.75em;transition:transform .15s ease}
.btn:hover i{transform:translateX(3px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark)}
.btn-soft{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 1px #d8dce4}
.btn-soft:hover{box-shadow:inset 0 0 0 1px #b9c0cc}
.arrow-link{font-weight:600;font-size:.93rem;color:var(--accent-text)}
.arrow-link i{font-size:.75em;margin-left:5px;transition:transform .15s ease}
.arrow-link:hover i{transform:translateX(3px)}

/* ---------- Nav ---------- */
/* Floating glass header: inset to the content column, sits over the hero.
   Turns solid once you scroll past the banner so it stays readable on white. */
header{position:absolute;top:0px;left:0;right:0;z-index:80;pointer-events:none}
header.scrolled {position: fixed;}
.nav{pointer-events:auto;max-width:1160px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:66px;gap:24px;
     padding:35px clamp(16px,2.4vw,26px);border-radius:14px;
     /* backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%); */
     transition:background .25s ease,border-color .25s ease,box-shadow .25s ease}
header.scrolled .nav-container{background:rgba(255,255,255,.88);border-color:var(--line);box-shadow:0 6px 22px -8px rgba(10,37,64,.22)}

.brand{font-weight:800;font-size:1.08rem;letter-spacing:-.02em;text-transform:uppercase;display:flex;align-items:center;color:#fff;transition:color .25s ease}
.brand i{color:var(--accent);font-size:.85rem;margin-right:8px}
.brand b{color:var(--accent);font-weight:800}
header.scrolled .brand{color:var(--navy)}

nav.primary>ul{display:flex;gap:4px;align-items:center}
nav.primary>ul>li{position:relative}
nav.primary>ul>li>a{display:block;font-size:.92rem;font-weight:500;color:rgba(255,255,255,.86);padding:7px 12px;border-radius:10px;white-space:nowrap;transition:background .15s ease,color .25s ease}
nav.primary>ul>li>a:hover{background:rgba(255,255,255,.14);color:#fff}
/* The page you're on, marked in both header states. */
nav.primary>ul>li>a.here{background:rgba(255,255,255,.16);color:#fff}
header.scrolled nav.primary>ul>li>a{color:var(--navy)}
header.scrolled nav.primary>ul>li>a:hover{background:#f0f2f6}
header.scrolled nav.primary>ul>li>a.here{background:#f0f2f6;color:var(--navy)}

/* ---------- Integrations dropdown ---------- */
/* Opens on hover and on keyboard focus (:focus-within), so it needs no JS.
   The trigger is still a real link: clicking it goes to the overview page. */
.menu-trigger i{font-size:.6em;margin-left:6px;opacity:.8;transition:transform .2s ease;vertical-align:middle}
.has-menu:hover .menu-trigger i,.has-menu:focus-within .menu-trigger i{transform:rotate(180deg)}
.menu{position:absolute;top:calc(100% + 13px);left:50%;width:min(540px,84vw);
      background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-md);
      padding:9px;opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-7px);
      transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:90}
.has-menu:hover>.menu,.has-menu:focus-within>.menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
/* Invisible bridge across the gap, so the pointer can travel from the pill to
   the panel without passing over dead space and closing it. */
.menu::before{content:"";position:absolute;top:-15px;left:0;right:0;height:15px}
.menu-inner{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.menu-item{display:flex;gap:11px;padding:11px 12px;border-radius:10px;transition:background .15s ease}
.menu-item:hover{background:#f7f8fa}
.mi-ic{font-size:1.05rem;width:22px;text-align:center;flex:none;margin-top:1px}
.mi-txt{display:flex;flex-direction:column;line-height:1.32;min-width:0}
.mi-txt b{font-size:.9rem;font-weight:700;color:var(--navy);letter-spacing:-.01em}
.mi-txt em{font-style:normal;font-size:.79rem;color:var(--faint);margin-top:3px}
.mi-tag{font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);
        background:#f0f2f6;border-radius:999px;padding:2px 7px;margin-left:7px;vertical-align:1px}
.menu-all{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:7px;padding:13px 12px 4px;
          border-top:1px solid var(--line);font-size:.86rem;font-weight:600;color:var(--accent-text)}
.menu-all i{font-size:.75em;transition:transform .15s ease}
.menu-all:hover i{transform:translateX(3px)}

.nav-right{display:flex;align-items:center;gap:14px}
.nav-tel{font-size:.9rem;font-weight:600;color:rgba(255,255,255,.86);transition:color .25s ease}
.nav-tel:hover{color:#fff}
header.scrolled .nav-tel{color:var(--navy)}
header.scrolled .nav-tel:hover{color:var(--accent)}
.nav-toggle{display:none;background:none;border:none;font-size:1.2rem;color:#fff;cursor:pointer;padding:8px;transition:color .25s ease}
header.scrolled .nav-toggle{color:var(--navy)}

@media (max-width:1120px){.nav-tel{display:none}}
@media (max-width:920px){
    nav.primary{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-md);transform:translateY(-12px);opacity:0;visibility:hidden;transition:transform .22s ease,opacity .22s ease,visibility .22s;z-index:70;max-height:calc(100vh - 120px);overflow-y:auto}
    nav.primary.open{transform:translateY(0);opacity:1;visibility:visible}
    nav.primary>ul{flex-direction:column;align-items:stretch;gap:0;padding:10px 14px 14px}
    nav.primary>ul>li>a{display:block;border-radius:8px;padding:13px 12px;font-size:1rem;color:var(--navy)}
    nav.primary>ul>li>a:hover,nav.primary>ul>li>a.here{background:#f0f2f6;color:var(--navy)}
    /* No hover on a touch screen: the submenu is simply always open, indented
       under its parent, and the parent link still opens the overview page. */
    .menu,.has-menu:hover>.menu,.has-menu:focus-within>.menu{position:static;width:auto;opacity:1;visibility:visible;transform:none;
        border:none;border-left:2px solid var(--line);border-radius:0;box-shadow:none;padding:2px 0 6px;margin:2px 0 8px 22px}
    .menu::before{display:none}
    .menu-inner{grid-template-columns:1fr}
    .menu-item{padding:10px 12px}
    .menu-all{display:none}
    .menu-trigger i{display:none}
    .nav-toggle{display:block}
}
@media (max-width:520px){.nav-right .btn{display:none}}

/* ---------- Hero: full-bleed banner image with the text laid over it ---------- */
.hero{position:relative;overflow:hidden;background:var(--navy);padding:0;min-height:clamp(520px,72vh,720px);display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-scrim{position:absolute;inset:0;    background: linear-gradient(100deg, rgba(8, 26, 45, .95) 0%, rgb(8 26 45 / 68%) 32%, rgb(8 26 45 / 5%) 62%, rgb(8 26 45 / 0%) 100%)}
/* Copy is held to the same column as the rest of the page, while the
   image behind it runs the full width of the browser. */
.hero-inner{position:relative;z-index:2;width:100%;max-width:1160px;margin:0 auto;padding-top:clamp(126px,18vh,190px);padding-bottom:clamp(56px,8vh,96px)}
.hero-eyebrow{font-size:.88rem;font-weight:500;color:#b9c9dc;margin-bottom:20px}
.hero-eyebrow b{font-weight:700;color:#ffb340;font-variant-numeric:tabular-nums}
.hero h1{font-size:clamp(2.05rem,4.4vw,3.4rem);font-weight:800;letter-spacing:-.035em;line-height:1.08;color:#fff;max-width:19ch;text-wrap:balance}
.hero-lede{font-size:clamp(1rem,1.45vw,1.2rem);color:#c5d3e2;margin-top:18px;max-width:46ch}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn-light{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)}
.btn-light:hover{background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
@media (max-width:760px){
    .hero{min-height:0}
    .hero-scrim{    background: linear-gradient(100deg, rgb(22 22 22) 0%, rgb(8 26 45 / 76%) 32%, rgb(8 26 45 / 12%) 62%, rgba(8, 26, 45, .2) 100%)}
    .hero h1{max-width:none}
}

@media (max-width:900px){
        .hero-inner{max-width:none}
    }

/* ---------- Logo strip ---------- */
.strip{display:flex;align-items:stretch;flex-wrap:wrap}
.strip .cell{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:22px 26px;border-right:1px solid var(--line);border-top:1px solid var(--line);font-weight:700;font-size:1rem;color:#9aa4b2;letter-spacing:-.01em;transition:color .15s ease;white-space:nowrap}
.strip .cell:hover{color:var(--navy)}
.strip .cell.cap{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.strip .cell:last-child{border-right:none}
.strip .logo-cell{display:flex;align-items:center;gap:11px;color:var(--navy);transition:opacity .15s ease}
.strip .logo-img{height:25px;width:auto;max-width:158px;object-fit:contain;display:block}
.strip .logo-cell i{font-size:1.6rem;flex:none}
.strip .logo-name{display:flex;flex-direction:column;line-height:1.15;font-weight:700;font-size:.98rem;letter-spacing:-.01em}
.strip .logo-name em{font-style:normal;font-weight:500;font-size:.72rem;color:var(--faint);letter-spacing:0}
.strip .cell.soon{font-size:.85rem;font-weight:500;color:#b6bdc9}

/* ---------- Demo section (product UI) ---------- */
.demo-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(36px,5vw,72px);align-items:center;margin-top:8px}
.panel{background:#fff;border-radius:10px;box-shadow:var(--shadow-md);border:1px solid var(--line);overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line)}
.panel-head .t{font-size:.8rem;font-weight:600;color:var(--navy)}
.panel-head .dots{display:flex;gap:5px}
.panel-head .dots span{width:8px;height:8px;border-radius:50%;background:var(--line)}
.panel-body{padding:14px}
.order-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:7px;font-size:.84rem}
.order-row:nth-child(odd){background:#f7f8fa}
.order-row .id{font-weight:600;color:var(--navy)}
.order-row .to{color:var(--faint)}
.pill{font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 10px;border-radius:999px}
.pill.ok{background:#e6f7ee;color:#0f7a44}
.pill.ship{background:#fff4e3;color:var(--accent-dark)}
.pill.pick{background:#eef0ff;color:#4f46e5}
.demo-visual{position:relative}
.float-card{position:absolute;background:#fff;border-radius:9px;box-shadow:var(--shadow-md);border:1px solid var(--line);padding:12px 16px;font-size:.8rem}
.float-card .big{font-size:1.2rem;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.float-card.fc1{bottom:-22px;left:-26px}
.float-card.fc1 .big i{color:#0f7a44;font-size:.75em;margin-right:5px}
.float-card.fc2{top:-20px;right:-14px}
.float-card.fc2 .big i{color:var(--accent);font-size:.75em;margin-right:5px}
.demo-points{display:grid;gap:0;margin-top:34px}
.demo-point{display:flex;gap:12px;padding:13px 0;border-top:1px solid var(--line);font-size:.93rem}
.demo-point i{color:var(--accent);font-size:.8rem;margin-top:5px}
@media (max-width:880px){
    .demo-grid{grid-template-columns:1fr;gap:52px}
    .float-card.fc1{left:0}
    .float-card.fc2{right:0}
}

/* ---------- Stats ---------- */
.stats-head{max-width:60ch}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(36px,6vh,56px)}
.stat{padding:6px clamp(18px,2.5vw,34px) 4px;border-left:1px solid var(--line)}
.stat:first-child{border-left:none;padding-left:0}
.stat .value{font-size:clamp(2.1rem,4vw,3.2rem);font-weight:800;color:var(--navy);letter-spacing:-.04em;line-height:1.05;font-variant-numeric:tabular-nums}
.stat .lbl{font-size:.88rem;color:var(--body);margin-top:10px;max-width:24ch}
@media (max-width:860px){
    .stats-grid{grid-template-columns:1fr 1fr;gap:32px 0}
    .stat:nth-child(3){border-left:none;padding-left:0}
}
@media (max-width:520px){
    .stats-grid{grid-template-columns:1fr;gap:26px}
    .stat{border-left:none;padding-left:0}
}

/* ---------- Services hairline grid ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(36px,6vh,56px);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.svc-cell{padding:clamp(24px,3vw,36px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .15s ease}
.svc-cell:hover{background:#fafbfc}
.svc-cell .ic{color:var(--accent);font-size:1.15rem;margin-bottom:16px}
.svc-cell h3{font-size:1rem;font-weight:700;margin-bottom:8px;letter-spacing:-.01em}
.svc-cell p{font-size:.9rem;margin-bottom:14px}
.svc-cell .arrow-link{font-size:.87rem}
@media (max-width:920px){.svc-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.svc-grid{grid-template-columns:1fr}}

/* ---------- Process ---------- */
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,40px);margin-top:clamp(36px,6vh,56px);counter-reset:proc}
.proc{counter-increment:proc;border-top:2px solid var(--line);padding-top:18px;position:relative}
.proc::before{content:"";position:absolute;top:-2px;left:0;width:44px;height:2px;background:var(--accent)}
.proc .n{font-size:.78rem;font-weight:700;color:var(--accent-text);font-variant-numeric:tabular-nums}
.proc .n::before{content:"0" counter(proc)}
.proc h3{font-size:1rem;font-weight:700;margin:10px 0 7px}
.proc p{font-size:.9rem}
@media (max-width:860px){.proc-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.proc-grid{grid-template-columns:1fr}}

/* ---------- Why: bold-lead paragraphs ---------- */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(36px,5vw,72px);margin-top:clamp(30px,5vh,48px)}
.why-item{padding:26px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:46px minmax(0,1fr);gap:18px;align-items:start}
.why-ic{width:46px;height:46px;border-radius:11px;background:#fff6e6;color:var(--accent-text);display:grid;place-items:center;font-size:1.05rem;flex:none}
.why-item p.lead{font-size:1rem;line-height:1.65}
.why-item p.lead b{color:var(--navy);font-weight:700}
.why-item .arrow-link{display:inline-block;margin-top:12px;font-size:.9rem}
@media (max-width:760px){.why-grid{grid-template-columns:1fr;gap:0}}

/* ---------- Image band ---------- */
.shot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,28px);margin-top:clamp(30px,5vh,48px)}
.shot{margin:0}
.shot img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:10px;background:#f4f6f9}
.shot figcaption{font-size:.92rem;color:var(--body);margin-top:16px}
.shot figcaption b,.shot figcaption h3{display:block;color:var(--navy);font-size:1.02rem;font-weight:700;margin-bottom:5px;letter-spacing:-.01em}
/* The landing pages want a real heading here rather than a bold lead-in,
   because the step names are what somebody searches for. */
.shot figcaption h3{line-height:1.3}
@media (max-width:820px){.shot-grid{grid-template-columns:1fr;gap:32px}.shot img{max-width:420px}}

/* ---------- Any size ---------- */
.size-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(30px,5vh,48px);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.size-card{padding:clamp(22px,3vw,32px);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.size-ic{width:48px;height:48px;border-radius:12px;background:#fff6e6;color:var(--accent-text);display:grid;place-items:center;font-size:1.15rem;margin-bottom:18px}
.size-k{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text);margin-bottom:11px}
.size-card h3{font-size:1rem;font-weight:700;letter-spacing:-.01em;margin-bottom:11px}
.size-card p{font-size:.93rem}
/* Shared row layout: heading left, action right */
.cta-inner{position:relative;z-index:1;display:flex;align-items:end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap;padding-bottom:6px}
.size-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:24px 0 0}
.size-cta span{font-size:1rem;color:var(--navy);font-weight:600}
@media (max-width:860px){.size-grid{grid-template-columns:1fr}}

/* ---------- Quote ---------- */
.quote blockquote{font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:600;letter-spacing:-.02em;line-height:1.4;color:var(--muted);max-width:100%}
.quote blockquote b{color:var(--navy);font-weight:600}
.quote cite{display:block;font-style:normal;font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-top:24px}


/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,6vw,84px)}
.c-line{display:flex;justify-content:space-between;gap:14px;padding:15px 0;border-top:1px solid var(--line);font-size:.94rem;align-items:baseline}
.c-line:last-child{border-bottom:1px solid var(--line)}
.c-line .k{font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.c-line a:hover,.c-line .v:hover{color:var(--accent)}
.c-line .v{text-align:right}
.contact-form{border:1px solid var(--line);border-radius:10px;padding:clamp(24px,3vw,36px);box-shadow:0 2px 5px -1px rgba(50,50,93,.06)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:18px}
.field label{display:block;font-size:.83rem;font-weight:600;color:var(--navy);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:10px 13px;border:1px solid #d8dce4;border-radius:7px;background:#fff;font-family:var(--font);font-size:.94rem;color:var(--navy);transition:border-color .15s ease,box-shadow .15s ease}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(242,150,0,.12)}
.field textarea{resize:vertical;min-height:104px}
.form-foot{display:flex;align-items:center;gap:18px;justify-content:space-between;flex-wrap:wrap;margin-top:6px}
.form-foot small{font-size:.78rem;color:var(--faint);max-width:30ch}
.field label .opt{font-weight:400;color:var(--faint);font-size:.8em;margin-left:5px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-error{background:#fdecec;color:#b42318;border:1px solid #f5c6c0;border-radius:8px;padding:11px 15px;font-size:.88rem;margin-bottom:18px}
.contact-form.sent{display:grid;place-items:center;text-align:center;gap:6px;padding:clamp(36px,5vw,56px)}
.contact-form.sent .sent-ic{width:56px;height:56px;border-radius:50%;background:#e6f7ee;color:#0f7a44;display:grid;place-items:center;font-size:1.4rem;margin-bottom:10px}
.contact-form.sent h3{font-size:1.2rem;font-weight:700}
.contact-form.sent p{font-size:.95rem;max-width:38ch}
.contact-form.sent a{color:var(--accent-text);font-weight:600}
@media (max-width:880px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:560px){.form-row{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
footer .foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1.15fr;gap:36px;padding-top:clamp(40px,6vh,56px);padding-bottom:clamp(36px,5vh,48px)}
footer h4{font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);margin-bottom:15px}
footer ul{display:grid;gap:9px;font-size:.9rem}
footer a:hover{color:var(--accent)}
/* .brand is white for the header floating over the hero - the footer sits on
   a light background, so it needs the dark version. */
.foot-brand .brand{color:var(--navy)}
.foot-brand p{max-width:270px;margin-top:13px;font-size:.87rem}
.foot-social{display:flex;gap:14px;margin-top:16px;font-size:1rem;color:var(--faint)}
.foot-social a:hover{color:var(--accent)}
.foot-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:18px;padding-bottom:22px;font-size:.79rem;color:var(--faint)}
@media (max-width:1040px){footer .foot-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){footer .foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){footer .foot-grid{grid-template-columns:1fr}}

/* ---------- Compact hero, used by every page that isn't the homepage ---------- */
/* The header floats white-on-transparent until you scroll past .hero, so each
   page needs a dark band of its own for the nav to be readable on arrival. */
.hero-sm{min-height:clamp(300px,42vh,400px)}
.hero-sm .hero-inner{padding-top:clamp(118px,16vh,158px);padding-bottom:clamp(40px,6vh,64px)}
.hero-sm h1{font-size:clamp(1.85rem,3.6vw,2.85rem);max-width:22ch}
.hero-sm .hero-lede{max-width:54ch}
/* No photograph behind it: a flat navy wash in the same direction as the hero
   gradient, so the pages still feel like one site. */
.hero-plain{background:linear-gradient(105deg,#081a2d 0%,#0a2540 46%,#14375c 100%)}

.crumbs{display:flex;align-items:center;gap:9px;font-size:.83rem;color:#9fb2c7;margin-bottom:16px}
.crumbs a:hover{color:#fff}
.crumbs i{font-size:.6em;opacity:.65}

/* ---------- What sits behind a hero with no photograph ---------- */
/* Nine pages open on a flat navy wash. Two layers give it something to be:
   slow washes of colour for depth behind the words, and a dotted UK to the
   right drawing a route out to nine cities. Neither is an image - the map is
   one path filled with a dot pattern - so this costs no request and about
   2KB, which matters on the pages built to be found. */

/* Colour, drifting. Long cycles on purpose: you should notice the hero is
   alive without ever catching it moving. */
.hero-aurora{position:absolute;inset:-25%;z-index:0;filter:blur(64px);opacity:.85;pointer-events:none}
.hero-aurora span{position:absolute;display:block;border-radius:50%}
.hero-aurora span:nth-child(1){width:52%;height:78%;left:4%;top:6%;background:radial-gradient(circle,rgba(23,92,150,.85),transparent 68%);animation:hero-drift-a 34s ease-in-out infinite}
.hero-aurora span:nth-child(2){width:46%;height:70%;left:46%;top:18%;background:radial-gradient(circle,rgba(12,120,148,.55),transparent 68%);animation:hero-drift-b 41s ease-in-out infinite}
.hero-aurora span:nth-child(3){width:34%;height:52%;left:24%;top:34%;background:radial-gradient(circle,rgba(242,150,0,.18),transparent 70%);animation:hero-drift-c 47s ease-in-out infinite}
@keyframes hero-drift-a{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(9%,-7%,0) scale(1.18)}}
@keyframes hero-drift-b{0%,100%{transform:translate3d(0,0,0) scale(1.06)}50%{transform:translate3d(-11%,8%,0) scale(.9)}}
@keyframes hero-drift-c{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(7%,10%,0) scale(1.22)}}

/* The map sits against the right edge of the content column rather than the
   window, so it stays beside the words on a wide screen instead of drifting
   off towards the bezel. */
.hero-map{
    position:absolute;z-index:1;top:50%;transform:translateY(-50%);
    right:max(16px,calc((100% - 1160px) / 2 + 16px));
    height:94%;width:auto;opacity:.9;pointer-events:none;
    /* Fades at the outer edge so it sits in the hero rather than on top of it. */
    -webkit-mask-image:radial-gradient(105% 100% at 50% 50%,#000 62%,transparent 99%);
    mask-image:radial-gradient(105% 100% at 50% 50%,#000 62%,transparent 99%);
}
.hero-route{fill:none;stroke:url(#wproute);stroke-width:1.6;stroke-linecap:round;opacity:0;
            stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
            animation:hero-route 13s cubic-bezier(.4,0,.2,1) infinite}
.hero-city{fill:#eaf3ff;opacity:.25;animation:hero-city 13s cubic-bezier(.4,0,.2,1) infinite}
.hero-hub{fill:var(--accent)}
.hero-hub-ring{fill:none;stroke:var(--accent);stroke-width:1.5;animation:hero-hub 3.4s ease-out infinite}
/* Each route draws, holds, then clears - staggered, so the network fills in
   rather than appearing all at once. */
@keyframes hero-route{
    0%{opacity:0;stroke-dashoffset:var(--len)}
    8%{opacity:.9}
    38%{stroke-dashoffset:0;opacity:.9}
    62%{opacity:.5}
    82%,100%{opacity:0;stroke-dashoffset:0}
}
@keyframes hero-city{0%,32%{opacity:.25;r:2}44%{opacity:1;r:3.6}70%{opacity:.9;r:2.6}100%{opacity:.25;r:2}}
@keyframes hero-hub{0%{r:4;opacity:.85}70%,100%{r:16;opacity:0}}

/* Narrower screens: the words need the room more than the picture does. */
@media (max-width:1080px){.hero-map{opacity:.55;right:-4%}}
@media (max-width:760px){.hero-map{display:none}}

/* Still, for anyone who has asked for that. The routes stay drawn and the
   destinations stay lit, which is the state the loop was heading for. */
@media (prefers-reduced-motion: reduce){
    .hero-aurora span,.hero-hub-ring{animation:none}
    .hero-hub-ring{opacity:0}
    .hero-route{animation:none;opacity:.65;stroke-dashoffset:0}
    .hero-city{animation:none;opacity:.85}
}

/* ---------- Status badge ---------- */
.badge{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
       padding:5px 12px;border-radius:999px;background:#f0f2f6;color:var(--body)}
.badge.live{background:#e6f7ee;color:#0f7a44}
.badge.early{background:#fff4e3;color:var(--accent-dark)}
.badge.soon{background:#eef0ff;color:#4f46e5}
.badge-dark{background:rgba(255,255,255,.14);color:#dce7f3}
.badge-dark.live{background:rgba(31,196,120,.18);color:#8fe9bb}
.badge-dark.early{background:rgba(242,150,0,.2);color:#ffc673}
.badge-dark.soon{background:rgba(120,131,255,.22);color:#c3c9ff}

/* ---------- Integration cards ---------- */
.int-grid{display:grid;grid-template-columns:repeat(2,1fr);margin-top:clamp(34px,5vh,52px);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.int-card{display:flex;flex-direction:column;padding:clamp(24px,3vw,34px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .15s ease}
.int-card:hover{background:#fafbfc}
.int-head{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.int-head i{font-size:1.7rem;flex:none}
.int-head h3{font-size:1.12rem;font-weight:700;letter-spacing:-.015em}
.int-head .sub{font-size:.78rem;font-weight:500;color:var(--faint);margin-top:2px}
.int-card p{font-size:.93rem;margin-bottom:16px}
.int-card ul{display:grid;gap:8px;font-size:.89rem;margin-bottom:20px}
.int-card ul li{display:flex;gap:9px}
.int-card ul i{color:var(--accent);font-size:.72rem;margin-top:6px}
.int-card .arrow-link{margin-top:auto}
@media (max-width:760px){.int-grid{grid-template-columns:1fr}}

/* ---------- Sync table: what moves, which way, how often ---------- */
.sync{margin-top:clamp(30px,5vh,46px);border-top:1px solid var(--line)}
.sync-row{display:grid;grid-template-columns:200px minmax(0,1fr) 150px;gap:20px;padding:17px 0;border-bottom:1px solid var(--line);align-items:baseline}
/* Which way it moves, as the two marks rather than their names: the platform
   and ours, with the arrow between them doing the saying. The words are still
   there for a screen reader - see .vis-hidden. */
.sync-dir{display:flex;align-items:center;gap:9px;font-size:1.15rem;line-height:1}
/* A real logo where we have the file. Height-constrained so a wide wordmark
   and a square mark sit on the same line without one dwarfing the other. */
.sync-logo{height:19px;width:auto;max-width:104px;object-fit:contain;object-position:left center;display:block}
/* Our wordmark is long and thin next to a square platform mark, so it gets
   its own height rather than towering over them. */
.wp-logo{height:13px;max-width:96px}
.sync-dir .wp{color:var(--accent)}
.sync-dir .to{font-size:.7rem;color:var(--faint)}
.vis-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sync-what{font-size:.95rem}
.sync-what b{color:var(--navy);font-weight:600}
.sync-when{font-size:.86rem;color:var(--faint);text-align:right}
@media (max-width:720px){
    .sync-row{grid-template-columns:1fr;gap:7px}
    .sync-when{text-align:left}
}

/* ---------- Where a platform stands with us ---------- */
/* Two marks and the link between them, on the integration pages. It says the
   same thing the paragraph beside it says, in the time it takes to look. */
.wire{display:grid;grid-template-columns:1fr minmax(56px,.8fr) 1fr;align-items:center;gap:clamp(10px,2vw,20px);
      border:1px solid var(--line);border-radius:12px;padding:clamp(22px,3vw,32px);background:#fafbfc}
.wire-node{display:grid;justify-items:center;gap:11px;text-align:center}
/* A tile that fits its mark rather than a square that crops it: Adobe's is
   square, Shopify's and ours are long wordmarks, and forcing all three into
   62px makes the widest one unreadable. */
.wire-mark{min-width:62px;height:62px;border-radius:16px;background:#fff;border:1px solid var(--line);
           display:grid;place-items:center;font-size:1.7rem;box-shadow:0 2px 5px -1px rgba(50,50,93,.07);padding:0 18px}
.wire-logo{height:28px;width:auto;max-width:132px;object-fit:contain}
.wire-node b{font-size:.92rem;font-weight:700;color:var(--navy);letter-spacing:-.01em}
.wire-node span{font-size:.78rem;color:var(--faint)}
/* The link: a dashed run with a parcel travelling it, one way then the other. */
.wire-link{position:relative;height:2px;width:100%;background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px)}
.wire-link i{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);font-size:.72rem;color:var(--accent);
             background:#fafbfc;padding:0 4px;animation:wire-run 6s ease-in-out infinite}
@keyframes wire-run{0%,100%{left:0}50%{left:100%}}
.wire-status{grid-column:1/-1;display:flex;justify-content:center;margin-top:6px}
.wire-versions{grid-column:1/-1;text-align:center;font-size:.83rem;color:var(--faint);margin-top:10px;line-height:1.5}
.wire-versions b{color:var(--body);font-weight:600}
@media (max-width:520px){
    .wire{grid-template-columns:1fr;gap:18px}
    .wire-link{width:2px;height:34px;min-width:0;justify-self:center;background:repeating-linear-gradient(180deg,var(--line) 0 6px,transparent 6px 12px)}
    .wire-link i{animation:none;left:50%;top:50%}
}

/* ---------- The order list, with the channel it came from ---------- */
.chan-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.1fr) 96px;gap:10px;align-items:center;
          padding:10px 12px;border-radius:7px;font-size:.84rem}
.chan-row:nth-child(odd){background:#f7f8fa}
.chan-row .id{font-weight:600;color:var(--navy)}
.chan-row .ch{display:flex;align-items:center;gap:8px;min-width:0}
.chan-row .ch i{font-size:1rem;flex:none}
.chan-row .pill{white-space:nowrap;justify-self:end}
.chan-row.head{background:none;font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);padding-bottom:4px}
.chan-row.head .st{text-align:right}
@media (max-width:520px){.chan-row{grid-template-columns:minmax(0,1fr) 92px;gap:6px 10px}.chan-row .ch{grid-column:1/-1}}

/* ---------- Numbered setup steps ---------- */
.steps{counter-reset:step;margin-top:clamp(30px,5vh,46px);display:grid;gap:0}
.step{counter-increment:step;display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;padding:22px 0;border-top:1px solid var(--line)}
.step::before{content:counter(step);width:34px;height:34px;border-radius:50%;background:#fff6e6;color:var(--accent-text);
              display:grid;place-items:center;font-size:.88rem;font-weight:700;font-variant-numeric:tabular-nums}
.step h3{font-size:1rem;font-weight:700;margin-bottom:6px}
.step p{font-size:.93rem}
.step code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;background:#f4f6f9;border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--navy)}

/* ---------- Platform teaser row ---------- */
/* The same integrations as the nav dropdown, sized for a row across a page. */
.plat-row{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(30px,5vh,46px);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.plat{display:flex;flex-direction:column;padding:clamp(20px,2.4vw,28px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .15s ease}
.plat:hover{background:#fafbfc}
.plat i{font-size:1.55rem;margin-bottom:14px}
/* A logo stands where the icon and the name both stood, so it carries the
   icon's spacing and is capped by height - the marks are different shapes and
   only a common height makes a row of them sit level. */
.plat-logo{height:26px;width:auto;max-width:100%;object-fit:contain;object-position:left center;display:block;margin-bottom:14px}
.plat b{font-size:.98rem;font-weight:700;color:var(--navy);letter-spacing:-.01em}
.plat span{font-size:.85rem;margin:7px 0 16px}
.plat .arrow-link{margin-top:auto;font-size:.85rem}
@media (max-width:860px){.plat-row{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.plat-row{grid-template-columns:1fr}}

/* ---------- Search landing pages ---------- */
/* The service pages (/3pl-fulfilment-services-uk and its siblings) are long
   explainers arrived at from Google rather than from the nav, so they share a
   handful of parts the rest of the site has no use for. They live here rather
   than in each page because there are five of them and they must look alike. */

/* Four-up labelled cards: a kicker, a heading and a line of explanation.
   The 1PL-to-4PL ladder and the picking methods are the same shape, and one
   card can be marked .us to say "this is the one we are". */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(34px,5vh,52px);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.tile{padding:clamp(22px,3vw,32px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .15s ease}
.tile:hover{background:#fafbfc}
.tile.us{background:#fffaf2}
.tile.us:hover{background:#fff6e6}
.tile-ic{width:46px;height:46px;border-radius:11px;background:#f4f6f9;color:var(--muted);display:grid;place-items:center;font-size:1.05rem;margin-bottom:18px}
.tile.us .tile-ic{background:#fff6e6;color:var(--accent-text)}
.tile-tag{font-size:.78rem;font-weight:700;letter-spacing:.06em;color:var(--faint);margin-bottom:9px}
.tile.us .tile-tag{color:var(--accent-text)}
.tile h3{font-size:1rem;font-weight:700;margin-bottom:8px}
.tile p{font-size:.9rem}
.tiles.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.tiles,.tiles.three{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.tiles,.tiles.three{grid-template-columns:1fr}}

/* Section shortcuts under the hero: a long page, so give somebody the part
   they came for without making them scroll to find out it is there. */
.jump{display:flex;flex-wrap:wrap;gap:0}
.jump a{flex:1 1 auto;text-align:center;padding:16px 20px;border-right:1px solid var(--line);border-top:1px solid var(--line);
        font-size:.86rem;font-weight:600;color:var(--faint);white-space:nowrap;transition:color .15s ease,background .15s ease}
.jump a:hover{color:var(--navy);background:#fafbfc}
.jump a:last-child{border-right:none}
@media (max-width:760px){.jump a{flex:1 1 50%}.jump a:nth-child(2n){border-right:none}}

/* A picture beside an argument, with the argument's supporting points under it. */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:center;margin-top:clamp(32px,5vh,50px)}
/* A portrait photograph in a half column is 700px tall next to a paragraph
   three lines long, so tall ones crop rather than set the row height. */
.split img{width:100%;height:auto;max-height:440px;object-fit:cover;display:block;border-radius:10px}
.split-points{display:grid;margin-top:22px}
.split-point{display:flex;gap:12px;padding:13px 0;border-top:1px solid var(--line);font-size:.93rem}
.split-point i{color:var(--accent);font-size:.8rem;margin-top:5px}
.split-point b{color:var(--navy);font-weight:600}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:36px}}

/* A wide photograph with its caption underneath. */
.band{margin-top:clamp(34px,5vh,52px)}
.band img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:10px;aspect-ratio:16/6;object-fit:cover}
/* 16:6 out of a 3:2 photograph throws away most of the frame, and which part
   to keep is a decision per photograph, not a rule: centred cuts the roof off
   one and the subject's head off another. .band-low keeps the bottom. */
.band-low img{object-position:center 68%}
.band figcaption{font-size:.88rem;color:var(--faint);margin-top:14px;max-width:70ch}

/* Where a photograph is still to come. The <img> that replaces it sits
   commented out directly above each one, written and ready. */
.ph{display:grid;place-items:center;align-content:center;gap:9px;text-align:center;min-height:260px;padding:clamp(28px,5vw,56px) 24px;
    border:1px dashed #cfd6e0;border-radius:10px;background:#fafbfc}
.ph i{font-size:1.5rem;color:#c3cad4}
.ph b{font-size:.75rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.ph span{font-size:.86rem;color:var(--faint);max-width:34ch}

/* Frequently asked questions. Always open - the answer is the point, not the
   click, and a crawler should not have to guess at what is behind a toggle. */
/* Two columns once there is room for them, so the answers use the width of the
   page instead of leaving half of it empty - without running a line of text to
   120 characters, which is what one full-width column would do. */
.faq{margin-top:clamp(34px,5vh,52px);border-top:1px solid var(--line);
     display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(32px,5vw,64px)}
.faq-item{padding:24px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:38px minmax(0,1fr);gap:16px}
@media (max-width:900px){.faq{grid-template-columns:1fr}}
.faq-item i{color:var(--accent);font-size:.95rem;margin-top:4px;justify-self:center}
.faq-item h3{font-size:1.02rem;font-weight:700;margin-bottom:9px}
.faq-item p{font-size:.94rem}
@media (max-width:600px){.faq-item{grid-template-columns:1fr;gap:8px}.faq-item i{display:none}}

/* ---------- Blog articles ---------- */
/* /blogs/<slug>. A guide is read top to bottom rather than scanned section by
   section, so the body is one measured column of prose instead of the banded
   sections the rest of the site uses. */
.article-meta{display:flex;flex-wrap:wrap;gap:18px;font-size:.84rem;color:var(--faint);padding-bottom:6px}
.article-meta span{display:flex;align-items:center;gap:7px}
.article-meta i{font-size:.8em;color:var(--accent)}
.prose{max-width:72ch;margin-top:clamp(28px,4vh,40px)}
.prose h2{font-size:clamp(1.35rem,2.5vw,1.8rem);font-weight:700;letter-spacing:-.025em;margin-top:clamp(38px,5vh,56px)}
.prose h3{font-size:1.12rem;font-weight:700;margin-top:30px}
.prose p{font-size:1.03rem;margin-top:16px}
.prose h2 + p,.prose h3 + p{margin-top:14px}
.prose a{color:var(--accent-text);font-weight:600}
.prose a:hover{text-decoration:underline}
.prose b{color:var(--navy);font-weight:600}

/* The short version, for somebody who will not read to the end. */
.callout{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;background:#fafbfc;padding:clamp(20px,2.4vw,26px);margin-top:clamp(28px,4vh,38px)}
.callout h2{font-size:.78rem !important;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:0 0 14px !important}
.callout ul{display:grid;gap:11px;font-size:.95rem}
.callout li{display:flex;gap:11px}
.callout li i{color:var(--accent);font-size:.78rem;margin-top:6px}

/* What goes wrong, listed as what goes wrong. */
.pitfalls{display:grid;gap:0;margin-top:26px}
.pitfall{display:grid;grid-template-columns:30px minmax(0,1fr);gap:13px;padding:16px 0;border-top:1px solid var(--line);font-size:.97rem}
.pitfall i{color:#c15b4a;font-size:.85rem;margin-top:5px;justify-self:center}
.pitfall b{color:var(--navy);font-weight:600}

/* Where to go next, at the foot of a piece somebody has just finished. */
.next-up{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:clamp(30px,5vh,44px);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.next-card{display:flex;flex-direction:column;padding:clamp(22px,2.6vw,30px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .15s ease}
.next-card:hover{background:#fafbfc}
.next-card .k{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.next-card b{font-size:1.05rem;font-weight:700;color:var(--navy);letter-spacing:-.015em}
.next-card p{font-size:.91rem;margin:8px 0 16px}
.next-card .arrow-link{margin-top:auto}
@media (max-width:700px){.next-up{grid-template-columns:1fr}}

/* ---------- Product visuals ---------- */
/* The service pages need something to look at between the arguments, and a
   photograph of a warehouse is not it - what we are selling is that you can
   see your stock and your orders. So the visuals are the interface itself,
   built in HTML rather than screenshotted: sharp at any zoom, no page weight,
   editable when the product changes, and able to move.

   Motion is deliberately small. A panel drifts a few pixels, a status changes
   once, a dot pulses - enough to read as live, never enough to compete with
   the words next to it. Everything animated here moves on transform or
   opacity only, so none of it costs a layout. */

/* The frame: an interface, shown as a thing on a screen. */
.shot-frame{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-md);overflow:hidden}
.shot-bar{display:flex;align-items:center;gap:7px;padding:11px 15px;border-bottom:1px solid var(--line);background:#fafbfc}
.shot-bar .dot{width:9px;height:9px;border-radius:50%;background:#e1e5ec;flex:none}
.shot-bar .url{margin-left:9px;font-size:.72rem;color:var(--faint);background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 13px;
               white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot-body{padding:14px}
.shot-foot{display:flex;align-items:center;gap:8px;padding:11px 15px;border-top:1px solid var(--line);font-size:.78rem;color:var(--faint);background:#fafbfc}

/* Live stock, as the portal shows it. Available is the figure that matters:
   what is on the shelf, minus what is already promised to other orders. */
.stk-row{display:grid;grid-template-columns:minmax(0,1fr) 62px 62px 66px;gap:10px;align-items:center;padding:10px 12px;border-radius:7px;font-size:.84rem}
.stk-row:nth-child(odd){background:#f7f8fa}
.stk-row .sku{font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stk-row .n{text-align:right;font-variant-numeric:tabular-nums}
.stk-row .n.avail{font-weight:700;color:var(--navy)}
.stk-row .n.low{color:var(--accent-dark)}
.stk-row.head{background:none;font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);padding-bottom:4px}
.stk-note{display:flex;gap:10px;padding:12px 12px 2px;font-size:.8rem;color:var(--faint);border-top:1px solid var(--line);margin-top:8px}
.stk-note i{color:var(--accent);font-size:.75rem;margin-top:4px}
/* The three figures squeeze the SKU to nothing on a phone; the numbers are
   short and the SKU is not, so they give room back. */
@media (max-width:520px){.stk-row{grid-template-columns:minmax(0,1fr) 46px 44px 48px;gap:6px;font-size:.8rem}}

/* A live indicator. Small, green, and the only thing on the page that repeats. */
.live-dot{width:7px;height:7px;border-radius:50%;background:#1fc478;flex:none;animation:live-pulse 2.6s ease-out infinite}
@keyframes live-pulse{
    0%  {box-shadow:0 0 0 0 rgba(31,196,120,.45)}
    70% {box-shadow:0 0 0 7px rgba(31,196,120,0)}
    100%{box-shadow:0 0 0 0 rgba(31,196,120,0)}
}

/* Idle drift, for a panel and the cards floating off it. The negative delay
   starts each one part-way through, so they never move in lockstep. */
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.drift{animation:drift 7s ease-in-out infinite}
.drift-a{animation:drift 9s ease-in-out infinite;animation-delay:-2.5s}
.drift-b{animation:drift 8s ease-in-out infinite;animation-delay:-5s}

/* Two states in one slot, cross-fading: an order that moves on, a count that
   goes down. The point is that it changed by itself, so it changes once and
   then leaves you alone for eight seconds. */
.swap{display:inline-grid;vertical-align:middle}
.swap>*{grid-area:1/1}
.swap>:first-child{animation:swap-out 9s ease-in-out infinite}
.swap>:last-child {animation:swap-in  9s ease-in-out infinite}
@keyframes swap-out{0%,40%{opacity:1}47%,93%{opacity:0}100%{opacity:1}}
@keyframes swap-in {0%,40%{opacity:0}47%,93%{opacity:1}100%{opacity:0}}

/* A parcel's journey, with the step it has reached lit. */
.track{display:grid;gap:0}
.track-step{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 12px;font-size:.84rem}
.track-step .mark{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.62rem;background:#eef0f4;color:#aab2be}
.track-step.done .mark{background:#e6f7ee;color:#0f7a44}
.track-step.now{background:#fff9ef;border-radius:8px}
.track-step.now .mark{background:var(--accent);color:#fff}
.track-step b{color:var(--navy);font-weight:600}
.track-step .when{font-size:.76rem;color:var(--faint);font-variant-numeric:tabular-nums}
.track-line{height:14px;margin-left:23px;border-left:2px solid #eef0f4}
.track-line.done{border-color:#c8ecd8}

/* A delivery being counted in, filling as it goes. */
.count-row{display:grid;grid-template-columns:minmax(0,1fr) 74px;gap:12px;align-items:center;padding:9px 12px;font-size:.84rem;border-radius:7px}
.count-row:nth-child(odd){background:#f7f8fa}
.count-row .sku{font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.count-row .qty{text-align:right;font-variant-numeric:tabular-nums;color:var(--faint)}
.count-row .qty b{color:var(--navy)}
.count-bar{height:5px;border-radius:999px;background:#eef0f4;overflow:hidden;margin:12px 12px 2px}
.count-bar i{display:block;height:100%;background:var(--accent);border-radius:999px;width:0;animation:count-fill 6s ease-out infinite}
@keyframes count-fill{0%{width:0}55%,100%{width:100%}}

/* Nothing above moves for anyone who has asked the browser to stop it. */
@media (prefers-reduced-motion: reduce){
    .live-dot,.drift,.drift-a,.drift-b,.count-bar i,
    .swap>:first-child,.swap>:last-child{animation:none}
    /* Rest on the state it ends in, not the one it starts in: a pick list
       frozen on "scanning" reads as stuck rather than still. */
    .swap>:first-child{opacity:0}
    .count-bar i{width:100%}
}

/* ---------- Closing CTA band, on every page ---------- */
.cta-band{background:var(--navy);color:#c5d3e2}
.cta-band h2{color:#fff;font-size:clamp(1.55rem,3vw,2.2rem);font-weight:700;letter-spacing:-.03em;max-width:20ch}
.cta-band p{margin-top:14px;max-width:46ch;font-size:1rem}
.cta-band .cta-inner{align-items:center;max-width:1160px;margin:0 auto}