/* ==========================================================================
   Vahora Removal & Logistics — homepage
   Design system + page styles. Vanilla CSS, no build step.

   Palette rationale: the ink navy is drawn from the crews' work overalls in
   the company's own photography; the bone background from the kraft cardboard
   that dominates every real image; the amber accent from hi-vis / road
   signage. Nothing decorative is used without a reason.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* ---------------------------------------------------------------------
     VLL LOGISTICS & REMOVALS — client palette, applied with discipline.

        #F5F6F1  canvas        #1A1A1C  headline
        #272727  body          #C2A16C  accent / CTA
        #BBA175  brand detail

     Measured consequences that shape how the gold is used:
       · white on #C2A16C is 2.44:1 — it FAILS. The CTA therefore carries a
         near-black label (7.12:1), which is also the more expensive look.
       · #C2A16C as small text on the canvas is 2.25:1 — also fails. Small
         gold text uses #8A6A34 (4.61:1) instead.
       · #C2A16C on charcoal is 7.12:1 — excellent. So the gold belongs to the
         dark sections, and stays a rare highlight on the light ones. The
         palette itself enforces the restraint the brand needs.
     --------------------------------------------------------------------- */
  --canvas:       #F5F6F1;
  --charcoal:     #1A1A1C;
  --gold:         #C2A16C;
  --gold-brand:   #BBA175;
  --gold-deep:    #8A6A34;   /* small gold text on light — 4.6:1 */
  --gold-hover:   #B18F55;

  /* Dark ladder, derived from the headline charcoal */
  --ink:          #1A1A1C;
  --ink-deep:     #121213;
  --ink-2:        #232326;
  --ink-3:        #2E2E33;
  --primary:      #1A1A1C;
  --navy:         #1A1A1C;
  --green-800:    #1A1A1C;

  /* Accent aliases — the stylesheet already speaks these names */
  --accent:       #C2A16C;
  --accent-dark:  #8A6A34;
  --accent-light: #C2A16C;
  --accent-tint:  #F0ECE2;
  --amber:        #C2A16C;
  --amber-btn:    #C2A16C;
  --amber-text:   #8A6A34;
  --amber-deep:   #B18F55;
  --amber-tint:   #F0ECE2;
  --bronze-400:   #C2A16C;
  --bronze-600:   #C2A16C;
  --bronze-700:   #8A6A34;
  --teal:         #BBA175;
  --teal-text:    #8A6A34;
  --teal-tint:    #F0ECE2;

  /* Surfaces */
  --paper:        #FFFFFF;
  --bone:         #F5F6F1;
  --bone-2:       #ECEDE6;

  /* Text */
  --text:         #1A1A1C;
  --slate:        #272727;
  --slate-2:      #6B6B6E;
  --slate-3:      #9A9A9D;   /* the same muted grey, for dark grounds */

  /* Hairlines — warm neutral, never gold */
  --line:         #E2E3DC;
  --line-soft:    #EDEEE8;
  --line-ink:     rgba(245,246,241,.16);
  --line-ink-2:   rgba(245,246,241,.09);

  /* Depth — cast warm-neutral so shadows never go blue */
  --elev-1: 0 1px 3px rgba(26,26,28,.05), 0 12px 28px -12px rgba(26,26,28,.16);
  --elev-2: 0 2px 6px rgba(26,26,28,.06), 0 26px 54px -20px rgba(26,26,28,.26);

  /* Type */
  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-body:    'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Layout */
  --shell:    1240px;
  --header-h: 84px;
  --gutter: clamp(20px, 5vw, 44px);
  --sec-y:  clamp(64px, 7vw, 106px);

  /* Radius */
  --r:    10px;
  --r-md: 18px;

  /* Motion */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,.84,.44,1);   /* decisive settle — entrances */
  --ease-soft: cubic-bezier(.4,0,.2,1);       /* neutral — state changes */
  --dur:  .34s;
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bone);
  color:var(--text);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;          /* fallback for Safari < 16, overridden below */
}

/* Horizontal overflow guard.
   `overflow-x:hidden` on <body> alone is the fragile version of this: the
   moment overflow-x is hidden, overflow-y computes to auto, so the body turns
   into a scroll container. That is what lets iOS Safari pan sideways and
   expose a blank strip beside the page. `clip` clips without creating a scroll
   container, so nothing can pan and `position:sticky` (the header, the legal
   page index) keeps working. overscroll-behavior stops the horizontal
   rubber-band that shows the same blank strip on Android.
   Browsers without `clip` simply keep the `hidden` above — today's behaviour. */
html{ overflow-x:clip; overscroll-behavior-x:none; }
body{ overflow-x:clip; max-width:100%; }
img,picture,svg{ display:block; max-width:100%; }
img{ height:auto; }
h1,h2,h3,h4{ margin:0; font-family:var(--f-display); font-weight:600; letter-spacing:-.025em; line-height:1.06; }
p{ margin:0; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
address{ font-style:normal; }
::selection{ background:var(--amber-btn); color:var(--charcoal); }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--sec-y); }
/* Keeps anchored sections clear of the sticky header. */
[id]{ scroll-margin-top:96px; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:var(--gutter); top:-100px; z-index:200;
  background:var(--amber-btn); color:var(--charcoal); padding:12px 20px; border-radius:var(--r);
  font-weight:600; transition:top .2s var(--ease);
}
.skip-link:focus{ top:14px; }

/* Focus: one consistent, visible ring everywhere. */
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:2px; }
.on-ink :focus-visible,
.hero :focus-visible,
.fleet :focus-visible,
.reviews :focus-visible,
.quote__aside :focus-visible,
.site-footer :focus-visible{ outline-color:#F0A57F; }

/* --------------------------------------------------------------------------
   3. TYPE PRIMITIVES
   -------------------------------------------------------------------------- */
.eyebrow{
  font-family:var(--f-body);
  font-size:12px; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--amber-text); margin-bottom:20px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:currentColor; flex:none; }
.eyebrow--light{ color:var(--bronze-400); }

.section-title{ font-size:clamp(31px,4.5vw,60px); letter-spacing:-.032em; text-wrap:balance; }
.section-lede{ color:var(--slate); font-size:clamp(16px,1.4vw,18.5px); max-width:46ch; margin-top:20px; }

.section-head{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,4vw,64px);
  align-items:end; margin-bottom:clamp(40px,4.6vw,64px);
}
.section-head__aside p{ color:var(--slate); max-width:42ch; }
.section-head--invert .section-head__aside p{ color:var(--slate-2); }

.link-arrow{
  position:relative; display:inline-flex; align-items:center; gap:9px; margin-top:22px;
  font-weight:600; font-size:15px; letter-spacing:.01em; padding-bottom:6px;
  transition:color var(--dur) var(--ease-soft);
}
.link-arrow::after,.link-arrow::before{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
}
.link-arrow::after{ background:var(--line); }
.link-arrow::before{
  background:var(--amber); z-index:1;
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.link-arrow:hover::before{ transform:scaleX(1); transform-origin:left; }
.link-arrow .ico--arrow{ width:18px; transition:transform var(--dur) var(--ease); }
.link-arrow:hover{ color:var(--amber-text); }
.link-arrow:hover .ico--arrow{ transform:translateX(5px); }

.ico{ width:19px; height:19px; flex:none; }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  --btn-bg:var(--ink); --btn-fg:#fff; --btn-bg-h:var(--ink-3);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--btn-bg); color:var(--btn-fg);
  padding:14px 24px; border:1px solid transparent; border-radius:var(--r);
  font-family:var(--f-body); font-weight:600; font-size:15.5px; letter-spacing:.005em;
  cursor:pointer; text-align:center; white-space:nowrap;
  position:relative; isolation:isolate; overflow:hidden;
  transition:color var(--dur) var(--ease-soft), border-color var(--dur) var(--ease-soft),
             transform .16s var(--ease-soft);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--btn-bg-h);
  transform:translate3d(0,101%,0);
  transition:transform .46s var(--ease-out);
}
.btn:hover::before,.btn:focus-visible::before{ transform:translate3d(0,0,0); }
.btn:active{ transform:translateY(1px); }
.btn .ico--arrow{ width:18px; transition:transform var(--dur) var(--ease); }
.btn:hover .ico--arrow{ transform:translateX(4px); }

.btn--accent{
  --btn-bg:var(--gold); --btn-bg-h:var(--gold-hover); --btn-fg:var(--charcoal);
  border-color:rgba(26,26,28,.14);   /* gold on canvas is 2.25:1 — the edge
                                        is what makes the button a component */
}
.btn--accent .ico{ color:var(--charcoal); }
/* The brand red clears contrast on both the light page and the petrol
   sections, so one CTA treatment serves the whole site. */.btn--dark{ --btn-bg:var(--navy); --btn-bg-h:var(--ink-3); --btn-fg:#fff; }
.btn--ghost{
  --btn-bg:transparent; --btn-fg:#fff; --btn-bg-h:rgba(255,255,255,.08);
  border-color:var(--line-ink);
}
.btn--ghost:hover{ border-color:rgba(255,255,255,.34); }
.btn--sm{ padding:11px 18px; font-size:14.5px; }
.btn--lg{ padding:17px 30px; font-size:16px; }
.btn--block{ display:flex; width:100%; }

/* --------------------------------------------------------------------------
   5. BRAND LOCKUP
   (Placeholder lockup — swap `.brand__mark svg` for the final logo file.
    Colours are driven by tokens so a rebrand is a two-line change.)
   -------------------------------------------------------------------------- */
.brand{ display:block; line-height:0; flex:none; }
.brand__logo{
  display:block; width:clamp(148px,15vw,186px); height:auto;
  transition:width .38s var(--ease-soft);
}
/* Inverted artwork over the dark hero; the original once the header solidifies */
.brand__logo--ondark{ display:none; }
.site-header.is-stuck .brand__logo--onlight{ display:none; }
.site-header.is-stuck .brand__logo--ondark{ display:block; }
.site-header.is-stuck .brand__logo{ width:clamp(132px,13vw,162px); }
/* The footer sits on charcoal, so it keeps the inverted artwork */
.brand--footer .brand__logo--ondark{ display:none; }
.brand--footer .brand__logo--onlight{ display:block; width:clamp(160px,18vw,200px); }
.brand:hover{ opacity:.85; }

/* --------------------------------------------------------------------------
   6. HEADER
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:transparent;
  transition:background-color .3s var(--ease), box-shadow .3s var(--ease),
             border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header .brand__name,
.site-header .header__tel{ color:#fff; }
.site-header .brand__sub{ color:rgba(255,255,255,.55); }



/* Solid state once the hero is behind us */
.site-header.is-stuck{
  background:rgba(245,246,241,.86);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  backdrop-filter:blur(16px) saturate(1.5);
  border-bottom-color:var(--line);
  box-shadow:0 1px 30px rgba(13,24,38,.07);
}
.site-header.is-stuck .header__inner{ height:66px; }
.site-header.is-stuck .brand__mark{ width:34px; height:34px; }
.brand__mark{ transition:width .38s var(--ease-soft), height .38s var(--ease-soft); }
.site-header.is-stuck .brand__name{ color:var(--navy); }
.site-header.is-stuck .brand__sub{ color:var(--slate); }
.site-header.is-stuck .mark__a{ fill:var(--accent); }
.site-header.is-stuck .mark__b{ fill:var(--primary); }

.site-header.is-stuck .header__tel{ color:var(--navy); }
.site-header.is-stuck .nav__list a{ color:var(--navy); }

.header__inner{
  display:flex; align-items:center; gap:clamp(16px,3vw,44px); height:var(--header-h);
  transition:height .38s var(--ease-soft);
}
.nav{ margin-left:auto; }
.nav__list{ display:flex; align-items:center; gap:clamp(14px,2.1vw,30px); }
.nav__list a{
  position:relative; white-space:nowrap; color:rgba(255,255,255,.86);
  font-size:15.5px; font-weight:500; letter-spacing:.005em; padding-block:6px;
  transition:color var(--dur) var(--ease);
}
.nav__list a::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%;
  background:var(--amber); transform:scaleX(0); transform-origin:right;
  transition:transform var(--dur) var(--ease);
}
.nav__list a:hover::after,
.nav__list a.is-active::after{ transform:scaleX(1); transform-origin:left; }
.site-header.is-stuck .nav__list a:hover{ color:var(--amber); }
.nav__foot{ display:none; }

.header__actions{ display:flex; align-items:center; gap:16px; }
.header__tel{
  display:inline-flex; align-items:center; gap:9px;
  font-size:15px; font-weight:600; letter-spacing:.01em;
  transition:color var(--dur) var(--ease);
}
.header__tel:hover{ color:var(--amber); }
.header__tel .ico{ width:17px; color:var(--amber); }
.header__tel-label{ display:none; }

