/* ═══════════════════════════════════════════════════════════
   QUICKSHIP CANADA
   Change Request of 16 August 2026

   Load this AFTER site.css. It corrects the brand and adds the
   sections carried over from Sample 2.
   ═══════════════════════════════════════════════════════════ */

/* ── A1 and A2. Brand colours ──
   The samples used #F26522, a red orange. The brand colour is
   #F7921E, a warmer amber. Every orange element picks this up
   through the variable, so there is one place to change it. */

:root {
  --orange:        #F7921E;
  --orange-dark:   #DE7F10;
  --orange-soft:   rgba(247, 146, 30, .10);
  --orange-line:   rgba(247, 146, 30, .28);

  --blue:          #1C67D5;   /* A2. Secondary, was missing entirely */
  --blue-soft:     rgba(28, 103, 213, .09);

  --leaf-red:      #D50209;   /* Point 1 */

  /* ── The A1 correction, finished ──
     site.css sets --brand to #f26522, the red orange from the sample,
     and 46 rules in that file read it, including .btn-primary. brand.css
     introduced --orange but never reassigned --brand, so every primary
     button on the site still rendered the old colour and point A1 was
     only half delivered.

     Reassigning the three here catches all 46 rules at once. site.css
     itself is now corrected too, so this is belt and braces: if that
     file is ever restored from an older backup, the buttons stay right. */
  --brand:         #F7921E;
  --brand-dk:      #DE7F10;
  --brand-lt:      #FBB05A;

  --ink:           #14161A;
  --muted:         #4A4A4A;   /* Point 4 asked for this grey */

  --font-head:     'Baloo 2', 'Poppins', system-ui, sans-serif;
  --font-body:     'Poppins', system-ui, sans-serif;
}

/* Anything in the old orange gets caught here. */
[style*="#F26522"], [style*="#f26522"] { color: var(--orange) !important; }

body { font-family: var(--font-body); }
h1, h2, h3, h4, h5, .band-head, .split-head { font-family: var(--font-head); }


/* ── A2. Put the brand blue to work ── */
.quote-card__faq a,
.svc-panel__more,
.faq-item summary:hover span,
.office a[href^="mailto"] { color: var(--blue); }

.quote-card__faq a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }


/* ── Point 2. Hero heading ──
   Line 1 regular size and Bold. Line 2 slightly smaller and
   Semi-Bold, in the brand orange. */

.hero-title { margin: 0 0 18px; line-height: 1.08; }

.hero-title__main {
  display: block;
  font-size: clamp(2.3rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--ink);
}

.hero-title__sub {
  display: block;
  font-size: clamp(1.9rem, 4.1vw, 2.85rem);   /* about 82% of line 1 */
  font-weight: 600;
  color: var(--orange);
  margin-top: .1em;
}

/* Point 1. The leaf sits on the baseline of line 1. */
.hero-leaf {
  display: inline-block;
  width: .78em; height: .78em;
  margin-left: .12em;
  vertical-align: -.06em;
  object-fit: contain;
}


/* ── Point 5. FAQ helper under the calculator ── */
.quote-card__faq {
  margin: 14px 0 0;
  text-align: center;
  font-size: .84rem;
  color: var(--muted);
}

/* Point 13. The dollar photo, reused here. */
.quote-card { position: relative; }
.quote-card__accent {
  position: absolute;
  top: -26px; right: -18px;
  width: 92px; height: 92px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
  transform: rotate(4deg);
  pointer-events: none;
}
@media (max-width: 900px) { .quote-card__accent { display: none; } }


/* ── Point 4. Services menu ── */
.mega h4,
.mega ul a { font-weight: 600; }
.mega ul a small {
  display: block;
  font-weight: 400;
  color: var(--muted);
  font-size: .78rem;
  margin-top: 2px;
}


/* ── Point 6. Tighten the route map ── */
.map-sec--tight { padding-block: clamp(48px, 6vw, 76px); }
.map-sec--tight .sec-head { margin-bottom: 18px; }
.map-sec--tight .route-wrap { margin: 0 auto; max-width: 1100px; }
.map-sec--tight .route-svg { display: block; }
.map-sec--tight .chips { margin-top: 14px; }


/* ── Point 7a. Services explorer ──
   The caption used to need a second hover onto the photo. It now
   reveals together with the panel, while the cursor is still on
   the button. */

.explorer-panel { position: relative; }

.svc-panel {
  position: absolute; inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.03);
  transition: opacity .38s ease, transform .38s ease, visibility .38s;
}
.svc-panel.is-active { opacity: 1; visibility: visible; transform: none; }

.svc-panel img { width: 100%; height: 100%; object-fit: cover; display: block; }

.svc-panel__ph {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  color: var(--orange);
  background: var(--orange-soft);
}

.svc-panel__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 24px 22px;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.86) 12%, rgba(0,0,0,.55) 55%, transparent);
  /* Reveals with the panel, not on its own hover. */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .34s ease .12s, transform .34s ease .12s;
}
.svc-panel.is-active .svc-panel__cap { opacity: 1; transform: none; }

.svc-panel__cap b { display: block; font-size: 1.22rem; margin-bottom: 6px; }
.svc-panel__cap p { margin: 0 0 12px; font-size: .9rem; line-height: 1.6; opacity: .9; }

.svc-panel__more {
  display: inline-flex; align-items: center; gap: 6px;
  color: #fff; font-weight: 600; font-size: .86rem;
  text-decoration: none;
  border-bottom: 2px solid var(--orange);
  padding-bottom: 2px;
}

/* Buttons */
.svc-btn {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  text-decoration: none; color: inherit;
  border-bottom: 1px solid rgba(0,0,0,.07);
  transition: background .25s ease, padding-left .25s ease;
}
.svc-btn:last-child { border-bottom: 0; }
.svc-btn:hover, .svc-btn.is-active { background: var(--orange-soft); padding-left: 24px; }

.svc-btn__no { font-size: .74rem; font-weight: 700; color: var(--orange); min-width: 22px; }
.svc-btn__body { flex: 1; min-width: 0; }
.svc-btn__body b { display: block; font-size: .98rem; font-weight: 600; }
.svc-btn__body small { display: block; font-size: .76rem; color: var(--muted); }

.svc-btn__tag {
  display: inline-block;
  font-style: normal; font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 7px; margin: 3px 0;
  border-radius: 99px;
  background: var(--orange); color: #fff;
}

.svc-btn__arrow { opacity: 0; transform: translateX(-6px); transition: all .25s ease; color: var(--orange); }
.svc-btn:hover .svc-btn__arrow, .svc-btn.is-active .svc-btn__arrow { opacity: 1; transform: none; }


/* ── Point 8. A photo per step ── */
.how-media { position: relative; overflow: hidden; border-radius: 20px; }
.how-media__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .45s ease, transform .6s ease;
}
.how-media__img.is-active { opacity: 1; transform: none; position: relative; }

.tl-step { cursor: default; transition: opacity .25s ease; }
.tl-step .tl-node { transition: background .25s ease, color .25s ease, transform .25s ease; }
.tl-step.is-active .tl-node,
.tl-step:hover .tl-node { background: var(--orange); color: #fff; transform: scale(1.06); }


/* ── Point 9a. Existing Stack smaller and Semi-Bold ── */
.split-head { margin: 0; line-height: 1.1; }
.split-head__main {
  display: block;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 700;
}
.split-head__sub {
  display: block;
  font-size: clamp(1.45rem, 2.6vw, 2rem);   /* about 77% */
  font-weight: 600;
  color: var(--orange);
}
.int-lead { margin: 18px 0 28px; }

/* 9c. Real platform logos rather than placeholder icons. */
.int-badge {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 13px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.07);
  overflow: hidden;
}
.int-badge img { width: 32px; height: 32px; object-fit: contain; }


/* ── Point 10. Six carriers, real logos ── */
.carriers--6 {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.cmark {
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  overflow: hidden;
  flex: none;
}
.cmark img { width: 34px; height: 34px; object-fit: contain; }

/* ── Carrier logos, REF SVC-7 point 2 ──
   A carrier with a real logo gets a wider mark than one still showing
   the truck icon. Carrier wordmarks are wide: Purolator and Canada
   Post are roughly four times as wide as they are tall, and inside the
   54px square the icon uses they came out about eight pixels tall and
   unreadable.

   Every logo gets the same box and the same padding, and object-fit
   contain does the rest, so no logo can end up larger than another by
   accident. That is the brief's identical bounding box.

   Optical size is the part CSS cannot finish. Contain fits whichever
   dimension runs out first, so a square mark fills the height while a
   wordmark fills the width and sits shorter. If one looks small next
   to the others, the fix is to trim the transparent margin out of that
   file rather than to scale it here, which would only move the problem
   to the next logo. */
.carrier--logo .cmark {
  width: 74px;
  height: 54px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #fff;
}
.carrier--logo .cmark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Below 620px the carrier card stacks. The card is a row of a fixed
   width mark beside a name, and in the two column grid the brief asks
   for on a phone each card is about 165px wide. With 44px of padding
   that leaves roughly 120px, and the mark alone is 74px of it, so the
   name had nowhere to go and pushed the card past the screen edge.
   Measured: the page scrolled sideways at 380px.

   The mark itself was already 54px and marginal before the logos went
   in; widening it is what tipped it over. Stacking gives the name the
   whole card width and the overflow goes away without dropping to one
   column, which would lose the brief's two column phone layout. */
@media (max-width: 620px) {
  .carriers--8 .carrier {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 16px;
  }
  .carriers--8 .carrier b { font-size: .92rem; }
  /* Long carrier names have no spaces to break on in 120px. */
  .carriers--8 .carrier > div { min-width: 0; overflow-wrap: anywhere; }
}


/* ═══════════════════════════════════════════════════════════
   Point 11. Aeroplane reviews

   One thing at a time. The aircraft crosses in a straight line
   and leaves through the right edge, then the band it flew across
   collapses to nothing and the reviews rise into that space at
   full width. The old build ran both at once and they fought.

   Nothing rotates. The artwork is a plan view of the aircraft
   seen from above with the nose already pointing right, so any
   rotation reads as the aircraft sliding sideways.

   Timing, matched to changes.js:
     0.00s  route line draws in
     0.15s  aircraft enters from the left
     2.60s  aircraft leaves through the right edge
     2.60s  band collapses over 0.55s
     2.78s  cards rise, 0.11s apart
   ═══════════════════════════════════════════════════════════ */

.fly {
  position: relative;
  padding-block: clamp(64px, 8vw, 110px);
  background: linear-gradient(180deg, #fff 0%, #FFF9F2 44%, #fff 100%);
  overflow: hidden;
}

/* Single column now. The old two-column grid put the heading beside
   the cards, which left no room for a full width flight. */
.fly .wrap { display: block; }

.fly-head {
  position: relative;
  z-index: 4;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}
.fly-head h2 { margin: 6px 0 12px; }
.fly-head__lead {
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.7;
  margin: 0 auto;
  max-width: 54ch;
}

/* ── The flight band ──
   Full bleed, so the aircraft leaves the screen rather than the
   1200px container. Collapsing this is what pulls the cards up. */
.fly-stage {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-top: 34px;
  height: clamp(132px, 15vw, 186px);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: height     .7s cubic-bezier(.65, 0, .35, 1),
              margin-top .7s cubic-bezier(.65, 0, .35, 1),
              opacity    .42s ease;
}
.fly.is-flying .fly-stage { opacity: 1; }

/* Must come after .is-flying so it wins when both are present. */
.fly.is-clear .fly-stage { height: 0; margin-top: 0; opacity: 0; }

/* ── The route. Straight, horizontal, no curve and no tilt. ── */
.fly-route { position: absolute; left: 0; right: 0; top: 58%; height: 0; }

.fly-route__line {
  position: absolute;
  left: 5%; right: 5%; top: -1px;
  height: 2px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg,
              var(--orange-line) 0 11px, transparent 11px 24px);
  transform: scaleX(0);
  transform-origin: left center;
}
.fly.is-flying .fly-route__line {
  animation: fly-line .95s cubic-bezier(.3, 0, .2, 1) forwards;
}
@keyframes fly-line { to { transform: scaleX(1); } }

/* Origin and destination markers. Deliberately unnamed. */
.fly-pin { position: absolute; top: 0; opacity: 0; }
.fly-pin--a { left: 5%; }
.fly-pin--b { left: 95%; }
.fly-pin i {
  display: block;
  width: 11px; height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--orange);
}
.fly-pin em {
  position: absolute;
  top: 13px; left: 0;
  transform: translateX(-50%);
  font-style: normal;
  font-size: .71rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
  white-space: nowrap;
}
.fly.is-flying .fly-pin { animation: fly-fade .5s ease .28s forwards; }
@keyframes fly-fade { to { opacity: 1; } }

/* ── The aircraft ──
   The wrapper carries the movement, the inner span carries the
   size, so 11a can resize the aircraft without shortening the wake.
   translateX only. No rotate, ever. */
.fly-flyer {
  position: absolute;
  left: 0; top: 58%;
  width: calc(340px * var(--plane-scale, .45));
  transform: translate(-24vw, -50%);
  opacity: 0;
  will-change: transform;
}
/* SPEED. This duration and FLIGHT in changes.js are one setting in
   two files. Change one and you must change the other, or the band
   collapses while the aircraft is still on screen.
     4.2s  current, an unhurried cruise
     2.6s  the previous build, too quick to read
   The easing is near constant speed on purpose. An aircraft that
   accelerates across the frame reads as a launch, not a flight. */
.fly.is-flying .fly-flyer {
  animation: fly-cross 4.2s cubic-bezier(.32, .04, .38, .98) forwards;
}
@keyframes fly-cross {
  0%   { transform: translate(-24vw, -50%); opacity: 0; }
  7%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translate(118vw, -50%); opacity: 0; }
}

.fly-plane { display: block; }
.fly-plane img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 14px 20px rgba(20, 22, 26, .15));
}

/* Sits inside the wrapper, so it is glued to the aircraft with
   no timing to keep in sync. */
.fly-wake {
  position: absolute;
  right: 58%; top: 50%;
  width: 30vw; height: 3px;
  transform: translateY(-50%);
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(247, 146, 30, .5));
}

/* ── 11e. The reviews, once the band is out of the way ── */
.fly-reviews {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Four or more, added by front-page.php. CSS only, no script. */
.fly-reviews.is-rail {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 16px;
  margin: 0 -4px;
}
.fly-reviews.is-rail .fly-review {
  flex: 0 0 min(340px, 80vw);
  scroll-snap-align: start;
}
.fly-reviews.is-rail::-webkit-scrollbar { height: 6px; }
.fly-reviews.is-rail::-webkit-scrollbar-thumb {
  background: var(--orange-line); border-radius: 99px;
}

.fly-review { opacity: 0; transform: translateY(30px) scale(.96); }
.fly-review.is-in {
  animation: fly-review-in .5s cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes fly-review-in { to { opacity: 1; transform: none; } }

.fly-review__card {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .07);
  box-shadow: 0 14px 40px rgba(20, 22, 26, .07);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.fly-review__card:hover {
  transform: translateY(-4px);
  border-color: var(--orange-line);
  box-shadow: 0 22px 54px rgba(20, 22, 26, .11);
}
.fly-review__card .stars { color: var(--orange); letter-spacing: 2px; margin-bottom: 12px; }
.fly-review__card blockquote { margin: 0 0 18px; font-size: .93rem; line-height: 1.7; flex: 1; }
.fly-review__card .who {
  display: flex; align-items: center; gap: 12px;
  padding-top: 15px; border-top: 1px solid rgba(0, 0, 0, .07);
}
.fly-review__card .avatar {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--orange-soft);
  color: var(--orange);
  font-weight: 700; font-size: .82rem;
  flex: none;
}
.fly-review__card .who b { display: block; font-size: .88rem; }
.fly-review__card .who span { font-size: .76rem; color: var(--muted); line-height: 1.5; }

/* ── Phones. No flight, cards straight away, nobody waits. ── */
@media (max-width: 900px) {
  .fly-stage { display: none; }
  .fly-reviews { grid-template-columns: 1fr; }
  .fly-review { opacity: 1; transform: none; animation: none; }
}


/* ═══════════════════════════════════════════════════════════
   Point 12. FAQ
   ═══════════════════════════════════════════════════════════ */

.faq { max-width: 820px; margin: 0 auto; }

.faq-item {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: #fff;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.faq-item[open] { border-color: var(--orange-line); box-shadow: 0 8px 26px rgba(247,146,30,.09); }

.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item__mark {
  position: relative;
  width: 18px; height: 18px;
  flex: none;
}
.faq-item__mark::before,
.faq-item__mark::after {
  content: '';
  position: absolute;
  background: var(--orange);
  border-radius: 2px;
  transition: transform .28s ease, opacity .28s ease;
}
.faq-item__mark::before { top: 8px; left: 0; width: 18px; height: 2px; }
.faq-item__mark::after  { left: 8px; top: 0; width: 2px; height: 18px; }
.faq-item[open] .faq-item__mark::after { transform: rotate(90deg); opacity: 0; }

.faq-item__body { padding: 0 20px 20px; }
.faq-item__body p { margin: 0; color: var(--muted); line-height: 1.72; font-size: .93rem; }


/* ═══════════════════════════════════════════════════════════
   Point 14. BLACK CTA BAND
   ═══════════════════════════════════════════════════════════ */

.band {
  position: relative;
  padding-block: clamp(64px, 8vw, 104px);
  background: #0E1013;
  color: #fff;
  text-align: center;
  overflow: hidden;
}
/* .band::before {
  content: '';
  position: absolute;
  top: -40%; left: 50%;
  width: 780px; height: 780px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(247,146,30,.16) 0%, transparent 62%);
  pointer-events: none;
} */

.band .wrap { position: relative; max-width: 780px; }

.eyebrow--light { color: var(--orange); justify-content: center; }

.band-head { margin: 8px 0 20px; line-height: 1.1; }
.band-head__main {
  display: block;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
}
/* 14d. Smaller and Semi-Bold. */
.band-head__sub {
  display: block;
  font-size: clamp(1.5rem, 2.9vw, 2.15rem);   /* about 72% */
  font-weight: 600;
  color: var(--orange);
  margin-top: .08em;
}

/* 14c. The Join 15,000+ wording, in the empty middle area. */
.band-body {
  max-width: 620px;
  margin: 0 auto 30px;
  font-size: 1.02rem;
  line-height: 1.75;
  color: rgba(255,255,255,.78);
}

.band-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.btn-ghost {
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  background: transparent;
}
.btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); }


