@charset "utf-8";
/* ==========================================================================
   Pro FS — profulfilment.com
   ONE stylesheet. This file is the entire presentation layer of the site.

   Values are not invented: every colour, size, spacing and breakpoint below
   was read from the computed styles of the live site (8 Oct 2026), so the
   rebuild matches the original rather than approximating it.

   TOKENS LIVE IN /assets/css/tokens.css, which MUST be loaded before this
   file. This file contains no colour literals (CS-CSS-1); re-theme the site
   by editing tokens.css only.

   Contents
     1  Reset
     2  Design tokens
     3  Base elements
     4  Layout primitives
     5  Buttons
     6  Header and navigation
     7  Sections
     8  Components  (cards, icon lists, stats, accordion, slider, quote)
     9  Forms
    10  Footer
    11  Utilities
    12  Responsive   (breakpoints identical to the original: 1024 / 767)
    13  Motion and print
   ========================================================================== */

/* ==========================================================================
   WEBFONTS
   Self-hosted, so the site renders in its own brand typeface instead of a
   system fallback. The original site declared Outfit but never loaded it: its
   font CSS pointed at a SiteGround staging host that no longer exists, which
   produced 279 failed font requests per page. This is that defect, fixed.
   Outfit, Montserrat, Archivo and Roboto Slab ship as variable fonts covering
   the full 100-900 range in a single file each.
   ========================================================================== */

@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/Outfit-100_900-normal-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/Outfit-100_900-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/Montserrat-100_900-normal-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/Montserrat-100_900-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/Archivo-100_900-normal-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/Archivo-100_900-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/Poppins-300-normal-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/Poppins-300-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/Poppins-400-normal-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/Poppins-400-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/Poppins-500-normal-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/Poppins-500-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/Poppins-600-normal-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/Poppins-600-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/Poppins-700-normal-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/Poppins-700-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/Poppins-900-normal-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/Poppins-900-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/RobotoSlab-100_900-normal-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/RobotoSlab-100_900-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ==========================================================================
   1  RESET
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd,
ul, ol { margin: 0; }

ul[class], ol[class] { padding: 0; list-style: none; }

img, picture, video, canvas, svg { display: block; max-width: 100%; }

img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; }

table { border-collapse: collapse; width: 100%; }

:where(:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   2  DESIGN TOKENS
   ========================================================================== */

/* The design tokens now live in /assets/css/tokens.css, which must be loaded
   BEFORE this file. This stylesheet holds no colour literals (CS-CSS-1): every
   colour, size and radius is a var(--...) reference to a token. */

/* ==========================================================================
   3  BASE ELEMENTS
   ========================================================================== */

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-normal);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  color: var(--ink-strong);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

h1 { font-size: var(--fs-4xl); font-weight: var(--fw-black); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p { margin-bottom: var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--brand-dark); }

strong, b { font-weight: var(--fw-semi); }

::selection { background: var(--brand); color: var(--on-dark); }

/* Eyebrow label — the small uppercase heading above every section.
   Measured on the live site at 11px / 500 / letter-spacing .14em. */
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--sp-4);
}

/* ==========================================================================
   4  LAYOUT PRIMITIVES
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap-xwide);
  align-items: center;
}
.split__copy { min-width: 0; }
.split__media { min-width: 0; }
.split__media img {
  width: 100%;
  height: auto;
  max-height: 520px;          /* the source images are very large; keep them in scale */
  object-fit: cover;
  border-radius: var(--radius);
}

/* ==========================================================================
   5  BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: .8125rem 1.75rem;
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--brand); color: var(--on-dark); border-color: var(--brand); }
.btn--primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--on-dark); }

/* ==========================================================================
   6  HEADER AND NAVIGATION
   One object on every page (templates/header.html). A white pill floating over
   the top of the page, measured on the live site (reference/chrome-measurements-
   2026-10-10.md). The home page carries a small variant (body.page-home): the
   live home header sits 32px down, has no shadow and uses black link text.
   ========================================================================== */

.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding-top: var(--header-pad-top);
}
.page-home .site-header { padding-top: 32px; }

.header-inner {
  display: flex;
  align-items: center;
  gap: 2px;
  width: min(100%, var(--header-pill-w));
  margin-inline: auto;
  padding: 10px 42.5px 10px 22px;
  background: var(--surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-header-pill);
}
.page-home .header-inner { box-shadow: none; }

.brand { display: flex; align-items: center; flex: 0 0 245px; }
.brand img { display: block; width: 147px; height: auto; }

/* --- primary navigation ------------------------------------------------ */
.nav { display: flex; flex: 1 1 auto; justify-content: flex-end; }
.nav__list { display: flex; flex-wrap: wrap; }
.nav__item { position: relative; display: flex; }

.nav__link {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  padding: 13px 20px;
  font-size: var(--fs-body);
  font-weight: var(--fw-normal);
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.page-home .nav__link { color: var(--ink-strong); }
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--brand); }

/* the little caret after "Services" (also in the footer menu) */
.sub-arrow { display: flex; align-items: center; padding: 10px 0 10px 10px; margin: -10px 0; }
.sub-arrow svg { display: block; width: 1em; height: 1em; fill: var(--ink-strong); }

/* --- dropdown submenu --------------------------------------------------- */
.nav__sub {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 290px;
  padding: var(--sp-3) 0;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--line);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.nav__item--has-sub:hover > .nav__sub,
.nav__item--has-sub:focus-within > .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__sub a {
  display: block;
  padding: .5rem 1.25rem;
  font-size: var(--fs-sm);
  color: var(--ink);
}
.nav__sub a:hover { background: var(--brand-wash); color: var(--brand); }

/* --- the "Contact us" button ------------------------------------------- */
.header-cta {
  flex: 0 0 auto;
  margin-left: 43.3px;
  padding: 15px 35px;
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  color: var(--on-dark);
  background: var(--brand);
  border-radius: var(--radius-pill);
  transition: background-color .25s var(--ease);
}
.header-cta:hover { background: var(--brand-dark); }

/* --- mobile toggle (hidden on desktop) ---------------------------------- */
.nav__toggle { display: none; }
.nav__icon { display: block; width: 100%; height: 100%; fill: currentColor; }
.nav__icon--close { display: none; }
.nav__toggle[aria-expanded="true"] .nav__icon--open { display: none; }
.nav__toggle[aria-expanded="true"] .nav__icon--close { display: block; }

/* --- narrower desktops: the same pill, with the logo slot and spacing tightened so it never wraps ---- */
@media (min-width: 1025px) and (max-width: 1439px) {
  .header-inner { padding: 10px 24px; }
  .brand { flex: 0 0 auto; margin-right: 8px; }
  .brand img { width: 130px; }
  .nav__list { flex-wrap: nowrap; }
  .nav__link { padding: 13px 12px; }
  .header-cta { margin-left: 16px; padding: 15px 24px; }
}

/* --- tablet and phone: a full-width bar with a hamburger ---------------- */
@media (max-width: 1024px) {
  .site-header { position: relative; padding-top: 0; }
  .page-home .site-header { padding-top: 32px; }

  .header-inner {
    width: 100%;
    height: var(--header-bar-h-phone);
    padding: var(--header-pad-phone);
    border-radius: 0;
    justify-content: flex-start;
  }
  .page-home .header-inner { height: var(--header-home-h-phone); padding: var(--header-home-pad-phone); }

  .brand { flex: 0 0 var(--header-brand-col-phone); }
  .brand img { width: var(--header-logo-share-phone); }
  .page-home .brand { flex: 0 0 var(--header-home-brand-col-phone); }
  .page-home .brand img { width: 100%; height: auto; }   /* live (post-21 56fdbe63): the logo fills its 31% column, 108.8px at 390, 120px at 430 */

  .nav__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--header-toggle-size);
    width: var(--header-toggle-size);
    height: var(--header-toggle-size);
    margin-right: calc(var(--header-menu-col-phone) - var(--header-toggle-size));
    padding: 7.5px;
    border-radius: var(--radius-xs);
    color: var(--brand);
  }
  .page-home .nav__toggle { flex: 0 0 48px; width: 48px; height: 48px; margin: 0 0 0 auto; padding: 8px; }   /* live: the menu and the button hug the right edge of the second column */

  .header-cta {
    margin-left: auto;   /* live: the button column is right-aligned, so the button stays that far from the window's right edge at any width */
    margin-right: var(--header-cta-inset-phone);
    padding: 14px 23px 14px 24px;
    font-size: var(--fs-cta-mobile);
  }
  .page-home .header-cta { margin: 0 var(--header-home-right-phone) 0 var(--header-home-gap-phone); padding: 15px 35px; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    display: block;
    max-height: 0;
    overflow: hidden;
    background: var(--surface);
    transition: max-height .35s var(--ease);
  }
  .nav.is-open { max-height: calc(100dvh - 100px); overflow-y: auto; box-shadow: var(--shadow-drop); }
  .nav__list { flex-direction: column; flex-wrap: nowrap; }
  .nav__item { display: block; border-bottom: 1px solid var(--surface-alt2); }
  .nav__item:last-child { border-bottom: 0; }
  .nav__link { justify-content: flex-start; padding: 15px 30px; font-size: var(--fs-btn-sm); }
  .nav__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-radius: 0; min-width: 0;
    padding: 0 0 var(--sp-4) var(--sp-8);
    max-height: 0; overflow: hidden; transition: max-height .3s var(--ease);
  }
  .nav__item--open > .nav__sub { max-height: 40rem; }
}

/* ==========================================================================
   8  COMPONENTS
   ========================================================================== */

/* --- accordion (FAQ) — the live site uses rkit-accordion ---------------- */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__head { margin: 0; }
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-5) 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  text-align: left;
  color: var(--ink);
}
.accordion__trigger:hover { color: var(--brand); }
.accordion__icon { flex-shrink: 0; width: 22px; height: 22px; position: relative; }
.accordion__icon::before,
.accordion__icon::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 2px; background: currentColor; transform: translateY(-50%);
  transition: transform .3s var(--ease);
}
.accordion__icon::after { transform: translateY(-50%) rotate(90deg); }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: translateY(-50%) rotate(0); }
.accordion__panel { overflow: hidden; height: 0; transition: height .35s var(--ease); }
.accordion__panel > div { padding-bottom: var(--sp-6); color: var(--ink-soft); }
/* FAQ page: accordion held to the same reading width as the intro prose above it */
.accordion-wrap { max-width: 68ch; margin-inline: auto; margin-top: var(--sp-8); }

/* --- video figure -------------------------------------------------------- */
.video-figure { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--media-backdrop); }
.video-figure video { width: 100%; height: auto; display: block; }
.video-figure button {
  position: absolute; inset: 0; margin: auto;
  width: 84px; height: 84px; border-radius: var(--radius-circle);
  background: var(--surface-glass-strong); color: var(--brand);
  display: grid; place-items: center;
  transition: transform .3s var(--ease);
}
.video-figure button:hover { transform: scale(1.08); }
.video-figure button svg { width: 26px; height: 26px; }
.video-figure.is-playing button { opacity: 0; pointer-events: none; }

/* ==========================================================================
   9  FORMS
   ========================================================================== */

.form { display: grid; gap: var(--sp-5); }

.field { display: flex; flex-direction: column; gap: var(--sp-2); }

.field label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .875rem 1.125rem;
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field select { appearance: none; background-image: none; padding-right: 2.75rem; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-wash);
}

/* Error state — announced, not just coloured */
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: var(--danger); }
.field .error {
  display: none;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--danger);
}
.field.is-invalid .error { display: block; }

/* Status message shown after submission */
.form__status { display: none; padding: var(--sp-5); border-radius: var(--radius-sm); font-size: var(--fs-body); }
.form__status.is-shown { display: block; }
.form__status--ok { background: var(--success-wash); color: var(--success); border: 1px solid var(--success-line); }

/* ==========================================================================
   10  FOOTER
   One object on every page (templates/footer.html), in four parts measured on
   the live site (reference/chrome-measurements-2026-10-10.md): the "Get in
   touch" band with a contact form, the newsletter card that straddles it, the
   white columns band, and the dark bottom bar. On phones the first two are not
   shown, exactly as on the live site.
   ========================================================================== */

.site-footer { color: var(--brand); font-size: var(--fs-body); line-height: var(--lh-body); }
.site-footer a { text-decoration: none; }
.site-footer svg { display: block; fill: currentColor; }

/* --- 1  the "Get in touch" band (photo, dark scrim) ---------------------- */
.footer-cta {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-height: var(--footer-cta-min-h);
  margin-bottom: -120px;
  padding: var(--footer-cta-pad);
  background: var(--brand-light) url(/assets/img/2025/07/Image-11-band.jpg) 0 0 / cover no-repeat;
}
.footer-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, var(--scrim-cta-band-start) 0%, var(--scrim-cta-band-end) 90%);
}
/* the overseas variant (uk-fulfilment-for-overseas-brands): the eyebrow, a four-line title and the lede sit in the
   info column beside the card, no ticks, rows or socials; measured on live at 1440, 10 Oct 2026 */
.footer-cta--overseas .footer-cta__title { width: var(--overseas-title-w); }
.footer-cta--overseas .footer-cta__lede { width: var(--overseas-lede-w); }
/* the live footer headings carry none of the site-wide heading letter-spacing or balanced wrapping */
.site-footer h2,
.site-footer h3 { letter-spacing: normal; text-wrap: wrap; }
.footer-cta__eyebrow { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: 1; color: var(--brand); }
.footer-cta__title { width: 53%; margin: 0; font-size: var(--fs-4xl); font-weight: var(--fw-black); line-height: var(--lh-tight); color: var(--on-dark); }
.footer-cta__title span { font-weight: var(--fw-normal); }
.footer-cta__grid { display: flex; }
.footer-cta__info,
.footer-cta__formwrap { flex: 1 1 0; min-width: 0; }
.footer-cta__info { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.footer-cta__lede { margin: 0 0 14.4px; font-weight: var(--fw-light); color: var(--on-dark); }

.footer-ticks { margin: 0 0 57px; padding: 0; list-style: none; }
.footer-ticks li { display: flex; align-items: center; font-size: var(--fs-tick-label); line-height: var(--lh-list); color: var(--brand); }
.footer-ticks svg { flex: 0 0 14px; width: 14px; height: 14px; margin-right: 3.5px; color: var(--brand); }
.footer-ticks span { padding-left: 5px; }

/* the address parts: inline spans with no box of their own, so the line renders exactly as the plain text did;
   build:org-jsonld reads them for streetAddress, addressLocality and postalCode */
.site-footer .footer-address__street,
.site-footer .footer-address__locality,
.site-footer .footer-address__postcode { display: inline; margin: 0; padding: 0; font: inherit; line-height: inherit; }   /* outranks the rows' own span rules */
.footer-contact-rows { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; width: 100%; }
.footer-contact-row { display: flex; align-items: center; gap: 15px; padding: 5px 0; color: var(--on-dark); }
.footer-contact-row svg { flex: 0 0 20px; width: 20px; height: 20px; }
.footer-contact-row span { margin: 8px 0 6px; font-size: var(--fs-base); line-height: 1; }

.footer-cta__social { display: flex; gap: 20px; height: 25px; }
.footer-cta__social a { display: block; width: 25px; height: 25px; color: var(--on-dark); }
.footer-cta__social svg { width: 25px; height: 25px; }

.footer-cta__formwrap { display: flex; flex-direction: column; align-items: center; }
.footer-card {
  width: 75%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--glass-card);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.footer-card__title { margin: 0; text-align: center; font-size: var(--fs-cta-card); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--on-dark); }
.footer-card__title span { font-weight: var(--fw-normal); }

.footer-form { display: flex; flex-wrap: wrap; margin: 0 -5px -10px; }
.footer-form__field { position: relative; display: flex; align-items: center; width: 100%; padding: 0 5px; margin-bottom: 10px; }
.footer-form__field--half { width: 50%; }
.footer-form input,
.footer-form select {
  flex: 1 1 100%;
  width: 100%;
  min-height: 40px;
  padding: 8px 16px;
  font: var(--fw-medium) var(--fs-field)/var(--lh-field) var(--font);
  color: var(--on-dark);
  background: var(--fill-field-glass);
  border: 2px solid var(--line-field-glass);
  border-radius: var(--radius);
}
.footer-form input::placeholder { color: var(--on-dark); opacity: var(--opacity-placeholder); }
.footer-form select { appearance: none; padding: 5px 20px 5px 14px; line-height: calc(var(--fs-body) * var(--lh-body)); }
.footer-form select option { color: var(--ink); }
.footer-form__caret { position: absolute; right: 15px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; color: var(--on-dark); pointer-events: none; }
.footer-form input:focus,
.footer-form select:focus { outline: 2px solid var(--brand); outline-offset: 2px; }
.footer-form__captcha { width: 200px; height: 60px; border-radius: var(--radius); background: var(--fill-field-glass); }
.footer-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* the honeypot: no person sees or tabs to it */
.footer-form__submit {
  flex: 1 1 100%;
  min-height: 40px;
  padding: 20px 35px;
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  line-height: 1;
  text-align: center;
  color: var(--on-dark);
  background: var(--brand);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color .25s var(--ease);
}
.footer-form__submit:hover { background: var(--brand-dark); }

/* On the live site this band is shown on first paint and then goes away on the contact page (whose body is the same
   "Get in touch" content) and on the Resources listing, so those pages carry body.no-footer-cta. */
.no-footer-cta .footer-cta { display: none; }

/* --- 2  the newsletter card, straddling the band above and below --------- */
.footer-news { position: relative; z-index: 1; min-height: 180px; margin: 0 20px -90px; }
.footer-news__card {
  max-width: 1400px;
  min-height: 180px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-float);
}
.footer-news__inner { display: flex; align-items: center; gap: 10%; width: 100%; max-width: 1150px; margin-inline: auto; }
.footer-news__title { margin: 0; flex: 0 0 607px; font-size: var(--fs-news-title); font-weight: var(--fw-black); line-height: var(--lh-tight); color: var(--ink); }
.footer-news__title span { font-weight: var(--fw-normal); }
.footer-news__form { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.footer-news__form input {
  flex: 0 0 282px;
  min-width: 0;
  min-height: 40px;
  padding: 8px 16px;
  font-size: var(--fs-base);
  line-height: var(--lh-field);
  text-transform: lowercase;
  color: var(--text-field-light);
  background: transparent;
  border: 1px solid var(--line-field-light);
  border-radius: var(--radius-lg);
}
.footer-news__form input::placeholder { color: var(--text-field-light); opacity: 1; }
.footer-news__form button {
  flex: 0 0 auto;
  padding: 20px 35px;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1;
  text-transform: capitalize;
  color: var(--surface-warm);
  background: var(--brand);
  border: 1px solid var(--surface);
  border-radius: 50px;
  cursor: pointer;
  transition: background-color .25s var(--ease);
}
.footer-news__form button:hover { background: var(--brand-dark); }

@media (min-width: 1025px) and (max-width: 1439px) {
  .footer-news__title { flex: 0 1 auto; min-width: 0; }
  .footer-news__form { flex: 1 1 auto; min-width: 0; }
  .footer-news__form input { flex: 1 1 0; }
}

/* --- 3  the white columns band ------------------------------------------ */
.footer-main { position: relative; background: var(--surface); }
.footer-main__inner {
  display: flex;
  flex-wrap: wrap;
  max-width: 1400px;
  margin-inline: auto;
  padding: 150px 0 50px;
}
.footer-logo { display: block; width: 100%; padding-bottom: 5px; }
.footer-logo img { display: block; width: 75px; height: 101px; object-fit: contain; }
.footer-col { display: flex; flex-direction: column; gap: 20px; flex: 0 0 466px; min-width: 0; box-sizing: border-box; }
.footer-col--brand { padding-right: 50px; }
.footer-col--contact { padding: 0 50px 0 65px; }
.footer-col--links { padding-left: 50px; }
.footer-col h3 { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-black); line-height: var(--lh-tight); color: var(--ink); }
.footer-col--brand p { margin: 0 0 14.4px; font-size: var(--fs-base); line-height: var(--lh-text-relaxed); color: var(--ink); }

.footer-social { display: flex; gap: 5px; }
.footer-social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--on-dark); background: var(--brand); border-radius: var(--radius-circle); }
.footer-social svg { width: 20px; height: 20px; color: var(--on-dark); }

.footer-iconlist { margin: 0; padding: 0; list-style: none; }
.footer-iconlist li { padding-bottom: 8px; }
.footer-iconlist li + li { margin-top: 8px; }
.footer-iconlist li:last-child { padding-bottom: 0; }
.footer-iconlist a { display: flex; align-items: center; font-size: var(--fs-base); line-height: 1; color: var(--ink); }
.footer-iconlist svg { flex: 0 0 20px; width: 20px; height: 20px; margin-right: 5px; fill: var(--brand); }
.footer-iconlist span { padding-left: 5px; }
.footer-iconlist a.footer-iconlist__address { line-height: calc(var(--fs-body) * var(--lh-body)); }
.footer-iconlist .footer-iconlist__address svg { align-self: center; }

.footer-menu { margin: 0; padding: 0; list-style: none; }
.footer-menu__item { position: relative; }
.footer-menu a { display: flex; align-items: center; padding: 13px 20px; font-size: var(--fs-body); font-weight: var(--fw-light); line-height: 20px; color: var(--ink); }
.footer-menu a:hover,
.footer-menu a[aria-current="page"] { color: var(--brand); }
.footer-menu .sub-arrow svg { width: 1em; height: 1em; }
.footer-menu__sub { display: none; margin: 0; padding: 0 0 var(--sp-3) var(--sp-5); list-style: none; }
.footer-menu__item--has-sub:hover > .footer-menu__sub,
.footer-menu__item--has-sub:focus-within > .footer-menu__sub { display: block; }
.footer-menu__sub a { padding-block: 8px; font-size: var(--fs-sm); }