.burger{
  display:none; width:44px; height:44px; padding:0; background:none;
  border:1px solid var(--line-ink); border-radius:var(--r); cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{ display:block; width:19px; height:1.6px; background:#fff; transition:transform .3s var(--ease), opacity .2s var(--ease); }
.site-header.is-stuck .burger{ border-color:var(--line); }
.site-header.is-stuck .burger span{ background:var(--charcoal); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. HERO — cinematic full-bleed composition.

   The photograph is the section, not an element inside it. Readability comes
   from three stacked gradients rather than a filter, so the image itself is
   never degraded: a diagonal veil that holds the left third for type, a top
   scrim so the navigation reads, and a base scrim that seats the scroll cue.
   -------------------------------------------------------------------------- */
.hero{
  --hero-highlight:#C2A16C;   /* brand gold — the headline accent reads
                                 premium; saturated red is reserved for the CTA */
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:center;
  min-height:min(100svh,960px);
  margin-top:calc(var(--header-h) * -1);
  padding-top:var(--header-h);
  background:var(--primary); color:#fff;
}

.hero__bg{ position:absolute; inset:-6% 0; z-index:-1; }
.hero__img{ display:block; width:100%; height:100%; }
.hero__img img{
  width:100%; height:100%; object-fit:cover; object-position:79% 42%;
  transform:scale(1.16); transform-origin:72% 50%;
}
.js .hero.is-ready .hero__img img{
  transform:scale(1.03);
  transition:transform 2.8s cubic-bezier(.16,.84,.44,1);
  /* then an almost imperceptible drift — starts from where the entrance
     landed, so the two never fight */
  animation:heroDrift 38s ease-in-out 3.2s infinite alternate;
}
@keyframes heroDrift{
  from{ transform:scale(1.03) translate3d(0,0,0); }
  to  { transform:scale(1.085) translate3d(-1.1%,0,0); }
}

.hero__veil{ position:absolute; inset:0; pointer-events:none; }
/* The headline runs to ~59% of the viewport, so the veil holds its weight
   until 56% and only then releases — the crew then reads clearly in the
   right third, where the quote panel floats. */
.hero__veil:not([class*="--"]){
  background:linear-gradient(101deg,
    rgba(12,12,13,.95)  0%,
    rgba(4,36,45,.92) 28%,
    rgba(5,40,50,.84) 46%,
    rgba(18,18,19,.62) 60%,
    rgba(18,18,19,.26) 78%,
    rgba(18,18,19,.08) 100%);
}
.hero__veil--top { background:linear-gradient(180deg, rgba(12,12,13,.66) 0%, rgba(12,12,13,0) 24%); }
.hero__veil--base{ background:linear-gradient(0deg,  rgba(12,12,13,.80) 0%, rgba(12,12,13,0) 30%); }

/* The quote panel has moved out of the hero into its own section, so the
   hero is a single column again — the type gets the full measure. */
.hero__inner{
  position:relative; z-index:2; width:100%;
  display:block;
  padding-block:clamp(64px,8vw,104px) clamp(104px,11vw,148px);
}
.hero__copy{ max-width:min(760px,92%); }

/* ---- Type ---- */
.hero__title{
  font-size:clamp(44px,6.6vw,92px);
  font-weight:600; letter-spacing:-.048em; line-height:.93;
  text-shadow:0 2px 30px rgba(12,12,13,.35);
}
.hero__title em{ font-style:normal; color:var(--hero-highlight); }
.hero__lede{
  margin-top:clamp(20px,2.1vw,30px); max-width:46ch;
  color:rgba(255,255,255,.8); font-size:clamp(16.5px,1.35vw,19px); line-height:1.62;
  text-shadow:0 1px 18px rgba(12,12,13,.4);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(28px,3vw,40px); }
.hero__cta{ padding:19px 34px; font-size:16.5px; }
.hero__cta:hover{ transform:translateY(-2px) scale(1.014); }
.hero__call:hover{ transform:translateY(-1px); }

/* ---- Trust: stars, then the score, then the count ---- */
.hero__trust{
  display:flex; align-items:center; flex-wrap:wrap; gap:9px 14px;
  margin-top:clamp(30px,3.4vw,44px);
}
.stars{ display:inline-flex; gap:2px; color:var(--accent-light); }
.stars svg{ width:16px; height:16px; }
.stars--sm svg{ width:14px; height:14px; }
.hero__score{
  font-family:var(--f-display); font-weight:600; font-size:20px;
  letter-spacing:-.02em; color:#fff;
}
.hero__score-max{ font-size:.6em; color:rgba(255,255,255,.55); margin-left:1px; }
.hero__trust-rule{ width:1px; height:17px; background:rgba(255,255,255,.24); }
.hero__reviews{ font-size:14.5px; color:rgba(255,255,255,.68); }
.hero__reviews strong{ color:#fff; font-weight:600; }

/* ---- The quote panel, floating over the photograph ---- */
.hero .quickquote{
  width:100%; justify-self:end;
  background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);
  backdrop-filter:blur(24px) saturate(1.3);
  border:1px solid rgba(255,255,255,.55);
  border-radius:var(--r-md); padding:26px;
  color:var(--text);
  box-shadow:0 2px 6px rgba(12,12,13,.18),
             0 20px 44px -16px rgba(12,12,13,.5),
             0 56px 96px -44px rgba(12,12,13,.62);
}
.js .hero.is-ready .quickquote{ animation:cardFloat 9s ease-in-out 2.6s infinite alternate; }
@keyframes cardFloat{ from{ translate:0 0; } to{ translate:0 -8px; } }

.quickquote__title{
  font-family:var(--f-display); font-weight:600; font-size:19px;
  letter-spacing:-.022em; margin-bottom:18px; padding-top:2px;
}
.quickquote__field{ margin-bottom:16px; }
.quickquote__label,
.field__legend{
  display:block; font-size:12px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--slate); margin-bottom:8px;
}
.quickquote select,
.qform select,.qform input,.qform textarea{
  width:100%; color:var(--text);
  border:1px solid var(--line); border-radius:var(--r);
  padding:13px 15px; font-size:15.5px;
}
.quickquote select,.qform select{
  appearance:none; padding-right:38px; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23566579' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:11px;
}
.quickquote__note{ margin-top:12px; font-size:13px; color:var(--slate); text-align:center; }

/* Segmented control */
.segmented{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px; }
.segmented__opt{ position:relative; }
.segmented__opt input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.segmented__opt span{
  display:flex; align-items:center; justify-content:center; height:44px; padding-inline:6px;
  border:1px solid var(--line); border-radius:var(--r);
  font-size:13.5px; font-weight:500; text-align:center; line-height:1.2;
  transition:background-color .22s var(--ease-soft), border-color .22s var(--ease-soft),
             color .22s var(--ease-soft), box-shadow .22s var(--ease-soft);
}
.segmented__opt input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---- Load sequence. Content is readable the instant it paints; these only
       stage how it arrives, and every one is transform + opacity. ---- */
.js .hero__eyebrow,
.js .hero__lede,
.js .hero__actions,
.js .hero__trust,
.js .hero .quickquote{ opacity:0; transform:translate3d(0,18px,0); }

.js .hero.is-ready .hero__eyebrow,
.js .hero.is-ready .hero__lede,
.js .hero.is-ready .hero__actions,
.js .hero.is-ready .hero__trust,
.js .hero.is-ready .quickquote{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.js .hero.is-ready .hero__eyebrow{ transition-delay:.40s; }
.js .hero.is-ready .hero__lede   { transition-delay:1.06s; }
.js .hero.is-ready .hero__actions{ transition-delay:1.24s; }
.js .hero.is-ready .hero__trust  { transition-delay:1.42s; }
.js .hero.is-ready .quickquote   { transition-delay:1.55s; }

.js .hero .lmask__i{ transform:translate3d(0,110%,0); }
.js .hero.is-ready .lmask__i{
  transform:none;
  transition:transform 1.05s var(--ease-out);
}
.js .hero.is-ready .lmask:nth-child(1) .lmask__i{ transition-delay:.58s; }
.js .hero.is-ready .lmask:nth-child(2) .lmask__i{ transition-delay:.72s; }
.js .hero.is-ready .lmask:nth-child(3) .lmask__i{ transition-delay:.88s; }

.js .scrollcue{ opacity:0; transition:opacity .8s var(--ease-out) 1.75s, color .3s var(--ease-soft); }
.js .hero.is-ready .scrollcue{ opacity:1; }

/* --------------------------------------------------------------------------
   8. TRUST BAR
   -------------------------------------------------------------------------- */
.trustbar{ background:var(--bone-2); border-block:1px solid var(--line); }
.trustbar__inner{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:clamp(14px,2vw,30px); padding-block:30px;
}
.trustbar__item{
  display:flex; align-items:center; gap:11px;
  font-size:14.5px; font-weight:500; line-height:1.35; color:var(--navy);
}
.trustbar__ico{ width:24px; height:24px; flex:none; color:var(--amber-text); }

/* --------------------------------------------------------------------------
   9. SERVICES — an editorial index, not a card grid. Each row is a full-width
   band; the ink fill wipes in from the left and the content steps right, so
   the interaction itself reads as travel in a direction.
   -------------------------------------------------------------------------- */
.svc-list{ border-top:1px solid var(--line); }
.svcrow{
  position:relative; display:grid;
  grid-template-columns:52px 38px minmax(190px,.95fr) 1.5fr 34px;
  align-items:center; gap:clamp(14px,2.2vw,38px);
  padding:clamp(22px,2.3vw,32px) clamp(18px,2vw,30px);
  border-bottom:1px solid var(--line);
  isolation:isolate; overflow:hidden;
  transition:color .42s var(--ease-soft);
}
.svcrow::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--navy);
  border-left:3px solid var(--amber);
  transform:translate3d(-101%,0,0);
  transition:transform .58s var(--ease-out);
}
.svcrow:hover::before,.svcrow:focus-visible::before{ transform:translate3d(0,0,0); }
.svcrow > *{ transition:transform .5s var(--ease-out), color .42s var(--ease-soft); }
.svcrow:hover > *,.svcrow:focus-visible > *{ transform:translateX(12px); }

.svcrow__num{
  font-family:var(--f-display); font-size:12.5px; font-weight:600;
  letter-spacing:.14em; color:var(--slate-2);
}
.svcrow__ico{ display:block; width:38px; height:38px; color:var(--amber-text); }
.svcrow__ico svg{ width:100%; height:100%; }
.svcrow__name{ font-size:clamp(21px,2.35vw,32px); letter-spacing:-.03em; }
.svcrow__desc{ color:var(--slate); font-size:15.4px; line-height:1.55; max-width:54ch; }
.svcrow__go{ width:20px; color:var(--slate-2); }
.svcrow__go svg{ width:20px; }

.svcrow:hover .svcrow__desc,.svcrow:focus-visible .svcrow__desc{ color:rgba(255,255,255,.7); }
.svcrow:hover .svcrow__num,.svcrow:focus-visible .svcrow__num{ color:rgba(255,255,255,.45); }
.svcrow:hover .svcrow__ico,.svcrow:focus-visible .svcrow__ico{ color:var(--bronze-400); }
.svcrow:hover .svcrow__go,.svcrow:focus-visible .svcrow__go{ color:var(--amber); transform:translateX(24px); }

/* --------------------------------------------------------------------------
   9b. WORK TILES — a full-bleed mosaic closing the services section.
   The company's own photography is low-resolution, so it is used at tile
   scale where that is invisible, rather than blown up across a hero.
   -------------------------------------------------------------------------- */
.worktiles{ padding-inline:0; margin-top:clamp(48px,5.5vw,86px); }
.worktile{
  position:relative; margin:0; overflow:hidden;
  background:var(--bone-2); border-radius:0;
  /* Edge to edge and shallower: at 21:9 it filled most of the viewport and
     read as one enormous photograph rather than a band in a sequence. */
  aspect-ratio:2.9/1; max-height:min(58vh,520px);
}
.worktile picture{ display:block; height:100%; }
.worktile img{ width:100%; height:100%; object-fit:cover; object-position:50% 42%; }
.js .worktile.is-in:hover img{ transform:scale(1.035); }

.worktile__cap{
  position:absolute; inset:auto 0 0 0; z-index:2;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:14px 20px; padding:clamp(20px,2.3vw,32px); color:#fff;
  background:linear-gradient(180deg, rgba(12,12,13,0) 0%, rgba(12,12,13,.55) 45%, rgba(12,12,13,.88) 100%);
}
.worktile__cap p{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(18px,1.7vw,24px); letter-spacing:-.022em;
}

/* --------------------------------------------------------------------------
   9c. CONCERNS — the objections in plain sight, answered by the values.
   Typographic on purpose: it sits between two image-heavy sections.
   -------------------------------------------------------------------------- */
.concerns{ background:var(--bone-2); border-block:1px solid var(--line); }
.concerns__grid{
  display:grid; grid-template-columns:1.04fr .96fr;
  gap:clamp(34px,5vw,84px); align-items:start;
}
.worries{ margin-top:clamp(26px,3vw,38px); border-top:1px solid var(--line); }
.worry{
  display:flex; align-items:center; gap:16px;
  padding:16px 0; border-bottom:1px solid var(--line);
  font-family:var(--f-display); font-weight:500; letter-spacing:-.018em;
  font-size:clamp(16px,1.45vw,19px); color:var(--slate);
}
.worry__mark{
  position:relative; width:21px; height:21px; flex:none;
  border:1px solid var(--line); border-radius:50%;
}
.worry__mark::before,.worry__mark::after{
  content:""; position:absolute; left:50%; top:50%;
  width:9px; height:1.4px; background:var(--slate-2);
}
.worry__mark::before{ transform:translate(-50%,-50%) rotate(45deg); }
.worry__mark::after { transform:translate(-50%,-50%) rotate(-45deg); }

.concerns__answer{
  background:var(--navy); color:#fff;
  border-radius:var(--r-md); box-shadow:var(--elev-2);
  padding:clamp(28px,3.1vw,46px);
}
.concerns__lead{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(19px,1.85vw,24px); line-height:1.34; letter-spacing:-.024em;
}
.values{ margin-block:clamp(24px,2.8vw,34px); }
.value{ padding:17px 0; border-top:1px solid var(--line-ink-2); }
.value dt{ font-family:var(--f-display); font-weight:600; font-size:18px; letter-spacing:-.02em; color:#fff; }
.value dd{ margin:6px 0 0; color:rgba(255,255,255,.62); font-size:15.1px; line-height:1.55; }

/* --------------------------------------------------------------------------
   9d. COVERAGE — the route motif again, this time as geography
   -------------------------------------------------------------------------- */
.coverage-sec{ background:var(--ink); color:#fff; }
.coverage-sec .section-title{ color:#fff; }
.coverage-sec .eyebrow{ color:var(--bronze-400); }
.coverage-sec .section-head__aside p{ color:var(--slate-2); }
.legs-wrap{ position:relative; padding-top:38px; }
.route--legs{ background:var(--line-ink); }
.legs{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3.2vw,56px); }
.leg{ position:relative; }
.leg__k{ font-size:12px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--bronze-400); }
.leg__t{ margin-top:13px; font-size:clamp(25px,2.7vw,36px); letter-spacing:-.032em; color:#fff; }
.leg__d{ margin-top:13px; color:rgba(255,255,255,.6); font-size:15.2px; line-height:1.6; max-width:34ch; }
.coverage-sec .step__node{ background:var(--ink); border-color:var(--line-ink); }

/* --------------------------------------------------------------------------
   10. WHY + STATS
   -------------------------------------------------------------------------- */
/* The photograph runs off the left edge of the viewport — the mirror of the
   hero, which runs off the right. Two bleeds, opposite sides: the page reads
   as one composition instead of a stack of centred blocks. */
.why{ padding-bottom:0; overflow:hidden; }
.why__grid{
  display:grid; grid-template-columns:clamp(280px,36vw,570px) minmax(0,1fr);
  gap:clamp(36px,4.6vw,80px); align-items:center;
}
.why__media{ position:relative; }
.why__media .frame{
  margin-left:calc(-1 * max(var(--gutter), (100vw - var(--shell)) / 2 + var(--gutter)));
  border-radius:0 var(--r-md) var(--r-md) 0;
}
.frame{ margin:0; border-radius:var(--r-md); overflow:hidden; background:var(--bone-2); }
.frame img{ width:100%; aspect-ratio:5/4; object-fit:cover; object-position:56% 50%; }
.why__badge{
  position:absolute; right:22px; bottom:22px; left:auto; width:250px;
  background:var(--navy); color:#fff; padding:26px;
  border-radius:var(--r-md); box-shadow:var(--elev-2);
}
.why__badge-num{
  display:block; font-family:var(--f-display); font-size:46px; font-weight:600;
  letter-spacing:-.03em; line-height:1; color:#fff;
}
.why__badge-label{ display:block; margin-top:10px; font-size:13.5px; line-height:1.45; color:rgba(255,255,255,.62); }

.pillars{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); margin-top:44px; border-top:1px solid var(--line); }
.pillar{ background:var(--bone); padding:24px 26px 24px 0; }
.pillar:nth-child(even){ padding-left:26px; }
.pillar h3{ font-size:17.5px; letter-spacing:-.015em; }
.pillar p{ margin-top:7px; color:var(--slate); font-size:14.8px; line-height:1.55; }

.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border-block:1px solid var(--line); margin-top:clamp(64px,8vw,110px);
}
.stat{ background:var(--bone); padding:clamp(26px,3vw,38px) clamp(18px,2vw,28px); }
.stat__label{
  font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--slate);
}
.stat__value{
  margin:12px 0 0; font-family:var(--f-display); font-weight:600;
  font-size:clamp(38px,4.4vw,58px); letter-spacing:-.035em; line-height:1;
  display:flex; align-items:baseline; gap:2px;
}
.stat__unit{ color:var(--amber); font-size:.52em; }