/* ═══════════════════════════════════════════════════════════
   Point 15. WHY US, FOUR POINTS
   ═══════════════════════════════════════════════════════════ */

.whyus-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}

.whyus-item {
  position: relative;
  padding: 30px 26px 26px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.07);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.whyus-item:hover {
  transform: translateY(-5px);
  border-color: var(--orange-line);
  box-shadow: 0 18px 44px rgba(20,22,26,.09);
}

.whyus-item__no {
  position: absolute;
  top: 18px; right: 20px;
  font-size: 1.5rem;
  font-weight: 800;
  color: rgba(0,0,0,.06);
}
.whyus-item__ico {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--orange-soft);
  color: var(--orange);
  margin-bottom: 16px;
}
.whyus-item h3 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 600; }
.whyus-item p  { margin: 0; font-size: .9rem; line-height: 1.68; color: var(--muted); }


/* ═══════════════════════════════════════════════════════════
   Point 16 and A3. FOOTER
   ═══════════════════════════════════════════════════════════ */

/* A3. The tagline is blue. Brand rules do not allow recolouring it. */
.foot-tagline {
  display: block;
  color: var(--blue);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .02em;
  margin-top: 6px;
}

/* 16c. The SMS block. Wording is the client's, links must resolve. */
.sms-block {
  margin-top: 30px;
  padding: 22px 24px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
}
.sms-block h4 {
  margin: 0 0 10px;
  font-size: .95rem;
  font-weight: 600;
  color: #fff;
}
.sms-block p {
  margin: 0;
  font-size: .84rem;
  line-height: 1.7;
  color: rgba(255,255,255,.66);
}
.sms-block a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sms-block a:hover { color: #fff; }


/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  /* The old .fly-plane and .fly-trail selectors are gone. The band is
     hidden outright, so nothing animates and nothing is left blank. */
  .fly-stage { display: none; }
  .fly-review { opacity: 1 !important; transform: none !important; animation: none !important; }
  .svc-panel, .svc-panel__cap, .how-media__img { transition: none !important; }
}

/* Footer lane links, carried over from Sample 2. */
.foot-lanes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.foot-lanes a {
  font-size: .82rem;
  color: rgba(255,255,255,.6);
  text-decoration: none;
}
.foot-lanes a:hover { color: var(--orange); }

/* ═══════════════════════════════════════════════════════════
   HERO STAT NUMBERS

   site.css styles `.hstat span` as the small uppercase label.
   That selector also caught `<span class="count">` sitting
   inside the `<b>`, so the number rendered small and grey on
   its own line while only the suffix stayed large. The number
   now inherits from the `<b>` again.
   ═══════════════════════════════════════════════════════════ */

.hstat b .count {
  display: inline;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

/* Give the four stats even columns rather than letting them bunch left. */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 22px 18px;
}

/* Poster image standing in for the hero video. */
img.hero-video { object-fit: cover; }

/* ═══════════════════════════════════════════════════════════
   CALCULATOR CARD

   The plugin ships its own white card (.qs-calc has a
   background, border, padding and shadow). The theme's
   .quote-card would sit around it as a second card, so in the
   hero the outer one becomes a plain wrapper and the plugin's
   card is the one you see.
   ═══════════════════════════════════════════════════════════ */

.hero .quote-card {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}

.hero .quote-card .qsc-wrap { position: relative; z-index: 1; }

/* The FAQ line and the accent image sit outside the plugin card. */
.hero .quote-card__faq { margin-top: 12px; }
.hero .quote-card__accent { top: -22px; right: -14px; z-index: 2; }


/* ═══════════════════════════════════════════════════════════
   4c of 4  ::  assets/css/brand.css

   APPEND everything below to the end of brand.css. Nothing here
   overwrites an existing rule.

   Covers both new templates. Everything else on those pages
   reuses classes that already exist: .sec .sec-head .btn
   .card-link .faq-item .band .carriers .fly-review.

   Bump the theme version afterwards.
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   SERVICES, shared by the archive and the single
   ═══════════════════════════════════════════════════════════ */

.svc-hero {
  position: relative;
  overflow: hidden;
  background: #FFF9F2;
  padding: clamp(34px, 4.5vw, 58px) 0 clamp(52px, 6vw, 84px);
}
.svc-hero::after {
  content: '';
  position: absolute;
  right: -8%; top: -34%;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 146, 30, .15), transparent 68%);
  pointer-events: none;
}
.svc-hero .wrap { position: relative; z-index: 2; }
.svc-hero h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.12; }
.svc-hero__lead {
  color: var(--muted);
  font-size: 1.03rem;
  line-height: 1.78;
  margin: 18px 0 26px;
  max-width: 52ch;
}
.svc-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

.crumb { font-size: .79rem; color: var(--muted); margin: 0 0 18px; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--orange); }
.crumb span { margin: 0 7px; opacity: .5; }

.svc-hero__facts {
  display: flex; flex-wrap: wrap; gap: 34px;
  margin-top: 34px; padding-top: 26px;
  border-top: 1px solid var(--orange-line);
}
.svc-hero__facts b {
  display: block;
  font-family: var(--font-head);
  font-size: 1.7rem; font-weight: 800;
  letter-spacing: -.03em; line-height: 1;
}
.svc-hero__facts span { font-size: .78rem; color: var(--muted); }


/* ═══════════════════════════════════════════════════════════
   ARCHIVE, the card grid
   ═══════════════════════════════════════════════════════════ */

/* REF SC-4. The client asked for all five services on one line. The
   count comes from a field, printed onto the element as --cols, so a
   sixth service published later is a number change in wp-admin rather
   than an edit here.

   Only above 1200px. Below that auto-fit takes over and fits whatever
   the width allows, which is what stops five 253px cards becoming five
   90px ones on a laptop. */
.svc-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
@media (min-width: 1201px) {
  .svc-grid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }

  /* Five across leaves each card near 250px, so the copy inside has to
     give a little or the cards run very tall. */
  .svc-grid .svc-card__body   { padding: 16px 16px 18px; }
  .svc-grid .svc-card__title  { font-size: 1.02rem; }
  .svc-grid .svc-card__body p { font-size: .84rem; }
}

.svc-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.svc-card:hover {
  transform: translateY(-5px);
  border-color: var(--orange-line);
  box-shadow: 0 24px 56px rgba(20, 22, 26, .11);
}

.svc-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #EFE7DE, #FFF9F2);
  overflow: hidden;
}
.svc-card__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .5s ease;
}
.svc-card:hover .svc-card__media img { transform: scale(1.05); }

.svc-card__ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--orange); opacity: .45;
}

.svc-card__no {
  position: absolute; left: 15px; top: 14px; z-index: 2;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(20, 22, 26, .55);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 800; font-size: .88rem;
}
.svc-card__tag {
  position: absolute; right: 14px; top: 14px; z-index: 2;
  font-size: .67rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--orange); color: #fff;
  padding: 5px 11px; border-radius: 99px;
}

.svc-card__body {
  padding: 22px 24px 26px;
  display: flex; flex-direction: column; flex: 1;
}
.svc-card__title { font-size: 1.2rem; margin: 0; }
.svc-card__title a { color: var(--ink); }
.svc-card:hover .svc-card__title a { color: var(--orange); }

.svc-card__eta {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  margin-top: 12px;
  padding: 5px 12px;
  border-radius: 99px;
  background: var(--orange-soft);
  color: var(--orange);
  font-size: .78rem; font-weight: 600;
}
.svc-card__body p {
  color: var(--muted);
  font-size: .91rem; line-height: 1.7;
  margin: 14px 0 18px;
  flex: 1;
}


/* ═══════════════════════════════════════════════════════════
   ARCHIVE, the comparison table
   ═══════════════════════════════════════════════════════════ */

.svc-tbl {
  overflow-x: auto;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 18px;
  box-shadow: 0 16px 44px rgba(20, 22, 26, .06);
}
.svc-tbl table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  font-size: .91rem;
}
.svc-tbl th,
.svc-tbl td {
  padding: 16px 20px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.svc-tbl thead th {
  background: var(--ink);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600; font-size: .85rem;
  white-space: nowrap;
}
.svc-tbl tbody tr:last-child td { border-bottom: 0; }
.svc-tbl tbody tr:hover { background: #FFF9F2; }
.svc-tbl td b { font-family: var(--font-head); font-size: .96rem; }
.svc-tbl td small {
  display: block;
  font-size: .75rem; color: var(--muted);
  margin-top: 3px;
}
.svc-tbl__end { text-align: right; white-space: nowrap; }

.svc-pill {
  display: inline-block;
  font-size: .76rem; font-weight: 600;
  padding: 5px 12px; border-radius: 99px;
  background: var(--orange-soft);
  color: var(--orange-dark);
  white-space: nowrap;
}
.svc-dim { color: var(--muted); font-size: .84rem; }


/* ═══════════════════════════════════════════════════════════
   SINGLE SERVICE
   ═══════════════════════════════════════════════════════════ */

.svc-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4vw, 58px);
  align-items: center;
}

.svc-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.svc-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .7rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 99px;
  background: var(--orange); color: #fff;
}
.svc-badge--alt {
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(0, 0, 0, .08);
  text-transform: none;
  letter-spacing: .01em;
  font-size: .78rem;
}

.svc-hero__media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #E9E0D6, #FFF9F2);
  box-shadow: 0 26px 70px rgba(20, 22, 26, .13);
}
.svc-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-hero__ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--orange); opacity: .4;
}


/* ── The editor content ──
   Whatever the client types comes out designed. This is what
   lets one template serve six different services without a
   single extra field. */
.svc-prose {
  max-width: 780px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.82;
}
.svc-prose > *:first-child { margin-top: 0; }
.svc-prose > *:last-child  { margin-bottom: 0; }

.svc-prose h2 {
  font-family: var(--font-head);
  color: var(--ink);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  line-height: 1.2;
  margin: 46px 0 14px;
}
.svc-prose h3 {
  font-family: var(--font-head);
  color: var(--ink);
  font-size: 1.14rem;
  margin: 32px 0 10px;
}
.svc-prose p { margin: 0 0 18px; }
.svc-prose a { color: var(--blue); font-weight: 500; }
.svc-prose a:hover { text-decoration: underline; }
.svc-prose strong { color: var(--ink); font-weight: 600; }

.svc-prose ul,
.svc-prose ol { margin: 0 0 22px; padding-left: 0; list-style: none; }
.svc-prose ol { counter-reset: qsli; }
.svc-prose li { position: relative; padding-left: 30px; margin-bottom: 11px; }

.svc-prose ul li::before {
  content: '';
  position: absolute; left: 4px; top: .62em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
}
.svc-prose ol li { counter-increment: qsli; }
.svc-prose ol li::before {
  content: counter(qsli);
  position: absolute; left: 0; top: .1em;
  width: 21px; height: 21px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--orange-soft);
  color: var(--orange-dark);
  font-family: var(--font-head);
  font-size: .74rem; font-weight: 700;
}

.svc-prose blockquote {
  margin: 26px 0;
  padding: 20px 24px;
  border-left: 3px solid var(--orange);
  border-radius: 0 12px 12px 0;
  background: #FFF9F2;
  color: var(--ink);
  font-size: 1.02rem;
}
.svc-prose blockquote p:last-child { margin: 0; }

.svc-prose img { max-width: 100%; height: auto; border-radius: 14px; margin: 12px 0; }

.svc-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: .92rem;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 14px;
  overflow: hidden;
}
.svc-prose th,
.svc-prose td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.svc-prose th {
  background: #FFF9F2;
  font-family: var(--font-head);
  color: var(--ink);
  font-weight: 600;
}
.svc-prose tr:last-child td { border-bottom: 0; }


/* ── Sibling services ── */
.svc-sibs {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.svc-sib {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 14px;
  padding: 22px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.svc-sib:hover {
  transform: translateY(-3px);
  border-color: var(--orange-line);
  box-shadow: 0 16px 40px rgba(20, 22, 26, .08);
}
.svc-sib.is-now {
  border-color: var(--orange);
  background: var(--orange-soft);
}
.svc-sib.is-now:hover { transform: none; box-shadow: none; }
.svc-sib h3 { font-size: .99rem; margin: 0 0 6px; }
.svc-sib em {
  font-style: normal;
  font-size: .79rem; font-weight: 600;
  color: var(--orange);
}
.svc-sib p {
  color: var(--muted);
  font-size: .85rem; line-height: 1.68;
  margin: 10px 0 12px;
}
.svc-sib__now {
  font-size: .8rem; font-weight: 600;
  color: var(--orange-dark);
}


/* ── Phones ── */
@media (max-width: 900px) {
  .svc-hero__grid { grid-template-columns: 1fr; }
  .svc-hero__media { order: -1; aspect-ratio: 16 / 10; }
  .svc-hero__facts { gap: 24px; }
}



/* ═══════════════════════════════════════════════════════════
   Services archive, live rate calculator section

   The calculator itself is styled by the rate calculator plugin.
   These rules only cover the service jump control above it and
   the box the shortcode sits in, so the plugin can be updated
   without this file needing to follow.
   ═══════════════════════════════════════════════════════════ */

/* Was a styled <select>. It is a link now, for the reason set out in
   archive-qs_service.php: a select above a form reads as a filter for
   that form, and this one navigated away from it instead. */
.svc-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: baseline;
  justify-content: center;
  margin: 0 auto 26px;
  font-size: .88rem;
}
.svc-jump__lab { color: var(--muted); }
.svc-jump__link {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--orange);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color .18s ease;
}
.svc-jump__link:hover { border-bottom-color: var(--orange); }
.svc-jump__link .arrow { transition: transform .18s ease; }
.svc-jump__link:hover .arrow { transform: translateY(-2px); }

.svc-calc { max-width: 860px; margin: 0 auto; }


/* ═══════════════════════════════════════════════════════════
   SINGLE SERVICE, SECTIONS A TO E

   Every one of these sections is optional and hides itself when
   its fields are empty, so a half filled service degrades to a
   shorter page rather than a broken one.
   ═══════════════════════════════════════════════════════════ */

/* ── A. Facts bar ── */
.svc-facts-sec { padding-block: clamp(28px, 4vw, 44px); }

.svc-facts {
  list-style: none;
  margin: 0;
  padding: 22px 26px;
  display: grid;
  gap: 22px 34px;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  border-radius: 18px;
  background: linear-gradient(180deg, #fff 0%, #FFF9F2 100%);
  border: 1px solid rgba(0, 0, 0, .07);
  box-shadow: 0 12px 34px rgba(20, 22, 26, .05);
}
.svc-facts li {
  display: flex;
  flex-direction: column;
  gap: 5px;
  /* Divider between cells, suppressed on the first of each row by the
     wrap safe approach of drawing it on the left and hiding cell one. */
  padding-left: 18px;
  border-left: 1px solid rgba(0, 0, 0, .08);
}
.svc-facts li:first-child { padding-left: 0; border-left: 0; }

.svc-facts__k {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.svc-facts__v {
  font-family: var(--display);
  font-size: 1.02rem;
  color: var(--ink);
  line-height: 1.35;
}

/* ── B. How it works ── */
.svc-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  counter-reset: none;
}
.svc-step {
  position: relative;
  padding: 26px 24px 24px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .07);
  box-shadow: 0 12px 34px rgba(20, 22, 26, .05);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.svc-step:hover {
  transform: translateY(-4px);
  border-color: var(--orange-line);
  box-shadow: 0 20px 48px rgba(20, 22, 26, .09);
}
.svc-step__no {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--orange-soft);
  color: var(--orange);
  font-family: var(--display);
  font-size: .8rem;
  font-weight: 700;
}
.svc-step__t { display: block; font-family: var(--display); font-size: 1rem; color: var(--ink); }
.svc-step__b { margin: 8px 0 0; font-size: .88rem; line-height: 1.65; color: var(--muted); }

/* ── C. Right fit, wrong fit ── */
.svc-fit {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
  max-width: 940px;
  margin: 0 auto;
}
.svc-fit__col {
  padding: 28px 26px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .07);
  box-shadow: 0 12px 34px rgba(20, 22, 26, .05);
}
.svc-fit__col h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  font-size: 1rem;
}
/* Green for the yes column, muted red for the no column. Deliberately
   not brand orange: orange is the action colour on this site and these
   two are information, not something to click. */