/* --- 4  the bottom bar --------------------------------------------------- */
.footer-bottom { background: var(--ink); color: var(--on-dark); }
.footer-bottom__inner {
  position: relative;
  max-width: min(100%, 1280px);
  margin: 0 80px;
  padding: 10px 0;
  text-align: center;
  font-size: var(--fs-base);
  line-height: var(--lh-text-relaxed);
}
.footer-bottom__inner p { margin: 0; }
.footer-bottom .alchemai-badge { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.footer-bottom .alchemai-badge:hover { transform: translateY(calc(-50% - 1px)); }

/* --- phones and tablets ----------------------------------------------------- */
@media (max-width: 1024px) {
  .footer-cta { padding: var(--footer-cta-pad-tablet); }
  .footer-cta__title { font-size: var(--fs-3xl); }
  .footer-cta__grid { flex-direction: column; gap: var(--sp-8); }
  .footer-card { width: 100%; max-width: 486px; }
  .footer-news__inner { flex-direction: column; align-items: flex-start; gap: var(--sp-5); padding: var(--sp-8); }
  .footer-news__form { width: 100%; }
  .footer-news__form input { flex: 1 1 auto; }
  .footer-main__inner { padding-inline: 20px; }
  .footer-col { flex: 0 0 50%; }
  .footer-news__title { flex: 0 0 auto; }
}

@media (max-width: 767px) {
  .site-footer { font-size: var(--fs-role); }
  .footer-cta,
  .footer-news { display: none; }
  .footer-main { min-height: 750px; }
  .footer-main__inner { max-width: 90%; margin-inline: 5vw; padding: 0; gap: 0; align-content: center; }
  .footer-logo { padding: 10px 0 5px; }
  .footer-logo img { width: 169px; height: 91px; max-width: 48%; }
  .footer-col { flex: 0 0 100%; gap: 20px; }
  .footer-col--brand { padding: var(--footer-brand-pad-phone); }
  .footer-col--contact,
  .footer-col--links { margin-top: var(--footer-links-mt-phone); padding: var(--footer-links-pad-phone); }
  .footer-col h3 { font-size: var(--fs-xl-sm); }
  .footer-iconlist a.footer-iconlist__address { line-height: calc(var(--fs-role) * var(--lh-body)); }
  .footer-menu { margin-top: 10px; }
  .footer-menu a { padding: 10px; font-size: var(--fs-base); color: var(--ink-strong); }
  .footer-bottom__inner { margin-inline: 5vw; max-width: 90%; }
  .footer-bottom .alchemai-badge { position: static; transform: none; margin: var(--sp-2) auto 0; }
  .footer-bottom .alchemai-badge:hover { transform: translateY(-1px); }
}

/* ==========================================================================
   11  UTILITIES  — a small, closed set
   ========================================================================== */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   12  RESPONSIVE
   Breakpoints match the original exactly: tablet <= 1024, mobile <= 767.
   ========================================================================== */

@media (max-width: 1024px) {
}

@media (max-width: 767px) {

  /* --- layout --- */
  .split { grid-template-columns: 1fr; gap: var(--sp-8); }
}

/* ==========================================================================
   13  MOTION AND PRINT
   ========================================================================== */

/* Reveal-on-scroll: opt-in, and harmless when JavaScript is absent. */
[data-reveal] { opacity: 1; }
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
  .btn:hover { transform: none; }
}

@media print {
  .site-header, .site-footer, .nav__toggle, .form, .video-figure button { display: none !important; }
  body { font-size: var(--fs-print-body); color: var(--ink-strong); background: var(--surface); }
  a::after { content: " (" attr(href) ")"; font-size: var(--fs-print-small); color: var(--ink-print-link); }
}
/* ==========================================================================
   14  HOME PAGE COMPONENTS
   Added once the explicit section plan was in place: images now travel with
   their own section, and each component has a real layout.
   ========================================================================== */

/* ==========================================================================
   HOME PAGE — section wrappers (data-section) tile the page with no margins between them, so each one can be
   scored on its own against the live section of the same name.
   The phone-only "Get in touch" band is not on the live desktop home page (its footer carries it).
   ========================================================================== */
@media (min-width: 1025px) {
  [data-section="cta"] { display: none; }
}

/* ==========================================================================
   HOME PAGE PATTERNS — one region per owner. Edit only inside your own BEGIN/END pair.
   ========================================================================== */

/* ===== HOME:A:BEGIN  (header bar (mobile), hero, icon strip, mobile get-in-touch band) ===== */

/* The wrappers of my sections keep their own formatting context, so the negative margins used below to let the
   hero and the band tuck under their neighbours shorten the section's measured height instead of leaking out. */
[data-section="hero"] { display: flow-root; }
@media (max-width: 767px) { [data-section="cta"] { display: flow-root; } }
/* the footer carries this band from tablet width up, so the page's own copy shows on phones only */
@media (min-width: 768px) { [data-section="cta"] { display: none; } }

/* --- phone header bar: the white bar plus the 19.5px gap under it --------------------------------------------
   The header itself is the shared template (templates/header.html); the home page only adds the measured gap. */
@media (max-width: 1024px) {
  .page-home .site-header { padding-bottom: 5vw; }
}
/* tablets only (768-1024): the live bar spaces its three items 0.2px and 2.2px tighter than the shared template does; phones follow the live column rule above */
@media (min-width: 768px) and (max-width: 1024px) {
  .page-home .brand img { width: 108.8px; }
  .page-home .nav__toggle { margin-left: 6.5vw; }
  .page-home .header-cta { margin-left: 18px; }
}

/* --- hero: film backdrop, headline, proof badge, quote card ---------------------------------------------------- */
.hero-video { display: flow-root; margin-top: var(--hero-margin-top); }   /* live: the hero rides up by 8% of the page width over a fixed 120px (4.8px at 1440) */
.hero-video__stage {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: var(--hero-min-h);
  padding: var(--hero-pad-top) 0 var(--hero-pad-bottom);
  margin-bottom: calc(var(--hero-spacer) - var(--strip-lift));   /* the icon strip rides up over the spacer */
  background: var(--surface);
  color: var(--on-dark);
}
.hero-video__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-video__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--scrim-hero-film-start) 0%, var(--scrim-hero-film-end) 100%);
  opacity: 0.76;
}

.hero-video__copy {
  flex: 0 0 57.55%;                       /* measured 828.7 of 1440 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: 0 72px;
}
.hero-video__title {
  margin: 0;
  font-size: var(--fs-4xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: normal;
  text-wrap: wrap;
  color: var(--on-dark);
}
.hero-video__title span { font-weight: var(--fw-normal); }
.hero-video__form {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.hero-video__form .quote-form { width: 75%; }

/* proof badge: three overlapping ringed icons and a label in a white pill */
.proof-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  margin: 0;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink-strong);
}
.proof-badge__icons { display: flex; align-items: center; height: 60px; }
.proof-badge__icons img {
  width: 40px;
  height: 40px;
  margin: 0 0 0 -14.8px;
  box-sizing: border-box;
  border: 5px solid var(--ink-strong);
  border-radius: var(--radius-pill);
}
.proof-badge__icons img:first-child { margin-left: 7.6px; }
.proof-badge__icons::after { content: ""; flex: 0 0 7.6px; }
.proof-badge__text {
  box-sizing: border-box;
  width: 120.5px;
  padding-left: 10px;
  font-size: var(--fs-role);
  font-weight: var(--fw-bold);
  line-height: 1;
}

/* --- quote form: the frosted card with the enquiry fields ------------------------------------------------------
   One object: the hero card, the phone get-in-touch band and (once it adopts the family) the footer card. */
.quote-form {
  --quote-form-glass: var(--glass-quote-hero);
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  margin: 0;
  border-radius: var(--radius-lg);
  background: var(--quote-form-glass);
  box-shadow: none;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--on-dark);
}
.quote-form--band { --quote-form-glass: var(--glass-card); }
.quote-form .quote-form__title {
  margin: 0;
  font-size: var(--fs-cta-card);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: normal;
  text-align: center;
  text-wrap: wrap;
  color: var(--on-dark);
}
.quote-form__title span { font-weight: var(--fw-normal); }
.quote-form__fields { display: flex; flex-wrap: wrap; margin: 0 -5px -10px; }
.quote-form .quote-form__field {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  width: 100%;
  padding: 0 5px;
  margin-bottom: 10px;
}
.quote-form .quote-form__field--half { width: 50%; }
.quote-form .quote-form__field input,
.quote-form .quote-form__field select {
  flex: 1 1 100%;
  width: 100%;
  min-height: 40px;
  padding: 8px 16px;
  font: var(--fw-medium) var(--fs-field)/var(--lh-field) var(--font);
  color: var(--on-dark);
  background: var(--fill-field-glass);
  border: 2px solid var(--line-field-glass);
  border-radius: var(--radius);
  transition: none;
}
.quote-form .quote-form__field input::placeholder { color: var(--on-dark); opacity: var(--opacity-placeholder); }
.quote-form .quote-form__field select {
  appearance: none;
  padding: 5px 20px 5px 14px;
  line-height: calc(var(--fs-body) * var(--lh-body));
}
.quote-form .quote-form__field select option { color: var(--ink); }
.quote-form .quote-form__field input:focus,
.quote-form .quote-form__field select:focus { outline: 2px solid var(--brand); outline-offset: 2px; box-shadow: none; border-color: var(--line-field-glass); }
.quote-form .quote-form__field.is-invalid input,
.quote-form .quote-form__field.is-invalid select { border-color: var(--danger-line); }
.quote-form .quote-form__field .error { flex: 1 1 100%; margin-top: 4px; color: var(--danger-line); }
.quote-form__caret { position: absolute; right: 15px; top: 12.75px; width: 11px; height: 11px; color: var(--on-dark); fill: currentColor; pointer-events: none; }
.quote-form__captcha { width: 200px; height: 60px; border-radius: var(--radius); background: var(--fill-field-glass); }
.quote-form__submit {
  flex: 1 1 100%;
  min-height: 40px;
  padding: 20px 35px;
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  line-height: 1;
  text-align: center;
  color: var(--on-dark);
  background: var(--brand);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color .25s var(--ease);
}
.quote-form__submit:hover { background: var(--brand-dark); }
.quote-form .form__status { margin: 0; }

/* --- icon strip: four figures in a white box that rides up over the hero --------------------------------------- */
.icon-strip { position: relative; padding-inline: 34px; }
.icon-strip .icon-strip__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: 30px;
  border-radius: var(--radius-strip);
  background: var(--surface);
  box-shadow: var(--shadow-icon-strip);
  overflow: hidden;
}
.icon-strip__item { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 30px; }
.icon-strip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--size-strip-icon);
  height: var(--size-strip-icon);
  border-radius: var(--radius-circle);
  background: var(--ink);
}
.icon-strip__icon img { width: 20px; height: 20px; margin-top: 2.6px; }   /* sits 1.3px low, as on the live page */
.icon-strip__text { display: flex; flex-direction: column; gap: 5px; width: 50%; }
.icon-strip__value {
  display: block;
  min-height: 2lh;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--ink);
}
.icon-strip__value--counter { display: flex; min-height: 0; font-weight: var(--fw-semi); }
.icon-strip__unit { flex: 1 1 auto; }
.icon-strip__label {
  display: block;
  font-size: var(--fs-strip-label);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--ink-strong);
}

/* --- get-in-touch band (phones; the footer shows the same component from tablet width up) ----------------------- */
.cta-band {
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-height: var(--cta-band-min-h-phone);
  margin-bottom: -120px;                 /* the footer starts 120px up inside the band */
  padding: var(--footer-cta-pad-phone);
  background:
    linear-gradient(0deg, var(--scrim-cta-band-start) 0%, var(--scrim-cta-band-end) 90%),
    url(/assets/img/2025/07/Image-11-band.jpg) 0 0 / cover no-repeat,
    var(--brand-light);
  color: var(--brand);
}
.cta-band__title { max-width: 255px; }   /* the heading itself is the shared .sec-title */
.cta-band__form { margin-top: 35.0938px; }

/* --- tablet and phone ------------------------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero-video { margin-top: 0; }
  .hero-video__stage {
    flex-wrap: wrap;
    min-height: var(--hero-min-h);
    padding: var(--hero-pad-top) 0 var(--hero-pad-bottom);
    margin-bottom: calc(var(--hero-spacer) - var(--strip-lift-phone));
  }
  .hero-video__copy { flex: 0 0 100%; align-items: center; gap: 1px; padding: var(--hero-copy-pad-phone); text-align: center; }
  .hero-video__form { flex: 0 0 100%; padding: var(--hero-form-pad-phone); }
  .hero-video__form .quote-form { width: 100%; max-width: 486px; }
  .proof-badge { align-self: center; margin-top: 23px; }
  .icon-strip { padding-inline: 5vw; }
  .icon-strip .icon-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 0; padding: 20px; }
  .icon-strip__item { column-gap: 0; row-gap: 20px; }
  .icon-strip__icon { width: var(--size-strip-icon-phone); height: var(--size-strip-icon-phone); }
  .icon-strip__icon img { width: 15px; height: 15px; margin-top: 1.4px; }
  .icon-strip__text { align-items: center; width: 100%; text-align: center; }
  .icon-strip__value { min-height: 0; font-size: var(--fs-lg-plus); }   /* live: the figure is as tall as its wrap (one line at 430, two at 390), not a fixed two lines */
  .icon-strip__value--counter { min-height: 0; }
  .icon-strip__value--counter::before { content: ""; flex: 1 1 auto; }
  .icon-strip__label { font-size: var(--fs-base); }
}
@media (max-width: 767px) {
  .hero-video__title { font-size: var(--fs-hero-title-phone); }
  .proof-badge { display: none; }
  .quote-form .quote-form__title { font-size: var(--fs-xl-sm); }
  .quote-form .quote-form__field--half { width: 100%; }
  .quote-form .quote-form__field select { line-height: calc(var(--fs-role) * var(--lh-body)); }   /* the live phone page sets its fields in 14.4px body type */
  .quote-form__caret { top: 12.5px; }
  .quote-form__submit { padding: 15px 25px; font-size: var(--fs-cta-mobile); }
}

/* ===== HOME:A:END ===== */

/* ===== HOME:B1:BEGIN  (why, global, uk: image-and-text split, tick list) ===== */

/* ---- Section title: .sec-title (+ .sec-title__light) and .eyebrow--section --------------------
   A heading in which part is black-weight and part regular, with an optional small pink label above.
   Measured: 64px / 1.1 / 900 desktop, 33px phone; the regular part is weight 400; no tracking. */
.sec-title {
  margin: 0;
  font-size: var(--fs-sec-title);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: normal;
  text-wrap: wrap;
  color: var(--ink);
}
.sec-title__light { font-weight: var(--fw-normal); }
.sec-title--on-dark { color: var(--on-dark); }

/* Eyebrow over title as one group: .sec-heading (+ --center). --sec-heading-gap sets the space between. */
.sec-heading {
  display: flex;
  flex-direction: column;
  gap: var(--sec-heading-gap, var(--gap));
}
.sec-heading--center { align-items: center; text-align: center; }

/* The short brand rule under a title: .accent-bar. 5% of its column (32px on desktop, 17.5px on a phone), 4px thick.
   The title above it carries its own 10px of bottom padding; the bar's 2px on top makes the live divider's 12px. */
.accent-bar {
  display: block;
  width: var(--size-accent-bar-w);
  height: var(--size-accent-bar-h);
  margin: var(--space-accent-bar);
  background: var(--brand);
}

.eyebrow--section {
  margin: 0;
  font-size: var(--fs-section);  /* 17.6px desktop, 14.4px phone, whatever the parent's own size */
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  color: var(--brand);
}

/* ---- Tick list: .ticks -------------------------------------------------------------------------
   The pink check-square list. Icon is a mask painted with currentColor, so the markup is a plain
   <ul class="ticks"><li>text</li></ul>. Knobs: --tick-fs, --tick-size, --tick-gap, --tick-icon. */
.ticks { margin: 0; padding: 0; list-style: none; }
.ticks li {
  display: flex;
  align-items: center;
  font-size: var(--tick-fs, var(--fs-tick-label));   /* 19.2px desktop */
  line-height: var(--lh-list);
  color: var(--brand);
}
.ticks li::before {
  content: "";
  flex: none;
  width: var(--tick-size, 14px);
  height: var(--tick-size, 14px);
  margin-right: var(--tick-gap, 8.5px);              /* 3.5px after the icon + 5px before the text */
  background-color: currentColor;
  -webkit-mask: var(--tick-icon, var(--icon-tick-square)) center / contain no-repeat;
  mask: var(--tick-icon, var(--icon-tick-square)) center / contain no-repeat;
}

/* ---- Solid pill button: .btn.btn--solid -------------------------------------------------------
   The flat call-to-action pill used inside the home bands: no border, 15px 35px, 16px / 600. */
.btn--solid {
  --btn-solid-fs: var(--fs-base);
  padding: 15px 35px;
  border-width: 0;
  font-size: var(--btn-solid-fs);
  font-weight: var(--fw-semi);
  line-height: 1;
}

/* ---- Photographs: .img-photo (+ --notch) ------------------------------------------------------- */
.img-photo { border-radius: var(--photo-radius, var(--radius-photo)); }
.img-photo--notch { border-radius: var(--radius-photo) var(--radius-photo) var(--radius-photo) 0; }
.img-photo--soft { --photo-radius: var(--radius-photo-soft); }   /* the lightly rounded photograph (10px): logos, screenshots, page photos */

/* ---- Frosted round badge: .badge-glass ---------------------------------------------------------
   Translucent brand disc over a photograph (the "20+ years" figure). Position it in a
   position:relative parent; it sits at the top-left corner of that parent. */
.badge-glass {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  width: 160px;
  min-height: 160px;
  margin: 0;
  padding: 3px 20px 20px;
  border-radius: var(--radius-pill);
  background: var(--fill-badge-glass);
  -webkit-backdrop-filter: blur(var(--blur-badge-glass));
  backdrop-filter: blur(var(--blur-badge-glass));
  color: var(--on-dark);
  text-align: center;
}
.badge-glass__figure { display: block; font-size: var(--fs-badge-figure); font-weight: var(--fw-semi); line-height: 1; }
.badge-glass__label  { display: block; font-size: var(--fs-section); font-weight: var(--fw-bold); line-height: 1; }

/* ---- Image-and-text split: .split.split--band --------------------------------------------------
   A full-width band of two columns (copy + media). Everything below is scoped to .split--band so
   the older plain .split (contact band) is untouched until its owner converges it.
   Knobs (custom properties on the band): --split-pad (padding shorthand, % of band width),
   --split-min-h, --split-cols, --split-copy-w / --split-media-w (used by --media-start),
   --split-copy-gap, --split-img-w (media image display width; default fills the cell).          */
.split--band {
  --split-cols: minmax(0, 1fr) minmax(0, 1fr);
  --split-pad: 6% 6% 2%;
  --split-min-h: 70vh;
  --split-copy-gap: var(--gap-copy);
  display: grid;
  grid-template-columns: var(--split-cols);
  column-gap: var(--gap-split-col);
  row-gap: var(--gap-split-stack);
  align-items: center;
  padding: var(--split-pad);
  min-height: var(--split-min-h);
  container-type: inline-size;
  font-size: var(--fs-section);
  color: var(--brand);
}

/* copy column: title, lede, list; stacks with a 15px gap and keeps 5% of the band clear on its inner edge */
.split--band > .split__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--split-copy-gap);
  min-width: 0;
  padding-right: 5cqw;
}
.split--band .split__text {
  font-size: var(--fs-section-body);
  font-weight: var(--fw-light);
  color: var(--ink-lede);
}
.split--band .split__text p,
.split--band .split__text p:last-child { margin-bottom: var(--space-para); }
/* a link inside a lede keeps the band's base size (14.4px on a phone) while the lede is 17.6px; ink colour, underlined, line height 1, as the live links are */
.split__text a { color: var(--ink); text-decoration: underline; font-size: var(--fs-section); line-height: 1; }

/* media column: the picture centred in a 35px frame; the image fills the cell unless --split-img-w says otherwise */
.split--band > .split__media { min-width: 0; padding: 35px; text-align: center; }
.split--band .split__media img {
  display: block;
  width: min(var(--split-img-w, 100%), 100%);
  max-width: 100%;
  max-height: none;
  height: auto;
  margin-inline: auto;
  border-radius: 0;
  object-fit: fill;
}
.split--band .split__media img.img-photo { border-radius: var(--photo-radius, var(--radius-photo)); }
/* the live page serves this photo pre-sized (359x538 desktop, 351x527 phone); match those boxes to the pixel */
.split__media--badged img { aspect-ratio: 359 / 538; }

/* image on the left on desktop, copy keeps first place in the source (and on a phone) */
.split--media-start { --split-cols: var(--split-media-w, minmax(0, 1fr)) var(--split-copy-w, minmax(0, 1fr)); }
.split--media-start > .split__media { order: -1; }

/* three columns: copy | badged photo | aside (photo, text, button). Source order = copy, media, aside. */
.split--trio {
  --split-cols: 34% 32% minmax(0, 1fr);
  --split-copy-gap: 20px;
  --split-min-h: 0;
  column-gap: var(--gap-xwide);
  row-gap: var(--gap);
  align-items: stretch;
}
.split--trio > .split__copy { justify-content: flex-start; padding-right: 0; }
.split--trio > .split__media { position: relative; padding: 29px; }
.split__aside {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
  padding-bottom: 30px;
}
.split__aside > img { width: 100%; height: 210px; object-fit: fill; }   /* fill, as live: the home widgets (.elementor-21 2251d3b7 and 23f7a01f) and the about-us widget (.elementor-2036 dfb44bf) all set height 210px with object-fit fill, so the picture is stretched to the box; parity over the image-aspect-ratio audit */

/* boxed: the band's content sits in a centred 1302px column with 7em above and below */
.split--boxed {
  --split-pad: 7em 0;
  width: min(1302px, 94%);
  margin-inline: auto;
}

/* ---- section tuning (measured values for the three live bands) ---------------------------------- */
[data-section="global"] > .split { --split-pad: 6% 6% 2%; --split-img-w: 90%; }   /* live: the picture is 90% of its cell inside the 35px frame */
[data-section="uk"] > .split {
  --split-pad: 4% 6% 10%;
  --split-copy-w: 45%;
  --split-media-w: 50%;
  justify-content: end;
}

/* ---- stacked: tablet and phone ---------------------------------------------------------------- */
@media (max-width: 1024px) {
  .split--band { grid-template-columns: minmax(0, 1fr); row-gap: var(--gap-split-stack); align-content: start; }
  .split--band > .split__copy { padding-right: 0; }
  .split--band > .split__media { padding: 0; }
  .split--media-start > .split__media { order: 0; }
  .split--boxed { width: 90%; }
  .split--trio { row-gap: var(--gap); }
  .split--trio > .split__media { order: -1; padding: 78px 0 0; }   /* 58px for the badge + the 20px row gap */
  .split--trio > .split__aside { padding-bottom: 30px; }
}
@media (max-width: 767px) {
  .split--band { --split-pad: 15% 5%; }
  .split--boxed { --split-pad: 7em 0; }
  [data-section="global"] > .split { --split-pad: 15% 5%; --split-img-w: 100%; }
  [data-section="uk"] > .split { --split-pad: 5% 5% 15%; }
  .badge-glass { width: 140px; min-height: 140px; }
  .split__media--badged img { aspect-ratio: 351 / 527; }
  .ticks { --tick-fs: var(--fs-base); }
  .btn--solid { --btn-solid-fs: var(--fs-cta-mobile); }
  .sec-title.sec-title--phone-sm { font-size: var(--fs-xl-sm); }   /* 28px instead of 33px (process, technology, since, testimonials) */
  .br-wide { display: none; }                                      /* a line break that only exists on wide screens */
}

/* ===== HOME:B1:END ===== */

