/* ==========================================================================
   Premier Waste Group — premierwastegroup.co.uk
   Design system: hazard-workwear-premium
   Deep charcoal base · warm off-white · single hi-vis amber accent
   Built to Draxiq standard (master.md v1.10). Strict CSP: no inline styles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONT — self-hosted variable Archivo (wght 400-900, wdth 62-125%)
   Self-hosted because strict CSP sets style-src/font-src to 'self'.
   Latin subset only. The width axis is what makes the headings distinctive.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/assets/fonts/archivo-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces — deep charcoal, warmed slightly so it reads workwear not tech */
  --ink:        #14171A;
  --ink-2:      #1A1E22;
  --ink-3:      #22272C;
  --line:       #2E343A;
  --line-soft:  #262B31;

  /* Type */
  --paper:      #F5F2EC;
  --paper-dim:  #B9B4AB;
  --paper-mute: #8D8880;

  /* Accent — hi-vis amber, single accent, used sparingly and deliberately */
  --hi:         #FFB800;
  --hi-deep:    #E5A200;
  --hi-glow:    rgba(255, 184, 0, 0.14);
  --hi-edge:    rgba(255, 184, 0, 0.32);

  /* Type scale — fluid, clamps at both ends so 360px and 1600px both behave */
  --t-hero:  clamp(2.05rem, 1.2rem + 3.6vw, 4rem);
  --t-h2:    clamp(1.65rem, 1.15rem + 2.1vw, 2.75rem);
  --t-h3:    clamp(1.1rem,  1rem    + 0.5vw, 1.35rem);
  --t-body:  clamp(1rem,    0.96rem + 0.2vw, 1.09rem);
  --t-small: 0.875rem;
  --t-micro: 0.75rem;

  /* Rhythm */
  --gap:      clamp(1rem, 0.6rem + 1.6vw, 1.6rem);
  --section:  clamp(3.5rem, 2rem + 6vw, 7rem);
  --radius:   14px;
  --radius-s: 9px;

  --shell: 1180px;
  --ease:  cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   3. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sticky header is 0 on mobile, but anchor targets still want breathing room */
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  line-height: 1.06;
  letter-spacing: -0.021em;
  font-weight: 800;
  font-stretch: 112%;         /* the width axis — expanded, industrial, deliberate */
  text-wrap: balance;
}

h1 { font-size: var(--t-hero); font-weight: 900; font-stretch: 116%; letter-spacing: -0.028em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-stretch: 106%; letter-spacing: -0.012em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--hi); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--hi-deep); }

ul { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 700; color: #FFF; }

/* Keyboard focus — amber ring, always visible, never removed */
:focus-visible {
  outline: 3px solid var(--hi);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 0.6rem + 2vw, 2.25rem);
}

.section { padding-block: var(--section); position: relative; }
.section--tint { background: var(--ink-2); }

/* NOTE: content-visibility: auto was applied here and then REMOVED (3 Aug 2026).
   It genuinely helped — mobile TBT 160ms -> 100ms, CLS stayed 0 — but it made
   the Lighthouse ACCESSIBILITY score flap between 96 and 100 across identical
   runs. axe audits a section Chrome has skipped rendering, so computed colour
   comes back as the initial value (black) and every .area chip is reported as
   1.39:1 contrast. It is a false positive — the chips are #F5F2EC on #22272C,
   and skipped content stays in the accessibility tree, so real users are
   unaffected — but an audit score that changes at random is worse than the one
   performance point it bought. Do not re-add without re-checking this. */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--hi);
  color: var(--ink);
  padding: 0.85rem 1.4rem;
  font-weight: 800;
  border-radius: 0 0 var(--radius-s) 0;
}
.skip-link:focus {
  left: 0;
  color: var(--ink);
}

/* Section eyebrow — small amber label above each H2 */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-micro);
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hi);
  margin-bottom: 0.9rem;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--hi);
  flex: none;
}

.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 1rem + 3vw, 3.25rem); }
.section-head p { color: var(--paper-dim); margin-bottom: 0; }
.lede { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); color: var(--paper-dim); }