/* --------------------------------------------------------------------------
   11. FLEET — the four vans are drawn to true relative scale from the
   published dimensions and share one continuous baseline, so the comparison
   is carried by the drawing rather than by four repeated cards.
   -------------------------------------------------------------------------- */
.fleet{ background:var(--ink); color:#fff; }
.fleet .section-title{ color:#fff; }

.fleetstrip{ --fgap:clamp(18px,2.6vw,44px); }
.fleet-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--fgap); align-items:end; }

.vanitem__link{ display:block; }
.vanitem__art{ position:relative; display:block; }
.vanitem__art svg{ width:100%; height:auto; }
.vanitem__art svg,
.vanitem__meta{ transition:transform .5s var(--ease-out); }
.vanitem:hover .vanitem__art svg{ transform:translateX(7px); }

/* The shared road. Each segment reaches half the gap either side so the four
   line up as one unbroken rule; ground level sits at 12/132 of the artwork. */
.vanitem__art::after{
  content:""; position:absolute;
  left:calc(var(--fgap) / -2); right:calc(var(--fgap) / -2);
  bottom:9.09%; height:1px; background:rgba(255,255,255,.2);
}
.vanitem:first-child .vanitem__art::after{ left:0; }
.vanitem:last-child  .vanitem__art::after{ right:0; }
.van__ground{ display:none; }