/* ===== HOME:B2:BEGIN  (started, responsible, facility: reuse split and tick list) ===== */

/* ---- Titles: smaller (.sec-title--small) and mid-size (.sec-title--mid) ----------------------------
   The same title object as .sec-title at other measured sizes. --small: 25px / 1.2 / 600 in the brand
   colour (the "We started small" heading). --mid: 58px (33px on a phone), colour stays --ink. */
.sec-title--small {
  font-size: var(--fs-sec-title-small);
  font-weight: var(--fw-semi);
  line-height: var(--lh-sec-title-small);
  color: var(--brand);
}
.sec-title--mid { font-size: var(--fs-sec-title-mid); }
/* --sub: a sub-heading in the title family, 25px / 500 in the ink colour (the full title size on a phone) */
.sec-title--sub { font-size: var(--fs-sec-title-small); font-weight: var(--fw-medium); }

/* ---- Lede copy that is regular weight: .split__text--body --------------------------------------
   The live paragraphs in these bands are weight 400, not the light 300 of the plain lede. */
.split--band .split__text--body { font-weight: var(--fw-normal); }
/* The live lede lays out at exactly 28.16px a line; a unitless 1.6 comes out 0.02px short in Chrome and the
   shortfall adds up over a long lede, so the lede takes its line height in em (same value, exact layout). */
.split--band .split__text { line-height: calc(var(--lh-body) * 1em); }
/* .split__text--spaced: a blank line (1.6em) between paragraphs instead of the usual 14.4px, as the live copy has */
.split--band .split__text--spaced p { margin-bottom: calc(var(--lh-body) * 1em); }
.split--band .split__text--spaced p:last-child { margin-bottom: var(--space-para); }

/* ---- Cover-fitted photograph: .split__media--cover ---------------------------------------------
   The picture fills a fixed-height box and is cropped to it (object-fit: cover), as the live
   "Fast & Responsible" picture is. Knob: --split-img-h (default 500px). */
.split--band .split__media--cover img {
  height: var(--split-img-h, 500px);
  object-fit: cover;
  object-position: var(--split-img-pos, 50% 50%);   /* which part of a cropped picture stays in view */
}

/* ---- Half-bleed band: .split--bleed ------------------------------------------------------------
   Two cells that meet with no gap and no frame: copy beside a photograph that runs to the band edge.
   Used by `started` (copy | photo) and `facility` (title row, then photo | copy). Source order is
   the stacking order on a phone; the DOM puts the photograph where it appears when stacked.
   Knobs: --split-pad, --split-cols, --split-copy-pad, --split-copy-gap, --split-media-margin,
   --split-media-min-h (height of the photograph cell once stacked), --split-head-pad.
   .split__head is an optional title that spans both columns. */
.split--bleed {
  --split-pad: 5% 0 4%;
  --split-min-h: 0;
  --split-copy-pad: 0 5cqw;
  --split-copy-gap: 20px;
  --split-media-margin: 0 0 5cqw;
  --split-media-min-h: 0;
  --split-head-pad: 5%;
  column-gap: 0;
  row-gap: 0;
  align-items: stretch;
}
.split--bleed > .split__copy {
  justify-content: flex-start;
  padding: var(--split-copy-pad);
}
.split--bleed > .split__media {
  position: relative;
  min-height: var(--split-media-min-h);
  margin: var(--split-media-margin);
  padding: 0;
}
.split--bleed .split__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
}
.split--bleed > .split__head {
  grid-column: 1 / -1;
  margin: 0 0 var(--gap-split-stack);
  padding-inline: var(--split-head-pad);
}

/* ---- Tick list with a plain check, large: .ticks--check ----------------------------------------
   The facility credentials: a 29px check (25px on a phone), 18px bold capitalised labels, 22px
   between rows. Reuses .ticks; only the icon, size and label style change. */
.ticks--check {
  --tick-icon: var(--icon-tick-check);
  --tick-size: var(--tick-check-size);
  --tick-gap: var(--tick-check-gap);
  --tick-fs: var(--fs-tick-label-lg);
}
.ticks--check li { font-weight: var(--fw-bold); text-transform: capitalize; }
.ticks--check li + li { margin-top: var(--space-tick-row); }

/* ---- Roomy tick list: .ticks--list ----------------------------------------------------------------
   .ticks with a 20px icon 10px from its label and 23px between rows (the key-capabilities list, the goods-in
   list). On a phone the icon sits at the top and rides 3px low against a wrapped label. */
.ticks--list { --tick-size: var(--size-tick-list); --tick-gap: var(--gap-tick-list); }
.ticks--list li { line-height: var(--lh-tick-list); }
.ticks--list li + li { margin-top: var(--space-tick-list-row); }

/* two lists side by side (one column once stacked) */
.split__lists {
  display: grid;
  grid-template-columns: repeat(2, 274.3px);      /* measured: two 274.3px columns, 20px apart */
  column-gap: 20px;
  row-gap: 20px;
}

/* ---- section tuning (measured values) ----------------------------------------------------------- */
[data-section="started"] > .split { --split-cols: minmax(0, 1fr) minmax(0, 1fr); }
/* Show the complete introduction photograph at its natural proportions, rather than cropping it to the copy height. */
[data-section="started"] > .split > .split__media { align-self: start; }
[data-section="started"] > .split > .split__media img {
  position: static;
  height: auto;
  object-fit: contain;
}
[data-section="responsible"] > .split {
  --split-pad: 0 6%;
  --split-min-h: 80vh;
  --split-img-w: 511.1px;
  --split-media-w: calc(var(--split-img-w) + 70px);   /* the photograph plus its 35px frame */
  --split-copy-w: minmax(0, 1fr);
}
[data-section="facility"] > .split {
  --split-pad: 0 0 10%;
  --split-cols: 43% minmax(0, 1fr);
  --split-copy-pad: 5cqw;
  --split-media-margin: 0;
}

@media (max-width: 1024px) {
  .split__lists { grid-template-columns: minmax(0, 1fr); }
  [data-section="started"] > .split {
    --split-copy-pad: 0;
    --split-media-margin: 15% 0 0;
    --split-media-min-h: 0;
  }
  [data-section="facility"] > .split { --split-media-min-h: 238px; }
}
@media (max-width: 767px) {
  .split--bleed { --split-pad: 15% 5%; --split-head-pad: 9.5%; }
  [data-section="started"] > .split { --split-copy-gap: 30px; }
  [data-section="responsible"] > .split { --split-pad: 15% 5%; }
  [data-section="facility"] > .split {
    --split-pad: 8% 0 15%;
    --split-copy-gap: 60px;
  }
  .ticks--check { --tick-size: var(--tick-check-size-phone); --tick-gap: var(--tick-check-gap-phone); }
  .sec-title--sub { font-size: var(--fs-sec-title); }
  .ticks--list li::before { align-self: flex-start; position: relative; top: var(--offset-tick-list-icon-phone); }
}

/* ===== HOME:B2:END ===== */

/* ===== HOME:C:BEGIN  (services, difference: outlined cards) ===== */
/* --- cards band: a full-width section holding a title and outlined cards -- */
.cards-band { width: 100%; }
.cards-band__head {
  max-width: 82.5rem;               /* 1320px = 1280px content + 20px each side */
  margin-inline: auto;
  padding: 6.25rem 1.25rem 1.25rem;
}

/* --- outlined cards ---------------------------------------------------------
   .cards-outline holds .card-outline children. The layout modifier also picks
   the card "look" by setting custom properties the cards inherit:
     --3x2       roomy cards (services): 3 columns, 1px edge, 20px radius
     --features  compact cards (differences): lead cell + 4-up flex tiles
   .card-outline--image is the photo variant: pink fill, photo under a pink
   wash (the image sits at --card-image-opacity), white quote bottom-left. */
.cards-outline {
  --card-edge-width: 1px;
  --card-radius: var(--card-roomy-radius);
  --card-pad: var(--card-roomy-pad);
  --card-gap: 3.125rem;             /* 50px between heading and copy */
  --card-title: var(--card-roomy-title);
  --card-title-lh: var(--lh-tight);
  --card-copy: var(--ink-lede);
  --card-text-size: var(--fs-section-body);
  --card-text-lh: var(--lh-body);
  --card-text-weight: var(--fw-normal);
  --card-text-gap: .9rem;
}
@media (min-width: 400px) and (max-width: 767px) {
  .cards-outline { --card-text-lh: calc(var(--lh-body) * 1em); }   /* large phones: em, not unitless, so each line is the live 28.156px and a column of cards stops drifting a hundredth of a pixel per line; not at 390, whose capture the unitless value already fits; the later card variants keep their own values */
}
.card-outline {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--card-gap);
  padding: var(--card-pad);
  border: var(--card-edge-width) solid var(--card-outline-edge);
  border-radius: var(--card-radius);
  background: var(--card-bg, transparent);
}
.card-outline__title {
  margin: 0;
  font-size: var(--card-title);
  font-weight: var(--fw-bold);
  line-height: var(--card-title-lh);
  letter-spacing: normal;
  text-wrap: wrap;
  color: var(--card-outline-edge);
}
.card-outline__text {
  margin: 0;
  font-size: var(--card-text-size);
  font-weight: var(--card-text-weight);
  line-height: var(--card-text-lh);
  color: var(--card-copy);
}
.card-outline__text > p { margin: 0 0 var(--card-text-gap); }

.card-outline--image {
  justify-content: flex-end;
  gap: 6.25rem;
  overflow: hidden;
  isolation: isolate;
  --card-image-position: left top;   /* the live card anchors the photo at its top-left */
  background: var(--brand);
}
.card-outline__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--card-image-position, center);
  opacity: var(--card-image-opacity);
}
.card-outline__quote {
  margin: 0;
  font-size: var(--card-roomy-quote);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--on-dark);
}
.card-outline__quote p { margin: 0; }

/* services: 3 columns by 2 rows on the grey band. Knobs: --cards-cols (the columns), --cards-cols-tablet (default 2 equal),
   --cards-gap, --cards-pad, --cards-pad-phone; the four-across and icon cards of the process pages are this grid with other knobs. */
.cards-outline--grid {
  display: grid;
  grid-template-columns: var(--cards-cols, repeat(3, minmax(0, 1fr)));
  gap: var(--cards-gap, var(--cards-gap-default));
  padding: var(--cards-pad, var(--cards-pad-default));
}

/* differences: a lead cell then compact tiles, wrapping like the live flex row */
.cards-band--features { padding-block: 8.8rem; }
.cards-outline--features {
  --card-edge-width: var(--card-compact-edge-width);
  --card-radius: var(--card-compact-radius);
  --card-pad: var(--card-compact-pad);
  --card-gap: 1.25rem;
  --card-title: var(--card-compact-title);
  --card-title-lh: 1;
  --card-copy: var(--card-outline-copy-strong);
  --card-bg: var(--surface);
  --card-text-size: var(--card-compact-text);
  --card-text-lh: 1.2;
  --card-text-weight: var(--fw-medium);
  --card-text-gap: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.25rem;
  width: calc(88% - 2.2rem);
  max-width: 100rem;
  margin-inline: auto;
}
.cards-outline--features > .card-outline { flex: 0 0 23%; justify-content: flex-start; }
.cards-outline__lead {
  flex: 0 0 49%;
  justify-content: center;
  --sec-heading-gap: .625rem;
}

@media (max-width: 1024px) {
  .cards-outline--grid { grid-template-columns: var(--cards-cols-tablet, repeat(2, minmax(0, 1fr))); }
  .cards-outline { --card-title: var(--card-roomy-title-mobile); }
  .cards-outline--features { width: calc(100% - 2.5rem); }
  .cards-outline--features > .card-outline { flex-basis: calc(50% - .625rem); }
  .cards-outline__lead { flex-basis: 100%; }
}
@media (max-width: 767px) {
  .cards-band__head {
    max-width: none;
    padding-inline: calc(1.25rem + (100% - 2.5rem) * .05);   /* content = 90% of the width inside 20px gutters */
  }
  .cards-outline--grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    padding: var(--cards-pad-phone, var(--cards-pad-default-phone));
    --card-pad: var(--card-roomy-pad-mobile);
    --card-gap: 1.875rem;
    --card-title: var(--card-roomy-title-mobile);
  }
  .card-outline--image { gap: 1.875rem; }
  .card-outline__quote { font-size: var(--card-roomy-title-mobile); }

  .cards-band--features { padding-block: 3.6rem .9rem; }
  .cards-outline--features {
    width: calc((100% - 1.8rem) * .9);
    --card-title: var(--card-compact-title-mobile);
  }
  .cards-outline--features > .card-outline,
  .cards-outline__lead { flex-basis: 100%; }
  .cards-outline__lead { align-items: center; text-align: center; padding-bottom: 1.25rem; }
}

/* ===== HOME:C:END ===== */

/* ===== HOME:D:BEGIN  (process, technology: steps timeline, icon row, image cards) ===== */

/* --- .steps : the dark numbered-steps timeline ----------------------------
   Desktop: label | rule with node dot | title. Phone: label, title, arrow stacked. */
.steps-band { background: var(--dark); color: var(--on-dark); }
.steps-band__head {
  width: min(1280px, calc(100% - 40px)); margin-inline: auto;
  padding: 100px 0 50px;
}
/* ol.steps: more specific than the base `ol[class]` reset and the older `.steps` grid rule */
ol.steps { display: block; gap: 0; list-style: none; margin: 0 auto; padding: 50px 0; width: min(915px, 100%); }
.steps__item {
  position: relative;
  display: grid; grid-template-columns: 26.98% 1fr 43.18%;
  min-height: var(--steps-item-min-h);
}
.steps__item::before {          /* the rule, continuous from row to row */
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2.7px; margin-left: -1.35px; background: var(--steps-rule);
}
.steps__num {
  grid-column: 1; align-self: start;
  position: sticky; top: 180px; margin: 10px 0 0;
  font-size: var(--fs-step); font-weight: var(--fw-medium); line-height: 1;
  letter-spacing: normal; color: var(--brand);
}
.steps__node {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 35px; margin-left: -17.5px; padding-top: 10px;
  color: var(--brand);
}
.steps__dot { display: block; position: sticky; top: 180px; padding-top: 12px; }
.steps__dot-svg { display: block; }
.steps__title {
  grid-column: 3; align-self: start; margin: 0;
  font-size: var(--fs-step); font-weight: var(--fw-medium); line-height: 1;
  letter-spacing: normal; text-wrap: wrap; color: var(--on-dark);
}
.steps__arrow, .steps__and-phone { display: none; }
.steps-band__cta { padding: 30px 0 100px; text-align: center; }

/* --- .feature-row / .icon-cell : a row of icon-and-label cells -------------
   (icon-cell is the same idea as A's .icon-strip figure: converge at merge) */
.feature-band { position: relative; padding-inline: 5%; }
.feature-band__mesh {           /* the faint network watermark behind the heading and icons */
  position: absolute; inset: 0; width: 100%; height: 100%;
  color: var(--brand); fill: currentColor; opacity: var(--opacity-watermark); pointer-events: none;
}
.feature-band__inner {
  position: relative;
  display: flex; flex-direction: column; gap: 100px;
  padding: 7% 0 10%;
}
.feature-row {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 5%;
}
.icon-cell { display: flex; flex-direction: column; align-items: center; gap: 15px; text-align: center; }
.icon-cell__icon { display: block; width: 50px; height: 50px; color: var(--brand); }
.icon-cell__icon svg { width: 100%; height: 100%; }
.icon-cell__label {
  margin: 0; font-size: var(--fs-section-body); line-height: var(--lh-list); color: var(--ink-lede);
}

/* --- .media-cards : three image cards, heading and text under each image --- */
.media-cards {
  display: flex; flex-direction: column; justify-content: center; gap: 65px;
  min-height: var(--media-cards-min-h); padding: 10% 5%;
  background: var(--surface-alt);
}
.media-cards__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: center; gap: 30px;
}
.media-cards__item { display: block; width: 30%; }
.media-cards__frame {
  height: 100%;
  border-top: 1px solid var(--line-media-card);
  border-radius: var(--radius-panel); overflow: hidden;
}
.media-cards__img { display: block; width: 100%; height: 400px; object-fit: cover; }
.media-cards__body { min-height: 350px; padding: 10% 10% 0 0; }
.media-cards__item:nth-child(2) .media-cards__body { padding-right: 5%; }
.media-cards__item:nth-child(3) .media-cards__body { padding-right: 8%; }
.media-cards__title {
  margin: 0 0 16px;
  font-size: var(--fs-xl); font-weight: var(--fw-medium); line-height: 1;
  letter-spacing: normal; text-wrap: wrap; color: var(--brand);
}
.media-cards__text {
  margin: 0; font-size: var(--fs-section-body); font-weight: var(--fw-light);
  line-height: 1.6em; color: var(--ink-lede);
}

@media (max-width: 767px) {

  .steps-band__head { width: calc((100% - 40px) * .9); }
  ol.steps {
    display: flex; flex-direction: column; gap: 5px;
    width: calc((100% - 30px) * .9); padding: 15px 0;
  }
  .steps__item { display: flex; flex-direction: column; gap: 5px; min-height: 0; }
  .steps__item::before, .steps__node { display: none; }
  .steps__num {
    position: static; margin: 0;
    font-size: var(--fs-step-label-phone); font-weight: var(--fw-extra); line-height: 1.2;
  }
  .steps__title {
    font-size: var(--fs-step-title-phone); font-weight: var(--fw-black); line-height: var(--lh-tight);
  }
  .steps__arrow { display: block; height: 89px; padding-top: 20px; color: var(--brand); }
  .steps__and-desktop { display: none; }
  .steps__and-phone { display: inline; }

  .feature-band { min-height: var(--feature-band-min-h-phone); padding-inline: 2%; }
  .feature-band__inner { width: 90%; margin-inline: auto; padding: 56.16px 0 29.94px; gap: 70px; }
  .feature-row { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .icon-cell__label { font-size: var(--fs-base); line-height: var(--lh-list); }

  .media-cards { min-height: var(--media-cards-min-h-phone); padding: 0 5% 78px; }
  .media-cards__list { flex-direction: column; width: 90%; margin: -105.3px auto 0; gap: 30px; }
  .media-cards__item {
    width: 100%; border-radius: var(--radius-panel);
    background: var(--surface-alt); box-shadow: var(--shadow-media-card);
  }
  .media-cards__frame { padding: 10% 5%; }
  .media-cards__img { height: 200px; }
  .media-cards__body, .media-cards__item:nth-child(n) .media-cards__body { padding: 5% 0 0; }
}

/* ===== HOME:D:END ===== */

/* ===== HOME:E:BEGIN  (since, stats, testimonials: video frame, stat cards, quote cards) ===== */

/* --- since: rule, two-tone heading with a button beside it, then a video frame ------------------ */
.since {
  display: flex;
  flex-direction: column;
  gap: var(--gap-since);
  padding: var(--since-pad);
  background: var(--surface);
}
.since__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.875rem; }
.since__rule { flex: 1 1 100%; padding: 10px 0; }
.since__rule::before { content: ""; display: block; width: 105px; border-top: 1px solid var(--rule-heading); }

/* --- .video-frame: a rounded media frame (a video, or a still standing in for one) -------------- */
.video-frame {
  margin: 0;
  aspect-ratio: 1296 / 555.4;
  border-radius: var(--radius-panel);
  overflow: hidden;
  background: var(--media-backdrop);
}
.video-frame video,
.video-frame img { width: 100%; height: 100%; object-fit: cover; }

/* --- .stat-cards: a row of stat cards, one of them optionally highlighted -------------------------- */
.stat-band { padding: 50px 17px; }
.stat-cards {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--stat-cards-max);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}
.stat-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 20px;
  border-radius: var(--radius-panel);
  background: var(--surface-stat-card);
  color: var(--ink);
}
.stat-card p { margin: 0; }
.stat-card__label { font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: 1; color: var(--brand); }
.stat-card__value { font-size: var(--fs-4xl); font-weight: var(--fw-black); line-height: var(--lh-tight); letter-spacing: normal; }
.stat-card--highlight { background: var(--brand); color: var(--on-dark); }
.stat-card--highlight .stat-card__label { color: var(--on-dark); }

/* --- testimonials: photographic header, then a masonry of dark quote cards on black -------------- */
.testimonials-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: var(--testimonials-hero-h);
  background: url("/assets/img/2025/07/1584776548870.jpg") center / cover no-repeat var(--black);
}
.testimonials-hero::before {   /* the darkening overlay: clear at the top, solid black at the foot */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--scrim-photo-clear) 0%, var(--scrim-photo-solid) 100%);
}
.testimonials-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: var(--gap-since);
}
.testimonials-hero__title { flex: 1 1 0; }
.star-rating {
  flex: 1 1 0;
  align-self: center;
  margin: 0;
  display: flex;
  justify-content: flex-end;
  font-size: var(--fs-star-rating);
  line-height: 1;
  color: var(--brand);
}
.star-rating span + span { margin-left: .5rem; }
.star-rating { line-height: .94; }

.testimonials-body { position: relative; overflow: hidden; background: var(--black); padding: 50px 0 88px; }
.testimonials-body::after {    /* fades the last row of cards into the black */
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: var(--testimonials-fade-top);
  height: var(--testimonials-fade-h);
  pointer-events: none;
  background: linear-gradient(var(--scrim-photo-clear) 48%, var(--scrim-photo-solid) 90%);
}

/* --- .quote-cards: staggered columns of dark rounded quote cards ---------------------------------
   Markup is columns of cards (.quote-cards__col > .quote-card). On a phone the columns dissolve and the
   cards stack in --qc-order. --qc-gap (per card) is the extra drop below the card above it, in a column. */