/* Hazard rule — the workwear motif, used as a thin band, never a big block */
.hazard {
  height: 7px;
  width: 100%;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--hi) 0 14px,
    var(--ink) 14px 28px
  );
  opacity: 0.9;
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 54px;              /* > 44px touch target (§3.8) */
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius-s);
  border: 2px solid transparent;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 800;
  font-stretch: 104%;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease),
              border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--call {
  background: var(--hi);
  color: var(--ink);
  box-shadow: 0 6px 22px -8px rgba(255, 184, 0, 0.6);
}
.btn--call:hover { background: #FFC72B; color: var(--ink); }

.btn--wa {
  background: transparent;
  color: var(--paper);
  border-color: var(--line);
}
.btn--wa:hover {
  border-color: var(--hi);
  color: var(--hi);
  background: var(--hi-glow);
}

.btn svg { width: 20px; height: 20px; flex: none; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.9rem;
}

/* --------------------------------------------------------------------------
   6. HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--line-soft);
  background: var(--ink);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.58rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 1.05rem;
  text-decoration: none;
  color: var(--paper);
}
/* Inline SVG — scales losslessly at any size, so this is a pure layout choice.
   Wordmark scaled with it so the lockup stays in proportion. */
.brand-mark { width: 81px; height: 81px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-weight: 900;
  font-stretch: 114%;
  font-size: 2rem;
  letter-spacing: -0.024em;
  text-transform: uppercase;
}
.brand-sub {
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

/* Below 700px the full-size lockup plus the phone button stops fitting on one
   row, so it steps down rather than wrapping or overflowing. */
@media (max-width: 700px) {
  .header-inner { padding-block: 1.2rem; }
  .brand { gap: 0.8rem; }
  .brand-mark { width: 62px; height: 62px; }
  .brand-name { font-size: 1.5rem; }
  .brand-sub { font-size: 0.82rem; }
}

@media (max-width: 480px) {
  .brand-mark { width: 52px; height: 52px; }
  .brand-name { font-size: 1.24rem; }
  .brand-sub { font-size: 0.7rem; }
}

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.82rem;
  text-decoration: none;
  color: var(--paper);
  font-weight: 800;
  font-size: 1.58rem;
  font-stretch: 104%;
  padding: 0.9rem 1.58rem;
  border: 2.5px solid var(--line);
  border-radius: var(--radius-s);
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.header-phone:hover { border-color: var(--hi); color: var(--hi); }
.header-phone svg { width: 27px; height: 27px; flex: none; }

@media (max-width: 900px) {
  .header-phone { font-size: 1.2rem; padding: 0.75rem 1.15rem; gap: 0.6rem; }
  .header-phone svg { width: 21px; height: 21px; }
}

@media (max-width: 560px) {
  /* Icon-only at the very narrow end. The number is hidden VISUALLY, not with
     display:none — removing it from the accessibility tree left the link with
     the aria-hidden icon as its only content and therefore no accessible name
     at all. Screen readers and voice control still get "07496 093956". */
  .header-phone span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .header-phone { padding: 0.6rem 0.8rem; }
}

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(2.75rem, 1.5rem + 5vw, 5.5rem) clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  overflow: hidden;
}
/* Soft amber wash behind the headline — no image, no weight, no CLS */
.hero::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -12%;
  width: min(760px, 78%);
  height: 150%;
  background: radial-gradient(closest-side, var(--hi-glow), transparent 72%);
  pointer-events: none;
}
.hero .shell { position: relative; }
.hero-copy { max-width: 40rem; }
/* The headline gets a wider measure than the body copy it sits above.
   Archivo Black at expanded width is very wide per character — held to the
   40rem body measure it broke to six lines and swallowed the viewport. */
.hero h1 { margin-bottom: 1.15rem; max-width: 58rem; }
.hero-sub {
  font-size: clamp(1.06rem, 1rem + 0.55vw, 1.28rem);
  color: var(--paper-dim);
  max-width: 34rem;
}

/* Licence badge pill — sits directly under the H1, amber outline. The #1 differentiator. */
.licence-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.62rem 1.1rem 0.62rem 0.85rem;
  margin-bottom: 1.6rem;
  border: 2px solid var(--hi);
  border-radius: 100px;
  background: var(--hi-glow);
  color: var(--paper);
  font-size: clamp(0.8rem, 0.75rem + 0.25vw, 0.94rem);
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: 0.005em;
  text-decoration: none;
  line-height: 1.3;
}
.licence-pill:hover { background: rgba(255, 184, 0, 0.2); color: var(--paper); }
.licence-pill svg { width: 19px; height: 19px; flex: none; color: var(--hi); }
.licence-pill b { font-weight: 900; color: var(--hi); white-space: nowrap; }