.van__body{ fill:#F0EBE2; transition:fill .4s var(--ease-soft); }
.van__glass{ fill:#8FA3B5; }
.van__line{ stroke:#C3BCB0; stroke-width:1.4; fill:none; }
.van__tyre{ fill:#0A121C; }
.van__hub{ fill:#7C8B99; }
.van__lift{ stroke:#C3BCB0; stroke-width:2.2; fill:none; }
.vanitem:hover .van__body{ fill:#fff; }

.vanitem__meta{ display:block; padding-top:22px; margin-top:20px; border-top:1px solid var(--line-ink-2); }
.vanitem__name{ font-size:clamp(17px,1.5vw,21px); letter-spacing:-.022em; color:#fff; }
.vanitem__name span{ font-size:.68em; font-weight:500; color:var(--slate-2); letter-spacing:0; }
.vanitem__dims{ display:flex; flex-wrap:wrap; gap:5px 14px; margin-top:11px; }
.vanitem__dims span{
  font-size:13.4px; color:rgba(255,255,255,.6);
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
}
.vanitem__cta{
  position:relative; display:inline-block; margin-top:17px; padding-bottom:5px;
  font-size:14.4px; font-weight:600; color:var(--bronze-400);
  transition:color var(--dur) var(--ease-soft);
}
.vanitem__cta::after,.vanitem__cta::before{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
}
.vanitem__cta::after{ background:rgba(214,160,80,.36); }
.vanitem__cta::before{
  background:#fff; z-index:1; transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.vanitem:hover .vanitem__cta{ color:#fff; }
.vanitem:hover .vanitem__cta::before{ transform:scaleX(1); transform-origin:left; }

/* --------------------------------------------------------------------------
   12. PROCESS
   -------------------------------------------------------------------------- */
/* The route: one continuous line threading all four steps. It fills as the
   section moves through the viewport — movement along a route, which is what
   the business actually does. */
.steps-wrap{ position:relative; padding-top:38px; }
.route{ position:absolute; top:0; left:0; right:0; height:1px; background:var(--line); }
.route__progress{
  display:block; height:100%; width:100%; background:var(--amber);
  transform:scaleX(var(--route,0)); transform-origin:left center;
}
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.6vw,40px); }
.step{ position:relative; }
.step__node{
  position:absolute; top:-43px; left:0; width:11px; height:11px; border-radius:50%;
  background:var(--bone); border:1.5px solid var(--line);
  transition:background-color .4s var(--ease-soft), border-color .4s var(--ease-soft),
             transform .4s var(--ease-out);
}
.is-reached > .step__node{ background:var(--amber); border-color:var(--amber); transform:scale(1.25); }
.step__num{
  font-family:var(--f-display); font-size:13px; font-weight:600; letter-spacing:.14em;
  color:var(--amber-text);
}
.step__title{ margin-top:14px; font-size:21px; letter-spacing:-.02em; }
.step__desc{ margin-top:12px; color:var(--slate); font-size:15.3px; line-height:1.6; }

/* --------------------------------------------------------------------------
   13. REVIEWS
   -------------------------------------------------------------------------- */
.reviews{ background:var(--ink); color:#fff; }
.reviews .section-title{ color:#fff; }
.reviews__score{ display:flex; align-items:center; gap:9px; font-size:15px; color:var(--slate-2); }
.reviews__score strong{ color:#fff; font-weight:600; }

.reviews__rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(300px,1fr);
  gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:8px; scrollbar-width:none;
  /* bleed to the viewport edge so cards run off-screen — reads as editorial, not clipped */
  margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
}
.reviews__rail::-webkit-scrollbar{ display:none; }
.review{
  scroll-snap-align:start; margin:0; display:flex; flex-direction:column;
  background:none; border:0; border-left:1px solid var(--line-ink-2);
  padding:2px 30px 0; transition:border-color var(--dur) var(--ease-soft);
}
.review:first-child{ border-left:0; padding-left:0; }
.review:hover{ border-left-color:rgba(255,255,255,.26); }
.review blockquote{ margin:0; flex:1; }
.review blockquote p{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(17px,1.42vw,19.5px); line-height:1.46;
  letter-spacing:-.02em; color:rgba(255,255,255,.92);
}
.review figcaption{
  display:flex; align-items:center; gap:12px; margin-top:28px;
  padding-top:20px; border-top:1px solid var(--line-ink-2);
}
.review__avatar{
  width:38px; height:38px; flex:none; border-radius:50%;
  background:var(--amber-btn); color:#fff;
  display:grid; place-items:center;
  font-size:13px; font-weight:600; letter-spacing:.04em;
}
.review__name{ font-size:14.6px; font-weight:600; color:#fff; line-height:1.3; }

.reviews__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:28px; margin-top:34px;
}
.reviews__progress{ flex:1; max-width:300px; height:2px; background:rgba(255,255,255,.14); }
/* Width shows how much of the set is on screen; offset shows how far along. */
.reviews__progress span{
  display:block; height:100%; width:30%; background:var(--amber);
  transition:transform .18s linear, width .18s linear;
}
.reviews__nav{ display:flex; gap:10px; }
.reviews__rail{ cursor:grab; }
.reviews__rail.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.reviews__rail.is-dragging .review{ pointer-events:none; }
.railbtn{
  width:48px; height:48px; display:grid; place-items:center;
  background:transparent; border:1px solid var(--line-ink); border-radius:var(--r);
  color:#fff; cursor:pointer;
  transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.railbtn svg{ width:19px; }
.railbtn:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.32); }
.railbtn[disabled]{ opacity:.32; cursor:default; }
.railbtn[disabled]:hover{ background:transparent; border-color:var(--line-ink); }

/* --------------------------------------------------------------------------
   13b. STATEMENT — the one full-bleed moment on the page. Breaks the
   container rhythm so the eye resets before the reviews.
   -------------------------------------------------------------------------- */
.statement{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:center; color:#fff; background:var(--ink);
  min-height:min(78vh,660px); padding-block:clamp(76px,9vw,124px);
}
.statement__media{ position:absolute; inset:0; z-index:-1; }
.statement__media picture{ display:block; height:114%; margin-top:-7%; }
.statement__media img{ width:100%; height:100%; object-fit:cover; object-position:58% 42%; }
.statement__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,
    rgba(12,12,13,.95) 0%, rgba(12,12,13,.88) 34%, rgba(12,12,13,.62) 72%, rgba(12,12,13,.42) 100%);
}
.statement__quote{ margin:0; max-width:min(740px,100%); }
.statement__quote p{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(27px,3.8vw,52px); line-height:1.09; letter-spacing:-.034em;
}
.statement__quote em{ font-style:normal; color:var(--bronze-400); }
.statement__actions{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:16px 32px; margin-top:clamp(30px,3.6vw,46px);
}
.statement__actions .link-arrow{ margin-top:0; }
.link-arrow--light{ color:#fff; }
.link-arrow--light::after{ background:rgba(255,255,255,.3); }
.link-arrow--light:hover{ color:var(--bronze-400); }

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */
.faq__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,5.5vw,86px); align-items:start; }
.faq__aside .btn{ margin-top:30px; }
.faq__list{ border-top:1px solid var(--line); }
.qa{ border-bottom:1px solid var(--line); }
.qa summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 0; cursor:pointer; list-style:none;
  font-family:var(--f-display); font-weight:600; font-size:17.6px;
  letter-spacing:-.015em; line-height:1.35;
  transition:color var(--dur) var(--ease);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--amber); }
.qa summary i{
  position:relative; width:20px; height:20px; flex:none;
}
.qa summary i::before,.qa summary i::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--amber);
  transform:translate(-50%,-50%); transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.qa summary i::before{ width:14px; height:1.7px; }
.qa summary i::after{ width:1.7px; height:14px; }
.qa[open] summary i::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.qa__body{ overflow:hidden; height:auto; transition:height .32s var(--ease); }
.qa__body p{ color:var(--slate); font-size:15.6px; line-height:1.65; padding-bottom:24px; max-width:60ch; }

/* --------------------------------------------------------------------------
   15. QUOTE
   -------------------------------------------------------------------------- */
.quote{ background:var(--ink); color:#fff; }
.quote .section-title{ color:#fff; }
.quote .section-lede{ color:rgba(255,255,255,.68); }
.quote__grid{ display:grid; grid-template-columns:.86fr 1.14fr; gap:clamp(36px,5vw,76px); align-items:start; }

.contactlist{ margin-top:38px; border-top:1px solid var(--line-ink-2); }
.contactlist li{
  display:grid; grid-template-columns:78px 1fr; gap:16px; align-items:baseline;
  padding:17px 0; border-bottom:1px solid var(--line-ink-2);
}
.contactlist__k{
  font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bronze-400);
}
.contactlist__v{ font-size:16px; color:#fff; line-height:1.5; }
a.contactlist__v{ transition:color var(--dur) var(--ease); }
a.contactlist__v:hover{ color:var(--bronze-400); }

.coverage{ margin-top:34px; }
.coverage__title{ font-size:16px; letter-spacing:-.01em; color:#fff; }
.coverage__body{ margin-top:9px; font-size:15px; line-height:1.6; color:rgba(255,255,255,.6); max-width:40ch; }

.qform{
  background:var(--paper); color:var(--text);
  border-radius:var(--r-md);
  padding:clamp(26px,3.2vw,42px);
  box-shadow:var(--elev-2);
}
.qform__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ margin-bottom:18px; }
.field > label{
  display:block; font-size:12.5px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--slate); margin-bottom:8px;
}
.req{ color:var(--amber); }
.qform textarea{ resize:vertical; min-height:88px; line-height:1.55; }
.field__err{ margin-top:7px; font-size:13.4px; color:#9A3412; font-weight:500; }
.field.has-error input,.field.has-error select,.field.has-error textarea{
  border-color:#9A3412; box-shadow:0 0 0 3px rgba(154,52,18,.13);
}
.segmented--light .segmented__opt span{ height:44px; }
.qform .btn--block{ margin-top:8px; }
.qform__note{ margin-top:16px; font-size:13.6px; line-height:1.55; color:var(--slate); }
.qform__note a{ color:var(--amber-text); font-weight:600; border-bottom:1px solid currentColor; }
.qform__status{ margin-top:14px; font-size:14.4px; font-weight:500; }
.qform__status:empty{ margin-top:0; }
.qform__status.is-ok{ color:var(--teal); }
.qform__status.is-bad{ color:#9A3412; }

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */
.site-footer{ background:var(--ink-deep); color:#fff; padding-block:clamp(56px,6vw,84px) 0; }
.footer__top{
  display:grid; grid-template-columns:1fr 1.5fr; gap:clamp(36px,5vw,72px);
  padding-bottom:clamp(40px,5vw,64px);
}
.footer__brand .brand{ margin-bottom:22px; }
.footer__brand .brand__name{ color:#fff; }
.footer__tagline{ color:var(--slate-2); font-size:15.2px; line-height:1.6; max-width:34ch; }
.social{ display:flex; gap:10px; margin-top:26px; }
.social a{
  width:42px; height:42px; display:grid; place-items:center;
  border:1px solid var(--line-ink); border-radius:var(--r); color:#fff;
  transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.social svg{ width:19px; }
.social a:hover{ background:var(--amber); border-color:var(--amber); }

.footer__nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,40px); }
.footer__h{
  font-family:var(--f-body); font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--bronze-400); margin-bottom:18px;
}
.footer__col ul li{ margin-bottom:11px; }
.footer__col a,.footer__col address{
  color:var(--slate-2); font-size:15px; line-height:1.55;
  transition:color var(--dur) var(--ease);
}
.footer__col a:hover{ color:#fff; }
.footer__contact li{ margin-bottom:13px; }

.footer__bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 26px;
  padding-block:24px; border-top:1px solid var(--line-ink-2);
}
.footer__copy{ font-size:14px; color:var(--slate-2); }
.footer__legal{ display:flex; flex-wrap:wrap; gap:8px 22px; }
.footer__legal a{ font-size:14px; color:var(--slate-2); transition:color var(--dur) var(--ease); }
.footer__legal a:hover{ color:#fff; }

/* --------------------------------------------------------------------------
   17. MOBILE ACTION BAR
   -------------------------------------------------------------------------- */
.mobilebar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:95;
  gap:1px; background:var(--line); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(101%); transition:transform .32s var(--ease);
}
.mobilebar.is-visible{ transform:none; }
.mobilebar__btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:9px;
  padding:16px 10px; font-size:15.5px; font-weight:600;
}
.mobilebar__btn--call{ background:var(--paper); color:var(--navy); }
.mobilebar__btn--quote{ background:var(--amber); color:var(--charcoal); }

/* --------------------------------------------------------------------------
   18. MOTION SYSTEM

   Three entrance behaviours, used deliberately:
     .reveal          — content rises into place (the default)
     .reveal--title   — headings wipe open from a clipped edge
     .reveal--clip    — images uncover, with the frame settling out of a slight
                        overscale so the photograph appears to arrive

   Everything animates transform / opacity / clip-path only, so it stays on the
   compositor. Without JS, or with reduced motion, all of it is inert and the
   page renders complete.
   -------------------------------------------------------------------------- */
.js .reveal{ opacity:0; transform:translate3d(0,18px,0); }
.js .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .68s var(--ease-out), transform .68s var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
}

/* IMPORTANT — never clip the observed element itself.
   An element collapsed to zero area (clip-path, or a zero-height box) reports
   isIntersecting:false, so IntersectionObserver would never fire and the
   reveal would deadlock: permanently invisible. Every masked entrance below
   therefore clips or moves an INNER element, leaving the observed box intact. */

/* Headings — the type rises out from behind a masked edge. The inner span is
   inserted by main.js, so markup stays clean and non-JS output is unaffected. */
.js .reveal--title{ opacity:1; transform:none; overflow:hidden; padding-bottom:.06em; }
/* The wrapper becomes the text block, so balancing has to move onto it too. */
.js .reveal--title .tmask{ display:block; text-wrap:balance; transform:translate3d(0,105%,0); }
.js .reveal--title.is-in .tmask{
  transform:none;
  transition:transform 1s var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
}

/* Images — the frame uncovers while the photograph settles out of a slight
   overscale, so it reads as arriving rather than fading. */
.js .reveal--clip{ opacity:1; transform:none; }
.js .reveal--clip .plx,
.js .reveal--clip picture{ clip-path:inset(0 0 100% 0); }
.js .reveal--clip.is-in .plx,
.js .reveal--clip.is-in picture{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.05s var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
}
.js .reveal--clip img{
  transform:scale(1.13);
  transition:transform 1.5s var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
}
.js .reveal--clip.is-in img{ transform:scale(1); }

/* Cells in a hairline grid must keep their own background at all times —
   fading the cell itself would expose the grid's divider colour as a block.
   So these reveal their contents instead. */
.js .pillar.reveal{ opacity:1; transform:none; }
.js .pillar.reveal > *{
  opacity:0; transform:translate3d(0,14px,0);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
}
.js .pillar.reveal.is-in > *{ opacity:1; transform:none; }

/* Hero headline — line-by-line mask. Each line sits in its own overflow box,
   so the type rises out of the rule above it rather than fading in. */
.lmask{ display:block; overflow:hidden; padding-bottom:.08em; }
.lmask__i{ display:block; }
.js .lmask__i{ transform:translate3d(0,110%,0); }
.js .hero.is-ready .lmask__i{ transform:none; transition:transform 1.05s var(--ease-out); }
.js .hero.is-ready .lmask:nth-child(2) .lmask__i{ transition-delay:.10s; }

/* Hero entrance for everything around the headline */
.js .hero .reveal{ transition-delay:var(--reveal-delay,0ms); }

/* Parallax layer — offset is written by one rAF-gated scroll handler. */
.js .plx{ display:block; transform:translate3d(0,var(--plx-y,0px),0); }

/* Scroll cue — states the page continues, and is a real link to the next section */
.scrollcue{
  position:absolute; left:var(--gutter); bottom:30px; z-index:3;
  display:inline-flex; align-items:center; gap:14px;
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.45);
  transition:color .3s var(--ease-soft);
}
.scrollcue:hover{ color:#fff; }
.scrollcue__rail{
  position:relative; display:block; width:1px; height:46px;
  background:rgba(255,255,255,.16); overflow:hidden;
}
.scrollcue__dot{
  position:absolute; top:0; left:0; width:1px; height:15px; background:var(--amber);
  animation:cueDrop 2.4s var(--ease-soft) infinite;
}
@keyframes cueDrop{
  0%   { transform:translate3d(0,-18px,0); }
  60%  { transform:translate3d(0,48px,0); }
  100% { transform:translate3d(0,48px,0); }
}

/* --------------------------------------------------------------------------
   18b. COLOUR LAYER
   The page alternates four surfaces — white, cool grey, a warm wash and navy —
   so the rhythm is carried by colour rather than by spacing alone. Teal is
   reserved for the one thing it means: the eco / responsible-disposal claim.
   -------------------------------------------------------------------------- */

/* Hero: navy with a little light in it, rather than one flat fill */
.hero{
  background:linear-gradient(152deg, #141416 0%, #1A1A1C 48%, #232326 100%);
}

/* Warm band directly under the hero — the first hit of colour on the page */
.trustbar{
  background:linear-gradient(90deg, var(--accent-tint) 0%, #FFFFFF 55%, var(--teal-tint) 100%);
  border-block:1px solid var(--line);
}
.trustbar__item:nth-child(4) .trustbar__ico{ color:var(--teal-text); }

/* Services sit on white so the navy hover fill has something to push against */
.services{ background:var(--paper); }
.svc-list{ border-top:1px solid var(--line); }

.process{ background:var(--paper); }
.faq{ background:var(--paper); }

/* Eco pillar picks up the teal */
.pillar:nth-child(4) h3{ color:var(--teal-text); }

/* Stats: navy figures, accent units */
.stat{ background:var(--paper); }
.stats{ border-radius:var(--r-md); overflow:hidden; box-shadow:var(--elev-1); border:0; }
.stat__value{ color:var(--navy); }
.stat:nth-child(2) .stat__unit,
.stat:nth-child(4) .stat__unit{ color:var(--teal); }

/* Concerns: cool band, with the answer panel lifted off it in navy */
.concerns{ background:var(--bone-2); border-block:1px solid var(--line); }
.worry__mark{ background:var(--paper); }

/* Coverage flips to light — three dark sections in a row otherwise */
.coverage-sec{ background:var(--bone-2); color:var(--text); }
.coverage-sec .section-title{ color:var(--text); }
.coverage-sec .eyebrow{ color:var(--amber-text); }
.coverage-sec .section-head__aside p{ color:var(--slate); }
.coverage-sec .route--legs{ background:var(--line); }
.coverage-sec .step__node{ background:var(--bone-2); border-color:var(--line); }
.leg__k{ color:var(--amber-text); }
.coverage-sec .leg__t{ color:var(--navy); }
.coverage-sec .leg__d{ color:var(--slate); }
.leg:nth-child(3) .leg__k{ color:var(--teal-text); }

/* Cards lift instead of sitting flat on the page */
.worktile{ box-shadow:none; }
.frame{ box-shadow:var(--elev-1); }
.van__body{ fill:#F5F6F1; }

/* Reviewer initials cycle the palette rather than repeating one orange dot */
.review:nth-child(2) .review__avatar{ background:var(--teal-text); }
.review:nth-child(3) .review__avatar{ background:var(--ink-3); }
.review:nth-child(5) .review__avatar{ background:var(--teal-text); }

/* Accent underline on the active nav item, and a coloured focus for the CTA */
.btn--accent{ box-shadow:0 6px 16px -8px rgba(26,26,28,.28); }
.btn--accent:hover{ box-shadow:0 10px 22px -8px rgba(26,26,28,.34); }

/* ==========================================================================
   18c. FINAL POLISH
   Refines the execution, not the concept. Shades are nudged off the pure
   signal values (a fire-engine red and a flat petrol read generic); type
   gains a wider size step; elevated surfaces get a lit edge and a layered
   cast; the two quote panels are treated as one floating component.
   ========================================================================== */
:root{
  /* Red pulled slightly warmer and deeper — less signal, more brand.
     White on it measures 4.74:1, an improvement on the original 4.66:1. */
  --accent:        #C2A16C;
  --accent-dark:   #8A6A34;   /* small accent text on light   5.6:1 */
  --accent-light:  #C2A16C;   /* accents on the petrol        5.5:1 */
  --accent-tint:   #F0ECE2;

  /* Petrol gains a tonal ladder so sections are not one flat slab */
  --primary:       #1A1A1C;
  --ink:           #1A1A1C;   /* body sections — lifted a touch      */
  --ink-deep:      #121213;   /* footer — the floor                  */
  --ink-2:         #232326;
  --ink-3:         #2E2E33;
  --navy:          #1A1A1C;
  --green-800:     #1A1A1C;

  --amber:         #C2A16C;
  --amber-btn:     #C2A16C;
  --amber-text:    #8A6A34;
  --amber-deep:    #B18F55;
  --amber-tint:    #FCEEED;
  --bronze-400:    #C2A16C;
  --bronze-600:    #C2A16C;

  --bone:          #F5F6F1;
  --line:          #E2E3DC;
  --line-soft:     #EDEEE8;

  --elev-1: 0 1px 2px rgba(18,18,19,.06), 0 10px 24px -10px rgba(18,18,19,.18);
  --elev-2: 0 1px 2px rgba(18,18,19,.06), 0 8px 18px -8px rgba(18,18,19,.14),
            0 34px 64px -26px rgba(18,18,19,.34);
}

/* ---- Typography: widen the step between display and body ---- */
.hero__title{ letter-spacing:-.046em; }
.section-title{ letter-spacing:-.036em; }
p, .section-lede, .svcrow__desc, .step__desc, .leg__d{ text-wrap:pretty; }
.section-lede{ line-height:1.62; }
.eyebrow{ font-size:11.5px; letter-spacing:.2em; }
.stat__value,.vanitem__dims span,.why__badge-num{ font-variant-numeric:tabular-nums; }

/* ---- Buttons: a considered rest state, a lift on hover, a real press ---- */
.btn{ border-radius:10px; letter-spacing:.008em; }
.btn--accent{
  box-shadow:0 1px 2px rgba(26,26,28,.12), 0 8px 20px -10px rgba(26,26,28,.35);
}
.btn--accent:hover{
  transform:translateY(-1px);
  box-shadow:0 2px 5px rgba(26,26,28,.16), 0 14px 28px -12px rgba(26,26,28,.42);
}
.btn--accent:active{ transform:translateY(0) scale(.994); }
.btn--ghost{
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.04);
}
.btn--ghost:hover{ border-color:rgba(255,255,255,.42); }
.btn--dark:hover{ transform:translateY(-1px); }

/* ---- Elevated surfaces: a lit top edge, then a layered cast ---- */
.quickquote,.qform{
  position:relative; overflow:hidden;
  border:1px solid rgba(18,18,19,.07);
  box-shadow:var(--elev-2);
}
/* One accent hairline ties both quote panels to the brand */
.quickquote::after,.qform::after{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 100%);
}
.quickquote__title{ padding-top:2px; }
.qform{ padding-top:clamp(30px,3.4vw,46px); }

/* Fields sit filled at rest and lift to white on focus */
.quickquote select,.qform input,.qform select,.qform textarea{
  background:#F7F8FA; border-color:#E2E5EB;
  transition:background-color .22s var(--ease-soft), border-color .22s var(--ease-soft),
             box-shadow .22s var(--ease-soft);
}
.quickquote select:hover,.qform input:hover,.qform select:hover,.qform textarea:hover{
  background:#FFFFFF; border-color:#CBD2DC;
}
.quickquote select:focus,.qform input:focus,.qform select:focus,.qform textarea:focus{
  background:#FFFFFF; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(194,161,108,.34);
}
.segmented__opt input:checked + span{
  background:var(--gold); border-color:var(--gold); color:var(--charcoal);
  box-shadow:0 1px 2px rgba(26,26,28,.2);
}

/* ---- Seat the photography into the sections it sits in ---- */
.worktile{ border:1px solid rgba(18,18,19,.07); }
.frame{ border:1px solid rgba(18,18,19,.07); }

/* ---- Header + logo fully in brand ---- */
.site-header.is-stuck{
  background:rgba(245,246,248,.86);
  box-shadow:0 1px 0 var(--line), 0 8px 28px -18px rgba(18,18,19,.3);
}
.nav__list a::after{ height:2px; background:var(--accent); }
.header__tel .ico{ color:var(--accent-light); }
.site-header.is-stuck .header__tel .ico{ color:var(--accent); }
.brand{ transition:opacity .25s var(--ease-soft); }
.brand:hover{ opacity:.82; }

/* ---- Consistent accent, everywhere it should appear ---- */
.stat__unit{ color:var(--accent); }
.review__avatar{ background:var(--gold); color:var(--charcoal); }
.review:nth-child(2) .review__avatar{ background:var(--ink-3); }
.review:nth-child(3) .review__avatar{ background:var(--accent-dark); }
.review:nth-child(4) .review__avatar{ background:var(--ink-3); }
.review:nth-child(5) .review__avatar{ background:var(--gold); color:var(--charcoal); }
.qa summary:hover{ color:var(--accent-dark); }
.qa summary i::before,.qa summary i::after{ background:var(--accent); }
.route__progress{ background:var(--accent); }
.is-reached > .step__node{ background:var(--accent); border-color:var(--accent); }

/* ---- Micro-interactions: small, and only where they report something ---- */
.trustbar__item .trustbar__ico{ transition:transform .35s var(--ease-out); }
.trustbar__item:hover .trustbar__ico{ transform:translateY(-2px); }
.review{ transition:border-color .35s var(--ease-soft), transform .45s var(--ease-out); }
.review:hover{ transform:translateY(-3px); }
.stat{ transition:background-color .35s var(--ease-soft); }
.stat:hover{ background:#FBFCFD; }
.contactlist li a.contactlist__v{ transition:color .28s var(--ease-soft), transform .35s var(--ease-out); }
.contactlist li:hover a.contactlist__v{ transform:translateX(3px); }
.social a{ transition:background-color .3s var(--ease-soft), border-color .3s var(--ease-soft),
                     transform .35s var(--ease-out); }
.social a:hover{ background:var(--accent); border-color:var(--accent); transform:translateY(-2px); }

/* ---- Focus stays on-brand ---- */
:focus-visible{ outline-color:var(--accent); }
.hero :focus-visible,.fleet :focus-visible,.reviews :focus-visible,
.quote__aside :focus-visible,.site-footer :focus-visible{ outline-color:var(--accent-light); }

/* --------------------------------------------------------------------------
   18d. BELOW-THE-FOLD REDESIGN
   -------------------------------------------------------------------------- */

/* ---- Services: name + the site's own tagline carry the scan; the fuller
        description is there but recedes until the row is engaged ---- */
.svcrow{ grid-template-columns:50px 38px minmax(210px,1fr) 1.45fr 32px; }
.svcrow__head{ display:block; }
.svcrow__name{ position:relative; display:inline-block; }
.svcrow__name::after{
  content:""; position:absolute; left:0; bottom:-7px; height:2px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.svcrow:hover .svcrow__name::after,
.svcrow:focus-visible .svcrow__name::after{ transform:scaleX(1); }
.svcrow__tag{
  display:block; margin-top:11px;
  font-size:14.4px; font-weight:500; color:var(--slate);
  transition:color .42s var(--ease-soft);
}
.svcrow__desc{ color:var(--slate-2); transition:color .42s var(--ease-soft); }
/* Set the colour on the ROW, so anything without its own hover colour
   inherits white instead of staying dark on the dark fill. The name had no
   rule of its own and was invisible once the fill wiped in. */
.svcrow:hover,.svcrow:focus-visible{ color:#fff; }
.svcrow:hover .svcrow__name,
.svcrow:focus-visible .svcrow__name{ color:#fff; }
.svcrow:hover .svcrow__tag,.svcrow:focus-visible .svcrow__tag{ color:var(--accent-light); }
.svcrow:hover .svcrow__desc,.svcrow:focus-visible .svcrow__desc{ color:rgba(255,255,255,.84); }

/* ---- Statistics: an editorial row, not four dashboard cards ---- */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  background:none; border:0; border-top:1px solid var(--line); box-shadow:none;
  border-radius:0; overflow:visible;
  margin-top:clamp(56px,7vw,96px);
}
.stat{
  display:flex; flex-direction:column-reverse; align-items:flex-start;
  background:none; border-right:1px solid var(--line);
  padding:clamp(30px,3.4vw,48px) clamp(18px,2.2vw,36px) 0 0;
}
.stat + .stat{ padding-left:clamp(18px,2.2vw,36px); }
.stat:last-child{ border-right:0; }
.stat:hover{ background:none; }
.stat__value{
  font-size:clamp(44px,5.6vw,78px); letter-spacing:-.045em; line-height:.94;
  color:var(--text);
}
.stat__unit{ font-size:.42em; color:var(--accent); }
.stat__label{
  margin-top:16px; font-size:12.5px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--slate);
}

/* ---- Concerns: every worry pairs to an answer the company already gives ---- */
.concerns__pair{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px,4vw,68px); align-items:start;
}
.worries{ border-top:1px solid var(--line); }
.worries li{ border-bottom:1px solid var(--line); }
.worry{
  display:grid; grid-template-columns:22px minmax(0,1fr) 20px;
  align-items:center; gap:16px; width:100%;
  padding:20px 2px; background:none; border:0; cursor:pointer; text-align:left;
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(16px,1.5vw,19.5px); letter-spacing:-.022em; line-height:1.3;
  color:var(--slate); transition:color .3s var(--ease-soft);
}
.worry__txt{ transition:transform .42s var(--ease-out); }
.worry:hover,.worry.is-active{ color:var(--text); }
.worry:hover .worry__txt,.worry.is-active .worry__txt{ transform:translateX(9px); }
.worry__mark{
  position:relative; width:22px; height:22px; flex:none;
  border:1px solid var(--line); border-radius:50%; background:var(--paper);
  transition:background-color .32s var(--ease-soft), border-color .32s var(--ease-soft);
}
.worry__mark::before,.worry__mark::after{
  content:""; position:absolute; left:50%; top:50%;
  width:9px; height:1.5px; background:var(--slate-2);
  transition:background-color .32s var(--ease-soft);
}
.worry__mark::before{ transform:translate(-50%,-50%) rotate(45deg); }
.worry__mark::after { transform:translate(-50%,-50%) rotate(-45deg); }
.worry.is-active .worry__mark{ background:var(--gold); border-color:var(--gold); }
.worry.is-active .worry__mark::before,
.worry.is-active .worry__mark::after{ background:var(--charcoal); }
.worry__go{
  width:20px; color:var(--accent); opacity:0; transform:translateX(-6px);
  transition:opacity .3s var(--ease-soft), transform .42s var(--ease-out);
}
.worry__go svg{ width:20px; }
.worry:hover .worry__go,.worry.is-active .worry__go{ opacity:1; transform:none; }

.answers{
  position:relative; overflow:hidden;
  background:var(--ink); color:#fff;
  border-radius:var(--r-md); box-shadow:var(--elev-2);
  padding:clamp(28px,3.2vw,46px);
}
.answers::after{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent-light));
}
.answer[hidden]{ display:none; }
.answer__k{
  font-size:11.5px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent-light);
}
.answer__h{
  margin-top:14px; font-family:var(--f-display); font-weight:600;
  font-size:clamp(20px,2.05vw,28px); line-height:1.24; letter-spacing:-.028em;
}
.answer__b{ margin-top:13px; color:rgba(255,255,255,.7); font-size:15.4px; line-height:1.62; }
.js .answer.is-shown{ animation:answerIn .48s var(--ease-out) both; }
@keyframes answerIn{ from{ opacity:0; transform:translate3d(0,10px,0); } to{ opacity:1; transform:none; } }

.values{ margin:clamp(26px,3vw,34px) 0; border-top:1px solid var(--line-ink-2); }
.value{
  padding:14px 0; border-bottom:1px solid var(--line-ink-2);
  font-size:15px; line-height:1.5; color:rgba(255,255,255,.62);
}
.value span{
  display:block; margin-bottom:3px;
  font-family:var(--f-display); font-weight:600; font-size:16.5px;
  letter-spacing:-.018em; color:#fff;
}

/* ---- Fleet: choosing a van, not reading four cards ---- */
.vanitem{ transition:opacity .42s var(--ease-soft); }
.fleet-row.has-active .vanitem:not(.is-active){ opacity:.42; }
.vanitem.is-active .vanitem__art svg{ transform:scale(1.07) translateX(5px); }
.vanitem.is-active .van__body{ fill:#fff; }
.vanitem.is-active .vanitem__cta{ color:#fff; }
.vanitem.is-active .vanitem__cta::before{ transform:scaleX(1); transform-origin:left; }
.vanitem.is-active .vanitem__meta{ border-top-color:rgba(255,255,255,.3); }

/* ---- Process: the reached step steps forward ---- */
.step__title,.step__desc,.step__num{ transition:color .4s var(--ease-soft); }
.step__num{ color:var(--slate-2); }
.step.is-reached .step__num{ color:var(--accent); }
.step.is-reached .step__title{ color:var(--text); }

/* ---- Why Vahora: the four pillars read as principles ---- */
.pillar{ position:relative; transition:transform .45s var(--ease-out); }
.pillar::before{
  content:""; position:absolute; left:0; top:0; width:2px; height:0;
  background:var(--accent); transition:height .45s var(--ease-out);
}
@media (hover:hover){
  .pillar:hover{ transform:translateX(8px); }
  .pillar:hover::before{ height:100%; }
}


/* The satisfaction figure reads as a caption plate on the photograph */
/* Must stay absolute: a relative badge falls out of the image and hangs in
   the whitespace below it. */
.why__badge{ position:absolute; overflow:hidden; z-index:2; }
.why__badge::before{
  content:""; position:absolute; inset:0 auto 0 0; width:3px;
  background:var(--accent);
}
.why__badge-num{ letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.why__media .frame::after{
  content:""; position:absolute; inset:auto 0 0 0; height:46%; z-index:1;
  background:linear-gradient(180deg, rgba(12,12,13,0), rgba(12,12,13,.55));
  pointer-events:none;
}
.why__media .frame{ position:relative; }

/* --------------------------------------------------------------------------
   18e. FINISHING
   Three things only: a grain plate so the dark panels read as printed rather
   than flat, a stricter editorial eyebrow, and tighter display tracking.
   -------------------------------------------------------------------------- */

/* Grain — an inline SVG turbulence plate, so it costs no extra request and
   never blocks paint. Sits at 3.5% over the dark sections; enough to kill the
   flatness of a large solid fill, not enough to notice as an effect. */
.hero::after,
.statement::after,
.fleet::before,
.reviews::before,
.quote::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fleet,.reviews,.quote{ position:relative; }
.fleet > *,.reviews > *,.quote > *{ position:relative; z-index:1; }
.hero__inner,.statement__inner{ z-index:2; }

/* Eyebrow — a gold rule, letterspaced caps, set at the smallest legible size.
   This is the one place gold appears on the light canvas, so it stays rare. */
.eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.26em;
  color:var(--gold-deep); gap:14px; margin-bottom:22px;
}
.eyebrow::before{ width:28px; height:1px; background:var(--gold); opacity:.9; }
.eyebrow--light{ color:var(--gold); }
.eyebrow--light::before{ background:var(--gold); }

/* Display type: tighter, more confident, with optical sizing where available */
.hero__title{ letter-spacing:-.05em; font-weight:600; }
.section-title{ letter-spacing:-.038em; }
.section-lede{ color:var(--slate); }

/* Hairlines carry the structure, so they must be exact — never gold */
.svc-list,.worries,.faq__list,.stats{ border-color:var(--line); }

/* Images: a single consistent treatment, slightly deepened on hover */
.worktile img,.frame img,.hero__img img,.statement__media img{
  filter:saturate(.98) contrast(1.01);
}
.js .worktile.is-in:hover img{ transform:scale(1.03); filter:saturate(1.02) contrast(1.03); }

/* --------------------------------------------------------------------------
   18f. REVIEWS + FAQ
   Both were honest but plain — a rail of equal cards, and an unnumbered list
   of questions. Neither had a focal point. One review is promoted to carry
   the section; the questions become an indexed set.
   -------------------------------------------------------------------------- */
.bigquote{
  margin:0 0 clamp(40px,5vw,64px);
  max-width:min(880px,100%);
  padding-left:clamp(20px,2.6vw,38px);
  border-left:2px solid var(--gold);
}
.bigquote blockquote{ margin:0; }
.bigquote blockquote p{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(23px,3.1vw,42px); line-height:1.18; letter-spacing:-.034em;
  color:var(--canvas); max-width:none;
}
.bigquote blockquote p::before{ content:"\201C"; margin-left:-.42em; }
.bigquote blockquote p::after{ content:"\201D"; }
.bigquote__by{ display:flex; align-items:center; gap:14px; margin-top:clamp(24px,2.6vw,34px); }
.bigquote__who{ display:flex; flex-direction:column; gap:3px; }
.bigquote__who strong{ font-size:15.5px; font-weight:600; color:var(--canvas); }
.bigquote__who span{ font-size:13.4px; color:var(--gold); letter-spacing:.02em; }
.bigquote .review__avatar{ width:44px; height:44px; font-size:14px; }

/* The rail now carries the supporting quotes, so it can sit quieter */
.review blockquote p{ font-size:clamp(15.6px,1.25vw,17px); color:rgba(245,246,241,.78); }
.review__name{ color:var(--canvas); }

/* ---- FAQ as an indexed set ---- */
.qa summary{
  gap:clamp(14px,2vw,26px); padding:clamp(20px,2.1vw,26px) 0;
  font-size:clamp(16.5px,1.6vw,20px);
}
.qa__n{
  flex:none; width:2.4em;
  font-family:var(--f-display); font-size:12px; font-weight:600;
  letter-spacing:.14em; color:var(--gold-deep);
  transition:color .3s var(--ease-soft);
}
.qa summary > span:not(.qa__n){ flex:1; }
.qa[open] .qa__n{ color:var(--gold); }
.qa[open] summary{ color:var(--charcoal); }
.qa__body p{ padding-left:calc(2.4em + clamp(14px,2vw,26px)); max-width:58ch; }
.qa{ transition:background-color .35s var(--ease-soft); }
@media (hover:hover){ .qa:hover{ background:rgba(194,161,108,.05); } }

@media (max-width:680px){
  .bigquote{ max-width:none; padding-left:18px; margin-bottom:34px; }
  .bigquote blockquote p{ font-size:clamp(21px,6vw,27px); }
  .qa__n{ width:auto; min-width:2.2em; }
  .qa__body p{ padding-left:0; }
}

/* --------------------------------------------------------------------------
   18g. INDUSTRIES — two columns, divided by a hairline rather than boxed
   -------------------------------------------------------------------------- */
.industries{ background:var(--paper); }
.ind-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:0; border-top:1px solid var(--line);
}
.ind{
  padding:clamp(32px,3.4vw,52px) clamp(24px,3vw,48px) clamp(32px,3.4vw,48px) 0;
  border-right:1px solid var(--line);
}
.ind + .ind{ padding-left:clamp(24px,3vw,48px); border-right:0; }
.ind__k{
  font-size:11px; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold-deep);
}
.ind__t{
  margin-top:14px; font-size:clamp(26px,3vw,40px);
  letter-spacing:-.036em; color:var(--text);
}
.ind__d{ margin-top:16px; color:var(--slate); font-size:16px; line-height:1.62; max-width:44ch; }
.ind__list{ margin-top:24px; border-top:1px solid var(--line-soft); }
.ind__list li{
  padding:11px 0; border-bottom:1px solid var(--line-soft);
  font-size:15.2px; color:var(--text);
  display:flex; align-items:center; gap:12px;
}
.ind__list li::before{
  content:""; width:5px; height:5px; flex:none;
  background:var(--gold); border-radius:50%;
}
.ind .link-arrow{ margin-top:26px; }

@media (max-width:820px){
  .ind-grid{ grid-template-columns:1fr; }
  .ind{ padding:28px 0; border-right:0; border-bottom:1px solid var(--line); }
  .ind + .ind{ padding-left:0; }
  .ind:last-child{ border-bottom:0; }
}

/* --------------------------------------------------------------------------
   18h. VLL REMOVALS — word statistics, form hint, footer credit
   -------------------------------------------------------------------------- */
/* Two of the four figures are now statements rather than numbers, so they
   need their own scale — a sentence at 78px would shout. */
.stat__value--word{
  flex-direction:column; align-items:flex-start; gap:5px;
  font-size:clamp(21px,2.1vw,30px); line-height:1.12; letter-spacing:-.025em;
}
.stat__value--word .stat__unit{
  font-size:.62em; color:var(--slate); letter-spacing:-.01em;
}
.field__hint{
  margin:-6px 0 10px; font-size:13.4px; line-height:1.55; color:var(--slate);
  max-width:56ch;
}
.footer__bottom{ gap:10px 26px; }

/* The enquiry form now sits high on the page, so it opens the light run
   directly under the hero — give it a little more air above. */
.quote{ padding-top:clamp(72px,8vw,116px); }

/* --------------------------------------------------------------------------
   18i. INNER PAGE HEADER
   Inner pages open on a compact charcoal band rather than the full hero, so
   the homepage keeps its cinematic moment and the rest get straight to work.
   -------------------------------------------------------------------------- */
.pagehead{
  position:relative; background:var(--ink); color:var(--canvas);
  margin-top:calc(var(--header-h) * -1);
  padding:calc(var(--header-h) + clamp(56px,7vw,104px)) 0 clamp(52px,6vw,88px);
  overflow:hidden;
}
.pagehead::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.pagehead .shell{ position:relative; z-index:1; }
.pagehead__title{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(34px,5.2vw,68px); line-height:1.02; letter-spacing:-.042em;
  color:var(--canvas);
}
.pagehead__lede{
  margin-top:clamp(18px,2vw,26px); max-width:52ch;
  color:rgba(245,246,241,.74); font-size:clamp(16px,1.3vw,18.5px); line-height:1.62;
}
/* Inner pages start light, so the header must be readable from the first pixel */
.pagehead + .section{ padding-top:clamp(56px,7vw,96px); }

.legal{ max-width:62ch; }
.legal p{ color:var(--slate); font-size:16.5px; line-height:1.7; margin-bottom:18px; }
.legal a{ color:var(--gold-deep); border-bottom:1px solid rgba(194,161,108,.5); }
.legal__note{
  padding:16px 20px; margin-bottom:26px;
  background:var(--accent-tint); border-left:3px solid var(--gold);
  color:var(--text); font-weight:500;
}

/* --------------------------------------------------------------------------
   18j. SERVICES — card grid + detail dialog
   Each card carries the client's own photograph for that exact service. The
   image is the subject, so the card is mostly image; the text block underneath
   stays quiet until the card is engaged.
   -------------------------------------------------------------------------- */
.svc-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.4vw,34px);
}
.svccard{ margin:0; }
.svccard__open{
  display:block; width:100%; padding:0; text-align:left; cursor:pointer;
  background:var(--paper); color:inherit;
  border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; isolation:isolate;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out),
             border-color .35s var(--ease-soft);
}
.svccard__media{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:16/10; background:var(--bone-2);
}
.svccard__media picture{ display:block; width:100%; height:100%; }
.svccard__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s var(--ease-out), filter .5s var(--ease-soft);
}
.svccard__num{
  position:absolute; left:0; top:0; z-index:2;
  padding:9px 15px; background:var(--charcoal); color:var(--gold);
  font-family:var(--f-display); font-size:12px; font-weight:600; letter-spacing:.16em;
  border-bottom-right-radius:var(--r);
}
.svccard__body{
  display:grid; grid-template-columns:1fr 22px; align-items:center;
  gap:14px; padding:clamp(20px,1.9vw,26px);
}
.svccard__name{
  grid-column:1; font-family:var(--f-display); font-weight:600;
  font-size:clamp(17.5px,1.5vw,21px); letter-spacing:-.025em; line-height:1.22;
  color:var(--text);
}
.svccard__tag{
  grid-column:1; grid-row:2; margin-top:7px;
  font-size:14.4px; color:var(--slate);
  transition:color .35s var(--ease-soft);
}
.svccard__go{
  grid-column:2; grid-row:1 / span 2; width:22px; color:var(--slate-2);
  transition:transform .45s var(--ease-out), color .35s var(--ease-soft);
}
.svccard__go svg{ width:22px; }