.quote-cards {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.quote-cards__col { flex: 0 0 var(--quote-cards-col); display: flex; flex-direction: column; }
.quote-card {
  margin: var(--qc-gap, var(--gap)) 0 0;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-radius: var(--radius-quote-card);
  background: var(--surface-quote-card);
}
.quote-card:first-child { margin-top: 0; }
.quote-card__quote { margin: 0; font-size: var(--fs-base); line-height: var(--lh-body); color: var(--on-dark-quote); }
.quote-card__quote p { margin: 0 0 .9rem; }
.quote-card--tight .quote-card__quote p { margin-bottom: 0; }   /* the live card this mirrors has no space under its quote; drop the modifier to normalise */
.quote-card__by { max-width: 75%; display: flex; flex-direction: column; gap: 10px; }
.quote-card__by p { margin: 0; }
.quote-card__name { font-size: var(--fs-person); font-weight: var(--fw-semi); line-height: 1; color: var(--on-dark); }
.quote-card__role { font-size: var(--fs-role); font-weight: var(--fw-medium); line-height: 1; color: var(--brand); }

@media (max-width: 767px) {
  .since { padding: var(--since-pad-phone); }
  .since__head { flex-direction: column; align-items: flex-start; }

  .stat-band { padding: 20px; }
  .stat-cards { grid-template-columns: 1fr; }
  .stat-card__label { font-size: var(--fs-role); }
  .stat-card__value { font-size: var(--fs-xl-sm); }

  .testimonials-hero { min-height: var(--testimonials-hero-h-phone); }
  .testimonials-hero__inner { max-width: 90%; flex-direction: column; justify-content: flex-end; gap: var(--gap); }
  .star-rating { flex: none; align-self: stretch; font-size: var(--fs-star-rating-phone); }
  .testimonials-body::after { display: none; }
  .quote-cards { max-width: 90%; flex-direction: column; gap: var(--gap); }
  .quote-cards__col { display: contents; }
  .quote-card { margin: 0; order: var(--qc-order); }
  .quote-card__name { font-size: var(--fs-quote-card-name-phone); }
  .quote-card__role { font-size: var(--fs-quote-card-role-phone); }
}

/* ===== HOME:E:END ===== */

/* ===== FRAME:BEGIN  (services-family pages: page banner, intro text band, closing strip) ===== */

/* --- .page-hero: the banner that opens an inner page --------------------------------------------------------------
   Block + modifiers: .page-hero--film (the live page loops a film behind a wash; the film is not shipped, so a flat
   fallback tone shows) and .page-hero--image (a photograph behind the same wash, set with --hero-image).
   Every page opens with the banner inside a section wrapper (a data-section div), so the rules carry no wrapper
   prefix. The wrapper is the banner's whole range: on phones it also holds the 119.5px the header
   bar and its gap occupy on the live page, so the header floats over that band on these pages. */
.page-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  padding: calc(var(--page-hero-pad-top) - var(--hero-lift, var(--hero-lift-default))) 0 var(--page-hero-pad-bottom);
  color: var(--on-dark);
  background: none;
}
.page-hero::before,
.page-hero::after {
  content: "";
  position: absolute;
  inset: var(--hero-bg-top, calc(var(--hero-lift, var(--hero-lift-default)) * -1)) 0 0;   /* desktop: the live box starts above the page top, so the photo is sized and placed for the whole box */
  z-index: -1;
}
.page-hero::before { background: var(--fill-film-fallback); }
.page-hero--image::before { background: var(--hero-image) 50% 100% / cover no-repeat; }
.page-hero::after {
  background: linear-gradient(270deg, var(--scrim-page-hero-side) 0%, var(--scrim-page-hero-side-end) 67%);
  opacity: var(--scrim-page-hero-strength);
}
.page-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--page-hero-gap);
  flex: 0 0 auto;
  width: var(--page-hero-copy-w);
  padding: var(--page-hero-copy-pad);
}
.page-hero--image .page-hero__copy { width: var(--page-hero-copy-w-image); }
.page-hero .page-hero__title {
  margin: 0;
  max-width: none;
  font-size: var(--fs-page-hero-title);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: normal;
  text-transform: none;
  text-shadow: none;
  text-wrap: wrap;
  color: var(--on-dark);
}
.page-hero__text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--on-dark); }
.page-hero__text p { margin: 0 0 14.4px; }
.page-hero__copy .btn { align-self: flex-start; }

/* per-page offset the live banner hides under the page top (measured; the container starts this far above y=0) */
[data-section="s01-fulfilment-services-that"] > .page-hero { --hero-lift: var(--services-hero-lift); }
[data-section="s01-warehouse-management-sys"] > .page-hero { --hero-lift: var(--hero-lift-flush); }

@media (max-width: 1024px) {
  body:has(main > [data-section]:first-child > :is(.page-hero, .thanks-band, .footer-cta--page)) .site-header { position: absolute; top: 0; left: 0; right: 0; }   /* the thank-you and contact bands begin at the page top too */
  .page-hero {
    --hero-bg-top: var(--header-zone-phone);
    padding: calc(var(--header-zone-phone) + var(--page-hero-pad-top)) 0 var(--page-hero-pad-bottom);
    min-height: calc(var(--header-zone-phone) + var(--page-hero-min-h-phone));
  }
  .page-hero__copy,
  .page-hero--image .page-hero__copy { width: 100%; padding: var(--page-hero-copy-pad-phone); gap: var(--page-hero-gap-phone); }
}
@media (max-width: 767px) {
  .page-hero .page-hero__title { font-size: var(--fs-page-hero-title-phone); }
  .page-hero__text { font-size: var(--fs-page-hero-text-phone); }
  /* per-page phone measurements: the live inventory and order-picking banners carry no box padding on a phone, and the
     services title keeps 20px under it */
  [data-section="s01-warehouse-management-sys"] > .page-hero,
  [data-section="s01-warehouse-order-picking-"] > .page-hero { padding-block: var(--header-zone-phone) 0; }
  [data-section="s01-fulfilment-services-that"] > .page-hero .page-hero__title { margin-bottom: 20px; }
}

/* --- .icon-strip--band: the same strip as the home page, as a band between sections -------------------------------
   Modifiers: --grey (the shared grey band wash, defined with .text-band below) and --dark (the band's background), --sm (figures 20.8px on phones). Per-page spacing is set on the
   section wrapper in the tuning block below (--strip-band-pad-*, --strip-band-lift: how far the box rides up over the
   section above). */
.icon-strip--band {
  display: flow-root;
  padding: var(--strip-band-pad-top) var(--band-pad-side) var(--strip-band-pad-bottom);
}
.icon-strip--band .icon-strip__list { max-width: var(--container); margin-top: calc(var(--strip-band-lift, 0px) * -1); }
.icon-strip--dark { background: linear-gradient(var(--dark), var(--black)); }
[data-section="s09-1-in-10-000"] > .icon-strip { --strip-band-pad-top: 65px; }
[data-section="s06-1-in-10-000"] > .icon-strip { --strip-band-pad-bottom: 50px; }
@media (max-width: 1024px) {
  .icon-strip--band { padding: var(--strip-band-pad-top-phone) var(--gutter-phone) var(--strip-band-pad-bottom-phone); }
  .icon-strip--sm .icon-strip__value { min-height: 0; font-size: var(--fs-strip-value-sm-phone); }   /* one-line figures keep their own height */
  .icon-strip--sm .icon-strip__value--counter { font-size: var(--fs-lg-plus); }                       /* the counter stays 24px on the live page */
}
@media (max-width: 767px) {
  [data-section="s12-1-in-10-000"] > .icon-strip { --strip-band-pad-top-phone: 40px; --strip-band-pad-bottom-phone: 40px; }
  [data-section="s09-1-in-10-000"] > .icon-strip { --strip-band-lift: 15px; --strip-band-pad-bottom-phone: 40px; }
  [data-section="s06-1-in-10-000"] > .icon-strip { --strip-band-lift: 150px; --strip-band-pad-bottom-phone: 40px; }
}

/* --- .icon-strip--panel: the same four figures as a dark 2 x 2 panel with bare white icons, beside a card ----------
   .card-panel-row holds the card slot (.card-panel-row__card: the card is styled by the card family, not here) and
   the panel; the panel stretches to the card's height and spreads its two rows over it. */
.card-panel-row {
  display: flex;
  gap: var(--card-grid-gap);
  align-items: stretch;
  padding: var(--card-panel-pad);
  background: linear-gradient(var(--surface-alt) 0%, var(--surface) 100%);
}
.card-panel-row__card { flex: 0 0 calc((100% - var(--card-grid-gap)) * var(--card-panel-card-share)); }
.icon-strip--panel { display: flex; flex: 1 1 0; padding: 0; }
.icon-strip--panel .icon-strip__list {
  flex: 1 1 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: space-around;
  row-gap: 50px;
  max-width: none;
  margin: 0;
  padding: var(--card-roomy-pad);
  border-radius: var(--card-roomy-radius);
  background: var(--dark);
  box-shadow: none;
}
.icon-strip--panel .icon-strip__icon { background: none; }
.icon-strip--panel .icon-strip__icon img { width: var(--size-panel-icon); height: var(--size-panel-icon); margin: 0; }
.icon-strip--panel .icon-strip__item:first-child .icon-strip__icon img { width: var(--size-panel-icon-lead); height: var(--size-panel-icon-lead); }
.icon-strip--panel .icon-strip__value,
.icon-strip--panel .icon-strip__label { color: var(--on-dark); }
@media (max-width: 767px) {
  .card-panel-row { flex-direction: column; gap: var(--card-panel-gap-phone); padding: var(--card-panel-pad-phone); }
  .card-panel-row__card { flex: 0 0 auto; }
  .icon-strip--panel { flex: 0 0 auto; padding: 0; }
  .icon-strip--panel .icon-strip__list { gap: 30px 0; padding: calc(var(--card-roomy-pad-mobile) + 20px) var(--card-roomy-pad-mobile); }
  .icon-strip--panel .icon-strip__icon img { width: var(--size-panel-icon-phone); height: var(--size-panel-icon-phone); }
  .icon-strip--panel .icon-strip__item:first-child .icon-strip__icon img { width: var(--size-panel-icon-lead-phone); height: var(--size-panel-icon-lead-phone); }
  .icon-strip--panel .icon-strip__item:first-child .icon-strip__value { font-size: var(--fs-strip-lead-phone); }
  .icon-strip--panel .icon-strip__value { min-height: 0; font-size: var(--fs-strip-value-sm-phone); }
  .icon-strip--panel .icon-strip__value--counter { font-size: var(--fs-lg-plus); }
}

/* --- .text-band: an intro band, a centred heading (bold and light parts) over paragraphs ----------------------------
   Markup: section.text-band > .text-band__inner > [p.eyebrow.eyebrow--section] + h2.sec-title.sec-title--mid.text-band__title
   + .text-band__text > p. Modifiers: --grey (grey band), --fade (white-to-grey wash), --title-center (title and eyebrow stay centred on a
   phone, where the text is left-aligned), --arrow (keeps the empty arrow slot the live band has under its text).
   Spacing and column width are per-page measurements, set on the wrapper (--text-band-*). */
.text-band {
  display: flow-root;
  padding: var(--text-band-pad-top) var(--band-pad-side) var(--text-band-pad-bottom);
  background: var(--surface);
}
.text-band--fade { background: linear-gradient(var(--surface) 0%, var(--surface-alt) var(--text-band-fade-stop)); }
/* --grey: the grey band wash, one rule for every band family (a section of cards, a split, a text band, the icon strip band) */
.cards-band--grey,
.icon-strip--grey,
.split--grey,
.text-band--grey { background: var(--surface-alt); }
.text-band__inner {
  display: flex;
  flex-direction: column;
  gap: var(--text-band-gap);
  max-width: var(--container);
  margin-inline: auto;
  text-align: center;
}
.text-band__title { padding-inline: var(--band-title-inset); }
.text-band .eyebrow--section { text-align: center; }
.text-band__text {
  width: var(--text-band-copy-w);
  margin-inline: auto;
  padding-inline: var(--text-band-text-pad);
  font-size: var(--fs-section-body);
  font-weight: var(--fw-normal);
  line-height: calc(var(--lh-body) * 1em);
  color: var(--ink-lede);
}
.text-band__text p { margin: 0 0 14.4px; }
.text-band__text a { color: var(--ink); text-decoration: none; }   /* darker than the copy, same weight (the live link wraps its text in a regular-weight span) */
.text-band--arrow .text-band__inner::after { content: ""; display: block; height: var(--text-band-arrow-h); }
@media (max-width: 767px) {
  .text-band { padding: var(--text-band-pad-top-phone, var(--band-pad-y-phone)) var(--text-band-inline-phone, var(--gutter-phone)) var(--text-band-pad-bottom-phone, var(--band-pad-y-phone)); }
  .text-band__inner { text-align: left; }
  .text-band__title { padding-inline: 0 var(--text-band-title-pr-phone, 0px); }
  .text-band--title-center .text-band__title { text-align: center; }
  .text-band--title-center .eyebrow--section { text-align: center; }
  .text-band__text { width: 100%; padding-inline: 0; }
  .text-band--arrow .text-band__inner::after { height: var(--text-band-arrow-h-phone); }
}
[data-section="s02-our-services"] > .text-band { --text-band-pad-top: 100px; --text-band-pad-bottom: 0px; --text-band-pad-top-phone: 100px; --text-band-pad-bottom-phone: 0px; --text-band-inline-phone: 37.5px; --text-band-copy-w: 78%; }
[data-section="s02-a-proven-order-fulfilmen"] > .text-band { --text-band-pad-top: 130px; --text-band-pad-bottom: 130px; --text-band-copy-w: 100%; }
[data-section="s02-why-receiving-and-storag"] > .text-band { --text-band-inline-phone: 28.5px; --text-band-copy-w: 100%; }
[data-section="s02-how-our-automated-order-"] > .text-band { --text-band-title-pr-phone: 29px; }
[data-section="s02-your-products-packed-rig"] > .text-band { --text-band-pad-top: 110px; --text-band-pad-bottom: 100px; --text-band-title-pr-phone: 50px; }
[data-section="s02-3pl-shipping-methods-opt"] > .text-band { --text-band-title-pr-phone: 25px; }

/* ===== FRAME:END ===== */

/* ===== SVC:S1:BEGIN  (services overview and process overview: service link card, detailed steps, copy beside a card stack) ===== */

/* --- service link card: .card-outline--link (title, copy, "View More" button) ------------------------------------
   The outlined card of the home page with a button under the copy. It lives in .cards-outline--links (a modifier of the
   card grid for rows of link cards: services s03 and s04) or alone in .card-panel-row__card (s05, the tight variant).
   The title always keeps --card-title-lines lines of height so the copy starts level across a row; the card stretches
   to the row and the button sits on the bottom edge. Markup:
   article.card-outline.card-outline--link > .card-outline__body > (h3.card-outline__title + .card-outline__text) + a.btn */
.cards-outline--links {
  --card-title: var(--card-title-band);
  --card-gap: var(--card-link-gap);
  --card-body-gap: var(--card-link-body-gap);
  --card-title-lines: 2;
}
.cards-outline--grid.cards-outline--links { padding-block: var(--card-link-row-pad); }
.cards-outline--links-tight { --card-body-gap: var(--card-link-body-gap-tight); }   /* heading straight over the copy: Cross-Border */
.card-outline__body { display: flex; flex-direction: column; gap: var(--card-body-gap); }
.card-outline--link .card-outline__title {
  min-height: calc(var(--card-title-lines, 2) * var(--card-title) * var(--card-title-lh));
  width: var(--card-title-w, 100%);
}
[data-section="s03-fulfilment-process"] .card-outline--link .card-outline__title { min-height: 0; }   /* live: the services process titles are as tall as their wrap (one line at 1920) */
.card-outline--link .card-outline__title--lines-2 { --card-title-lines: 2; --card-title-w: 60%; min-height: calc(var(--card-title-lines) * var(--card-title) * var(--card-title-lh)); }   /* a one-word title the live page holds in a narrow, two-line box */
.card-outline--link > .btn { align-self: flex-start; }
.card-outline--link .card-outline__text { line-height: calc(var(--lh-body) * 1em); }   /* em, not unitless: lays out the live 28.16px exactly (see .split__text) */
/* live detail: the copy's last paragraph keeps its 14.4px bottom margin in the second and third card of a row, not in the first or a lone card */
.card-outline--link .card-outline__text > p { margin-bottom: 0; }
.card-outline--link + .card-outline--link .card-outline__text > p { margin-bottom: var(--card-text-gap); }
/* the single card beside the figures panel: the slot is the card family's container, and the card fills it */
.card-panel-row__card.cards-outline { display: flex; }
.card-panel-row__card > .card-outline { flex: 1 1 auto; }
/* services: s03 starts the grey band (72px above), s04 follows on the same band */
[data-section="s03-fulfilment-process"] .cards-outline--links { padding-top: 5%; --card-title-w: 80%; }
[data-section="s04-order-picking"] .cards-outline--links { --card-gap: 3.125rem; }
[data-section="s04-order-picking"] .card-outline:nth-child(-n+2) { --card-title-w: 50%; }
@media (max-width: 767px) {
  .cards-outline--links { --card-pad: var(--card-roomy-pad-mobile); --card-title: var(--card-roomy-title-mobile); --card-title-lines: 1; --card-gap: 1.875rem; --card-title-w: 100%; }
  .card-outline--link .card-outline__title { min-height: calc(var(--card-title-lines, 2) * var(--card-title) * var(--card-title-lh)); }   /* phones keep the title's lines so the copy starts level */
  [data-section] .cards-outline--links { --card-gap: 1.875rem; }
  [data-section] .cards-outline--links .card-outline { --card-title-w: 100%; }
  .card-outline--link .card-outline__title--fit { --card-title: var(--card-title-band-phone-sm); }   /* "Inventory Management" is set a point smaller on a phone, as live */
  .cards-outline--links-tight { --card-body-gap: 1.875rem; }
  .cards-outline--grid.cards-outline--links { padding-block: 0 var(--cards-band-pad-bottom-phone); }   /* live: 5% under the cards (19.5px at 390, 21.5px at 430) */
  [data-section="s03-fulfilment-process"] .cards-outline--links { padding-top: var(--cards-band-pad-top-phone); }
}

/* --- .steps--detailed: the process overview's timeline (six steps; each title carries a paragraph) -----------------
   The home page's .steps timeline with a text block under every title. Desktop: label | rule and dot | title + copy
   (title 43px, copy 16.8px). Phone: label, title, copy, arrow, as on the home page. The live page words the copy
   differently by viewport (long on desktop, short on a phone), and the two texts cannot be derived from one another, so each
   step holds both as .steps__text--wide and .steps__text--narrow and CSS shows one (display:none leaves the other out of the
   accessibility tree too). Markup of an item: .steps__num + .steps__node + .steps__body(.steps__title + the two
   .steps__text) + .steps__arrow. */
.steps--detailed .steps__item { grid-template-columns: var(--steps-detailed-cols); }
.steps__body { grid-column: 3; align-self: start; display: flex; flex-direction: column; gap: 5px; }
.steps--detailed .steps__title { font-size: var(--fs-step-detailed); }
.steps__text {
  font-size: var(--fs-step-text); font-weight: var(--fw-normal); line-height: calc(var(--lh-body) * 1em);
  color: var(--on-dark);
}
.steps__text p { margin: 0 0 14.4px; }
.steps__text--narrow { display: none; }
/* --- page-level heading and button bands that sit with the timeline (the dark bands above and below it) -------- */
.steps-band__head--page { padding-top: var(--steps-head-pad-top); }
.steps-band__head--page .sec-title { padding-inline: var(--band-title-inset); }
@media (max-width: 767px) {
  .steps__body { display: contents; }
  .steps--detailed .steps__title { font-size: var(--fs-step-title-phone); }
  .steps__text--wide { display: none; }
  .steps__text--narrow { display: block; }
  .steps-band__head--page { width: 90%; padding-block: var(--band-pad-y-phone); }
  .steps-band__head--page .sec-title { padding-inline: 0; }
  .steps-band__cta--page { padding-bottom: var(--steps-cta-pad-bottom-phone); }
}

/* --- .split--cards / .cards-outline--stack: copy beside a stack of outlined cards (packing: Personalised & Bespoke Packaging) -------
   The split band with the card family where the picture would be (on .split--grey where the live band is grey). .split--cards sets
   the columns (49% | 50% of the 1280px content width), the band's side padding, a 20px copy gap and the lede at 78%
   of its column. The cards are .cards-outline--stack: one column, 20px apart; .card-outline--solid is the pink-filled card with
   white copy. Markup: section.split.split--band.split--grey.split--cards > .split__copy + .cards-outline.cards-outline--stack */
.split--cards {
  --split-cols: 49% 50%;
  --split-pad: 100px var(--band-pad-inline);
  --split-min-h: 0px;
  --split-copy-gap: var(--gap);
  column-gap: 0;
}
.split--cards > .split__copy { padding-right: 0; }
.split--cards .split__text { width: 78%; }
.cards-outline--stack {
  --card-pad: var(--card-stack-pad);
  --card-title: var(--card-title-band);
  display: flex; flex-direction: column; gap: var(--gap);
}
.cards-outline--stack .card-outline__text { line-height: calc(var(--lh-body) * 1em); }
.card-outline--solid { --card-bg: var(--brand); --card-copy: var(--on-dark); }
.card-outline--solid .card-outline__title { color: var(--on-dark); }
@media (max-width: 1024px) {
  .split--cards { row-gap: 0; padding-inline: 5%; }
}
@media (max-width: 767px) {
  .split--cards { --split-pad: var(--band-pad-y-phone) 5%; }
  .split--cards > .split__copy .btn { margin-bottom: 40px; }
  .cards-outline--stack { --card-pad: var(--card-roomy-pad-mobile); --card-title: var(--card-roomy-title-mobile); --card-gap: 1.875rem; }
}
/* packing s04, FSC-Certified: a page split (.split--flush.split--page.split--media-start) with a small logo picture, copy first once stacked */
[data-section="s04-fsc-certified-packaging-"] > .split.split--media-start {
  --page-pad-top: 8.8%;
  --page-pad-bottom: 7.04%;
  --split-cols: 573.4fr 663.8fr;       /* the live column widths as fr shares */
  --split-img-w: 361.3px;
  --split-img-margin: auto;            /* the logo is centred in its cell (a page picture hugs the start) */
  --split-media-order-stacked: 0;      /* and the copy stays first once stacked (a page picture goes first) */
}
@media (max-width: 767px) {
  [data-section="s04-fsc-certified-packaging-"] > .split.split--media-start { --split-img-w: 63%; --page-row-gap-phone: 20px; }
}
/* ===== SVC:S1:END ===== */

/* ===== SVC:S3:BEGIN  (inventory-management and shipping pages: measured per-section values of the page splits) ===== */

/* measured per section (page coordinates in reference/<page>/<section>-<viewport>.md; paddings are the live container's
   percentages of its 1267.2px content box, here as percentages of the 1440px band: x 0.88) */
[data-section="s05-efficient-e-commerce-ful"] > .split { --page-pad-top: 10.56%; --page-pad-bottom: 5.28%; --page-row-gap-phone: 50px; --split-img-ar: 627.5 / 501.9; --split-img-ar-phone: 351 / 280.6; }
[data-section="s06-immediate-insight-into-y"] > .split { --page-pad-top: 4.4%; --page-pad-bottom: 10.56%; --page-pad-top-phone: 0%; --split-img-w: 90%; --page-row-gap-phone: 50px; --split-img-ar: 516.1 / 369.1; --split-img-ar-phone: 315.9 / 225.9; }
[data-section="s07-tailor-made-inventory-ma"] > .split { --page-pad-top: 0%; --page-pad-bottom: 5.28%; --page-pad-top-phone: 0%; --page-row-gap-phone: 50px; --split-img-ar: 627.5 / 448.4; --split-img-ar-phone: 351 / 251; }
[data-section="s03-sharp-cut-off-times-for-"] > .split { --page-pad-top: calc(7.92% + 0.09px);   /* + 0.09px: lands the sections below on their live fractional positions, as in the inventory page */
   --page-pad-bottom: 7.92%; --page-pad-bottom-phone: calc(15% - 0.1px); --page-row-gap-phone: 20px; --split-img-ar: 627.5 / 448; --split-img-ar-phone: 351 / 251; }