/* Hero trust strip */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin-top: 2.1rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-small);
  color: var(--paper-dim);
}
.hero-trust li { display: flex; align-items: center; gap: 0.5rem; }
.hero-trust svg { width: 15px; height: 15px; color: var(--hi); flex: none; }

/* --------------------------------------------------------------------------
   8. SIGNATURE ANIMATION STRIP
   aspect-ratio reserves the space before paint → CLS 0 (§1.43)
   -------------------------------------------------------------------------- */
.scene-strip {
  background: var(--ink-2);
  border-block: 1px solid var(--line-soft);
  overflow: hidden;
  position: relative;
}
.scene {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 260;
}

/* The SVG uses preserveAspectRatio="...slice", so it scales to COVER the box.
   Any height beyond what the 1200x260 viewBox implies therefore gets paid for
   in HORIZONTAL cropping, taken evenly off both sides (xMid).
   A min-height of 150px used to force exactly that on a phone: at 390px wide it
   cropped the viewBox down to roughly x 262-938, which put the thrower (x~203)
   and the waste pile completely out of shot. Height and visible width are not
   independent here — keep the mobile ratio near the viewBox's own 1200/260. */
@media (max-width: 720px) {
  .scene { aspect-ratio: 1200 / 320; }
}
@media (max-width: 420px) {
  .scene { aspect-ratio: 1200 / 300; }
}

/* Truck drives left → right on a loop. Transform only — never left/margin.
   NOTE: will-change: transform was tried here and measurably HURT — mobile TBT
   went 160ms -> 300-630ms. Blink cannot composite transform animations on SVG
   children, so will-change just forces extra layers for content that still
   repaints on the main thread. Do not re-add it. */
.truck { animation: drive 14s linear infinite; }
.wheel { animation: roll 1.1s linear infinite; transform-box: fill-box; transform-origin: center; }

/* Bag: nested transforms. Outer = linear X, inner = eased Y, innermost = settle bounce.
   Splitting the axes is what makes it read as a real throw rather than a slide. */
.bag-x { animation: bag-x 14s linear infinite; }
.bag-y { animation: bag-y 14s linear infinite; }
.bag-spin { animation: bag-spin 14s linear infinite; transform-box: fill-box; transform-origin: center; }

