/* ==========================================================================
   Nationwide Accident Hire — clean rebuild
   Hand-written design system. No frameworks, no WordPress, no Elementor.
   ========================================================================== */

/* ---- Fonts ---------------------------------------------------------------- */
@font-face{font-family:'Manrope';src:url('../fonts/Manrope-ExtraBold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter24pt-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter28pt-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter28pt-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter28pt-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ---- Tokens --------------------------------------------------------------- */
:root{
  --green:#79b949;
  --green-600:#609836;
  --green-700:#4d7c2b;
  --ink:#111a24;
  --ink-800:#1b2733;
  --slate:#4a5a68;
  --muted:#6b7885;
  --line:#e4e9ee;
  --bg:#ffffff;
  --bg-soft:#f4f6f8;   /* live's exact soft-section grey (was #f4f7f9) */
  --bg-tint:#f2f8ec;
  --blue:#066aab;
  --radius:14px;
  --radius-lg:22px;
  --shadow:0 10px 30px rgba(17,26,36,.08);
  --shadow-lg:0 24px 60px rgba(17,26,36,.14);
  /* MEASURED off live 2026-08-14: its page content spans 124->1316 at a 1440
     viewport = 1192px. Ours was 1152 (1200 - 2x24 padding), 40px narrower, which
     showed up in every section. 1240 - 2x24 = 1192, matching live exactly.
     Dom approved the change site-wide. */
  --container:1240px;   /* 1192 content + 2x24px padding — live's width */
  /* the header is deliberately WIDER than the boxed page content, as live:
     live content spans 1440px at wide viewports with 20px gutters below that,
     so the box is 1440+40. Verified edge-for-edge against live at 1280-1920. */
  --container-wide:1480px;   /* 1440 content + 2x20px gutter */
  --display:'Manrope',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---- Reset / base --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
/* NO overflow on html — deliberate. Setting overflow-x:clip here makes the ROOT's
   overflow the one propagated to the viewport, so `body{overflow:hidden}` (what
   main.js sets to lock scrolling behind the open mobile menu) never reaches it.
   Two measured consequences: the page scrolled freely behind the open menu, and
   body became an overflow:hidden box — i.e. the sticky header's scrollport — so
   the header stopped sticking and scrolled away. Live has no html overflow rule
   either; the clip belongs on body only. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.6;font-size:17px;overflow-x:clip}
/* live disables smooth scrolling for reduced-motion users; the rebuild did not */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4,h5{font-family:var(--display);font-weight:800;line-height:1.1;margin:0 0 .5em;letter-spacing:-.02em;color:var(--ink)}
/* Scale MEASURED off live at 1440px, 2026-08-14: home hero h1 56px, inner-page
   h1 46px, and every h2 on every page 40px. The rebuild was running 58/58/43 —
   the home page looked right only because three sections carried explicit
   font-size:40px overrides; every inner page fell through to the base clamp and
   ran 3-12px oversized. Fix the base, don't keep patching per section. */
h1{font-size:clamp(2.3rem,5vw,2.875rem)}      /* max 46px — live's inner-page h1 */
h2{font-size:clamp(1.8rem,3.5vw,2.5rem)}      /* max 40px — live's h2, everywhere */
h3{font-size:clamp(1.15rem,2vw,1.4rem)}
p{margin:0 0 1rem}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}

/* ---- Layout --------------------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px}
.section{padding:clamp(56px,8vw,104px) 0}
.section--soft{background:var(--bg-soft)}
.section--tint{background:var(--bg-tint)}
.section--ink{background:var(--ink);color:#dbe3ea}
.section--ink h1,.section--ink h2,.section--ink h3{color:#fff}
.narrow{max-width:760px}
.center{text-align:center;margin-inline:auto}
.eyebrow{display:inline-block;font-family:var(--body);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;color:var(--green-600);background:var(--bg-tint);padding:.5em 1em;border-radius:999px;margin-bottom:1rem}
.section--ink .eyebrow{background:rgba(121,185,73,.16);color:#a7d97b}
.lead{font-size:1.15rem;color:var(--slate)}
.section--ink .lead{color:#b9c4cf}

/* ---- Buttons -------------------------------------------------------------- */
/* Live buttons are square-ish, not pills: radius 8px, UPPERCASE, 700, .5px
   tracking. Header size 14px/12px 20px (h=46); large 16px/20px 35px (h=58). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--body);font-weight:700;font-size:14px;letter-spacing:.5px;text-transform:uppercase;padding:12px 20px;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,transform .4s ease;white-space:nowrap;line-height:1.3}
.btn svg{width:1.05em;height:1.05em}
.btn--primary{background:var(--green);color:#fff}
.btn--primary:hover{background:var(--green-600);transform:translateY(-3px);box-shadow:0 10px 24px rgba(121,185,73,.35)}
.btn--dark{background:#2f3a3d;color:#fff}
.btn--dark:hover{background:#1f2729;transform:translateY(-3px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--green);color:var(--green-600)}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.btn--lg{padding:20px 35px;font-size:16px}

/* skip-to-content — live ships one on every page; the rebuild had none */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--green);color:#fff;
  font-weight:700;padding:12px 20px;border-radius:0 0 10px 0}
.skip-link:focus{left:0}

/* ---- Utility bar (24/7 claim line) ---------------------------------------- */
/* Dom's call, 2026-08-14: the 24/7 claim line moves out of the header row into
   its own slim bar. Measured effect: it frees 131px in the row (the block itself
   was 117px + a 14px gap), which is exactly what let the 1201-1300px gap-squeeze
   band be deleted — the row's natural content is 1128px at full 28px/14px gaps,
   so it now fits at 1201 without tightening anything.
   DELIBERATELY OUTSIDE .site-header: the bar scrolls away and only the 82px nav
   row pins, so the sticky footprint still matches live's 81.8px. Putting it
   inside would have made the sticky block ~120px.
   This also puts the phone number on mobile for the first time — the old
   .claim-line was display:none below 1200px, so the header had no number at all. */
