/* =========================================================
   Charlton Tyre Service
   Brand system: royal blue off the building and the Falken
   signage, Falken red as the sharp accent, deep navy for
   contrast. Flat colour only, no gradients. Square edges.
   ========================================================= */

@font-face{
  font-family:'Archivo';
  src:url('assets/fonts/archivo-400-800.woff2') format('woff2');
  font-weight:400 800; font-stretch:62% 125%; font-style:normal; font-display:swap;
}
@font-face{font-family:'Barlow';src:url('assets/fonts/barlow-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow';src:url('assets/fonts/barlow-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow';src:url('assets/fonts/barlow-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}

:root{
  /* Royal blue ladder, sampled off the Torrington shed and the Falken signage */
  --royal:#0B4CCB;
  --royal-600:#0A40AC;
  --royal-700:#0A3388;
  --royal-900:#0A2E7E;

  /* Deep navy, used only where we need real contrast */
  --navy:#071431;
  --navy-2:#0C1D42;

  /* Falken red, the accent. Used sparingly and always on purpose. */
  --red:#E3002B;
  --red-600:#BE0023;

  /* Hi-vis yellow, the secondary accent. Roughly half the presence of red:
     stars, the deals band, live/interactive states. Never body text, and
     always with navy on top of it because yellow on white will not read. */
  --yellow:#FFD100;
  --yellow-600:#E5BC00;

  --white:#fff;
  --paper:#F3F5F9;
  --paper-2:#E6EAF2;
  --ink:#0A1428;
  --ink-2:#2F3A51;   /* body copy */
  /* Secondary copy. Was #6B7691, which passed AA but read as grey wash over a
     page this text-heavy. Pulled down to a slate that still recedes from --ink
     but is comfortable to read a paragraph of. */
  --muted:#4C5871;
  --line:#DCE2ED;

  --wrap:1280px;
  --gut:clamp(20px,5vw,64px);
  --r:3px;            /* everything is square-ish. workshop, not app. */
  --sh-1:0 2px 0 rgba(10,20,40,.04),0 14px 30px -22px rgba(10,20,40,.5);
  --sh-2:0 30px 60px -34px rgba(10,20,40,.6);

  --ease:cubic-bezier(.22,.61,.36,1);

  --head-h:92px;      /* utility 36 + navbar 56 at the small end */
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;
  background:var(--white);
  color:var(--ink-2);
  font-family:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
table{border-collapse:collapse;width:100%}

/* Display type: Archivo pulled in tight and heavy. That condensed cut is
   what makes the page read automotive rather than generic-startup. */
h1,h2,h3,h4{
  font-family:'Archivo',system-ui,sans-serif;
  color:var(--ink);
  margin:0;
  line-height:1;
  letter-spacing:-.005em;
  font-weight:800;
  font-stretch:80%;
  text-transform:uppercase;
}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(64px,8vw,116px)}
.section--paper{background:var(--paper)}

.skip{position:absolute;left:-9999px;top:0;z-index:400;background:var(--royal);color:#fff;padding:14px 20px}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:3px solid var(--royal);outline-offset:3px}

/* ---------- shared brand bits ---------- */
.eyebrow{
  font-family:'Archivo',sans-serif;
  font-size:12px; font-weight:700; font-stretch:88%;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--royal);
  display:flex; align-items:center; gap:12px;
  margin-bottom:18px;
}
.eyebrow--light{color:#fff}
.idx{
  font-size:11px;letter-spacing:.08em;color:#fff;background:var(--red);
  padding:4px 8px;line-height:1;
}
.eyebrow--light .idx{background:var(--red)}

/* the red keyline that sits under a heading */
.rule{display:block;width:56px;height:5px;background:var(--red);margin-bottom:24px}
.rule--light{background:var(--red)}

.sechead{max-width:64ch;margin-bottom:clamp(36px,4.5vw,60px)}
.sechead--center{max-width:56ch;margin-inline:auto;text-align:center}
.sechead--center .eyebrow{justify-content:center}
.sechead--center .rule{margin-inline:auto}
.sechead__title{font-size:clamp(2.15rem,4.8vw,3.8rem)}
.sechead__title--light{color:#fff}
.sechead__lede{margin-top:20px;font-size:clamp(1.02rem,1.3vw,1.14rem);color:var(--muted);max-width:58ch}
.sechead__lede--light{color:rgba(255,255,255,.87)}
.sechead--split{
  max-width:none;display:grid;gap:clamp(24px,4vw,64px);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:end;
}
.sechead--split .sechead__lede{margin-top:0}
@media(max-width:880px){.sechead--split{grid-template-columns:1fr}}

/* ---------- buttons: flat, square, no gradients ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border:0;border-radius:var(--r);
  font-family:'Archivo',sans-serif;font-weight:700;font-stretch:88%;
  font-size:.9rem;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  background:var(--royal);color:#fff;
  transition:background-color .22s var(--ease),color .22s var(--ease),
             box-shadow .3s var(--ease),transform .3s var(--ease);
}
/* Solid buttons lift on hover and press back down on click. Ghost buttons
   opt out of the shadow (see below) so the outline stays the story. */
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(10,20,40,.65)}
.btn:active{transform:translateY(0);box-shadow:0 6px 14px -12px rgba(10,20,40,.7);transition-duration:.06s}
.btn--sm{padding:11px 18px;font-size:.79rem;letter-spacing:.08em}
.btn--lg{padding:18px 34px;font-size:.96rem}
.btn--block{width:100%}
.btn .ico{width:16px;height:16px;fill:currentColor;flex:none}

.btn--primary{background:var(--red)}
.btn--primary:hover{background:var(--red-600)}
.btn--royal{background:var(--royal)}
.btn--royal:hover{background:var(--royal-600)}
.btn--dark{background:var(--navy)}
.btn--dark:hover{background:var(--royal)}
.btn--white{background:#fff;color:var(--royal-900)}
.btn--white:hover{background:var(--paper-2)}
.btn--ghost-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}
.btn--ghost-light:hover{box-shadow:inset 0 0 0 2px var(--yellow);background:rgba(255,209,0,.12);color:var(--yellow)}
.btn--ghost-dark{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.btn--ghost-dark:hover{box-shadow:inset 0 0 0 2px var(--royal);color:var(--royal)}
/* Ghost buttons keep their inset outline on hover/press instead of the
   drop shadow, so only the lift carries over. */
.btn--ghost-light:active{box-shadow:inset 0 0 0 2px #fff}
.btn--ghost-dark:active{box-shadow:inset 0 0 0 2px var(--royal)}

.link-arrow{
  font-family:'Archivo',sans-serif;font-weight:700;font-size:.82rem;font-stretch:88%;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--royal);text-decoration:none;
  border-bottom:2px solid var(--red);padding-bottom:3px;
  transition:color .2s;
}
.link-arrow:hover{color:var(--red)}
/* on a royal slab: white type, yellow keyline. Red on royal is the one
   colour pairing in this palette that does not hold up. */
.link-arrow--light{color:#fff;border-bottom-color:var(--yellow)}
.link-arrow--light:hover{color:var(--yellow)}

/* =========================================================
   HEADER
   A solid white bar that sits above the hero rather than
   floating over it, so the shed photo stays bright and clean.
   ========================================================= */
/* Only the white navbar sticks. The utility strip scrolls away on its own,
   which avoids the layout jump you get from collapsing a sticky element. */
.site-header{position:relative;z-index:100;background:#fff}
.utility{background:var(--navy);height:38px;overflow:hidden}
.utility__inner{display:flex;align-items:center;gap:22px;height:38px}
.utility__item{
  font-size:12.5px;color:rgba(255,255,255,.8);letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.utility__item a{text-decoration:none}
.utility__item a:hover{color:#fff}
.utility__item--push{margin-left:auto}
.utility__item--sep{padding-left:22px;border-left:1px solid rgba(255,255,255,.14)}

.status{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.9);font-weight:500}
.status__dot{width:7px;height:7px;border-radius:50%;background:#7c8aa8;flex:none}
.status[data-status="open"] .status__dot{background:#28C76F;box-shadow:0 0 0 3px rgba(40,199,111,.22)}
.status[data-status="closed"] .status__dot{background:var(--red);box-shadow:0 0 0 3px rgba(227,0,43,.22)}

.navbar{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .3s var(--ease)}
.navbar__inner{display:flex;align-items:center;gap:clamp(16px,3vw,40px);height:78px}
/* brand and actions are equal-weight flex columns, so the nav that sits
   between them lands on the true centre of the bar rather than being
   pushed around by the logo and button widths. */
.brand{flex:1 1 0;min-width:0;display:block}
.brand img{max-width:100%}
.brand img{width:clamp(158px,15vw,206px);height:auto}

.nav{display:flex;align-items:center;justify-content:center;gap:clamp(11px,1.6vw,24px);flex:0 1 auto}
.nav__link{
  position:relative;text-decoration:none;color:var(--ink);
  font-family:'Archivo',sans-serif;font-size:.79rem;font-weight:700;font-stretch:84%;
  letter-spacing:.09em;text-transform:uppercase;
  padding-block:9px;transition:color .18s;white-space:nowrap;
}
.nav__link::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .25s var(--ease);
}
.nav__link:hover{color:var(--royal)}
.nav__link:hover::after,.nav__link.is-current::after{transform:scaleX(1)}
.nav__link--soon{color:var(--muted);cursor:default}
.nav__link--soon:hover{color:var(--muted)}
.nav__link--soon:hover::after{transform:scaleX(0)}
.soon{
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  margin-left:7px;padding:2px 5px;
  background:var(--paper-2);color:var(--muted);vertical-align:1px;
}
.nav__mobile-cta{display:none}

/* sits above the open mobile drawer so the burger stays reachable */
.navbar__actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex:1 1 0;position:relative;z-index:2}

/* scrolled state: just a shadow, so nothing below the bar shifts */
.site-header.is-stuck .navbar{box-shadow:0 12px 34px -24px rgba(10,20,40,.9)}

.burger{display:none;width:44px;height:44px;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;height:2.5px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s}
.burger span+span{margin-top:6px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;isolation:isolate;min-height:min(82svh,820px);display:flex;align-items:center;overflow:hidden;background:var(--navy)}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:58% 58%}
/* A single soft wedge from the left. The shed and the sky stay bright. */
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(92deg,rgba(7,20,49,.9) 0%,rgba(7,20,49,.72) 30%,rgba(7,20,49,.28) 56%,rgba(7,20,49,0) 76%),
    linear-gradient(0deg,rgba(7,20,49,.55) 0%,rgba(7,20,49,0) 34%);
}
/* the angled royal blade, lifted from the chevron on the shed wall */
.hero__blade{
  position:absolute;top:0;bottom:0;left:clamp(-40px,2vw,40px);width:min(46vw,620px);z-index:-1;
  background:linear-gradient(90deg,rgba(11,76,203,.24),rgba(11,76,203,0));
  transform:skewX(-11deg);pointer-events:none;
}
/* Yellow rule where the photo hands over to the royal finder band. Same
   4px line that opens the deals strip and the footer, so the three of them
   read as one device holding the page together. */
.hero::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:4px;
  background:var(--yellow);z-index:1;
}
.hero__inner{padding-block:clamp(52px,7vw,92px);width:100%}
.hero__copy{max-width:720px}
.hero__title{
  color:#fff;font-size:clamp(2.6rem,6vw,4.7rem);
  font-weight:800;font-stretch:74%;letter-spacing:-.012em;line-height:.92;
}
.hero__title em{font-style:normal;color:#fff;position:relative;white-space:nowrap}
.hero__title em::after{
  content:'';position:absolute;left:0;right:0;bottom:.06em;height:.09em;background:var(--red);
}
.hero__lede{
  margin-top:32px;max-width:52ch;
  color:rgba(255,255,255,.82);font-size:clamp(1.02rem,1.4vw,1.16rem);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
/* Hero credentials: two free-standing, lightweight elements above the
   headline — no container box, no glass. A plain location line with a red
   pin, and a clean white review chip with gold stars. Light and airy. */
.hero__creds{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-bottom:24px;
}
/* Location: bare uppercase line, no background — sits right on the photo. */
.hero__loc{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Archivo',sans-serif;font-weight:700;font-stretch:88%;
  text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;
  color:#fff;text-shadow:0 1px 10px rgba(7,20,49,.5);
}
/* yellow pin against the shed photo. The red underline and the book button
   already carry the red in this block, so the pin is where yellow goes. */
.hero__loc-pin{width:15px;height:15px;fill:var(--yellow);flex:none}
/* Review chip: solid white, squared off, quietly lifted off the photo, with
   a yellow tab down the leading edge that picks up the stars inside it. */
.hero__rating{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 15px 8px 13px;border-radius:var(--r);
  border-left:4px solid var(--yellow);
  background:rgba(255,255,255,.97);text-decoration:none;
  box-shadow:0 6px 20px -10px rgba(7,20,49,.7);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.hero__rating:hover{transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(7,20,49,.75)}
/* The only four-colour mark on the site. At 15px it reads as the Google
   attribution rather than as a break in the palette, which is the whole
   reason the word could come out of the chip. */
.hero__rating-g{width:15px;height:15px;flex:none;display:block}
.hero__rating-num{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:.92rem;
  color:var(--ink);line-height:1;
}
.hero__rating-stars{display:inline-flex;gap:2px}
.hero__rating-stars svg{width:14px;height:14px}
.hero__rating-txt{
  font-family:'Barlow',sans-serif;font-weight:600;font-size:.82rem;
  color:var(--ink-2);white-space:nowrap;
}
@media(max-width:420px){
  .hero__creds{gap:12px 16px}
}

/* =========================================================
   FINDER BAND
   ========================================================= */
.band{background:var(--royal);color:#fff;position:relative;overflow:hidden}
.band::after{
  content:'';position:absolute;top:0;bottom:0;right:-60px;width:min(30vw,380px);
  background:rgba(255,255,255,.06);transform:skewX(-11deg);pointer-events:none;
}
.band__inner{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(24px,4vw,56px);align-items:center;
  padding-block:clamp(30px,3.6vw,44px);position:relative;z-index:1;
}
.band__k{
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:80%;text-transform:uppercase;
  font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.05;color:#fff;letter-spacing:-.005em;
}
.band__v{margin-top:8px;font-size:.94rem;color:rgba(255,255,255,.88);max-width:38ch}
.finder__row{display:flex;gap:10px}
.finder__input{
  flex:1;min-width:0;
  padding:16px 18px;border-radius:var(--r);border:2px solid rgba(255,255,255,.32);
  background:rgba(7,20,49,.34);color:#fff;font-size:1.02rem;font-family:'Archivo',sans-serif;
  font-weight:700;font-stretch:88%;letter-spacing:.14em;text-transform:uppercase;
  transition:border-color .18s,background-color .18s;
}
.finder__input::placeholder{color:rgba(255,255,255,.45);letter-spacing:.04em;font-weight:400;text-transform:none}
/* Yellow focus ring: the one live, in-progress moment on the page, and the
   only thing that needs to out-shout a full-bleed royal band. */
.finder__input:focus{outline:none;border-color:var(--yellow);background:rgba(7,20,49,.55);box-shadow:0 0 0 3px rgba(255,209,0,.22)}
.finder__hint{margin-top:11px;font-size:.83rem;color:rgba(255,255,255,.8)}
.finder.is-invalid .finder__input{border-color:#FFB3C0;background:rgba(227,0,43,.28)}
.finder__label{
  display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.86);margin-bottom:10px;
}
@media(max-width:880px){.band__inner{grid-template-columns:1fr;gap:24px}}

/* =========================================================
   TRUST STRIP
   ========================================================= */
.trustbar{background:#fff;border-bottom:1px solid var(--line)}
.trustbar__inner{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.6vw,36px);padding-block:clamp(26px,3vw,40px);
}
.trustbar__item+.trustbar__item{padding-left:clamp(18px,2.6vw,36px);border-left:1px solid var(--line)}
.trustbar__big{
  font-family:'Archivo',sans-serif;font-size:clamp(1.65rem,2.7vw,2.2rem);font-weight:800;
  font-stretch:80%;color:var(--ink);line-height:1;letter-spacing:-.01em;
}
.trustbar__label{margin-top:9px;font-size:.85rem;color:var(--muted);line-height:1.4;max-width:26ch}

.rating{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.rating__stars{display:inline-flex;gap:2px}
.rating__stars svg{width:17px;height:17px}
.rating__stars--lg svg{width:26px;height:26px}
.rating__num{
  font-family:'Archivo',sans-serif;font-size:clamp(1.65rem,2.7vw,2.2rem);font-weight:800;
  font-stretch:80%;color:var(--ink);line-height:1;letter-spacing:-.01em;
}
.rating__of{font-size:.5em;color:var(--muted);font-weight:700}

@media(max-width:880px){
  .trustbar__inner{grid-template-columns:repeat(2,1fr);gap:26px}
  .trustbar__item+.trustbar__item{padding-left:0;border-left:0}
  .trustbar__item:nth-child(even){padding-left:22px;border-left:1px solid var(--line)}
}
@media(max-width:520px){
  .trustbar__inner{grid-template-columns:1fr}
  .trustbar__item:nth-child(even){padding-left:0;border-left:0}
  .trustbar__item+.trustbar__item{padding-top:20px;border-top:1px solid var(--line)}
}

/* =========================================================
   SERVICE CARDS
   ========================================================= */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,1.8vw,24px)}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .25s,box-shadow .3s var(--ease);
}
.card:hover{border-color:var(--royal);box-shadow:var(--sh-1)}
.card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--navy)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
/* focus the wheel rack rather than the ceiling in the showroom shot */
.card--wheels .card__media img{object-position:22% 62%}
.card--yard .card__media img{object-position:64% 52%}
.card:hover .card__media img{transform:scale(1.05)}
.card__media::after{
  content:'';position:absolute;inset:auto 0 0;height:62%;
  background:linear-gradient(180deg,rgba(7,20,49,0),rgba(7,20,49,.78));
}
.card__tag{
  position:absolute;left:0;bottom:0;z-index:1;
  padding:12px 16px 14px;
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:80%;text-transform:uppercase;
  font-size:clamp(1.22rem,1.7vw,1.5rem);letter-spacing:.005em;color:#fff;line-height:1;
}
.card__tag::before{
  content:'';display:block;width:28px;height:4px;background:var(--red);margin-bottom:10px;
  transition:width .3s var(--ease);
}
.card:hover .card__tag::before{width:52px}
.card__body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.card__body p{font-size:.94rem;color:var(--muted)}
.ticks{margin-top:auto;padding-top:15px;border-top:1px solid var(--line);display:grid;gap:8px}
.ticks li{position:relative;padding-left:20px;font-size:.87rem;color:var(--ink-2);line-height:1.4}
.ticks li::before{
  content:'';position:absolute;left:0;top:.52em;width:9px;height:9px;background:var(--royal);
  clip-path:polygon(0 0,100% 0,100% 100%);
}
/* The card body is a flex column, so a full-width link would drag its red
   underline the whole way across. Pin it to the start instead. */
.card__body .link-arrow{align-self:flex-start;margin-top:2px}
@media(max-width:1080px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cards{grid-template-columns:1fr}}

/* =========================================================
   BRANDS / FALKEN
   ========================================================= */
.brands{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(20px,2.4vw,30px);align-items:stretch}
@media(max-width:940px){.brands{grid-template-columns:1fr}}

.flagship{
  position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r);
  background:var(--navy);color:rgba(255,255,255,.9);
  padding:clamp(30px,3.6vw,52px);
  display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(320px,34vw,420px);
}
.flagship__bg{position:absolute;inset:0;z-index:-2}
.flagship__bg img{width:100%;height:100%;object-fit:cover;object-position:56% 62%}
.flagship::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(12deg,rgba(7,20,49,.96) 0%,rgba(7,20,49,.8) 46%,rgba(10,46,126,.42) 100%);
}
/* Flagship dealer is a status flag, same as ON NOW on the deals band, so it
   takes the yellow. The red diamonds in the list below keep the balance. */
.flagship__rank{
  font-family:'Archivo',sans-serif;font-size:11px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--navy);background:var(--yellow);padding:6px 11px;align-self:flex-start;
  margin-bottom:18px;
}
.flagship__brand{color:#fff;font-size:clamp(2.4rem,5vw,3.9rem);font-stretch:76%;line-height:.92}
.flagship__for{margin-top:16px;color:rgba(255,255,255,.88);font-size:1rem;max-width:44ch}
.flagship__list{
  margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;
}
@media(max-width:560px){.flagship__list{grid-template-columns:1fr}}
.flagship__list li{position:relative;padding-left:20px;font-size:.92rem;color:rgba(255,255,255,.82)}
.flagship__list li::before{
  content:'';position:absolute;left:0;top:.5em;width:9px;height:9px;background:var(--red);
  clip-path:polygon(0 0,100% 0,100% 100%);
}

.brandside{display:grid;gap:clamp(20px,2.4vw,30px);align-content:start}
.tier{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,2.6vw,32px);
}
.tier__rank{
  font-family:'Archivo',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--royal);margin-bottom:12px;
}
.tier__brand{font-size:clamp(1.5rem,2.3vw,1.95rem);font-stretch:78%}
.tier__for{margin-top:12px;color:var(--muted);font-size:.94rem}
.tier__list{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:9px}
.tier__list li{position:relative;padding-left:20px;font-size:.89rem;color:var(--ink-2)}
.tier__list li::before{
  content:'';position:absolute;left:0;top:.5em;width:9px;height:9px;background:var(--royal);
  clip-path:polygon(0 0,100% 0,100% 100%);
}

.alsostock{
  margin-top:clamp(26px,3vw,40px);padding-top:26px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;
}
.alsostock__label{
  font-family:'Archivo',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
}
.alsostock__list{display:flex;flex-wrap:wrap;gap:8px}
/* Yellow leading edge on each chip. On paper, yellow only works as a solid
   block, never as type. */
.alsostock__list li{
  font-family:'Archivo',sans-serif;font-size:.8rem;font-weight:700;font-stretch:88%;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
  padding:9px 15px;border-radius:var(--r);background:var(--white);
  border:1px solid var(--line);border-left:3px solid var(--yellow);
}

/* =========================================================
   BRAND MARKS
   Two brands are supplied as real artwork, Falken and Dunlop.
   Everything else is SET IN TYPE rather than dressed up in
   borrowed logos, because a wall of scraped artwork is how a
   tyre shop ends up claiming dealerships it does not hold.
   The notched corner and the uppercase pairing are lifted from
   Falken's own Wildpeak pages, so a customer who has just come
   off falkentyre.com.au lands somewhere familiar.
   ========================================================= */

/* A mark standing in for heading text. The alt carries the brand
   name, so the heading still says "Falken" to Google and to a
   screen reader while the eye gets the logo. */
.brandmark{display:block;width:auto;height:auto}
.sechead__title--mark .brandmark{max-height:clamp(38px,4.4vw,58px);max-width:min(340px,72%)}
.flagship__brand--mark .brandmark{max-height:clamp(30px,3.6vw,44px);max-width:min(280px,68%)}

/* ---------- the slim strip: homepage ----------
   A trust row, not a section. Says who we carry in one line and
   then gets out of the way of the cards underneath. */
.bstrip{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px clamp(22px,3.2vw,44px);
  margin-bottom:clamp(28px,3.2vw,42px);
  padding:clamp(16px,1.9vw,24px) clamp(20px,2.4vw,32px);
  background:var(--white);border:1px solid var(--line);
  border-left:3px solid var(--yellow);border-radius:var(--r);
}
.bstrip__lab{
  font-family:'Archivo',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
}
.bstrip__i{display:flex;align-items:center}
.bstrip__i img{height:24px;width:auto;object-fit:contain;display:block}
/* Dunlop's yellow field IS the logo, so it keeps its block and is
   sized down a touch to sit level with the marks that do not have one. */
.bstrip__i img.is-block{height:34px;border-radius:2px}
.bstrip__w{
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:76%;
  font-size:1.15rem;line-height:1;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink-2);
}
@media(max-width:560px){
  .bstrip{justify-content:center;text-align:center}
  .bstrip__lab{width:100%}
}

/* ---------- the wall: /brands ----------
   Six tiles on the royal band. Sits between the page hero and the
   Falken deep-dive, so the page reads range first, then detail. */
.bwall{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.5vw,20px);margin-top:clamp(30px,3.4vw,44px);
}
@media(max-width:900px){.bwall{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.bwall{grid-template-columns:1fr}}

.bwall__i{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;
  background:var(--white);padding:clamp(20px,2.2vw,28px);
  /* the cut corner. 20px off the top right, the one shape on this
     page that is not square, and it is the Falken nod. A border would
     get sliced open by the clip, so the tile lifts off the paper with
     a shadow instead. */
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%);
  box-shadow:var(--sh-1);
  transition:transform .32s var(--ease);
}
.bwall__i:hover{transform:translateY(-3px)}

/* Six different aspect ratios line up on a common baseline because the
   mark sits in a fixed-height band rather than sizing the row itself. */
.bwall__mark{display:flex;align-items:center;min-height:44px;margin-bottom:18px}
.bwall__mark img{max-height:32px;width:auto;max-width:80%;object-fit:contain;display:block}
.bwall__mark img.is-block{max-height:46px;border-radius:2px}
.bwall__w{
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:76%;
  font-size:clamp(1.5rem,2.4vw,1.9rem);line-height:1;
  text-transform:uppercase;color:var(--ink);
}
/* The role label is the last thing in the tile, so it is pushed to the
   bottom and the six line up regardless of how tall each mark sits. */
.bwall__k{
  margin-top:auto;
  font-family:'Archivo',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  padding:6px 11px;border-left:3px solid var(--line);background:var(--paper);
}
/* The flagship gets the yellow flag, same as it does on the homepage
   card, so the one real dealer relationship is the thing that stands out. */
.bwall__i--flag .bwall__k{
  color:var(--navy);background:var(--yellow);border-left-color:var(--yellow-600);
}

/* =========================================================
   SPLIT MEDIA PANELS
   Two full-bleed photographs doing the talking.
   ========================================================= */
.duo{display:grid;grid-template-columns:1fr 1fr}
@media(max-width:760px){.duo{grid-template-columns:1fr}}
.panel{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(340px,38vw,520px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(28px,3.4vw,52px);
  text-decoration:none;color:#fff;
}
.panel img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .8s var(--ease)}
.panel--yard img{object-position:62% 50%}
.panel::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(7,20,49,.34) 0%,rgba(7,20,49,.2) 40%,rgba(7,20,49,.88) 100%);
  transition:background .35s;
}
.panel:hover img{transform:scale(1.05)}
.panel:hover::before{background:linear-gradient(180deg,rgba(10,33,96,.5) 0%,rgba(7,20,49,.4) 40%,rgba(7,20,49,.92) 100%)}
.panel__k{
  font-family:'Archivo',sans-serif;font-size:11px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:#fff;background:var(--red);padding:6px 11px;align-self:flex-start;
  margin-bottom:16px;
}
.panel__t{
  color:#fff;font-family:'Archivo',sans-serif;font-weight:800;font-stretch:76%;
  text-transform:uppercase;letter-spacing:-.005em;
  font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:.95;
}
.panel__v{margin-top:14px;color:rgba(255,255,255,.9);font-size:.98rem;max-width:36ch}
.panel__go{
  margin-top:20px;font-family:'Archivo',sans-serif;font-weight:700;font-stretch:88%;
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  display:inline-flex;align-items:center;gap:10px;
}
.panel__go::after{content:'';width:26px;height:2px;background:var(--red);transition:width .3s var(--ease)}
.panel:hover .panel__go::after{width:46px}
.panel+.panel{border-left:2px solid #fff}
@media(max-width:760px){.panel+.panel{border-left:0;border-top:2px solid #fff}}

/* =========================================================
   OFFERS STRIP
   ========================================================= */
.offers{background:var(--navy);color:#fff;position:relative;overflow:hidden}
/* Deals band. Yellow does the work here instead of red: it is the one strip
   that changes month to month, so it should read as the live one. */
.offers::before{content:'';position:absolute;inset:0 0 auto;height:4px;background:var(--yellow)}
.offers::after{
  content:'';position:absolute;top:0;bottom:0;right:-50px;width:min(26vw,320px);
  background:rgba(11,76,203,.32);transform:skewX(-11deg);
}
.offers__inner{
  display:flex;align-items:center;gap:clamp(20px,4vw,48px);flex-wrap:wrap;
  padding-block:clamp(26px,3vw,40px);position:relative;z-index:1;
}
.offer{flex:1;min-width:min(100%,320px)}
.offer__flag{
  display:inline-block;font-family:'Archivo',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;
  background:var(--yellow);color:var(--navy);padding:5px 11px;margin-bottom:12px;
}
.offer__text{
  font-family:'Archivo',sans-serif;font-size:clamp(1.2rem,2.1vw,1.7rem);
  font-weight:800;font-stretch:80%;text-transform:uppercase;line-height:1.1;color:#fff;
}
.offer__fine{margin-top:10px;font-size:.86rem;color:rgba(255,255,255,.78)}

/* =========================================================
   OFFROAD / VIDEO BAND
   ========================================================= */
.offroad{position:relative;isolation:isolate;background:var(--navy);overflow:hidden}
.offroad__bg{position:absolute;inset:0;z-index:-2}
.offroad__bg img{width:100%;height:100%;object-fit:cover;opacity:.42}
.offroad::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(7,20,49,.97) 0%,rgba(7,20,49,.9) 40%,rgba(10,33,96,.66) 74%,rgba(10,33,96,.44) 100%);
}
.offroad__inner{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(36px,5vw,72px);align-items:center}
.offroad .sechead__title{font-size:clamp(2rem,3.4vw,2.85rem)}
.feats{margin-block:clamp(26px,3.2vw,38px);display:grid;gap:0}
.feats li{
  display:grid;grid-template-columns:minmax(180px,.8fr) 1.2fr;gap:16px;
  padding-block:16px;border-top:1px solid rgba(255,255,255,.16);
}
.feats li:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
/* Same marker device as the contact details and the footer headings, so the
   spec rows read as part of one system rather than a one-off. */
.feats__k{
  font-family:'Archivo',sans-serif;font-weight:700;font-stretch:86%;color:#fff;
  font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;
  display:flex;align-items:baseline;gap:10px;
}
.feats__k::before{
  content:'';width:8px;height:8px;flex:none;background:var(--yellow);
  clip-path:polygon(0 0,100% 0,100% 100%);
}
.feats__v{color:rgba(255,255,255,.82);font-size:.93rem}
@media(max-width:1000px){.offroad__inner{grid-template-columns:1fr}}
@media(max-width:560px){.feats li{grid-template-columns:1fr;gap:4px}}

.offroad__video{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;align-items:stretch}
.facade{
  position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;
  border-radius:var(--r);overflow:hidden;background:var(--navy-2);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.95);
}
.facade img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .6s var(--ease),opacity .3s}
.facade:hover img{transform:scale(1.04);opacity:.9}
.facade__play{
  position:absolute;inset:0;margin:auto;width:74px;height:74px;border-radius:50%;
  background:var(--red);display:grid;place-items:center;
  box-shadow:0 14px 34px -10px rgba(227,0,43,.8);
  transition:transform .28s var(--ease),background-color .2s;
}
.facade:hover .facade__play{transform:scale(1.08);background:var(--red-600)}
.facade__play svg{width:28px;height:28px;fill:#fff;margin-left:3px}
.facade__play--sm{width:46px;height:46px}
.facade__play--sm svg{width:18px;height:18px}
.facade__cap{
  position:absolute;left:16px;bottom:14px;
  font-family:'Archivo',sans-serif;font-size:.74rem;font-weight:700;font-stretch:88%;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.9);
}
.facade--main{grid-column:1/-1;grid-row:1}
.facade--mini{grid-column:2;grid-row:2}
.facade--mini img{height:100%;aspect-ratio:auto;min-height:170px}
.facade--mini .facade__cap{font-size:.62rem;left:12px;bottom:10px}