@keyframes drive {
  from { transform: translateX(-380px); }
  to   { transform: translateX(1320px); }
}
@keyframes roll {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Bag flight, worked out against the truck's actual position — not eyeballed.
   Truck travels -380 → 1320 (1700 units) per loop, so it moves 17 units per 1%.
   Release at 42%, land at 52%: 322 units in 10% (38.2/1%) — thrown ahead of the truck.
   After 52% the bag must track the bed exactly: 322 → 1138 over 48% = 17.0 per 1%.
   That equality is what keeps the bag from sliding along the deck. */
@keyframes bag-x {
  0%, 31.1% { transform: translateX(0); opacity: 0; }
  32.1%     { transform: translateX(0); opacity: 1; }
  42.1%     { transform: translateX(250px); opacity: 1; }
  100%      { transform: translateX(1234px); opacity: 1; }
}
/* Y is hand-shaped as a parabola and runs linear, so the arc slows at the apex
   and accelerates into the deck the way a thrown weight actually does.
   Rest height is -11: the deck sits 11 units above the thrower's hand. */
@keyframes bag-y {
  0%, 31.1% { transform: translateY(0); }
  33%       { transform: translateY(-46px); }
  35%       { transform: translateY(-74px); }
  37%       { transform: translateY(-90px); }   /* apex */
  39%       { transform: translateY(-80px); }
  41%       { transform: translateY(-46px); }
  42.1%     { transform: translateY(-13px); }   /* lands on the deck */
  44%       { transform: translateY(-27px); }   /* bounce */
  46%       { transform: translateY(-13px); }
  47.5%     { transform: translateY(-19px); }
  49%, 100% { transform: translateY(-13px); }   /* settled */
}
@keyframes bag-spin {
  0%, 31.1% { transform: rotate(0deg); }
  42.1%     { transform: rotate(344deg); }
  44%       { transform: rotate(372deg); }
  49%, 100% { transform: rotate(356deg); }
}

/* Thrower's arm. Origin is the shoulder (bottom-left of the arm's own box).
   Winds back, then swings through — the bag leaves the hand at 42%, early in
   the forward swing, so the throw reads as the cause of the flight. */
.arm { animation: throw 14s linear infinite; transform-box: fill-box; transform-origin: 0% 100%; }
@keyframes throw {
  0%, 27%   { transform: rotate(8deg); }
  30.5%     { transform: rotate(-68deg); }   /* wound back */
  33.5%     { transform: rotate(34deg); }    /* follow-through; bag leaves at 32.1% */
  37%       { transform: rotate(4deg); }
  40%, 100% { transform: rotate(8deg); }
}

/* Each loader fades up as the truck approaches and away once it has gone by,
   so attention travels along the street with the truck instead of three static
   figures competing for it the whole loop. Opacity only — compositor-cheap. */
.loader { animation: loader-fade 14s linear infinite; }
@keyframes loader-fade {
  0%, 6%    { opacity: 0; }
  13%       { opacity: 1; }
  50%       { opacity: 1; }
  60%, 100% { opacity: 0; }
}

/* The second and third loaders run the SAME keyframes, phase-shifted with a
   negative delay, rather than duplicating four keyframe sets each. Derived from
   the truck's speed (17 units per 1% of the loop): loader B fires 17.1% later,
   loader C 34.1% later, which is exactly where the bed reaches them.
   Negative — a positive delay would leave the bag parked and visible at the
   thrower's hand until its first run began. Must sit AFTER the `animation`
   shorthands above, which reset delay to 0. */
.ph-b { animation-delay: -11.53s; }
.ph-c { animation-delay: -9.06s; }

/* Paused when offscreen — set by IntersectionObserver, keeps the main thread free */
.scene.is-paused * { animation-play-state: paused !important; }

/* Footer miniature. Its own viewBox window (y 88-260) rather than a slice crop of
   the full scene — slicing cut the cab roof off at the top of the strip. */
.scene--mini { aspect-ratio: 1200 / 172; min-height: 0; opacity: 0.75; }
@media (max-width: 720px) { .scene--mini { aspect-ratio: 1200 / 172; } }

/* --------------------------------------------------------------------------
   9. CARD GRIDS
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 258px), 1fr));
}

.card {
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(1.35rem, 1rem + 1vw, 1.85rem);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.card:hover { border-color: var(--hi-edge); transform: translateY(-3px); }
.card h3 { margin-bottom: 0.45rem; }
.card p { color: var(--paper-dim); font-size: 0.97rem; margin-bottom: 0; }

.card-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 1rem;
  color: var(--hi);
}
.section--tint .card { background: var(--ink-3); border-color: var(--line); }

/* --------------------------------------------------------------------------
   10. PRICING EXPLAINER — no fixed prices, by client decision
   -------------------------------------------------------------------------- */
.price-lead {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) { .price-lead { grid-template-columns: 1.05fr 0.95fr; } }

.factor-list { display: grid; gap: 0.85rem; }
.factor {
  display: flex;
  gap: 0.95rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--hi);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.factor h3 { font-size: 1rem; margin-bottom: 0.15rem; }
.factor p { font-size: 0.93rem; color: var(--paper-dim); margin: 0; }

/* Quote panel — the WhatsApp photo-quote mechanism, visually the hero of this section */
.quote-panel {
  background: linear-gradient(158deg, var(--ink-3), var(--ink-2));
  border: 2px solid var(--hi-edge);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  position: relative;
  overflow: hidden;
}
.quote-panel::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background-image: repeating-linear-gradient(-45deg, var(--hi) 0 11px, transparent 11px 22px);
  opacity: 0.85;
}
.quote-panel h3 { font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem); margin-bottom: 0.7rem; }
.quote-panel p { color: var(--paper-dim); }

