@charset "utf-8";
/* ==========================================================================
   DESIGN TOKENS  (formerly section 2 of site.css)

   The ONLY file that holds raw colour values. Load it BEFORE site.css:
     <link rel="stylesheet" href="/assets/css/tokens.css?v=...">
     <link rel="stylesheet" href="/assets/css/site.css?v=...">

   House rules this file implements
     CS-CSS-1  no raw colour literals in component styles — only here.
     CS-CSS-2  a token's value is never re-typed as a literal elsewhere.
     CS-CSS-3  one visual role = one token; no near-duplicates.
     CS-CSS-5  this file is not exempt: ONE palette layer in which every
               literal value appears exactly once, and a semantic layer that
               only ever references the palette with var(--…).
     CS-PRIN-2 each invariant is asserted once, at the lowest layer that owns it.
   Acceptance test: the whole site can be re-themed by editing only this file.

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

:root {

  /* ======================================================================
     PALETTE — raw values, named by hue and shade. Nothing else in the site
     refers to these directly: components use the semantic layer below.
     ====================================================================== */

  /* neutrals */
  --white:    #ffffff;
  --black:    #000000;
  --grey-900: #222222;
  --grey-700: #444444;
  --grey-500: #777777;
  --grey-200: #e2e2e2;
  --grey-100: #f2f2f2;
  --grey-75:  #f7f7f7;
  --grey-150: #e9e9e9;   /* the free-guide embed band (RES) */
  --slate-700: #3f444b;
  --cream-50:  #fff7f1;

  /* brand pink */
  --pink-700: #b33f93;
  --pink-600: #ca2c92;
  --pink-200: #f8c3d0;

  /* status */
  --red-600:   #c0392b;
  --red-200:   #f3c9c6;
  --green-700: #1e7a4d;
  --green-200: #bfe3cd;
  --green-50:  #eaf6ee;

  /* translucent black (shadows, scrims, hairlines) */
  --alpha-black-08: rgba(0, 0, 0, .08);
  --alpha-black-10: rgba(0, 0, 0, .10);
  --alpha-black-12: rgba(0, 0, 0, .12);
  --alpha-black-19: rgba(0, 0, 0, .19);

  /* translucent white (glass, hairlines on dark) */
  --alpha-white-92: rgba(255, 255, 255, .92);

  /* translucent near-black (photographic scrims) */
  --alpha-grey-900-00: rgba(34, 34, 34, 0);

  /* translucent brand */
  --alpha-pink-08: rgba(202, 44, 146, .08);

  /* translucent greys and navy (glass cards, form fields, field text) */
  --alpha-black-47:     rgba(0, 0, 0, .47);
  --alpha-black-50:     rgba(0, 0, 0, .50);
  --alpha-grey-550-20:  rgba(105, 105, 105, .20);
  --alpha-grey-300-48:  rgba(192, 192, 192, .48);
  --alpha-grey-75-07:   rgba(247, 247, 247, .07);
  --alpha-navy-21:      rgba(1, 22, 64, .21);
  --alpha-navy-47:      rgba(1, 22, 64, .47);
  --alpha-grey-500-07:  rgba(128, 128, 128, .07);   /* table stripe (ART) */


  /* ======================================================================
     SEMANTIC — named by role. This is the layer site.css uses.
     ====================================================================== */

  /* --- brand ------------------------------------------------------------ */
  --brand:        var(--pink-600);   /* dominant accent — 2 984 occurrences live */
  --brand-dark:   var(--pink-700);   /* hover / pressed                          */
  --brand-light:  var(--pink-200);   /* soft accent                              */
  --brand-wash:   var(--alpha-pink-08);

  /* --- text ------------------------------------------------------------- */
  --ink:           var(--grey-900);   /* body text                               */
  --ink-strong:    var(--black);      /* display headings                        */
  --ink-soft:      var(--grey-500);
  --ink-slate:     var(--slate-700);
  --ink-print-link: var(--grey-700);  /* printed URL after a link                */

  /* --- surfaces --------------------------------------------------------- */
  --surface:       var(--white);
  --surface-warm:  var(--cream-50);
  --surface-alt:   var(--grey-75);
  --surface-alt2:  var(--grey-100);
  --surface-glass-strong: var(--alpha-white-92);   /* play button over video          */
  --media-backdrop:       var(--black);            /* letterbox behind video          */

  /* --- dark sections and text on dark / coloured fills ------------------- */
  --dark:          var(--grey-900);   /* dark sections                           */
  --on-dark:       var(--white);      /* text/icon on a dark or brand fill       */
  --on-dark-quote: var(--grey-200);   /* quotation text on dark cards            */

  /* --- lines ------------------------------------------------------------ */
  --line:               var(--alpha-black-10);

  /* --- status ----------------------------------------------------------- */
  --danger:       var(--red-600);
  --danger-line:  var(--red-200);
  --success:      var(--green-700);
  --success-wash: var(--green-50);
  --success-line: var(--green-200);

  /* --- scrims and halos (photographic overlays) -------------------------- */
  --scrim-cta-band-start: var(--alpha-black-47);  /* footer contact band, lower edge */
  --scrim-cta-band-end:    var(--black);            /* footer contact band, upper edge */
  --glass-card:         var(--alpha-grey-550-20);   /* frosted card on the footer photo */
  --line-field-glass:   var(--alpha-grey-300-48);   /* field border on the frosted card */
  --fill-field-glass:   var(--alpha-grey-75-07);    /* field fill on the frosted card   */
  --line-field-light:   var(--alpha-navy-21);       /* newsletter field border          */
  --text-field-light:   var(--alpha-navy-47);       /* newsletter field text            */

  /* --- shadows ---------------------------------------------------------- */
  --shadow-soft:   0 4px 18px var(--alpha-black-08);
  --shadow-drop:   0 12px 22px var(--alpha-black-12);   /* open nav dropdown     */
  --shadow-header-pill: 0 0 30px -15px var(--alpha-black-50);   /* the floating header pill  */
  --shadow-card-float:  0 0 37px -9px var(--alpha-black-50);    /* newsletter card in the footer */

  /* --- header geometry: the live RULES (recovered 11 Oct 2026, reference/live-rules-2026-10-11.md), not their 1440 results --- */
  --header-pill-w:  1269px;   /* the pill is a flex child with --width:1269px that shrinks inside its row: never wider than this, never wider than the window */
  --header-pad-top: 1.75%;    /* space above the pill, a share of the page width (templated pages; the home page keeps its own 32px) */
  --header-bar-h-phone:        100px;    /* live phone header bar (post-85 327ef053 --min-height 100px) */
  --header-pad-phone:          10px;     /* live: the pill's padding on a phone (44cf4b85, 10px all round) */
  --header-toggle-size:        45px;     /* the menu button box (a 45px target; its column, 10% of the inner width, is narrower so it overhangs) */
  --header-home-h-phone:       65px;     /* live home phone header (post-21 5e58dbca): 65px tall */
  --header-home-pad-phone:     0 5vw;    /* live: 5% of the page width at the sides (container padding at <= 1024px) */
  --header-home-brand-col-phone: 31%;    /* live home phone header (post-21): the logo column is 31% of the inner width (108.8px at 390, 120px at 430) */
  --header-home-right-phone:   2.7vw;    /* the second column is 66%, so 3% of the inner width (90% of the page) stays clear at the right (10.5px at 390, 11.6px at 430) */
  --header-home-gap-phone:     20px;     /* live: the gap between the menu button and the contact button */
  --footer-brand-pad-phone:    4.5vw 9vw 0 0;   /* live phone footer brand column (post-779): 5% above and 10% on the right of its 90% column */
  --footer-links-mt-phone:     10px;     /* pre-existing measured value, moved here: space above the contact and links columns */
  --footer-links-pad-phone:    0 9vw 0 0;       /* live: padding-right 10% of the 90% column (post-779 21838b08 / 7dfdb92c) */
  --header-brand-col-phone:    50%;      /* live phone header (post-85 container 6622f736): the logo column is half the pill's inner width (185px at 390, 205px at 430) */
  --header-logo-share-phone:   60%;      /* live: the logo is 60% of its column (111px at 390, 123px at 430) */
  --header-menu-col-phone:     10%;      /* live: the menu column (296a34df) is a tenth of the inner width (37px at 390); the 45px button overhangs it */
  --header-cta-inset-phone:    calc(4% - 4px);   /* live: the three columns are 50% + 10% + 36% of the inner width with 2px gaps, so the button's right edge is 4% of the inner width, less the 4px of gaps, inside it (11px at 390, 12px at 430) */

  /* --- the footer "Get in touch" band: the live rules (Elementor 3beb1c35, post 1623) --- */
  --footer-cta-min-h:       100vh;    /* at least the window's height */
  --footer-cta-pad:         5% 5% 13%;/* of the page width (desktop) */
  --footer-cta-pad-tablet:  10% 5%;   /* 768-1024 */
  --footer-cta-pad-phone:   15% 5%;   /* phones (58.5px 19.5px at 390): the home and phone band is the same component */
  --cta-band-min-h-phone:    973px;    /* MEASURED CONTENT HEIGHT, not the live rule (live: min-height 100vh = 844px, which its own content outgrows to 973px); the rebuild's content is shorter, so the band is held to the live height */

  /* --- typography -------------------------------------------------------- */
  --font: "Outfit", sans-serif;   /* same fallback as the live site, so a missing webfont lands on the same face */

  --fs-body:   1.1rem;    /* 17.6px — the real base size on the live site */
  --fs-sm:     .9375rem;  /* 15px  */
  --fs-xs:     .6875rem;  /* 11px  */
  --fs-md:     1.25rem;   /* 20px  */
  --fs-lg:     1.5625rem; /* 25px  */
  --fs-xl:     2rem;      /* 32px  */
  --fs-3xl:    3.125rem;  /* 50px  */
  --fs-4xl:    4rem;      /* 64px  */

  /* sizes measured on specific components — each a distinct rendered value */
  --fs-base:        1rem;       /* 16px  — large button, testimonial quote   */
  --fs-btn-sm:      .875rem;    /* 14px  — small button                       */
  --fs-caption:     .8125rem;   /* 13px  — field hint, field error, footer small print */
  --fs-cta-mobile:  .8rem;      /* 12.8px — header button on phones           */
  --fs-cta-card:    2.0625rem;  /* 33px  — title of the footer contact card   */
  --fs-news-title:  2.4375rem;  /* 39px  — title of the footer newsletter card */
  --fs-field:       1.125rem;   /* 18px  — footer contact form fields         */
  --fs-tick-label:  1.2rem;     /* 19.2px — footer tick list                  */
  --fs-xl-sm:       1.75rem;    /* 28px  — badge figure, large quote          */
  --fs-lg-plus:     1.5rem;     /* 24px  — service card title, timeline title on tablet, star */
  --fs-tl-num:      2.25rem;    /* 36px  — timeline number, desktop           */
  --fs-person:      1.2rem;     /* 19.2px — testimonial person                */
  --fs-role:        .9rem;      /* 14.4px — testimonial role                  */
  --fs-print-body:  11pt;       /* printed body text  */
  --fs-print-small: 9pt;        /* printed link URL   */

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-body:   1.6;
  --opacity-placeholder: .6;   /* placeholder text on the frosted footer form */
  --lh-field:  1.4;       /* form fields             */
  --lh-list:   1.5;       /* tick list               */
  --lh-text-relaxed: 1.8; /* footer small text       */

  --ls-tight:  -.02em;
  --ls-wide:   .14em;     /* eyebrow labels                               */

  --fw-light:  300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;
  --fw-black:  900;

  /* --- space scale ------------------------------------------------------- */
  --sp-2:  .5rem;
  --sp-3:  .75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;

  /* --- layout ------------------------------------------------------------ */
  --container:     1280px;   /* measured: inner width at 1440 viewport      */
  --container-wide: 1372px;
  --gap:           1.25rem;  /* measured from the original: 20px gutter      */
  --gap-xwide:     3.125rem; /* measured: 50px                              */

  /* --- section rhythm (measured) ----------------------------------------- */

  /* --- form -------------------------------------------------------------- */
  --radius-xs: 3px;      /* merges the former 3px and .2rem (3.2px) literals — 0.2px apart */
  --radius-sm: 6px;
  --radius:    11px;
  --radius-lg: 20px;
  --radius-pill: 100px;
  --radius-circle: 50%;

  --ease: cubic-bezier(.4, 0, .2, 1);

  /* ======================================================================
     HOME PAGE TOKENS — one region per owner, role-named. Edit only inside your own pair.
     ====================================================================== */

  /* ===== HOME:A:BEGIN ===== */
  /* palette additions (measured on the live hero, strip and get-in-touch band) */
  --alpha-grey-880-20:   rgba(36, 36, 36, .20);
  --alpha-grey-900-36:   rgba(34, 34, 34, .36);
  --alpha-black-30:      rgba(0, 0, 0, .30);

  /* hero: the film's dark wash, the frosted quote card over it, the icon strip's float shadow */
  --scrim-hero-film-start: var(--alpha-grey-900-36);   /* hero film wash, top edge    */
  --scrim-hero-film-end:   var(--grey-900);            /* hero film wash, bottom edge */
  --glass-quote-hero:      var(--alpha-grey-880-20);   /* frosted quote card over the hero film */
  --shadow-icon-strip:     0 0 40px 6px var(--alpha-black-30);

  /* type sizes measured on the hero, strip and band */
  --fs-hero-title-phone:   2.5rem;     /* 40px  - hero headline on phones   */
  --fs-strip-label:        1.2rem;     /* 19.2px - icon strip label, desktop */

  /* geometry */
  --radius-strip:          30px;       /* icon strip box                       */
  --size-strip-icon:       80px;       /* icon strip dark circle, desktop      */
  --size-strip-icon-phone: 60px;       /* icon strip dark circle, phones       */
  --hero-min-h:            100vh;      /* live rule (Elementor 760aaa9d): the hero is at least the window's height, desktop and phone */
  --hero-copy-pad-phone:   20vw 6vw 0;   /* live phone hero copy (container 3b1aa3e3): 20% above, 6% at the sides of the page width (78px / 23.4px at 390, 86px / 25.8px at 430) */
  --hero-form-pad-phone:   12vw 6vw;     /* live phone hero form (container 1f7205f9): 12% / 6% of the page width */
  --hero-margin-top:       calc(120px - 8%);   /* live rule: margin-top -8% of the page width, from a fixed 120px start (4.8px at 1440); 0 on tablet and phone */
  --hero-pad-top:          13%;        /* live rule: padding 13% 0 6% of the page width, desktop and phone */
  --hero-pad-bottom:       6%;
  --hero-spacer:           120px;      /* empty band the live hero keeps under its film */
  --strip-lift:            40px;       /* how far the icon strip rides up over that band (desktop) */
  --strip-lift-phone:      150px;      /* the same on phones                   */
  /* ===== HOME:A:END ===== */

  /* ===== HOME:B1:BEGIN ===== */
  /* palette-layer literals for the split / badge / ticks family */
  --alpha-black-61: rgba(0, 0, 0, .61);          /* lede text on the live sections */
  --alpha-pink-38:  rgba(202, 44, 146, .38);     /* frosted badge fill             */

  /* semantic */
  --ink-lede:         var(--alpha-black-61);     /* light body copy under a section title */
  --fill-badge-glass: var(--alpha-pink-38);      /* round "20+" badge over a photo        */
  --blur-badge-glass: 10px;                      /* backdrop blur behind the badge        */

  /* type — a section sets its own em base: 17.6px desktop, 14.4px phone (see site.css region) */
  --fs-section:        1.1rem;                   /* section base (eyebrow, badge label, padding em) */
  --fs-section-body:   1.1rem;                   /* lede copy stays 17.6px on phones too            */
  --fs-sec-title:      var(--fs-4xl);            /* 64px; phone value set in site.css region        */
  --fs-badge-figure:   4.0625rem;                /* 65px "20+"                                       */

  /* shape and rhythm */
  --radius-photo:      3.125rem;                 /* 50px — rounded photograph                        */
  --space-para:        .9rem;                    /* 14.4px — paragraph margin inside a lede           */
  --gap-split-col:     1.875rem;                 /* 30px — between the two columns of a split          */
  --gap-split-stack:   3.125rem;                 /* 50px — between stacked halves of a split on a phone */
  --gap-copy:          .9375rem;                 /* 15px — between title, lede and list in a split copy */

  /* tick list icon: Font Awesome "check-square" as a mask, painted with currentColor */
  --icon-tick-square: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M400 480H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48zm-204.686-98.059l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.248-16.379-6.249-22.628 0L184 302.745l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.25 16.379 6.25 22.628.001z'/%3E%3C/svg%3E");
  /* ===== HOME:B1:END ===== */

  /* ===== HOME:B2:BEGIN ===== */
  /* titles */
  --fs-sec-title-small:   var(--fs-lg);          /* 25px  — "We started small" heading            */
  --lh-sec-title-small:   1.2;                   /* 30px at 25px                                  */
  --fs-sec-title-mid:     3.625rem;              /* 58px  — "Our Facility"; phone value in site.css */

  /* plain check list (facility credentials): Font Awesome "check" as a mask */
  --icon-tick-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E");
  --tick-check-size:        1.8125rem;           /* 29px icon                                     */
  --tick-check-size-phone:  1.5625rem;           /* 25px icon on a phone                          */
  --tick-check-gap:         1.203125rem;         /* 19.25px: icon margin 7.25 + 7 pad + 5 text pad */
  --tick-check-gap-phone:   1.140625rem;         /* 18.25px on a phone                            */
  --fs-tick-label-lg:       1.125rem;            /* 18px  — facility credential label             */
  --space-tick-row:         1.375rem;            /* 22px  — between credential rows               */
  /* ===== HOME:B2:END ===== */

  /* ===== HOME:C:BEGIN ===== */

  /* outlined cards: shared */
  --card-outline-edge:        var(--brand);       /* outline and heading colour   */
  --card-outline-copy-strong: var(--black);       /* body copy on the compact card */

  /* outlined cards: roomy (services) */
  --card-roomy-radius:        var(--radius-lg);   /* 20px */
  --card-roomy-pad:           2.7vw;              /* live rule: 3% of the 90% row, i.e. 2.7% of the page width (38.9px at 1440); vw because a grid item resolves % against its own cell */
  --card-roomy-pad-mobile:    4.5vw;              /* live phone card padding: 3% of the 90% row, a share of the phone width (17.55px at 390, 19.35px at 430) */
  --card-roomy-title:         2.5rem;             /* 40px  */
  --card-roomy-title-mobile:  var(--fs-xl-sm);    /* 28px  */
  --card-roomy-quote:         var(--fs-tl-num);   /* 36px  */
  --card-image-opacity:       .22;                 /* photo strength under the pink wash */

  /* outlined cards: compact (features) */
  --card-compact-radius:      10px;
  --card-compact-edge-width:  3px;
  --card-compact-pad:         1.875rem;           /* 30px */
  --card-compact-title:       1.8rem;             /* 28.8px */
  --card-compact-title-mobile: var(--fs-xl);      /* 32px */
  --card-compact-text:        var(--fs-tick-label); /* 19.2px */

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

  /* ===== HOME:D:BEGIN ===== */
  /* palette additions (raw values live only in this file) */
  --alpha-black-24: rgba(0, 0, 0, .24);

  /* roles for the process band and the technology section */
  --steps-rule:        var(--grey-500);          /* vertical rule through the numbered steps (live rgb 119) */
  --line-media-card:   var(--alpha-black-19);    /* hairline along the top of a media card */
  --shadow-media-card: 0 0 13px 0 var(--alpha-black-24);  /* the framed card on phones */

  --fs-step:             3.5rem;      /* 56px — step number and step title, desktop */
  --fs-step-label-phone: 1.4375rem;   /* 23px — "Step n" on phones */
  --fs-step-title-phone: 1.6875rem;   /* 27px — step title on phones */
  --opacity-watermark: .07;           /* faint brand-coloured network pattern behind the technology heading */
  --fw-extra: 800;                    /* "Step n" on phones */
  /* ===== HOME:D:END ===== */

  /* ===== HOME:E:BEGIN ===== */
  /* since, stats, testimonials — values read from the live computed styles, 10 Oct 2026 */
  --fs-star-rating:        1.875rem;   /* 30px  — testimonial header stars, desktop */
  --fs-star-rating-phone:  1.5rem;     /* 24px  — the same stars on a phone */
  --fs-quote-card-name-phone: 1rem;    /* 16px  — name on a quote card, phone */
  --fs-quote-card-role-phone: .8rem;   /* 12.8px — role on a quote card, phone */
  --radius-panel:          15px;       /* video frame and stat card */
  --radius-quote-card:     30px;
  --since-pad:             5% 5% 0;    /* live rule: padding 5% 5% 0 of the page width (10% 5% 0 on phones) */
  --since-pad-phone:       10% 5% 0;
  --gutter-phone:          5vw; /* 19.5px — side inset on a phone */
  --gap-since:             3.125rem;   /* 50px — between the heading row and the video; and between the testimonial header columns */
  --stat-cards-max:        1295.4px;   /* three cards of 30% of 1406 plus two 15px gaps */
  --quote-cards-col:       32.2%;      /* each masonry column, space-between in 1280px */
  --testimonials-hero-h:       70vh;      /* live rule: --min-height:70vh (52vh on phones) */
  --testimonials-hero-h-phone: 52vh;
  --steps-item-min-h:          43vh;      /* live rule: each step row of the process list is at least 43% of the window's height (387px at 900) */
  --media-cards-min-h:         100vh;     /* live rule on the home technology cards: at least the window's height (75vh on tablets and phones) */
  --media-cards-min-h-phone:   75vh;
  --feature-band-min-h-phone:  100vh;     /* live rule: the feature band is at least the window's height on phones */
  --testimonials-fade-h:       600px;  /* bottom fade laid over the last quote cards */
  --testimonials-fade-top:     607px;
  --rule-heading:          var(--alpha-black-19);   /* short hairline above the "since" heading */
  --scrim-photo-clear:     var(--alpha-grey-900-00);
  --scrim-photo-solid:     var(--black);
  --surface-stat-card:     var(--surface-alt);
  --surface-quote-card:    var(--grey-900);
  /* ===== HOME:E:END ===== */

  /* ===== FRAME:BEGIN ===== */
  /* page banner (.page-hero): measured on the seven services-family pages, 1440 and 390 wide */
  --page-hero-pad-top:       18%;        /* of the banner width: space above the copy block                      */
  --page-hero-pad-bottom:    7%;         /* of the banner width: space under it                                  */
  --page-hero-copy-w:        66%;        /* copy column, film banner (the image banner is wider, see site.css)   */
  --page-hero-copy-w-image:  79%;        /* copy column, image banner                                            */
  --page-hero-copy-pad:      5% 5% 0 9%;     /* inside the copy column: live rule, shares of the page width (72px at 1440)                   */
  --page-hero-copy-pad-phone: 20% 6% 0;      /* the same on a phone: live rule (78px at 390)                    */
  --page-hero-gap:           24px;       /* between title, sub-line and button                                   */
  --page-hero-gap-phone:     1px;
  --page-hero-min-h-phone:   400px;      /* the banner box (header bar excluded) is never shorter than this      */
  --header-zone-phone:       calc(100px + 5vw);   /* live phone header (post-85 327ef053): the 100px bar plus a margin-bottom of 5% of the page width (119.5px at 390, 121.5px at 430) */
  --fs-page-hero-title:      var(--fs-4xl);          /* 64px / 1.1 / weight 900 on desktop                       */
  --fs-page-hero-title-phone: var(--fs-hero-title-phone);   /* 40px / 1.1 on phones                              */
  --fs-page-hero-text-phone: .9rem;                  /* 14.4px - banner sub-line on phones                       */
  --fill-film-fallback:      #3a3a3c;              /* mean tone of the live banner film frames (the film is not shipped); the wash sits over it */
  --scrim-page-hero-side:    var(--scrim-photo-clear);   /* banner wash, right edge (clear)                      */
  --scrim-page-hero-side-end: var(--dark);               /* banner wash, solid from 67% across, left              */
  --scrim-page-hero-strength: .9;                       /* how much of that wash shows over the photo / film      */
  /* icon strip as a band between page sections */
  --strip-band-pad-top:      50px;
  --strip-band-pad-bottom:   80px;       /* 50px band padding plus the 30px the live container keeps under the box */
  --strip-band-pad-bottom-phone: 50px;
  --strip-band-pad-top-phone: 0px;
  --fs-strip-value-sm-phone: 1.3rem;     /* 20.8px - strip figure on phones on the pages that set it smaller    */
  /* strip as a dark 2 x 2 panel beside a card (.card-panel-row + .icon-strip--panel) */
  --card-panel-card-share:   .327;       /* card column, share of the row width left after the gap               */
  --card-panel-pad:          1% 5% 10%;   /* live rule, services cross-border row: shares of the page width */
  --card-panel-pad-phone:    0 var(--gutter-phone) var(--gutter-phone);
  --card-panel-gap-phone:    20px;
  --size-panel-icon:         57.8px;     /* bare icon, desktop (the first one is --size-panel-icon-lead)          */
  --size-panel-icon-lead:    68px;
  --size-panel-icon-phone:      43.3px;
  --size-panel-icon-lead-phone: 51px;
  --fs-strip-lead-phone:     1.2rem;     /* 19.2px - first figure in the panel on phones                          */
  /* intro text band (.text-band): a centred heading over paragraphs */
  --text-band-pad-top:       110px;
  --text-band-pad-bottom:    120px;
  --text-band-gap:           20px;       /* between eyebrow, title, text                                         */
  --text-band-copy-w:        89%;        /* text column, share of the 1280px inner width                         */
  --text-band-text-pad:      30px;
  --text-band-arrow-h:       58.2px;     /* the empty height the live arrow icon keeps (icon font not captured)  */
  --text-band-arrow-h-phone: 57px;
  --text-band-fade-stop:     81%;        /* where the white-to-grey band wash ends                               */
  /* ===== FRAME:END ===== */

  /* ===== SVC:S1:BEGIN ===== */
  /* service link card (.card-outline--link): title, copy, button */
  --card-link-body-gap:       3.125rem;           /* 50px between title and copy (20 + 10 spacer + 20 live)      */
  --card-link-body-gap-tight: 2.5rem;             /* 40px, the Cross-Border card (heading straight over copy)    */
  --card-link-gap:            2.5rem;             /* 40px between the copy and the button                        */
  --card-link-row-pad:        1%;          /* half the grid's row gap above and below a row of link cards */
  --cards-gap-default:         2vw 2.1875rem;  /* live: rows 2% of the page width apart (28.8px at 1440, 38.4px at 1920), columns a fixed 35px (home services containers 3d137cd8 / 2d51d78) */
  --cards-pad-default:        5%;             /* the card grid's own padding (live: 5% of the page width on every services band) */
  --cards-pad-default-phone:  10% 5%;         /* the same on a phone (39px 19.5px at 390) */
  /* the process overview's timeline (.steps--detailed) and the dark bands around it */
  --steps-detailed-cols:      22.7% 1fr 42.87%;   /* label | rule | title and copy (207.7 / 915 and 392.3 / 915)   */
  --fs-step-detailed:         2.6875rem;          /* 43px: step title over its paragraph                          */
  --fs-step-text:             1.05rem;            /* 16.8px: step paragraph                                       */
  --steps-head-pad-top:       120px;              /* dark heading band, above the eyebrow                         */
  --steps-cta-pad-bottom-phone: 190px;            /* button band, phone                                           */
  --card-stack-pad:           1.1992rem;          /* 19.1875px: padding of a card in a stack beside copy          */
  /* ===== SVC:S1:END ===== */

  /* ===== SVC:S2:BEGIN ===== */
  --split-list-indent:        40px;       /* bullet list inside a split lede (receiving and storage)             */
  /* ===== SVC:S2:END ===== */

  /* ===== SVC:SHARED:BEGIN  (roles the services-family pages share: one token per role, whoever first needed it) ===== */
  /* bands */
  --band-pad-side:            80px;       /* side padding of a full-width band (text band, icon strip band, title-and-body band) on every width the band is not stacked */
  --band-pad-inline:          max(var(--band-pad-side), calc((100% - var(--container)) / 2));   /* the same, or centred in the 1280px container on a wider screen */
  --band-pad-y-phone:         40px;       /* top and bottom padding of a text band or a title-and-body band on a phone */
  --band-title-inset:         100px;      /* a band's centred heading is inset this far each side on desktop      */
  --split-twin-pad-y:         100px;      /* top and bottom of a title-and-body band                             */
  --split-page-media-w:       49.52%;     /* page split: media column, share of the content width (627.5px of 1267.2px) */
  --split-page-media-w-start: 45.25%;     /* the same column when the picture is on the left (573.4px of 1267.2px)       */
  --split-page-copy-pr:       5cqw;       /* clear space on the copy's inner edge: 5% of the band's content box (63.36px at 1440) */
  /* pictures */
  --radius-photo-soft:        10px;       /* the lightly rounded photograph (.img-photo--soft): logos, screenshots, page photos */
  /* the short brand rule under a title (.accent-bar) */
  --size-accent-bar-h:        4px;
  --size-accent-bar-w:        5%;         /* share of its column: 32px on desktop, 17.5px on a phone              */
  --space-accent-bar:         2px 0 22px; /* under the title's own 10px: 12px over, 22px under, as the live divider is built */
  /* roomy tick list (.ticks--list) */
  --size-tick-list:           20px;       /* check icon                                                            */
  --gap-tick-list:            10px;       /* icon to label                                                         */
  --space-tick-list-row:      23px;       /* 11.5px under one row plus 11.5px over the next                        */
  --lh-tick-list:             1.1;
  --offset-tick-list-icon-phone: 3px;     /* the live icon sits 3px low against a wrapped phone label              */
  /* outlined cards in a services band */
  --card-grid-gap:            35px;       /* between the cards of a row of four-across or icon cards, and between a card and the figures panel */
  --card-title-band:          2.1875rem;  /* 35px title (the home cards use 40px): link, four-across and flow cards, cards in a stack */
  --card-title-band-phone-sm: 1.6875rem;  /* 27px: a title the live page sets a point smaller than the others on a phone */
  --card-4up-pad:             5% 5% 8%;   /* live: shares of the page width (72px 72px 115.2px at 1440) */
  --card-4up-pad-phone:       0 var(--gutter-phone) 14vw;   /* live (inventory, element 208372e): the band pads 5% under its cards and the last card keeps margin-bottom 9% */
  --card-icons-title:         1.875rem;   /* 30px: title of a card that carries an icon                          */
  --card-icons-title-phone:   var(--fs-md);
  --cards-icons-pad:          5% 5% 2%;   /* live: shares of the page width */
  --cards-icons-pad-phone:    10vw var(--gutter-phone) var(--gutter-phone);
  --size-card-icon:           50px;
  --card-icon-lead:           8.2px;      /* the line box the live icon widget keeps under a 50px icon           */
  --card-icon-lead-phone:     7px;
  --card-flow-title-w:        80%;        /* flow cards: the live heading widget is 80% of the card on desktop   */
  /* ===== SVC:SHARED:END ===== */

  /* ===== ART:BEGIN  (article family: banner, body, Related Posts band, closing strip; measured on four live articles, 10 Oct 2026) ===== */
  /* banner (.page-hero--article) */
  --hero-lift-default:          calc(17.25vw - 199.9px);   /* the banner every services-family page opens with: live margin-top -24% of the page width, less the header and the 112px the live column keeps above it (48.5px at 1440, 131px at 1920) */
  --hero-lift-flush:            calc(17.25vw - 87.9px);    /* the same banner on templates with no 112px above it (policy pages, warehouse-management; 160.5px at 1440) */
  --hero-lift-flush-25:         calc(18.25vw - 87.9px);    /* live margin-top -25% on the overseas-brands banner, no 112px above it (post-4853 container b27bc30; 175px at 1440, 262.5px at 1920) */
  --services-hero-lift:         calc(18.25vw - 199.9px);   /* the /services/ banner: margin-top -25% of the page width, less the header and the 112px the live column keeps above it (62.9px at 1440, 150.5px at 1920) */
  --article-hero-lift:          calc(11.25vw - 87.9px);   /* the live banner box starts this far above the page top: its margin-top is -18% of the page width, less the header's 1.75% + 5% + the pill (74.1px at 1440, 128px at 1920); vw because it also offsets a pseudo-element, where % would mean height */
  --article-hero-copy-min-h:    calc(90vh - 25vw);   /* live rule: the banner is at least 90% of the window's height; the title column fills it between the banner's paddings (18% + 7% of the page width): 450px at 1440 x 900 */
  --article-hero-copy-pad:      0 5% 0 9%;/* title column: no top padding (the services banners carry 72px)         */
  --article-hero-title-w:       80%;      /* the h1 is an 80%-wide widget                                           */
  --article-hero-title-mb-phone: 50px;    /* under the title on a phone                                             */
  /* body (.article) */
  --article-pad-top:            80px;
  --article-pad-bottom:         40px;
  --article-pad-side:           45px;     /* the live 1350px column's margin at 1440                                */
  --article-pad-top-phone:      60px;
  --article-pad-side-phone:     5%;       /* 19.5px at 390                                                          */
  --article-inner-w:            1350px;
  --fs-article-body:            1.125rem; /* 18px — the post body runs larger than the 17.6px base                  */
  --lh-article-body:            28.16px;  /* the 17.6px base line (1.6) the live body inherits, not recomputed      */
  --lh-article-body-phone:      23.04px;  /* 14.4px x 1.6 on the live phone page                                    */
  --article-p-gap:              .8em;     /* 14.4px under a paragraph                                               */
  --fs-article-link:            1.1rem;   /* 17.6px — a link runs at the live base size, inside the 18px body       */
  --fs-article-link-phone:      .9rem;    /* 14.4px — the live phone base (the site's own phone base is 16px)       */
  --fs-article-h2:              1.9375rem;/* 31px                                                                   */
  --fs-article-h3:              var(--fs-lg);   /* 25px                                                             */
  --lh-article-heading:         40px;
  --article-heading-mt:         40px;
  --article-heading-mb:         20px;
  --article-list-indent:        40px;
  --article-quote-margin:       18px 40px;
  --article-figure-mb:          18px;
  --article-figure-h:           550px;    /* a picture in the prose: a cover box this tall at every width (live "large" block) */
  --post-card-min-w:            220px;    /* tablets: three related cards only while each is at least this wide, else two-up */
  --article-columns-gap:        24px;     /* columns inside the prose (the live columns block): between columns, and between stacked ones */
  --article-columns-mb:         31.5px;   /* under a row of columns                                                  */
  --article-column-fig-h:       300px;    /* a picture inside a column: a cover box this tall                        */
  --article-column-p-gap:       24px;     /* between paragraphs inside a column                                      */
  --article-spacer-h:           20px;     /* the live spacer block inside the prose                                  */
  --radius-article-img:         8px;      /* a picture inside the prose                                             */
  --article-table-mb:           15px;
  --fs-article-table:           1.0125rem;/* 16.2px                                                                 */
  --lh-article-table:           24.3px;
  --article-cell-pad:           8.1px;
  --line-table:                 var(--ink-strong);         /* 1px black cell rules                                  */
  --surface-table-stripe:       var(--alpha-grey-500-07);  /* the header row and every other row                    */
  /* Related Posts band (.post-band) and its cards (.post-grid, .post-card) */
  --post-band-pad-top:          80px;
  --post-band-pad-bottom:       180px;
  --post-band-pad-side:         20px;     /* the 1400px inner's margin at 1440                                      */
  --post-band-pad-top-phone:    40px;
  --post-band-pad-bottom-phone: 40px;
  --post-band-pad-side-phone:   5%;
  --post-band-w:                1400px;
  --post-band-gap:              20px;     /* between the title block and the grid                                   */
  --post-band-title-pb:         20px;
  --fs-post-band-title:         2.1875rem;/* 35px                                                                   */
  --fs-post-band-title-phone:   1.875rem; /* 30px                                                                   */
  --post-grid-gap:              20px;
  --radius-post-card:           10px;
  --shadow-post-card:           0 0 1px 0 var(--black);   /* the hairline round a card                             */
  --post-card-media-mb:         20px;
  --post-card-media-ratio:      66%;      /* thumbnail height as a share of its width (live "fit height" 0.66)      */
  --post-card-media-ratio-phone: 50%;
  --post-card-text-pad:         20px;
  --post-card-text-pad-phone:   0 10px;
  --post-card-text-mb:          50px;
  --post-card-text-mb-phone:    40px;
  --post-card-title-mb:         15px;
  --fs-post-card-title:         1.4375rem;/* 23px                                                                   */
  --lh-post-card-title:         27.6px;
  --post-card-excerpt-mb:       30px;
  --post-card-excerpt-mb-phone: 40px;
  --lh-post-card-excerpt:       24px;
  --lh-post-card-more:          28.16px;  /* the base line the "Read More" pill sits in                             */
  --lh-post-card-more-phone:    23.04px;
  --post-card-btn-pad:          10px 20px;
  /* closing figures strip (.icon-strip--article) */
  --article-strip-lift:         41px;     /* the strip container rides this far up over the Related Posts band      */
  --article-strip-lift-phone:   50px;
  --article-strip-pad-bottom:   100px;
  --article-strip-pad-side:     34px;
  --article-strip-fade-stop:    63%;      /* grey-to-clear wash under the strip                                     */
  /* ===== ART:END ===== */
  /* ===== IMG-BANNER:BEGIN ===== */
  /* image-banner service pages (technology first), measured on the live page, 10 Oct 2026 */
  --radius-panel-card:        8px;                     /* the grey copy panel of .split--panel and the picture beside it */
  --fs-sec-title-panel:       var(--card-title-band);  /* 35px: a title inside a panel (the plain title size on a phone) */
  /* cross-border page, measured on the live page, 10 Oct 2026 */
  --alpha-pink-24:            rgba(202, 44, 146, .24);
  --fill-card-tint:           var(--alpha-pink-24);    /* .card-outline--tint: the brand at 24%, the mid-tier card */
  /* sustainability page, measured on the live page, 10 Oct 2026 */
  --radius-tile:              var(--radius-lg);        /* 20px: a grey tile of .feature-row--tiles */
  --tiles-cell-pad:               0.9vw;                   /* padding inside a tile (desktop) */
  --tiles-cell-pad-phone:           var(--card-roomy-pad-mobile);   /* 17.547px: the same on a phone */
  --gap-tile-phone:           1.875rem;                /* 30px: icon to label inside a tile on a phone */
  --size-tile-icon:           26%;                     /* live rule: the picture icon is 26% of the tile content width, square (102px at 1440) */
  --stack-gap-phone-sustain:  12%;                     /* live phone (sustainability, element 1917363 and its sibling): the picture cell and the copy cell each keep 12% of their width below them (46.4px at 430, 42.1px at 390) */
  --sustain-copy-gap-phone:   36%;                     /* live phone (sustainability, element 260caf15): the copy keeps margin-bottom 36% of its cell width above the picture collage */
  --img-h-sustain-power-phone: 297px;                 /* live phone (sustainability, element e08e037): the picture is width 93%, a FIXED 297px high, contained */
  --tile-icon-box-first-390:  60px;                  /* sustainability, below 400px only: the 390 capture shows the first tile box collapsed to 60px where the live rule gives the picture's own height (82.1px); protects sustainability 390 at 2.81 */
  --card-statement-pad:       1.9375rem;               /* 31px: padding of a statement box (.cards-outline--statements) */
  --space-statements-lead:    10px;                    /* the spacer the live column keeps between the title and the statements */
  --collage-gap:              25px;                    /* between pictures in a collage column (desktop) */
  --collage-gap-stacked:      15px;                    /* the same once the collage is one column */
  --collage-img-h-stacked:    200px;                   /* a collage picture once stacked: full width, this tall */
  /* about us page, measured on the live page, 10 Oct 2026 */
  --lh-strap:                 var(--lh-sec-title-small);   /* 1.2: the uppercase strapline under a title (28.8px at 24px) */
  --fs-strap:                 var(--fs-lg-plus);       /* 24px on every width */
  --lh-tick-ink:              1.3;                     /* .ticks--ink rows: 24.96px at 19.2px, 20.8px at 16px */
  --space-tick-ink-row:       10px;                    /* between two rows of .ticks--ink (5px under one, 5px over the next) */
  --space-card-list-lead:     35px;                    /* .cards-outline--lists: under the card title on desktop (the live spacer) */
  --space-card-list-intro:    7px;                     /* under the one-line intro above a card's tick list */
  --alpha-pink-55:            rgba(202, 44, 146, .55);
  --fill-badge-glass-strong:  var(--alpha-pink-55);    /* the frosted "20+" badge where live sets it denser (about us; home keeps 38%) */
  /* ===== IMG-BANNER:END ===== */

  /* ===== RES:BEGIN  (resources index family, FAQs bands, single-purpose pages; measured on /resources/, /resources/2/ and /faqs/ live, 10 Oct 2026) ===== */
  --res-band-pad-top:           80px;
  --res-band-pad-bottom:        80px;     /* the live container's 180px bottom padding, 100px of which the footer covers */
  --filter-gap:                 20px;
  --filter-gap-phone:           12px;
  --filter-pad-bottom:          50px;     /* under the filter buttons; a 20px gap follows                           */
  --filter-pad-bottom-phone:    20px;
  --filter-mb:                  20px;     /* the live grid sits 90px / 60px under the buttons: padding + this + the band gap */
  --filter-item-pad:            20px 40px;
  --radius-filter-item:         10px;
  --fs-filter-item:             var(--fs-base);        /* 16px */
  --fs-filter-item-phone:       var(--fs-cta-mobile);  /* 12.8px */
  --res-grid-gap:               30px;
  --res-card-gap:               20px;     /* between a card's picture, title, excerpt and button                     */
  --shadow-post-card-index:     0 0 2px 0 var(--alpha-black-50);
  --res-card-media-h:           300px;
  --res-card-text-pad:          0 20px;
  --res-card-text-pad-phone:    0 10px;
  --res-card-more-pad:          0 20px 20px;
  --res-card-more-pad-phone:    0 10px 20px;
  --lh-res-card-title:          29px;
  --res-cta-pad:                15px 30px;
  --fs-res-cta:                 var(--fs-base);        /* 16px; the pill is 48px tall with its 1px white border */
  --fs-res-cta-phone:           var(--fs-cta-mobile);  /* 12.8px; 44.8px tall */
  --pager-mt:                   20px;     /* the live pager sits 40px under the grid: this plus the band's 20px gap    */
  --pager-item-pad:             12px 18px;
  --pager-item-gap:             5px;
  --fs-pager:                   1.1rem;   /* the 17.6px base; 14.4px on a phone                                      */
  --fs-pager-phone:             .9rem;
  /* FAQs */
  --faq-intro-pad-top:          80px;
  --faq-intro-pad-bottom:       40px;     /* 140px live, 100px of which the accordion container covers              */
  --faq-intro-text-pb:          40px;
  --faq-inner-w:                1200px;
  --fs-faq-title-phone:         1.875rem; /* 30px */
  --lh-faq-title-phone:         36px;
  --faq-band-pad-bottom:        100px;
  --home-phone-frac:            1px;    /* home phone: the rebuild page is 1px short of the live one (23386 vs 23387; live header 117, ours 116.5) and later rows round high (PHONE-FRAC region) */
  --faq-band-pad-bottom-phone:  115px;   /* phone: the cached live page is 15px taller under the collapsed accordion (page height minus the 828px footer) */
  --faq-col-w:                  50%;
  --faq-col-pr:                 15px;
  /* single-purpose pages (measured from the live captures of 10 Oct 2026) */
  --surface-embed:              var(--grey-150);   /* the band behind the flip-book on desktop */
  --embed-pad:                  calc(6.75vw - 37.2px) 0 60px;   /* live: the band's top is -310px under a header that is 1.75% + 5% of the page width plus a fixed part (post-4769, container 7f8959f); 60px above the 900px frame at 1440, 92px at 1920; 60px below */
  --embed-pad-phone:            10px 0 9px;      /* 419px on a phone: the 400px frame in a white band */
  --embed-h:                    900px;
  --embed-h-phone:              400px;
  /* policy pages (measured on /privacy-policies/ live at 1440 and 390, 10 Oct 2026) */
  --policy-hero-lift:           var(--hero-lift-flush);        /* the live title box starts this far above the page top              */
  --policy-hero-pad-top:        20%;            /* 288px at 1440, 78px at 390                                        */
  --policy-hero-pad-bottom:     5%;             /* 72px at 1440                                                      */
  --policy-hero-pad-bottom-phone: 5%;           /* 19.5px at 390                                                     */
  --policy-title-mb-phone:      20px;
  --tile-gap:                   20px;
  /* --- boxed band content widths: the live --content-width of each band's container (reference/live-rules-all-2026-10-11.md) --- */
  --split-min-h-live:           70vh;     /* live --min-height:70vh on the overseas-brands delivery-speed band (post-4853 container 0b0f927: 631px at 900, 756px at 1080) */
  --tier-pad-top:               2.7vw;    /* live: tier-card row padding 3% of the 90% row (38.9px at 1440, 51.8px at 1920; container 92cb508) */
  --tier-pad-bottom:            5.4vw;    /* live: 6% of the 90% row (77.8px at 1440, 103.7px at 1920) */
  --power-media-pad-x:          9.05%;    /* live: the picture is about 82% of its cell wide (60px each side at 1440, 71px at 1920; post-1924 container a99c82c) */
  --power-media-pad-y:          60px;     /* live: 60px above and below at every width (the row is 766px at 1920 = 646 + 120) */
  --band-inner-w:               1275px;   /* live --content-width on 19 split-band containers */
  --band-inner-w-wide:          1575px;   /* live --content-width on the about-us, sustainability and technology wide bands */
  --band-inner-w-collage:       1570px;   /* live --content-width on the sustainability collage band (a distinct live value, 5px under the wide one) */
  --band-row-push:              50px;     /* live: the order-picking technology row sits 50px below the band padding (122px = 72 + 50 at 1440) */
  --split-copy-pad-share:       5vw;      /* live: 5% of the page width; vw because the copy is a grid item */
  --split-pad-media-first-phone: calc(10% + 40px) 0 15%;   /* live phone (order picking, element 025905c): the band pads 10% above and 15% below, and its inner container keeps margin-top 40px above the picture */
  --cards-band-pad-top-phone:   10%;      /* live phone (order picking e0d4209, receiving b2a7682, services 50c68af): a cards band pads 10% of the page width above its cards */
  --cards-band-pad-bottom-phone: 5%;      /* and 5% below them */
  --cards-band-pad-phone:       var(--cards-band-pad-top-phone) var(--cards-band-pad-bottom-phone);   /* top and bottom, for padding-block */
  --receiving-cards-pad-phone:  var(--cards-band-pad-phone);   /* receiving's cards band is the same rule (overridden by the 390 residue block at the foot of this file) */
  --tiles-pad-phone-first:      10vw var(--gutter-phone) var(--gutter-phone);   /* phone, measured; phone widths are a later dispatch */
  --tiles-pad-phone-last:       0 var(--gutter-phone) 15vw;                  /* phone, measured */
  --twin-gap-faq:               30px;     /* FAQ band twin gap, measured */
  --tile-grid-pad:              0 5% 1%;        /* a row of tiles: live shares of the page width (72px sides, 14.4px under the first row at 1440) */
  --tile-grid-pad-bottom-last:  6%;            /* under the last row                                                 */
  --tile-grid-pad-phone:        10vw var(--gutter-phone) var(--gutter-phone);
  --tile-grid-pad-bottom-phone: var(--gutter-phone);
  --tile-pad:                   1.8vw;          /* 213.2px tile: 25.9 + 95.4 picture + 20 + 46 pill + 25.9           */
  --tile-gap-inner-phone:       7vw;            /* live phone tile: picture to button is a share of the page width (27px at 390, 30px at 430), as captured 11 Oct 2026 */
  --tile-pad-phone:             4.5vw;
  --tile-gap-inner:             20px;
  --tile-img:                   26%;           /* live rule: the picture is 26% of the tile's content width, square (95.4px at 1440) */
  --tile-img-phone:             26%;            /* live rule, as on desktop: the picture is 26% of the tile's content width, square (82px at 390, 91px at 430) */
  --tile-btn-pad:               15px 35px;      /* a 46px pill at 16px, 42.8px at 12.8px                              */
  --fs-tile-btn:                var(--fs-base);
  --fs-tile-btn-phone:          var(--fs-cta-mobile);
  /* contact page (measured on /contact/ live at 1440 and 390, 10 Oct 2026): the get-in-touch band at page scale */
  --contact-band-lift:          calc(17.25vw - 87.9px);   /* the live band box starts this far above the page top: margin-top -24% of the page width, less the header (160.5px at 1440) */
  --contact-band-min-h:         100vh;
  --contact-band-pad-top:       13.5%;          /* live: 15% of the 90% inner width (194.4px at 1440), grows with the window */
  --contact-band-pad-bottom:    11.7%;          /* live: 13% of the 90% inner width (168.5px at 1440) */
  --contact-band-inner-w:        1293px;         /* live --content-width of the contact band (post-2101 container 36e4450) */
  --contact-band-pad-side:      max(5%, calc((100% - var(--contact-band-inner-w)) / 2));   /* the content is centred in that width: 73.5px each side at 1440, 313px at 1920, 633px at 2560 */
  --contact-eyebrow-pt:         206.875px;      /* the eyebrow widget's own top padding                              */
  --contact-title-w:            53%;            /* 685.3px of the inner                                              */
  --contact-lede-mb:            78.4px;         /* 14.4px, a 7px gap, the live 50px spacer and another 7px gap        */
  --contact-social-mt:          64px;
  --contact-row-icon:           28px;           /* the page band's rows: 28px icons, 18px / 27px text (the footer's are 20px / 16px) */
  --fs-contact-row:             18px;
  --lh-contact-row:             27px;
  --contact-social:             30px;           /* the page band's social icons (the footer's are 25px)                */
  --overseas-title-w:           72%;            /* the overseas band's four-line title                                 */
  --overseas-lede-w:            69%;           /* a 7px gap, the live 57px spacer                                   */
  --contact-band-pad-phone:     calc(var(--header-zone-phone) + 15vw) var(--gutter-phone) 15vw;   /* the band carries the header zone */
  --contact-band-gap-phone:     15px;
  --contact-title-w-phone:      255px;
  --fs-contact-title-phone:     var(--fs-cta-card);   /* 33px */
  --lh-contact-title-phone:     36.3px;
  --contact-columns-gap-phone:  65px;
  --contact-card-mt-phone:      4.5vw;        /* the card sits this far below the columns' top on phones          */
  --fs-contact-card-title-phone: 28px;
  --lh-contact-card-title-phone: 30.8px;
  --contact-info-gap-phone:     35px;
  --fs-contact-eyebrow-phone:   14.4px;
  --lh-contact-eyebrow-phone:   14.4px;
  --fs-contact-lede-phone:      17.6px;
  --lh-contact-lede-phone:      28.16px;        /* the live phone lede keeps the desktop line pitch                 */
  --contact-lede-mb-phone:      14.4px;
  --contact-submit-pad-phone:   13.4px;        /* a 42.8px button on phones                                         */
  --map-band-h:                 402px;
  --map-frame-h:                460px;          /* the live embed; the next band covers its last 150px                */
  --map-saturate:               .32;
  /* thank-you page (measured on /thank-you/ live at 1440 and 390, 10 Oct 2026) */
  --thanks-lift:                calc(162.1px - 6.75vw);         /* the live band box starts this far above the page top              */
  --thanks-min-h:               100vh;
  --thanks-pad-side:            115.19px;
  --thanks-gap:                 20px;
  --thanks-spacer:              150px;          /* the live spacer widget above the icon                             */
  --thanks-icon:                74px;
  --thanks-icon-mb:             8.2px;          /* the icon widget's line box is 82.2px tall                         */
  --thanks-inner-w:             920px;
  --fs-thanks-text:             20.8px;
  --lh-thanks-text:             33.3px;
  --thanks-text-mb:             14.4px;
  --thanks-lift-phone:          130.5px;
  --thanks-min-h-phone:         100vh;
  --thanks-icon-mb-phone:       7px;            /* an 81px line box on phones                                        */
  --thanks-wash-opacity:        .2;            /* the photo over the brand colour                                   */
  --thanks-wash-size:           1481px 1080px; /* the rendition live serves of the 1920x1400 original                */
  --thanks-wash-size-phone:     412px auto;     /* the rendition live serves on phones: 412 wide, ~300 tall, tiled   */
  --thanks-inner-w-phone:       81vw;
  --fs-thanks-title-phone:      var(--fs-cta-card);   /* 33px */
  --lh-thanks-title-phone:      36.3px;
  /* ===== RES:END ===== */
  /* ===== OVERSEAS:BEGIN  (UK fulfilment for overseas brands page, measured on the live page, 10 Oct 2026) ===== */
  --alpha-grey-900-82:          rgba(34, 34, 34, .82);
  --scrim-page-hero-wash-top:   var(--alpha-grey-900-82);   /* .page-hero--wash: the banner wash at the top edge          */
  --scrim-page-hero-wash-foot:  var(--dark);                /* ... solid at the foot                                      */
  --line-btn-on-dark:           var(--on-dark);             /* .btn--outline-on-dark: the white 1px edge of a clear pill   */
  --page-hero-gap-center:       3.125rem;                   /* 50px: title, text and buttons of a centred banner           */
  --page-hero-actions-gap:      24px;                       /* between two banner buttons                                  */
  --strip-lift-banner:          70px;                       /* how far the icon strip rides up over an image banner (desktop; phones use --strip-lift-phone) */
  --gap-split-col-mid:          50px;                       /* between copy and picture (delivery speed)                   */
  --size-strip-icon-lead:       40px;                      /* the lead strip icon drawn larger (the warning sign)         */
  --size-strip-icon-lead-phone: 30px;
  --gap-split-col-wide:         60px;                       /* between copy and picture in the overseas page splits        */
  --space-tick-list-row-loose:  28px;                       /* .ticks--list rows 14px + 14px apart (what's included)       */
  --line-accordion-rule:        var(--ink);                 /* .accordion--rule: the dark rule under each question         */
  --fs-accordion-q:             1.1875rem;                  /* 19px question, line 19.2px                                  */
  --fs-accordion-q-phone:       1.125rem;                   /* 18px                                                        */
  --lh-accordion-q:             1.2rem;                     /* 19.2px                                                      */
  --lh-accordion-q-phone:       1.4625rem;                  /* 23.4px                                                      */
  --pad-accordion-q:            37.5px;                     /* above and below a question                                  */
  --pad-accordion-q-phone:      7.2vw;                      /* live phone (every FAQ accordion): the tab pads 7.2% of the page width above and below a question (28.08px at 390, 30.95px at 430) */
  --size-accordion-icon:        19.2px;                     /* the plus sign                                               */
  --size-accordion-icon-phone:  16px;
  /* the plus sign the live toggle draws (its own polygon, 43.104 x 45.888), as a mask painted in the text colour */
  --icon-accordion-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 43.104 45.888'%3E%3Cpolygon points='24.096 20.16 24.096 0 19.008 0 19.008 20.16 0 20.16 0 25.248 19.008 25.248 19.008 45.888 24.096 45.888 24.096 25.248 43.104 25.248 43.104 20.16 24.096 20.16'/%3E%3C/svg%3E");
  --icon-accordion-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 43 6'%3E%3Crect width='43' height='6'/%3E%3C/svg%3E");   /* the open question's bar */
  --card-tier-pad:              38.39px;                   /* padding of a stage card (desktop)                           */
  --card-tier-pad-phone:        4.05vw;
  /* ===== OVERSEAS:END ===== */

  /* ===== ART-INSET:BEGIN ===== */
  --article-inset-nested:       35px;      /* subscription-box and golden-quarter: live's nested container margin (desktop)  */
  --article-inset-nested-phone: 4.5vw; /* the same on a phone (90% of the 351px column, centred)                         */
  /* ===== ART-INSET:END ===== */
}