.callout{
  grid-column:1;grid-row:2;
  padding:24px 26px;border-radius:var(--r);
  background:var(--royal);
}
.callout__k{
  font-family:'Archivo',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--yellow);margin-bottom:10px;
}
.callout__v{color:rgba(255,255,255,.82);font-size:.92rem}
.callout__a{
  display:inline-block;margin-top:14px;text-decoration:none;
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:82%;font-size:1.24rem;color:#fff;
  border-bottom:3px solid rgba(255,209,0,.55);padding-bottom:2px;transition:border-color .2s;
}
.callout__a:hover{border-color:var(--yellow)}

@media(max-width:560px){
  .offroad__video{grid-template-columns:1fr}
  .facade--main,.facade--mini,.callout{grid-column:1;grid-row:auto}
  .facade--mini img{aspect-ratio:16/9}
}

/* =========================================================
   WHY CHARLTON
   ========================================================= */
.why__inner{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(36px,5.5vw,84px);align-items:center}
.why__media{position:relative}
.why__media img{
  border-radius:var(--r);width:100%;aspect-ratio:4/5;object-fit:cover;object-position:38% 66%;
}
/* The 1970 plaque: yellow on navy type, like a shed sign rather than a badge. */
.why__stamp{
  position:absolute;left:-18px;bottom:-22px;
  background:var(--yellow);color:var(--navy);padding:18px 22px;text-align:left;
}
.why__stamp span{
  display:block;font-family:'Archivo',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:rgba(7,20,49,.72);
}
.why__stamp strong{
  display:block;font-family:'Archivo',sans-serif;font-size:2.1rem;font-weight:800;
  font-stretch:78%;letter-spacing:-.01em;line-height:1.1;
}
@media(max-width:900px){
  .why__inner{grid-template-columns:1fr}
  .why__stamp{left:auto;right:14px;bottom:-18px;padding:14px 18px}
  .why__stamp strong{font-size:1.6rem}
}

