/* TPS visual refresh (13 Oct 2026).
   Loaded AFTER each page's own <style>, so it only adjusts consistency. Remove the <link> from a page to revert it.
   Tiers:  cards/tiles/panels 10px | small chips 8px (unchanged) | buttons/inputs 5px | pills 100px
   Padding: standard card 32px | compact 24px | feature panel 40px   (all 24px on tablets/phones)
   Red: the strongest red (--red fill) is kept for primary enquiry buttons; other buttons are neutral. */

:root{
  --r-card:10px;
  --r-control:5px;
  --pad-card:32px;
  --pad-card-compact:24px;
  --pad-card-feature:40px;
  --fs-h2:clamp(28px,3.4vw,38px);
  --fs-h2-band:clamp(24px,3vw,32px);
  --fs-h3:20px;
  --fs-h4:15px;
}

/* ───────── 1. Corner radii ───────── */
.hero-form-wrap,.contact-form-box,.service-card,.review-card,.feature-panel,.auxilium-panel,.linnworks-card,
.linnworks-logo-panel,.carrier-logo-card,.carrier-tile,.bespoke-note,.audit-cta-box,.collection-wider,
.integrations-modal,.partner-logo-box{border-radius:var(--r-card)}
@media(max-width:640px){.integrations-modal{border-radius:0}}
.direct-contact a.contact-action,.integrations-search,.nav-a{border-radius:var(--r-control)}

/* ───────── 2. Card padding ───────── */
.service-card,.audit-cta-box,.bespoke-note,.contact-form-box,.hero-form-wrap,.feature-panel{padding:var(--pad-card)}
.review-card,.collection-wider,.linnworks-logo-panel{padding:var(--pad-card-compact)}
.auxilium-panel,.linnworks-card{padding:var(--pad-card-feature)}
@media(max-width:900px){
  .service-card,.audit-cta-box,.bespoke-note,.contact-form-box,.hero-form-wrap,.feature-panel,
  .auxilium-panel,.linnworks-card{padding:var(--pad-card-compact)}
  .integrations-panel{padding:24px 18px}
}

/* ───────── 3. Headings ───────── */
.section h2,.faq-section h2,.reviews-section h2{font-size:var(--fs-h2)}
.cta-band h2,.linnworks-card h2{font-size:var(--fs-h2-band)}
.service-card h3,.audit-cta-box h3,.integrations-modal-head h3,.form-heading{font-size:var(--fs-h3);font-weight:700}
.feature-panel h4,.amazon-split-item h4,.step-text h4,.audit-step-text h4,.collection-wider h4{font-size:var(--fs-h4);font-weight:700}

/* ───────── 4. Buttons ─────────
   Large: hero / band actions.  Compact: header and inline actions.  Only primary enquiry buttons are solid red. */
.btn-primary,.btn-white,.btn-secondary,.btn-outline-wh{font-size:15px;font-weight:600;padding:13px 26px;border-radius:var(--r-control)}
.btn-quote,.btn-login,.btn-view-integrations{font-size:14px;font-weight:600;padding:9px 20px;border-radius:var(--r-control)}
.direct-contact a.contact-action{font-weight:600}
.btn-login:hover,.btn-view-integrations:hover{border-color:var(--charcoal);color:var(--charcoal)}
.btn-login:focus-visible,.btn-view-integrations:focus-visible{outline:2px solid var(--charcoal);outline-offset:2px}

/* ───────── 5. Logos: optical balance ─────────
   Carrier carousel: each logo is a tight crop sized so its VISIBLE area is similar; cards are one uniform size. */
.carrier-logo-card{width:176px;height:96px;padding:0 20px}
.carrier-logo-card img{height:auto;width:calc(var(--w,80px)*var(--k,1));max-width:100%}
.carrier-logo-card img[src$="/royal-mail.png"]{--w:76px}
.carrier-logo-card img[src$="/evri.png"]{--w:51px}
.carrier-logo-card img[src$="/inpost.png"]{--w:75px}
.carrier-logo-card img[src$="/dhl.png"]{--w:124px}
.carrier-logo-card img[src$="/dpd.png"]{--w:85px}
.carrier-logo-card img[src$="/dx.png"]{--w:80px}
.carrier-logo-card img[src$="/spring.png"]{--w:36px}
.carrier-logo-card img[src$="/landmark.png"]{--w:113px}
@media(max-width:600px){.carrier-logo-card{width:128px;height:68px;padding:0 14px;--k:.714}.carrier-logo-card img[src$="/royal-mail.png"]{--k:.84}}

/* Carriers page: the eight carrier tiles use the same tight logos and per-logo sizes as the carousel */
.carrier-tile--carrier{display:flex;align-items:center;justify-content:center;min-height:104px;padding:14px 20px;--k:1.1}
.carrier-tile--carrier img{display:block;height:auto;width:calc(var(--w,80px)*var(--k,1));max-width:100%}
.carrier-tile--carrier img[src$="/royal-mail.png"]{--w:76px}
.carrier-tile--carrier img[src$="/evri.png"]{--w:51px}
.carrier-tile--carrier img[src$="/inpost.png"]{--w:75px}
.carrier-tile--carrier img[src$="/dhl.png"]{--w:124px}
.carrier-tile--carrier img[src$="/dpd.png"]{--w:85px}
.carrier-tile--carrier img[src$="/dx.png"]{--w:80px}
.carrier-tile--carrier img[src$="/spring.png"]{--w:36px}
.carrier-tile--carrier img[src$="/landmark.png"]{--w:113px}
@media(max-width:600px){.carrier-tile--carrier{min-height:88px;padding:12px 10px;--k:.82}}