/* ===== RESPONSIVE TOKENS (moved from site.css: a token is defined only in this file) ===== */
@media (max-width: 1024px) {
  :root {
    --fs-4xl: 3rem;
    --fs-3xl: 2.375rem;
  }
}
@media (max-width: 767px) {
  :root {
    --fs-body: 1rem;
    --fs-3xl: 2rem;
    --fs-4xl: 2.25rem;
    --gap-xwide: 2rem;
    --fs-section: .9rem;                 /* 14.4px */
    --fs-sec-title: var(--fs-cta-card);  /* 33px */
    --fs-sec-title-mid: var(--fs-cta-card);  /* 33px */
  }
}
/* Below-400px exceptions: a bounded, labelled set. At 390 a third of a pixel moves the text rows' rounding and so the line breaks, which costs a page up to a point
   on the board; the 430 originals follow the live rules in the tokens above. Each line names its page, the live rule it rounds and the 390 score it protects.
   No others are allowed; delete a line when the 390 original of its page is re-captured and the board agrees without it. */
@media (max-width: 399px) {
  :root {
    --card-4up-pad-phone:      0 var(--gutter-phone) 54.8px;   /* inventory: rounds 5% + 9% (14vw = 54.6px) under the four-up cards; protects inventory 390 at 3.73 (4.69 without) */
    --sustain-copy-gap-phone:  calc(36% + 0.34px);             /* sustainability: rounds margin-bottom 36% above the collage; protects sustainability 390 at 2.81 (3.39 without) */
    --receiving-cards-pad-phone: 39.13px 19.39px;              /* receiving: rounds the cards band's 10% / 5% (39px / 19.5px); protects receiving 390 at 1.79 (1.91 without) */
  }
}