.reasons{
  margin-top:clamp(26px,3.2vw,38px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,20px);
  counter-reset:reason;
}
.reason{
  counter-increment:reason;position:relative;
  padding:20px 20px 22px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);
  border-top:3px solid var(--royal);
  transition:border-color .25s,box-shadow .3s var(--ease),transform .3s var(--ease);
}
.reason:hover{border-color:var(--royal);box-shadow:var(--sh-1);transform:translateY(-3px)}
.reason dt{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:.95rem;font-stretch:86%;
  letter-spacing:.02em;line-height:1.2;
  color:var(--ink);margin-bottom:8px;padding-right:38px;
}
.reason dt::before{
  content:counter(reason,decimal-leading-zero);
  position:absolute;top:16px;right:18px;
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:78%;
  font-size:1.5rem;line-height:1;color:var(--line);letter-spacing:-.02em;
}
.reason dd{margin:0;color:var(--muted);font-size:.92rem;line-height:1.5}
@media(max-width:560px){.reasons{grid-template-columns:1fr}}

/* =========================================================
   REVIEWS
   ========================================================= */
.reviews__summary{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  margin-bottom:clamp(32px,4vw,50px);
}
.reviews__score{font-size:1rem;color:var(--muted)}
.reviews__score strong{
  font-family:'Archivo',sans-serif;font-size:1.3rem;font-weight:800;font-stretch:82%;color:var(--ink);
}
/* Google review wall: two rows that auto-scroll in opposite directions.
   The marquee never pauses on hover, by design. Each track is duplicated
   in JS so the -50% translate loops seamlessly. Edge fades keep it tidy. */