/* Comparison callouts — council + skip, factual and date-stamped */
.compare {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  margin-top: clamp(2rem, 1.2rem + 2.5vw, 3rem);
}
.compare-card {
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 1rem + 1vw, 1.7rem);
}
.compare-card h3 { color: var(--paper); margin-bottom: 0.6rem; }
.compare-card p { color: var(--paper-dim); font-size: 0.96rem; }
.compare-note {
  display: block;
  margin-top: 0.9rem;
  font-size: var(--t-micro);
  color: var(--paper-mute);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   11. HOW IT WORKS — numbered steps
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  counter-reset: step;
}
.step {
  position: relative;
  padding-top: 3.4rem;
  counter-increment: step;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-size: 2.5rem;
  font-weight: 900;
  font-stretch: 118%;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--hi-edge);
  letter-spacing: -0.04em;
}
.step h3 { margin-bottom: 0.4rem; }
.step p { color: var(--paper-dim); font-size: 0.96rem; margin-bottom: 0; }

.transfer-note {
  margin-top: clamp(1.8rem, 1rem + 2vw, 2.5rem);
  padding: 1.15rem 1.35rem;
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-s);
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  font-size: 0.96rem;
  color: var(--paper-dim);
}
.transfer-note svg { width: 22px; height: 22px; color: var(--hi); flex: none; margin-top: 2px; }
.section--tint .transfer-note { background: var(--ink-3); border-color: var(--line); }

/* --------------------------------------------------------------------------
   12. COVERAGE
   -------------------------------------------------------------------------- */
.areas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.area {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.62rem 1.1rem;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 0.95rem;
  font-weight: 600;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.area::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hi);
  flex: none;
}
.area:hover { border-color: var(--hi-edge); }
.area--home {
  background: var(--hi-glow);
  border-color: var(--hi);
  color: var(--paper);
  font-weight: 800;
}
.section--tint .area { background: var(--ink-3); }

.areas-note { margin-top: 1.6rem; color: var(--paper-dim); font-size: 0.97rem; }

/* --------------------------------------------------------------------------
   13. LICENSED & LEGAL
   -------------------------------------------------------------------------- */
.legal-grid {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  align-items: start;
}
@media (min-width: 900px) { .legal-grid { grid-template-columns: 1.1fr 0.9fr; } }

/* Duty-of-care warning — the "YOU can be fined" block. Amber left rule, not red;
   we're informing, not alarming. */
.duty {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--hi);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: clamp(1.4rem, 1rem + 1.4vw, 2rem);
}
.duty h3 { margin-bottom: 0.75rem; }
.duty p { color: var(--paper-dim); }
.duty .warn {
  color: var(--paper);
  font-weight: 700;
  border-bottom: 2px solid var(--hi);
  padding-bottom: 1px;
}

/* Licence card — styled like a physical credential */
.licence-card {
  background: var(--ink-3);
  border: 1px solid var(--hi-edge);
  border-radius: var(--radius);
  overflow: hidden;
}
.licence-card-top {
  background-image: repeating-linear-gradient(-45deg, var(--hi) 0 13px, var(--hi-deep) 13px 26px);
  height: 8px;
}
.licence-card-body { padding: clamp(1.35rem, 1rem + 1.2vw, 1.85rem); }
.licence-card h3 { margin-bottom: 1.1rem; }

.licence-rows { display: grid; gap: 0.8rem; margin-bottom: 1.4rem; }
.licence-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.94rem;
}
.licence-row:last-child { border-bottom: 0; padding-bottom: 0; }
/* --paper-mute on the lighter --ink-3 card gives 4.27:1 — under the 4.5:1 AA
   floor for body text. --paper-dim takes it to 7.3:1. Verified via Lighthouse. */
.licence-row dt { color: var(--paper-dim); flex: none; }
.licence-row dd {
  margin: 0;
  text-align: right;
  font-weight: 700;
  color: var(--paper);
}
.licence-row dd.num {
  color: var(--hi);
  font-weight: 900;
  letter-spacing: 0.04em;
  font-size: 1.02rem;
}