[data-section="s04-pick-up-points-for-maxim"] > .split { --page-pad-top: 7.92%; --page-pad-bottom: 7.92%; --split-img-w: 90%; --split-img-h: 500px; --page-row-gap-phone: 50px; }
[data-section="s05-time-slot-delivery-for-p"] > .split { --page-pad-top: 1.76%; --page-pad-bottom: 6.16%; --page-pad-top-phone: 0%; --page-row-gap-phone: 30px; --split-img-ar: 627.5 / 470.6; --split-img-ar-phone: 351 / 263; }
[data-section="s06-fulfilment-with-advanced"] > .split { --page-pad-top: 4.4%; --page-pad-bottom: 7.92%; --split-img-w: 90%; --split-img-h: 700px; --page-row-gap-phone: 50px; }
@media (max-width: 767px) {
  [data-section] > .split--page { --split-img-ar: var(--split-img-ar-phone, auto); }
  [data-section="s04-pick-up-points-for-maxim"] > .split,
  [data-section="s06-fulfilment-with-advanced"] > .split { --split-img-w: 100%; }
}
/* 110.17px: the live band starts 0.17px lower than the two sections above it add up to here; the extra lets every section below land on its live fractional position (text rows snap to whole pixels, so this decides which rows match) */
[data-section="s03-why-outsource-your-inven"] > .text-band { --text-band-pad-top: 110.17px; --text-band-pad-bottom: 0px; }

/* ===== SVC:S3:END ===== */

/* ===== SVC:S2:BEGIN  (receiving and storage page, s03 to s11: lede details and measured per-section values) ===== */

/* --- lede details: labels in regular weight (live shows them so), a bullet list, one blank line ------ */
.split__text--labelled > p > strong { font-weight: var(--fw-normal); }
ul.split__list { margin: 0; padding: 0 0 0 var(--split-list-indent); list-style: disc; }
.split__list li { padding: 0; }
.split__skip { padding-top: calc(1.6em + var(--space-para)); }   /* the empty paragraph (a line and its margin) the live lede carries */

/* The banner and intro above this page's first owned section end 0.18px short of the live page at 1440, which
   moves every line of text below by a fraction of a pixel; this puts the band back on the live y. */
@media (min-width: 1025px) {
  [data-section="s03-goods-in-sla-backed-rece"] { margin-top: 0.18px; }
  [data-section="s03-goods-in-sla-backed-rece"] > .split { --split-pad: var(--split-twin-pad-y) var(--band-pad-inline) 99.91px; }
}

/* --- measured values, one block per section (page coordinates in reference/<page>/) ----------------- */
[data-section="s03-goods-in-sla-backed-rece"] > .split { --twin-title-w: 86%; --twin-photo-w: 85%; --twin-photo-ar: 544 / 388.5; }
[data-section="s04-scalable-warehouse-stora"] > .split {
  --split-pad: 10.56% max(6%, calc((100% - var(--band-inner-w)) / 2));
  --split-cols: 534.6fr 702.7fr;
  --split-img-w: 534px;
  --split-img-ar: 534 / 381;
}
[data-section="s06-geek-roboshuttle-system-"] > .split {
  --split-pad: 8.8% max(6%, calc((100% - var(--band-inner-w)) / 2)) 6.16%;
  --split-media-w: 605.1fr;
  --split-copy-w: 632.1fr;
  --split-img-w: 508.3px;
  --split-img-ar: 508.3 / 561.3;
}
/* the copy keeps 5% of the band clear on its inner edge while side by side (the stacked layout, 1024px and under, has none) */
@media (min-width: 1025px) {
  [data-section="s06-geek-roboshuttle-system-"] > .split { --split-copy-end: 5cqw; }
}
[data-section="s07-real-time-stock-visibili"] > .split { --twin-gap: 60px; --split-pad: var(--split-twin-pad-y) var(--band-pad-inline) 150px; }
[data-section="s08-our-warehousing-and-stor"] > .text-band { --text-band-pad-bottom: 0px; --text-band-pad-top-phone: 40px; --text-band-pad-bottom-phone: 0px; --text-band-inline-phone: 19.5px; }
[data-section="s09-clean-secure-climate-app"] .cards-outline { --cards-cols: 419.4fr 841.6fr; }
[data-section="s10-cross-docking-services-f"] .cards-outline { --cards-cols: 466fr 299.3fr 460.6fr; }
[data-section="s11-section"] > .text-band {
  --text-band-pad-top: 30px;
  --text-band-pad-bottom: 70px;
  --text-band-pad-top-phone: 30px;
  --text-band-pad-bottom-phone: 70px;
  --text-band-inline-phone: 19.5px;
  --text-band-copy-w: 100%;
}

@media (max-width: 767px) {
  [data-section="s09-clean-secure-climate-app"] .cards-outline { padding-block: var(--receiving-cards-pad-phone); }
  [data-section="s10-cross-docking-services-f"] .cards-outline { padding-bottom: calc(var(--gutter-phone) + 0.17px); }
  [data-section="s03-goods-in-sla-backed-rece"] > .split { --twin-photo-w: 100%; --twin-photo-ar: 351 / 251; }
  [data-section="s04-scalable-warehouse-stora"] > .split { --split-pad: 15% 5%; --split-img-w: 100%; --split-img-ar: 351 / 251; }
  [data-section="s06-geek-roboshuttle-system-"] > .split { --split-pad: 0 5% calc(15% + 0.22px); --split-img-w: 84%; }   /* live (receiving, widget b9fc027): the picture is 84% of its cell on a phone, not 294.8px (the 390 capture's 84% of 351) */
  [data-section="s07-real-time-stock-visibili"] > .split { --split-pad: var(--band-pad-y-phone) 5%; }
}
/* Sub-pixel placement: see docs/patterns.md, "Sub-pixel tuning". */

/* ===== SVC:S2:END ===== */

/* ===== SVC:S4:BEGIN  (order picking page, s03 to s08: measured per-section values) ===== */

/* ---- section tuning: measured values (desktop 1440 / phone 390) ----------------------------------------- */
[data-section="s03-the-technology-behind-e-"] > .split {
  --split-pad: calc(5% + var(--band-row-push)) 0 5%;   /* live: 5% of the page width above and below, the row pushed down 50px */
  --split-cols: 43% minmax(0, 1fr);
  --split-copy-pad: var(--split-copy-pad-share);
  --split-media-margin: 0;
}
[data-section="s06-the-pro-fs-difference-in"] > .split {
  --split-pad: 10.56% max(6%, calc((100% - var(--band-inner-w)) / 2));
  --split-cols: 41.18% minmax(0, 1fr);
  --split-img-w: 85%;
  --split-img-h: 600px;
  --split-img-pos: 100% 50%;
}
[data-section="s07-why-order-picking-accura"] > .split {
  --split-pad: 0 max(6%, calc((100% - var(--band-inner-w)) / 2)) 6.16%;
  --split-media-w: 47.75%;
  --split-copy-w: minmax(0, 1fr);
  --split-copy-end: 5cqw;
  --split-img-w: 90%;
  --split-img-h: 600px;
}
[data-section="s08-experience-e-commerce-or"] > .split { --twin-title-w: 90%; --twin-photo-w: 85%; --twin-photo-h: 280px; --twin-photo-fit: cover; }

[data-section="s04-why-robotics-outperforms"] > .text-band { --text-band-copy-w: 100%; }
[data-section="s05-order-picking-services-d"] .cards-outline--flow { padding-block: 5%; }

@media (max-width: 1024px) {
  [data-section="s03-the-technology-behind-e-"] > .split { --split-media-min-h: 238px; }
}
@media (max-width: 767px) {
  [data-section="s05-order-picking-services-d"] .cards-outline--flow { padding-block: var(--cards-band-pad-phone); }
  [data-section="s03-the-technology-behind-e-"] > .split {
    --split-pad: var(--split-pad-media-first-phone);
    --split-copy-pad: var(--gutter-phone) var(--gutter-phone) 0;
    --split-copy-gap: 10px;
  }
  [data-section="s04-why-robotics-outperforms"] > .text-band { --text-band-inline-phone: 28.5px; }
  [data-section="s06-the-pro-fs-difference-in"] > .split { --split-pad: 15% 5%; --split-img-w: 100%; }
  [data-section="s07-why-order-picking-accura"] > .split { --split-pad: 0 5% 15%; --split-copy-end: 0px; }
  [data-section="s08-experience-e-commerce-or"] > .split { --twin-photo-w: 100%; }
}

/* ===== SVC:S4:END ===== */

/* ===== SVC:SHARED:BEGIN  (modifiers the services-family pages share: frameless and page-width splits, title-and-body bands, card grids) ===== */

/* --- .split--flush: copy beside a picture, no frame, no minimum height -------------------------------
   The picture's cell has no padding and the copy keeps no gutter on its inner edge (--split-copy-end puts a measured one
   back); the image is a fixed display width (--split-img-w) at an exact ratio (--split-img-ar), centred, or at the cell's
   start edge in .split__media--start. */
.split--flush { --split-min-h: 0; }
.split--flush > .split__copy { padding-right: var(--split-copy-end, 0px); }
.split--flush > .split__media { padding: 0; }
.split--flush .split__media img { aspect-ratio: var(--split-img-ar, auto); }
.split--band .split__media--start img { margin-inline: 0; }

/* --- .split--page: a frameless split at page width (the process-page bands) -------------------------------------
   .split--flush plus the page's own geometry: the band is the full page width, the content a 1275px-max box (6% each
   side), copy | picture with a 30px gap, 5% of the content width kept clear on the copy's inner edge. The picture is
   .img-photo--soft (10px corners), not the home page's 50px.
   Markup: section.split.split--band.split--flush.split--page[.split--media-start][.split--grey]
             > .split__copy (h2.sec-title.sec-title--mid, .split__text.split__text--body, optional a.btn.btn--solid)
             + .split__media[.split__media--cover] > img.img-photo.img-photo--soft
   --media-start puts the picture on the left on desktop; on tablet and phone the picture comes FIRST (the live
   containers reverse), so the source order stays copy, picture.
   Knobs on the wrapper `[data-section] > .split`: --page-pad-top / --page-pad-bottom (percent of the band width), and
   for a stacked band --page-pad-top-phone / --page-pad-bottom-phone / --page-row-gap-phone, plus the shared
   --split-img-w (90% where the live picture is narrower than its column), --split-img-h (cover-fitted pictures),
   --split-img-ar, --split-img-margin (where the picture sits in its cell: the start edge by default) and
   --split-media-order-stacked (-1: the picture goes first once stacked; 0 keeps the copy first). */
.split--page {
  --split-cols: minmax(0, 1fr) var(--split-page-media-w);
  --split-pad: var(--page-pad-top, 0) max(6%, calc((100% - var(--band-inner-w)) / 2)) var(--page-pad-bottom, 0);
  --split-copy-end: var(--split-page-copy-pr);
}
.split--page.split--media-start { --split-cols: var(--split-page-media-w-start) minmax(0, 1fr); }
.split--page .split__media img { margin-inline: var(--split-img-margin, 0 auto); }
@media (max-width: 1024px) {
  .split--page { --split-copy-end: 0px; row-gap: var(--page-row-gap-phone, var(--gap-split-stack)); }
  .split--page > .split__media,
  .split--page.split--media-start > .split__media { order: var(--split-media-order-stacked, -1); }
  .split--page .split__media img { margin-inline: auto; }
}
@media (max-width: 767px) {
  .split--page { --split-pad: var(--page-pad-top-phone, 15%) 5% var(--page-pad-bottom-phone, 15%); }
}

/* --- .split--twin: a title cell beside a body cell (no picture column) -----------------------------
   Both cells are .split__copy. The head cell (.split__copy--head) holds the title, 10px under it, then
   optionally the short rule (.accent-bar) and a photo (.split__photo); the other cell is the lede and a list, starting at the
   top or centred in the row (.split__copy--center). Knobs: --twin-gap (between cells), --twin-title-w,
   --twin-photo-w, --twin-photo-ar (the displayed proportions) or --twin-photo-h (a fixed height), --twin-photo-fit (fill by default;
   cover where the box is cropped). */
.split--twin {
  --split-pad: var(--split-twin-pad-y) var(--band-pad-inline);
  --split-min-h: 0;
  --split-cols: repeat(2, minmax(0, 1fr));
  --split-copy-gap: var(--gap);
  column-gap: var(--twin-gap, 0);
  row-gap: 0;
  align-items: stretch;
}
.split--twin > .split__copy { align-items: stretch; justify-content: flex-start; padding-right: 0; }
.split--twin > .split__copy--center { justify-content: center; }
.split__copy--head { --split-copy-gap: 0; }
.split__copy--head > .sec-title { max-width: var(--twin-title-w, 100%); padding-bottom: 10px; }
.split__photo {
  display: block;
  width: var(--twin-photo-w, 100%);
  height: var(--twin-photo-h, auto);
  aspect-ratio: var(--twin-photo-ar, auto);
  object-fit: var(--twin-photo-fit, fill);
}
@media (max-width: 767px) {
  .split--twin { --split-pad: var(--band-pad-y-phone) 5%; }
}

/* --- card grids: the services band's outlined cards in other columns --------------------------------------------
   All of these are the card grid of the home page (.cards-outline--grid: its columns, gap and padding are the knobs
   --cards-cols, --cards-gap, --cards-pad and their tablet and phone partners) with a different card look.
   .cards-outline--4up    four columns, 35px title; two columns at 1024px and below.
   .cards-outline--icons  columns set per section (--cards-cols, the live widths as fr shares), an icon (.card-outline__icon)
                          over a 30px / 1.1 title (20px on a phone); one column at 1024px and below; --continued drops the
                          top padding so a second row sits under the first on the same band.
   .cards-outline--flow   the copy follows its title straight on instead of sitting at the card's foot; 35px title. */
.cards-outline--4up {
  --cards-cols: repeat(4, minmax(0, 1fr));
  --cards-gap: var(--card-grid-gap);
  --cards-pad: var(--card-4up-pad);
  --cards-pad-phone: var(--card-4up-pad-phone);
  --card-title: var(--card-title-band);
}
.cards-outline--icons {
  --card-title: var(--card-icons-title);
  --card-title-lh: 1.1;
  --cards-gap: var(--card-grid-gap);          /* per row: the live widths as fr shares, e.g. 419.4fr 841.6fr, are --cards-cols */
  --cards-pad: var(--cards-icons-pad);
  --cards-pad-phone: var(--cards-icons-pad-phone);
  --cards-cols-tablet: minmax(0, 1fr);        /* the cards stack, as the split bands do */
}
.cards-outline--icons > .card-outline { min-width: 0; }
.cards-outline--icons.cards-outline--continued { padding-top: 0; }             /* a second row under another, on the same band */
.card-outline__icon {
  display: block;
  flex: none;
  width: var(--size-card-icon);
  height: var(--size-card-icon);
  margin-bottom: var(--card-icon-lead);
  color: var(--brand);
}
.cards-outline--flow { --card-title: var(--card-title-band); }
.cards-outline--flow > .card-outline { justify-content: flex-start; }
.cards-outline--flow .card-outline__title { max-width: var(--card-flow-title-w); }
.cards-outline--flow .card-outline__text { line-height: calc(var(--lh-body) * 1em); }   /* em, not unitless, as the link cards: lays out the live line box exactly */
.cards-outline--flow .card-outline__text > p:only-child { margin-bottom: 0; }   /* a lone paragraph carries no trailing margin; a pair keeps the second's */
@media (max-width: 1024px) {
  .cards-outline--4up,
  .cards-outline--flow { --card-title: var(--card-roomy-title-mobile); }
}
@media (max-width: 767px) {
  .cards-outline--icons { --card-title: var(--card-icons-title-phone); }
  .card-outline__icon { margin-bottom: var(--card-icon-lead-phone); }
  .cards-outline--flow { --card-gap: 3.125rem; }   /* 19.5px under the last card, as live; 50px title to copy */
  .cards-outline--flow .card-outline__title { max-width: none; }
  [data-section="s05-order-picking-services-d"] .cards-outline--flow > .card-outline:nth-child(3) { --card-title: var(--card-title-band-phone-sm); }   /* order picking only (scoped to this section; was a shared rule) */
}

/* ===== SVC:SHARED:END ===== */

/* ===== FILM:BEGIN  (looping background films and the framed brand film: one object, four places) ===== */

/* --- .film: a <video> that fills the box it sits in, cropped to cover (never stretched) --------------------------
   Modifier .film--backdrop: the film lies behind its section's wash, starting where the section's own backdrop starts
   (--film-top, set by the section; 0 where the backdrop is the whole box). Used by: the page banner (.page-hero--film),
   the testimonials header; without the modifier by the home hero's media box and the .video-frame. */
.film { display: block; width: 100%; height: 100%; object-fit: cover; }
.film--backdrop {
  position: absolute;
  top: var(--film-top, 0px);
  left: 0;
  height: calc(100% - var(--film-top, 0px));
  z-index: -1;
}
.page-hero { --film-top: var(--hero-bg-top, calc(var(--hero-lift, var(--hero-lift-default)) * -1)); }
.testimonials-hero { isolation: isolate; }

/* ===== FILM:END ===== */
/* ===== ART:BEGIN  (article family, 45 pages: banner, body typography, Related Posts band, closing figures strip) ===== */

/* The 45 article pages share ONE layout, stamped from templates/article.html (build:articles, check:articles). Every
   value below was read from the live DOM of four articles at 1440 and 390 wide on 10 Oct 2026
   (reference/article/README.md); nothing is estimated from a picture.

   --- banner: the FRAME .page-hero--image with the article's own geometry ---------------------------------------------
   The photograph is a real <img class="page-hero__img"> (the page's hero slot) instead of the --hero-image background,
   placed exactly where the FRAME ::before sits; the FRAME ::after wash stays. The live box starts 74.1px above the page
   top on desktop; the title column is the full width, 450px tall, and the h1 an 80%-wide widget at weight 700. */
[data-section="s01-title"] > .page-hero--article { --hero-lift: var(--article-hero-lift); }
.page-hero--article::before { content: none; }
.page-hero--article .page-hero__img {
  position: absolute;
  z-index: -1;
  left: 0;
  width: 100%;
  top: var(--hero-bg-top, calc(var(--hero-lift) * -1));
  height: calc(100% - var(--hero-bg-top, calc(var(--hero-lift) * -1)));
  object-fit: cover;
  object-position: 50% 0;
}
.page-hero--article .page-hero__copy { width: 100%; min-height: var(--article-hero-copy-min-h); padding: var(--article-hero-copy-pad); }
.page-hero--article .page-hero__title { max-width: var(--article-hero-title-w); font-weight: var(--fw-bold); }
@media (max-width: 1024px) {
  .page-hero--article .page-hero__copy { min-height: 0; padding: var(--page-hero-copy-pad-phone); }
}
@media (max-width: 767px) {
  .page-hero--article .page-hero__title { max-width: none; margin-bottom: var(--article-hero-title-mb-phone); }
}

/* --- .article: the prose band -----------------------------------------------------------------------------------------
   section.article (80px above, 40px below, 45px sides) > .article__inner (1350px, a block formatting context so the first
   heading's 40px top margin stays inside it, as the live widget keeps it). The post body runs at 18px on the 17.6px
   base line (28.16px; 23.04px on a phone), black; headings are brand-coloured 31px / 25px on a 40px line with 40px
   above and 20px below; links are ink, 17.6px, semi-bold, on their own 1em line; lists indent 40px; a quote is inset
   40px with 18px above and below; a picture fills the column with 8px corners and 18px under it; a table is 16.2px
   with 8.1px cells, 1px black rules and a grey wash on the header row and every other row. */
.article { padding: var(--article-pad-top) var(--article-pad-side) var(--article-pad-bottom); background: var(--surface); }
.article__inner {
  display: flow-root;
  max-width: var(--article-inner-w);
  margin-inline: auto;
  font-size: var(--fs-article-body);
  line-height: var(--lh-article-body);
  color: var(--ink-strong);
}
.article__inner p { margin: 0 0 var(--article-p-gap); }
.article__inner h2,
.article__inner h3,
.article__inner h4 {
  margin: var(--article-heading-mt) 0 var(--article-heading-mb);
  font-weight: var(--fw-semi);
  line-height: var(--lh-article-heading);
  letter-spacing: normal;
  text-wrap: wrap;
  color: var(--brand);
}
.article__inner h2 { font-size: var(--fs-article-h2); }
.article__inner h3 { font-size: var(--fs-article-h3); }
.article__inner .article__h3 { font-size: var(--fs-article-h3); }   /* a heading promoted to h2 for document order that keeps the live h3 look (the h2 and h3 rules differ only in size) */
.article__inner h4 { font-size: var(--fs-md); }   /* no live article with an h4 was measured; the base size */
.article__inner strong,
.article__inner b { font-weight: var(--fw-bold); }
.article__inner a { color: var(--ink); font-size: var(--fs-article-link); font-weight: var(--fw-semi); line-height: 1; }
.article__inner a:hover { color: var(--brand); }
.article__inner ul,
.article__inner ol { margin: 0; padding: 0 0 0 var(--article-list-indent); list-style: disc; }
.article__inner ol { list-style: decimal; }
.article__inner li { margin: 0; }
.article__inner blockquote { margin: var(--article-quote-margin); padding: 0; border: 0; font-size: inherit; color: inherit; }
.article__inner blockquote > :first-child { margin-top: 0; }
.article__inner blockquote > :last-child { margin-bottom: 0; }
/* a heading inside a quote is set at the live h3 size even where the markup says h2 (kept at h2 for heading order, check:a11y) */
.article__inner blockquote > h2 { font-size: var(--fs-article-h3); }
.article__inner figure { margin: 0 0 var(--article-figure-mb); }
/* a picture in the prose is a fixed 550px-tall cover box at every width (the live "large" image block, measured on
   complex-sku at 1440 and 390); .article__fig--natural keeps the file's own proportions (the live "full" image block,
   measured on shipping-is-boring) */
.article__inner figure img { display: block; width: 100%; height: var(--article-figure-h); object-fit: cover; border-radius: var(--radius-article-img); }
.article__inner .article__fig--natural img { height: auto; }
/* columns inside the prose (the live WordPress columns block, measured on pro-fs-upscale at 1440 and 390): equal
   columns 24px apart with 31.5px under the row; a picture in a column is a 300px cover box with no margin; paragraphs
   in a column sit 24px apart. The columns stack at the live 781px breakpoint, 24px apart. */