.gwall{
  display:grid;gap:clamp(14px,1.8vw,22px);
  margin-inline:calc(var(--gut) * -1);           /* bleed to the section edge */
  padding-block:2px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.gwall__row{overflow:hidden}
.gwall__track{
  display:flex;gap:clamp(14px,1.8vw,22px);width:max-content;
  padding-inline:calc(clamp(14px,1.8vw,22px) / 2);
  will-change:transform;
}
/* Negative delays start both rows already part-way through, so the wall
   is visibly moving the instant it scrolls into view rather than sitting
   flush against the edge and then "coming in". */
.gwall__row[data-row="1"] .gwall__track{animation:gwall-l 64s linear infinite;animation-delay:-18s}
.gwall__row[data-row="2"] .gwall__track{animation:gwall-r 72s linear infinite;animation-delay:-40s}
@keyframes gwall-l{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes gwall-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}

.grev{
  flex:0 0 clamp(300px,80vw,360px);
  /* Fixed footprint so every card is the same size regardless of how long
     the review is — short and long quotes read as one consistent grid. */
  min-height:200px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px 24px;display:flex;flex-direction:column;gap:14px;
  box-shadow:var(--sh-1);
}
.grev__head{display:flex;align-items:center;gap:13px}
.grev__avatar{
  width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:82%;font-size:1.1rem;color:#fff;
}
.grev__who{min-width:0;flex:1}
.grev__name{
  font-family:'Archivo',sans-serif;font-weight:700;font-stretch:88%;font-size:.98rem;
  color:var(--ink);letter-spacing:.005em;line-height:1.15;
}
.grev__time{font-size:.8rem;color:var(--muted);margin-top:2px}
.grev__g{width:20px;height:20px;flex:none;align-self:flex-start}
.grev__stars{display:inline-flex;gap:2px}
/* matched to the summary stars above the wall, not Google's own gold */
.grev__stars svg{width:16px;height:16px;fill:var(--yellow)}
.grev__text{font-size:.94rem;color:var(--ink-2);line-height:1.55}

@media(prefers-reduced-motion:reduce){
  .gwall__track{animation:none!important;flex-wrap:wrap;justify-content:center}
  .gwall{-webkit-mask-image:none;mask-image:none}
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact{background:var(--royal-900);color:rgba(255,255,255,.87);padding-bottom:0;position:relative;overflow:hidden}
.contact::after{
  content:'';position:absolute;top:0;bottom:0;left:-80px;width:min(34vw,440px);
  background:rgba(255,255,255,.035);transform:skewX(-11deg);pointer-events:none;
}
.contact .sechead__title{font-size:clamp(1.95rem,3.7vw,3rem)}
.contact__inner{
  display:grid;grid-template-columns:1fr .92fr;gap:clamp(36px,5vw,80px);
  align-items:start;padding-bottom:clamp(60px,7vw,96px);position:relative;z-index:1;
}
@media(max-width:960px){.contact__inner{grid-template-columns:1fr}}

.infogrid{display:grid;grid-template-columns:1fr 1fr;gap:26px 32px;margin-top:clamp(28px,3.4vw,42px)}
.infogrid__block--wide{grid-column:1/-1}
.infogrid__k{
  font-family:'Archivo',sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:#fff;margin-bottom:9px;
  display:flex;align-items:center;gap:9px;
}
.infogrid__k::before{content:'';width:9px;height:9px;background:var(--yellow);clip-path:polygon(0 0,100% 0,100% 100%)}
.infogrid__v{font-size:1.06rem;color:#fff;font-weight:500;word-break:break-word}
/* same rule as the callout link: on deep blue, the underline is yellow */
.infogrid__v a{text-decoration:none;border-bottom:2px solid rgba(255,209,0,.45);transition:border-color .2s}
.infogrid__v a:hover{border-color:var(--yellow)}
@media(max-width:520px){.infogrid{grid-template-columns:1fr}}

.hours tr{border-top:1px solid rgba(255,255,255,.14)}
.hours tr:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.hours th,.hours td{padding-block:11px;text-align:left;font-weight:400;font-size:.96rem}
.hours th{color:rgba(255,255,255,.82)}
.hours td{text-align:right;color:#fff;font-variant-numeric:tabular-nums}
.hours tr.is-today th,.hours tr.is-today td{color:#fff;font-weight:500}
/* "Today" is a live state, same family as the ON NOW flag on the deals band */
.hours tr.is-today th::after{
  content:'Today';font-family:'Archivo',sans-serif;font-size:9px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  margin-left:10px;padding:3px 7px;background:var(--yellow);color:var(--navy);vertical-align:2px;
}

.socials{display:flex;gap:10px;margin-top:30px}
.socials a{
  width:44px;height:44px;border-radius:var(--r);display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.24);transition:background-color .22s,border-color .22s;
}
.socials a:hover{background:var(--yellow);border-color:var(--yellow)}
.socials svg{width:19px;height:19px;fill:#fff;transition:fill .22s}
.socials a:hover svg{fill:var(--navy)}

.contact__panel{position:relative}
.form{background:var(--white);border-radius:var(--r);padding:clamp(26px,3vw,40px);box-shadow:var(--sh-2)}
.form__title{font-size:1.35rem}
.form__sub{margin-top:10px;color:var(--muted);font-size:.94rem;margin-bottom:24px}
.field{margin-bottom:16px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:480px){.field-row{grid-template-columns:1fr}}
.field label{
  display:block;font-family:'Archivo',sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin-bottom:7px;
}
.opt{font-weight:500;color:var(--muted);letter-spacing:.08em;text-transform:none;font-size:10.5px}
.field input,.field textarea{
  width:100%;padding:13px 15px;border-radius:var(--r);
  border:1.5px solid var(--line);background:var(--paper);
  font-family:inherit;font-size:1rem;color:var(--ink);
  transition:border-color .18s,background-color .18s,box-shadow .18s;
}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--royal);background:var(--white);
  box-shadow:0 0 0 3px rgba(11,76,203,.15);
}
.field.is-invalid input,.field.is-invalid textarea{border-color:var(--red);background:#FFF5F7}
.field__err{margin-top:6px;font-size:.8rem;color:var(--red-600)}
.form__note{margin-top:14px;font-size:.86rem;color:var(--muted);text-align:center}
.form__note a{color:var(--royal);font-weight:600}
.form__note.is-ok{color:#0C7B57;font-weight:500}
.form__note.is-err{color:var(--red-600);font-weight:500}

.mapstrip{position:relative;height:clamp(280px,32vw,400px);background:var(--navy)}
.mapstrip iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.4) contrast(1.05)}
.mapstrip__cta{position:absolute;right:clamp(16px,4vw,44px);bottom:clamp(16px,3vw,32px);box-shadow:var(--sh-2)}

/* =========================================================
   FOOTER
   ========================================================= */
/* A yellow keyline off the bottom of the map, bookending the same line that
   opens the deals band. It also stops the map and the footer merging. */
.site-footer{
  background:var(--navy);color:rgba(255,255,255,.78);
  padding-top:clamp(52px,6vw,80px);border-top:4px solid var(--yellow);
}
.footer__top{
  display:grid;grid-template-columns:1.15fr 1.6fr;gap:clamp(34px,5vw,72px);
  padding-bottom:clamp(38px,5vw,60px);
}
.footer__brand img{width:206px;margin-bottom:22px}
.footer__brand p{font-size:.93rem;max-width:38ch}
.footer__nav{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px)}
.footer__nav div{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.footer__h{
  font-family:'Archivo',sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:#fff;margin-bottom:4px;
  display:flex;align-items:center;gap:9px;
}
.footer__h::before{content:'';width:8px;height:8px;background:var(--yellow);clip-path:polygon(0 0,100% 0,100% 100%)}
.footer__nav a{text-decoration:none;font-size:.92rem;color:rgba(255,255,255,.78);transition:color .2s;line-height:1.45}
.footer__nav a:hover{color:var(--yellow)}
.footer__nav a[aria-disabled="true"]{color:rgba(255,255,255,.32);cursor:default}
.footer__nav a[aria-disabled="true"]:hover{color:rgba(255,255,255,.32)}
@media(max-width:860px){
  .footer__top{grid-template-columns:1fr}
  .footer__nav{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:460px){.footer__nav{grid-template-columns:1fr}}

.footer__bottom{
  display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;
  padding-block:22px;border-top:1px solid rgba(255,255,255,.1);
  font-size:.82rem;color:rgba(255,255,255,.42);
}
.footer__legal{display:inline-flex;flex-wrap:wrap;gap:4px 18px;margin-left:18px}
.footer__legal a{color:rgba(255,255,255,.62);text-decoration:none}
.footer__legal a:hover{color:#fff;text-decoration:underline}
@media (max-width:640px){.footer__legal{display:flex;margin:8px 0 0}}
.footer__by a{color:rgba(255,255,255,.8);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.22)}
.footer__by a:hover{color:#fff}

/* =========================================================
   LIGHTBOX
   The [hidden] rule must come after the display rule, otherwise the
   closed lightbox stays a full-screen invisible layer at z-index 300
   and swallows every hover, click and text selection on the page.
   ========================================================= */
.lightbox{
  position:fixed;inset:0;z-index:300;
  background:rgba(4,10,26,.95);
  display:grid;place-items:center;padding:clamp(16px,5vw,60px);
  opacity:0;transition:opacity .25s var(--ease);
}
.lightbox[hidden]{display:none}
.lightbox.is-open{opacity:1}
.lightbox__frame{width:100%;max-width:1080px;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#000}
.lightbox__frame iframe{width:100%;height:100%;border:0}
.lightbox__close{
  position:absolute;top:clamp(12px,3vw,28px);right:clamp(12px,3vw,28px);
  width:48px;height:48px;border-radius:var(--r);border:0;
  background:var(--red);color:#fff;font-size:26px;line-height:1;cursor:pointer;
  transition:background-color .2s;
}
.lightbox__close:hover{background:var(--red-600)}

/* =========================================================
   REVEAL ON SCROLL
   ========================================================= */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* =========================================================
   RESPONSIVE NAV
   ========================================================= */
.hide-lg-down{display:none}
@media(min-width:1400px){.hide-lg-down{display:inline-flex}}

@media(max-width:1080px){
  .burger{display:block}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(88vw,400px);
    background:var(--navy);
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:0;padding:110px 32px 40px;margin:0;
    transform:translateX(100%);transition:transform .38s var(--ease);
    box-shadow:-30px 0 80px -30px rgba(0,0,0,.9);
    overflow-y:auto;
  }
  .nav.is-open{transform:none}
  /* dark bars would vanish against the open navy drawer */
  .nav.is-open ~ .navbar__actions .burger span{background:#fff}
  .nav__link{
    font-size:1.08rem;padding-block:17px;
    border-bottom:1px solid rgba(255,255,255,.12);color:#fff;
  }
  .nav__link::after{display:none}
  .nav__link:hover{color:#fff}
  .nav__link.is-current{color:#fff;border-bottom-color:var(--red)}
  .nav__link--soon,.nav__link--soon:hover{color:rgba(255,255,255,.62)}
  .nav .soon{background:rgba(255,255,255,.12);color:rgba(255,255,255,.85)}
  .nav__mobile-cta{display:grid;gap:11px;margin-top:28px}
  /* nav is a fixed drawer, so nothing pushes the call + burger over.
     margin-left:auto pins them to the right of the bar. The equal-flex
     centring columns from the desktop bar are undone here, otherwise the
     logo shrinks to share space with a nav that is not even in the flow. */
  .brand{flex:none}
  .navbar__actions{flex:none;margin-left:auto}
  .navbar__actions .btn--sm .btn__label{display:none}
  .navbar__actions .btn--sm{width:44px;height:44px;padding:0}
  .navbar__actions .btn--sm .ico{width:18px;height:18px}
  body.nav-open{overflow:hidden}
  .nav-scrim{position:fixed;inset:0;z-index:99;background:rgba(7,20,49,.65);opacity:0;transition:opacity .3s}
  .nav-scrim.is-on{opacity:1}
}

@media(max-width:760px){
  .utility__item--push{display:none}
  .utility__item--sep{
    margin-left:auto;padding-left:0;border-left:0;
    font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .utility__postcode{display:none}
  .hero{min-height:min(74svh,680px)}
  .hero__cta .btn{flex:1;min-width:170px}
}

@media(max-width:520px){
  .finder__row{flex-direction:column}
  .finder__input{text-align:center}
  .finder__row .btn{justify-content:center}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .wizard__steps{transition:none}
  .wstep{transition:none}
}

/* =========================================================
   INTERIOR PAGES
   Everything below is shared by /tyres, /mechanical,
   /truck-mobile, /about and /contact. Same brand system as the
   homepage: flat colour, square edges, red keyline under the
   eyebrow, yellow rule where a dark band hands over.
   ========================================================= */

/* ---------- page hero ----------
   A shorter cousin of the homepage hero. Identical furniture
   (photo, navy wedge, skewed royal blade, yellow bottom rule) so
   the pages read as one site, with the photo doing the work of
   telling you which page you are on. */
.phero{
  position:relative;isolation:isolate;overflow:hidden;background:var(--navy);
  display:flex;align-items:flex-end;min-height:clamp(300px,38vw,440px);
}
.phero__media{position:absolute;inset:0;z-index:-2}
.phero__media img{width:100%;height:100%;object-fit:cover;object-position:center}
.phero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(92deg,rgba(7,20,49,.93) 0%,rgba(7,20,49,.8) 34%,rgba(7,20,49,.42) 64%,rgba(7,20,49,.1) 90%),
    linear-gradient(0deg,rgba(7,20,49,.6) 0%,rgba(7,20,49,0) 52%);
}
.phero__blade{
  position:absolute;top:0;bottom:0;left:clamp(-40px,2vw,40px);width:min(46vw,620px);z-index:-1;
  background:linear-gradient(90deg,rgba(11,76,203,.26),rgba(11,76,203,0));
  transform:skewX(-11deg);pointer-events:none;
}
.phero::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:4px;
  background:var(--yellow);z-index:1;
}
.phero__inner{padding-block:clamp(44px,6vw,80px);width:100%}
.phero__copy{max-width:760px}
.phero__title{
  color:#fff;font-size:clamp(2.25rem,5vw,3.9rem);
  font-weight:800;font-stretch:74%;letter-spacing:-.012em;line-height:.94;
}
.phero__title em{font-style:normal;position:relative;white-space:nowrap}
.phero__title em::after{
  content:'';position:absolute;left:0;right:0;bottom:.06em;height:.09em;background:var(--red);
}
.phero__lede{
  margin-top:22px;max-width:56ch;
  color:rgba(255,255,255,.9);font-size:clamp(1rem,1.3vw,1.12rem);
}
.phero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3vw,36px)}
@media(max-width:760px){
  .phero{min-height:min(60svh,420px)}
  .phero__cta .btn{flex:1;min-width:170px}
}

/* ---------- generic media + copy split ---------- */
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,76px);align-items:center}
.split__media{position:relative}
.split__media img{width:100%;border-radius:var(--r);aspect-ratio:4/3;object-fit:cover}
.split--tall .split__media img{aspect-ratio:4/5}
/* for a source that is already panoramic, so a 4/3 crop is not throwing
   away the sides of a shot that was framed wide on purpose */
.split--wide .split__media img{aspect-ratio:3/2}
.split--flip .split__media{order:2}
@media(max-width:900px){
  .split{grid-template-columns:1fr}
  .split--flip .split__media{order:0}
}

/* ---------- tiles: the workhorse card for a list of offerings ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,24px)}
.tiles--2{grid-template-columns:repeat(2,1fr)}
.tile{
  background:var(--white);border:1px solid var(--line);border-top:3px solid var(--royal);
  border-radius:var(--r);padding:24px 22px 26px;display:flex;flex-direction:column;
  transition:border-color .25s,box-shadow .3s var(--ease),transform .3s var(--ease);
}
.tile:hover{border-color:var(--royal);box-shadow:var(--sh-1);transform:translateY(-3px)}
.tile__k{
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:86%;font-size:1.02rem;
  color:var(--ink);text-transform:uppercase;letter-spacing:.01em;line-height:1.15;margin-bottom:10px;
}
.tile__v{font-size:.93rem;color:var(--muted);line-height:1.55}
.tile .ticks{margin-top:16px}
@media(max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.tiles,.tiles--2{grid-template-columns:1fr}}

/* two-up tick list for the wider blocks */
.ticks--cols{grid-template-columns:1fr 1fr;gap:8px 24px}
@media(max-width:600px){.ticks--cols{grid-template-columns:1fr}}

/* ---------- numbered process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,32px);counter-reset:step}
.steps--3{grid-template-columns:repeat(3,1fr)}
.step{counter-increment:step;padding-top:20px;border-top:3px solid var(--line)}
.step::before{
  content:counter(step,decimal-leading-zero);display:block;margin-bottom:12px;
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:78%;
  font-size:1.7rem;line-height:1;color:var(--royal);letter-spacing:-.02em;
}
.step__k{
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:86%;font-size:1rem;
  color:var(--ink);text-transform:uppercase;line-height:1.2;margin-bottom:8px;
}
.step__v{font-size:.92rem;color:var(--muted);line-height:1.55}
.steps--light .step{border-top-color:rgba(255,255,255,.22)}
.steps--light .step::before{color:var(--yellow)}
.steps--light .step__k{color:#fff}
.steps--light .step__v{color:rgba(255,255,255,.85)}
@media(max-width:900px){.steps,.steps--3{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps,.steps--3{grid-template-columns:1fr}}

/* ---------- price / inclusion rows ----------
   Only carries numbers the workshop has actually quoted. Anything
   that moves with the vehicle stays a "from" or a plain dash. */
.pricelist{display:grid;border-top:1px solid var(--line)}
.price{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 28px;
  padding-block:22px;border-bottom:1px solid var(--line);
}
.price__k{
  grid-column:1;font-family:'Archivo',sans-serif;font-weight:800;font-stretch:86%;
  font-size:1.05rem;color:var(--ink);text-transform:uppercase;line-height:1.2;
}
.price__v{grid-column:1;font-size:.93rem;color:var(--muted);max-width:62ch;line-height:1.55}
.price__p{
  grid-column:2;grid-row:1/span 2;align-self:center;text-align:right;white-space:nowrap;
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:80%;
  font-size:1.35rem;color:var(--royal);line-height:1.1;
}
.price__p small{
  display:block;font-family:'Barlow',sans-serif;font-weight:500;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:3px;
}
/* Rows without a real number. Kept quiet so the one price on the page is
   the only thing set in big royal type. */
.price__p--soft{
  font-family:'Barlow',sans-serif;font-weight:600;font-size:.86rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
@media(max-width:560px){
  .price{grid-template-columns:1fr}
  .price__p{grid-column:1;grid-row:auto;text-align:left;margin-top:8px}
}

/* ---------- FAQ ---------- */
/* min() on the track floor, otherwise the 340px minimum outgrows a phone
   viewport and the cards get clipped by the body's overflow-x:hidden. */
.faqs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:14px;align-items:start}
.qa{
  background:var(--white);border:1px solid var(--line);border-left:3px solid var(--royal);
  border-radius:var(--r);transition:box-shadow .3s var(--ease)}
.qa[open]{box-shadow:var(--sh-1)}
.qa>summary{
  list-style:none;cursor:pointer;position:relative;padding:18px 54px 18px 20px;
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:86%;font-size:1rem;
  color:var(--ink);line-height:1.3;
}
.qa>summary::-webkit-details-marker{display:none}
.qa>summary::after{
  content:'';position:absolute;right:22px;top:50%;width:10px;height:10px;
  border-right:2.5px solid var(--royal);border-bottom:2.5px solid var(--royal);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease);
}
.qa[open]>summary::after{transform:translateY(-30%) rotate(-135deg)}
.qa__a{padding:0 20px 20px;font-size:.94rem;color:var(--muted);line-height:1.6}
.qa__a p+p{margin-top:10px}

/* ---------- closing call to action ---------- */
.endcta{background:var(--royal);color:#fff;position:relative;overflow:hidden}
.endcta::after{
  content:'';position:absolute;top:0;bottom:0;right:-60px;width:min(30vw,380px);
  background:rgba(255,255,255,.06);transform:skewX(-11deg);pointer-events:none;
}
.endcta__inner{
  position:relative;z-index:1;padding-block:clamp(46px,5.6vw,78px);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,4vw,56px);align-items:center;
}
.endcta__t{color:#fff;font-size:clamp(1.75rem,3.2vw,2.6rem);line-height:1.02}
.endcta__v{margin-top:14px;color:rgba(255,255,255,.9);max-width:46ch;font-size:1rem}
.endcta__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
@media(max-width:880px){
  .endcta__inner{grid-template-columns:1fr}
  .endcta__cta{justify-content:flex-start}
  .endcta__cta .btn{flex:1;min-width:180px}
}

/* ---------- people ---------- */
.people{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,24px)}
.person{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 24px 28px;border-top:3px solid var(--red);
}
.person__r{
  font-family:'Archivo',sans-serif;font-weight:700;font-stretch:88%;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--royal);margin-bottom:10px;
}
.person__n{
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:82%;font-size:1.5rem;
  color:var(--ink);text-transform:uppercase;line-height:1;margin-bottom:12px;
}
.person__v{font-size:.94rem;color:var(--muted);line-height:1.6}
@media(max-width:600px){.people{grid-template-columns:1fr}}

/* ---------- coverage list ---------- */
.towns{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(22px,2.6vw,32px)}
.towns li{
  padding:9px 15px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r);font-family:'Archivo',sans-serif;font-weight:700;font-stretch:88%;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;
}

/* ---------- running body copy under a lede ---------- */
.prose p{margin-top:16px;color:var(--muted)}
.morelink{margin-top:clamp(22px,2.6vw,32px)}