@media (hover:hover){
  .svccard__open:hover{
    transform:translateY(-4px); border-color:rgba(194,161,108,.55);
    box-shadow:var(--elev-2);
  }
  .svccard__open:hover .svccard__media img{ transform:scale(1.05); }
  .svccard__open:hover .svccard__go{ transform:translateX(6px); color:var(--gold-deep); }
  .svccard__open:hover .svccard__tag{ color:var(--gold-deep); }
}
.svccard__open:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px;
  border-color:var(--gold);
}

/* ---- Detail dialog ---- */
.svcmodal{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:clamp(16px,3vw,40px); }
.svcmodal[hidden]{ display:none; }
.svcmodal__backdrop{
  position:absolute; inset:0; background:rgba(18,18,19,.72);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .32s var(--ease-soft);
}
.svcmodal.is-open .svcmodal__backdrop{ opacity:1; }
.svcmodal__panel{
  position:relative; z-index:1; width:min(920px,100%);
  max-height:min(88vh,900px); overflow-y:auto;
  background:var(--paper); border-radius:var(--r-md);
  box-shadow:0 40px 90px -30px rgba(18,18,19,.6);
  opacity:0; transform:translateY(14px) scale(.985);
  transition:opacity .38s var(--ease-out), transform .38s var(--ease-out);
}
.svcmodal.is-open .svcmodal__panel{ opacity:1; transform:none; }
.svcmodal__close{
  position:absolute; right:14px; top:14px; z-index:3;
  width:42px; height:42px; display:grid; place-items:center;
  background:rgba(18,18,19,.62); color:#fff; border:0; border-radius:50%;
  cursor:pointer; transition:background-color .3s var(--ease-soft), transform .3s var(--ease-out);
}
.svcmodal__close svg{ width:20px; }
.svcmodal__close:hover{ background:var(--charcoal); transform:rotate(90deg); }
.svcmodal__media{ margin:0; aspect-ratio:16/9; overflow:hidden; background:var(--bone-2); }
.svcmodal__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.svcmodal__body{ padding:clamp(26px,3.2vw,44px); }
.svcmodal__num{
  font-family:var(--f-display); font-size:12px; font-weight:600;
  letter-spacing:.2em; color:var(--gold-deep);
}
.svcmodal__title{
  margin-top:12px; font-size:clamp(24px,3vw,38px);
  letter-spacing:-.035em; line-height:1.08; color:var(--text);
}
.svcmodal__tag{ margin-top:10px; font-size:16px; color:var(--gold-deep); font-weight:500; }
.svcmodal__desc{ margin-top:18px; font-size:16.5px; line-height:1.7; color:var(--slate); max-width:62ch; }
.svcmodal__points{ margin-top:26px; border-top:1px solid var(--line); }
.svcmodal__points li{
  padding:16px 0; border-bottom:1px solid var(--line);
  font-size:15.2px; line-height:1.6; color:var(--slate);
}
.svcmodal__points strong{
  display:block; margin-bottom:4px; font-family:var(--f-display);
  font-weight:600; font-size:16px; color:var(--text); letter-spacing:-.015em;
}
.svcmodal__cta{ margin-top:28px; }
body.svc-open{ overflow:hidden; }