.svc-fit__col--yes h3 { color: #2E7D4F; }
.svc-fit__col--no  h3 { color: #B4453C; }

.svc-fit__col ul { list-style: none; margin: 0; padding: 0; }
.svc-fit__col li {
  position: relative;
  padding: 9px 0 9px 20px;
  font-size: .9rem;
  line-height: 1.6;
  border-top: 1px solid rgba(0, 0, 0, .06);
}
.svc-fit__col li:first-child { border-top: 0; }
.svc-fit__col li::before {
  content: "";
  position: absolute;
  left: 2px; top: 17px;
  width: 6px; height: 6px;
  border-radius: 50%;
}
.svc-fit__col--yes li::before { background: #2E7D4F; }
.svc-fit__col--no  li::before { background: #B4453C; }

/* ── D. Pricing note ── */
.svc-price {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.svc-price h2 { margin: 0 0 16px; }
.svc-price__b {
  margin: 0 0 14px;
  font-size: .96rem;
  line-height: 1.75;
  color: var(--muted);
}
.svc-price__n {
  margin: 0 0 24px;
  font-size: .8rem;
  color: var(--muted);
  opacity: .8;
}

@media (max-width: 760px) {
  .svc-fit { grid-template-columns: 1fr; }
  .svc-facts li { padding-left: 0; border-left: 0; }
}


/* ═══════════════════════════════════════════════════════════
   INTEGRATIONS ARCHIVE, /integrations/

   The card itself reuses .int-card from site.css untouched, so
   the home page and this page cannot drift apart. Only the wider
   grid and the third line of text are new.
   ═══════════════════════════════════════════════════════════ */

.int-cards--all { grid-template-columns: repeat(auto-fill, minmax(min(268px, 100%), 1fr)); }

.int-card--all { align-items: flex-start; }
.int-card--all .int-badge { flex: none; }

.int-card__desc {
  display: block;
  margin-top: 6px;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--muted);
}

.int-api {
  max-width: 660px;
  margin: 0 auto;
  text-align: center;
}
.int-api__mark {
  display: grid;
  place-items: center;
  width: 82px; height: 82px;
  margin: 0 auto 20px;
  border-radius: 22px;
  background: var(--orange-soft);
  color: var(--orange);
}
.int-api h2 { margin: 0 0 14px; }
.int-api p  { margin: 0 0 26px; font-size: .95rem; line-height: 1.75; color: var(--muted); }


/* ═══════════════════════════════════════════════════════════
   LEGAL DOCUMENT TEMPLATE

   One template serves Privacy, Terms, Cookie Policy and SMS
   Terms. Everything below styles content typed in the normal
   WordPress editor, so the client never touches markup.
   ═══════════════════════════════════════════════════════════ */

.legal-head {
  padding: clamp(38px, 6vw, 70px) 0 clamp(24px, 3vw, 38px);
  background: linear-gradient(180deg, #FFF9F2 0%, #fff 100%);
}
.legal-head h1 { margin: 6px 0 0; max-width: 20ch; }

.legal-updated {
  margin: 14px 0 0;
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
}
.legal-lead {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: .98rem;
  line-height: 1.75;
  color: var(--muted);
}

.legal-sec { padding-top: clamp(30px, 4vw, 50px); }

.legal-grid {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 52px;
  align-items: start;
}
.legal-grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 780px; margin: 0 auto; }

/* ── Contents ── */
/* top must clear the sticky site header, which is 96px including the
   utility bar. max-height keeps a long list, Terms has 26 clauses,
   from running past the bottom of the viewport where the last few
   entries would be unreachable. */
.legal-toc {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  /* Stops the browser chaining a scroll at the end of this list to
     the page behind it, which reads as the page jumping. */
  overscroll-behavior: contain;
}
.legal-toc__box {
  padding: 20px 18px;
  border-radius: 16px;
  background: #FFF9F2;
  border: 1px solid rgba(0, 0, 0, .07);
}
/* The summary needs to look like a control.

   Without a marker this rendered as a plain heading in a beige box.
   It was clickable, but nothing on screen said so, so a closed
   contents list looked like a broken one. The default triangle is
   suppressed because it sits badly against the display font, and a
   chevron that rotates on open is drawn instead. */
.legal-toc__box > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--display);
  font-size: .92rem;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.legal-toc__box > summary::-webkit-details-marker { display: none; }
.legal-toc__box > summary::marker { content: ""; }

.legal-toc__box > summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s ease;
}
.legal-toc__box[open] > summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}
.legal-toc__box > summary:hover { color: var(--orange); }

/* Keyboard focus has to be visible, this is a real control. */
.legal-toc__box > summary:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
  border-radius: 6px;
}

.legal-toc ol {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  max-height: 62vh;
  overflow-y: auto;
}
.legal-toc a {
  display: block;
  padding: 7px 0 7px 12px;
  position: relative;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
/* No generated counter here.

   These documents already number their own clauses, "06 Cookies and
   similar technologies", because the numbering is part of the approved
   text and clauses are cross-referenced by number elsewhere in the
   policy. A CSS counter on top of that produced "06 06 Cookies".

   It also could not be trusted: a CSS counter numbers by position in
   the list, so if a clause were ever removed the sidebar would say 09
   while the document said 10, and a legal cross-reference would point
   at the wrong clause. The document's own numbers are the only ones
   that can be correct. */
.legal-toc a { padding-left: 12px; }
.legal-toc a:hover { color: var(--orange); border-left-color: var(--orange); }

/* ── The document itself ── */
.legal-prose { max-width: 74ch; }

.legal-prose h2 {
  margin: 46px 0 14px;
  padding-top: 22px;
  font-size: 1.22rem;
  line-height: 1.35;
  border-top: 1px solid rgba(0, 0, 0, .08);
  /* Clears the sticky header when jumped to from the contents. */
  scroll-margin-top: 96px;
}
.legal-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-prose h3 { margin: 30px 0 10px; font-size: 1.02rem; }

.legal-prose p,
.legal-prose li { font-size: .93rem; line-height: 1.8; color: var(--body, #4a4f57); }
.legal-prose p  { margin: 0 0 15px; }

.legal-prose ul,
.legal-prose ol { margin: 0 0 18px; padding-left: 22px; }
.legal-prose li { margin-bottom: 8px; }

.legal-prose a { color: var(--orange); text-underline-offset: 3px; }

.legal-prose strong { color: var(--ink); }

.legal-prose blockquote {
  margin: 22px 0;
  padding: 16px 20px;
  border-left: 3px solid var(--orange);
  border-radius: 0 12px 12px 0;
  background: #FFF9F2;
  font-size: .9rem;
}
.legal-prose blockquote p:last-child { margin-bottom: 0; }

/* Tables are common in cookie policies. Scrolls sideways on a phone
   rather than forcing the whole page wide. */
.legal-prose table {
  width: 100%;
  margin: 22px 0;
  border-collapse: collapse;
  font-size: .85rem;
}
.legal-prose thead th {
  text-align: left;
  padding: 11px 13px;
  background: #FFF9F2;
  border-bottom: 2px solid var(--orange-line);
  font-family: var(--display);
  font-size: .8rem;
}
.legal-prose td {
  padding: 11px 13px;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
  vertical-align: top;
}

.legal-contact {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}
.legal-contact h2 { margin: 0 0 12px; font-size: 1.3rem; }
.legal-contact p  { margin: 0 0 22px; font-size: .93rem; line-height: 1.8; color: var(--muted); }

@media (max-width: 900px) {
  .legal-grid { grid-template-columns: 1fr; gap: 26px; }
  /* Stacked above the article, so it must not stick and must not
     carry the desktop height cap either, or it becomes a short
     scrollable box inside a page that is already scrolling. */
  .legal-toc  { position: static; max-height: none; overflow: visible; }
  /* Left closed on a phone by the script in page-legal.php. */
  .legal-toc__box[open] > summary { margin-bottom: 4px; }
  .legal-toc ol { max-height: 44vh; }
  .legal-prose table { display: block; overflow-x: auto; white-space: nowrap; }
}


/* ═══════════════════════════════════════════════════════════
   Reveal safety net

   [data-rv] starts at opacity 0 and is revealed by an observer
   in site.js. If that script fails to load, or an element is too
   tall for the observer's threshold to ever be met, the content
   is in the DOM but invisible. On a marketing page that is a
   missing animation. On a legal page it is a policy nobody can
   read, which is a compliance problem, not a styling one.

   So inside a legal document nothing is ever hidden waiting for
   JavaScript. The header still animates, the document does not.
   ═══════════════════════════════════════════════════════════ */

.legal-prose [data-rv],
.legal-toc   [data-rv] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}


/* ═══════════════════════════════════════════════════════════
   BLOG, LISTING AND SINGLE

   The article body reuses .legal-grid, .legal-toc and
   .legal-prose from the section above. One set of long-form
   reading styles for the whole site, so a fix to line height
   or table behaviour lands on the policies and the blog at
   the same time. Only the cards and the furniture are new.
   ═══════════════════════════════════════════════════════════ */

/* ── Category pills ── */
.blog-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }

.blog-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, .1);
  background: #fff;
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.blog-pill span {
  font-size: .68rem;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--orange-soft);
  color: var(--orange);
}
.blog-pill:hover { border-color: var(--orange-line); color: var(--ink); }
.blog-pill.is-on { background: var(--orange); border-color: var(--orange); color: #fff; }
.blog-pill.is-on span { background: rgba(255, 255, 255, .22); color: #fff; }

/* ── Lead article ── */
.blog-lead {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  margin-bottom: 42px;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .07);
  box-shadow: 0 16px 44px rgba(20, 22, 26, .06);
  text-decoration: none;
  transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}
.blog-lead:hover {
  transform: translateY(-4px);
  border-color: var(--orange-line);
  box-shadow: 0 26px 60px rgba(20, 22, 26, .1);
}

.blog-lead__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(160deg, #FFF3E4 0%, #FFF9F2 100%);
}
.blog-lead__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.blog-lead:hover .blog-lead__media img { transform: scale(1.04); }
.blog-lead__ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--orange); opacity: .4; }

.blog-lead__flag {
  position: absolute;
  top: 14px; left: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.blog-lead__body { display: flex; flex-direction: column; justify-content: center; padding: 34px 34px 32px; }
.blog-lead__body h2 { margin: 12px 0 10px; font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.25; }
.blog-lead__body p  { margin: 0 0 18px; font-size: .92rem; line-height: 1.7; color: var(--muted); }

/* ── Card grid ── */
.blog-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(min(285px, 100%), 1fr));
}

.blog-card {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .07);
  box-shadow: 0 12px 34px rgba(20, 22, 26, .05);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  border-color: var(--orange-line);
  box-shadow: 0 20px 48px rgba(20, 22, 26, .09);
}

.blog-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(160deg, #FFF3E4 0%, #FFF9F2 100%);
}
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.blog-card:hover .blog-card__media img { transform: scale(1.05); }
.blog-card__ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--orange); opacity: .4; }

.blog-card__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }

.blog-card__cat {
  align-self: flex-start;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--orange);
  text-decoration: none;
}
.blog-card h3 { margin: 9px 0 8px; font-size: 1.02rem; line-height: 1.35; }
.blog-card h3 a { color: var(--ink); text-decoration: none; }
.blog-card h3 a:hover { color: var(--orange); }
.blog-card p { margin: 0 0 16px; font-size: .86rem; line-height: 1.65; color: var(--muted); }

.blog-card__meta,
.blog-lead .blog-card__meta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  font-size: .76rem;
  color: var(--muted);
}
.blog-card__meta i {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}

/* ── Pagination ── */
.pagination { margin-top: 42px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pagination .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  padding: 9px 14px;
  border-radius: 11px;
  border: 1px solid rgba(0, 0, 0, .1);
  background: #fff;
  font-size: .85rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.pagination .page-numbers:hover { border-color: var(--orange-line); color: var(--ink); }
.pagination .page-numbers.current { background: var(--orange); border-color: var(--orange); color: #fff; }
.pagination .page-numbers.dots { border-color: transparent; background: none; }
.pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Single post ── */
.blog-byline { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.blog-byline__av { border-radius: 50%; }
.blog-byline b { display: block; font-family: var(--display); font-size: .92rem; color: var(--ink); }
.blog-byline span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  color: var(--muted);
}
.blog-byline i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }

.blog-hero { padding-top: 26px; }
.blog-hero__img {
  border-radius: 22px;
  overflow: hidden;
  max-height: 460px;
  box-shadow: 0 20px 54px rgba(20, 22, 26, .1);
}
.blog-hero__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Blog prose runs slightly wider than a policy. Legal text is scanned
   for a clause, an article is read straight through. */
.blog-prose { max-width: 72ch; }
.blog-prose h2 { border-top: 0; padding-top: 0; margin-top: 40px; font-size: 1.35rem; }
.blog-prose p, .blog-prose li { font-size: .97rem; }

.blog-prose img,
.blog-prose figure { border-radius: 14px; overflow: hidden; margin: 26px 0; }
.blog-prose img { max-width: 100%; height: auto; display: block; }
.blog-prose figcaption { margin-top: 8px; font-size: .78rem; color: var(--muted); text-align: center; }

.blog-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 34px 0 0; }
.blog-tags a {
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--orange-soft);
  color: var(--orange);
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
}
.blog-tags a:hover { background: var(--orange); color: #fff; }

.blog-share {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, .08);
  font-size: .84rem;
}
.blog-share span { font-weight: 600; color: var(--muted); }
.blog-share a { color: var(--orange); text-underline-offset: 3px; }

.blog-pagelinks { margin-top: 28px; font-size: .86rem; font-weight: 600; }
.blog-pagelinks a { color: var(--orange); }

.blog-author {
  display: flex;
  gap: 20px;
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 26px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .07);
}
.blog-author__av { border-radius: 50%; flex: none; }
.blog-author__k {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--orange);
}
.blog-author b { display: block; margin: 4px 0 8px; font-family: var(--display); font-size: 1.05rem; color: var(--ink); }
.blog-author p { margin: 0 0 12px; font-size: .88rem; line-height: 1.7; color: var(--muted); }

@media (max-width: 860px) {
  .blog-lead { grid-template-columns: 1fr; }
  .blog-lead__body { padding: 24px 22px 26px; }
  .blog-author { flex-direction: column; gap: 14px; }
}


/* ═══════════════════════════════════════════════════════════
   SERVICE PAGES, CHANGE BRIEFS OF 23 TO 25 AUGUST 2026

   Everything below styles single-qs_service.php. Six pages share
   one template, so every block here has to look right whether it
   is holding two items or six, and whether the ones either side
   of it are present or missing.

   The brand orange is now corrected in the :root block at the top
   of this file, so var(--brand) and var(--orange) are the same
   colour. Both are used below, matching whichever the surrounding
   rules already use.
   ═══════════════════════════════════════════════════════════ */

/* ── Hero layout ──
   Two columns on a laptop, one on a phone. The media column is a
   positioning context, because the feature strip and the lanes
   card both float over the photo inside it. */
.svc-hero--single .svc-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: center;
}

.svc-hero__col { min-width: 0; }

.svc-hero__sub {
  margin: 10px 0 0;
  font-family: var(--font-head);
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  font-weight: 700;
  color: var(--orange);
  line-height: 1.3;
}

.svc-hero__lead { margin-top: 14px; }

/* ── Transit badge with a qualifier under it ──
   LTL asks for "depending on the destination" to sit under the
   time rather than inside the body copy, so the badge becomes a
   two line block. Services without a qualifier are unaffected,
   because the small element is simply not printed. */
.svc-badge--alt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.svc-badge--alt b { font-weight: 700; }
.svc-badge--alt small {
  display: block;
  flex-basis: 100%;
  margin-left: 22px;
  font-size: .74rem;
  font-weight: 500;
  line-height: 1.25;
  opacity: .72;
}

/* ── Savings callout ──
   Bordered rather than filled, so it reads as a note beside the
   buttons and does not compete with the primary CTA under it. */
.svc-save {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 0;
  padding: 12px 18px;
  border: 1.5px solid var(--orange-line);
  border-radius: 12px;
  background: var(--orange-soft);
}
.svc-save__mark { display: flex; color: var(--orange); flex: none; }
.svc-save__txt { display: flex; flex-direction: column; line-height: 1.25; }
.svc-save__txt b {
  font-family: var(--font-head);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--orange);
}
.svc-save__txt span { font-size: .86rem; color: var(--muted); }

/* ── The photo ── */
.svc-hero__media { position: relative; min-width: 0; }

.svc-hero__fig {
  position: relative;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--tint);
}
.svc-hero__fig img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}
.svc-hero__ph {
  display: grid;
  place-items: center;
  min-height: 320px;
  color: var(--orange);
  opacity: .5;
}

/* ── The overlay mark ──
   Time Critical's 48HR badge, rebuilt as text rather than baked
   into the photograph. It stays sharp at any density, scales with
   the viewport and can be translated. */
.svc-ov {
  position: absolute;
  top: 22px; left: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 16px 20px;
  border: 2px dashed rgba(255, 255, 255, .85);
  border-radius: 14px;
  background: rgba(20, 22, 26, .34);
  backdrop-filter: blur(3px);
  color: #fff;
  text-align: center;
}
.svc-ov__big {
  font-family: var(--font-head);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
}
.svc-ov__sub {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .92;
}

/* ── Feature strip over the photo ──
   auto-fit so two, three or four items all fill the row evenly.
   It overlaps the lower edge of the photo on a wide screen and
   drops below it on a phone, which is the brief's requirement
   that it never cover the subject of the photograph. */