/* ---------- inline note strip ---------- */
.note{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;
  margin-top:clamp(26px,3vw,38px);padding:18px 22px;
  background:var(--paper);border-left:4px solid var(--yellow);border-radius:var(--r);
}
.note--onblue{background:rgba(255,255,255,.08);border-left-color:var(--yellow)}
.note__k{
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:86%;font-size:.9rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
}
.note--onblue .note__k{color:#fff}
.note__v{font-size:.93rem;color:var(--muted);flex:1;min-width:min(100%,260px)}
.note--onblue .note__v{color:rgba(255,255,255,.88)}

/* =========================================================
   INTERIOR PAGE COMPONENTS
   Each interior page gets its own section shapes so the set does
   not read as one template with the words swapped. Anything below
   is used on one or two pages only, never on all of them.
   ========================================================= */

/* ---------- hero fact line ----------
   Replaces the pair of buttons that used to sit under every page
   hero. The header already carries Call and Find my tyres, so the
   hero gives you orientation instead of a third copy of them. */
.phero__meta{
  display:flex;flex-wrap:wrap;gap:16px clamp(24px,3.4vw,52px);
  margin-top:clamp(24px,3vw,34px);padding-top:20px;
  border-top:1px solid rgba(255,255,255,.2);max-width:760px;
}
.phero__meta li{display:grid;gap:3px}
.phero__meta b{
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:86%;
  font-size:.95rem;line-height:1.1;color:#fff;text-transform:uppercase;letter-spacing:.01em;
}
.phero__meta span{font-size:.83rem;line-height:1.4;color:rgba(255,255,255,.8)}

/* ---------- closing tyre finder ----------
   Sits directly above the footer on every interior page, in the slot
   the old closing CTA used. Navy rather than the royal band on the
   homepage, so the two do not read as the same strip twice. */
.endfinder{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.endfinder::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--yellow);
}
.endfinder::after{
  content:'';position:absolute;top:0;bottom:0;right:-70px;width:min(32vw,420px);
  background:rgba(11,76,203,.28);transform:skewX(-11deg);pointer-events:none;
}
.endfinder__inner{
  position:relative;z-index:1;padding-block:clamp(50px,6vw,84px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(28px,4.5vw,64px);align-items:center;
}
.endfinder__t{color:#fff;font-size:clamp(1.7rem,3vw,2.45rem);line-height:1.02}
.endfinder__v{margin-top:14px;color:rgba(255,255,255,.88);max-width:46ch;font-size:1rem}
.endfinder__or{
  margin-top:20px;font-size:.9rem;color:rgba(255,255,255,.78);
}
.endfinder__or a{
  color:#fff;font-weight:600;text-decoration:none;
  border-bottom:2px solid rgba(255,209,0,.5);transition:border-color .2s;
}
.endfinder__or a:hover{border-color:var(--yellow)}
.endfinder__card{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r);padding:clamp(22px,2.6vw,32px);
}
@media(max-width:880px){.endfinder__inner{grid-template-columns:1fr}}

/* =========================================================
   CONTACT: the wizard enquiry form
   ========================================================= */
.wizard{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-2);overflow:hidden;
}

/* step rail */
.wizard__rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  background:var(--navy);
}
.wrail{
  padding:16px clamp(12px,1.6vw,22px);position:relative;
  border-left:1px solid rgba(255,255,255,.1);
}
.wrail:first-child{border-left:0}
.wrail__n{
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:78%;font-size:.95rem;
  color:rgba(255,255,255,.42);line-height:1;
}
.wrail__k{
  margin-top:6px;font-family:'Archivo',sans-serif;font-weight:700;font-stretch:88%;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.42);line-height:1.2;
}
.wrail::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--yellow);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.wrail.is-done .wrail__n,.wrail.is-done .wrail__k{color:rgba(255,255,255,.86)}
.wrail.is-done::after{transform:scaleX(1);background:var(--royal)}
.wrail.is-on .wrail__n{color:var(--yellow)}
.wrail.is-on .wrail__k{color:#fff}
.wrail.is-on::after{transform:scaleX(1)}
@media(max-width:760px){
  .wizard__rail{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(5,1fr)}
  .wrail{padding:12px 8px;text-align:center}
  .wrail__k{display:none}
  .wrail__n{font-size:.85rem}
}

/* steps
   .wizard__steps is a height-animated viewport. JS sets an explicit height
   on it for the length of a step change and clears it afterwards, so the
   card grows and shrinks smoothly instead of snapping. overflow is only
   clipped while it is moving, otherwise it would cut off the chip focus
   rings, which sit 3px outside the chip. */
.wizard__form{padding:clamp(26px,3.4vw,48px)}
.wizard__steps{transition:height .38s var(--ease)}
.wizard__steps.is-moving{overflow:hidden}
.wstep{border:0;padding:0;margin:0;min-width:0;transition:opacity .16s linear,transform .34s var(--ease)}
.wstep[hidden]{display:none}
.wstep.is-out{opacity:0}
.wstep.is-in{opacity:0;transform:translateY(14px)}

/* running count above the multi-select chips, so it is obvious that more
   than one answer is allowed and that picking one will not move you on */
.chips__count{
  font-family:'Archivo',sans-serif;font-weight:700;font-stretch:88%;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin-bottom:12px;transition:color .2s var(--ease);
}
.chips__count.is-on{color:var(--royal)}
.wstep__k{
  font-family:'Archivo',sans-serif;font-weight:700;font-stretch:88%;font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--royal);margin-bottom:10px;
}
/* focused programmatically when a step changes, purely to move the reading
   position. The heading itself is the cue, so no ring is needed. */
.wstep__q{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.02}
.wstep__q:focus{outline:none}
.wstep__h{margin-top:12px;color:var(--muted);font-size:.96rem;max-width:56ch}
.wstep__body{margin-top:clamp(22px,2.6vw,32px)}

/* selectable chips */
.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));gap:12px}
.chips--wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.chip{
  position:relative;display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  padding:16px 18px;background:var(--paper);border:1.5px solid var(--line);
  border-radius:var(--r);transition:border-color .2s,background-color .2s,transform .2s var(--ease);
}
.chip:hover{border-color:var(--royal);transform:translateY(-2px)}
/* .field label styles the little uppercase field captions, and the contact
   preference chips live inside a .field. Put the chip back the way it was. */
.field .chip{
  display:flex;margin-bottom:0;color:inherit;
  font-family:inherit;font-size:inherit;letter-spacing:normal;text-transform:none;
}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip__box{display:block;
  flex:none;width:20px;height:20px;margin-top:1px;border-radius:2px;
  border:2px solid var(--line);background:#fff;position:relative;transition:border-color .2s,background-color .2s;
}
.chip--radio .chip__box{border-radius:50%}
.chip__box::after{
  content:'';position:absolute;left:5px;top:1px;width:6px;height:11px;
  border-right:2.5px solid #fff;border-bottom:2.5px solid #fff;
  transform:rotate(42deg) scale(.4);opacity:0;transition:opacity .18s,transform .18s var(--ease);
}
.chip--radio .chip__box::after{left:4px;top:4px;width:8px;height:8px;border:0;border-radius:50%;background:#fff;transform:scale(.4)}
.chip__t{display:grid;gap:3px;min-width:0}
.chip__k{
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:88%;font-size:.92rem;
  text-transform:uppercase;color:var(--ink);line-height:1.15;
}
.chip__v{font-size:.84rem;color:var(--muted);line-height:1.4}
.chip:has(input:checked){border-color:var(--royal);background:rgba(11,76,203,.06)}
.chip:has(input:checked) .chip__box{border-color:var(--royal);background:var(--royal)}
.chip:has(input:checked) .chip__box::after{opacity:1;transform:rotate(42deg) scale(1)}
.chip--radio:has(input:checked) .chip__box::after{transform:scale(1)}
.chip:has(input:focus-visible){outline:3px solid var(--royal);outline-offset:3px}
.chips.is-invalid .chip{border-color:var(--red)}

/* the review panel on the last step */
.wsum{
  margin-top:clamp(24px,3vw,34px);border-top:1px solid var(--line);padding-top:22px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:18px 28px;
}
.wsum__k{
  font-family:'Archivo',sans-serif;font-weight:700;font-stretch:88%;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;
}
.wsum__v{font-size:.95rem;color:var(--ink);line-height:1.45}

/* footer controls */
.wizard__nav{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin-top:clamp(26px,3.2vw,38px);padding-top:24px;border-top:1px solid var(--line);
}
/* .btn is display:inline-flex, which outranks the UA rule for [hidden] */
.wizard__nav .btn[hidden]{display:none}
.wizard__nav .btn--next,.wizard__nav .btn--send{margin-left:auto}
.wizard__note{width:100%;font-size:.86rem;color:var(--muted);margin-top:4px}
.wizard__note a{color:var(--royal);font-weight:600}
.wizard__note.is-err{color:var(--red-600);font-weight:500}
.wizard__note.is-ok{color:#0C7B57;font-weight:500}
@media(max-width:520px){
  .wizard__nav .btn{flex:1;min-width:130px}
  .wizard__nav .btn--next,.wizard__nav .btn--send{margin-left:0}
}

/* the done panel that replaces the form after a send */
.wdone{text-align:center;padding:clamp(30px,4vw,54px) 0}
.wdone__t{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.wdone__v{margin-top:14px;color:var(--muted);max-width:52ch;margin-inline:auto}
.wdone__v a{color:var(--royal);font-weight:600}

/* =========================================================
   CONTACT: three ways to reach the yard
   ========================================================= */
.reach{background:var(--royal-900);color:rgba(255,255,255,.87);position:relative;overflow:hidden;padding-bottom:0}
.reach::after{
  content:'';position:absolute;top:0;bottom:0;left:-80px;width:min(34vw,440px);
  background:rgba(255,255,255,.035);transform:skewX(-11deg);pointer-events:none;
}
.reach__inner{position:relative;z-index:1;padding-bottom:clamp(56px,6.5vw,90px)}
.reach__ways{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px);
  margin-bottom:clamp(34px,4vw,52px);
}
.way{
  border-top:3px solid var(--yellow);padding-top:22px;display:flex;flex-direction:column;
}
.way__n{
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:78%;font-size:1.6rem;
  line-height:1;color:rgba(255,255,255,.35);margin-bottom:12px;
}
.way__k{color:#fff;font-size:1.25rem;margin-bottom:10px}
.way__v{font-size:.93rem;color:rgba(255,255,255,.84);line-height:1.55;margin-bottom:18px}
.way__a{
  margin-top:auto;font-family:'Archivo',sans-serif;font-weight:800;font-stretch:86%;
  font-size:1.05rem;color:#fff;text-decoration:none;text-transform:uppercase;
  border-bottom:2px solid rgba(255,209,0,.5);align-self:flex-start;transition:border-color .2s,color .2s;
}
.way__a:hover{border-color:var(--yellow);color:var(--yellow)}
.way__fine{margin-top:12px;font-size:.82rem;color:rgba(255,255,255,.7)}
@media(max-width:820px){.reach__ways{grid-template-columns:1fr}}

.reach__detail{
  display:grid;grid-template-columns:1fr .92fr;gap:clamp(34px,5vw,72px);align-items:start;
  border-top:1px solid rgba(255,255,255,.16);padding-top:clamp(34px,4vw,52px);
}
@media(max-width:960px){.reach__detail{grid-template-columns:1fr}}

/* =========================================================
   TYRES: brand ladder
   Three rungs read top to bottom rather than the homepage's
   flagship-plus-two arrangement, so the page is not a reprint.
   ========================================================= */
.ladder{border-top:2px solid var(--ink)}
.rung{
  display:grid;grid-template-columns:215px minmax(0,1fr) minmax(0,1.05fr);
  gap:16px clamp(22px,3vw,48px);padding-block:clamp(26px,3vw,40px);
  border-bottom:1px solid var(--line);align-items:start;
}
.rung--top{background:linear-gradient(90deg,rgba(11,76,203,.07),rgba(11,76,203,0) 62%)}
.rung__rank{
  font-family:'Archivo',sans-serif;font-weight:700;font-stretch:88%;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--royal);margin-bottom:10px;
}
.rung--top .rung__rank{color:var(--red)}
.rung__brand{font-size:clamp(1.5rem,2.4vw,2rem);line-height:1}
.rung__for{font-size:.95rem;color:var(--muted);line-height:1.55}
.rung__list{display:grid;gap:9px}
.rung__list li{position:relative;padding-left:20px;font-size:.9rem;color:var(--ink-2);line-height:1.45}
.rung__list li::before{
  content:'';position:absolute;left:0;top:.52em;width:9px;height:9px;
  background:var(--royal);clip-path:polygon(0 0,100% 0,100% 100%);
}
.rung--top .rung__list li::before{background:var(--red)}
@media(max-width:900px){
  .rung{grid-template-columns:1fr}
  .rung__head{margin-bottom:2px}
}

/* ---------- TYRES: what the quote includes ---------- */
/* Fixed at three across, not auto-fit: six items into a four column track
   leaves two empty cells showing the grid line colour. */
.incl{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
@media(max-width:900px){.incl{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.incl{grid-template-columns:1fr}}
.incl__i{background:var(--white);padding:26px 24px 28px;counter-increment:incl}
.incl__n{
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:78%;font-size:1.5rem;
  line-height:1;color:var(--royal);margin-bottom:12px;
}
.incl__k{
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:86%;font-size:.95rem;
  text-transform:uppercase;color:var(--ink);line-height:1.2;margin-bottom:8px;
}
.incl__v{font-size:.9rem;color:var(--muted);line-height:1.5}

/* =========================================================
   MECHANICAL: vertical booking timeline
   ========================================================= */
.tline{display:grid;gap:0;max-width:900px;counter-reset:tl}
.tl{
  counter-increment:tl;position:relative;padding:0 0 clamp(26px,3vw,40px) clamp(58px,7vw,84px);
}
.tl::before{
  content:counter(tl);position:absolute;left:0;top:0;
  width:clamp(38px,4.4vw,50px);height:clamp(38px,4.4vw,50px);
  display:grid;place-items:center;border-radius:50%;
  background:var(--royal);color:#fff;
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:80%;font-size:1.05rem;
}
.tl::after{
  content:'';position:absolute;left:calc(clamp(38px,4.4vw,50px) / 2 - 1px);
  top:clamp(38px,4.4vw,50px);bottom:0;width:2px;background:var(--line);
}
.tl:last-child{padding-bottom:0}
.tl:last-child::after{display:none}
.tl__k{font-size:1.15rem;margin-bottom:8px;padding-top:clamp(4px,.6vw,10px)}
.tl__v{font-size:.95rem;color:var(--muted);line-height:1.6;max-width:60ch}
.tl__t{
  display:inline-block;margin-top:10px;padding:5px 11px;background:var(--paper);
  font-family:'Archivo',sans-serif;font-weight:700;font-stretch:88%;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--royal);border-radius:var(--r);
}

/* =========================================================
   TRUCK & MOBILE
   ========================================================= */
/* service area band */
.areaband{background:var(--paper);border-block:1px solid var(--line)}
.areaband__inner{
  padding-block:clamp(34px,4vw,52px);display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);align-items:center;
}
.areaband__k{
  font-family:'Archivo',sans-serif;font-weight:700;font-stretch:88%;font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--royal);margin-bottom:10px;
}
.areaband__t{font-size:clamp(1.35rem,2.2vw,1.85rem);line-height:1.05}
.areaband__v{margin-top:12px;font-size:.94rem;color:var(--muted);max-width:44ch}
.arealist{display:flex;flex-wrap:wrap;gap:9px}
.arealist li{
  padding:9px 15px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  font-family:'Archivo',sans-serif;font-weight:700;font-stretch:88%;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
}
.arealist li:first-child{background:var(--royal);border-color:var(--royal);color:#fff}
@media(max-width:820px){.areaband__inner{grid-template-columns:1fr}}

/* what we look after: wide rows with a spec strip */
.cover{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cov{
  background:var(--white);display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:14px clamp(24px,3.4vw,52px);padding:clamp(24px,3vw,34px) clamp(22px,2.6vw,32px);
  transition:background-color .25s;
}
.cov:hover{background:var(--paper)}
.cov__k{font-size:1.3rem;line-height:1.05;margin-bottom:10px}
.cov__v{font-size:.94rem;color:var(--muted);line-height:1.58}
.cov__specs{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;align-content:start}
.cov__s dt{
  font-family:'Archivo',sans-serif;font-weight:700;font-stretch:88%;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;
}
.cov__s dd{margin:0;font-size:.92rem;color:var(--ink);font-weight:500;line-height:1.35}
@media(max-width:820px){.cov{grid-template-columns:1fr}}
@media(max-width:420px){.cov__specs{grid-template-columns:1fr}}

/* on site: dark section, videos left, checklist right */
.onsite{background:var(--navy);color:rgba(255,255,255,.86);position:relative;overflow:hidden}
.onsite::after{
  content:'';position:absolute;top:0;bottom:0;right:-90px;width:min(38vw,520px);
  background:rgba(11,76,203,.22);transform:skewX(-11deg);pointer-events:none;
}
.onsite__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4.5vw,68px);align-items:center}
.onsite__media{display:grid;gap:14px}
.onsite__media .facade{width:100%}
.onsite__pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* the facade and callout carry placement rules for the homepage grid; this
   pair is its own two-up, so unpick them */
.onsite__pair>.facade,.onsite__pair>.callout{grid-column:auto;grid-row:auto}
.onsite__pair>.facade img{height:100%;aspect-ratio:auto;min-height:180px}
.onsite__pair>.facade .facade__cap{font-size:.62rem;left:12px;bottom:10px}
@media(max-width:520px){.onsite__pair{grid-template-columns:1fr}}
.onsite__kit{display:grid;gap:0;margin-top:clamp(24px,3vw,34px)}
.kit{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;
  padding-block:16px;border-top:1px solid rgba(255,255,255,.16);
}
.kit:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.kit__n{
  grid-row:1/span 2;font-family:'Archivo',sans-serif;font-weight:800;font-stretch:78%;
  font-size:1.15rem;color:var(--yellow);line-height:1.2;
}
.kit__k{
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:88%;font-size:.95rem;
  text-transform:uppercase;color:#fff;line-height:1.2;
}
.kit__v{font-size:.9rem;color:rgba(255,255,255,.82);line-height:1.5}
@media(max-width:960px){.onsite__inner{grid-template-columns:1fr}}

/* FAQ beside a standing info card */
/* One shape for the FAQ block on every service page: the aside on the left,
   the questions on the right. The card is the narrow, fixed, sticky column so
   it stays with you while the accordion grows and shrinks under your thumb.

   The questions stay FIRST in the source and get placed into column 2, rather
   than the card being written first and reordered on mobile. Reading order and
   tab order then match the stacked layout for free, and the visual swap costs
   two grid-column declarations that only exist above 900px. */
.faqside{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(28px,4vw,56px);align-items:start}
.faqside .faqs{grid-template-columns:1fr;grid-column:2;grid-row:1}
.faqside .readycard{grid-column:1;grid-row:1}
.readycard{
  background:var(--navy);color:#fff;border-radius:var(--r);padding:clamp(26px,3vw,34px);
  position:sticky;top:calc(var(--head-h) + 20px);
}
.readycard__k{
  font-family:'Archivo',sans-serif;font-weight:700;font-stretch:88%;font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--yellow);margin-bottom:12px;
}
.readycard__t{color:#fff;font-size:1.35rem;line-height:1.08;margin-bottom:16px}
.readycard__list{display:grid;gap:10px;margin-bottom:22px}
.readycard__list li{position:relative;padding-left:20px;font-size:.92rem;color:rgba(255,255,255,.87);line-height:1.45}
/* the card is a fixed narrow column, so a two-word-too-long button label has
   to wrap inside it instead of running past the edge */
.readycard .btn--block{white-space:normal;text-align:center;line-height:1.2}
.readycard__list li::before{
  content:'';position:absolute;left:0;top:.5em;width:9px;height:9px;background:var(--yellow);
  clip-path:polygon(0 0,100% 0,100% 100%);
}
/* Stacked, the source order takes over: questions first, then the card as a
   follow-up rather than a wall in front of the answers. */
@media(max-width:900px){
  .faqside{grid-template-columns:1fr}
  .faqside .faqs,.faqside .readycard{grid-column:auto;grid-row:auto}
  .readycard{position:static}
}

/* the card's own call to action, when it is a form link rather than the phone */
.readycard__note{
  margin-top:12px;font-size:.82rem;color:rgba(255,255,255,.72);line-height:1.5;text-align:center;
}
.readycard__note a{color:var(--yellow);text-decoration:none;border-bottom:1px solid rgba(255,214,0,.4)}
.readycard__note a:hover{border-bottom-color:var(--yellow)}

/* =========================================================
   ABOUT
   ========================================================= */
/* the years, as a horizontal run rather than another photo split */
.era{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,32px);
  border-top:2px solid var(--ink);padding-top:clamp(26px,3vw,38px);
}
.era__i{position:relative;padding-right:12px}
.era__y{
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:76%;
  font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1;color:var(--royal);
  letter-spacing:-.02em;margin-bottom:14px;
}
.era__i:first-child .era__y{color:var(--red)}
.era__k{
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:86%;font-size:.95rem;
  text-transform:uppercase;color:var(--ink);line-height:1.2;margin-bottom:8px;
}
.era__v{font-size:.92rem;color:var(--muted);line-height:1.55}
@media(max-width:900px){.era{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.era{grid-template-columns:1fr;gap:26px}}

/* the four rules, set big and numbered */
.creed{display:grid;counter-reset:creed;border-top:1px solid var(--line)}
.creed__i{
  counter-increment:creed;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.25fr);
  gap:10px clamp(22px,3vw,46px);padding-block:clamp(24px,3vw,36px);
  border-bottom:1px solid var(--line);align-items:baseline;
}
.creed__i::before{
  content:counter(creed,decimal-leading-zero);
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:76%;font-size:1.5rem;
  color:var(--line);line-height:1;
}
.creed__k{font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.1}
.creed__v{font-size:.95rem;color:var(--muted);line-height:1.6}
@media(max-width:820px){
  .creed__i{grid-template-columns:auto minmax(0,1fr)}
  .creed__v{grid-column:2}
}