/* --------------------------------------------------------------------------
   15. FAQ — native <details>, keyboard accessible with zero JS
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 0.8rem; max-width: 52rem; }

.faq-item {
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-s);
  overflow: hidden;
}
.faq-item[open] { border-color: var(--hi-edge); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  cursor: pointer;
  font-weight: 700;
  font-stretch: 104%;
  font-size: 1.03rem;
  list-style: none;
  min-height: 54px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--hi); }

.faq-item summary::after {
  content: '';
  width: 12px;
  height: 12px;
  flex: none;
  border-right: 2.5px solid var(--hi);
  border-bottom: 2.5px solid var(--hi);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.faq-body { padding: 0 1.35rem 1.35rem; color: var(--paper-dim); }
.faq-body p { font-size: 0.98rem; }
.faq-body p:last-child { margin-bottom: 0; }
.section--tint .faq-item { background: var(--ink-3); border-color: var(--line); }

/* --------------------------------------------------------------------------
   16. CONTACT CTA
   -------------------------------------------------------------------------- */
.cta {
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
}
.cta .btn-row { justify-content: center; }
.cta h2 { margin-bottom: 0.8rem; }
.cta p { color: var(--paper-dim); }

.cta-phone {
  display: inline-block;
  margin-top: 1.9rem;
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
  font-weight: 900;
  font-stretch: 114%;
  letter-spacing: -0.025em;
  color: var(--hi);
  text-decoration: none;
  line-height: 1.1;
}
.cta-phone:hover { color: #FFC72B; }

/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink-2);
  border-top: 1px solid var(--line-soft);
}
.footer-grid {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 3rem);
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 3.75rem);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1.1fr; } }

.footer-col h3 {
  font-size: 0.76rem;
  font-weight: 800;
  font-stretch: 100%;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--hi);
  margin-bottom: 1rem;
}
.footer-col p, .footer-col li { color: var(--paper-dim); font-size: 0.93rem; }
.footer-col li { margin-bottom: 0.45rem; }
.footer-col a { color: var(--paper-dim); text-decoration: none; }
.footer-col a:hover { color: var(--hi); }

.footer-areas { line-height: 1.85; }

/* Full licence line, repeated in the footer per the trust stack */
.footer-licence {
  margin-top: 1.1rem;
  padding: 0.9rem 1.05rem;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font-size: 0.86rem;
  color: var(--paper-dim);
  line-height: 1.6;
}
.footer-licence b { color: var(--hi); font-weight: 800; letter-spacing: 0.03em; }

.footer-bottom {
  border-top: 1px solid var(--line-soft);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.83rem;
  color: var(--paper-mute);
}
.footer-bottom a { color: var(--paper-mute); }
.footer-bottom a:hover { color: var(--hi); }

/* --------------------------------------------------------------------------
   18. STICKY MOBILE CALL BAR — ≤768px
   -------------------------------------------------------------------------- */
.callbar {
  display: none;
  position: fixed;
  z-index: 60;
  inset: auto 0 0 0;
  padding: 0.6rem 0.7rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(20, 23, 26, 0.97);
  border-top: 1px solid var(--line);
  gap: 0.6rem;
}
.callbar .btn { flex: 1; min-height: 52px; padding-inline: 0.8rem; font-size: 0.97rem; }

@media (max-width: 768px) {
  .callbar { display: flex; }
  body { padding-bottom: 5.25rem; }   /* reserve space so nothing hides behind the bar */
}

/* --------------------------------------------------------------------------
   19. MOTION PREFERENCES
   prefers-reduced-motion → the scene becomes a static composed illustration
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  /* Park the scene at the 42.1% frame — loader A's bag meeting the deck. Same
     numbers as the keyframes, so the static picture is a real frame of the
     animation. Loaders B and C have not thrown yet at this instant, so their
     bags are hidden rather than left floating over the road. */
  .truck { transform: translateX(336px); }
  .loader { opacity: 1; }
  .bag-x { transform: translateX(250px); opacity: 1; }
  .bag-y { transform: translateY(-13px); }
  .bag-spin { transform: rotate(356deg); }
  .arm { transform: rotate(8deg); }
  .bag--b, .bag--c { opacity: 0; }
  .btn:hover, .card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   20. PRINT — a customer printing the page should get the essentials
   -------------------------------------------------------------------------- */
@media print {
  body { background: #FFF; color: #000; padding-bottom: 0; }
  .callbar, .scene-strip, .hero::before { display: none; }
  .card, .duty, .licence-card, .quote-panel { border: 1px solid #999; }
  a[href^="tel:"]::after { content: ' (' attr(href) ')'; }
}