.svc-feats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 4px;
  margin: -46px 18px 0;
  padding: 16px 10px;
  list-style: none;
  border: 1.5px solid var(--orange-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(23, 20, 18, .12);
}
.svc-feats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  text-align: center;
  line-height: 1.25;
}
.svc-feats li + li { border-left: 1px solid var(--line); }
.svc-feats__i { display: flex; color: var(--orange); }
.svc-feats b { font-size: .88rem; font-weight: 700; }
.svc-feats span { font-size: .76rem; color: var(--muted); }

/* ── The card over the photo ──
   International's lanes, Moves Management's two moving types and
   LTL's two load types are the same component. */
.svc-lanes {
  position: relative;
  z-index: 2;
  margin: -70px 22px 0;
  padding: 18px 20px 20px;
  border: 1.5px solid var(--orange-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 20px 44px rgba(23, 20, 18, .14);
}
.svc-lanes__h {
  margin: 0 0 14px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
}
.svc-lanes__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.svc-lanes__list > li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
}
.svc-lanes__list > li + li { border-left: 1px solid var(--line); padding-left: 20px; }
.svc-lanes__i { display: flex; color: var(--orange); flex: none; margin-top: 2px; }
.svc-lanes__list b { display: block; font-size: .95rem; line-height: 1.3; }
.svc-lanes__s {
  display: block;
  margin-top: 3px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--orange);
  line-height: 1.35;
}
.svc-lanes__ticks { margin: 8px 0 0; padding: 0; list-style: none; }
.svc-lanes__ticks li {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.35;
}
.svc-lanes__ticks li + li { margin-top: 4px; }
.svc-lanes__ticks svg { color: var(--green, #16A34A); flex: none; margin-top: 2px; }
.svc-lanes .card-link { margin-top: 9px; font-size: .82rem; }

/* A link whose destination has not been decided yet. Rendered as
   plain text rather than an anchor, so the card looks finished
   without promising a page that does not exist. */
.card-link.is-pending {
  display: inline-block;
  color: var(--muted);
  cursor: default;
  opacity: .6;
}

/* ── Trust strip ── */
.svc-trust-sec { padding: 30px 0; background: var(--cream, #FDF7F2); }
.svc-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.svc-trust > li {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 6px 0;
  min-width: 0;
}
.svc-trust > li + li { border-left: 1px solid var(--line); padding-left: 26px; }
.svc-trust__i {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--orange-soft);
  color: var(--orange);
}
.svc-trust b { display: block; font-size: .9rem; line-height: 1.3; }
.svc-trust span { font-size: .8rem; color: var(--muted); }

/* ── The three tiers ──
   auto-fit with a 280px minimum, so three cards sit in a row on a
   laptop, two then one as the screen narrows, and a fourth tier
   added in wp-admin wraps rather than squashing the other three. */
.svc-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  margin-top: 34px;
}
.svc-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 46px 24px 26px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: #fff;
  text-align: center;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.svc-tier:hover {
  border-color: var(--orange-line);
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(23, 20, 18, .1);
}
.svc-tier__no {
  position: absolute;
  top: 18px; left: 22px;
  font-family: var(--font-head);
  font-size: .92rem;
  font-weight: 800;
  color: var(--muted);
  opacity: .55;
}
.svc-tier__i {
  display: grid;
  place-items: center;
  width: 74px; height: 74px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--orange-soft);
  color: var(--orange);
}
.svc-tier__t {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.24rem;
  font-weight: 700;
}
.svc-tier__eta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px auto 0;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--orange-soft);
  font-size: .8rem;
  font-weight: 600;
  color: var(--orange);
}
.svc-tier__d {
  margin: 14px 0 0;
  font-size: .89rem;
  color: var(--muted);
  line-height: 1.6;
}

/* The tick list is the only left aligned thing in a centred card.
   Ragged-right text is far easier to scan than centred text, and
   these are the lines a visitor actually compares between tiers. */