/* Homepage summary: the same cards, but shallower. On the services page they
   stay full height — there the images are the point; here they are a preview
   and six full-bleed photographs made the page a long scroll. */
.svc-grid--compact .svccard__media{ aspect-ratio:16/9; }
.svc-grid--compact .svccard__body{ padding:clamp(16px,1.5vw,20px); }
.svc-grid--compact .svccard__name{ font-size:clamp(16.5px,1.35vw,19px); }
.svc-grid--compact .svccard__tag{ margin-top:5px; font-size:13.8px; }

@media (max-width:1080px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px){
  .svc-grid{ grid-template-columns:1fr; gap:18px; }
  .svccard__media{ aspect-ratio:3/2; }

  /* Compact cards go horizontal: a square thumbnail beside the text roughly
     halves the height of the section. */
  .svc-grid--compact{ gap:12px; }
  .svc-grid--compact .svccard__open{ display:grid; grid-template-columns:118px minmax(0,1fr); align-items:stretch; }
  /* No aspect-ratio here: the row stretches to fit a long title, and a square
     ratio would make the image grow WIDER to match, spilling over the text
     (this happened on "Dismantling & Reassembling Services"). Fix the width,
     let the height follow the row. */
  .svc-grid--compact .svccard__media{ aspect-ratio:auto; width:118px; height:100%; min-height:112px; }
  .svc-grid--compact .svccard__num{ padding:6px 10px; font-size:11px; }
  .svc-grid--compact .svccard__body{ padding:14px 16px; align-content:center; }
  .svc-grid--compact .svccard__name{ font-size:16.5px; }
  .svc-grid--compact .svccard__go{ width:19px; }
  .svc-grid--compact .svccard__go svg{ width:19px; }
  .svcmodal{ padding:0; place-items:end stretch; }
  .svcmodal__panel{ width:100%; max-height:92vh; border-radius:var(--r-md) var(--r-md) 0 0; }
  .svcmodal__media{ aspect-ratio:16/10; }
}