.topbar{background:#2f3a3d;color:#c9d1d3}
.topbar .container{max-width:var(--container-wide);padding-inline:20px}
.topbar-inner{display:flex;align-items:center;gap:20px;min-height:38px;padding-block:5px}
.topbar a{transition:color .3s ease}
.topbar-mail{font-size:14px;color:#c9d1d3}
.topbar-mail:hover{color:#fff}
.topbar-claim{display:flex;align-items:baseline;gap:10px;margin-left:auto;white-space:nowrap}
.topbar-claim span{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#9aa5a8}
.topbar-claim a{font-size:16px;font-weight:700;color:var(--green)}
.topbar-claim a:hover{color:#fff}

/* ---- Header --------------------------------------------------------------- */
/* Matches the live site: pinned from y=0, OPAQUE white, soft drop shadow instead
   of a hairline border, and no backdrop blur. Live measures
   background:rgb(255,255,255) · box-shadow:0 4px 20px rgba(0,0,0,.06) · height 81.8px
   · transition:background .3s, border .3s, box-shadow .3s, transform .4s.
   Live uses Elementor's position:fixed + an 81.8px spacer; position:sticky is the
   same thing to a visitor (pinned, no content jump) with less machinery. */
.site-header{position:sticky;top:0;z-index:60;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.06);
  transition:background .3s ease,border .3s ease,box-shadow .3s ease,transform .4s ease}
/* wider than the page container, per live */
.site-header .container{max-width:var(--container-wide);padding-inline:20px}
.header-inner{display:flex;align-items:center;gap:26px;height:82px}
.brand{flex:none;display:flex;align-items:center}
.brand img{height:52px;width:auto;max-width:none}   /* live measures 150x52 */
/* Dom, 2026-08-14: menu items centred in the space between the logo and the
   button group, rather than shoved right against the buttons (was margin-left:auto).
   flex:1 makes .nav claim the leftover width; justify-content centres its items
   inside that. Note the centre is the centre of the LEFTOVER space, not of the
   page — the logo (150px) and the CTA group (~315px) are different widths. */
.nav{display:flex;align-items:center;gap:28px;flex:1;justify-content:center;min-width:0}
.nav .mobile-cta{display:none}
/* scoped to real nav links: `.nav a` (0,1,1) outranks `.btn` (0,1,0) and would
   otherwise strip the button transition off the .mobile-cta buttons inside .nav */
.nav a{font-weight:500;font-size:13px;text-transform:uppercase;color:var(--ink-800);position:relative;padding:6px 0;white-space:nowrap}
.nav>a,.has-sub>a,.submenu a{transition:color .4s ease}
.nav a:hover,.nav a.is-active{color:var(--green-600)}
/* live's active item is green text ONLY — its ::after renders at height 0 */
.has-sub{position:relative}
.has-sub>a::after{content:'▾';font-size:.7em;margin-left:.35em;color:var(--muted)}
.submenu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(8px);background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow-lg);padding:10px;min-width:230px;opacity:0;visibility:hidden;transition:.2s}
.has-sub:hover .submenu,.has-sub:focus-within .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.submenu a{display:block;padding:10px 14px;border-radius:8px;font-weight:500;font-size:13px;text-transform:uppercase}
.submenu a:hover{background:var(--bg-tint);color:var(--green-700)}
.header-cta{display:flex;align-items:center;gap:14px}
/* .claim-line moved out of this row into .topbar (see above) on 2026-08-14 */
/* explicit close control inside the off-canvas panel (live has one; we had none) */
.nav-close{display:none;position:absolute;top:18px;right:18px;width:42px;height:42px;
  border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:10px;
  font-size:1.6rem;line-height:1;cursor:pointer;align-items:center;justify-content:center;
  transition:background .3s ease,color .3s ease,border-color .3s ease}
.nav-close:hover{background:var(--green);border-color:var(--green);color:#fff}
.nav-toggle{display:none;align-items:center;gap:.5em;background:var(--green);color:#fff;border:none;font-weight:700;padding:.7em 1.1em;border-radius:10px;cursor:pointer}
.nav-toggle span{width:18px;height:2px;background:#fff;position:relative;display:block}
.nav-toggle span::before,.nav-toggle span::after{content:'';position:absolute;left:0;width:18px;height:2px;background:#fff}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}

/* ---- Trustpilot bar ------------------------------------------------------- */
.trust-bar{background:#fff;border-bottom:1px solid var(--line)}
/* Live gives the Trustpilot widget the FULL container width in a block parent
   (measured 1192px). In a centred flex container it shrinks to its content and
   Trustpilot renders the compact stars-only variant instead of the full
   "Our customers say Excellent … 4.5 out of 5 based on N reviews" form. */
.trust-bar .container{padding-block:12px}
.trust-bar .trustpilot-widget{width:100%}
.trust-bar strong{color:var(--ink)}
.trust-stars{display:inline-flex;gap:3px}
.trust-stars i{width:20px;height:20px;background:#00b67a;display:inline-block;-webkit-mask:var(--star) center/72% no-repeat;mask:var(--star) center/72% no-repeat}
:root{--star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 .6l3.7 7.4 8.2 1.2-5.9 5.8 1.4 8.2L12 18.9 4.6 23l1.4-8.2L.1 9.2l8.2-1.2z'/%3E%3C/svg%3E")}
.trust-star-single{width:18px;height:18px;background:#00b67a;-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat;display:inline-block}

/* ---- Hero ----------------------------------------------------------------- */
.hero{position:relative;color:#fff;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-2;object-fit:cover;width:100%;height:100%}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(10,17,24,.86) 0%,rgba(10,17,24,.6) 48%,rgba(10,17,24,.15) 100%)}
/* padding-block ONLY. This element is `class="container hero__inner"`, so a
   `padding` shorthand sets padding-left/right to 0 and WIPES .container's
   24px padding-inline — which is why the hero copy sat 24px left of the page
   content on every page. .sc-hero__inner already avoids this; the main hero
   never did. Dom, 2026-08-14. */
.hero__inner{padding-block:clamp(70px,11vw,150px)}
.hero__inner .eyebrow{background:rgba(121,185,73,.18);color:#bfe89a}
/* the HOME hero runs bigger than the base scale — live measures 56px here */
.hero h1{color:#fff;max-width:16ch;font-size:clamp(2.3rem,5vw,3.5rem)}
.hero h1 .accent{color:var(--green)}
.hero p{max-width:52ch;font-size:1.2rem;color:#e7edf2}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:1.6rem}
/* MEASURED off live 2026-08-14: EVERY inner-page hero is exactly 550px, on all
   15 pages — one consistent value. Ours had drifted to five different heights
   (331 / 381 / 475 / 506 / 556) because each hero sized itself to its content,
   so /about/ collapsed to 331px once its invented subtitle and buttons were
   removed. Pin the height and centre the content instead.
   (The HOME hero is deliberately different — live measures 850px there.) */
.hero--sm{min-height:550px;display:grid;align-items:center}
.hero--sm .hero__inner{padding-block:clamp(40px,6vw,64px);width:100%}
/* inner-page heroes drop back to the base 46px live uses on every inner page */
.hero--sm h1{max-width:22ch;font-size:clamp(2.3rem,5vw,2.875rem)}
.hero-trust{display:inline-flex;align-items:center;gap:8px;margin-top:1.3rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);padding:.5em 1em;border-radius:999px;font-size:.9rem}
.hero-tp{margin-top:1.6rem;max-width:560px;background:rgba(255,255,255,.06);border-radius:12px}
.hero-tp:empty{display:none}
.hero-tp-micro{max-width:320px;margin-top:1.4rem}
.hero-tp-micro:empty{display:none}
.hero-tp-img{height:46px;width:auto;width:auto;margin-top:1.4rem;background:#fff;padding:8px 14px;border-radius:10px;box-shadow:var(--shadow)}
.breadcrumb{font-size:.85rem;color:#c7d0d8;margin-bottom:1rem;display:flex;gap:.5em;align-items:center}
.breadcrumb a:hover{color:#fff}

/* ---- Section heading block ------------------------------------------------ */
/* Left-aligned heads run the FULL container width (standing rule, and it matches
   the live site). Dom 2026-08-14: the CENTRED variant now does too, for the TITLE.
   The 720px cap used to sit on the whole block, which wrapped headings like
   "Everything You Need After a Motor Accident" onto two lines for no reason. The
   cap moves to the paragraph only, where a contained measure is actually wanted:
   a 1192px-wide line of body copy is unreadable, a 1192px-wide heading is not. */
.head-block{margin-bottom:clamp(32px,5vw,56px)}
.head-block.center{margin-inline:auto}
.head-block.center>p,.head-block.center .lead{max-width:720px;margin-inline:auto}

/* ---- Dark section (live's "Why Drivers Choose Nationwide") ----------------
   Measured on live: background #2f3a3d, heading 40px/800 white, cards fully
   TRANSPARENT (no bg, border, radius, padding or shadow), card heading 25px/800
   white, body #ccc 16px, icon 40x40 in brand green. */
.section--dark{background:#2f3a3d;color:#ccc}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.section--dark .lead{color:#ccc}
.section--dark .head-block h2{font-size:40px}
/* boxed cards on the dark background, per Dom's reference */
.section--dark .card{background:#3a4548;border:1px solid rgba(255,255,255,.07);border-radius:16px;
  padding:34px 32px;box-shadow:none;transition:transform .4s ease,background .3s ease}
.section--dark .card:hover{transform:translateY(-3px);background:#404b4f;box-shadow:none}
.section--dark .card .ico{background:transparent;width:40px;height:40px;border-radius:0;color:var(--green);margin-bottom:16px}
.section--dark .card .ico svg{width:40px;height:40px}
.section--dark .card h3{font-size:25px;color:#fff}
.section--dark .card p{color:#ccc;font-size:16px}

/* two-up where the columns must match height (steps beside an image) */
.split--fill{align-items:stretch}
.split--fill .split__media{display:flex}
.split--fill .split__media img{width:100%;height:100%;object-fit:cover}
.split--fill .steps{align-content:space-between}

/* ---- Cards / grids -------------------------------------------------------- */
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
/* One card language site-wide, MEASURED off live: 15px radius, shadow
   rgba(47,58,61,.1) 0 10px 30px -5px, no border. `.svc-row` and `.fleet-tile`
   already used these; `.card` was on 22px with a colder, tighter shadow, so
   cards looked subtly different depending on which page you were on. */
.card{background:#fff;border-radius:15px;padding:32px;
  box-shadow:rgba(47,58,61,.1) 0 10px 30px -5px;
  transition:background .3s ease,box-shadow .3s ease,transform .4s ease}
.card:hover{transform:translateY(-4px);box-shadow:rgba(47,58,61,.18) 0 18px 44px -6px}
.card .ico{width:54px;height:54px;border-radius:14px;background:var(--bg-tint);color:var(--green-700);display:grid;place-items:center;margin-bottom:18px}
.card .ico svg{width:26px;height:26px}
.card h3{margin-bottom:.4em}
.card p{color:var(--slate);margin-bottom:0}

/* dual promo cards (Drivers / Partners) — matched to the live site:
   card 576x297, radius 16px, shadow rgba(47,58,61,.1) 0 10px 30px -5px,
   4px green bottom bar, padding 45px 50px 50px, and the illustration as a
   background-image at size:30% pinned to 100% 50% (right, centred). */
/* the cards overlap the hero, then the white area needs real breathing room
   before the next (dark) section — live leaves ~100px */
.promo{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:-70px;
  margin-bottom:clamp(56px,7vw,100px);position:relative;z-index:5}
.promo__card{
  position:relative;overflow:hidden;
  background:#fff;border-radius:16px;
  border-bottom:4px solid var(--green);
  box-shadow:rgba(47,58,61,.1) 0 10px 30px -5px;
  padding:45px 50px 50px;
}
/* The illustration is a pale watermark sitting hard right and bleeding off the
   card edge. A pseudo-element (rather than the card's own background-image) so
   the artwork can be faded without touching the text on top of it. */
.promo__card::after{
  content:'';position:absolute;z-index:0;pointer-events:none;
  right:-2%;top:50%;translate:0 -50%;
  width:40%;aspect-ratio:1;
  background:var(--promo-wm) right center/contain no-repeat;
  opacity:.22;
}
.promo__card>*{position:relative;z-index:1}
.promo__card--drivers{--promo-wm:url('../img/drivers-1.png')}
.promo__card--partners{--promo-wm:url('../img/Partners-3.png')}
.promo__card h3{font-size:32px;font-weight:800;color:#2f3a3d;margin-bottom:.45em}
.promo__card p{color:#4a5568;font-size:16px;line-height:1.6;max-width:62%;margin-bottom:1.6rem}
/* the live CTA: solid green, 8px radius, uppercase, arrow on the RIGHT */
.promo__btn{
  display:inline-flex;align-items:center;gap:.7em;
  background:var(--green);color:#fff;border-radius:8px;
  padding:20px 35px;font-size:16px;font-weight:700;line-height:1;
  text-transform:uppercase;letter-spacing:.5px;
  transition:background .3s ease,box-shadow .3s ease,transform .4s ease;
}
.promo__btn:hover{background:var(--green-600);color:#fff;transform:translateY(-3px);box-shadow:0 10px 24px rgba(121,185,73,.35)}
.promo__btn svg{width:16px;height:16px;fill:currentColor;flex:none}
@media(max-width:680px){
  .promo__card{padding:34px 30px 38px}
  .promo__card::after{width:52%;opacity:.18}
  .promo__card p{max-width:74%}
  .promo__card h3{font-size:26px}
  .promo__btn{padding:16px 26px;font-size:15px}
}

/* steps */
.steps{counter-reset:step;display:grid;gap:26px}
.step{position:relative;padding-left:76px}
.step::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:54px;height:54px;border-radius:50%;background:var(--green);color:#fff;font-family:var(--display);font-weight:800;font-size:1.5rem;display:grid;place-items:center;box-shadow:0 8px 20px rgba(121,185,73,.35)}
.step h3{margin-bottom:.2em}
.step p{color:var(--slate);margin-bottom:0}

/* fleet / image cards */
.tile{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow)}
/* No hover zoom — the live site has no image scale animation anywhere (its only
   scale is elementor-animation-grow on the footer social icons). To put it back:
   .tile img{transition:transform .4s ease}  .tile:hover img{transform:scale(1.06)} */
.tile img{width:100%;height:100%;object-fit:cover}
.tile::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(10,17,24,.82),transparent 62%)}
/* live marks every fleet tile label as an h3 and measures it at 22px */
.tile span,.tile h3{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;color:#fff;font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.01em;margin:0}

/* service media rows */
.media-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,transform .4s ease}
.media-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.media-card img{aspect-ratio:16/9;object-fit:cover;width:100%}
.media-card .body{padding:26px}
.media-card h3{font-size:1.25rem}
.media-card p{color:var(--slate)}

/* split (image + text) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.split--rev .split__media{order:2}
.split__media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%}
.ticks{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:12px}
.ticks li{position:relative;padding-left:36px;color:var(--slate)}
.ticks li::before{content:'';position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:var(--bg-tint);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23609836' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");background-size:14px;background-repeat:no-repeat;background-position:center}

/* ---- HTML sitemap page ---------------------------------------------------- */
.sitemap-grid{align-items:start}
.sitemap-grid .card{padding:28px}
.sitemap-grid h3{margin-bottom:.8em;padding-bottom:.6em;border-bottom:2px solid var(--green)}
.sitemap-list{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.sitemap-list li{display:grid;gap:2px}
.sitemap-list a{font-weight:700;color:var(--ink-800);transition:color .4s ease}
.sitemap-list a:hover{color:var(--green-600)}
.sitemap-list span{color:var(--muted);font-size:.9rem;line-height:1.45}
.sitemap-note{margin-top:clamp(28px,4vw,44px);color:var(--muted);font-size:.92rem}
.sitemap-note a{color:var(--green-700);font-weight:600}

/* ---- Six-step strip (For Drivers) ----------------------------------------
   Mirrors the live .grids-scroll-wrp: a static 6-across row at >=1201px, and a
   horizontal drag-scroller with +/-250px prev/next buttons below that. */
.steps-strip{position:relative;display:flex;align-items:center;gap:10px}
.steps-strip__track{
  display:flex;align-items:stretch;gap:0;flex:1;min-width:0;
  overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;
}
.steps-strip__track::-webkit-scrollbar{display:none}
.steps-strip__track:focus-visible{outline:3px solid var(--green);outline-offset:4px}
.steps-strip__track.dragging{scroll-behavior:auto;cursor:grabbing;user-select:none}
.steps-strip__item{
  flex:1 0 0;min-width:150px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 20px;text-align:center;
}
.steps-strip__ico{display:grid;place-items:center;height:44px;margin-bottom:16px;color:var(--green)}
.steps-strip__ico svg{width:34px;height:34px;max-height:100%}
.steps-strip__item p{margin:0;color:var(--slate);font-size:.95rem;line-height:1.5}
.steps-strip__sep{flex:0 0 30px;display:grid;place-items:center;color:#b8c4cf}
.steps-strip__sep svg{width:16px;height:16px;fill:currentColor}
.steps-strip__btn{
  flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--ink);display:none;place-items:center;cursor:pointer;
  box-shadow:var(--shadow);transition:background .3s ease,border-color .3s ease,color .3s ease;
}
.steps-strip__btn:hover{background:var(--green);border-color:var(--green);color:#fff}
.steps-strip__btn svg{width:18px;height:18px}
@media(max-width:1200px){
  .steps-strip__btn{display:grid}
  .steps-strip__item{flex:0 0 230px}
  .steps-strip__track{cursor:grab}
}
@media(max-width:560px){.steps-strip__item{flex:0 0 210px}.steps-strip__sep{flex:0 0 22px}}

/* two fleet groups side by side (live pairs HGV with Dual Control Vehicles) */
.fleet-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px)}
.fleet-pair .head-block{margin-bottom:24px}
.fleet-pair h2{font-size:clamp(1.6rem,2.8vw,2.1rem)}
@media(max-width:860px){.fleet-pair{grid-template-columns:1fr}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat .num{font-family:var(--display);font-weight:800;font-size:clamp(2rem,4vw,3rem);color:var(--green);line-height:1}
.stat .lbl{color:var(--slate);font-weight:600;margin-top:.4em}
.section--ink .stat .lbl{color:#aab6c1}

/* ---- Services section (matched to live) -----------------------------------
   bg #f4f6f8 · eyebrow 20px/800 green uppercase (no pill) · h2 40px/800 left ·
   cards 576x253 white, radius 16px, image LEFT at 50% and full height ·
   title 26px/800 · LEARN MORE 16px/700 green uppercase · green CTA bar below. */
.section--services{background:rgb(244,246,248)}
.svc-eyebrow{display:block;font-size:20px;font-weight:800;color:var(--green);text-transform:uppercase;
  font-family:var(--display);margin-bottom:.35em}
.section--services .head-block h2{font-size:40px;color:#2f3a3d}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.svc-card{display:grid;grid-template-columns:50% 1fr;background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:rgba(47,58,61,.1) 0 10px 30px -5px;transition:transform .4s ease,box-shadow .3s ease}
.svc-card:hover{transform:translateY(-3px);box-shadow:rgba(47,58,61,.16) 0 16px 40px -6px}
.svc-card img{width:100%;height:100%;object-fit:cover;display:block}
.svc-card__body{padding:28px 30px;display:flex;flex-direction:column;justify-content:center}
.svc-card__body h3{font-size:26px;font-weight:800;color:#2f3a3d;margin-bottom:.4em}
.svc-card__body p{color:var(--slate);font-size:16px;margin-bottom:1.3rem}
.svc-more{display:inline-flex;align-items:center;gap:.5em;font-size:16px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;color:var(--green);margin-top:auto}
.svc-more svg{width:.7em;height:.7em;fill:currentColor;transition:transform .3s ease}
.svc-card:hover .svc-more svg{transform:translateX(4px)}
/* full-width green CTA bar */
.svc-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:var(--green);border-radius:16px;padding:26px 32px;margin-top:34px;
  transition:background .3s ease}
.svc-bar:hover{background:var(--green-600)}
.svc-bar span:first-child{font-family:var(--display);font-weight:800;font-size:clamp(1.15rem,2vw,1.5rem);color:#fff}
.svc-bar__go{flex:none;width:56px;height:56px;border-radius:50%;background:#fff;display:grid;place-items:center}
.svc-bar__go svg{width:16px;height:16px;fill:var(--green)}
@media(max-width:980px){
  .svc-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .svc-card{grid-template-columns:1fr}
  .svc-card img{height:190px}
  .svc-bar{flex-direction:column;text-align:center}
}

/* ---- Coverage section: light, so the map blends into the page -------------- */
.section--coverage{background:#fff}
.section--coverage .split__media img{box-shadow:none;border-radius:0}

/* ---- "Prefer to talk?" card ----------------------------------------------- */
/* Boxed off and spanning the full width of its column, avatars left / text right. */
.talk-box{display:grid;grid-template-columns:auto auto;gap:22px;align-items:center;
  justify-content:center;                       /* group centred inside the box */
  background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:rgba(47,58,61,.08) 0 10px 30px -8px;padding:30px 28px;margin-top:1.8rem;width:100%}
.talk-box img{width:130px;height:auto;flex:none}
.talk-box__body h3{font-size:1.5rem;margin-bottom:.15em;color:#2f3a3d}
.talk-box__body p{color:var(--slate);margin-bottom:.5rem}
.talk-box__tel{display:inline-block;color:var(--green-700);font-weight:800;font-size:1.35rem;
  font-family:var(--display);transition:color .3s ease}
.talk-box__tel:hover{color:var(--green-600)}
@media(max-width:560px){
  .talk-box{grid-template-columns:1fr;text-align:center;justify-items:center}
}

/* ---- Process section (matched to live) ------------------------------------ */
.section--process{background:rgb(244,246,248)}
.section--process .head-block h2{font-size:40px;color:#2f3a3d}
.proc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.proc-card{background:#fff;border-radius:16px;border-bottom:4px solid var(--green);
  box-shadow:rgba(47,58,61,.1) 0 10px 30px -5px;padding:36px 32px 40px;text-align:center;
  transition:transform .4s ease,box-shadow .3s ease}
.proc-card:hover{transform:translateY(-3px);box-shadow:rgba(47,58,61,.16) 0 16px 40px -6px}
.proc-card__n{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:#2f3a3d;color:#fff;font-family:var(--display);font-weight:800;font-size:1.3rem;
  margin:0 auto 20px}
.proc-card h3{font-size:1.5rem;color:#2f3a3d;margin-bottom:.5em}
.proc-card p{color:var(--slate);font-size:16px;margin-bottom:0}
@media(max-width:900px){.proc-grid{grid-template-columns:1fr}}

/* ---- Fleet section (matched to live) --------------------------------------
   White background, left-aligned 40px heading, tiles = image on top with the
   label BELOW on a white card (live tile label 22px/800 #2f3a3d). */
.section--fleet{background:#fff}
.section--fleet .head-block h2{font-size:40px;color:#2f3a3d}
.fleet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.fleet-card{background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:rgba(47,58,61,.1) 0 10px 30px -5px;transition:transform .4s ease,box-shadow .3s ease}
.fleet-card:hover{transform:translateY(-3px);box-shadow:rgba(47,58,61,.16) 0 16px 40px -6px}
.fleet-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.fleet-card span{display:block;padding:20px 22px;font-family:var(--display);font-weight:800;
  font-size:22px;color:#2f3a3d}
@media(max-width:980px){.fleet-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fleet-grid{grid-template-columns:1fr}}

/* ---- FAQ accordion -------------------------------------------------------- */
.faq{max-width:840px;margin-inline:auto;display:grid;gap:14px}
.faq__item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.faq__q{width:100%;text-align:left;background:none;border:none;padding:22px 26px;font-family:var(--display);font-weight:800;font-size:1.08rem;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq__q::after{content:'';flex:none;width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2379b949' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;transition:.3s}
.faq__item.open .faq__q::after{transform:rotate(45deg)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 26px}
.faq__a p{color:var(--slate);padding-bottom:22px;margin:0}
.faq__item.open .faq__a{max-height:640px}

/* ---- Forms ---------------------------------------------------------------- */
.form-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:clamp(26px,4vw,42px);border:1px solid var(--line)}
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;font-size:.92rem;margin-bottom:6px;color:var(--ink-800)}
.field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:1rem;padding:13px 15px;border:1.5px solid var(--line);border-radius:11px;background:#fbfcfd;color:var(--ink);transition:border-color .3s ease,background .3s ease,box-shadow .3s ease}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green);background:#fff;box-shadow:0 0 0 4px rgba(121,185,73,.14)}
.field textarea{resize:vertical;min-height:120px}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-status{padding:14px 18px;border-radius:11px;font-weight:600;margin-bottom:16px}
.hp{position:absolute;left:-9999px}

/* ---- CTA band ------------------------------------------------------------- */
.cta-band{background:linear-gradient(120deg,var(--ink) 0%,#16232f 100%);color:#fff;border-radius:var(--radius-lg);padding:clamp(40px,6vw,72px);text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:'';position:absolute;width:420px;height:420px;background:radial-gradient(circle,rgba(121,185,73,.3),transparent 70%);top:-160px;right:-120px}
.cta-band h2{color:#fff;position:relative}
.cta-band p{color:#c3ccd4;max-width:52ch;margin-inline:auto;position:relative}
.cta-band .hero__cta{justify-content:center}

/* ---- Footer --------------------------------------------------------------- */
/* Matched to the live site: background #2f3a3d (sampled), logo 93px tall,
   headings 20px/800 Manrope, and brand-green icons beside the phone and email. */
/* live: links 17.6px/400 #aaa · blurb 16px/400 #bbb lh1.6 · phone 22px/700 green */
.site-footer{background:#2f3a3d;color:#aaa;font-size:17.6px;font-weight:400;padding:clamp(56px,7vw,80px) 0 30px}
/* Column geometry MEASURED off live at 1440px, 2026-08-14. Live's footer content
   spans 124->1316 (1192px, wider than the 1152px page container) and its four
   columns start at 124 / 521 / 730 / 939 — i.e. widths 397 / 209 / 209 / 377.
   Ours started the Contact column at 1038 with only 228px of room, so
   hello@nationwideaccidenthire.com (258px at 16px Inter) wrapped. Live gives it
   377px and it sits on one line.
   gap:0 is deliberate — live's columns are adjacent and the visual gutter comes
   from the text being narrower than its column, exactly as here. */
/* the footer-specific override is now redundant — --container is 1240 site-wide */
.footer-grid{display:grid;grid-template-columns:397fr 209fr 209fr 377fr;gap:0}
.site-footer img{height:93px;width:auto;margin-bottom:22px}
/* live: Manrope 20px/800, line-height 24px, letter-spacing NORMAL. Ours was
   inheriting the global heading line-height:1.1 (=22px) and adding .01em of
   tracking (=0.2px) — same font file, but tighter leading and wider letters. */
.site-footer h5{font-family:var(--display);color:#fff;font-size:20px;font-weight:800;line-height:24px;letter-spacing:normal;margin-bottom:18px}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:12px;font-size:17.6px;font-weight:400}
.site-footer a{transition:color .4s ease}
.site-footer a:hover{color:var(--green)}
.footer-note{max-width:38ch;font-size:16px;color:#bbb;line-height:1.6}
/* phone / email rows, with the 16x16 green icons the live footer uses */
.footer-contact li{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start}
/* margin-top centres the icon on the FIRST line of its row. The contact text is
   16px at line-height 1.6 (=25.6px), so (25.6-16)/2 = 4.8px. The old 9px was
   tuned for the 22px phone number and now reads low. */
.footer-contact svg{width:16px;height:16px;fill:var(--green);margin-top:5px}
/* MEASURED off live's footer: the contact column is 16px/400 Inter in a near-white
   #f4fbf0 — NOT a big green Manrope number. Ours was running the phone at
   22px/700 green and the email at 18px, which is what read as heavy and oversized
   against the 18px link columns beside it. */
.footer-contact li{font-size:16px}
.footer-contact li a{font-size:16px;font-weight:400;font-family:var(--body);color:#f4fbf0}
.footer-contact li a:hover{color:var(--green)}
.footer-contact li.no-icon{grid-template-columns:1fr}
/* subtle 'Site by CREATE' credit, bottom-right under the strapline */
.footer-bottom__right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right}
/* plain inline layout, not flex: one line, icon optically centred on the text */
.by-create{display:inline;white-space:nowrap;font-size:.82rem;color:#8b959a;
  letter-spacing:.04em;line-height:1;transition:opacity .3s ease;opacity:.9}
/* The mark was 15px and pushed 3px BELOW the text baseline by vertical-align:-3px,
   so it sat low and read as small and out of line. An <img> baseline IS its bottom
   edge, so `vertical-align:baseline` puts the bottom of the logo exactly on the
   same line as "Site by" and "CREATE". Height matched to the CREATE word box (18px)
   so the mark and the word read at the same size.
   `width:auto` is REQUIRED — the img carries width/height attributes for CLS, and
   any CSS height without a paired width lets the attribute win and distorts it. */
.by-create img{height:18px;width:auto;display:inline-block;vertical-align:baseline;margin:0 6px}
.by-create strong{font-family:var(--display);font-weight:800;color:var(--green);letter-spacing:.02em}
.by-create:hover{opacity:1}
.by-create:hover strong{color:var(--green-600)}
@media(max-width:560px){.footer-bottom__right{align-items:flex-start;text-align:left}}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.88rem}
/* the copyright line itself matches live exactly: Inter 16px/400, #777.
   Ours was inheriting the bar's .88rem (14.08px) and the footer's #aaa. */
.footer-bottom>span:first-child{font-size:16px;line-height:25.6px;color:#777}

/* ---- Misc ----------------------------------------------------------------- */
/* Policy prose is not marketing copy: a numbered legal sub-section must not
   render at the 40px section scale. Live measures 28px/700 on the privacy and
   terms pages (its complaints page uses 32px — an Elementor inconsistency, not
   intent, so all three take one value here). Ours was inheriting 40px/800 and
   privacy alone had THIRTEEN of them. */
.prose h2{margin-top:2em;font-size:28px;font-weight:700}
.prose h3{margin-top:1.6em}
.prose p,.prose li{color:var(--slate)}
.prose ul{padding-left:1.2em}
/* SCROLL REVEALS ARE OFF — the live site has no entrance animations at all
   (0 elementor-invisible elements site-wide, 0 CSS keyframes, _animation:"none"),
   so sections must simply be present as you scroll. The .reveal classes are left
   on the markup, inert, so this is a 3-line change to put back if wanted:
     .js .reveal{opacity:0;transform:translateY(24px);transition:.7s cubic-bezier(.2,.7,.2,1)}
     .js .reveal.in{opacity:1;transform:none}
   ...and restore the IntersectionObserver block in assets/js/main.js. */

/* ---- Per-page heading sizes, MEASURED off live 2026-08-14 ------------------
   Live is NOT internally consistent: the same component renders 19px on the
   partners page and 26px on services. Rather than force one scale and call it
   "tidy", each page carries a body class and takes live's own value. Measured
   at 1440px on the live mirror, not estimated.
   Body classes: .page-about .page-contact .page-faqs .page-our-fleet
   .page-partners .page-for-drivers .page-services                            */
.page-services .media-card h3,
.page-services .svc-row__body h3{font-size:26px}  /* live 26 · was 20 */
.page-services .card h3{font-size:26px}           /* "Why Choose Us" cards, live 26 */
.page-about .step h3,
.page-about .proc-card h3{font-size:26px}         /* live 26 · was 22 */
.page-for-drivers .step h3{font-size:26px}        /* live 26 · was 22 */
.page-partners .form-card h3{font-size:26px}      /* "Submit Your Details", live 26 */
/* live renders the six For Drivers strip steps as small h3s, 16-18px */
.page-for-drivers .steps-strip__item h3{font-size:17px;font-weight:700;margin:0;line-height:1.35}
/* HGV + Dual Control were paired into a narrower block and lost the 40px scale */
.fleet-pair h2{font-size:40px}
.page-partners .media-card h3{font-size:23px}     /* live 23 · was 20 */
.page-partners .card h3{font-size:19px}           /* live 19 · was 22 */
.page-contact .card h3{font-size:26px}            /* live 26 · was 17 */
.h3--live26{font-size:26px}                       /* services "Repair Network Coverage" */
/* live drops these two mid-page about headings to 32px, not the 40px section scale */
.page-about .h2--live32{font-size:32px}
/* live sets the three "immediate steps" as h2 at 26px, not h3 */
.page-for-drivers .step-head{font-size:26px}

/* ---- Responsive ----------------------------------------------------------- */
/* The 1201-1300px gap-squeeze band that used to live here is GONE (2026-08-14).
   It existed only because the claim line ate 131px of the header row: at full
   28px/14px gaps the row measured 1259px and could not fit 1201. With the claim
   line moved to .topbar the row's natural width is 1128px, so it fits at 1201
   with 73px to spare and the gaps never need tightening. Do not reinstate it
   without re-measuring — if a nav item is ever added, measure first. */


/* Header fits its content at >=1200px; below that the burger takes over (matching
   live), so the desktop row never has to survive a band it cannot fit.
   Historic note: `overflow-x:clip` on body means an over-wide row does NOT show up
   in a scrollWidth test — it silently cuts Start Claim / Partner Login off-screen.
   Measure the button's right edge against the container's, never scrollWidth. */

@media(max-width:980px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  /* gap:0 is only right for the 4-across desktop row; stacked needs air back */
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
  .split{grid-template-columns:1fr}
  .split--rev .split__media{order:0}
  .stats{grid-template-columns:repeat(2,1fr)}
}
/* The burger takes over at <=1200px — MEASURED off the live site, which hides its
   desktop nav and shows .hamburgerBtn from exactly 1200px down. Keeping the desktop
   row past that is what made the header crowd and clip its own CTAs. */
@media(max-width:1200px){
  .nav,.header-cta .btn{display:none}
  .nav-toggle{display:inline-flex;margin-left:auto}
  .header-cta{margin-left:0}
  /* mobile off-canvas nav */
  /* justify-content MUST be reset here: the desktop rule centres the row, and on
     this column panel that would centre the links vertically inside a scrolling
     box — pushing the top items out of reach when the list is taller than the
     viewport. flex is reset too (inert under position:fixed, but keep it honest). */
  .nav{position:fixed;inset:0 0 0 auto;width:min(86vw,360px);background:#fff;flex-direction:column;align-items:stretch;justify-content:flex-start;flex:none;gap:0;padding:96px 26px 40px;box-shadow:var(--shadow-lg);transform:translateX(100%);transition:.3s;display:flex;z-index:70;overflow-y:auto}
  .nav.open{transform:none}
  .nav-close{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:1.1rem}
  .nav a.is-active::after{display:none}
  .has-sub>a::after{display:none}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:0 0 8px 14px;min-width:0}
  .submenu a{padding:10px 0;border:none;font-size:1rem}
  .nav .mobile-cta{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
  .nav .mobile-cta .btn{flex:1}
  /* MUST stay below .site-header's z-index (60). The panel lives INSIDE the header,
     and the header is position:sticky with a z-index — that creates a stacking
     context, so the panel's z-index:70 is resolved inside it and the whole header
     paints at 60. A backdrop at 65 therefore covered the open panel and swallowed
     every tap (links closed the menu instead of navigating). At 55 the page dims,
     the panel is tappable, and the ☰ stays reachable in the header — as on live. */
  .nav-backdrop{position:fixed;inset:0;background:rgba(10,17,24,.5);opacity:0;visibility:hidden;transition:.3s;z-index:55}
  .nav-backdrop.open{opacity:1;visibility:visible}
}
@media(max-width:860px){
  .grid-3{grid-template-columns:1fr}
  .promo{grid-template-columns:1fr;margin-top:-40px}
}
@media(max-width:560px){
  .grid-4,.grid-2{grid-template-columns:1fr}
  .field--row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .footer-bottom{flex-direction:column}
  /* the two items stop fitting side by side around here; the phone is the one
     that earns the space, so the email drops and the claim line centres */
  .topbar-mail{display:none}
  .topbar-claim{margin-inline:auto}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* live renders this eyebrow as an h3 at 20px, not a plain span */
.eyebrow--h{display:inline-block;font-size:20px;margin:0 0 .6em}

/* ---- /about/ — blocks that mirror live's layout ---------------------------- */
/* Live's About page, recreated 2026-08-14. Three shapes it uses that nothing
   else on the site does: an image collage, a full-bleed green/dark split band,
   and a CTA panel paired with a photo. */

/* image collage: one wide image, two half-width beneath (live: 556x200 + 2x 268x160) */
.about-collage{display:grid;gap:16px}
.about-collage img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow);display:block;object-fit:cover}
.about-collage>img{aspect-ratio:556/200}
.about-collage__pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.about-collage__pair img{aspect-ratio:268/160}
.about-tp{max-width:320px;margin-top:1.4rem}
.about-tp:empty{display:none}

/* fact cards under "Proudly supporting UK drivers" — live uses a green underline */
.fact-card{text-align:center;padding:28px 24px;border-bottom:3px solid var(--green)}
/* Live's fact-card icons are SOLID FILLED glyphs in brand green with NO tinted
   background chip — these are its own inline SVGs, lifted verbatim (fill swapped
   to currentColor). The generic `.ico` style puts a pale rounded square behind
   the mark, which is wrong here, so the background is cleared explicitly. */
.fact-card .ico{display:inline-flex;align-items:center;justify-content:center;width:auto;height:56px;
  background:none;border-radius:0;padding:0;color:var(--green);margin-bottom:16px}
.fact-card .ico svg{width:auto;height:56px;display:block}
.fact-card p{margin:0;color:var(--slate);font-size:.98rem;line-height:1.55}
.fact-card strong{color:var(--ink)}

/* full-bleed two-tone band: green half + dark half, as live renders it */
.about-band{display:grid;grid-template-columns:1fr 1fr}
.about-band__half{padding:clamp(44px,6vw,86px) 0}
.about-band__half--green{background:var(--green);color:#fff}
.about-band__half--dark{background:#2f3a3d;color:#dbe3ea}
.about-band__half h2{color:#fff;margin-bottom:1.1em}
.about-band__half p{color:rgba(255,255,255,.92);margin-bottom:1.1rem}
.about-band__half strong{color:#fff}
.about-band__inner{max-width:calc(var(--container)/2);padding-inline:clamp(24px,4vw,48px);margin-inline:0}
.about-band__half--green .about-band__inner{margin-left:auto;padding-right:clamp(24px,4vw,64px)}
.about-band__half--dark .about-band__inner{margin-right:auto;padding-left:clamp(24px,4vw,64px)}
.about-band .btn{margin-top:.8rem}

/* numbered process cards (live: dark circle, centred, green underline) */
.proc-card{border-bottom:3px solid var(--green)}
.proc-num{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--display);font-weight:800;margin-bottom:16px}
.proc-card h3{margin-bottom:.5em}
.proc-card p{color:var(--slate);margin:0}

/* Closing CTA — geometry MEASURED off live: section 1440x500, the photo block is
   800px wide starting at x=640 (55.56%), and the DIAGONAL is a clip-path on the
   image itself: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%). The green is the
   section background showing through the clipped-away top-left triangle. */
.about-cta{position:relative;background:var(--green);color:#fff;min-height:500px;
  display:flex;align-items:center;overflow:hidden}
.about-cta__media{position:absolute;top:0;right:0;width:55.56%;height:100%}
.about-cta__media img{width:100%;height:100%;object-fit:cover;display:block;
  clip-path:polygon(15% 0%,100% 0%,100% 100%,0% 100%)}
.about-cta__panel{position:relative;z-index:1;width:100%}
.about-cta__inner{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px}
/* Cap the TEXT only — live's copy column is ~460px, so its h2 wraps after "Your".
   A blanket max-width on every child also caps the button row and forces the two
   buttons to stack; live keeps them side by side. */
.about-cta h2,.about-cta p{max-width:460px}
.about-cta h2{color:#fff}
.about-cta p{color:rgba(255,255,255,.95)}
/* live: white button with GREEN text, dark button #2f3a3d with white — both with a chevron */
.about-cta .btn--light{color:var(--green)}
.about-cta .btn svg{width:.7em;height:.7em}

@media(max-width:860px){
  .about-band{grid-template-columns:1fr}
  .about-band__inner,.about-cta__inner{max-width:none;margin-inline:auto;padding-inline:24px}
  /* .about-cta is flex with an ABSOLUTE media layer, not a grid — leaving the
     photo absolute here would float it over the copy on a phone. Stack instead:
     text first, photo below at full width, and drop the diagonal (it only reads
     as a diagonal when the panel sits beside the image). */
  .about-cta{display:block;min-height:0}
  .about-cta__media{position:static;width:100%;height:280px}
  .about-cta__media img{clip-path:none}
  .about-cta__panel{padding-block:clamp(40px,8vw,64px)}
  .about-cta h2,.about-cta p{max-width:none}
}

/* ---- /services/ — live's layout ------------------------------------------- */
/* Live stacks the four services as full-width horizontal cards with the image
   flush to the card's left edge (596x335 in a 1192 card), NOT a 4-across grid
   of vertical cards. Measured off live 2026-08-14. */
.svc-rows{display:grid;gap:26px;margin-top:clamp(32px,4vw,48px)}
/* shadow + radius MEASURED off live: rgba(47,58,61,.1) 0 10px 30px -5px, 16px.
   The -5px spread is what makes it read as a soft fade rather than a hard drop;
   ours had no spread and a colder, tighter shadow. Live has no border either. */
.svc-row{display:grid;grid-template-columns:1fr 1fr;background:#fff;
  border-radius:16px;overflow:hidden;
  box-shadow:rgba(47,58,61,.1) 0 10px 30px -5px;
  transition:box-shadow .3s ease,transform .4s ease}
.svc-row:hover{box-shadow:rgba(47,58,61,.16) 0 18px 44px -6px;transform:translateY(-3px)}
.svc-row__media{position:relative;min-height:335px}
.svc-row__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.svc-row__body{padding:clamp(28px,3vw,44px);display:flex;flex-direction:column;justify-content:center}
.svc-row__body h3{margin-bottom:.5em}
.svc-row__body p{color:var(--slate);margin-bottom:.9rem}
.svc-row .link-arrow{color:var(--green-700);font-weight:700}

/* "Why Choose Us" — live puts its own green icon to the LEFT of the copy,
   in a white card with a green bottom rule. Icons lifted from live verbatim. */
.why-grid{gap:24px;margin-top:clamp(28px,3vw,40px)}
.why-card{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  padding:28px 30px;border-bottom:3px solid var(--green)}
.why-card__ico{color:var(--green);display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:none}
.why-card__ico svg{width:auto;height:34px;max-width:38px;display:block}
.why-card h3{margin-bottom:.35em}
.why-card p{color:var(--slate);margin:0}

@media(max-width:860px){
  .svc-row{grid-template-columns:1fr}
  .svc-row__media{min-height:220px}
  /* full-width / 0.806 would be a ~1000px-tall map on a tablet — cap it and let
     the image size itself instead of reserving the desktop aspect */
  .svc-row__media--map{aspect-ratio:auto;padding-block:24px}
  .svc-row__media--map picture{width:min(90%,420px)}
}
/* Repair-network card. MEASURED off live: the row is grid 586px/586px with
   align-items:center, and the MAP fills the whole left column at its natural
   aspect — 586x727 from an 800x993 source — so the IMAGE sets the row height
   (727px), not the text. Boxing it with padding and object-fit:contain (what we
   had) shrinks it to the text's height and it reads far too small. */
.svc-row--static{cursor:default;align-items:center}
/* Dom 2026-08-14: keep the CARD at the full-map height but drop the image to 90%,
   so there is breathing space above and below it. The aspect-ratio here is what
   holds the card open — it reserves the height a 100% map would occupy, and the
   image then centres inside it at 90%. */
.svc-row__media--map{position:static;min-height:0;background:none;padding:0;
  aspect-ratio:586/727;display:flex;align-items:center;justify-content:center}
.svc-row__media--map picture{display:block;width:90%}
.svc-row__media--map img{position:static;inset:auto;width:100%;height:auto;object-fit:fill}
/* a bit more air between the paragraphs in this card than the 1rem site default */
.svc-row--static .svc-row__body p{margin-bottom:1.35rem}
.svc-row--static .svc-row__body p:last-child{margin-bottom:0}

/* Mobile cap for the repair-network map. This MUST come last: the desktop
   `.svc-row__media--map picture{width:90%}` rule is declared after the 860px
   media block, so at equal specificity it was winning and leaving a ~900px-tall
   map on a tablet. Source order decides. */
@media(max-width:860px){
  .svc-row__media--map{aspect-ratio:auto;padding-block:28px}
  .svc-row__media--map picture{width:min(88%,400px);margin-inline:auto}
}

/* Long buttons must be allowed to wrap on narrow screens. `.btn` is
   white-space:nowrap, so "Arrange Comparable Replacement" (400px at btn--lg)
   forced its grid track wider than a 327px phone column and pushed the page
   sideways. min-width:0 lets the track shrink; wrapping does the rest.
   NOTE: `body{overflow-x:clip}` HIDES this from documentElement.scrollWidth —
   it only shows up if you measure element rects against the viewport. */
.split>*,.grid>*,.hero__cta>*{min-width:0}
@media(max-width:560px){
  .btn{white-space:normal;text-align:center}
  .hero__cta .btn{width:100%}
}

/* hello@nationwideaccidenthire.com is 32 characters and will not fit a 327px
   phone column at 15px/700 — it pushed the contact card ~29px past the viewport.
   Long addresses must be allowed to break. */
.page-contact .card a[href^="mailto:"],
.footer-contact a[href^="mailto:"],
.topbar-mail{overflow-wrap:anywhere}

/* ---- /our-fleet/ tiles ----------------------------------------------------
   MEASURED off live: the label is NOT overlaid on the photo. It sits BELOW the
   image as static dark text — colour rgb(47,58,61), 22px/800, inset 20px from
   the tile's left edge, ~21px under the image. Images render 276x206.
   The home page keeps the overlaid `.tile` treatment (signed off), so this is a
   separate class rather than a change to `.tile`. */
/* MEASURED off live: the tile is a CARD — 276x304, radius 15px, shadow
   rgba(47,58,61,.1) 0 10px 30px -5px — wrapping the image AND the label. The
   image is flush to the card's top edge (no inset, no radius of its own; the
   card clips it), and the label sits in a 20px 20px 25px padded block beneath.
   Card fill is TRANSPARENT — pixel-sampled live, its interior is the section
   colour; the card reads as a card purely from the shadow.
   All four cards equalise to the tallest (a 2-line label makes 304px), which is
   why they must stretch rather than size to their own content. */
.fleet-tile{display:flex;flex-direction:column;height:100%;color:inherit;
  border-radius:15px;box-shadow:rgba(47,58,61,.1) 0 10px 30px -5px;overflow:hidden;
  transition:box-shadow .3s ease,transform .4s ease}
.fleet-tile:hover{box-shadow:rgba(47,58,61,.18) 0 16px 40px -6px;transform:translateY(-3px)}
.fleet-tile img{width:100%;aspect-ratio:276/206;object-fit:cover;display:block;
  border-radius:0;box-shadow:none}
/* Dom 2026-08-14: label dropped to 20px. Live measures 22px here — deliberate
   preference, not a parity miss. */
.fleet-tile h3{font-size:20px;font-weight:800;color:#2f3a3d;
  margin:0;padding:20px 20px 25px;line-height:1.25}
.fleet-tile:hover h3{color:var(--green-700)}
/* live left-aligns the category headings and uses no eyebrow */
.page-our-fleet .head-block{text-align:left}
.page-our-fleet .head-block .lead{max-width:none}

/* Live's service DETAIL pages run their step-card h3 at 20px (the services HUB
   uses 26px) — measured, and ours were inheriting 22px. */
.page-service-detail .card h3{font-size:20px}
/* Live marks the privacy sub-items (cookie list, 11.x, 12.x) as h6 at 19px;
   ours are h3 and were rendering at 22px. */
.page-privacy .prose h3{font-size:19px}

/* "Prefer to Talk It Through?" needs 494px on one line at 40px Manrope; the CTA
   copy column is capped at 460px so it wrapped. There is 516px of clear room
   before the diagonal starts, so widen the heading cap on this page only —
   the other CTAs keep 460px, where live wraps "Ready to Arrange Your Vehicle?"
   after "Your". Capped in px, so it still wraps normally on a phone. */
.page-claim .about-cta h2{max-width:500px}

/* ==========================================================================
   MOBILE TOUCH TARGETS — full-site pass (Dom, 2026-08-14)
   Every rule below fixes a control MEASURED under 44px on a 375px viewport.
   Appended LAST on purpose: several of these override declarations that live
   inside earlier @media blocks, and at equal specificity source order decides.
   Scoped to <=1200px — the width at which the burger takes over from the
   desktop nav (see the note above that media block).

   Deliberately NOT touched, because they already pass:
     .nav a 57px · .submenu a 46px · .nav .mobile-cta .btn 54px · form
     submits 65-86px · .sc-mail 47px
   Deliberately NOT touched, because they should not be: links inline inside
   prose. WCAG 2.5.8 exempts them, and padding them breaks the line box.
   ========================================================================== */
@media(max-width:1200px){
  /* the burger IS the mobile navigation, and it was the worst offender at 35px */
  .nav-toggle{min-height:44px}
  /* the drawer's close button was 42x42 — two pixels short of the minimum */
  .nav-close{width:44px;height:44px}
  /* The 24/7 phone number is this business's primary mobile action and was a
     26px target. The bar was 48px (min-height 38 + 5px padding each side), so a
     44px link pushed it to 54px — padding-block drops to 2px to hold the bar at
     its original 48px. Baseline alignment has to become centre too, or the
     taller link drags the "24/7 CLAIM LINE" label off its line. */
  .topbar-inner{padding-block:2px}
  .topbar-claim{align-items:center}
  .topbar-claim a{display:inline-flex;align-items:center;min-height:44px}
  /* Footer columns: links were 21px inline, now 42px. Not pushed to a full 44
     with extra padding — the gap drops 12px -> 2px to pay for most of the growth,
     so the pitch goes 33px -> 44px and the stacked mobile footer grows by about
     150px rather than 300. WCAG 2.5.8 AA wants 24x24; 42px clears it comfortably. */
  .site-footer ul{gap:2px}
  .site-footer li a{display:inline-block;padding-block:7px}
  /* the "Prefer to talk?" phone number — 35px */
  .talk-box__tel{display:inline-flex;align-items:center;min-height:44px}
  /* the CREATE credit — 20px; padding grows the hit area without moving anything */
  .by-create{padding-block:6px}
}

/* Second pass, same audit (Dom, 2026-08-14). These are the standalone links the
   first pass missed. Everything left under 24px after this is a link sitting
   INSIDE body copy — the legal pages' contact emails and phone numbers in their
   prose lists — which WCAG 2.5.8 exempts and which cannot be padded without
   breaking the line box. */
@media(max-width:1200px){
  /* the breadcrumb is navigation, on every inner page, and was 22px */
  .breadcrumb a{display:inline-flex;align-items:center;min-height:28px}
  /* .topbar-mail is handled in its own BOUNDED query below — putting a display
     value on it here re-showed it under 560px, where it is meant to be hidden. */
  /* the Trustpilot bar's own review link, 20px */
  .trust-bar .trustpilot-widget a{display:inline-block;padding-block:5px}
  /* the contact page's tel:/mailto: card links — standalone actions beside a
     heading, not prose, so they get the full 44px */
  .page-contact .card a[href^="tel:"],.page-contact .card a[href^="mailto:"]{
    display:inline-flex;align-items:center;min-height:44px;
  }
}

/* The utility-bar email needs BOTH ends bound. `.topbar-mail{display:none}` lives
   in @media(max-width:560px); a later max-width:1200px rule that sets any display
   value wins on source order and re-shows it on a phone — where the address then
   breaks mid-word (there is an `overflow-wrap:anywhere` on it) and turns the bar
   into three lines. So: only from 561px up, where it is actually visible. */
@media(min-width:561px) and (max-width:1200px){
  .topbar-mail{display:inline-flex;align-items:center;min-height:44px}
}

/* ---- Cookie consent bar ---------------------------------------------------
   Fixed to the bottom rather than a modal: it must not trap focus or block the
   page, and a visitor who ignores it still gets the site (with no analytics
   cookies set). Both buttons are the same size — an ICO requirement, since a
   banner where refusing is harder than accepting is not freely given consent. */
.cookie-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:#2f3a3d;color:#e6ebed;border-top:3px solid var(--green);
  box-shadow:0 -8px 30px rgba(0,0,0,.28);
  transform:translateY(110%);transition:transform .3s ease;
}
.cookie-bar.is-in{transform:none}
.cookie-bar__inner{
  max-width:var(--container);margin-inline:auto;padding:20px 24px;
  display:flex;gap:22px;align-items:center;flex-wrap:wrap;
}
.cookie-bar__text{margin:0;flex:1 1 420px;min-width:0;font-size:15px;line-height:1.55;color:#e6ebed}
.cookie-bar__text a{color:var(--green);text-decoration:underline;text-underline-offset:2px}
.cookie-bar__actions{display:flex;gap:12px;flex:none}
.cookie-bar .btn{min-height:44px}
.cookie-bar .btn--ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.cookie-bar .btn--ghost:hover{border-color:var(--green);color:var(--green)}
@media(max-width:680px){
  .cookie-bar__inner{padding:16px 20px;gap:14px}
  .cookie-bar__text{flex:1 1 100%;font-size:14px}
  .cookie-bar__actions{width:100%}
  .cookie-bar__actions .btn{flex:1}
}
@media(prefers-reduced-motion:reduce){
  .cookie-bar{transition:none}
}

/* ==========================================================================
   NEWS (/news/) — added 2026-08-20. Three-column grid of article cards.
   Built on the site's existing card language (15px radius, same shadow) so it
   reads as part of the site rather than a bolt-on.
   ========================================================================== */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
/* min-width:0 or a long unbroken word in a card pushes the whole PAGE sideways
   rather than the card — the grid trap this project has hit before. */
.news-grid>*{min-width:0}
.news-card{display:flex;flex-direction:column;background:#fff;border-radius:15px;overflow:hidden;
  box-shadow:rgba(47,58,61,.1) 0 10px 30px -5px;transition:transform .35s ease,box-shadow .35s ease}
.news-card:hover{transform:translateY(-4px);box-shadow:rgba(47,58,61,.16) 0 18px 40px -8px}
.news-card__media{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--bg-soft)}
.news-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.news-card:hover .news-card__media img{transform:scale(1.04)}
.news-card__ph{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--bg-soft),#e6ebee)}
.news-card__body{padding:26px;display:flex;flex-direction:column;flex:1}
.news-card__meta{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green-600);margin-bottom:.7rem}
.news-card h3{font-size:1.2rem;margin-bottom:.5em;line-height:1.3}
.news-card h3 a{color:var(--ink)}
.news-card h3 a:hover{color:var(--green-600)}
.news-card p{color:var(--slate);font-size:.98rem;margin-bottom:1.1rem}
/* pushed to the bottom so cards of differing text length still line their CTAs up */
.news-card__more{margin-top:auto;align-self:flex-start;font-weight:700;color:var(--green-600);
  display:inline-flex;align-items:center;min-height:44px}
.news-card__more:hover{color:var(--green-700)}
.news-article__meta{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-600)}
.news-article__img{width:100%;height:auto;border-radius:15px;margin:1.4rem 0 2rem}
@media(max-width:980px){
  .news-grid{grid-template-columns:repeat(2,1fr);gap:24px}
}
@media(max-width:640px){
  .news-grid{grid-template-columns:1fr}
  .news-card__body{padding:22px}
}