.article__columns { display: flex; gap: var(--article-columns-gap); margin: 0 0 var(--article-columns-mb); }
.article__column { flex: 1 1 0; min-width: 0; }
.article__columns figure { margin: 0; }
.article__inner .article__columns figure img { height: var(--article-column-fig-h); }   /* every picture in a column, whichever block it was */
.article__columns p { margin: 0; }
.article__columns p + p { margin-top: var(--article-column-p-gap); }
@media (max-width: 781px) { .article__columns { flex-direction: column; } }
.article__spacer { height: var(--article-spacer-h); }   /* the live spacer block (20px on every measured use) */
.article__table { overflow: auto; }
.article__inner table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 0 0 var(--article-table-mb);
  font-size: var(--fs-article-table);
  line-height: var(--lh-article-table);
}
.article__inner th,
.article__inner td { padding: var(--article-cell-pad); border: 1px solid var(--line-table); text-align: left; vertical-align: top; word-break: break-word; }   /* the live fixed-layout table breaks long words, as WordPress does */
.article__inner th { font-weight: var(--fw-bold); }
.article__inner thead th,
.article__inner tbody tr:nth-child(even) > td { background: var(--surface-table-stripe); }
@media (max-width: 767px) {
  .article { padding: var(--article-pad-top-phone) var(--article-pad-side-phone) var(--article-pad-bottom); }
  .article__inner { line-height: var(--lh-article-body-phone); }
  .article__inner a { font-size: var(--fs-article-link-phone); }
}

/* --- .post-band / .post-grid / .post-card: the Related Posts band -----------------------------------------------------
   A grey band (80px above, 180px below, 1400px inner) with a 35px brand title over a three-column grid of white cards
   (10px corners, a 1px hairline shadow): a 66%-tall cover thumbnail, 20px under it, then a 20px-padded text block
   (23px / 27.6px title, 15px; 16px / 24px slate excerpt, 30px; the "Read More" pill inline on the base 28.16px line)
   and 50px under the text. On a phone: one column, 40px band padding, 50%-tall thumbnails, 0 10px text padding.
   Built so the resources index can reuse .post-grid / .post-card later (category tabs are not built here).
   The band ends short by the closing strip's lift (41px; 50px on a phone) so the strip's section starts where the live
   strip container starts and the two section wrappers still tile: the wrapper is a block formatting context so the
   band's negative bottom margin shortens the wrapper instead of escaping it. */
[data-section="s03-related-posts"] { display: flow-root; }
.post-band {
  padding: var(--post-band-pad-top) var(--post-band-pad-side) var(--post-band-pad-bottom);
  margin-bottom: calc(var(--article-strip-lift) * -1);
  background: var(--surface-alt);
  color: var(--brand);
}
.post-band__inner { display: flex; flex-direction: column; gap: var(--post-band-gap); max-width: var(--post-band-w); margin-inline: auto; }
.post-band__title {
  margin: 0;
  padding-bottom: var(--post-band-title-pb);
  font-size: var(--fs-post-band-title);
  font-weight: var(--fw-semi);
  line-height: 1;
  letter-spacing: normal;
  text-wrap: wrap;
  color: var(--brand);
}
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--post-grid-gap); margin: 0; padding: 0; list-style: none; }
.post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-post-card);
  background: var(--surface);
  box-shadow: var(--shadow-post-card);
  text-align: left;
}
.post-card__media { display: block; position: relative; margin-bottom: var(--post-card-media-mb); padding-bottom: var(--post-card-media-ratio); overflow: hidden; }
.post-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); }
.post-card__text { display: flex; flex: 1 1 auto; flex-direction: column; padding: var(--post-card-text-pad); margin-bottom: var(--post-card-text-mb); }
.post-card__title {
  margin: 0 0 var(--post-card-title-mb);
  font-size: var(--fs-post-card-title);
  font-weight: var(--fw-semi);
  line-height: var(--lh-post-card-title);
  letter-spacing: normal;
  text-wrap: wrap;
  color: var(--brand);
}
.post-card__title a { color: inherit; line-height: 1; }
.post-card__title a:hover { color: var(--brand-dark); }
.post-card__excerpt { flex: 1 1 auto; margin: 0 0 var(--post-card-excerpt-mb); font-size: var(--fs-base); line-height: var(--lh-post-card-excerpt); color: var(--ink-slate); }
.post-card__more { margin: 0; font-size: var(--fs-body); line-height: var(--lh-post-card-more); }
.post-card__btn {
  display: inline;
  padding: var(--post-card-btn-pad);
  border-radius: var(--radius-pill);
  background: var(--brand);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--on-dark);
}
.post-card__btn:hover { background: var(--brand-dark); color: var(--on-dark); }
/* tablets: three-up only while each card is at least --post-card-min-w wide, else two-up */
@media (min-width: 768px) and (max-width: 1024px) {
  .post-grid { grid-template-columns: repeat(auto-fit, minmax(max(var(--post-card-min-w), calc((100% - 2 * var(--post-grid-gap)) / 3)), 1fr)); }
}
@media (max-width: 767px) {
  .post-band { padding: var(--post-band-pad-top-phone) var(--post-band-pad-side-phone) var(--post-band-pad-bottom-phone); margin-bottom: calc(var(--article-strip-lift-phone) * -1); }
  .post-band__title { font-size: var(--fs-post-band-title-phone); }
  .post-grid { grid-template-columns: 1fr; }
  .post-card__media { padding-bottom: var(--post-card-media-ratio-phone); }
  .post-card__text { padding: var(--post-card-text-pad-phone); margin-bottom: var(--post-card-text-mb-phone); }
  .post-card__excerpt { margin-bottom: var(--post-card-excerpt-mb-phone); }
  .post-card__more { line-height: var(--lh-post-card-more-phone); }
}

/* --- .icon-strip--article: the closing figures strip as the article's last band ---------------------------------------
   The home strip (.icon-strip--band) with no box fill and no shadow, on a grey-to-clear wash, 34px in from the page
   edges, 100px under it; nothing above it (the lift is carried by the Related Posts band's negative bottom margin). */
[data-section="s04-figures"] > .icon-strip { --strip-band-pad-top: 0px; --strip-band-pad-bottom: var(--article-strip-pad-bottom); --strip-band-lift: 0px; }
.icon-strip--article { padding-inline: var(--article-strip-pad-side); background: linear-gradient(var(--surface-alt) var(--article-strip-fade-stop), transparent); }
.icon-strip--article .icon-strip__list { max-width: var(--container-wide); background: none; box-shadow: none; }
@media (max-width: 767px) {
  [data-section="s04-figures"] > .icon-strip { --strip-band-pad-top-phone: 0px; --strip-band-pad-bottom-phone: 0px; }
  .icon-strip--article { padding-inline: var(--gutter-phone); }
}

/* ===== ART:END ===== */

/* ===== IMG-BANNER:BEGIN  (image-banner service pages: light intro text, picture band, grey since band, 16:9 video frame, copy panel beside a picture) ===== */

/* --- .text-band--light: the intro band with its text in the light weight (300), as the technology intro is -------- */
.text-band--light .text-band__text { font-weight: var(--fw-light); }

/* --- .picture-band: one picture centred in the 1280px container, nothing else -----------------------------------
   Markup: figure.picture-band > img. Knobs on the wrapper: --picture-band-w (display width, share of the container;
   default the full width), --picture-band-h-phone (a fixed box on a phone; the picture is contained in it, not stretched). */
.picture-band { margin: 0; padding: 0 var(--band-pad-inline); }
.picture-band img {
  display: block;
  width: var(--picture-band-w, 100%);
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  object-fit: contain;
}
@media (max-width: 767px) {
  .picture-band { padding-inline: var(--gutter-phone); }
  .picture-band img { width: 100%; height: var(--picture-band-h-phone, auto); }
}

/* --- .since--grey: the since band (rule, two-tone heading, framed film) on the grey band wash ---------------------- */
.since--grey { background: var(--surface-alt); }

/* Full-width controlled films retain their original cinema proportions without cover cropping. */
.video-frame--full {
  width: 100%;
  aspect-ratio: var(--video-frame-ratio, 1920 / 816);
}
.video-frame--full video { object-fit: contain; }
[data-section="s02-helping-smes-to-scale-th"] .video-frame--full { --video-frame-ratio: 1920 / 818; }

/* --- .split--panel: copy in a grey rounded panel beside a picture (a modifier of .split--bleed) ----------------------
   The copy cell is the panel (grey, --radius-panel-card corners, padded by --split-copy-pad); the picture cell is filled
   (bleed) and shares the corners. .split__group is a title with its lede; a panel holding several groups spaces them by
   --split-copy-gap (50px). .sec-title--panel is the title family at 35px (the plain title size on a phone).
   Markup: section.split.split--band.split--bleed.split--panel > .split__media > img
             + .split__copy > .split__group (h2.sec-title.sec-title--panel + .split__text) ... */
.split--panel { --split-copy-gap: 3.125rem; }
.split--panel > .split__copy { background: var(--surface-alt); border-radius: var(--radius-panel-card); }
.split--panel .split__media img { border-radius: var(--radius-panel-card); }
.split__group { align-self: stretch; display: flex; flex-direction: column; gap: var(--gap); }
.sec-title--panel { font-size: var(--fs-sec-title-panel); }
@media (max-width: 767px) {
  .sec-title--panel { font-size: var(--fs-sec-title); }
}

/* --- .cards-outline--tiers: a row of three cards whose copy sits at the card foot, 35px titles (a look of the card grid) --
   The grid's knobs: columns as the live widths, 35px apart (--card-grid-gap); one column at 1024px and below.
   Card looks: .card-outline--solid (pink fill, white copy; the packing stack's card), .card-outline--tint (the brand at
   24%, no edge, ink copy), plain (the outline). Markup: .cards-outline.cards-outline--grid.cards-outline--tiers > article.card-outline[--solid|--tint] */
.cards-outline--tiers {
  --cards-cols: 409.2fr 407.7fr 409.2fr;   /* the edgeless middle card is 1.5px narrower on live */
  --cards-cols-tablet: minmax(0, 1fr);       /* the cards stack at 1024px and below, as the split bands do */
  --cards-gap: var(--card-grid-gap);
  --card-title: var(--card-title-band);
  --card-text-lh: calc(var(--lh-body) * 1em);
}
.card-outline--tint { --card-bg: var(--fill-card-tint); --card-copy: var(--ink); border-width: 0; }
@media (max-width: 1024px) {
  .cards-outline--tiers { --card-title: var(--card-roomy-title-mobile); }
}

/* ---- technology page: measured values per section (reference/logistics-services-technology/) ---------------------- */
[data-section="s01-technology"] > .page-hero--image::before { background-position: 50% 50%; }   /* the live photo is centred, not bottom-anchored */
@media (min-width: 1025px) {
  [data-section="s01-technology"] > .page-hero--image .page-hero__copy { width: var(--page-hero-copy-w); }   /* 66%, as the film banners */
  [data-section="s07-robotics"] > .split { --split-copy-end: 5cqw; }   /* side by side only: 56.6px clear on the copy's inner edge */
}
[data-section="s02-fulfilment-software"] > .text-band { --text-band-pad-top: 130px; --text-band-pad-bottom: 80px; --text-band-copy-w: 100%; }
[data-section="s02-fulfilment-software"] .text-band__text p:last-child { margin-bottom: 0; }
[data-section="s03-section"] .picture-band { --picture-band-w: 62%; --picture-band-h-phone: 106px; }
[data-section="s05-wms"] .cards-outline--flow {
  --cards-pad: 6% 5% 8%;
  --cards-pad-phone: 10% 5% 15%;
  --card-text-weight: var(--fw-light);
  --card-text-lh: calc(var(--lh-body) * 1em);
  --card-flow-title-w: none;
}
[data-section="s05-wms"] .card-outline__text > p:only-child { margin-bottom: var(--card-text-gap); }   /* these lone paragraphs keep their 14.4px */
[data-section="s07-robotics"] > .split {
  --split-pad: 7.04% max(6%, calc((100% - 1133px) / 2)) 0.88%;   /* the live content box is 1133px at most */
  --split-cols: 543.6fr 559.4fr;
  --split-img-w: min(99%, 553.8px);   /* 99% of the cell, never wider than the picture the live page serves (tablet) */
  --split-img-ar: 553.8 / 611.8;
}
[data-section="s08-carrier-management"] > .split {
  --split-pad: 7.36% max(4%, calc((100% - var(--band-inner-w-wide)) / 2));
  --split-cols: calc(50% + 60px) minmax(0, 1fr);   /* the picture is half the content width, with 60px clear on its right */
  --split-media-margin: 60px 60px 60px 0;
  --split-copy-pad: 4cqw;
}
[data-section="s09-management-information"] > .split {
  --page-pad-top: 0%;
  --page-pad-bottom: 5.28%;
  --page-pad-top-phone: 0%;
  --page-pad-bottom-phone: 10%;
  --page-row-gap-phone: 10px;
  --split-media-order-stacked: 0;
  --split-img-w: 502px;
  --split-img-ar: 1;
  --split-img-margin: auto;
}
@media (max-width: 1024px) {
  [data-section="s07-robotics"] > .split { row-gap: 20px; }
  [data-section="s08-carrier-management"] > .split { --split-media-margin: 0 0 30px; --split-media-min-h: 400px; }
}
@media (max-width: 767px) {
  [data-section="s01-technology"] > .page-hero .page-hero__title { margin-bottom: 20px; }
  [data-section="s02-fulfilment-software"] .text-band__title { font-size: var(--fs-xl); }
  [data-section="s06-fast-reliable-accurate-s"] > .since { padding-bottom: 13%; }
  [data-section="s06-fast-reliable-accurate-s"] .since__rule { display: none; }
  [data-section="s07-robotics"] > .split { --split-pad: 12% 5% calc(15% - 0.35px); }   /* - 0.35px: sub-pixel placement, see below */
  [data-section="s08-carrier-management"] > .split { --split-pad: 0 5% calc(13% + 0.05px); --split-copy-pad: 12cqw 8cqw; }
  [data-section="s08-carrier-management"] .split__media { display: none; }
  [data-section="s09-management-information"] > .split { --split-img-w: 100%; }
  [data-section="s10-1-in-10-000"] > .icon-strip { --strip-band-pad-bottom-phone: 40px; }
}

/* ---- cross-border page: measured values per section (reference/crossborder-e-fulfilment/) ------------------------- */
[data-section="s01-cross-border-e-fulfilmen"] > .page-hero--image::before { background-position: 0 0; }   /* the live photo is anchored top-left */
@media (min-width: 1025px) {
  [data-section="s01-cross-border-e-fulfilmen"] > .page-hero--image .page-hero__copy { width: var(--page-hero-copy-w); }   /* 66%, as the film banners */
  [data-section="s01-cross-border-e-fulfilmen"] > .page-hero { padding-bottom: calc(var(--page-hero-pad-bottom) + 0.1px); }   /* sub-pixel placement, see the notes */
}
[data-section="s03-uk-within-24-hours"] > .split {
  --page-pad-top: 0.88%;
  --page-pad-bottom: calc(10.56% + 0.1px);   /* + 0.1px: sub-pixel placement, see the notes */
  --page-pad-top-phone: 0%;
  --page-row-gap-phone: 20px;
  --split-media-order-stacked: 0;
  --split-cols: 52.49% minmax(0, 1fr);   /* the picture column is 665.2px of 1267.2px here, not the shared 45.25% */
  --split-img-ar: 665.2 / 440.8;
}
[data-section="s04-europe-and-the-rest-of-t"] > .split {
  --page-pad-top: 7.92%;
  --page-pad-bottom: 7.92%;
  --page-pad-top-phone: 10%;
  --page-row-gap-phone: 50px;
  --split-media-order-stacked: 0;
  --split-img-w: 564.8px;
  --split-img-ar: 564.8 / 536.8;
  --split-img-margin: auto;
}
[data-section="s05-choose-your-internationa"] > .text-band { --text-band-pad-bottom: 0px; }
[data-section="s06-high-tier-products"] .cards-outline--tiers { --cards-pad: 3% 5% 5%; --cards-pad-phone: 0 var(--gutter-phone) var(--gutter-phone); }
[data-section="s07-expert-support-for-your-"] > .text-band { --text-band-pad-top: 30px; --text-band-pad-bottom: 30px; --text-band-pad-top-phone: 20px; }
[data-section="s07-expert-support-for-your-"] .text-band__title { width: 74%; margin-inline: auto; }
@media (max-width: 767px) {
  /* this block's own --split-img-ar beats the shared phone mapping (SVC:S3, --split-img-ar-phone), so the phone ratio is set here */
  [data-section="s03-uk-within-24-hours"] > .split { --split-img-ar: 351 / 232.3; }
  [data-section="s04-europe-and-the-rest-of-t"] > .split { --split-img-w: 90%; --split-img-ar: 315.9 / 299.9; }
  [data-section="s08-1-in-10-000"] > .icon-strip { --strip-band-pad-bottom-phone: 40px; }
}

/* --- .feature-row--tiles: the icon-and-label row as grey rounded tiles, three across (a look of .feature-row / .icon-cell) --
   Each .icon-cell is a tile (--surface-alt, --radius-tile corners, --tile-pad), a picture icon (--size-tile-icon) over a
   600-weight ink label. Knobs on the row: --tiles-pad / --tiles-pad-phone (the band's own padding), --tile-icon-box-phone
   (the height the icon's box keeps on a phone; see the sustainability notes). One column on a phone.
   Markup: ul.feature-row.feature-row--tiles > li.icon-cell > span.icon-cell__icon > img + p.icon-cell__label */
.feature-row.feature-row--tiles {   /* .feature-row.: beats the base ul[class] padding reset */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  padding: var(--tiles-pad, 0);
}
.feature-row--tiles > .icon-cell { gap: var(--gap); padding: var(--tiles-cell-pad); border-radius: var(--radius-tile); background: var(--surface-alt); }
.feature-row--tiles .icon-cell__icon { align-self: stretch; width: auto; height: auto; }
.feature-row--tiles .icon-cell__icon img { width: var(--size-tile-icon); height: auto; aspect-ratio: 1; margin-inline: auto; }
.feature-row--tiles .icon-cell__label {
  margin-bottom: var(--space-para);
  font-size: var(--fs-section-body);
  font-weight: var(--fw-semi);
  line-height: calc(var(--lh-body) * 1em);
  color: var(--ink);
}
@media (max-width: 767px) {
  .feature-row.feature-row--tiles { grid-template-columns: minmax(0, 1fr); padding: var(--tiles-pad-phone, 0); }
  .feature-row--tiles > .icon-cell { gap: var(--gap-tile-phone); padding: var(--tiles-cell-pad-phone); }
  .feature-row--tiles .icon-cell__icon { height: var(--tile-icon-box-phone, auto); }
  .feature-row--tiles .icon-cell__icon img { width: var(--size-tile-icon); height: auto; aspect-ratio: 1; }   /* live: 26% of the tile content width on a phone too (82.1px at 390, 90.6px at 430) */
  .feature-row--tiles .icon-cell__label { font-size: var(--fs-section-body); line-height: calc(var(--lh-body) * 1em); }
}

/* --- .cards-outline--statements: a stack of short statements as rounded boxes (a look of .cards-outline--stack) --------
   No edge, --radius-panel-card corners, white boxes with light ink copy, 15px apart, 10px clear under the title above;
   .card-outline--dark is the dark box with white copy (the lead statement).
   Markup: ul.cards-outline.cards-outline--stack.cards-outline--statements > li.card-outline[.card-outline--dark] > p.card-outline__text */
.cards-outline--statements {
  --card-edge-width: 0px;
  --card-radius: var(--radius-panel-card);
  --card-pad: var(--card-statement-pad);
  --card-bg: var(--surface);
  --card-copy: var(--ink);
  --card-text-size: var(--fs-section-body);
  --card-text-weight: var(--fw-light);
  --card-text-lh: calc(var(--lh-body) * 1em);
  align-self: stretch;
  gap: var(--gap-copy);
  margin-top: calc(var(--space-statements-lead) + var(--gap-copy));   /* the spacer between two column gaps */
}
.card-outline--dark { --card-bg: var(--dark); --card-copy: var(--on-dark); }

/* --- .photo-collage: a few photographs set out as a two-column collage (the picture cell of a split) --------------------
   Two .photo-collage__col columns (--collage-cols); the --end column stacks its pictures from the foot, right-aligned.
   Each picture's display size is a pair of knobs (--collage-img-w, --collage-img-ar) set per section; the pictures are
   cropped to cover. At 1024px and below the collage is one column of full-width pictures --collage-img-h-stacked tall,
   and a .photo-collage__wide-only picture is left out (as live).
   Markup: .split__media.photo-collage > .photo-collage__col[.photo-collage__col--end] > img ... */
.photo-collage {
  display: grid;
  grid-template-columns: var(--collage-cols, repeat(2, auto));
  align-items: stretch;
}
.photo-collage__col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--collage-gap); padding: var(--collage-col-pad, 0); }
.photo-collage__col--end { justify-content: flex-end; align-items: flex-end; }
.photo-collage .photo-collage__col > img {
  display: block;
  width: var(--collage-img-w, auto);
  max-width: 100%;
  height: auto;
  aspect-ratio: var(--collage-img-ar, auto);
  margin: 0;
  object-fit: cover;
}
@media (max-width: 1024px) {
  .photo-collage { grid-template-columns: minmax(0, 1fr); }
  .photo-collage__col { align-items: stretch; gap: var(--collage-gap-stacked); padding: var(--collage-col-pad-stacked, 0); }
  .photo-collage .photo-collage__col > img { width: 100%; height: var(--collage-img-h-stacked); aspect-ratio: auto; }
  .photo-collage .photo-collage__col > .photo-collage__wide-only { display: none; }
}