.svc-tier__ticks {
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  text-align: left;
}
.svc-tier__ticks li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.45;
}
.svc-tier__ticks li + li { margin-top: 10px; }
.svc-tier__ticks svg { color: var(--green, #16A34A); flex: none; margin-top: 1px; }

/* margin-top:auto pins the link to the bottom, so three cards with
   different amounts of copy still line their links up. */
.svc-tier .card-link { margin-top: auto; padding-top: 20px; align-self: flex-start; }

.svc-tiers__foot {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  max-width: 780px;
  margin: 30px auto 0;
  padding: 14px 22px;
  border: 1.5px solid var(--orange-line);
  border-radius: 12px;
  background: #fff;
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.5;
  text-align: center;
}
.svc-tiers__foot svg { color: var(--orange); flex: none; }

/* ── Right fit and wrong fit ──
   The richer layout from the International brief: an icon, a bold
   title and a description per entry. */
.svc-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 34px;
}
.svc-fit__col {
  padding: 26px 24px 10px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.svc-fit__col--yes { border-color: rgba(22, 163, 74, .3); }
.svc-fit__col--no  { border-color: rgba(214, 40, 40, .26); }

.svc-fit__h {
  display: flex;
  gap: 11px;
  align-items: center;
  margin: 0 0 6px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-head);
  font-size: 1.16rem;
  font-weight: 700;
}
.svc-fit__mark {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
}
.svc-fit__col--yes .svc-fit__mark { background: rgba(22, 163, 74, .12); color: #16A34A; }
.svc-fit__col--no  .svc-fit__mark { background: rgba(214, 40, 40, .1);  color: #D62828; }
.svc-fit__col--yes .svc-fit__h { color: #16A34A; }
.svc-fit__col--no  .svc-fit__h { color: #D62828; }

.svc-fit__list { margin: 0; padding: 0; list-style: none; }
.svc-fit__list > li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 0;
  min-width: 0;
}
.svc-fit__list > li + li { border-top: 1px solid var(--line); }
.svc-fit__i {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: 10px;
  background: var(--orange-soft);
  color: var(--orange);
}
.svc-fit__list b { display: block; font-size: .95rem; line-height: 1.35; color: var(--ink); }
.svc-fit__list p {
  margin: 5px 0 0;
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.55;
}

/* ── Help bar ── */
.svc-help {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 24px;
  padding: 18px 24px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.svc-help__i {
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  flex: none;
  border-radius: 50%;
  background: var(--orange-soft);
  color: var(--orange);
}
.svc-help__txt { flex: 1 1 240px; min-width: 0; }
.svc-help__txt b { display: block; font-size: .98rem; line-height: 1.3; }
.svc-help__txt span { font-size: .85rem; color: var(--muted); }
.svc-help .btn { flex: none; }

/* ── Phones ── */
@media (max-width: 900px) {

  .svc-hero--single .svc-hero__grid { grid-template-columns: 1fr; gap: 32px; }

  /* The strip and the card stop overlapping the photo and sit under
     it instead, so neither ever covers the subject. */
  .svc-feats { margin: 14px 0 0; }
  .svc-lanes { margin: 14px 0 0; }

  /* Vertical stacks lose their vertical rules and gain horizontal
     ones, because a left border on a stacked row reads as an indent
     rather than as a separator. */
  .svc-lanes__list > li + li,
  .svc-trust > li + li,
  .svc-feats li + li {
    border-left: 0;
    padding-left: 0;
  }
  .svc-lanes__list > li + li,
  .svc-trust > li + li { border-top: 1px solid var(--line); padding-top: 14px; }
  .svc-feats li + li { border-top: 1px solid var(--line); padding-top: 12px; }

  .svc-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .svc-feats li + li { border-top: 0; padding-top: 4px; }

  .svc-ov { top: 14px; left: 14px; padding: 12px 15px; }
  .svc-help { flex-direction: column; align-items: flex-start; }
  .svc-help .btn { width: 100%; justify-content: center; }
}

@media (max-width: 600px) {
  .svc-feats { grid-template-columns: 1fr; }
  .svc-feats li { flex-direction: row; gap: 10px; text-align: left; justify-content: flex-start; }
  .svc-tier { padding: 40px 20px 22px; }
  .svc-fit__col { padding: 22px 18px 8px; }
}


/* ═══════════════════════════════════════════════════════════
   HOME, SERVICES AND INTEGRATIONS
   Change briefs of 23 to 25 August 2026

   Three pages, one stylesheet. Where two pages use the same
   component, the class is shared rather than copied, so the
   stat rows on the services page and the integrations page
   cannot drift apart.
   ═══════════════════════════════════════════════════════════ */

/* ── The 10 percent reduction ──
   One custom property drives the whole thing, printed into the head
   by functions.php only on the pages it applies to.

   Seven rules rather than several hundred. These are the values that
   actually control how tall the page is: root type, body type,
   section padding, section head spacing, gutters, buttons, card
   padding and the height of the taller images.

   The floors are the brief's: 15px on desktop, 14px on a phone. They
   are enforced with max(), so setting the scale to 60 clamps rather
   than producing text nobody can read. */
.qs-scaled { font-size: max(15px, calc(16px * var(--qs-scale, 1))); }

.qs-scaled .sec        { padding-block: calc(104px * var(--qs-scale, 1)); }
.qs-scaled .sec-head   { margin-bottom: calc(56px * var(--qs-scale, 1)); }
.qs-scaled .wrap       { padding-inline: calc(24px * var(--qs-scale, 1)); }
.qs-scaled .btn        { padding-block: calc(14px * var(--qs-scale, 1)); }
.qs-scaled .svc-hero   { padding-block: calc(72px * var(--qs-scale, 1)); }
.qs-scaled .hero-stats { gap: calc(28px * var(--qs-scale, 1)); }

.qs-scaled h1 { font-size: clamp(2.1rem, calc(5.2vw * var(--qs-scale, 1)), 3.4rem); }
.qs-scaled h2 { font-size: clamp(1.6rem, calc(3.5vw * var(--qs-scale, 1)), 2.35rem); }

@media (max-width: 900px) {
  .qs-scaled { font-size: max(14px, calc(16px * var(--qs-scale, 1))); }
}


/* ═══════════ HOME, HERO ═══════════ */

.hero-sub {
  margin: 12px 0 0;
  font-family: var(--font-head);
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  font-weight: 700;
  color: var(--orange);
  line-height: 1.25;
}

/* auto-fit, so three or five items read as well as four. */
.hero-feats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px 20px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.hero-feats > li { display: flex; gap: 10px; align-items: center; min-width: 0; }
.hero-feats__i {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: 10px;
  background: var(--orange-soft);
  color: var(--orange);
}
.hero-feats b { display: block; font-size: .82rem; line-height: 1.25; }
.hero-feats span span { font-size: .78rem; color: var(--muted); }


/* ═══════════ HOME, PLATFORM (REF B-2) ═══════════ */

.plat-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.plat-head { margin: 10px 0 12px; line-height: 1.15; }
.plat-left > p, .plat-right > p { color: var(--muted); margin: 0 0 26px; }

/* ── The dashboard mock-up ── */
.dash {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(23, 20, 18, .12);
}
.dash__bar {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.dash__dots { display: flex; gap: 6px; flex: none; }
.dash__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.dash__url {
  flex: 1;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--cream, #FDF7F2);
  font-size: .74rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash__body { padding: 18px; }

.dash__k {
  display: block;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.dash__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.dash__tiles > li {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  min-width: 0;
}
.dash__tiles b {
  display: block;
  margin-top: 5px;
  font-family: var(--font-head);
  font-size: 1.24rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.1;
}
.dash__tiles em, .dash__count em { font-style: normal; font-size: .68rem; color: var(--muted); }
.dash__up   { color: #16A34A !important; }
.dash__down { color: var(--blue) !important; }

.dash__split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: 14px; }
.dash__count {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  align-self: start;
}
.dash__count b {
  display: block;
  margin-top: 6px;
  font-family: var(--font-head);
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
}
.dash__sub { display: block; font-size: .74rem; color: var(--muted); }

.dash__recent { padding: 14px; border: 1px solid var(--line); border-radius: 11px; min-width: 0; }
.dash__recent ul { margin: 10px 0 0; padding: 0; list-style: none; }
.dash__recent li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  font-size: .72rem;
  min-width: 0;
}
.dash__recent li + li { border-top: 1px solid var(--line); }
.dash__recent b { font-weight: 700; color: var(--ink); white-space: nowrap; }
.dash__recent li > span {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash__st {
  font-style: normal;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .64rem;
  font-weight: 600;
  white-space: nowrap;
}
.dash__st--ok   { background: rgba(22, 163, 74, .12); color: #16A34A; }
.dash__st--go   { background: var(--orange-soft); color: var(--orange); }
.dash__st--wait { background: var(--blue-soft); color: var(--blue); }

.dash__rating {
  position: absolute;
  top: 54px; right: -14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 9px 14px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(23, 20, 18, .16);
  line-height: 1.2;
}
.dash__rating b { display: flex; gap: 5px; align-items: center; font-size: .92rem; }
.dash__rating b svg { fill: var(--orange); color: var(--orange); }
.dash__rating > span { font-size: .64rem; color: var(--muted); }

/* ── REF B-3 ──
   One class, two modifiers. The brief asks for the support badge to
   mirror the reach badge exactly: same card, same radius, same
   shadow, same padding, same icon size. Writing it once is the only
   way to guarantee that stays true. */
.dash__badge {
  position: absolute;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 11px 15px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(23, 20, 18, .18);
  line-height: 1.25;
}
.dash__badge--a { left: -16px;  bottom: -18px; }
.dash__badge--b { right: -16px; bottom: -18px; }
.dash__badge__i { display: flex; color: var(--orange); flex: none; }
.dash__badge b  { display: block; font-size: .86rem; }
.dash__badge em { font-style: normal; font-size: .7rem; color: var(--muted); }

/* ── SC2, the empty space beside the dashboard ──
   Adding the side rail and the chart made the dashboard column much
   taller, and the four cards beside it kept their natural height, so
   the bottom right of the section was a large hole.

   The right column now fills the row: the heading block stays its own
   size and the card grid takes everything left over, with the four
   cards sharing it equally. The taller column still sets the height,
   but nothing is empty any more. */
.plat-grid { align-items: stretch; }

.plat-right {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.plat-right > .plat-cards {
  flex: 1 1 auto;
  align-content: stretch;
}
.plat-cards > .plat-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── Right, the four reasons ── */

/* REF B-2 lays these out two up and two below. auto-fit was giving
   three across and one stranded underneath, because at this column
   width four cards of 200px minimum all fit on one row and auto-fit
   takes every track it can get.

   Fixed at two columns, which is what the brief draws and what keeps
   the block square against the dashboard beside it. */
.plat-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.plat-card {
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  transition: border-color .25s ease, transform .25s ease;
}
.plat-card:hover { border-color: var(--orange-line); transform: translateY(-3px); }
.plat-card__i {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--orange-soft);
  color: var(--orange);
}
.plat-card b { display: block; font-family: var(--font-head); font-size: 1rem; line-height: 1.3; }
.plat-card p { margin: 8px 0 0; font-size: .84rem; color: var(--muted); line-height: 1.55; }


/* ═══════════ HOME, GLOBAL NETWORK (REF C-2) ═══════════
   The one dark section on the page. */

.net { padding: 92px 0; background: #14161A; color: #fff; }
.net-head { max-width: 760px; margin: 0 auto 54px; text-align: center; }
.net-head h2 { color: #fff; line-height: 1.15; }
.net-lead { margin: 16px 0 0; color: rgba(255, 255, 255, .72); line-height: 1.65; }
.eyebrow--light { color: var(--orange); }

.net-route {
  position: relative;
  height: var(--net-h, 260px);
}

/* ── SC3, the serpentine ──
   One coordinate space for the curve and the nodes. The viewBox
   height equals the container height in pixels and the SVG fills it,
   so a y of 210 in the path is 210px down the container and the dots
   can be placed at exactly the same y. That is what stops the dots
   drifting off the line.

   preserveAspectRatio is none, so the curve stretches horizontally to
   whatever width the section is while the node grid on top of it
   keeps the same x positions. The line meets the dots at every
   viewport width without a single media query. */
.net-route__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* The soft wide stroke underneath. A stroke rather than an SVG
   filter: filter: blur() on a path is one of the most expensive
   things you can put on a page that also animates, and at this
   opacity nobody can tell the difference. */
.net-route__glow {
  fill: none;
  stroke: var(--orange);
  stroke-width: 7;
  stroke-opacity: .16;
  stroke-linecap: round;
}

/* The beaded line on top. */
.net-route__line {
  fill: none;
  stroke: url(#qsNetLine);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 2 9;
}

/* The beads travel left to right, continuously, so the section reads
   as a direction of travel rather than a static decoration. The dash
   pattern repeats every 11 units, so shifting the offset by 22 and
   looping is seamless: there is no jump at the restart.

   Decreasing the offset is what moves the dashes forward along the
   path, and the path is drawn left to right, so this is the
   left-to-right flow the arrowhead is pointing at. */
@media (prefers-reduced-motion: no-preference) {
  .net-route__line { animation: qs-net-flow 2.6s linear infinite; }
}
@keyframes qs-net-flow {
  from { stroke-dashoffset: 22; }
  to   { stroke-dashoffset: 0; }
}

.net-nodes {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--net-count, 6), minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100%;
}

/* Each node is a full-height track. Its dot is pinned to the curve at
   --y, and its label is anchored to finish just above that dot, so
   the line passes underneath the text at every node instead of
   through it. */
.net-node {
  position: relative;
  min-width: 0;
  padding: 0 4px;
  text-align: center;
}

.net-node__label {
  position: absolute;
  left: 0; right: 0;
  /* 22px of clearance between the bottom of the label and the dot. */
  bottom: calc(100% - var(--y, 150px) + 22px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.net-node__i {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 8px;
  color: var(--orange);
}
.net-node b {
  display: block;
  font-family: var(--font-head);
  font-size: 1rem;
  color: #fff;
  line-height: 1.2;
}
.net-node__label > span {
  display: block;
  margin-top: 3px;
  font-size: .72rem;
  color: rgba(255, 255, 255, .55);
  line-height: 1.35;
}

/* On the curve, at the node's own y. */
.net-node__dot {
  position: absolute;
  left: 50%;
  top: var(--y, 150px);
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 5px rgba(247, 146, 30, .18),
              0 0 18px 3px rgba(247, 146, 30, .55);
}

.net-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 52px 0 0;
  padding: 0;
  list-style: none;
}
.net-stats > li {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  min-width: 0;
}
.net-stats__i {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  background: rgba(247, 146, 30, .12);
  color: var(--orange);
}
.net-stats b {
  display: block;
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}
.net-stats span { font-size: .78rem; color: rgba(255, 255, 255, .62); }
.net-note {
  margin: 22px 0 0;
  font-size: .76rem;
  color: rgba(255, 255, 255, .5);
  text-align: center;
}

/* REF G-1. Tints the supplied grey artwork to the brand orange until
   a single-colour SVG arrives. The checkbox in wp-admin turns it off
   in one click on the day it does. */
.fly-flyer.is-tinted .fly-plane img {
  filter: sepia(1) saturate(5) hue-rotate(-14deg) brightness(1.02);
}


/* ═══════════ SHARED, STAT ROWS AND BADGES ═══════════
   Used by both the services page and the integrations page, so the
   two cannot end up looking different. */

.arch-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}
.arch-stats > li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  min-width: 0;
}
.arch-stats__i {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--orange-soft);
  color: var(--orange);
}
.arch-stats b {
  display: block;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--orange);
  line-height: 1.1;
}
.arch-stats__l { display: block; font-size: .88rem; font-weight: 600; color: var(--ink); }
.arch-stats__s { display: block; margin-top: 3px; font-size: .76rem; color: var(--muted); line-height: 1.45; }
.arch-stats--slim > li { padding: 14px 18px; align-items: center; }
.arch-stats--slim b { font-size: 1.25rem; }


/* ═══════════ SERVICES PAGE HERO (REF SVC-2) ═══════════ */

.arch-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: center;
}
.arch-hero__copy { min-width: 0; }
.arch-hero__jump { margin: 16px 0 0; }

.arch-map { position: relative; min-width: 0; }
.arch-map__svg { display: block; width: 100%; height: auto; }

/* The two dot patterns paint with currentColor, so the land and the
   origin take their colour from the element rather than having it
   baked into the generated path data. Changing the palette here
   changes the map, without regenerating anything. */
.arch-map__land   { color: #9C948C; fill: url(#qsdots); }
.arch-map__origin { color: var(--orange); fill: url(#qsdotso); }

.arch-map__routes { stroke: var(--orange); stroke-width: 1.6; stroke-dasharray: 5 5; opacity: .8; }
.arch-map__pins circle { fill: var(--orange); }

.arch-map__air { fill: var(--orange); }
.arch-map__sea { fill: var(--orange-dark); }

.arch-map__origin-pin circle { fill: #fff; stroke: var(--orange); stroke-width: 3; }
.arch-map__origin-pin .arch-map__origin-dot { fill: var(--orange); stroke: none; }

/* On a wide screen the badges float over the map. Below 900px they
   drop into a plain row underneath it, which is the brief's rule
   that they must never cover the map. */
.arch-map__badges { margin: 0; padding: 0; list-style: none; }
.arch-badge {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 9px 14px;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(23, 20, 18, .16);
  line-height: 1.2;
}
.arch-badge__i { display: flex; color: var(--orange); flex: none; }
.arch-badge__t b    { display: block; font-size: .88rem; color: var(--orange); }
.arch-badge__t span { display: block; font-size: .7rem; color: var(--muted); }

@media (min-width: 901px) {
  .arch-map__badges > li { position: absolute; }
  .arch-badge--1 { top: 8%;  right: 2%; }
  .arch-badge--2 { top: 46%; right: 8%; }
  .arch-badge--3 { bottom: 12%; left: 4%; }
  .arch-badge--4 { top: 24%; left: 0; }
}
@media (max-width: 900px) {
  .arch-map__badges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 16px;
  }
  .arch-badge { box-shadow: none; border: 1px solid var(--line); }
}


/* ═══════════ COMPARISON TABLE (REF SVC-6) ═══════════ */

.svc-tbl--wide table { min-width: 940px; }
.svc-tbl__name { display: flex; gap: 11px; align-items: flex-start; }
.svc-tbl__i {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 9px;
  background: var(--orange-soft);
  color: var(--orange);
}
.svc-tbl__name small { display: block; margin-top: 2px; font-size: .72rem; color: var(--muted); }
.svc-tbl__note { display: block; margin-top: 4px; font-size: .7rem; color: var(--muted); line-height: 1.3; }


/* ═══════════ INTEGRATIONS PAGE (REF INT-2) ═══════════ */

.int-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.int-hero__copy { min-width: 0; }

/* ── The hub ──
   REF INT-5. Two tight columns either side of the QuickShip card, not
   a circle. Each node still carries its own --x, --y, --len and --ang,
   worked out in archive-qs_integration.php, so an entry moving in or
   out of the hub only ever changes the PHP loop, never this file. */
.int-hub {
  position: relative;
  min-width: 0;
  /* Three numbers the whole hub is built from, declared once so the
     wires, the cards and the centre cannot fall out of step:

       --hub-core  the centre card, both axes
       --node-w    a platform card's width
       --wire      the line itself

     The wires are shortened at each end by half of --hub-core and half
     of --node-w, so a run stops at the edge of the thing it is joining
     rather than under it, which is what puts the endpoint dots where
     the reference shows them. Change a size here and the wires follow
     on their own. */
  --hub-core: 128px;
  --node-w: clamp(118px, 26cqw, 176px);
  /* Deliberately faint. At half opacity the wires competed with the
     logos they were meant to be joining, which is the opposite of what
     a connector is for: it should be followable, not loud. */
  --wire: rgba(247, 146, 30, .32);
  /* How far each vertical leg sits off dead centre. Without this the
     two legs above the centre card land on the same point and read as
     one line forking, rather than two platforms each joining. */
  --wire-split: 7;

  /* ── The panel behind it ──
     The hub was reading as six white cards floating on the page's own
     cream, which is why it looked unfinished next to the reference:
     nothing said where the graphic started or stopped, and the white
     cards had nothing to sit against.

     Three layers, all painted in one place so there is no extra
     element in the markup. A warm wash that lifts towards the top
     right, the same direction the hero already leans. A soft glow
     under the middle, so the centre reads as the bright part rather
     than six cards competing evenly. And a faint dot grid, the same
     motif the network map on the services page uses, at a low enough
     contrast to be texture rather than pattern. */
  padding: 26px 20px;
  border-radius: 26px;
  /* Two soft washes and nothing else. The dot grid that was here read
     as noise at this size: it sat directly behind the wires and made
     them hard to follow, which was the whole complaint. A background
     for a diagram has one job, to say where the diagram starts and
     stops, and it should lose every argument with the diagram. */
  background-color: #FFF8F2;
  background-image:
    radial-gradient(58% 52% at 50% 50%, rgba(247, 146, 30, .10), transparent 72%),
    radial-gradient(85% 75% at 90% 4%, rgba(247, 146, 30, .11), transparent 72%);
}

/* ── The centre, REF SC-3 ──
   A rounded card carrying the real mark, not a circle with the name
   set in type. It is the largest thing in the graphic on purpose: the
   reference reads as everything connecting into QuickShip, which a
   mark the same size as the platforms around it does not say. */
.int-hub__centre {
  z-index: 3;
  display: grid;
  place-items: center;
  gap: 2px;
  width: var(--hub-core); height: var(--hub-core);
  padding: 16px;
  border: 1.5px solid var(--orange-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(23, 20, 18, .16);
  text-align: center;
  line-height: 1.15;
}
.int-hub__centre-logo {
  width: 100%;
  max-height: calc(var(--hub-core) - 34px);
  object-fit: contain;
}
.int-hub__centre b    { font-family: var(--font-head); font-size: 1rem; color: var(--ink); }
.int-hub__centre span { font-size: .72rem; color: var(--orange); }

.int-hub__ring { margin: 0; padding: 0; list-style: none; }
.int-hub__node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 16px 12px;
  border: 1.5px solid var(--bc, var(--line));
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(23, 20, 18, .1);
  text-align: center;
}

/* The logo is the card, so it gets the room. The reference runs the
   wordmarks nearly the full width of the tile; at the old 24px they
   read as favicons. */
.int-hub__mark { display: flex; align-items: center; justify-content: center; height: 38px; width: 100%; }
.int-hub__mark img { max-width: 100%; max-height: 38px; object-fit: contain; }
.int-hub__node b { font-size: .82rem; line-height: 1.2; }

/* The plain status line under the logo. Separate from the coloured
   pill in the corner, and quieter than it on purpose: one of them is
   a state worth flagging, the other is a note. */
.int-hub__note {
  font-size: .7rem;
  line-height: 1.3;
  color: var(--muted);
}

/* The corner pill sits half outside the card, as the reference draws
   it, which is what stops it eating into the logo's room. */
.int-hub__pill {
  position: absolute;
  top: -11px; right: 10px;
  z-index: 1;
  white-space: nowrap;
}

.int-hub__more-link { display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none; color: inherit; }

/* ── The wires ──
   Their own layer, underneath everything. Hidden below 901px along
   with the two column layout, because a right angle drawn to a centre
   card that is no longer beside anything points at nothing. */
.int-hub__wires { display: none; }

@media (min-width: 901px) {
  /* Read the note in archive-qs_integration.php first, it explains why
     the aspect ratio does the real work.

     container-type is what makes cqw available: 1cqw is one per cent
     of the hub's own width. With the box a fixed 100 by 72, one unit
     across and one unit down are the same number of screen pixels, so
     a right angle stays a right angle and a length is one number that
     is correct on both axes. inline-size rather than size, because the
     hub still takes its height from the aspect ratio. */
  .int-hub--tight {
    container-type: inline-size;
    aspect-ratio: 100 / 72;
    min-height: 290px;
  }

  .int-hub--tight .int-hub__centre {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
  }

  .int-hub--tight .int-hub__ring > li {
    position: absolute;
    z-index: 2;
    left: var(--x, 50%);
    top:  var(--y, 50%);
    transform: translate(-50%, -50%);
    width: var(--node-w);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }

  .int-hub__wires {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0; padding: 0;
    list-style: none;
    pointer-events: none;
  }

  /* ── One run, REF SC-3 ──
     Each wire is an empty box spanning the gap between its card and
     the centre. Two of its four borders are drawn, meeting at a
     rounded corner, which is the elbow. The card's own row carries the
     horizontal border, the centre's column carries the vertical one.

     A card on the centre row has no vertical leg: the box collapses to
     zero height and only the horizontal border is drawn, which is the
     plain straight line the reference shows for the middle pair. No
     special case in the markup, it falls out of dy being zero.

     Both ends are pulled in, by half the card at the outer end and
     half the centre at the inner end, so a run stops where the thing
     it joins begins rather than disappearing under it. */
  .int-hub__wire {
    position: absolute;
    border: 0 solid var(--wire);
    border-radius: 0;
  }
  /* ── No dots, and the runs go all the way in ──
     Two problems, one cause. The dots landed on the left column and
     the right column differently, because a dot has to be placed at
     one end of a box and which end that is flips with the side. And
     every run stopped short of what it was joining, by half a card at
     one end and half the centre at the other, which left the middle
     column looking unconnected.

     Both go away by drawing each run from the platform's centre to the
     hub's centre with nothing subtracted. The cards sit above the
     wires and are opaque, so each line disappears under the card it
     reaches and reads as joined to it. Nothing to place, nothing to
     flip, and one continuous line from every platform into QuickShip,
     which is the thing the picture is meant to say. */

  /* Left column. The card is out to the left, so the horizontal leg
     starts half a card in from it and the vertical leg runs down the
     box's right edge, on the centre's column. */
  .int-hub__wire--l {
    left:  calc(var(--ux) * 1cqw);
    width: calc(var(--dx) * 1cqw - var(--wire-split) * 1cqw);
    border-right-width: 1.5px;
  }
  .int-hub__wire--r {
    left:  calc(50cqw + var(--wire-split) * 1cqw);
    width: calc(var(--dx) * 1cqw - var(--wire-split) * 1cqw);
    border-left-width: 1.5px;
  }

  /* Card above the centre: horizontal along the top, then down. */
  .int-hub__wire.is-down {
    top: calc(var(--uy) * 1cqw);
    height: calc(var(--dy) * 1cqw);
    border-top-width: 1.5px;
  }
  .int-hub__wire--l.is-down { border-top-right-radius: 14px; }
  .int-hub__wire--r.is-down { border-top-left-radius: 16px; }

  /* Card below the centre: horizontal along the bottom, then up. */
  .int-hub__wire.is-up {
    top: 36cqw;
    height: calc(var(--dy) * 1cqw);
    border-bottom-width: 1.5px;
  }
  .int-hub__wire--l.is-up { border-bottom-right-radius: 14px; }
  .int-hub__wire--r.is-up { border-bottom-left-radius: 16px; }

  /* The middle row. No vertical leg, so the box has no height and the
     inner end has to come off the width instead. */
  .int-hub__wire.is-flat {
    top: 36cqw;
    height: 0;
    border-top-width: 1.5px;
    border-right-width: 0;
    border-left-width: 0;
    width: calc(var(--dx) * 1cqw);
  }
  .int-hub__wire--r.is-flat { left: 50cqw; }

  /* Hovering a platform lifts its card. The wires are a separate layer
     now and no longer belong to a node, so the line no longer lights
     with it; the lift and the border are what follow the pointer. */
  .int-hub--tight .int-hub__ring > li:hover,
  .int-hub--tight .int-hub__ring > li:focus-within {
    transform: translate(-50%, -50%) scale(1.05);
    border-color: var(--bc, var(--orange));
    box-shadow: 0 18px 38px rgba(23, 20, 18, .16);
  }
}

/* Between 901px and roughly 1280px the hero is still two columns and
   the hub has about 400px to work in. The centre comes down so it
   keeps its clearance, and because the wires are shortened by half of
   it they shorten to match with nothing else to change. */
@media (min-width: 901px) and (max-width: 1280px) {
  .int-hub {
    --hub-core: 100px;
    --node-w: clamp(102px, 23cqw, 140px);
  }
  .int-hub__centre    { border-radius: 18px; padding: 12px; }
  .int-hub__centre b  { font-size: .8rem; }
  .int-hub__centre span { font-size: .62rem; }
  .int-hub__node      { padding: 12px 8px; }
  .int-hub__node b    { font-size: .72rem; }
  .int-hub__mark      { height: 30px; }
  .int-hub__mark img  { max-height: 30px; }
  .int-hub__note      { font-size: .64rem; }
}

/* Below 901px there is no width for two columns and a centre card side
   by side, so the centre goes back into normal flow at the top and the
   platforms become an ordinary grid under it. */
@media (max-width: 900px) {
  .int-hub {
    display: grid;
    justify-items: center;
    gap: 18px;
    aspect-ratio: auto;
    padding: 22px 16px;
    border-radius: 20px;
  }
  .int-hub__ring {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 12px;
    width: 100%;
  }
}

@media (max-width: 600px) {
  /* Two nodes per row rather than auto-fit's three. At three the logo
     is wider than the card it sits in. */
  .int-hub__ring { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .int-hub { --hub-core: 108px; }
  .int-hub__node { padding: 14px 8px; }

  /* A long status wraps under the name instead of forcing the card
     wider than its column. */
  .int-card__top { row-gap: 4px; }
}

/* The description can hold a URL or a product name with no spaces in
   it, which on a phone is wider than the card. */
.int-card--all > div { min-width: 0; overflow-wrap: anywhere; }

/* ── Status pills ── */
.int-pill {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Every pill carries a border as well as a fill. The fills are light
   by design, and on the hub node, which is white on white, a 10 per
   cent tint alone was faint enough that the greys read as plain text
   sitting next to the greens. The border is what makes it a pill at
   any tint. */
.int-pill--live    { background: rgba(22, 163, 74, .13); color: #16A34A;       border-color: rgba(22, 163, 74, .3); }
.int-pill--soon    { background: var(--orange-soft);     color: var(--orange); border-color: var(--orange-line); }
.int-pill--applied { background: var(--blue-soft);       color: var(--blue);   border-color: rgba(28, 103, 213, .28); }
.int-pill--muted   { background: rgba(74, 74, 74, .09);  color: var(--muted);  border-color: rgba(74, 74, 74, .22); }

.int-card__top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* A card with no destination. Still a card, just not a link, so it
   cannot send anyone to a page that does not exist. */
.int-card.is-flat { cursor: default; }
.int-card.is-flat:hover { transform: none; }


/* ═══════════ CONTACT, SIX OFFICES (REF H-1) ═══════════ */

.contact--six { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.contact__col { min-width: 0; }

/* Layout for these cards is set once, in the SC1 block further down.
   It used to be set here as well, with the icon beside the text, and
   two blocks in one file describing the same component differently is
   how a fix ends up landing on the rule that is not winning. Only the
   things the SC1 block does not touch are left here. */
.office-grid {
  display: grid;
  gap: 14px;
}
.office {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  min-width: 0;
}
.office__tag {
  position: absolute;
  top: 14px; right: 14px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--orange-soft);
  color: var(--orange);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.office__body h4 { font-size: .98rem; }
.office__body address { font-size: .82rem; color: var(--muted); }
.office__ln {
  display: flex;
  gap: 7px;
  align-items: center;
  margin-top: 7px;
  font-size: .82rem;
  color: var(--orange);
  overflow-wrap: anywhere;
}
.office__ln svg { flex: none; }

.office-ctas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.office-cta {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 18px;
  border: 1px solid var(--orange-line);
  border-radius: 13px;
  background: var(--orange-soft);
  min-width: 0;
}
.office-cta--alt { border-color: rgba(22, 163, 74, .28); background: rgba(22, 163, 74, .07); }
.office-cta--alt .office-cta__i { color: #16A34A; }
.office-cta__i { display: flex; color: var(--orange); flex: none; }
.office-cta b  { display: block; font-size: .95rem; }
.office-cta em { display: block; margin: 4px 0 8px; font-style: normal; font-size: .8rem; color: var(--muted); line-height: 1.45; }

.con-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
.con-strip > li {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  min-width: 0;
}
.con-strip__i {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: 50%;
  background: var(--orange-soft);
  color: var(--orange);
}
.con-strip b { display: block; font-size: .87rem; line-height: 1.3; }
.con-strip span { font-size: .78rem; color: var(--muted); }


/* ═══════════ ALL LOCATIONS PAGE ═══════════
   REF LOC-1. The client's own reference for this page: a two column
   card grid, badge above the icon rather than in the corner (so this
   is a new .loc-card, not a resize of the home page's .office), and
   a live map in place of a static photo. Card content itself, name,
   address, phone, email, is exactly the same qs_office() data and the
   same office__ln classes the home page section already styles, so
   only the card shell and the map are new rules. */
.loc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.loc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.loc-card {
  position: relative;
  padding: 26px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
/* Only a card with a map pin is interactive. One with no lat/lng
   still renders, it just has nothing for the map to fly to, so it
   gets no tabindex, no hover lift and no cursor change. */
.loc-card--pin { cursor: pointer; }
.loc-card--pin:hover,
.loc-card--pin:focus-visible,
.loc-card--pin.is-active {
  border-color: var(--orange);
  box-shadow: 0 14px 30px rgba(23, 20, 18, .1);
  transform: translateY(-2px);
}
.loc-card--pin:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.loc-card__tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--orange-soft);
  color: var(--orange);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.loc-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: var(--orange-soft);
  color: var(--orange);
}
.loc-card h4 {
  margin: 0 0 12px;
  font-size: .92rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.loc-card address {
  display: block;
  margin: 0 0 14px;
  font-style: normal;
  color: var(--muted);
  line-height: 1.6;
  font-size: .88rem;
}
.loc-card .office__ln--tel { display: block; margin-bottom: 6px; font-weight: 600; }
.loc-card .office__ln--mail { display: block; }

/* The map. Sticky so it stays in view while the list scrolls past it
   on a tall page, same trick a product gallery uses beside a long
   description. Height is fixed rather than aspect-ratio because
   Leaflet needs a real pixel height to size its tiles against. */
.loc-map-wrap { position: sticky; top: 96px; }
.loc-map-wrap img {
  width: 100%; height: 560px;
  border-radius: 18px;
  object-fit: cover;
}
.loc-map {
  width: 100%; height: 560px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--panel, #f4f1ee);
}
/* Leaflet ships its own inline classes; this only touches the parts
   the brand needs to match, the popup card and the default pin tint
   stay as Leaflet draws them so an OpenStreetMap update never breaks
   the look. */
.loc-map .leaflet-popup-content-wrapper { border-radius: 10px; }
.loc-map .leaflet-popup-content { margin: 10px 14px; font-family: var(--font-body); font-size: .84rem; }

@media (max-width: 900px) {
  .loc-layout { grid-template-columns: 1fr; gap: 28px; }
  .loc-map-wrap { position: static; }
}

@media (max-width: 600px) {
  .loc-grid { grid-template-columns: 1fr; }
  .loc-map-wrap img,
  .loc-map { height: 320px; }
}


/* ═══════════ EIGHT CARRIERS ═══════════
   Four across on a laptop, two on a phone, every card the same
   height whatever the length of its name. */
.carriers--8 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
.carriers--8 .carrier { height: 100%; }


/* ═══════════ RESPONSIVE ═══════════ */

@media (max-width: 1040px) {
  .plat-grid { grid-template-columns: 1fr; gap: 44px; }
  .dash__rating { right: 6px; }
  .dash__badge--a, .dash__badge--b { left: auto; right: auto; position: static; margin-top: 10px; }
}

@media (max-width: 900px) {
  .arch-hero,
  .int-hero,
  .contact--six { grid-template-columns: 1fr; gap: 30px; }

  .carriers--8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .dash__split  { grid-template-columns: 1fr; }
  .dash__rating { position: static; margin: 12px 18px 0; align-items: flex-start; box-shadow: none; border: 1px solid var(--line); }

  /* Both badges are hidden rather than restacked. The brief asks that
     they never cover the dashboard, and on a narrow screen there is
     nowhere for them to sit that does not. Their content is already
     stated elsewhere on the page. */
  .dash__badge { display: none; }

  .net { padding: 68px 0; }
  .net-route__line { display: none; }
  .net-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .hero-feats  { grid-template-columns: 1fr; }
  .net-nodes   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .net-stats   { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .net-stats > li { flex-direction: column; align-items: flex-start; gap: 10px; padding: 15px; }
  .office-grid,
  .office-ctas,
  .con-strip   { grid-template-columns: 1fr; }
  .office__body h4 { padding-right: 0; }
  .office__tag { position: static; display: inline-block; margin-bottom: 6px; }
  .plat-cards  { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE SAFETY NET

   Everything above already collapses at its own breakpoint.
   These rules catch the cases that are easy to miss and that
   only show up on a real phone, where the symptom is a page
   that scrolls sideways and nobody can tell which element
   caused it.
   ═══════════════════════════════════════════════════════════ */

/* Nothing may push the page wider than the screen. Sideways scroll on
   a phone is almost always one oversized child, and this makes the
   page immune to it rather than relying on every child behaving.

   ── WHY clip AND NOT hidden ──
   overflow-x: hidden on an ancestor turns that ancestor into a scroll
   container, and position: sticky stops working for every descendant
   inside it. Silently. Nothing errors, the element simply scrolls away
   with the page.

   That is what broke the contents sidebar on the blog and the legal
   pages. It was added during the responsive pass and took the sticky
   behaviour with it.

   overflow: clip does the same clipping without creating a scroll
   container, so sticky keeps working. Only body carries it, because
   applying it to html as well reintroduces the problem.

   Safari before 16 ignores clip. There the page can scroll sideways if
   a child overflows, which is the behaviour before any of this was
   added, so nothing is made worse. Every rule below still applies. */
body { overflow-x: clip; }

/* Media never exceeds its container, whatever width attribute the
   editor wrote into the markup. */
img, video, iframe, svg { max-width: 100%; }
img, video { height: auto; }

/* Long unbroken strings, tracking numbers, API keys, URLs pasted into
   a post, are the other common cause of sideways scroll. */
.legal-prose, .blog-prose, .svc-prose { overflow-wrap: break-word; }

/* Embeds keep their shape instead of collapsing to zero height. */
.blog-prose iframe,
.legal-prose iframe { aspect-ratio: 16 / 9; width: 100%; height: auto; }

/* Wrapping rows. Each of these is a flex row that fits comfortably on
   a laptop and runs off the edge on a narrow phone. */
.blog-share,
.blog-byline span,
.blog-card__meta { flex-wrap: wrap; }

@media (max-width: 600px) {

  /* Tighter gutters buy back 16px of usable width, which is the
     difference between two columns fitting and not. */
  .wrap { padding-inline: 16px; }

  /* Two facts per row rather than four across, at four they are
     unreadable, at one the strip becomes very tall. */
  .svc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 18px; gap: 16px; }

  /* Single column below this width. auto-fit already handles it, this
     is belt and braces for the tracks with larger minimums. */
  .blog-grid,
  .svc-grid,
  .int-cards--all { grid-template-columns: 1fr; }

  .blog-lead__body { padding: 20px 18px 22px; }
  .blog-hero__img  { border-radius: 14px; }

  /* Comfortable tap targets. 44px is the accessibility minimum and
     these pills sit just under it at their desktop size. */
  .blog-pill,
  .pagination .page-numbers { min-height: 44px; }

  /* The contents list is collapsed on a phone by the script in the
     template, so it only needs to not dominate once opened. */
  .legal-toc ol { max-height: 38vh; }
}

@media (max-width: 400px) {
  /* One fact per row on the narrowest phones. Two columns of
     "All 13 provinces and territories" wraps to four lines. */
  .svc-facts { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   AUGUST 29 2026 CORRECTION PASS

   Everything below was written against the client's annotated
   screenshots of the live page rather than against the brief
   alone, so each block names the defect it fixes.
   ═══════════════════════════════════════════════════════════ */


/* ── HERO BACKGROUND ──
   The traffic video is replaced by the supplied global artwork.

   Its subject sits on the right hand side, which is exactly where
   the quote card goes, so it is anchored right: the skyline and the
   open sky then fall behind the heading column where they belong,
   and the ship and truck read out from behind the card rather than
   being cropped away.

   object-position moves to centre on a phone, where the card sits
   under the heading rather than beside it. */
.hero-art {
  object-fit: cover;
  object-position: 78% 50%;
}

/* ── The readability fade ──
   The first version was tuned for the pale cream artwork that ships
   with the theme, where a light wash was plenty. A photograph is a
   different problem: the client's warehouse shot is mid-tone, busy
   and full of edges, and the heading disappeared into it.

   So the fade is much stronger over the left half, where all the text
   is, and still clears to nothing on the right so the photograph is
   not wiped out behind the quote card. It is an opaque panel that
   fades, not a uniform veil: uniform opacity either kills the image
   or fails to make the text readable, and usually manages both.

   `--scrim` sets the strength and is a field, so this can be tuned
   per image without touching CSS. The stops below are multipliers of
   it rather than fixed values, so raising the field strengthens the
   whole ramp in proportion and the shape stays right. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      95deg,
      rgba(255, 253, 250, calc(var(--scrim, .8) * 1.18)) 0%,
      rgba(255, 253, 250, calc(var(--scrim, .8) * 1.08)) 30%,
      rgba(255, 253, 250, calc(var(--scrim, .8) * .78)) 52%,
      rgba(255, 253, 250, calc(var(--scrim, .8) * .3))  74%,
      rgba(255, 253, 250, 0) 100%
    );
}

/* A second, vertical pass behind the figures only. They sit low in
   the hero over the busiest part of most photographs, and they are
   small uppercase text, which is the first thing to become
   unreadable. */
.hero-scrim::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(
    to top,
    rgba(255, 253, 250, calc(var(--scrim, .8) * .85)) 0%,
    rgba(255, 253, 250, 0) 100%
  );
}

/* ── The hero stacking order, stated in one place ──

   This is what made the heading unreadable, and it was self
   inflicted.

   `site.css` already puts a near opaque cream wash over the hero as
   `.hero::after` at z-index 1, and lifts the content to z-index 3 to
   clear it. When the new scrim was added, this rule was written as
   `z-index: 1`, which pulled the content back DOWN to the same layer
   as that wash. At equal z-index the painting order decides, and a
   pseudo element generated at the end of its parent paints after a
   real child, so the cream gradient ended up on top of the text.

   It matched the symptom exactly: the wash runs from .97 opacity on
   the left to .15 on the right, so the heading and the figures were
   buried while the quote card on the right stayed crisp.

   Every layer is now numbered explicitly rather than left to
   inheritance, so this cannot drift again:

     0  the photograph
     1  the decorative orange glow
     2  the readability fade
     3  the content

   The old fixed wash is switched off rather than deleted, because
   `.hero-scrim` replaces it and is adjustable from a field, whereas
   that one was hard coded at .97 and could never be tuned for a
   different image. */
.hero::after  { background: none; }
.hero::before { z-index: 1; }
.hero-scrim   { z-index: 2; }
.hero .wrap   { position: relative; z-index: 3; }

/* site.css dims the background to 62 percent, which made sense when
   the fade above it was fixed and light. The fade is now doing that
   job properly and is tunable, so the image is shown at full strength
   and the gradient decides how much of it survives. That is what
   keeps the right hand side of the photograph vivid while the text
   side stays clean. */
.hero-art { opacity: 1; }


/* ── HERO FIGURES ──
   The live page rendered the on-time rate as a small grey "98.7"
   sitting above an oversized "%". The cause was in the markup, and
   it is fixed there: there is no longer a second code path for a
   figure with a decimal in it.

   What is left here is the layout. REF A-2 puts an icon beside each
   figure, which the build did not have at all. */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr));
  gap: 24px 18px;
}
.hstat {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
}
.hstat__i {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: 10px;
  background: rgba(247, 146, 30, .12);
  color: var(--orange);
}
.hstat__body { min-width: 0; }

/* The number. Written against `.hstat b` and `.hstat b .count`
   together, so the digits and any suffix are one piece of text
   whatever the figure looks like. This is the rule that stops the
   original bug coming back: the counting span inherits everything
   rather than picking up the label styling from site.css. */
.hstat b,
.hstat b .count {
  display: inline;
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 2.5vw, 1.95rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.03em;
  line-height: 1.05;
  text-transform: none;
  margin: 0;
}
.hstat b { display: block; }

/* The label under it. Darker than the old #A79E96, which was close
   to unreadable against the artwork. */
.hstat__body > span {
  display: block;
  margin-top: 6px;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: #6B625B;
}


/* ── DASHBOARD, REF B-2 ──
   Two pieces of the mock-up were never built: the side rail and the
   Shipments Overview chart. Without them the panel read as a bare
   table of numbers rather than a picture of a product. */
.dash__body {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: start;
}

.dash__nav {
  margin: 0;
  padding: 14px 10px;
  list-style: none;
  border-right: 1px solid var(--line);
  min-height: 100%;
}
.dash__nav li {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: .74rem;
  font-weight: 500;
  color: var(--muted);
  line-height: 1;
}
.dash__nav li svg { flex: none; }
.dash__nav li.is-on {
  background: var(--orange);
  color: #fff;
  font-weight: 600;
}

.dash__main { padding: 14px 16px 16px; min-width: 0; }

/* The bar chart. Bars are drawn from a height custom property set
   per bar in the template, so the shape of the week is editable and
   the chart is still markup rather than an image. */
.dash__chart { margin: 14px 0 16px; }
.dash__bars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: end;
  gap: 7px;
  height: 96px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.dash__bars li {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  gap: 6px;
  min-width: 0;
}
.dash__bars i {
  display: block;
  width: 100%;
  height: var(--h, 50%);
  border-radius: 4px 4px 2px 2px;
  background: var(--orange);
  transform-origin: bottom;
}
/* The tallest bar is the one the eye should land on. */
.dash__bars li:nth-child(4) i { background: var(--orange); }
.dash__bars li:not(:nth-child(4)) i { background: rgba(247, 146, 30, .78); }
.dash__bars em {
  font-style: normal;
  font-size: .6rem;
  color: var(--muted);
  line-height: 1;
}

@media (prefers-reduced-motion: no-preference) {
  [data-rv].rv .dash__bars i {
    animation: qs-bar-rise .7s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: var(--d, 0ms);
  }
}
@keyframes qs-bar-rise {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

.dash__recent__bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.dash__viewall {
  font-style: normal;
  font-size: .68rem;
  font-weight: 600;
  color: var(--orange);
}

/* ── REF B-3, badge anchoring ──
   The brief asks for the support badge to sit on the bottom-right
   edge of the mock-up, mirroring Global Reach on the bottom-left.
   On the live page it was floating inside the card instead, because
   the dashboard is narrower than its column. Anchoring both to the
   dashboard rather than to the column puts them back on the edge. */
.dash { position: relative; }
.dash__badge--a { left: -14px;  right: auto; bottom: -20px; }
.dash__badge--b { right: -14px; left: auto;  bottom: -20px; }

/* The rating chip was overlapping the tiles. Lifted clear of them. */
.dash__rating { top: -16px; right: -10px; }


/* ── SERVICES, REF D-1 CHANGE 1 ──
   "Match its height to the six-card list, top and bottom aligned.
   Keep aspect ratio, no dead space."

   The panel had a flat min-height of 460px, so whenever the card
   list came out shorter or taller than that the two columns did not
   line up. The height is now derived from the number of cards, which
   is handed in from the template, so it tracks the list exactly
   however many services are published.

   84px is one card plus its gap, measured from the rendered list. */
@media (min-width: 901px) {
  /* The 84px-per-card figure was wrong: the real pitch is closer to
     107px, so six cards came out at the height of four. Guessing a
     better number would only be wrong again the next time the card
     padding changes.

     So there is no number now. The two columns are grid items in the
     same row, and a grid row is as tall as its tallest item, which is
     the card list. The panel is left to stretch into that row, which
     is the default, and it lands exactly top and bottom aligned at
     any card count and any card height.

     The reason this did not work on its own before is that
     `.explorer-panel` holds nothing but absolutely positioned photos,
     so it contributes zero height and something had to give it one.
     `min-height` was that something, and it fought the stretch. The
     list is now the only thing defining the row, and the panel
     follows it. */
  .explorer-panel {
    min-height: 0;
    height: auto;
    align-self: stretch;
  }
}

/* The "See All Services" link had dropped below the heading. REF D-1
   puts it on the same row, hard right. */
.head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}
.head-row .sec-head { margin-bottom: 0; }


/* ── INTEGRATIONS, the clipped top row ──
   The live page cut the Shopify and WooCommerce cards in half. The
   two columns were centred against each other, so once the card
   column grew taller than the text column beside it, it overflowed
   the section padding upwards and the section clipped it.

   Aligning to the top means the column grows downwards, which is the
   only direction with room. */
.int-split { align-items: start; }
.int-cards { align-self: start; }


/* ── CONTACT ──
   Two defects from the live page. */

/* ── SC1, the office cards, stacked ──

   Two rounds of this were spent trying to make an icon and a heading
   sit side by side in a narrow card, and it was never going to look
   right: the icon column plus the card padding left too little room
   for a name like "MISSISSAUGA (MAIN OFFICE)" in wide uppercase, so
   it broke over two or three lines whatever was done to it.

   The client's answer is better than mine. Everything stacks:

     badge
     icon
     content

   Nothing competes for horizontal room, so the name gets the full
   width of the card and stays on one line, and the badge cannot
   collide with anything because it is simply the first thing in the
   box. The markup was already in that order, so this is layout only.

   `site.css` sets the card as a two column grid, which is what put
   the icon beside the text. That is overridden here rather than
   edited there, so the same card markup can still be used elsewhere
   in its original form if it ever needs to be. */

.office-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

@media (min-width: 901px) {
  .office-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.office {
  position: relative;
  display: block;
  grid-template-columns: none;
  padding: 20px 20px 18px;
}

/* First in the box, on its own line. */
.office__tag {
  position: static;
  display: inline-block;
  margin: 0 0 12px;
  white-space: nowrap;
}

/* Then the pin, on its own line. */
.office-ico {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  margin: 0 0 12px;
  border-radius: 11px;
  background: var(--orange-soft);
  color: var(--orange);
}

/* Then everything else, full width. */
.office__body { min-width: 0; }

.office__body h4 {
  margin: 0 0 10px;
  padding-right: 0;
  line-height: 1.4;
}

.office__body address {
  font-style: normal;
  line-height: 1.6;
}

/* The phone and the email. No icons now, so these are plain links on
   their own lines. Emails were breaking mid-word and spilling out of
   the card, "ship@quickshipnow.co" then "m" on the next line, which
   `overflow-wrap` fixes without hyphenating ordinary words. */
.office__ln {
  display: block;
  margin-top: 6px;
  word-break: normal;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.office__ln--tel  { color: var(--orange); font-weight: 600; }
.office__ln--mail { color: var(--blue); }


/* ── CUSTOMER STORIES, the empty band ──
   The live page showed the heading and then roughly 500px of nothing
   where the aeroplane and the quotes belong. The reviews are
   revealed by changes.js once the flight finishes, so if that script
   does not load, or loads against older markup, they stay invisible
   and the section is a hole in the page.

   This is the safety net: after the animation would have finished
   the reviews are visible regardless, and they are visible from the
   start for anyone who has asked for reduced motion. An animation
   that fails should cost the animation, never the content. */
.fly-reviews { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .fly-review { opacity: 1 !important; transform: none !important; }
  .fly-stage  { display: none; }
}

/* No JavaScript at all, or a script that never reaches this section. */
.no-js .fly-review { opacity: 1; transform: none; }


/* ── RESPONSIVE FOR THE NEW BLOCKS ── */

@media (max-width: 1040px) {
  /* The dashboard rail is the first thing to go: it is decoration,
     and the tiles beside it carry the actual figures. */
  .dash__body { grid-template-columns: 1fr; }
  .dash__nav  { display: none; }
}

@media (max-width: 900px) {
  /* REF C-2 says the nodes stack and the figures become 2x2 on a
     phone. A serpentine drawn across a horizontal row makes no sense
     once that row becomes a column, so the curve and the dots go and
     the labels return to normal flow. */
  .net-route      { height: auto; }
  .net-route__svg { display: none; }
  .net-nodes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px 12px;
    height: auto;
  }
  .net-node__label { position: static; }
  .net-node__dot   { display: none; }

  .hero-art { object-position: 68% 50%; }
}

@media (max-width: 600px) {
  .net-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* The heading column no longer sits beside the artwork, so the
     fade covers the whole width instead of clearing to the right. */
  .hero-scrim {
    background: linear-gradient(
      180deg,
      rgba(255, 253, 250, calc(var(--scrim, .8) * 1.2)) 0%,
      rgba(255, 253, 250, calc(var(--scrim, .8) * 1.05)) 55%,
      rgba(255, 253, 250, calc(var(--scrim, .8) * 1.2)) 100%
    );
  }
  .hero-scrim::after { display: none; }
  .hero-art { object-position: 60% 50%; }

  /* The badge is already in the flow, so nothing to undo here. */
  .office-grid { grid-template-columns: 1fr; }
}


/* ── The hero must never depend on the reveal script ──
   It is the first thing anyone sees and it holds the Largest
   Contentful Paint element. Starting it at `opacity: 0` and waiting
   for an IntersectionObserver means a slow script, a blocked script
   or a print stylesheet leaves the headline invisible.

   It still animates: the transition runs from a light, slightly
   raised state rather than from nothing, so there is movement on
   arrival but the words are legible in every frame and in every
   failure mode. */
.hero [data-rv] {
  opacity: 1;
  filter: none;
  transform: translateY(10px);
}
.hero [data-rv].rv { transform: none; }
.hero [data-rv="scale"] { transform: translateY(8px) scale(.99); }
.hero [data-rv="scale"].rv { transform: none; }

/* Printing, and anything that strips scripts. */
@media print {
  [data-rv] { opacity: 1 !important; transform: none !important; filter: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   THE SEPTEMBER 2026 ROUND
   REF SC-1 to SC-14, the client's annotated staging screenshots
   and the reference images sent with them.
   ═══════════════════════════════════════════════════════════ */

/* ── Image marks ──
   qs_mark() renders an uploaded picture wherever an icon slug used to
   go, so a Canadian flag can be the real flag rather than an outline
   of a maple leaf. Sized by its box on both axes with contain, so no
   two marks in a row can come out at different sizes however the
   source files were cropped. */
.qs-mark-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* ── REF SC-5. The savings note at the top of the hero ──
   The client marked the very top of the service hero and asked for
   this to read as a highlighted line above everything else, with the
   rest of the column moving down into the space it left.

   Full width rather than the inline pill it is in its old position,
   because a note sitting above the breadcrumb has to look deliberate
   rather than stranded. The left rule is what makes it read as a note
   about the page instead of a button. */
.svc-save--top {
  display: flex;
  width: 100%;
  margin: 0 0 26px;
  padding: 13px 18px;
  border-left: 4px solid var(--orange);
  border-radius: 0 12px 12px 0;
}
.svc-save--top .svc-save__txt {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
.svc-save--top .svc-save__txt span { font-size: .88rem; }

@media (max-width: 620px) {
  .svc-save--top { margin-bottom: 20px; padding: 11px 14px; gap: 11px; }
  .svc-save--top .svc-save__txt { flex-direction: column; gap: 2px; }
}


/* ── REF SC-9. The card over the hero photo ──
   The component International, LTL and Moves Management all share. The
   reference asks for more room, a rounded badge behind each mark and a
   heading that reads as a heading rather than as a caption. */
.svc-lanes {
  margin: -78px 22px 0;
  padding: 22px 22px 24px;
  border-radius: 20px;
}
.svc-lanes__h {
  margin: 0 0 16px;
  font-size: .74rem;
  letter-spacing: .18em;
  color: var(--ink);
}

/* The round badge. A flag uploaded as a square image fills it; an icon
   slug sits in the middle of it at its own size. Fixed on both axes so
   the two cases cannot come out different heights. */
.svc-lanes__i {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  padding: 3px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--orange);
  flex: none;
  margin-top: 0;
}
.svc-lanes__i .qs-mark-img { border-radius: 50%; }
.svc-lanes__list > li { gap: 14px; align-items: center; }
.svc-lanes__list b { font-size: 1.02rem; }
.svc-lanes__s { margin-top: 4px; font-size: .86rem; }

/* ── REF SC-13. LTL's blocks ──
   The small line does two different jobs. On International it is a
   transit window, where orange reads as a figure worth noticing. On
   LTL it is a full sentence, and orange at 600 weight over three lines
   is what the client could not read.

   Which job it is doing is set per service rather than guessed from
   the length of the text, which would have flipped on its own the
   first time someone edited a word. */
.svc-lanes--desc .svc-lanes__s {
  font-weight: 400;
  color: var(--body);
}
.svc-lanes--desc .svc-lanes__list > li { align-items: flex-start; }
.svc-lanes--desc .svc-lanes__i { margin-top: 2px; }

/* The other half of SC-13: the card hangs further below the photo the
   more it is asked to hold, and on LTL that left an odd gap under the
   shorter text column beside it. Pulling the card up less when it is
   carrying descriptions keeps it inside the photo's shadow, and the
   column beside it fills the row rather than ending halfway. */
.svc-lanes--desc { margin-top: -54px; }
.svc-hero--single .svc-hero__col { align-self: center; }

@media (max-width: 900px) {
  .svc-lanes { margin: 16px 0 0; padding: 18px; }
  .svc-lanes--desc { margin-top: 16px; }
  .svc-lanes__i { width: 40px; height: 40px; }
}


/* ── REF SC-11. The lane cards on the services page ──
   Where we ship, under the service listing. Four across on a desktop,
   two on a tablet, one on a phone. A card with no URL is a div rather
   than an anchor, so it takes none of the link styling and shows no
   arrow: the destination has not been decided and the card should not
   pretend otherwise. */
.lane-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}
.lane-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(23, 20, 18, .06);
  color: inherit;
  text-decoration: none;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.lane-card--link:hover,
.lane-card--link:focus-visible {
  transform: translateY(-4px);
  border-color: var(--orange-line);
  box-shadow: 0 20px 44px rgba(23, 20, 18, .12);
}

.lane-card__top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 14px;
}
.lane-card__i {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  padding: 4px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--orange-soft);
  color: var(--orange);
}
.lane-card__i .qs-mark-img { border-radius: 50%; }
.lane-card__hd { min-width: 0; }
.lane-card__hd h3 {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.lane-card__hd p {
  margin: 6px 0 0;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--body);
}

/* The arrow is the link. It only exists on a card that has somewhere
   to go, which is why it carries no colour change of its own until the
   card is hovered. */
.lane-card__go {
  font-size: 1.15rem;
  line-height: 1;
  color: var(--orange);
  transition: transform .22s ease;
}
.lane-card--link:hover .lane-card__go { transform: translateX(4px); }

.lane-card__ticks {
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.lane-card__ticks li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: .86rem;
  line-height: 1.4;
  color: var(--body);
}
.lane-card__ticks li + li { margin-top: 8px; }
.lane-card__ticks svg { color: var(--orange); flex: none; margin-top: 1px; }
.lane-card__ticks .qs-mark-img { width: 16px; height: 16px; flex: none; margin-top: 1px; }

@media (max-width: 620px) {
  .lane-card { padding: 18px; }
  .lane-card__i { width: 46px; height: 46px; }
}


/* ── REF SC-6, SC-7. The calculator on a service page ──
   The plugin card carries its own styling. This only gives it the same
   width the rest of the page's content uses, so it does not run edge
   to edge inside a section that nothing else does. */
.svc-calc { max-width: 980px; margin-inline: auto; }

/* The site's rhythm is 104px above and below every section, which
   works when a section ends in text or a row of cards flush with the
   grid. It does not work here: the calculator is one tall card with
   28px of its own padding inside it and a drop shadow under that, so
   the 104 reads as roughly 140 and the gap before Customer Stories
   looked like a missing section rather than a break between two.

   The card supplies part of the gap, so the section supplies less.
   Same reasoning for the heading above it: 56px is right over a grid
   and too much over a single form that opens with its own title. */
.sec--calc { padding-bottom: 56px; }
.sec--calc .sec-head { margin-bottom: 36px; }

@media (max-width: 900px) {
  .sec--calc { padding-bottom: 40px; }
  .sec--calc .sec-head { margin-bottom: 28px; }
}


/* ═══════════════════════════════════════════════════════════
   PAGE HERO WITH ARTWORK
   All Locations and Partner With Us. One block serves both, so
   the two pages cannot drift apart.

   .svc-hero already carries overflow:hidden, which is why the
   fact strip lives inside the hero rather than overhanging into
   the section below. An overhanging card would be clipped.
   ═══════════════════════════════════════════════════════════ */

.svc-hero--art {
  background: #FFF9F2;
  padding-bottom: clamp(28px, 3.4vw, 44px);
}

/* The decorative blob behind the plain hero would sit on top of
   the artwork and muddy it. */
.svc-hero--art::after { display: none; }

.phero__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  z-index: 0;
}

/* Fades the artwork out from the left so the heading stays
   readable over it. --scrim comes from the field, so a busier
   replacement image can be pushed further back without a code
   change. */
.phero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(255, 249, 242, calc(.55 + var(--scrim, .62) * .45)) 0%,
    rgba(255, 249, 242, calc(.40 + var(--scrim, .62) * .50)) 34%,
    rgba(255, 249, 242, .16) 62%,
    rgba(255, 249, 242, 0) 84%
  );
}

.phero__col { max-width: 620px; }

.svc-hero--art .svc-hero__cta { margin-top: 30px; }

.svc-hero--art .btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

/* ── The three points, Partner page ── */
.phero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.phero-points > li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 4px 22px 4px 0;
  margin-right: 22px;
  border-right: 1px solid var(--orange-line);
  max-width: 260px;
}
.phero-points > li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.phero-points__i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  color: var(--orange);
  background: var(--orange-soft);
}
.phero-points b {
  display: block;
  font-size: .93rem;
  line-height: 1.28;
  margin-bottom: 3px;
}
.phero-points span {
  display: block;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ── The fact strip ── */
.phero-strip {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: clamp(34px, 4vw, 54px) 0 0;
  padding: clamp(20px, 2.2vw, 28px) clamp(14px, 1.8vw, 24px);
  list-style: none;
  background: rgba(255, 255, 255, .93);
  border: 1px solid rgba(247, 146, 30, .16);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(20, 22, 26, .07);
  backdrop-filter: blur(2px);
}

.phero-fact {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 2px 18px;
  border-right: 1px solid rgba(20, 22, 26, .09);
}
.phero-fact:last-child { border-right: 0; }

.phero-fact__i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  color: var(--orange);
  background: var(--orange-soft);
}

.phero-fact__body { min-width: 0; }

.phero-fact b {
  display: block;
  font-family: var(--font-head);
  font-size: 1.22rem;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--orange);
}
.phero-fact__mid {
  display: block;
  margin-top: 4px;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.34;
  color: var(--ink);
}
.phero-fact__sub {
  display: block;
  margin-top: 2px;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--muted);
}

@media (max-width: 1080px) {
  .phero-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 0; }
  .phero-fact:nth-child(2n) { border-right: 0; }
}

@media (max-width: 860px) {
  .phero__art { object-position: 72% center; }
  .phero__scrim {
    background: linear-gradient(
      170deg,
      rgba(255, 249, 242, calc(.62 + var(--scrim, .62) * .38)) 0%,
      rgba(255, 249, 242, calc(.52 + var(--scrim, .62) * .44)) 52%,
      rgba(255, 249, 242, .70) 100%
    );
  }
  .phero__col { max-width: none; }
  .phero-points > li {
    max-width: none;
    flex: 1 1 100%;
    margin-right: 0;
    padding-right: 0;
    border-right: 0;
  }
}

@media (max-width: 640px) {
  .phero-strip { grid-template-columns: 1fr; gap: 18px 0; }
  .phero-fact { border-right: 0; padding: 2px 4px; }
  .svc-hero--art .svc-hero__cta .btn { flex: 1 1 100%; justify-content: center; }
}


/* ═══════════════════════════════════════════════════════════
   BUILD 22 :: THE WHOLE SITE ON SMALLER DESKTOP SCREENS
   11 September 2026

   Every section was designed at 1440px wide, and nearly all of it is
   sized in fixed px and rem. On a 1300px screen the same content has
   10 percent less room, so it runs edge to edge and labels wrap. The
   client fixed it by hand with 80 to 90 percent browser zoom.

   This does the same thing automatically, for every page and every
   section at once: on a desktop screen narrower than 1440px the page
   is scaled down in proportion, so it keeps the layout it has at
   1440px. The scale steps every 20px, which keeps the working layout
   within about 1.5 percent of 1440px wide.

     1440px and wider   no change
     1244 to 1439px     width / 1440, from .863 to .988
     1081 to 1243px     .85, the smallest it goes, so text stays readable
     1080px and below   no change, the tablet and phone layouts take over

   It only applies while body carries .qs-fit, which functions.php adds
   when "Scale the site on smaller desktop screens" is ticked under
   QuickShip Settings > Page size. Untick it and this whole block
   stops at once.

   Width breakpoints still read the real screen width, not the scaled
   one. Things sized to the screen (vh, vw) scale with the page, so
   the full bleed flight band stops a little short of the screen edge
   on a scaled screen. Left as it is, at the client's instruction.
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 1081px) and (max-width: 1243.98px) { body.qs-fit { zoom: .85; } }
@media (min-width: 1244px) and (max-width: 1263.98px) { body.qs-fit { zoom: .863; } }
@media (min-width: 1264px) and (max-width: 1283.98px) { body.qs-fit { zoom: .877; } }
@media (min-width: 1284px) and (max-width: 1303.98px) { body.qs-fit { zoom: .891; } }
@media (min-width: 1304px) and (max-width: 1323.98px) { body.qs-fit { zoom: .905; } }
@media (min-width: 1324px) and (max-width: 1343.98px) { body.qs-fit { zoom: .919; } }
@media (min-width: 1344px) and (max-width: 1363.98px) { body.qs-fit { zoom: .933; } }
@media (min-width: 1364px) and (max-width: 1383.98px) { body.qs-fit { zoom: .947; } }
@media (min-width: 1384px) and (max-width: 1403.98px) { body.qs-fit { zoom: .961; } }
@media (min-width: 1404px) and (max-width: 1423.98px) { body.qs-fit { zoom: .975; } }
@media (min-width: 1424px) and (max-width: 1439.98px) { body.qs-fit { zoom: .988; } }


/* ═══════════════════════════════════════════════════════════
   BUILD 21, REVISED IN BUILD 22 :: HOME HERO ON SHORT SCREENS

   The client's Windows screen showed the hero cut off: the quote
   card stopped at "Select type" and nothing below the buttons was
   visible. At 80 or 90 percent browser zoom it fitted.

   The hero only ever sized itself by screen WIDTH, and on desktop it
   needs about 760px of HEIGHT: 80px of header, 84px of padding above
   the badge and a quote card about 660px tall on its own. A 1920x1080
   monitor under Windows display scaling, with tabs, a bookmarks bar
   and the taskbar, leaves the page roughly 600-700px.

   So the hero reads the screen HEIGHT as well, in two steps, desktop
   only:

     up to 860px tall   tighter spacing, heading sized by height
     up to 700px tall   compact quote card as well

   TWO COPIES, ONE SET OF VALUES
   With the site scale above switched on, the page already comes down
   in proportion, so a 1309x610 screen behaves like a 1440x671 one.
   Measuring the real height would squeeze the hero twice. Each step
   is therefore written twice with identical values:

     body:not(.qs-fit)  scale off, measured against the real height
     body.qs-fit        scale on, measured against the scaled height

   The scaled height is not something a media query can read, so it is
   worked out from the screen shape: below 1440px the scale is width /
   1440, which makes the scaled height height x 1440 / width, and
   "scaled height up to 700px" is the same as "aspect ratio at least
   1440/700". Below 1244px the scale is fixed at .85, so it becomes
   a plain height of 700 x .85.

   Change a value in one copy and change it in the other.

   Tall screens are untouched. Nothing is hidden and no wording, image
   or link changes: only spacing and type size move.
   ═══════════════════════════════════════════════════════════ */


/* ── 1. Every desktop height: the artwork and the trust row ── */

@media (min-width: 1081px) {

  /* The artwork.
     78% was set for the first artwork, whose subject sat on the far
     right. The current file is the centred one, and 78% drags it left:
     the taller the hero, the more the image is enlarged to cover it,
     and the further the aircraft slides into "From Canada". That is
     exactly what the client's screenshot shows.

     object-position pins one point of the image to the same point of
     the box, whatever the enlargement. 36% sits just left of the
     aircraft's tail, so enlarging the image can only move the aircraft
     right, away from the heading, never left onto it. It stays beside
     "From Canada" on a short screen and a tall one. */
  .hero-art { object-position: 36% 50%; }

  /* The trust row.
     auto-fit at 160px gave three items and then one on a second row,
     which cost a whole row of height. Four across on one line. */
  .hero .hero-feats {
    grid-template-columns: repeat(4, minmax(0, auto));
    justify-content: space-between;
    gap: 12px 16px;
  }
  /* Top aligned: when one item runs to an extra line, its icon stays
     level with the others instead of dropping to the middle. */
  .hero .hero-feats > li { gap: 8px; align-items: flex-start; }
  .hero .hero-feats__i {
    width: 34px;
    height: 34px;
    /* The same colour the translucent tint gives over the cream side,
       but solid, so an icon over the container ship stays clean. */
    background: #FEF2E4;
  }
  /* A soft cream halo behind the words, so the items that sit over the
     ship stay readable. Invisible over the plain cream on the left. */
  .hero .hero-feats b,
  .hero .hero-feats span span {
    text-shadow: 0 0 6px rgba(255, 253, 250, .95), 0 0 14px rgba(255, 253, 250, .85);
  }
}

/* Between 1081px and 1239px the text column is too narrow for four
   across, so two by two, which is still one row shorter than 3 + 1.
   Scale off only: with it on, the working width never drops below
   1272px and four across fits. */
@media (min-width: 1081px) and (max-width: 1239px) {
  body:not(.qs-fit) .hero .hero-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ── 2. Up to 860px tall: tighter hero ── */

/* Scale off */
@media (min-width: 1081px) and (max-height: 860px) {

  body:not(.qs-fit) .hero { padding-top: 40px; }

  body:not(.qs-fit) .hero .badge { margin-bottom: 18px; }

  body:not(.qs-fit) .hero .hero-title { margin-bottom: 12px; }
  body:not(.qs-fit) .hero .hero-title__main { font-size: clamp(2.3rem, min(5vw, 7vh), 3.5rem); }
  body:not(.qs-fit) .hero .hero-title__sub  { font-size: clamp(1.9rem, min(4.1vw, 5.75vh), 2.85rem); }

  body:not(.qs-fit) .hero .hero-sub  { margin-top: 8px; font-size: clamp(1.1rem, 2.6vh, 1.5rem); }
  body:not(.qs-fit) .hero .hero-lead { margin: 16px 0 22px; }
  body:not(.qs-fit) .hero .hero-feats { margin-top: 20px; }

  body:not(.qs-fit) .hero .quote-card .qs-calc                 { padding: 20px 22px; }
  body:not(.qs-fit) .hero .quote-card .qs-calc .qs-calc__head  { margin-bottom: 14px; }
  body:not(.qs-fit) .hero .quote-card .qs-calc .qs-tabs        { margin-bottom: 14px; }
  body:not(.qs-fit) .hero .quote-card .qs-calc .qs-row         { margin-bottom: 12px; }
  body:not(.qs-fit) .hero .quote-card .qs-calc .qs-field input { padding-top: 9px; padding-bottom: 9px; }
  body:not(.qs-fit) .hero .quote-card .qs-calc .qs-pkg         { padding: 14px; margin-bottom: 10px; }
  body:not(.qs-fit) .hero .quote-card .qs-calc .qs-add         { padding-top: 9px; padding-bottom: 9px; margin-bottom: 12px; }
  body:not(.qs-fit) .hero .quote-card .qs-calc .qs-go          { padding-top: 12px; padding-bottom: 12px; }
  body:not(.qs-fit) .hero .quote-card .qs-calc .qs-help        { margin-top: 10px; }
}

/* Scale on, same values */
@media (min-width: 1440px) and (max-height: 860px),
       (min-width: 1244px) and (max-width: 1439.98px) and (min-aspect-ratio: 1440/860),
       (min-width: 1081px) and (max-width: 1243.98px) and (max-height: 731px) {

  body.qs-fit .hero { padding-top: 40px; }

  body.qs-fit .hero .badge { margin-bottom: 18px; }

  body.qs-fit .hero .hero-title { margin-bottom: 12px; }
  body.qs-fit .hero .hero-title__main { font-size: clamp(2.3rem, min(5vw, 7vh), 3.5rem); }
  body.qs-fit .hero .hero-title__sub  { font-size: clamp(1.9rem, min(4.1vw, 5.75vh), 2.85rem); }

  body.qs-fit .hero .hero-sub  { margin-top: 8px; font-size: clamp(1.1rem, 2.6vh, 1.5rem); }
  body.qs-fit .hero .hero-lead { margin: 16px 0 22px; }
  body.qs-fit .hero .hero-feats { margin-top: 20px; }

  body.qs-fit .hero .quote-card .qs-calc                 { padding: 20px 22px; }
  body.qs-fit .hero .quote-card .qs-calc .qs-calc__head  { margin-bottom: 14px; }
  body.qs-fit .hero .quote-card .qs-calc .qs-tabs        { margin-bottom: 14px; }
  body.qs-fit .hero .quote-card .qs-calc .qs-row         { margin-bottom: 12px; }
  body.qs-fit .hero .quote-card .qs-calc .qs-field input { padding-top: 9px; padding-bottom: 9px; }
  body.qs-fit .hero .quote-card .qs-calc .qs-pkg         { padding: 14px; margin-bottom: 10px; }
  body.qs-fit .hero .quote-card .qs-calc .qs-add         { padding-top: 9px; padding-bottom: 9px; margin-bottom: 12px; }
  body.qs-fit .hero .quote-card .qs-calc .qs-go          { padding-top: 12px; padding-bottom: 12px; }
  body.qs-fit .hero .quote-card .qs-calc .qs-help        { margin-top: 10px; }
}

/* "DIMENSIONS (L x W x H)" wrapped to two lines at about 1300px wide,
   pushing the whole package box down a line. Kept on one line where
   the card is wide enough; narrower than that it wraps again, because
   forcing it pushes the CM / IN switch out of the box. With the scale
   on the card is always wide enough. */
@media (min-width: 1240px) and (max-height: 860px) {
  body:not(.qs-fit) .hero .quote-card .qs-calc .qs-label-row label {
    white-space: nowrap;
    letter-spacing: .08em;
  }
}
@media (min-width: 1440px) and (max-height: 860px),
       (min-width: 1244px) and (max-width: 1439.98px) and (min-aspect-ratio: 1440/860),
       (min-width: 1081px) and (max-width: 1243.98px) and (max-height: 731px) {
  body.qs-fit .hero .quote-card .qs-calc .qs-label-row label {
    white-space: nowrap;
    letter-spacing: .08em;
  }
}


/* ── 3. Up to 700px tall: compact hero and compact quote card ── */

/* Scale off */
@media (min-width: 1081px) and (max-height: 700px) {

  body:not(.qs-fit) .hero { padding-top: 18px; }

  body:not(.qs-fit) .hero .badge { margin-bottom: 12px; padding: 6px 15px; }

  body:not(.qs-fit) .hero .hero-title { margin-bottom: 8px; line-height: 1.04; }
  body:not(.qs-fit) .hero .hero-title__main { font-size: clamp(2rem, min(5vw, 7.2vh), 3rem); }
  body:not(.qs-fit) .hero .hero-title__sub  { font-size: clamp(1.65rem, min(4.1vw, 5.9vh), 2.45rem); }

  body:not(.qs-fit) .hero .hero-sub  { margin-top: 6px; font-size: 1.15rem; }
  body:not(.qs-fit) .hero .hero-lead { margin: 10px 0 16px; font-size: .98rem; line-height: 1.55; }
  body:not(.qs-fit) .hero .hero-actions .btn { padding: 11px 22px; }
  body:not(.qs-fit) .hero .hero-feats { margin-top: 14px; }

  body:not(.qs-fit) .hero .quote-card .qs-calc { padding: 15px 18px; }

  body:not(.qs-fit) .hero .quote-card .qs-calc .qs-calc__head    { margin-bottom: 9px; }
  body:not(.qs-fit) .hero .quote-card .qs-calc .qs-calc__head h3 { font-size: 1.08rem; margin-bottom: 2px; }
  body:not(.qs-fit) .hero .quote-card .qs-calc .qs-calc__head p  { font-size: .8rem; line-height: 1.45; }

  body:not(.qs-fit) .hero .quote-card .qs-calc .qs-tabs { padding: 3px; margin-bottom: 10px; }
  body:not(.qs-fit) .hero .quote-card .qs-calc .qs-tab  { padding: 6px 10px; }

  body:not(.qs-fit) .hero .quote-card .qs-calc .qs-row { gap: 12px; margin-bottom: 9px; }
  body:not(.qs-fit) .hero .quote-card .qs-calc .qs-field label { margin-bottom: 4px; }
  body:not(.qs-fit) .hero .quote-card .qs-calc .qs-field input { padding: 7px 11px; font-size: .88rem; }
  body:not(.qs-fit) .hero .quote-card .qs-calc .qs-unit        { margin-bottom: 4px; }
  body:not(.qs-fit) .hero .quote-card .qs-calc .qs-unit button { padding: 2px 7px; }

  body:not(.qs-fit) .hero .quote-card .qs-calc .qs-pkg      { padding: 10px 12px; margin-bottom: 8px; }
  body:not(.qs-fit) .hero .quote-card .qs-calc .qs-pkg__bar { margin-bottom: 6px; }

  body:not(.qs-fit) .hero .quote-card .qs-calc .qs-wtype        { margin-top: 6px; }
  body:not(.qs-fit) .hero .quote-card .qs-calc .qs-wtype legend { margin-bottom: 3px; }
  body:not(.qs-fit) .hero .quote-card .qs-calc .qs-wtype__opts  { gap: 2px 14px; }
  body:not(.qs-fit) .hero .quote-card .qs-calc .qs-wtype__opt   { padding: 2px 4px; }

  body:not(.qs-fit) .hero .quote-card .qs-calc .qs-add  { padding-top: 7px; padding-bottom: 7px; margin-bottom: 9px; }
  body:not(.qs-fit) .hero .quote-card .qs-calc .qs-go   { padding-top: 10px; padding-bottom: 10px; }
  body:not(.qs-fit) .hero .quote-card .qs-calc .qs-help { margin-top: 7px; line-height: 1.4; }
}

/* Scale on, same values */
@media (min-width: 1440px) and (max-height: 700px),
       (min-width: 1244px) and (max-width: 1439.98px) and (min-aspect-ratio: 1440/700),
       (min-width: 1081px) and (max-width: 1243.98px) and (max-height: 595px) {

  body.qs-fit .hero { padding-top: 18px; }

  body.qs-fit .hero .badge { margin-bottom: 12px; padding: 6px 15px; }

  body.qs-fit .hero .hero-title { margin-bottom: 8px; line-height: 1.04; }
  body.qs-fit .hero .hero-title__main { font-size: clamp(2rem, min(5vw, 7.2vh), 3rem); }
  body.qs-fit .hero .hero-title__sub  { font-size: clamp(1.65rem, min(4.1vw, 5.9vh), 2.45rem); }

  body.qs-fit .hero .hero-sub  { margin-top: 6px; font-size: 1.15rem; }
  body.qs-fit .hero .hero-lead { margin: 10px 0 16px; font-size: .98rem; line-height: 1.55; }
  body.qs-fit .hero .hero-actions .btn { padding: 11px 22px; }
  body.qs-fit .hero .hero-feats { margin-top: 14px; }

  body.qs-fit .hero .quote-card .qs-calc { padding: 15px 18px; }

  body.qs-fit .hero .quote-card .qs-calc .qs-calc__head    { margin-bottom: 9px; }
  body.qs-fit .hero .quote-card .qs-calc .qs-calc__head h3 { font-size: 1.08rem; margin-bottom: 2px; }
  body.qs-fit .hero .quote-card .qs-calc .qs-calc__head p  { font-size: .8rem; line-height: 1.45; }

  body.qs-fit .hero .quote-card .qs-calc .qs-tabs { padding: 3px; margin-bottom: 10px; }
  body.qs-fit .hero .quote-card .qs-calc .qs-tab  { padding: 6px 10px; }

  body.qs-fit .hero .quote-card .qs-calc .qs-row { gap: 12px; margin-bottom: 9px; }
  body.qs-fit .hero .quote-card .qs-calc .qs-field label { margin-bottom: 4px; }
  body.qs-fit .hero .quote-card .qs-calc .qs-field input { padding: 7px 11px; font-size: .88rem; }
  body.qs-fit .hero .quote-card .qs-calc .qs-unit        { margin-bottom: 4px; }
  body.qs-fit .hero .quote-card .qs-calc .qs-unit button { padding: 2px 7px; }

  body.qs-fit .hero .quote-card .qs-calc .qs-pkg      { padding: 10px 12px; margin-bottom: 8px; }
  body.qs-fit .hero .quote-card .qs-calc .qs-pkg__bar { margin-bottom: 6px; }

  body.qs-fit .hero .quote-card .qs-calc .qs-wtype        { margin-top: 6px; }
  body.qs-fit .hero .quote-card .qs-calc .qs-wtype legend { margin-bottom: 3px; }
  body.qs-fit .hero .quote-card .qs-calc .qs-wtype__opts  { gap: 2px 14px; }
  body.qs-fit .hero .quote-card .qs-calc .qs-wtype__opt   { padding: 2px 4px; }

  body.qs-fit .hero .quote-card .qs-calc .qs-add  { padding-top: 7px; padding-bottom: 7px; margin-bottom: 9px; }
  body.qs-fit .hero .quote-card .qs-calc .qs-go   { padding-top: 10px; padding-bottom: 10px; }
  body.qs-fit .hero .quote-card .qs-calc .qs-help { margin-top: 7px; line-height: 1.4; }
}