/* --------------------------------------------------------------------------
   18k. LEGAL PAGES — a sticky contents index beside the text, so a long
   document stays navigable without a wall of scrolling.
   -------------------------------------------------------------------------- */
.legalpage__grid{
  display:grid; grid-template-columns:clamp(220px,24vw,290px) minmax(0,1fr);
  gap:clamp(36px,5vw,84px); align-items:start;
}
.legalpage__index{ position:sticky; top:calc(var(--header-h) + 28px); }
.legalpage__idx-title{
  font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:16px;
}
.legalpage__index ol{ counter-reset:l; border-top:1px solid var(--line); }
.legalpage__index li{ counter-increment:l; border-bottom:1px solid var(--line); }
.legalpage__index a{
  display:flex; gap:12px; padding:11px 0;
  font-size:14.4px; line-height:1.45; color:var(--slate);
  transition:color .3s var(--ease-soft), transform .35s var(--ease-out);
}
.legalpage__index a::before{
  content:counter(l,decimal-leading-zero);
  font-family:var(--f-display); font-size:11.5px; font-weight:600;
  letter-spacing:.1em; color:var(--slate-2); flex:none; padding-top:2px;
}
.legalpage__index a:hover{ color:var(--text); transform:translateX(3px); }
.legalpage__meta{
  margin-top:28px; padding-top:20px; border-top:1px solid var(--line);
  font-size:13.5px;
}
.legalpage__meta dt{
  font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  font-size:11px; color:var(--slate-2); margin-top:12px;
}
.legalpage__meta dd{ margin:3px 0 0; color:var(--text); }

.legalpage__body{ max-width:70ch; }
.legalpage__h{
  display:flex; gap:16px; align-items:baseline;
  margin-top:clamp(38px,4vw,56px); scroll-margin-top:calc(var(--header-h) + 24px);
  font-size:clamp(20px,2.1vw,27px); letter-spacing:-.028em; color:var(--text);
}
.legalpage__body > .legal__h:first-child{ margin-top:0; }
.legal__h{
  display:flex; gap:16px; align-items:baseline;
  margin-top:clamp(38px,4vw,56px); scroll-margin-top:calc(var(--header-h) + 24px);
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(20px,2.1vw,27px); letter-spacing:-.028em; color:var(--text);
}
.legalpage__body > .legal__h:first-of-type{ margin-top:0; }
.legal__n{
  flex:none; font-size:12px; font-weight:600; letter-spacing:.14em;
  color:var(--gold-deep);
}
.legalpage__body p{
  margin-top:14px; font-size:16.2px; line-height:1.72; color:var(--slate);
}
.legalpage__body a{ color:var(--gold-deep); border-bottom:1px solid rgba(194,161,108,.5); }
.legal__list{ margin-top:16px; border-top:1px solid var(--line-soft); }
.legal__list li{
  position:relative; padding:11px 0 11px 22px;
  border-bottom:1px solid var(--line-soft);
  font-size:15.6px; line-height:1.6; color:var(--slate);
}
.legal__list li::before{
  content:""; position:absolute; left:0; top:19px;
  width:6px; height:6px; border-radius:50%; background:var(--gold);
}
.legal__list strong{ color:var(--text); font-weight:600; }

@media (max-width:900px){
  .legalpage__grid{ grid-template-columns:1fr; gap:34px; }
  .legalpage__index{ position:static; }
  .legalpage__index ol{ columns:2; column-gap:26px; }
  .legalpage__index li{ break-inside:avoid; }
}
@media (max-width:560px){ .legalpage__index ol{ columns:1; } }

/* ==========================================================================
   19. RESPONSIVE
   Each breakpoint makes a layout decision, rather than shrinking the last one.
   ========================================================================== */

/* ---- ≤1180px : tighten the header before anything collides ---- */
@media (max-width:1180px){
  .nav__list{ gap:18px; }
  .nav__list a{ font-size:14.8px; }
  .header__tel{ font-size:14px; }
  .quickquote{ width:min(320px,100%); }
}

/* ---- ≤1024px : the hero unstacks; photography goes full width ---- */
@media (max-width:1024px){
  .scrollcue{ display:none; }

  /* One column: copy first, quote panel beneath it, both over the photograph.
     The veil turns vertical so the type still has a dark field to sit on. */
  .hero{ min-height:0; }
  .hero__inner{ padding-block:clamp(52px,8vw,80px) clamp(84px,10vw,110px); }
  .hero__veil:not([class*="--"]){
    background:linear-gradient(172deg,
      rgba(12,12,13,.9) 0%, rgba(5,40,50,.8) 34%,
      rgba(18,18,19,.62) 62%, rgba(18,18,19,.5) 100%);
  }
  .hero__img img{ object-position:62% 42%; }
  .hero__lede{ max-width:54ch; }

  .trustbar__inner{ grid-template-columns:repeat(2,1fr); gap:16px 28px; }

  /* Service rows: the description drops under the name */
  .svcrow{ grid-template-columns:44px 34px minmax(0,1fr) 26px; row-gap:6px; }
  .svcrow__num { grid-column:1; grid-row:1; }
  .svcrow__ico { grid-column:2; grid-row:1; width:34px; height:34px; }
  .svcrow__name{ grid-column:3; grid-row:1; }
  .svcrow__go  { grid-column:4; grid-row:1; }
  .svcrow__desc{ grid-column:3 / span 2; grid-row:2; max-width:none; }

  /* Mobile order: say it, then show it. The headline and pillars come first,
     the photograph closes the section with the figure sitting on it — not a
     separate card floating underneath. */
  .why__grid{ display:flex; flex-direction:column; gap:0; }
  .why__copy{ order:1; }
  .why__media{ order:2; margin-top:clamp(36px,6vw,52px); }
  .why__media .frame{
    margin-inline:calc(-1 * var(--gutter));
    border-radius:0;
  }
  .frame img{ aspect-ratio:4/3; }
  .why__badge{
    position:absolute; left:0; right:auto; bottom:0; transform:none;
    width:auto; max-width:min(320px,86%);
    padding:20px 22px 22px;
    border-radius:0 var(--r-md) 0 0;
  }
  .why__badge-num{ font-size:clamp(34px,9vw,44px); }
  .why__badge-label{ font-size:12.8px; margin-top:7px; }
  .pillars{ margin-top:36px; }

  .fleet-row{ grid-template-columns:repeat(2,1fr); row-gap:clamp(30px,5vw,48px); }

  .worktile{ aspect-ratio:16/9; }

  .concerns__pair{ grid-template-columns:1fr; gap:32px; }

  .faq__grid{ grid-template-columns:1fr; gap:40px; }
  .quote__grid{ grid-template-columns:1fr; gap:40px; }
  .footer__top{ grid-template-columns:1fr; gap:44px; }
}