/* ---- sustainability page: measured values per section (reference/sustainable-fulfilment/) ------------------------ */
/* the banner photo (live 2025/08/Graphics-15-15.png) is not in the capture; until it is supplied, the banner shows the flat tone under the wash */
[data-section="s01-sustainability"] > .page-hero--image::before { background: var(--hero-image, var(--fill-film-fallback)) 50% 50% / cover no-repeat; }
@media (min-width: 1025px) {
  [data-section="s01-sustainability"] > .page-hero--image .page-hero__copy { width: var(--page-hero-copy-w); }   /* 66%, as the film banners */
}
[data-section="s02-our-facility"] > .text-band {
  --text-band-pad-top: 6%;
  --text-band-pad-bottom: 0px;
  --text-band-pad-top-phone: 10%;
  --text-band-pad-bottom-phone: 0px;
  --text-band-gap: 50px;
  --text-band-copy-w: 100%;
  padding-inline: 5%;
}
[data-section="s02-our-facility"] .text-band__inner { max-width: none; }
[data-section="s02-our-facility"] .text-band__title { margin-bottom: -20px; }   /* 30px from title to text, 50px between the other parts */
[data-section="s02-our-facility"] .text-band__text:last-child p { margin-bottom: 0; }
[data-section="s03-section"] > .feature-row--tiles { --tiles-pad: 2% 5% 0; --tiles-pad-phone: var(--tiles-pad-phone-first); }
[data-section="s04-section"] > .feature-row--tiles { --tiles-pad: 1% 5% 5%; --tiles-pad-phone: var(--tiles-pad-phone-last); }
[data-section="s05-the-power-behind-our-ope"] > .split {
  --split-pad: 7.36% max(4%, calc((100% - var(--band-inner-w-wide)) / 2));
  --split-media-w: 662.8fr;
  --split-copy-w: 662fr;
  --split-img-w: 100%;
  --split-img-ar: 1;
  column-gap: 0;
  align-items: start;
}
[data-section="s05-the-power-behind-our-ope"] > .split > .split__media { padding: var(--power-media-pad-y) var(--power-media-pad-x); }
[data-section="s05-the-power-behind-our-ope"] > .split > .split__copy { justify-content: flex-start; }
[data-section="s06-efficient-autonomous-mob"] > .split {
  --page-pad-top: 7.04%;
  --page-pad-bottom: 7.04%;
  --page-pad-top-phone: 13%;
  --page-pad-bottom-phone: 13%;
  --page-row-gap-phone: 20px;
  --split-media-order-stacked: 0;
  --split-cols: 596fr 641.2fr;
  --split-copy-end: 0px;
  --split-img-w: 564.3px;
  --split-img-ar: 564.3 / 483.2;
  --split-img-margin: auto;
}
[data-section="s07-sustainable-and-contempo"] > .split {
  --split-pad: 1.84% max(4%, calc((100% - var(--band-inner-w-collage)) / 2)) 9.2%;
  --split-min-h: 90vh;      /* live rule: --min-height:90vh */
  --split-media-w: 794.9fr;
  --split-copy-w: 529.9fr;
  --split-copy-end: 31.8px;      /* the live copy box is 524.6px of its 529.9px column, with 26.48px padding on its right */
  --collage-cols: 265px minmax(0, 1fr);
  --collage-col-pad: 0;
  column-gap: 0;
  align-items: stretch;
}
[data-section="s07-sustainable-and-contempo"] .photo-collage__col + .photo-collage__col { --collage-col-pad: 0 25px 20px; }
[data-section="s07-sustainable-and-contempo"] .photo-collage__col--end > img:first-child { --collage-img-w: 220px; --collage-img-ar: 220 / 128; }
[data-section="s07-sustainable-and-contempo"] .photo-collage__col--end > img:last-child { --collage-img-w: 265px; --collage-img-ar: 265 / 230; }
[data-section="s07-sustainable-and-contempo"] .photo-collage__col + .photo-collage__col > img:first-child { --collage-img-w: 406px; --collage-img-ar: 406 / 350; }
[data-section="s07-sustainable-and-contempo"] .photo-collage__col + .photo-collage__col > img:last-child { --collage-img-w: 295px; --collage-img-ar: 295 / 149; }
@media (max-width: 1024px) {
  [data-section="s07-sustainable-and-contempo"] > .split { --split-copy-end: 0px; --split-min-h: 0px; row-gap: 0; }
  [data-section="s07-sustainable-and-contempo"] > .split > .split__copy { margin-bottom: var(--sustain-copy-gap-phone); }   /* live (element 260caf15): margin-bottom 36% of the cell width, 139.3px at 430, 126.4px at 390 */
  [data-section="s05-the-power-behind-our-ope"] > .split > .split__media { order: -1; }   /* picture first once stacked, as live */
  [data-section="s07-sustainable-and-contempo"] > .split > .split__media { order: 0; }   /* copy first once stacked, as live */
  [data-section="s07-sustainable-and-contempo"] .photo-collage__col + .photo-collage__col { --collage-col-pad-stacked: var(--collage-gap-stacked) 0 0; }
}
@media (max-width: 767px) {
  [data-section="s01-sustainability"] > .page-hero .page-hero__title { margin-bottom: 20px; }
  [data-section="s02-our-facility"] > .text-band { --text-band-gap: 20px; }
  [data-section="s02-our-facility"] .text-band__title { margin-bottom: 10px; }
  /* LIVE PHONE DEFECT, kept for pixel parity with the current site: the icon boxes collapse (60px for the first, 23px for the rest) and the 82px icons overlap their labels. The three rules below (3270-3272) are the whole of it: delete them in one go if the owner rules it a defect. See docs/patterns.md, Rig effects that stay. */
  [data-section="s03-section"] .icon-cell { --tile-icon-box-phone: 23px; }
  [data-section="s03-section"] .icon-cell:first-child { --tile-icon-box-phone: auto; }   /* at 430 the first tile's box is its picture (26% of the content width, 90.6px); the 60px collapse is the 390 capture's, kept below 400px only */
  [data-section="s04-section"] .icon-cell { --tile-icon-box-phone: 23px; }
  [data-section="s05-the-power-behind-our-ope"] > .split { --split-pad: 15% 5% 3%; --split-img-w: 93%; row-gap: 0; }
  [data-section="s05-the-power-behind-our-ope"] > .split > .split__media { padding: 0 0 var(--stack-gap-phone-sustain); }
  [data-section="s05-the-power-behind-our-ope"] .split__media img { height: var(--img-h-sustain-power-phone); object-fit: contain; }   /* live (element e08e037): img width 93%, height 297px, contained; the box does not scale with the phone width */
  [data-section="s05-the-power-behind-our-ope"] > .split > .split__copy { padding-bottom: var(--stack-gap-phone-sustain); }
  [data-section="s05-the-power-behind-our-ope"] .sec-title { align-self: stretch; text-align: center; }
  /* this block's own --split-img-ar beats the shared phone mapping (SVC:S3, --split-img-ar-phone), so the phone ratio is set here */
  [data-section="s06-efficient-autonomous-mob"] > .split { --split-img-w: 88%; --split-img-ar: 308.9 / 264.9; }
  [data-section="s07-sustainable-and-contempo"] > .split { --split-pad: 0 5% 26%; }
  /* the live strip box rides 50px up over the team-spaces band on a phone (this page only: cross-border's s08 has the same id and no lift) */
  [data-section="s07-sustainable-and-contempo"] + [data-section="s08-1-in-10-000"] > .icon-strip { --strip-band-lift: 50px; }
}
@media (max-width: 399px) {
  [data-section="s03-section"] .icon-cell:first-child { --tile-icon-box-phone: var(--tile-icon-box-first-390); }
}

/* --- .sec-strap: an uppercase strapline under a section title (24px, regular weight, brand colour, every width) -------
   Markup: h3.sec-strap (or p.sec-strap) after the title; it follows the alignment of the band it sits in. */
.sec-strap {
  margin: 0;
  font-size: var(--fs-strap);
  font-weight: var(--fw-normal);
  line-height: var(--lh-strap);
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--brand);
}

/* --- .ticks--ink: the tick list with its labels in the lede ink (a look of .ticks) ------------------------------------
   The icon stays the brand pink; the label is the light ink at the tick size (19.2px, 16px on a phone), 1.3 line height,
   10px between rows; a <b> lead-in is bold. A label holding a lead-in is wrapped in one <span> (the row is a flex box).
   Markup: ul.ticks.ticks--ink > li > [span > b + text] */
.ticks--ink li { line-height: var(--lh-tick-ink); color: var(--ink-lede); }
.ticks--ink li::before { background-color: var(--brand); }
.ticks--ink li + li { margin-top: var(--space-tick-ink-row); }
.ticks--ink b { font-weight: var(--fw-bold); }

/* --- .cards-outline--lists: outlined cards that end in a tick list (a look of the card grid) ---------------------------
   Two equal columns 35px apart (--card-grid-gap); each card is a 35px title, an optional one-line intro
   (.card-outline__text, 7px under it) and a .ticks list held at the card's foot, so the lists of a row end level.
   On desktop the title keeps 35px under it and nothing else is spaced; on a phone the parts are 30px apart.
   Markup: .cards-outline.cards-outline--grid.cards-outline--lists > article.card-outline > h3.card-outline__title
             + [.card-outline__text > p] + ul.ticks.ticks--ink */
.cards-outline--lists {
  --cards-cols: repeat(2, minmax(0, 1fr));
  --cards-gap: var(--card-grid-gap);
  --card-gap: 0px;
  --card-title: var(--card-title-band);
  --card-text-lh: calc(var(--lh-body) * 1em);
  --card-text-gap: var(--space-card-list-intro);
}
.cards-outline--lists .card-outline__title { margin-bottom: var(--space-card-list-lead); }
.cards-outline--lists .card-outline > .ticks { margin-top: auto; }
@media (max-width: 1024px) {
  .cards-outline--lists { --card-title: var(--card-roomy-title-mobile); }
}
@media (max-width: 767px) {
  .cards-outline--lists { --card-gap: 1.875rem; }   /* the grid's own phone gap; this modifier's desktop 0 would otherwise win */
  .cards-outline--lists .card-outline__title { margin-bottom: 0; }
}

/* ---- about us page: measured values per section (reference/about-us/) ---------------------------------------------- */
[data-section="s01-about-us"] > .page-hero { --hero-lift: var(--services-hero-lift); }   /* live margin-top -25%, as /services/ */
[data-section="s01-about-us"] > .page-hero--image::before { background-position: 50% 50%; }   /* the live photo is centred */
@media (min-width: 1025px) {
  [data-section="s01-about-us"] > .page-hero--image .page-hero__copy { width: var(--page-hero-copy-w); }   /* 66%, as the film banners */
}
[data-section="s02-helping-smes-to-scale-th"] > .text-band {
  --text-band-pad-top: 6%;
  --text-band-pad-bottom: 0px;
  --text-band-pad-top-phone: 10%;
  --text-band-pad-bottom-phone: 0px;
  --text-band-gap: 50px;
  --text-band-copy-w: 90%;
  padding-inline: 5%;
}
[data-section="s02-helping-smes-to-scale-th"] .text-band__inner { max-width: none; }
[data-section="s02-helping-smes-to-scale-th"] .text-band__title { margin-bottom: -20px; padding-inline: 0; }   /* 30px from title to text, 50px to the film */
[data-section="s03-about-us"] > .split > .split__copy { justify-content: center; }   /* the live copy is centred in its column here (home: from the top) */
[data-section="s03-about-us"] .split__media--badged img { aspect-ratio: 358.6 / 538.3; }   /* the picture as this page serves it */
[data-section="s03-about-us"] .badge-glass { background: var(--fill-badge-glass-strong); }   /* live: the brand at 55% here, 38% on home */
[data-section="s04-family-owned-3pl-logisti"] > .split {
  --split-pad: 4.6% max(4%, calc((100% - var(--band-inner-w-wide)) / 2));
  --split-media-w: 703.8fr;
  --split-copy-w: 621fr;
  --split-img-w: 100%;
  --split-img-h: 500px;
  column-gap: 0;
}
[data-section="s05-e-commerce-fulfilment-se"] > .split {
  --page-pad-top: 7.04%;
  --page-pad-bottom: 7.04%;
  --page-pad-top-phone: 10%;
  --page-pad-bottom-phone: 10%;
  --page-row-gap-phone: 20px;
  --split-media-order-stacked: 0;
  --split-cols: 51% 363px;     /* the live copy is 51% of the content box; the 319.4px picture sits centred in the 363px image widget after it (x 784.5) */
  --split-copy-end: 0px;
  --split-img-w: 319.4px;      /* the live picture, measured by the DOM and now also seen in the refreshed (10 Oct) screenshot */
  --split-img-h: 500px;
  --split-img-margin: auto;
}
[data-section="s06-third-party-fulfilment-t"] > .text-band {
  --text-band-pad-top: 100px;
  --text-band-pad-bottom: 20px;
  --text-band-pad-top-phone: 40px;
  --text-band-pad-bottom-phone: 30px;
  --text-band-copy-w: 100%;
}
[data-section="s06-third-party-fulfilment-t"] .text-band__title { padding-inline: 0; }
[data-section="s07-seamless-integrations"] .cards-outline--lists { --cards-pad: 2% 5% 8%; --cards-pad-phone: 1% 5% 5%; }
@media (min-width: 1025px) {
  [data-section="s04-family-owned-3pl-logisti"] > .split > .split__media { padding: 60px; }
}
@media (max-width: 767px) {
  [data-section="s01-about-us"] > .page-hero .page-hero__title { margin-bottom: 20px; }
  [data-section="s02-helping-smes-to-scale-th"] > .text-band { --text-band-gap: 20px; }
  [data-section="s02-helping-smes-to-scale-th"] .text-band__title { margin-bottom: 10px; }
  [data-section="s03-about-us"] { display: none; }   /* live shows the Why Choose Us band on wider screens only */
  [data-section="s04-family-owned-3pl-logisti"] > .split { --split-pad: 50px 5% 0; --split-img-w: 100%; --split-img-h: 300px; row-gap: 0; }
  [data-section="s04-family-owned-3pl-logisti"] > .split > .split__copy { padding-block: 10% 8%; }
  [data-section="s05-e-commerce-fulfilment-se"] > .split { --split-img-w: 271.9px; }
  /* this page's strip: 30px above, 50px below on a phone (cross-border's s08 has the same id and 40px below) */
  [data-section="s07-seamless-integrations"] + [data-section="s08-1-in-10-000"] > .icon-strip { --strip-band-pad-top-phone: 30px; --strip-band-pad-bottom-phone: 50px; }
}

/* ===== IMG-BANNER:END ===== */
/* ===== RES:BEGIN  (resources index family (5 pages), the FAQs bands, and the three single-purpose pages) ===== */

/* --- the index and FAQs banners: the FRAME image banner with a 66% copy column and a centred photograph ----------- */
[data-section="s01-resources"] > .page-hero,
[data-section="s01-faqs"] > .page-hero,
[data-section="s01-policy"] > .page-hero { --page-hero-copy-w-image: var(--page-hero-copy-w); }
[data-section="s01-resources"] > .page-hero--image::before,
[data-section="s01-faqs"] > .page-hero--image::before,
[data-section="s01-policy"] > .page-hero--image::before { background-position: 50% 50%; }

/* --- .post-band--index: the grey band of the resources index (80px above; the live container runs 100px under the
   footer, so 80px of its 180px show), the filter bar, the three-column loop grid (30px gaps) and the pager.
   The filter bar is a row of links: the live widget is Elementor's taxonomy filter on post_tag, and pressing a
   button there reloads the page with the tag as a query over ALL posts; here each tag has its own pre-built listing
   (/resources/<term>/ …, build:resources from templates/post-terms.json), so a button is a link and no card is ever hidden. */
.post-band--index { padding: var(--res-band-pad-top) var(--post-band-pad-side) var(--res-band-pad-bottom); margin-bottom: 0; }
.filter-bar {
  display: flex;
  justify-content: center;
  gap: var(--filter-gap);
  padding-bottom: var(--filter-pad-bottom);
  margin-bottom: var(--filter-mb);
  overflow-x: auto;
}
.filter-bar__item,
.filter-bar__item:hover {   /* a link to the All listing or to one tag's listing; the hover keeps the live buttons' steady colour */
  flex: 0 0 auto;
  padding: var(--filter-item-pad);
  border: 0;
  border-radius: var(--radius-filter-item);
  background: var(--surface);
  font-family: var(--font);
  font-size: var(--fs-filter-item);
  font-weight: var(--fw-semi);
  line-height: normal;
  color: var(--ink-strong);
}
.filter-bar__item[aria-current="page"],
.filter-bar__item[aria-current="page"]:hover { background: var(--brand); color: var(--on-dark); }
.post-grid--index { grid-auto-rows: minmax(max-content, 1fr); gap: var(--res-grid-gap); }   /* every row as tall as the tallest card on the page (the live loop grid's equal-height rows) */
.post-card--index { gap: var(--res-card-gap); box-shadow: var(--shadow-post-card-index); overflow: visible; }   /* visible: a clipped card reports no height to the equal-height rows */
.post-card--index .post-card__media { height: var(--res-card-media-h); margin: 0; padding: 0; }
.post-card--index .post-card__media img { position: static; transform: none; border-radius: var(--radius-post-card) var(--radius-post-card) 0 0; }
.post-card--index .post-card__title { margin: 0; padding: var(--res-card-text-pad); line-height: var(--lh-res-card-title); }
.post-card--index .post-card__excerpt { flex: 0 0 auto; margin: 0; padding: var(--res-card-text-pad); line-height: var(--lh-article-body); color: var(--ink-strong); }   /* 16px on the 17.6px base line (28.16px), as live inherits it */
.post-card--index .post-card__more { padding: var(--res-card-more-pad); line-height: normal; }
/* The pill is pinned to the card's foot wherever cards sit side by side. The live loop item is a plain flex column
   with no pin, so a live pill sits wherever its excerpt ends: 29px apart within a row on /resources/ rows 2 and 3
   (reference/resources/raw-desktop.json), and 28-30px apart on every row here before the pin. The equal-height rows plus this
   pin put every pill in a row on one line (measured 0px spread on /resources/, /4/ and /insights/ at 1440). One column on a
   phone has no row to line up, so the pill keeps the live placement there. */
@media (min-width: 768px) {
  .post-card--index .post-card__more { margin-top: auto; }
}
.post-card__cta {
  display: inline-block;
  padding: var(--res-cta-pad);
  border: 1px solid var(--on-dark);
  border-radius: var(--radius-pill);
  background: var(--brand);
  font-size: var(--fs-res-cta);
  font-weight: var(--fw-semi);
  line-height: 1;
  text-align: center;
  color: var(--on-dark);
}
.post-card__cta:hover { background: var(--brand-dark); color: var(--on-dark); }
.pager { margin-top: var(--pager-mt); font-size: var(--fs-pager); line-height: var(--lh-body); text-align: center; }
.pager__item {
  display: inline;
  padding: var(--pager-item-pad);
  margin: 0 var(--pager-item-gap);
  border-radius: var(--radius-circle);
  background: var(--ink-strong);
  font-weight: var(--fw-semi);
  line-height: 1;
  color: var(--on-dark);
}
.pager__item:first-child { margin-left: 0; }
.pager__item:last-child { margin-right: 0; }
.pager__item--current { background: var(--brand); font-weight: var(--fw-normal); }
@media (max-width: 767px) {
  .post-band--index { padding: var(--res-band-pad-top) var(--post-band-pad-side-phone) var(--res-band-pad-bottom); }
  .filter-bar { justify-content: flex-start; gap: var(--filter-gap-phone); padding-bottom: var(--filter-pad-bottom-phone); }
  .filter-bar__item { font-size: var(--fs-filter-item-phone); }
  .post-grid--index { grid-auto-rows: minmax(max-content, 1fr); gap: var(--res-grid-gap); }   /* every row as tall as the tallest card on the page (the live loop grid's equal-height rows) */
  .post-card--index .post-card__title,
  .post-card--index .post-card__excerpt { padding: var(--res-card-text-pad-phone); }
  .post-card--index .post-card__more { padding: var(--res-card-more-pad-phone); }
  .post-card--index .post-card__excerpt { line-height: var(--lh-article-body-phone); }
  .post-card__cta { font-size: var(--fs-res-cta-phone); }
  .pager { font-size: var(--fs-pager-phone); }
}

/* --- FAQs: the intro band (a light 50px title with a bold word, 16px centred text) and the accordion column ---------- */
.text-band--faq { --text-band-pad-top: var(--faq-intro-pad-top); --text-band-pad-bottom: var(--faq-intro-pad-bottom); --text-band-copy-w: 100%; --text-band-text-pad: 0px; }
.text-band--faq .text-band__inner { max-width: var(--faq-inner-w); }
.text-band--faq .text-band__title { padding-inline: 0; font-size: var(--fs-3xl); font-weight: var(--fw-light); line-height: 1; color: var(--ink-strong); }
.text-band--faq .text-band__title strong { font-weight: var(--fw-semi); color: var(--ink); }
.text-band--faq .text-band__text { padding-bottom: var(--faq-intro-text-pb); font-size: var(--fs-base); line-height: var(--lh-article-body); color: var(--ink-strong); }   /* 16px text on the 17.6px base line (28.16px), as the live widget inherits it */
.faq-band { padding: 0 var(--band-pad-side) var(--faq-band-pad-bottom); }
.faq-band__col { width: var(--faq-col-w); max-width: var(--container); padding-right: var(--faq-col-pr); }
@media (max-width: 767px) {
  .text-band--faq { --text-band-pad-top-phone: var(--band-pad-y-phone); --text-band-pad-bottom-phone: var(--band-pad-y-phone); }
  .text-band--faq .text-band__inner { text-align: center; }
  .text-band--faq .text-band__title { font-size: var(--fs-faq-title-phone); line-height: var(--lh-faq-title-phone); }
  .text-band--faq .text-band__text { padding-bottom: 0; line-height: var(--lh-article-body-phone); }
  .faq-band { padding: 0 var(--gutter-phone) var(--faq-band-pad-bottom-phone); }
  .faq-band__col { width: 100%; padding-right: 0; }
}

/* --- the three single-purpose pages, as live shows them (measured from the live captures of 10 Oct 2026, pixel runs):
   free-guide = a flip-book embed (third-party, lazy) in a grey band on desktop (1020px: 60 + 900 + 60) and a 400px frame
   in a white band on a phone (419px); the policy pages = a bold 64px title at the 9% inset over six light tiles (419 x
   213, 20px apart, rows 15px apart) each holding a small picture and a pill the live site gives no target. ------------ */
.embed-band { padding: var(--embed-pad); background: var(--surface-embed); }
.embed-band__frame { display: block; width: 100%; height: var(--embed-h); border: 0; }
@media (max-width: 767px) {
  .embed-band { padding: var(--embed-pad-phone); background: var(--surface); }
  .embed-band__frame { height: var(--embed-h-phone); }
}
/* --- the policy pages (measured on /privacy-policies/ at 1440 and 390, 10 Oct 2026): the FRAME banner with no picture
   and no wash (.page-hero--plain: the live box starts 160.5px above the page, 20% above / 5% below, a black 64px / 900
   title; on a phone 20% / 5% with 20px under the title), then two rows of three tiles (419 x 213, 20px apart, 14.4px
   between the rows, 86.8px under the last): a light tile with 20px corners, 25.9px padding, a 95.4px picture, a 20px
   gap and a 46px pill (15px 35px, 16px / 600) the live site gives no target. On a phone the rows are groups of
   stacked tiles (39px above, 19.5px sides and below, 20px apart): 17.5px padding, a 30px gap, the pill 42.8px
   (15px 35px, 12.8px); the live picture box is 70px tall on the first tile and 23px on the other five while the picture
   stays 82.1px, so the picture overlaps the gap on those (reproduced; a live defect worth the customer's eye). -------- */