/* =========================================================
   INTERIOR PAGES v2
   The first pass at the inner pages used one composition for
   every section: heading left, lede right, grid of white
   boxes under it. Correct, but by the third section there was
   nothing new for the eye to land on.

   What follows is the vocabulary that breaks that rhythm. It
   holds the brand rules exactly as they were: flat colour, no
   gradients anywhere, 3px radius, red keyline under headings,
   the skewed royal blade, red triangle bullets. The variety
   comes from composition and scale, not from new decoration.
   ========================================================= */

/* ---------- colset: sticky heading beside a scrolling column
     The heading parks itself while its list moves past. One
     device, and it does more for the "this is not a template"
     feeling than any amount of motion. Falls back to a plain
     stack under 980px, where sticky is worse than useless. */
.colset{
  display:grid;grid-template-columns:minmax(0,370px) minmax(0,1fr);
  gap:clamp(32px,5vw,88px);align-items:start;
}
.colset__head{position:sticky;top:calc(var(--head-h) + 32px)}
.colset__head .sechead{margin-bottom:0;max-width:none}
/* The section heading scale is set for a full width row. Dropped into a
   340px sticky column it runs to six lines, so it steps down here. */
.colset__head .sechead__title{font-size:clamp(1.95rem,2.7vw,2.55rem)}
.colset__head .sechead__lede{max-width:34ch}
.colset__foot{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.colset--light .colset__foot{border-top-color:rgba(255,255,255,.16)}
@media(max-width:980px){
  .colset{grid-template-columns:1fr;gap:clamp(28px,4vw,40px)}
  .colset__head{position:static}
  .colset__head .sechead__lede{max-width:58ch}
}

/* ---------- band: the dark punctuation section
     The inner pages alternated white and paper the whole way
     down and never went dark, so nothing ever punctuated. One
     band per page, no more, otherwise it stops being a break. */
.slab{
  position:relative;overflow:hidden;color:#fff;
  background:var(--navy);padding-block:clamp(60px,7.5vw,104px);
}
.slab--royal{background:#082761}
.slab--deep{background:#0A2E7E}
.slab__blade{
  position:absolute;top:0;bottom:0;right:-8%;width:46%;
  background:rgba(255,255,255,.04);transform:skewX(-11deg);pointer-events:none;
}
.slab--royal .slab__blade{background:rgba(255,255,255,.06)}
.slab__rule{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--yellow)}
.slab .sechead__title{color:#fff}
/* Interior headings sit in narrower columns than the homepage ones, so let
   the browser even out the lines rather than pinning them with a hard <br>.
   The homepage keeps its hand-set breaks. */
.slab .sechead__title,.colset .sechead__title,.mosaic .sechead__title{text-wrap:balance}
.slab .sechead__lede{color:rgba(255,255,255,.87)}
.slab .eyebrow{color:#fff}
/* the red keyline goes yellow on a royal band, where red on blue is muddy
   and the yellow ties the heading to the rule along the bottom edge */
.slab .rule{background:var(--yellow)}
.slab__inner{position:relative;z-index:1}

/* photo-backed band. Reuses the workshop photography we already
   have rather than asking for shots that do not exist yet. */
.slab--photo{background:var(--navy)}
.slab--photo .slab__bg{
  position:absolute;inset:0;pointer-events:none;
}
.slab--photo .slab__bg img{width:100%;height:100%;object-fit:cover;opacity:.22}
.slab--photo .slab__scrim{
  position:absolute;inset:0;background:rgba(7,20,49,.82);pointer-events:none;
}

/* ---------- fcard: the tile, rebuilt
     Same content as .tile but with an index numeral, an icon
     and a royal blade that wipes down the left edge on hover,
     so a grid of six stops reading as six identical boxes. */
.fcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.fcards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fcards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fcard{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,2.3vw,30px);
  transition:border-color .25s var(--ease),box-shadow .32s var(--ease),transform .32s var(--ease);
}
.fcard::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--royal);
  transform:scaleY(0);transform-origin:top;transition:transform .42s var(--ease);
}
.fcard:hover{border-color:var(--royal);box-shadow:var(--sh-1);transform:translateY(-3px)}
.fcard:hover::before{transform:scaleY(1)}
.fcard__n{
  position:absolute;top:14px;right:18px;
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:74%;
  font-size:2.6rem;line-height:1;color:var(--paper-2);pointer-events:none;
  transition:color .3s var(--ease);
}
.fcard:hover .fcard__n{color:rgba(11,76,203,.16)}
.fcard__ico{width:34px;height:34px;color:var(--royal);margin-bottom:16px;flex:none}
.fcard__k{font-size:1.05rem;letter-spacing:.005em;position:relative}
/* only reserve room beside the heading when a numeral is actually sitting
   there, otherwise short headings wrap for nothing */
.fcard__n ~ .fcard__k{padding-right:40px}
.fcard__v{margin-top:10px;font-size:.93rem;color:var(--muted);line-height:1.55}
.fcard .ticks{margin-top:16px}
/* On the services index the whole card is the link, so the arrow is the
   affordance rather than a link buried in a line of text inside it. */
a.fcard--link{text-decoration:none}
.fcard__go{
  margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:9px;
  font-family:'Archivo',sans-serif;font-weight:700;font-stretch:84%;font-size:.78rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--royal);
}
.fcard__go::after{
  content:'';width:15px;height:2px;background:var(--royal);flex:none;
  transition:width .28s var(--ease);
}
a.fcard--link:hover .fcard__go::after{width:26px}
/* Beside a sticky heading there is only ever about two thirds of the row
   left, so three columns squeezes the headings onto two lines. Two columns
   inside a colset, three when the grid has the full width. */
.colset .fcards{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1000px){.fcards,.fcards--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.colset .fcards{grid-template-columns:1fr}}
@media(max-width:640px){.fcards,.fcards--2,.fcards--4{grid-template-columns:1fr}}