/* Carousel pause control: sits in its own row below the logos so it never covers a carrier */
.carrier-strip{padding-bottom:14px}
.carrier-strip-controls{display:flex;justify-content:flex-end;padding:12px 28px 0}
.carrier-pause{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:var(--r-control);color:#e6e6e6;font-family:inherit;font-size:12px;font-weight:600;line-height:1;padding:8px 14px;cursor:pointer}
.carrier-pause:hover{background:rgba(255,255,255,.2);color:#fff}
.carrier-pause:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:600px){.carrier-strip-controls{padding:10px 20px 0}}

/* Homepage partner strip (Mintsoft, QVC): equal visual weight */
.rel-logo{height:auto;width:var(--rw,120px);max-width:100%}
.rel-logo--mintsoft{--rw:184px}
.rel-logo--qvc{--rw:104px}
/* Logo centred over its description (description text stays left-aligned). Both files have equal left/right
   whitespace (Mintsoft 16px/15px of 560; QVC tight crop 0/0), so centring the image centres the visible artwork. */
.rel-item .rel-logo{align-self:center}
/* QVC: the square runs 0-217px of the 245px file; the trailing 27px is the small "SM" mark. Nudge right by 13.5/245 of the
   logo width so the square itself (not the square plus SM) sits on the centre line. */
.rel-logo--qvc{transform:translateX(calc(var(--rw)*.055))}
@media(max-width:600px){.rel-logo{max-height:none;margin:0 auto 2px}.rel-logo--mintsoft{--rw:164px}.rel-logo--qvc{--rw:88px}}

/* Ecommerce page: Mintsoft row matches the tile style used elsewhere */
.partner-row{display:flex;align-items:center;gap:14px;margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}
.partner-logo-box{background:#fff;border:1.5px solid var(--border);padding:10px 16px;display:inline-flex;align-items:center;justify-content:center;min-height:64px;min-width:136px}
.partner-logo-box img{display:block;width:104px;height:auto}

/* ───────── 5b. Header: collapse to the menu button on tablets ─────────
   The full desktop header (logo + 6 links + login + quote button) needs about 1035px of layout width, so between 901px and
   1080px it ran off the right edge (up to 134px at 901px). Rather than clip it, use the same menu-button header as phones
   in that range. 1080px leaves room for a 15px scrollbar. The menu opens under the header (absolute, so it is right whether
   or not the top bar is scrolled away). "Customer login" is hidden here exactly as it already is at 900px and below. */
@media(min-width:901px) and (max-width:1080px){
  nav{display:none}
  nav.open{display:flex;flex-direction:column;align-items:stretch;gap:2px;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:2px solid var(--red);padding:12px 48px;box-shadow:0 8px 24px rgba(0,0,0,.1);z-index:99}
  nav.open .nav-a{padding:10px 12px;font-size:15px}
  .nav-dropdown{flex-direction:column;align-items:stretch}
  .nav-dropdown-menu{position:static;box-shadow:none;border:none;background:none;padding:2px 0 6px 16px;min-width:0}
  .nav-dropdown:hover .nav-dropdown-menu{display:none}
  .nav-dropdown.open .nav-dropdown-menu{display:block}
  .nav-dropdown-btn{width:100%;justify-content:space-between;padding:10px 12px}
  .nav-actions .btn-login{display:none}
  .nav-toggle{display:flex;margin-left:auto}
}

/* Collections coverage (Multi-Carrier Shipping): the qualification sits directly under the heading, the example towns are labelled as examples */
.collection-qualifier{font-size:16px;font-weight:600;color:var(--charcoal);line-height:1.5;margin:0 0 18px}
.collection-eg{font-size:13px;font-weight:600;color:var(--text-mid);margin:24px 0 -12px}

/* Reviews: screen-reader-only status line (announces the position after the visitor navigates) */
.rv-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Reviews: the page script sets [hidden] on the controls only when there is nothing to rotate (one review, or fewer reviews than cards on screen); make sure that really hides them. */
.carousel-controls[hidden]{display:none}

/* "Customer login" inside the menu: only where the desktop header (with its own login button) is not shown.
   Above 1080px the header button and top bar carry the link, so this one stays hidden. */
.nav-login-link{display:none}
@media(max-width:1080px){nav.open .nav-login-link{display:block}}

/* ───────── 6. Mobile alignment: centre logos and SHORT headings; long paragraphs stay left ───────── */
@media(max-width:600px){
  .m-center{text-align:center}
  .rel-item .rel-context{text-align:left;text-wrap:wrap}
  .partner-row{flex-direction:column;justify-content:center;text-align:center;gap:12px}
  .partner-row .partner-logo-box{min-width:min(100%,224px)}
  .platform-label{text-align:center}
  .btn-view-integrations{display:flex;width:fit-content;margin-left:auto;margin-right:auto}
}