.page-hero--plain { --hero-lift: var(--policy-hero-lift); --page-hero-pad-top: var(--policy-hero-pad-top); --page-hero-pad-bottom: var(--policy-hero-pad-bottom); --page-hero-copy-w-image: var(--page-hero-copy-w); }
.page-hero--plain::before,
.page-hero--plain::after { content: none; }
.page-hero--plain .page-hero__title { color: var(--ink-strong); }
ul.tile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tile-gap); margin: 0; padding: var(--tile-grid-pad); list-style: none; }
ul.tile-grid--last { padding-bottom: var(--tile-grid-pad-bottom-last); }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--tile-gap-inner); padding: var(--tile-pad); border-radius: var(--radius-lg); background: var(--surface-alt); text-align: center; }
.tile img { display: block; width: var(--tile-img); height: auto; aspect-ratio: 1; }
.tile__btn { display: inline-block; padding: var(--tile-btn-pad); border-radius: var(--radius-pill); background: var(--brand); font-size: var(--fs-tile-btn); font-weight: var(--fw-semi); line-height: 1; color: var(--on-dark); }
@media (max-width: 767px) {
  .page-hero--plain { --page-hero-pad-bottom: var(--policy-hero-pad-bottom-phone); }
  .page-hero--plain .page-hero__title { margin-bottom: var(--policy-title-mb-phone); }
  ul.tile-grid { grid-template-columns: 1fr; padding: var(--tile-grid-pad-phone); }
  ul.tile-grid--last { padding-bottom: var(--tile-grid-pad-bottom-phone); }
  .tile { gap: var(--tile-gap-inner-phone); padding: var(--tile-pad-phone); }
  .tile img { width: var(--tile-img-phone); height: auto; aspect-ratio: 1; }
  .tile__btn { padding: var(--tile-btn-pad); font-size: var(--fs-tile-btn-phone); }
}


/* --- the contact page (family 8, measured on /contact/ at 1440 and 390, 10 Oct 2026): the footer's get-in-touch band
   at page scale, as page-scale MODIFIERS on the shared .footer-cta family (never a copy). The live box starts 160.5px
   above the page top under the transparent header: the band itself starts at the page top (as every FRAME banner does)
   and paints its background upward through ::before. Desktop: 194.4px of padding above the content (33.9px once the
   lift is taken off), 168.5px below; the eyebrow carries 206.9px above it; the title is the page's h1 (64px / 900,
   "Let's Talk Fulfilment." at 400); the two columns are 646.5px with no gap; the lede at weight 300, a 50px spacer,
   the three icon rows, the two 30px social icons; the form card is the footer's (75% of its column, 32px padding).
   Phone: the header bar stays in the page's own flow on live (the band begins 119.5px down, so the band carries the
   header zone as padding and paints below it), 58.5px above and below, 15px gaps, the title 33px / 36.3px, the card
   FIRST (column-reverse, 65px gap), the lede 17.6px / 22.52px, the rows 35px apart, socials centred, the submit
   42.8px. Then the live Google map embed, 460px tall in a 402px window (the next band rides 58px up on live). */
.no-footer-cta main .footer-cta { display: flex; }
.footer-cta--page {
  min-height: calc(var(--contact-band-min-h) - var(--contact-band-lift));
  margin: 0;
  padding: calc(var(--contact-band-pad-top) - var(--contact-band-lift)) var(--contact-band-pad-side) var(--contact-band-pad-bottom);
  background: none;
}
.footer-cta--page::before {
  inset: calc(var(--contact-band-lift) * -1) 0 0;
  background: linear-gradient(0deg, var(--scrim-cta-band-start) 0%, var(--scrim-cta-band-end) 90%), var(--brand-light) url(/assets/img/2025/07/Image-11-band.jpg) 0 0 / cover no-repeat;
}
.footer-cta--page .footer-cta__eyebrow { padding-top: var(--contact-eyebrow-pt); }
.footer-cta--page .footer-cta__title { width: var(--contact-title-w); letter-spacing: normal; text-wrap: wrap; }   /* as the footer's own headings: no site-wide heading tracking or balancing */
.footer-cta--page .footer-cta__grid { gap: 0; }
.footer-cta--page .footer-cta__lede { margin-bottom: var(--contact-lede-mb); }
.footer-cta--page .footer-ticks { display: none; }                 /* the page band has no tick list */
.footer-cta--page .footer-contact-row svg { flex-basis: var(--contact-row-icon); width: var(--contact-row-icon); height: var(--contact-row-icon); }
.footer-cta--page .footer-contact-row span { margin: 0; font-size: var(--fs-contact-row); line-height: var(--lh-contact-row); }
.footer-cta--page .footer-cta__social { height: var(--contact-social); }
.footer-cta--page .footer-cta__social a,
.footer-cta--page .footer-cta__social svg { width: var(--contact-social); height: var(--contact-social); }
.footer-cta--page .footer-cta__social { margin-top: var(--contact-social-mt); }
.map-band { height: var(--map-band-h); overflow: hidden; }
.map-band__frame { display: block; width: 100%; height: var(--map-frame-h); border: 0; filter: saturate(var(--map-saturate)); }
@media (max-width: 767px) {
  .footer-cta--page { min-height: 0; padding: var(--contact-band-pad-phone); gap: var(--contact-band-gap-phone); }
  .footer-cta--page::before { inset: var(--header-zone-phone) 0 0; }
  .footer-cta--page .footer-cta__eyebrow { padding-top: 0; font-size: var(--fs-contact-eyebrow-phone); line-height: var(--lh-contact-eyebrow-phone); }
  .footer-cta--page .footer-cta__title { width: var(--contact-title-w-phone); font-size: var(--fs-contact-title-phone); line-height: var(--lh-contact-title-phone); }
  .footer-cta--page .footer-cta__grid { flex-direction: column-reverse; gap: var(--contact-columns-gap-phone); }
  .footer-cta--page .footer-card { width: 100%; margin-top: var(--contact-card-mt-phone); }
  .footer-cta--page .footer-card__title { font-size: var(--fs-contact-card-title-phone); line-height: var(--lh-contact-card-title-phone); }
  .footer-cta--page .footer-cta__info { gap: var(--contact-info-gap-phone); }
  .footer-cta--page .footer-cta__lede { margin-bottom: var(--contact-lede-mb-phone); font-size: var(--fs-contact-lede-phone); line-height: var(--lh-contact-lede-phone); }
  .footer-cta--page .footer-contact-rows { gap: var(--contact-info-gap-phone); }
  .footer-cta--page .footer-cta__social { margin-top: 0; align-self: center; }
  .footer-cta--page .footer-form__submit { padding-block: var(--contact-submit-pad-phone); }
  .footer-cta--page .footer-form__field--half { flex-basis: 100%; }   /* live stacks the two half fields on phones */
}

/* --- the thank-you page (/thank-you/, the form's confirmation page; noindex, not in the sitemap): one brand band whose
   live box starts 64.9px (phone: 130.5px) above the page top under the transparent header; the band starts at the page
   top and paints upward through ::before, and carries the lift as bottom padding so its content centres where live's
   does. Content: a 150px spacer, a tick in a circle, "Thank you!" and one line. Measured on live, 10 Oct 2026. ----- */
.thanks-band { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--thanks-gap); min-height: calc(var(--thanks-min-h) - var(--thanks-lift)); margin: 0; padding: 0 var(--thanks-pad-side) var(--thanks-lift); text-align: center; color: var(--on-dark); }
.thanks-band::before,
.thanks-band::after { content: ""; position: absolute; inset: calc(var(--thanks-lift) * -1) 0 0; z-index: -1; background: var(--brand); }
.thanks-band::after { background: url(/assets/img/2025/07/Graphics-14-16-1.png) center / var(--thanks-wash-size) repeat; opacity: var(--thanks-wash-opacity); }   /* the live photo wash over the brand colour: the 1481px rendition tiled and centred, so a wider window shows its neighbours */
.thanks-band__spacer { flex: 0 0 auto; width: 100%; height: var(--thanks-spacer); }
.thanks-band__icon { display: block; flex: 0 0 auto; width: var(--thanks-icon); height: var(--thanks-icon); margin-bottom: var(--thanks-icon-mb); color: currentColor; }
.thanks-band__title { margin: 0; font-size: var(--fs-page-hero-title); font-weight: var(--fw-black); line-height: var(--lh-tight); letter-spacing: normal; color: inherit; }
.thanks-band__text { max-width: var(--thanks-inner-w); margin: 0; padding-bottom: var(--thanks-text-mb); font-size: var(--fs-thanks-text); font-weight: var(--fw-light); line-height: var(--lh-thanks-text); color: inherit; }   /* padding: the live widget's 14.4px below the paragraph counts in the centring */
@media (max-width: 767px) {
  .thanks-band { min-height: calc(var(--thanks-min-h-phone) - var(--thanks-lift-phone)); padding: 0 var(--gutter-phone) var(--thanks-lift-phone); }
  .thanks-band::before,
  .thanks-band::after { inset: calc(var(--thanks-lift-phone) * -1) 0 0; }
  .thanks-band::after { background-size: var(--thanks-wash-size-phone); background-repeat: repeat; }   /* live serves a 412px rendition on phones, centred both ways and tiled (a 302px repeat measured on the capture) */
  .thanks-band__icon { margin-bottom: var(--thanks-icon-mb-phone); }
  .thanks-band__title { font-size: var(--fs-thanks-title-phone); line-height: var(--lh-thanks-title-phone); }
  .thanks-band__text { max-width: var(--thanks-inner-w-phone); width: 100%; text-align: left; }   /* live's phone paragraph is left-aligned in its 315.9px box at x=37; the title stays centred */
}

/* ===== RES:END ===== */

/* ===== OVERSEAS:BEGIN  (UK fulfilment for overseas brands: centred washed banner with two buttons, strip over the banner, dark card split, lede timeline, ruled accordion) ===== */

/* --- .page-hero--wash: the banner photo under a top-to-foot wash (82% ink at the top, solid at the foot) at full strength,
   instead of the side wash of the other banners --------------------------------------------------------------------- */
.page-hero--wash::after {
  background: linear-gradient(var(--scrim-page-hero-wash-top) 0%, var(--scrim-page-hero-wash-foot) 100%);
  opacity: 1;
}
.page-hero--wash::before { background-position: 50% 50%; }

/* --- .page-hero--center: the copy column (66%) centred in the banner, title and light sub-line centred, a row of buttons
   (.page-hero__actions) under them; 50px between the three. On a phone everything is left-aligned, as live. -------------- */
.page-hero--center { justify-content: center; }
@media (min-width: 1025px) {
  .page-hero--center .page-hero__copy { width: var(--page-hero-copy-w); gap: var(--page-hero-gap-center); }
}
.page-hero--center .page-hero__title { text-align: center; }
.page-hero--center .page-hero__text { width: 90%; padding-inline: 30px; font-weight: var(--fw-light); text-align: center; }
.page-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--page-hero-actions-gap); }

/* --- .btn--outline-on-dark: a clear pill with a white 1px edge and white label (with .btn--solid: same size, 2px taller) --- */
.btn--outline-on-dark { border: 1px solid var(--line-btn-on-dark); background: transparent; color: var(--on-dark); }
.btn--outline-on-dark:hover { border-color: var(--brand); background: var(--brand); color: var(--on-dark); }

/* --- .icon-strip--lead-icon: the strip whose first icon (the warning sign) is drawn at 40px (30px on a phone) ------------- */
.icon-strip--lead-icon .icon-strip__item:first-child .icon-strip__icon img { width: var(--size-strip-icon-lead); height: var(--size-strip-icon-lead); margin-top: 0; }

/* --- the strip rides up over the banner: the banner box keeps its live height and paints under the strip; the wrapper
   (flow-root, so the negative margin stays inside it) ends where the strip starts ---------------------------------------- */
[data-section="s01-a-uk-fulfilment-centre-b"] { display: flow-root; }
[data-section="s01-a-uk-fulfilment-centre-b"] > .page-hero {
  --hero-lift: var(--hero-lift-flush-25);
  --page-hero-pad-top: 22%;
  --page-hero-pad-bottom: 12%;
  margin-bottom: calc(var(--strip-lift-banner) * -1);
}

/* --- .split--card: a split drawn as a dark rounded card (copy | picture), the copy from the top, white lede ------------- */
.split--card {
  --split-cols: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 0;
  align-items: start;
  border: 1px solid var(--dark);
  border-radius: var(--card-roomy-radius);
  background: var(--dark);
}
.split--card > .split__copy { justify-content: flex-start; }
.split--card .split__text { color: var(--on-dark); }
.split--card .split__media img { width: 100%; height: var(--split-img-h, auto); object-fit: contain; }

/* --- .steps--lede: the timeline with a light lede under each title (20px under it) --------------------------------------- */
.steps--lede .steps__body { gap: var(--gap); }
.steps--lede .steps__text { font-size: var(--fs-section-body); font-weight: var(--fw-light); }

/* --- .accordion--rule: questions over a dark 1px rule, no top edge, the live plus sign (a bar once open) --------------- */
.accordion--rule { border-top: 0; }
.accordion--rule .accordion__item { border-bottom: 1px solid var(--line-accordion-rule); }
.accordion--rule .accordion__trigger {
  align-items: flex-start;
  gap: 0;
  padding: var(--pad-accordion-q) 0;
  font-size: var(--fs-accordion-q);
  font-weight: var(--fw-semi);
  line-height: var(--lh-accordion-q);
  text-wrap: wrap;   /* the base heading rule balances lines; a live question fills its line */
  color: var(--ink);
}
.accordion--rule .accordion__trigger:hover { color: var(--brand); }
.accordion--rule .accordion__icon { width: var(--size-accordion-icon); height: var(--size-accordion-icon); }
.accordion--rule .accordion__icon::before {
  inset: 0;
  height: auto;
  transform: none;
  -webkit-mask: var(--icon-accordion-plus) center / contain no-repeat;
  mask: var(--icon-accordion-plus) center / contain no-repeat;
}
.accordion--rule .accordion__icon::after { display: none; }
.accordion--rule .accordion__trigger[aria-expanded="true"] .accordion__icon::before {
  -webkit-mask-image: var(--icon-accordion-minus);
  mask-image: var(--icon-accordion-minus);
}
.accordion--rule .accordion__panel > div { color: var(--ink-lede); }

/* ---- overseas page: measured values per section (reference/uk-fulfilment-for-overseas-brands/) ----------------------- */
[data-section="s03-introduction"] > .split,
[data-section="s04-the-opportunity"] > .split,
[data-section="s12-free-guide"] > .split {
  --split-cols: minmax(0, 1fr) minmax(0, 1fr);
  --split-copy-end: 0px;
  --split-copy-gap: var(--gap);
  --page-pad-top-phone: 10%;
  --page-pad-bottom-phone: 10%;
  --page-row-gap-phone: var(--gap);
  --split-media-order-stacked: 0;
  --split-img-h: 550px;
  column-gap: var(--gap-split-col-wide);
}
[data-section="s03-introduction"] > .split { --page-pad-top: 7.04%; --page-pad-bottom: 5.28%; }
[data-section="s04-the-opportunity"] > .split,
[data-section="s12-free-guide"] > .split { --page-pad-top: 5.28%; --page-pad-bottom: 7.04%; }
[data-section="s03-introduction"] > .split,
[data-section="s04-the-opportunity"] > .split { --split-img-w: 521.7px; --ovs-img-inset: 19.65px; }   /* the picture centred in the live 561px image box */
[data-section="s12-free-guide"] > .split { --split-img-w: 550px; --ovs-img-inset: 0px; }
[data-section="s03-introduction"] > .split .split__media img,
[data-section="s04-the-opportunity"] > .split .split__media img,
[data-section="s12-free-guide"] > .split .split__media img { margin-inline: var(--ovs-img-inset) auto; }
[data-section="s12-free-guide"] .sec-title { max-width: 95%; }

[data-section="s05-what-s-included"] > .split { --split-pad: var(--split-twin-pad-y) var(--band-pad-inline) 70px; --twin-title-w: 86%; --twin-photo-w: 454.4px; --twin-photo-h: 500px; --twin-photo-fit: contain; }
[data-section="s05-what-s-included"] .split__copy--head { --split-copy-gap: var(--gap); }
[data-section="s05-what-s-included"] .split__photo { margin-top: 6px; }   /* 36px under the title, as the live spacers and the image's -54px pull leave it */
[data-section="s05-what-s-included"] .ticks--list li + li { margin-top: var(--space-tick-list-row-loose); }

[data-section="s06-delivery-speed"] > .split {
  --split-pad: 0 0 5.28%;
  --split-min-h: var(--split-min-h-live);
  --split-cols: 519.5px 633.6px;
  justify-content: center;
  column-gap: var(--gap-split-col-mid);
}
@media (min-width: 1025px) {
  [data-section="s06-delivery-speed"] > .split > .split__media { padding: 35px; }   /* the live picture keeps a 35px frame */
}

[data-section="s09-built-for-your-stage"] > .text-band { --text-band-pad-top: 110px; --text-band-pad-bottom: 0px; }
[data-section="s09-built-for-your-stage"] .text-band__title { width: 69%; margin-inline: auto; }

[data-section="s10-testing-the-uk-market"] .cards-outline--tiers {
  --cards-cols: 403.8fr 402.4fr 403.8fr;
  --cards-pad: var(--tier-pad-top) var(--band-pad-inline) var(--tier-pad-bottom);
  --cards-pad-phone: 0 9.5% 4.5%;
  --card-pad: var(--card-tier-pad);
  --card-text-weight: var(--fw-light);
}

[data-section="s11-cost-estimate"] > .cards-band { padding: 1.8% var(--band-pad-inline) 7.2%; }
[data-section="s11-cost-estimate"] .split--card { --split-pad: 76.8px 76.8px 0 calc(76.8px + 35px); --split-img-h: 500px; }   /* + 35px: the live spacer before the copy */

[data-section="s13-faq"] > .split { --split-pad: 4.5% var(--band-pad-inline); --twin-gap: var(--twin-gap-faq); }
[data-section="s13-faq"] .sec-title { max-width: 95%; }
[data-section="s13-faq"] .split__copy > .btn { align-self: flex-start; }

@media (min-width: 1025px) {
  /* the live title column is 814.6px and the stars 415.4px (the home band splits them evenly) */
  [data-section="s14-testimonials"] .testimonials-hero__title { flex: 814.6 1 0; }
  [data-section="s14-testimonials"] .star-rating { flex: 415.4 1 0; }
}

@media (max-width: 1024px) {
  [data-section="s01-a-uk-fulfilment-centre-b"] > .page-hero { margin-bottom: calc(var(--strip-lift-phone) * -1); }
  .icon-strip--lead-icon .icon-strip__item:first-child .icon-strip__icon img { width: var(--size-strip-icon-lead-phone); height: var(--size-strip-icon-lead-phone); }
  .split--card { row-gap: 30px; }
  [data-section="s06-delivery-speed"] > .split { --split-pad: 4.5% 9.5% 13.5%; }   /* stacked: the phone's inset (the desktop band has none at the sides) */
}
@media (max-width: 767px) {
  .page-hero--center .page-hero__copy { gap: var(--page-hero-gap-phone); }
  .page-hero--center .page-hero__title { margin-bottom: 20px; text-align: left; }
  .page-hero--center .page-hero__text { width: 100%; padding-inline: 0; font-size: var(--fs-section-body); text-align: left; }
  .page-hero--center .page-hero__actions { gap: 1px; padding: 20% 6% 0; }
  .accordion--rule .accordion__trigger { --pad-accordion-q: var(--pad-accordion-q-phone); font-size: var(--fs-accordion-q-phone); line-height: var(--lh-accordion-q-phone); }
  .accordion--rule .accordion__icon { width: var(--size-accordion-icon-phone); height: var(--size-accordion-icon-phone); }

  [data-section="s03-introduction"] > .split,
  [data-section="s04-the-opportunity"] > .split { --split-img-w: 93%; --ovs-img-inset: 11.4px; }   /* live (uk, the two 93% x 550px cover pictures): 93% of the cell, not the 390 capture's 303.2px */
  [data-section="s12-free-guide"] > .split { --split-img-w: 100%; }
  [data-section="s05-what-s-included"] > .split { --split-pad: var(--band-pad-y-phone) 5%; --twin-photo-w: 71%; }   /* live (uk, element width 71% x 500px contained): 71% of the cell, not the 390 capture's 249.2px */
  [data-section="s05-what-s-included"] .eyebrow--section { text-align: center; }
  [data-section="s08-step-1"] { display: none; }   /* the live timeline is not shown on a phone */
  [data-section="s10-testing-the-uk-market"] .cards-outline--tiers { --card-pad: var(--card-tier-pad-phone); }
  [data-section="s11-cost-estimate"] > .cards-band { padding: 3.5px 9.5% 4.5%; }
  [data-section="s11-cost-estimate"] .split--card { --split-pad: var(--card-tier-pad-phone); }
  [data-section="s13-faq"] > .split { --split-pad: 8% 14%; row-gap: 44.03px; }
}

/* ===== OVERSEAS:END ===== */

/* ===== ART-INSET:BEGIN  (per-page tuning: two article bodies live nests inside an Elementor container with a side inset) ===== */

/* subscription-box-fulfilment-3pl and golden-quarter-fulfilment-planning-summer: the live post content holds a nested container
   (.e-con-inner, margin 0 35px with max-width min(100%, 1280px) on desktop; margin 0 17.5469px with max-width 90% on a phone), so the text column is
   1280px / 315.9px wide where every other article's is 1350px / 351px. Measured 10 Oct 2026 (reference/<page>/s02-*). The two pages are marked
   "nested" in templates/article-variants.json; build:articles stamps that as data-article-variant="nested" on the s02-body wrapper, the hook
   these rules key on. */
.article__inner { padding-inline: var(--article-inset, 0px); }
[data-section="s02-body"][data-article-variant="nested"] .article__inner { --article-inset: var(--article-inset-nested); }
@media (max-width: 767px) {
  [data-section="s02-body"][data-article-variant="nested"] .article__inner { --article-inset: var(--article-inset-nested-phone); }
}

/* ===== ART-INSET:END ===== */

/* ===== PHONE-FRAC:BEGIN  (sub-pixel tuning) ===== */
/* home on a phone: the rebuild's header ends at 116.50px where the live page's ends at 117 and the whole page is 1px short (23386 against 23387), so
   later sections sit high and from y~6750 the text rows round one pixel high (a constant +1px on the live side in the row-shift analysis). Tested at
   .25 / .5 / .75 / .9 / 1px: 6.12 / 5.21 / 4.48 / 4.13 / 4.09%; the whole pixel also makes the page height equal. */
@media (max-width: 399px) {   /* home, below 400px only: the 390 capture rounds the header end (116.5px) up to 117px, so the hero is lifted 1px; at 430 the rows already agree; protects home 390 at 4.47 */
  [data-section="hero"] { padding-top: var(--home-phone-frac); }
}
/* ===== PHONE-FRAC:END ===== */