/* dark variant, for cards sitting on a band */
.slab .fcard{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.slab .fcard:hover{border-color:var(--yellow);background:rgba(255,255,255,.08)}
.slab .fcard::before{background:var(--yellow)}
.slab .fcard__k{color:#fff}
.slab .fcard__v{color:rgba(255,255,255,.85)}
.slab .fcard__n{color:rgba(255,255,255,.1)}
.slab .fcard:hover .fcard__n{color:rgba(255,209,0,.22)}
.slab .fcard__ico{color:var(--yellow)}
.slab .ticks{border-top-color:rgba(255,255,255,.16)}
.slab .ticks li{color:rgba(255,255,255,.9)}
.slab .ticks li::before{background:var(--yellow)}

/* ---------- mosaic: photography that is not another 50/50 split
     Two photos at different sizes with a yellow stat plate on
     the corner. Built to reuse the shots already in the folder,
     since every image we have is on the site somewhere. */
.mosaic{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(30px,5vw,78px);align-items:center;
}
.mosaic--flip .mosaic__media{order:2}
.mosaic__media{position:relative;padding:0 clamp(30px,4vw,56px) clamp(30px,4vw,56px) 0}
.mosaic__main{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.mosaic__inset{
  position:absolute;right:0;bottom:0;width:54%;
  border:7px solid var(--mosaic-frame,#fff);border-radius:var(--r);
  box-shadow:var(--sh-1);overflow:hidden;
}
.mosaic__inset img{width:100%;aspect-ratio:1/1;object-fit:cover}
.mosaic__plate{
  position:absolute;left:0;bottom:clamp(30px,4vw,56px);
  background:var(--yellow);color:var(--navy);padding:14px 20px;border-radius:var(--r);
  max-width:60%;
}
.mosaic__plate b{
  display:block;font-family:'Archivo',sans-serif;font-weight:800;font-stretch:74%;
  font-size:1.6rem;line-height:1;
}
.mosaic__plate span{
  display:block;margin-top:5px;font-family:'Archivo',sans-serif;font-weight:700;
  font-stretch:88%;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
}
.section--paper .mosaic{--mosaic-frame:var(--paper)}
.slab .mosaic{--mosaic-frame:var(--navy)}
.slab--royal .mosaic{--mosaic-frame:var(--royal-900)}
@media(max-width:900px){
  .mosaic{grid-template-columns:1fr}
  .mosaic--flip .mosaic__media{order:0}
  .mosaic__media{padding:0 40px 40px 0}
}
@media(max-width:520px){
  .mosaic__media{padding:0 0 34px 0}
  .mosaic__inset{width:46%;right:0;border-width:5px}
  .mosaic__plate{position:static;margin-top:14px;max-width:none;display:inline-block}
}

/* ---------- pull: the statement that breaks a run of text
     Set at display scale with the red keyline above it. Used
     once per page at most, where the page has a point to make
     rather than a list to get through. */
.pull{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  gap:clamp(24px,4vw,64px);align-items:end;
  border-top:5px solid var(--red);padding-top:clamp(24px,3vw,38px);
}
.pull__t{font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1.04;color:var(--ink)}
.slab .pull__t{color:#fff}
.slab .pull{border-top-color:var(--yellow)}
.pull__v{font-size:1rem;color:var(--muted);line-height:1.62}
.slab .pull__v{color:rgba(255,255,255,.86)}
@media(max-width:820px){.pull{grid-template-columns:1fr;gap:20px}}

/* ---------- spec: label and value rows
     For the things that are genuinely a table, like what is in
     a fit or what an alignment measures. Hairline rows read
     faster than another grid of cards. */
.spec{display:grid;gap:0;border-top:1px solid var(--line)}
.spec__r{
  display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  gap:clamp(16px,3vw,48px);align-items:baseline;
  padding:clamp(16px,1.8vw,22px) 0;border-bottom:1px solid var(--line);
  transition:background-color .25s var(--ease);
}
.spec__r:hover{background:rgba(11,76,203,.03)}
.spec__k{
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:80%;
  font-size:1.02rem;color:var(--ink);text-transform:uppercase;letter-spacing:.01em;
}
.spec__v{font-size:.95rem;color:var(--muted);line-height:1.55}
.slab .spec,.slab .spec__r{border-color:rgba(255,255,255,.16)}
.slab .spec__k{color:#fff}
.slab .spec__v{color:rgba(255,255,255,.86)}
.slab .spec__r:hover{background:rgba(255,255,255,.04)}
@media(max-width:680px){
  .spec__r{grid-template-columns:1fr;gap:6px}
}

/* ---------- numline: the process row with a line through it
     Upgrade of .steps. The connecting rule is what makes it
     read as a sequence rather than three more boxes. */
.numline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,34px)}
.numline--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.numline--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.nstep{position:relative;padding-top:38px}
.nstep::before{
  content:'';position:absolute;top:13px;left:0;right:0;height:2px;background:var(--line);
}
.nstep:last-child::before{right:calc(100% - 26px)}
.nstep__n{
  position:absolute;top:0;left:0;width:26px;height:26px;border-radius:50%;
  background:var(--royal);color:#fff;display:grid;place-items:center;
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:80%;font-size:.72rem;
}
.nstep__k{font-size:1.02rem}
.nstep__v{margin-top:9px;font-size:.92rem;color:var(--muted);line-height:1.55}
.slab .nstep::before{background:rgba(255,255,255,.2)}
.slab .nstep__n{background:var(--yellow);color:var(--navy)}
.slab .nstep__k{color:#fff}
.slab .nstep__v{color:rgba(255,255,255,.85)}
@media(max-width:860px){
  .numline,.numline--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nstep:last-child::before{right:0}
}
@media(max-width:520px){
  .numline,.numline--3,.numline--2{grid-template-columns:1fr;gap:22px}
  .nstep{padding-top:0;padding-left:40px}
  .nstep::before{top:0;bottom:0;left:12px;right:auto;width:2px;height:auto}
  .nstep:last-child::before{bottom:auto;height:26px;right:auto}
}

/* ---------- figrow: the oversized numbers
     Same idea as the homepage trust strip but set larger and
     with the keyline, so it works as a section rather than as
     a strip between two of them. */
.figrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,44px)}
.figrow--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fig__n{
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:72%;
  font-size:clamp(2.6rem,5.2vw,4.1rem);line-height:.92;color:var(--royal);
}
.slab .fig__n{color:var(--yellow)}
.fig__r{display:block;width:44px;height:4px;background:var(--red);margin:16px 0 14px}
.slab .fig__r{background:rgba(255,255,255,.3)}
.fig__k{font-size:.95rem;color:var(--muted);line-height:1.5;max-width:26ch}
.slab .fig__k{color:rgba(255,255,255,.86)}
@media(max-width:820px){.figrow,.figrow--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:460px){.figrow,.figrow--3{grid-template-columns:1fr}}

/* ---------- icons
     Inline SVG, 2px stroke, square caps, no fills. The sprite
     is injected by main.js so it does not have to be pasted
     into nine files. They are decorative, every card has its
     heading in text, so a JS failure costs nothing but the
     glyph. */
.lico{display:block;fill:none;stroke:currentColor;stroke-width:2;
      stroke-linecap:square;stroke-linejoin:miter}
.lico-sprite{position:absolute;width:0;height:0;overflow:hidden}
/* icon above the heading on the truck page coverage rows */
.cov__ico{width:30px;height:30px;color:var(--royal);margin-bottom:14px}
/* the three ways on /contact sit on royal, so the glyph goes yellow */
.way__ico{width:28px;height:28px;color:var(--yellow);margin-bottom:14px}

/* =========================================================
   SERVICES DROPDOWN
   Six top level items was already the limit, and the three new
   service pages would have made nine. Tyres, alignment,
   mechanical, 4WD, truck and fleet fold into one Services menu
   and the bar goes back to four items.

   Opens on hover for a pointer, on focus-within for a keyboard,
   and on click for touch, which is the case hover never covers.
   Under 1080px the whole nav is already a drawer, so the panel
   becomes a plain accordion inside it instead.
   ========================================================= */
.nav__item{position:relative;display:flex;align-items:center;gap:2px}
/* The word is an anchor to /services and the chevron is its own button, so a
   pointer can go to the index page and a keyboard can still open the six
   without navigating away. They share one hover target: the .nav__item. */
.nav__toggle{
  background:none;border:0;padding:9px 2px;cursor:pointer;line-height:0;
  display:inline-flex;align-items:center;color:var(--ink);
  transition:color .18s;
}
.nav__item:hover .nav__toggle{color:var(--royal)}
.nav__link--parent{padding-right:0}
.nav__chev{
  width:11px;height:11px;flex:none;fill:none;stroke:currentColor;stroke-width:2.8;
  transition:transform .26s var(--ease);
}
.nav__item:hover .nav__chev,
.nav__item:focus-within .nav__chev{transform:rotate(180deg)}
.nav__item.is-open .nav__chev{transform:rotate(180deg)}

.nav__menu{
  position:absolute;top:calc(100% + 15px);left:-16px;min-width:300px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-2);padding:8px;z-index:60;
  opacity:0;visibility:hidden;transform:translateY(-7px);
  transition:opacity .2s var(--ease),transform .24s var(--ease),visibility .24s;
}
/* royal keyline, matching the link underline. Yellow is the hi-vis accent and
   in a white navbar it reads as a warning strip rather than as brand. */
.nav__menu::after{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--royal);
}
/* invisible bridge across the gap, so the pointer can travel from the
   button down to the panel without the menu closing under it */
.nav__menu::before{content:'';position:absolute;left:0;right:0;top:-15px;height:15px}

.nav__item:hover .nav__menu,
.nav__item:focus-within .nav__menu,
.nav__item.is-open .nav__menu{opacity:1;visibility:visible;transform:none}

.nav__sub{
  display:block;padding:11px 14px;text-decoration:none;border-radius:var(--r);
  transition:background-color .18s var(--ease);
}
.nav__sub b{
  display:block;font-family:'Archivo',sans-serif;font-weight:700;font-stretch:84%;
  font-size:.79rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);
}
.nav__sub span{display:block;margin-top:3px;font-size:.8rem;color:var(--muted);line-height:1.4}
.nav__sub:hover{background:var(--paper)}
.nav__sub:hover b{color:var(--royal)}
.nav__sub[aria-current="page"]{background:rgba(11,76,203,.07)}
.nav__sub[aria-current="page"] b{color:var(--royal)}
/* the way in to the index page, ruled off from the six it contains */
.nav__sub--all{border-bottom:1px solid var(--line);border-radius:var(--r) var(--r) 0 0;margin-bottom:6px}
.nav__sub--all b{color:var(--royal)}