/* ---- ≤1080px : collapse the nav before it can crowd ---- */
@media (max-width:1080px){
  .burger{ display:flex; }
  .header__cta,.header__tel{ display:none; }
  /* .nav is taken out of flow here, so it can no longer push the actions
     right — the actions must claim the free space themselves. */
  .header__actions{ margin-left:auto; }

  .nav{
    position:fixed; inset:0 0 0 auto; width:min(390px,88vw); z-index:110;
    background:var(--paper); color:var(--text);
    padding:100px var(--gutter) 40px;
    display:flex; flex-direction:column;
    transform:translateX(101%);
    /* visibility, not just transform: keeps the closed drawer out of the tab
       order and stops it contributing to document width */
    visibility:hidden;
    transition:transform .36s var(--ease), visibility 0s linear .36s;
    box-shadow:-30px 0 70px -34px rgba(18,18,19,.4);
    overflow-y:auto;
  }
  .nav.is-open{ transform:none; visibility:visible; transition:transform .36s var(--ease), visibility 0s; }
  .nav__list{ flex-direction:column; align-items:stretch; gap:0; }
  .nav__list li{ border-bottom:1px solid var(--line); }

  /* Menu items arrive in sequence once the panel has landed. */
  .js .nav__list li,
  .js .nav__foot{
    opacity:0; transform:translate3d(20px,0,0);
    transition:opacity .42s var(--ease-out), transform .42s var(--ease-out);
  }
  .js .nav.is-open .nav__list li,
  .js .nav.is-open .nav__foot{ opacity:1; transform:none; }
  .js .nav.is-open .nav__list li:nth-child(1){ transition-delay:.10s; }
  .js .nav.is-open .nav__list li:nth-child(2){ transition-delay:.15s; }
  .js .nav.is-open .nav__list li:nth-child(3){ transition-delay:.20s; }
  .js .nav.is-open .nav__list li:nth-child(4){ transition-delay:.25s; }
  .js .nav.is-open .nav__list li:nth-child(5){ transition-delay:.30s; }
  .js .nav.is-open .nav__list li:nth-child(6){ transition-delay:.35s; }
  .js .nav.is-open .nav__foot{ transition-delay:.40s; transform:translate3d(0,16px,0); }
  .js .nav.is-open .nav__foot{ transform:none; }
  .nav__list a{
    display:block; color:var(--navy); padding:17px 0;
    font-family:var(--f-display); font-weight:600; font-size:20px; letter-spacing:-.02em;
  }
  .nav__list a::after{ display:none; }
  .nav__foot{ display:grid; gap:14px; margin-top:auto; padding-top:32px; }
  .nav__tel{
    display:block; text-align:center; font-weight:600; font-size:17px; color:var(--navy);
  }
  .nav-backdrop{
    position:fixed; inset:0; z-index:105; background:rgba(18,18,19,.55);
    opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
  }
  .nav-backdrop.is-open{ opacity:1; pointer-events:auto; }
  body.nav-open{ overflow:hidden; }

  /* The drawer lives inside .site-header, so its z-index:110 is scoped to the
     header's own stacking context (z-index:100). The backdrop is appended to
     <body> at 105 — in the ROOT context — so it painted over the drawer and
     swallowed every tap. Lift the whole header above the backdrop while the
     menu is open; the drawer's clicks then land, and the backdrop still
     covers the page behind it. */
  body.nav-open .site-header{ z-index:120; }

  /* backdrop-filter on the stuck header creates a containing block for
     position:fixed descendants — which meant the drawer sized itself against
     the 67px header instead of the viewport and appeared cut off once the
     page was scrolled. Drop the blur while the menu is open and give the bar
     a solid fill instead; .is-stuck already swaps the logo to its dark
     artwork, so the lockup still reads. */
  body.nav-open .site-header{
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  body.nav-open .site-header.is-stuck{ background:var(--canvas); }

  /* The drawer (z-index:110) also covered the burger, so the X could not be
     tapped, and its bars are white — invisible on the light panel. Lift the
     actions above the drawer and darken the bars while the menu is open. */
  body.nav-open .header__actions{ position:relative; z-index:115; }
  body.nav-open .burger{ border-color:var(--line); }
  body.nav-open .burger span{ background:var(--charcoal); }

  .mobilebar{ display:flex; }
  .site-footer{ padding-bottom:64px; }
}

/* ---- ≤820px : the route turns vertical and the steps read as a journey ---- */
@media (max-width:820px){
  .steps-wrap{ padding-top:0; padding-left:28px; }
  .route{ top:8px; bottom:8px; left:0; right:auto; width:1px; height:auto; }
  .route__progress{
    width:100%; height:100%;
    transform:scaleY(var(--route,0)); transform-origin:top center;
  }
  .steps,.legs{ grid-template-columns:1fr; gap:0; }
  .step{ padding:22px 0; }
  .leg{ padding:22px 0; }
  .step__node{ top:28px; left:-33px; }

  .legs-wrap{ padding-top:0; padding-left:28px; }
  .route--legs{ top:8px; bottom:8px; left:0; right:auto; width:1px; height:auto; }
}

/* ---- ≤680px : phone ---- */
@media (max-width:680px){
  :root{ --header-h:70px; }
  body{ font-size:16px; }

  .hero__title{ font-size:clamp(37px,9.6vw,50px); letter-spacing:-.036em; line-height:.96; }
  .hero__lede{ margin-top:18px; font-size:16.5px; max-width:none; }
  .hero__actions{ margin-top:26px; gap:11px; }
  .hero__actions .btn{ flex:1 1 100%; }
  .hero__cta{ padding:18px 26px; }
  .hero__trust{ margin-top:26px; gap:8px 12px; }
  .hero__reviews{ font-size:13.5px; }
  /* Motion is trimmed, not removed: no drift, no float, shorter travel. */
  .js .hero.is-ready .hero__img img{ animation:none; }
  .js .hero.is-ready .quickquote{ animation:none; }
  .js .hero__eyebrow,.js .hero__lede,.js .hero__actions,
  .js .hero__trust,.js .hero .quickquote{ transform:translate3d(0,12px,0); }
  .hero__img img{ object-position:60% 40%; }

  .trustbar__inner{ grid-template-columns:1fr; gap:14px; padding-block:24px; }

  .section-head{ grid-template-columns:1fr; gap:18px; align-items:start; }
  .section-head__aside{ display:none; }
  .section-head--invert .section-head__aside,
  .reviews .section-head__aside{ display:block; }

  /* Service rows stack; the arrow keeps the row tappable end to end */
  .svcrow{
    grid-template-columns:38px minmax(0,1fr) 24px;
    padding:20px 4px; column-gap:14px; row-gap:8px;
  }
  .svcrow__num { grid-column:1; grid-row:1; }
  .svcrow__ico { display:none; }
  .svcrow__name{ grid-column:2; grid-row:1; font-size:20px; }
  .svcrow__go  { grid-column:3; grid-row:1; }
  .svcrow__desc{ grid-column:2 / span 2; grid-row:2; font-size:14.8px; }
  .svcrow:hover > *,.svcrow:focus-visible > *{ transform:none; }
  .svcrow:hover .svcrow__go{ transform:none; }

  .pillars{ grid-template-columns:1fr; }
  .pillar,.pillar:nth-child(even){ padding:20px 0; }
  .stats{ grid-template-columns:1fr 1fr; }
  .stat{ border-right:0; padding-inline:0 !important; padding-top:26px; }
  .stat:nth-child(odd){ border-right:1px solid var(--line); padding-right:20px !important; }
  .stat:nth-child(even){ padding-left:20px !important; }
  .worry{ font-size:16.5px; padding:18px 2px; }
  .answers{ padding:26px 22px; }

  /* One van per row, drawn alongside its figures */
  .fleet-row{ grid-template-columns:1fr; gap:0; }
  .vanitem{ border-bottom:1px solid var(--line-ink-2); }
  .vanitem:last-child{ border-bottom:0; }
  .vanitem__link{ display:grid; grid-template-columns:132px minmax(0,1fr); align-items:center; gap:18px; padding:18px 0; }
  .vanitem__art::after{ left:0; right:0; }
  .vanitem__meta{ border-top:0; padding-top:0; margin-top:0; }
  .vanitem__cta{ margin-top:12px; }

  .worktiles{ padding-inline:8px; }
  .worktile{ aspect-ratio:4/3; }
  .worktile__cap{ flex-direction:column; align-items:flex-start; }
  .worktile__cap .btn{ width:100%; }

  .statement{ min-height:0; }
  .statement__quote{ max-width:none; }
  .statement__actions .btn{ width:100%; }

  .reviews__foot{ flex-direction:column; align-items:stretch; gap:20px; }
  .reviews__progress{ max-width:none; }
  /* Keep the rail inside the container on phones. The edge-to-edge bleed
     reads as "designed" on desktop, but on a narrow screen it just puts the
     first quote hard against the bezel with nothing to breathe into. */
  .reviews__rail{
    margin-inline:0; padding-inline:0;
    grid-auto-columns:minmax(230px,84%);
    gap:18px;
    scroll-padding-inline-start:0;
  }
  .review{ padding:2px 0 0; border-left:0; }
  .review + .review{ border-left:1px solid var(--line-ink-2); padding-left:20px; }

  .qform__row{ grid-template-columns:1fr; gap:0; }
  .contactlist li{ grid-template-columns:1fr; gap:5px; padding:15px 0; }

  .footer__nav{ grid-template-columns:1fr 1fr; gap:32px 24px; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
}

/* Touch targets: footer and contact links measured 17–24px tall. Padding is
   added rather than font-size, so the visual rhythm is unchanged. */
@media (max-width:1080px){
  .footer__col a,
  .footer__legal a,
  .contactlist__v,
  .nav__tel{ display:inline-block; padding-block:9px; }
  .footer__col ul li,
  .footer__contact li{ margin-bottom:4px; }
  .link-arrow{ padding-block:8px 10px; }
}

@media (max-width:400px){
  .footer__nav{ grid-template-columns:1fr; }
}

@media (max-width:359px){
  .segmented{ grid-auto-flow:row; }
  .vanitem__link{ grid-template-columns:108px minmax(0,1fr); gap:14px; }
}

/* ---- Large screens: let the layout breathe rather than stretch ---- */
@media (min-width:1500px){
  :root{ --shell:1320px; --header-h:92px; }
}

/* --------------------------------------------------------------------------
   21b. MOBILE IMAGE FRAMING
   Landscape photography in a portrait box loses most of the frame. Measured on
   a 390px screen the hero was keeping only 28% of its source and the statement
   42%. These rules shorten the boxes and aim each crop at its actual subject.
   -------------------------------------------------------------------------- */
@media (max-width:700px){

  /* Hero: a shorter box so a 16:9 source is not squeezed into a 1:2 portrait,
     and the crop is aimed at the crew rather than the centre of the frame. */
  .hero{ min-height:auto; }
  .hero__inner{ padding-block:calc(var(--header-h) + 34px) 54px; }
  .hero__bg{ inset:-3% 0; }
  .hero__img img{ object-position:62% 46%; }

  /* Compact service thumbnail: fix BOTH dimensions. Letting the height stretch
     with the text is what previously made the image overflow, and it also
     changed the crop from card to card. */
  .svc-grid--compact .svccard__open{ align-items:center; }
  .svc-grid--compact .svccard__media{
    width:118px; height:118px; min-height:0; align-self:center;
  }
  /* Each source has its subject in a different place. */
  .svc-grid--compact .svccard:nth-child(1) img{ object-position:56% 50%; } /* man & van    */
  .svc-grid--compact .svccard:nth-child(2) img{ object-position:60% 55%; } /* house        */
  .svc-grid--compact .svccard:nth-child(3) img{ object-position:60% 50%; } /* office       */
  .svc-grid--compact .svccard:nth-child(4) img{ object-position:48% 50%; } /* waste        */
  .svc-grid--compact .svccard:nth-child(5) img{ object-position:50% 45%; } /* packing      */
  .svc-grid--compact .svccard:nth-child(6) img{ object-position:42% 55%; } /* dismantling  */

  /* Full-size service cards (services page): 3:2 discards less than 16:10 did */
  .svc-grid:not(.svc-grid--compact) .svccard__media{ aspect-ratio:3/2; }

  /* Work band: the source is 2.9:1, so a 4:3 box was binning half of it */
  .worktile{ aspect-ratio:16/9; }
  .worktile img{ object-position:52% 45%; }

  /* Statement: shorter band, crop aimed at the van and crew */
  .statement{ padding-block:clamp(56px,10vw,80px); }
  .statement__media img{ object-position:62% 45%; }

  /* Why frame */
  .frame img{ object-position:58% 50%; }
}

/* --------------------------------------------------------------------------
   21c. COOKIE CONSENT
   Sits above the mobile action bar and clears it, so neither covers the other.
   -------------------------------------------------------------------------- */
.cookiebar{
  position:fixed; left:0; right:0; bottom:0; z-index:140;
  background:var(--ink); color:var(--canvas);
  border-top:1px solid var(--line-ink);
  box-shadow:0 -18px 44px -24px rgba(18,18,19,.7);
  transform:translateY(101%);
  transition:transform .42s var(--ease-out);
  padding-bottom:env(safe-area-inset-bottom);
}
.cookiebar[hidden]{ display:none; }
.cookiebar.is-in{ transform:none; }
.cookiebar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(16px,3vw,44px); padding-block:clamp(16px,2vw,22px);
}
.cookiebar__title{
  font-family:var(--f-display); font-weight:600; font-size:16px;
  letter-spacing:-.015em; color:var(--canvas);
}
.cookiebar__title::before{ content:"🍪"; margin-right:9px; }
.cookiebar__text{
  margin-top:5px; font-size:14.4px; line-height:1.55;
  color:rgba(245,246,241,.72); max-width:74ch;
}
.cookiebar__text a{ color:var(--gold); border-bottom:1px solid rgba(194,161,108,.45); }
.cookiebar__text a:hover{ color:#fff; border-color:#fff; }
.cookiebar__actions{ display:flex; gap:10px; flex:none; }

/* While the bar is up, lift the sticky mobile CTA above it */
body.cookie-open .mobilebar{ bottom:var(--cookiebar-h,0px); }

@media (max-width:760px){
  .cookiebar__inner{ flex-direction:column; align-items:stretch; gap:14px; }
  .cookiebar__actions{ display:grid; grid-template-columns:1fr 1fr; }
  .cookiebar__actions .btn{ width:100%; }
}

/* --------------------------------------------------------------------------
   21d. CONTRAST CORRECTIONS
   Every pair below was measured, not eyeballed, and every one was under AA.
   They live together so that changing the palette means re-checking one block
   rather than hunting through fourteen.
   -------------------------------------------------------------------------- */

/* Gold is a 2.3:1 colour on both white and the canvas, so it can fill a shape
   but it cannot be text. Text-sized gold uses the deep tone instead. */
.req{ color:var(--gold-deep); }                  /* 5.0:1 on white   */
.stat__unit,
.stat:nth-child(2) .stat__unit,
.stat:nth-child(4) .stat__unit{ color:var(--gold-deep); }   /* 4.6:1 on canvas */

/* The muted grey reads at 4.9:1 on the light canvas but only 3.3-3.5:1 on the
   dark grounds. Dark sections get the lighter step. */
.reviews__score,
.section-head--invert .section-head__aside p{ color:var(--slate-3); }
.footer__tagline,
.footer__col a,
.footer__col address,
.footer__copy,
.footer__legal a{ color:var(--slate-3); }        /* 6.7:1 on --ink-deep */

/* Review initials: charcoal sits on the gold chips, canvas on the dark ones. */
.review:nth-child(2) .review__avatar,
.review:nth-child(3) .review__avatar,
.review:nth-child(4) .review__avatar{ color:var(--canvas); }

/* --------------------------------------------------------------------------
   20. REDUCED MOTION — the page must be complete without any animation
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .js .reveal,
  .js .reveal--title,
  .js .reveal--clip{ opacity:1; transform:none; clip-path:none; }
  .js .reveal--title .tmask{ transform:none; }
  .js .reveal--clip .plx,
  .js .reveal--clip picture{ clip-path:none; }
  .js .reveal--clip img{ transform:none; }
  .js .pillar.reveal > *{ opacity:1; transform:none; }
  .js .lmask__i{ transform:none; }
  .js .plx{ transform:none; }
  .btn--accent:hover,.btn--dark:hover,.review:hover,.social a:hover{ transform:none; }
  .trustbar__item:hover .trustbar__ico,
  .contactlist li:hover a.contactlist__v{ transform:none; }
  .scrollcue__dot{ animation:none; }
  .cookiebar{ transition:none; transform:none; }
  .svccard__open:hover{ transform:none; }
  .svccard__open:hover .svccard__media img{ transform:none; }
  .svcmodal__panel{ transform:none; }
  .svcmodal__close:hover{ transform:none; }
  .hero::after,.statement::after,.fleet::before,
  .reviews::before,.quote::before{ display:none; }
  .js .hero.is-ready .hero__img img{ animation:none; transform:scale(1.03); }
  .js .hero.is-ready .quickquote{ animation:none; translate:none; }
  .js .hero__eyebrow,.js .hero__lede,.js .hero__actions,
  .js .hero__trust,.js .hero .quickquote,
  .js .scrollcue{ opacity:1; transform:none; }
  .route__progress{ transform:none; }
  .step__node{ background:var(--amber); border-color:var(--amber); }
  .js .nav__list li,
  .js .nav__foot{ opacity:1; transform:none; }
}

/* --------------------------------------------------------------------------
   21. PRINT
   -------------------------------------------------------------------------- */
@media print{
  .site-header,.mobilebar,.quickquote,.reviews__nav,.hero__actions{ display:none !important; }
  body{ background:#fff; color:#000; }
  .hero,.fleet,.reviews,.quote,.site-footer{ background:#fff !important; color:#000 !important; }
}