@media(max-width:1080px){
  /* inside the drawer it is an accordion. Hover must not open it here,
     otherwise a tap that lands on the button leaves it stuck open. */
  .nav__item{display:flex;flex-wrap:wrap;width:100%;gap:0;align-items:stretch}
  .nav__link--parent{flex:1 1 auto}
  .nav__toggle{
    flex:none;width:52px;justify-content:center;padding:0;
    border-bottom:1px solid rgba(255,255,255,.12);color:#fff;
  }
  /* hover must not open it in the drawer, or a tap that lands on the row
     leaves the accordion stuck open behind the finger */
  .nav__item:hover .nav__toggle{color:#fff}
  .nav__item:hover .nav__chev,
  .nav__item:focus-within .nav__chev{transform:none}
  .nav__item.is-open .nav__chev{transform:rotate(180deg)}
  .nav__chev{width:14px;height:14px}
  .nav__menu{flex:1 0 100%}
  .nav__sub--all{border-radius:0;margin-bottom:0;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav__sub--all b{color:var(--yellow)}
  .nav__menu{
    position:static;min-width:0;padding:0;margin:0;
    background:transparent;border:0;box-shadow:none;
    opacity:1;visibility:visible;transform:none;transition:none;
    display:none;
  }
  .nav__menu::after,.nav__menu::before{display:none}
  .nav__item:hover .nav__menu,.nav__item:focus-within .nav__menu{display:none}
  .nav__item.is-open .nav__menu{display:block}
  .nav__sub{padding:14px 0 14px 16px;border-bottom:1px solid rgba(255,255,255,.08);border-radius:0}
  .nav__sub b{color:rgba(255,255,255,.9);font-size:.86rem}
  .nav__sub span{color:rgba(255,255,255,.7);font-size:.78rem}
  .nav__sub:hover{background:rgba(255,255,255,.05)}
  .nav__sub:hover b{color:#fff}
  .nav__sub[aria-current="page"]{background:rgba(255,255,255,.07)}
  .nav__sub[aria-current="page"] b{color:var(--yellow)}
}

/* =========================================================
   DIAGRAMS
   The pages were carrying their explanations entirely in
   prose. These are the sections that show the thing instead
   of describing it: a line drawing that moves once, when it
   scrolls into view, and then holds the corrected state.

   Rules they follow, same as everything else here: flat
   colour, no gradients, 3px radius, royal for the correct
   state and red for the out-of-spec one. Every diagram is
   aria-hidden and every card repeats the same point in
   words, so nothing is carried by the picture alone.
   ========================================================= */
.dgms{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.5vw,20px);margin-top:clamp(30px,3.4vw,46px);
}
.dgms--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1000px){.dgms,.dgms--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.dgms,.dgms--3{grid-template-columns:1fr}}

.dgm{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.dgm:hover{border-color:var(--royal);box-shadow:var(--sh-1)}
.dgm__fig{
  background:var(--paper);border-bottom:1px solid var(--line);
  padding:14px 14px 10px;position:relative;
}
.dgm__fig svg{width:100%;max-width:290px;height:auto;display:block;margin-inline:auto}
.dgm__body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:7px;flex:1}
.dgm__k{
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:80%;
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
}
.dgm__v{font-size:.92rem;line-height:1.5;color:var(--muted);margin:0}
/* the one-line reading of the picture, so the diagram is never load-bearing */
.dgm__r{
  margin:0;margin-top:auto;padding-top:11px;border-top:1px solid var(--line);
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  font-family:'Archivo',sans-serif;font-weight:700;font-stretch:84%;color:var(--royal);
}

/* ---------- diagram primitives ---------- */
.dgm-ground{stroke:var(--line);stroke-width:2}
.dgm-axis{stroke:#B9C3D6;stroke-width:1.4;stroke-dasharray:4 4}
.dgm-tyre{fill:#0A1428;rx:2}
.dgm-hub{fill:none;stroke:#fff;stroke-width:1.6}
/* The reference line rides inside the rotating group, so it swings with the
   part and straightens with it. It carries the verdict in its colour rather
   than in a second marker that has to be cross-faded against the first. */
.dgm-ref{stroke:var(--red);stroke-width:1.7;stroke-dasharray:3.5 3.5;fill:none;stroke-linecap:round}
.dgm-body{fill:none;stroke:#B9C3D6;stroke-width:1.6}
.dgm-lbl{
  font-family:'Archivo',sans-serif;font-size:8.2px;font-weight:700;font-stretch:84%;
  letter-spacing:.1em;text-transform:uppercase;fill:var(--muted);
}

/* Each moving part settles from out-of-spec to in-spec. The animation is
   pinned to .is-in, which the reveal observer adds, so it plays when the
   section is actually on screen rather than while it is still below the fold.
   fill-box origins keep the rotation on the part rather than the canvas. */
.dgm-mv{transform-box:fill-box;transform-origin:center}
.dgm-mv--base{transform-origin:center bottom}
/* A group whose pivot is a point on the car rather than the middle of its own
   bounding box (the contact patch, the rear axle centre) has to measure from
   the viewBox, so the inline transform-origin means what it says. */
.dgm-mv--vb{transform-box:view-box}
.dgm .dgm-mv{transform:rotate(var(--off,0deg))}
.dgm.is-in .dgm-mv{animation:dgm-settle 3.6s var(--ease) .25s infinite}
@keyframes dgm-settle{
  0%   {transform:rotate(var(--off,0deg))}
  28%  {transform:rotate(var(--off,0deg))}
  55%  {transform:rotate(0deg)}
  86%  {transform:rotate(0deg)}
  100% {transform:rotate(var(--off,0deg))}
}
/* red while it is out, royal once it is set, on the same timeline */
.dgm.is-in .dgm-ref{animation:dgm-ref 3.6s var(--ease) .25s infinite}
@keyframes dgm-ref{
  0%,28%  {stroke:var(--red)}
  55%,86% {stroke:var(--royal);stroke-dasharray:3.5 3.5}
  100%    {stroke:var(--red)}
}

@media(prefers-reduced-motion:reduce){
  /* no cycling. The corrected state is the one that gets held. */
  .dgm.is-in .dgm-mv,.dgm.is-in .dgm-ref{animation:none}
  .dgm .dgm-mv{transform:none}
  .dgm .dgm-ref{stroke:var(--royal)}
}

/* ---------- tread wear
     Same card shell as the alignment diagrams, different motion. The groove
     scales down from a new tyre to the depth named on the card, so the three
     cards read as one tyre wearing out rather than three unrelated pictures.
     --wear is the target groove depth as a fraction of new. */
.dgm-rubber{fill:#0A1428}
.dgm-groove{fill:var(--paper);transform-box:fill-box;transform-origin:top}
.dgm .dgm-groove{transform:scaleY(var(--wear,1))}
/* Plays once and holds, unlike the alignment diagrams, which loop. Three
   cards looping in step would show the same depth as each other at every
   moment, which is the one thing this section must not do: the comparison
   between them is the whole point. So the wear is the entry, and the
   resting state is the depth named on the card. */
.dgm.is-in .dgm-groove{animation:dgm-wear 1.1s var(--ease) both}
.dgms--3 .dgm:nth-child(2) .dgm-groove{animation-delay:.14s}
.dgms--3 .dgm:nth-child(3) .dgm-groove{animation-delay:.28s}
@keyframes dgm-wear{
  from{transform:scaleY(1)}
  to  {transform:scaleY(var(--wear,1))}
}
/* the 1.5mm line. Solid red only on the card that has reached it. */
.dgm-limit{stroke:var(--red);stroke-width:1.5;stroke-dasharray:4 3}
.dgm-limit--soft{stroke:#B9C3D6}
.dgm__d{
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:78%;
  font-size:1.5rem;color:var(--ink);line-height:1;margin:0 0 2px;
}
.dgm--now .dgm__r{color:var(--red)}

@media(prefers-reduced-motion:reduce){
  .dgm.is-in .dgm-groove{animation:none}
  .dgm .dgm-groove{transform:scaleY(var(--wear,1))}
}

/* ---------- brake pad wear
     The tread-depth idiom turned on its side: the friction material scales in
     from the rotor face to the thickness named on the card, so three pads read
     as one pad wearing out. Plays once and holds, for the same reason the
     grooves do. Three cards looping in step would show the same thickness as
     each other at every moment, which kills the comparison.

     Note there is no legal minimum for a pad the way 1.5mm is legal for a
     tyre, so the dashed line here is the manufacturer call-it point and the
     copy on the page says exactly that. */
.dgm-rotor{fill:none;stroke:#8C99B0;stroke-width:1.8}
.dgm-rotor-f{stroke:#B9C3D6;stroke-width:1.3}
.dgm-plate{fill:#B9C3D6}
/* the housing the pad sits in, so worn material reads as a gap in a fixed
   assembly rather than as two parts drifting apart */
.dgm-caliper{fill:none;stroke:#CBD3E0;stroke-width:1.5;stroke-linecap:round}
.dgm-pad{fill:#0A1428;transform-box:fill-box;transform-origin:right}
.dgm .dgm-pad{transform:scaleX(var(--wear,1))}
.dgm.is-in .dgm-pad{animation:dgm-padwear 1.1s var(--ease) both}
.dgms--3 .dgm:nth-child(2) .dgm-pad{animation-delay:.14s}
.dgms--3 .dgm:nth-child(3) .dgm-pad{animation-delay:.28s}
@keyframes dgm-padwear{
  from{transform:scaleX(1)}
  to  {transform:scaleX(var(--wear,1))}
}
@media(prefers-reduced-motion:reduce){
  .dgm.is-in .dgm-pad{animation:none}
  .dgm .dgm-pad{transform:scaleX(var(--wear,1))}
}

/* ---------- axle positions
     No fault-and-correction here and nothing to measure, so the motion is
     just the position arriving: the rig draws in grey and the axle the card
     is about lands on it. Once and held, so the three cards can be compared
     side by side rather than blinking against each other. */
.dgm-rig{fill:none;stroke:#B9C3D6;stroke-width:1.7;stroke-linejoin:round}
.dgm-rig-f{fill:#EDF0F6;stroke:#B9C3D6;stroke-width:1.7;stroke-linejoin:round}
.dgm-wheel{fill:#D3DAE7}
.dgm-pos{fill:var(--royal);transform-box:fill-box;transform-origin:center}
.dgm-pos-r{fill:none;stroke:var(--royal);stroke-width:1.5;opacity:.34;transform-box:fill-box;transform-origin:center}
.dgm .dgm-pos,.dgm .dgm-pos-r{transform:none}
.dgm.is-in .dgm-pos{animation:dgm-land .62s var(--ease) both}
.dgm.is-in .dgm-pos-r{animation:dgm-ring .9s var(--ease) both}
.dgms--3 .dgm:nth-child(2) .dgm-pos,
.dgms--3 .dgm:nth-child(2) .dgm-pos-r{animation-delay:.16s}
.dgms--3 .dgm:nth-child(3) .dgm-pos,
.dgms--3 .dgm:nth-child(3) .dgm-pos-r{animation-delay:.32s}
@keyframes dgm-land{
  from{transform:scale(.2);opacity:0}
  to  {transform:scale(1);opacity:1}
}
@keyframes dgm-ring{
  0%  {transform:scale(.2);opacity:0}
  55% {transform:scale(1.5);opacity:.34}
  100%{transform:scale(1);opacity:.34}
}
@media(prefers-reduced-motion:reduce){
  .dgm.is-in .dgm-pos,.dgm.is-in .dgm-pos-r{animation:none}
  .dgm .dgm-pos{opacity:1}
  .dgm .dgm-pos-r{opacity:.34}
}

/* ---------- wide establishing shot
     A panoramic runs edge to edge with a caption plate on the corner, the
     same plate the mosaic uses. Fixed aspect so it never grows taller than
     a band on a wide screen, and never squashes to a letterbox on a phone. */
.wideshot{position:relative;overflow:hidden;background:var(--navy)}
.wideshot img{width:100%;aspect-ratio:2.36/1;object-fit:cover;display:block}
@media(max-width:700px){.wideshot img{aspect-ratio:16/10}}
.wideshot__plate{
  position:absolute;left:0;bottom:0;background:var(--yellow);color:var(--navy);
  padding:14px 20px;max-width:min(520px,86%);
}
.wideshot__plate b{
  display:block;font-family:'Archivo',sans-serif;font-weight:800;font-stretch:80%;
  font-size:.86rem;letter-spacing:.11em;text-transform:uppercase;
}
.wideshot__plate span{display:block;margin-top:4px;font-size:.88rem;line-height:1.45}
@media(max-width:520px){
  .wideshot__plate{position:static;max-width:none}
}

/* ---------- clearance
     Third motion in the same card shell. The alignment diagrams rotate a
     part back into spec and the tread ones wear a groove down; these move
     the tyre into the position that actually tests the fit, and shrink the
     gap marker with it.

     Note the gap never closes and never goes red. The point the copy makes
     is that we check it at the tight moment, not that the fit is marginal,
     so the drawing must not imply a tyre about to foul. */
.dgm-tr{transform-box:fill-box}
.dgm.is-in .dgm-tr{animation:dgm-tr 4s var(--ease) .25s infinite}
@keyframes dgm-tr{
  0%,18%  {transform:translateY(0)}
  48%,80% {transform:translateY(var(--lift,0))}
  100%    {transform:translateY(0)}
}
.dgm-gap{stroke:var(--royal);stroke-width:1.6;transform-box:fill-box;transform-origin:top}
.dgm.is-in .dgm-gap{animation:dgm-gap 4s var(--ease) .25s infinite}
@keyframes dgm-gap{
  0%,18%  {transform:scaleY(1)}
  48%,80% {transform:scaleY(var(--gap,1))}
  100%    {transform:scaleY(1)}
}
.dgm-arch{fill:none;stroke:#0A1428;stroke-width:2.4;stroke-linecap:round}
/* a gap that is measured across rather than down does not shrink with the
   travel, so it is drawn and left alone. scaleY on a horizontal line has a
   zero-height fill-box and is not worth the trouble. */
.dgm-mark{stroke:var(--royal);stroke-width:1.6}

@media(prefers-reduced-motion:reduce){
  .dgm.is-in .dgm-tr,.dgm.is-in .dgm-gap{animation:none}
}

/* ============================================================
   BLOG
   Index of post cards + the article (post) template. Reuses the
   brand tokens, .phero hero and .endcta closing block from above.
   Prose column is capped for a comfortable measure and everything
   stays square-edged to match the rest of the workshop.
   ============================================================ */

/* ---- blog index ---- */
.bloglead{padding-block:clamp(36px,5vw,64px)}
.bloglead__inner{max-width:720px}
.bloglead p{margin-top:16px;font-size:1.06rem;line-height:1.7;color:var(--ink-2)}

.bloglist{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.4vw,32px);padding-bottom:clamp(48px,6vw,88px);
}
@media(max-width:920px){.bloglist{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.bloglist{grid-template-columns:1fr}}

.postcard{
  display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh-1);transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.postcard:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.postcard__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.postcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.postcard:hover .postcard__media img{transform:scale(1.04)}
.postcard__cat{
  position:absolute;left:14px;top:14px;z-index:1;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;background:var(--red);padding:6px 10px;border-radius:2px;
}
.postcard__body{display:flex;flex-direction:column;flex:1;padding:22px}
.postcard__title{font-size:1.24rem;line-height:1.12;color:var(--ink)}
.postcard__title a{color:inherit;text-decoration:none}
.postcard:hover .postcard__title a{color:var(--royal)}
.postcard__ex{margin-top:10px;font-size:.95rem;line-height:1.6;color:var(--muted)}
.postcard__meta{
  margin-top:auto;padding-top:16px;display:flex;align-items:center;gap:10px;
  font-family:'Archivo',sans-serif;font-size:12px;letter-spacing:.03em;color:var(--muted);
}
.postcard__meta .dot{width:3px;height:3px;border-radius:50%;background:var(--line)}

/* ---- article ---- */
.post{padding-block:clamp(40px,5.4vw,72px)}
.post__grid{
  display:grid;grid-template-columns:minmax(0,1fr);
  max-width:760px;margin-inline:auto;
}
.post__crumb{
  font-family:'Archivo',sans-serif;font-size:12.5px;letter-spacing:.03em;
  color:var(--muted);margin-bottom:22px;
}
.post__crumb a{color:var(--royal);text-decoration:none}
.post__crumb a:hover{text-decoration:underline}
.post__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:28px;
  font-family:'Archivo',sans-serif;font-size:12.5px;letter-spacing:.03em;color:var(--muted);
}
.post__meta .dot{width:3px;height:3px;border-radius:50%;background:var(--line)}
.post__by{color:var(--ink-2);font-weight:600}

/* prose typography */
.prose{color:var(--ink-2);font-size:1.075rem;line-height:1.75}
.prose>p:first-of-type{font-size:1.2rem;line-height:1.6;color:var(--ink);font-weight:500}
.prose h2{
  font-family:'Archivo',sans-serif;color:var(--ink);
  font-size:clamp(1.4rem,2.4vw,1.8rem);line-height:1.12;
  margin:2em 0 .55em;padding-top:.4em;
}
.prose h2::before{
  content:'';display:block;width:44px;height:4px;background:var(--red);margin-bottom:18px;
}
.prose h3{
  font-family:'Archivo',sans-serif;color:var(--ink);
  font-size:1.18rem;line-height:1.2;margin:1.6em 0 .4em;
}
.prose p{margin:0 0 1.15em}
.prose a{color:var(--royal);text-decoration:underline;text-underline-offset:2px}
.prose strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{margin:0 0 1.3em;padding-left:1.1em}
.prose li{margin:0 0 .5em;padding-left:.25em}
.prose ul li::marker{color:var(--red)}
.prose ol li::marker{color:var(--royal);font-family:'Archivo',sans-serif;font-weight:700}
.prose blockquote{
  margin:1.6em 0;padding:4px 0 4px 22px;border-left:4px solid var(--yellow);
  font-size:1.15rem;line-height:1.5;color:var(--ink);font-style:normal;
}

/* key-facts callout inside a post */
.keyfacts{
  margin:1.8em 0;background:var(--navy);color:#fff;border-radius:var(--r);
  padding:24px 26px;box-shadow:var(--sh-1);
}
.keyfacts__h{
  font-family:'Archivo',sans-serif;font-weight:700;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--yellow);margin-bottom:12px;
}
.keyfacts ul{margin:0;padding-left:1.05em;list-style:none}
.keyfacts li{position:relative;padding-left:22px;margin:0 0 .6em;color:rgba(255,255,255,.92);line-height:1.55}
.keyfacts li::before{
  content:'';position:absolute;left:0;top:.55em;width:9px;height:9px;
  background:var(--red);transform:rotate(45deg);
}
.keyfacts li:last-child{margin-bottom:0}
.keyfacts strong{color:var(--yellow)}

/* article footer + back link */
.post__foot{
  max-width:760px;margin:clamp(32px,4vw,48px) auto 0;padding-top:26px;
  border-top:1px solid var(--line);
}
.post__foot p{color:var(--muted);font-size:.95rem;line-height:1.6}
.post__back{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;letter-spacing:.03em;
  color:var(--royal);text-decoration:none;
}
.post__back:hover{gap:12px}

/* more-from-the-blog strip */
.morefrom{padding-block:clamp(40px,5vw,72px)}
.morefrom__head{margin-bottom:28px}

/* =========================================================
   LEGAL + 404
   Privacy and terms reuse the blog article shell (.post/.prose).
   ========================================================= */
.legal-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}