/* ==========================================================================
   Nationwide Accident Hire — SUPERCARS (prestige division)
   A dark sub-brand skin layered over the main design system.
   Same brand: Manrope + Inter, brand green #79b949, same logo, same components.
   Own style : near-black canvas (a deeper cut of the brand ink used on the
               Partner Login button), hairline rules, caption plates,
               cinematic full-bleed breaks.
   Scoped to .sc — nothing here affects the rest of the site.
   ========================================================================== */

.sc{
  /* the "dark black" — same blue-black family as --ink (#111a24), taken deeper */
  --sc-black:#070a0e;
  --sc-black-2:#0b1016;
  --sc-surface:#111820;
  --sc-surface-2:#161f29;
  --sc-line:rgba(255,255,255,.11);
  --sc-line-strong:rgba(255,255,255,.2);
  --sc-text:#c3ccd4;
  --sc-text-dim:#8b97a3;
  --sc-white:#f4f7f9;

  background:var(--sc-black);
  color:var(--sc-text);
}

/* Headings, links and base type inside the dark skin ----------------------- */
.sc h1,.sc h2,.sc h3,.sc h4,.sc h5{color:#fff}
.sc p{color:var(--sc-text)}
.sc .lead{color:var(--sc-text)}
.sc strong{color:#fff}

/* Section rhythm ----------------------------------------------------------- */
.sc .section{padding:clamp(60px,8.5vw,116px) 0}
.sc .section--raise{background:var(--sc-black-2)}
.sc .section--edge{border-top:1px solid var(--sc-line)}

/* Micro-label: wide-tracked, green, with a rule. The signature of this skin. */
.sc-label{
  display:flex;align-items:center;gap:14px;
  font-family:var(--body);font-weight:700;font-size:12px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--green);
  margin-bottom:1.15rem;
}
.sc-label::after{content:'';flex:1;height:1px;background:var(--sc-line);max-width:180px}
.sc-label.center{justify-content:center}
.sc-label.center::before{content:'';flex:1;height:1px;background:var(--sc-line);max-width:180px}

/* Section head. Left-aligned heads run the FULL container width;
   only the centred variant is boxed to a tidy measure. */
.sc-head{margin-bottom:clamp(34px,4.6vw,58px)}
.sc-head h2{font-size:clamp(1.9rem,4.4vw,3.2rem);margin-bottom:.35em;text-wrap:balance}
.sc-head p{font-size:clamp(1.02rem,1.5vw,1.2rem);margin-bottom:0}
.sc-head--center{text-align:center;max-width:760px;margin-inline:auto}

/* ---- Dark header variant -------------------------------------------------- */
.site-header--dark{background:rgba(7,10,14,.86);border-bottom:1px solid var(--sc-line)}
.site-header--dark .nav a{color:#e2e8ee}
.site-header--dark .nav a:hover,.site-header--dark .nav a.is-active{color:var(--green)}
.site-header--dark .has-sub>a::after{color:var(--sc-text-dim)}
/* The utility bar sits above the dark header on this page too. #2f3a3d reads as
   a grey slab against the near-black canvas, so it takes the deeper cut instead.
   Scoped to body.sc — this file loads AFTER style.css, so an unscoped .topbar
   rule here would win site-wide at equal specificity. */
body.sc .topbar{background:var(--sc-black-2);border-bottom:1px solid var(--sc-line)}
body.sc .topbar-mail{color:var(--sc-text-dim)}
body.sc .topbar-mail:hover{color:#fff}
body.sc .topbar-claim span{color:var(--sc-text-dim)}
.site-header--dark .btn--dark{background:#fff;color:var(--sc-black)}
.site-header--dark .btn--dark:hover{background:var(--green);color:#fff}
.site-header--dark .submenu{background:var(--sc-surface);border-color:var(--sc-line)}
.site-header--dark .submenu a{color:#e2e8ee}
.site-header--dark .submenu a:hover{background:rgba(121,185,73,.14);color:var(--green)}
/* must track style.css's mobile-nav breakpoint (1200px, measured off the live site) */
@media(max-width:1200px){
  .site-header--dark .nav{background:var(--sc-black-2)}
  .site-header--dark .nav a{border-bottom-color:var(--sc-line)}
  .site-header--dark .nav .btn--ghost{color:#fff;border-color:var(--sc-line-strong)}
  .site-header--dark .nav-close{background:var(--sc-surface);border-color:var(--sc-line);color:#fff}
}

/* Nav marker used site-wide to flag the prestige page ----------------------- */
.nav a.nav-prestige{display:inline-flex;align-items:center;gap:.45em}
.nav a.nav-prestige::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 3px rgba(121,185,73,.2);flex:none;
}

/* ---- Trust bar (dark) ----------------------------------------------------- */
/* Dom 2026-08-14: the Trustpilot widget was invisible here. It renders DARK text,
   and this bar was #0b1016 (near-black), so a "slightly lighter" dark would not
   have fixed it — the band has to be genuinely light for the widget to read.
   Using the standard light bar also makes the trust strip identical on all 19
   pages, which is the rule everywhere else. */
.sc .trust-bar{background:var(--sc-white);border-bottom:1px solid var(--sc-line);color:var(--ink)}
.sc .trust-bar strong{color:var(--ink)}

/* ---- Hero — deliberately short ------------------------------------------- */
/* Dom 2026-08-14: the hero read as cramped — now 72vh (his 70-75 range) with the
   content vertically centred. min-height in vh, not height, so a long h1 or a
   small laptop viewport can still grow it rather than clipping the copy.
   NOTE: vh not dvh is deliberate here — this is a desktop-first hero and the
   mobile rule below caps it, so the iOS dynamic-toolbar problem doesn't bite. */
.sc-hero{position:relative;isolation:isolate;color:#fff;overflow:hidden;
  min-height:72vh;display:grid;align-items:center}
.sc-hero__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 58%}
.sc-hero::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(7,10,14,.55) 0%,rgba(7,10,14,.28) 42%,rgba(7,10,14,.92) 100%),
    /* Dom 2026-08-14: the copy now sits in a left column, so the horizontal scrim
       is heavier on the left (keeps white text legible) and much lighter from 55%
       out, which is what actually reveals the car on the right. */
    linear-gradient(90deg,rgba(7,10,14,.86) 0%,rgba(7,10,14,.7) 30%,rgba(7,10,14,.16) 62%,rgba(7,10,14,.22) 100%);
}
/* padding-block ONLY — a `padding` shorthand here would wipe .container's
   24px padding-inline and let the copy touch the screen edge on mobile. */
.sc-hero__inner{padding-block:clamp(44px,6vw,84px);width:100%}
.sc-hero h1{
  font-size:clamp(1.95rem,5.1vw,3.9rem);line-height:1.04;margin-bottom:.45em;
  text-wrap:balance;
}
.sc-hero h1 .accent{color:var(--green)}
.sc-hero p{font-size:clamp(1.05rem,1.7vw,1.3rem);color:#dfe6ec;margin-bottom:0}
.sc-hero .breadcrumb{color:#b3bec8}
.sc-hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:1.9rem}
.sc-hero__meta{
  display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:2rem;padding-top:1.5rem;
  border-top:1px solid var(--sc-line);font-size:.9rem;color:#b9c4cf;
}
/* the accent half of the headline gets its own line on wide screens; on small
   screens it wraps naturally and the break would only add dead height. */
.sc-hero h1 br{display:none}
@media(min-width:900px){.sc-hero h1 br{display:inline}}
/* Dom 2026-08-14: "more of the text to the left so we can see more of the car on
   the right". A deliberate, requested exception to the site's full-width text rule
   — and scoped to the copy elements only, never the whole .sc-hero__inner, so the
   breadcrumb and the stat strip keep their own widths. */
@media(min-width:1000px){
  .sc-hero h1{max-width:57%}
  .sc-hero p{max-width:50%}
  .sc-hero__meta{max-width:72%}
}
.sc-hero__meta b{color:#fff;font-family:var(--display);font-weight:800}

/* Caption plate — names the exact car in every photograph ------------------- */
.plate{
  position:absolute;right:16px;bottom:14px;z-index:3;
  font-family:var(--body);font-size:12px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:#e8eef4;
  background:rgba(7,10,14,.6);backdrop-filter:blur(6px);
  border:1px solid var(--sc-line);border-left:2px solid var(--green);
  padding:.42em .8em;border-radius:4px;pointer-events:none;
  max-width:calc(100% - 32px);
}
.sc-hero .plate{right:24px;bottom:16px}

/* ---- Marque ticker -------------------------------------------------------- */
.sc-ticker{
  overflow:hidden;border-block:1px solid var(--sc-line);
  background:var(--sc-black-2);padding:20px 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
/* THREE identical sets, shifted by exactly ONE set per cycle (Dom, 2026-08-14).
   The wrap is seamless when the shift equals one set width — that part was already
   exact at two sets. Three is about the GAP: the track only fills the viewport
   while (sets - 1) x setWidth >= viewport. One set measures 2785px, so two sets
   ran dry above a 2785px viewport and an ultrawide monitor saw the line end and
   jump. Three sets hold to 5571px.
   Duration stays 56s: the travel is still one set width per cycle, so the speed
   is unchanged. If the marque COUNT changes, rescale the duration with it
   (it was 42s at 12 marques) — not with the number of sets. */
.sc-ticker__track{display:flex;width:max-content;animation:sc-marquee 56s linear infinite}
.sc-ticker__set{display:flex;align-items:center;flex:none}
/* Real marque logos, flattened to one light grey. `grayscale(1) invert(.62)`
   is the pair that works here: these SVGs are black-on-transparent, so
   brightness() cannot lift them, and a plain brightness(0) would crush the
   internal detail of the BMW roundel and Mercedes star into solid blobs. */
.sc-ticker img{
  height:30px;width:auto;max-width:132px;object-fit:contain;flex:none;
  margin:0 30px;filter:grayscale(1) invert(.62);opacity:.95;
  transition:opacity .3s ease,filter .3s ease;
}
.sc-ticker img:hover{opacity:1;filter:grayscale(1) invert(.78)}
/* Bentley Motors' winged-B is not available under a usable licence, so the brand
   sits in the line-up as a wordmark matched to the logos' weight and colour. */
.sc-ticker__word{
  font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:.06em;
  color:#9aa4ad;margin:0 30px;white-space:nowrap;flex:none;
}
/* one third of a three-set track = exactly one set. Keep this fraction in step
   with the number of sets in the markup or the loop will visibly jump. */
@keyframes sc-marquee{from{transform:translateX(0)}to{transform:translateX(calc(-100% / 3))}}
@media(prefers-reduced-motion:reduce){
  /* stop the scroll AND drop the duplicate sets, otherwise the tripled list wraps
     into a clipped block instead of a tidy single row of marques */
  .sc-ticker__track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .sc-ticker__set:nth-child(n+2){display:none}
  .sc-ticker__set{flex-wrap:wrap;justify-content:center}
  .sc-ticker{-webkit-mask:none;mask:none}
}

/* ---- Index cards (the three routes) --------------------------------------- */
.sc-index{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--sc-line);border:1px solid var(--sc-line)}
/* Dom 2026-08-20: the green links sat at different heights because the copy above
   them differs in length. Make each card a flex column and push the link with
   margin-top:auto, so all three sit on the same line at the bottom of the row.
   The grid already stretches the items to equal height; this aligns what is
   INSIDE them. */
.sc-index__item{background:var(--sc-black);padding:clamp(28px,3.6vw,44px);transition:.3s;
  display:flex;flex-direction:column}
.sc-index__item:hover{background:var(--sc-surface)}
.sc-index__num{
  font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.24em;
  color:var(--green);display:block;margin-bottom:1.1rem;
}
.sc-index__item h3{font-size:clamp(1.3rem,2.1vw,1.6rem);margin-bottom:.5em}
.sc-index__item p{color:var(--sc-text-dim);margin-bottom:1.2rem;font-size:.98rem}
.sc-index__item p:last-of-type{margin-bottom:1.2rem}
.sc-index__more{font-weight:700;color:var(--green);display:inline-flex;gap:.45em;transition:.25s;
  margin-top:auto;align-self:flex-start;min-height:44px;align-items:center}
.sc-index__item:hover .sc-index__more{gap:.8em}

/* ---- Split (text + image) — text column is a real column, so a measure
        here is the "beside an image" case, not a narrowed page. ------------- */
.sc-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,72px);align-items:center}
.sc-split--rev .sc-split__media{order:-1}
.sc-split__media{position:relative;border:1px solid var(--sc-line);overflow:hidden}
.sc-split__media img{width:100%;display:block}
/* --fill: the media column matches the height of a taller text column instead of
   floating in the middle of it with dead space above and below. */
.sc-split--fill{align-items:stretch}
.sc-split--fill .sc-split__media img{height:100%;object-fit:cover}
/* balance stops long compound words hyphen-breaking ("Not nearly-/like.") */
.sc-split h2{font-size:clamp(1.7rem,3.6vw,2.8rem);text-wrap:balance;hyphens:none}
.sc-split .sc-note{
  margin-top:1.6rem;padding:18px 22px;border-left:2px solid var(--green);
  background:var(--sc-surface);font-size:.96rem;color:var(--sc-text-dim);
}
.sc-split .sc-note p:last-child{margin-bottom:0}

/* ---- Full-bleed cinematic break ------------------------------------------ */
.sc-bleed{position:relative;isolation:isolate;min-height:clamp(340px,52vw,560px);display:grid;place-items:center;overflow:hidden}
.sc-bleed__media{position:absolute;inset:0;z-index:-2}
.sc-bleed__media img{width:100%;height:100%;object-fit:cover}
.sc-bleed::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,10,14,.72),rgba(7,10,14,.55) 45%,rgba(7,10,14,.86))}
.sc-bleed__inner{text-align:center;padding:clamp(56px,8vw,96px) 24px;width:100%;max-width:var(--container)}
.sc-bleed blockquote{
  margin:0;font-family:var(--display);font-weight:800;color:#fff;
  font-size:clamp(1.7rem,4.2vw,3.1rem);line-height:1.12;letter-spacing:-.02em;
  text-wrap:balance;
}
.sc-bleed cite{
  display:block;margin-top:1.4rem;font-family:var(--body);font-style:normal;
  font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--green);
}

/* ---- Stats ---------------------------------------------------------------- */
.sc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--sc-line);border:1px solid var(--sc-line)}
.sc-stat{background:var(--sc-black);padding:clamp(26px,3.4vw,40px);text-align:center}
.sc-stat b{display:block;font-family:var(--display);font-weight:800;color:var(--green);font-size:clamp(1.9rem,4vw,2.9rem);line-height:1}
.sc-stat span{display:block;margin-top:.7em;color:var(--sc-text-dim);font-size:.94rem}

/* ---- Pairings (what you drove -> what we put you in) --------------------- */
.sc-pairs{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.sc-pair{border:1px solid var(--sc-line);background:var(--sc-black-2);overflow:hidden;transition:.3s}
.sc-pair:hover{border-color:var(--sc-line-strong);transform:translateY(-4px)}
.sc-pair__media{position:relative;aspect-ratio:3/2;overflow:hidden}
.sc-pair__media img{width:100%;height:100%;object-fit:cover;transition:.6s cubic-bezier(.2,.7,.2,1)}
.sc-pair:hover .sc-pair__media img{transform:scale(1.05)}
.sc-pair__body{padding:26px}
.sc-pair__from{
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sc-text-dim);display:block;margin-bottom:.7rem;
}
.sc-pair h3{font-size:1.32rem;margin-bottom:.35em;color:#fff}
.sc-pair p{margin-bottom:0;color:var(--sc-text-dim);font-size:.96rem}

/* ---- Fleet tiers ---------------------------------------------------------- */
/* Dom 2026-08-14: rebuilt on the .sc-pair pattern above — photo on top with ONLY
   the make/model plate over it, every word below it. Same 3:2 media box as the
   pairings so the two grids read as one system rather than two treatments.
   The heavy `::after` scrim went with it: it existed only to keep white text
   legible over the photograph, and nothing sits on the photograph now. */
.sc-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.sc-tier{border:1px solid var(--sc-line);background:var(--sc-black-2);overflow:hidden;transition:.3s}
.sc-tier:hover{border-color:var(--sc-line-strong);transform:translateY(-4px)}
.sc-tier__media{position:relative;aspect-ratio:3/2;overflow:hidden}
.sc-tier__media img{width:100%;height:100%;object-fit:cover;transition:.6s cubic-bezier(.2,.7,.2,1)}
.sc-tier:hover .sc-tier__media img{transform:scale(1.05)}
.sc-tier__body{padding:26px}
.sc-tier__num{font-size:12px;font-weight:700;letter-spacing:.22em;color:var(--green);display:block;margin-bottom:.7rem}
.sc-tier h3{font-size:1.32rem;margin-bottom:.35em;color:#fff}
.sc-tier p{margin-bottom:0;color:var(--sc-text-dim);font-size:.96rem}

/* ---- Numbered steps (process + after-an-accident) ------------------------ */
.sc-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--sc-line);border:1px solid var(--sc-line)}
.sc-step{background:var(--sc-black);padding:clamp(26px,3.2vw,38px);position:relative;transition:.3s}
.sc-step:hover{background:var(--sc-surface)}
.sc-step__n{
  font-family:var(--display);font-weight:800;font-size:.95rem;color:var(--green);
  display:flex;align-items:center;gap:12px;margin-bottom:1rem;letter-spacing:.08em;
}
.sc-step__n::after{content:'';flex:1;height:1px;background:var(--sc-line)}
.sc-step__who{
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sc-text-dim);border:1px solid var(--sc-line);padding:.28em .6em;border-radius:3px;
}
.sc-step h3{font-size:1.22rem;margin-bottom:.4em}
.sc-step p{margin-bottom:0;color:var(--sc-text-dim);font-size:.97rem}
.sc-steps--3{grid-template-columns:repeat(3,1fr)}

/* ---- Promise list --------------------------------------------------------- */
.sc-promises{display:grid;gap:0;border-top:1px solid var(--sc-line)}
.sc-promise{
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  padding:26px 0;border-bottom:1px solid var(--sc-line);
}
.sc-promise__tick{
  flex:none;width:30px;height:30px;border-radius:50%;border:1px solid rgba(121,185,73,.4);
  background:rgba(121,185,73,.1);display:grid;place-items:center;margin-top:2px;
}
.sc-promise__tick svg{width:15px;height:15px;stroke:var(--green);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sc-promise h3{font-size:1.15rem;margin-bottom:.3em}
.sc-promise p{margin-bottom:0;color:var(--sc-text-dim);font-size:.97rem}

/* ---- FAQ (dark) ----------------------------------------------------------- */
.sc .faq{max-width:none;gap:0;border-top:1px solid var(--sc-line)}
.sc .faq__item{background:transparent;border:none;border-bottom:1px solid var(--sc-line);border-radius:0}
.sc .faq__q{color:#fff;padding:26px 0;font-size:clamp(1.02rem,1.7vw,1.18rem);transition:.25s}
.sc .faq__q:hover{color:var(--green)}
.sc .faq__a{padding:0}
.sc .faq__a p{color:var(--sc-text-dim);padding-bottom:26px;max-width:none}

/* ---- Contact / form ------------------------------------------------------- */
.sc-contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,72px);align-items:start}
.sc-callbox{border:1px solid var(--sc-line);background:var(--sc-black-2);padding:clamp(26px,3.6vw,42px)}
.sc-callbox__num{
  display:block;font-family:var(--display);font-weight:800;color:#fff;
  font-size:clamp(1.9rem,4.2vw,2.9rem);line-height:1.05;letter-spacing:-.02em;margin:.2em 0 .5em;
}
.sc-callbox__num:hover{color:var(--green)}
.sc-callbox a.sc-mail{color:var(--green);font-weight:700;word-break:break-word}
.sc-callbox hr{border:none;border-top:1px solid var(--sc-line);margin:26px 0}
.sc .form-card{background:var(--sc-surface);border-color:var(--sc-line);box-shadow:none;border-radius:0}
.sc .form-card h3{color:#fff}
.sc .field label{color:#dbe3ea}
.sc .field input,.sc .field select,.sc .field textarea{
  background:var(--sc-black);border-color:var(--sc-line);color:#fff;border-radius:0;
}
/* 5.4:1 on --sc-black — clears WCAG AA for normal text (#66727e did not) */
.sc .field input::placeholder,.sc .field textarea::placeholder{color:#7c8792}
.sc .field input:focus,.sc .field select:focus,.sc .field textarea:focus{
  background:var(--sc-black);border-color:var(--green);box-shadow:0 0 0 3px rgba(121,185,73,.16);
}
.sc .form-footnote{font-size:.85rem;color:var(--sc-text-dim);margin:14px 0 0}

/* ---- Closing CTA band ----------------------------------------------------- */
.sc-final{
  border:1px solid var(--sc-line);background:var(--sc-black-2);
  padding:clamp(40px,6vw,80px);text-align:center;position:relative;overflow:hidden;
}
.sc-final::before{
  content:'';position:absolute;width:520px;height:520px;top:-260px;left:50%;translate:-50% 0;
  background:radial-gradient(circle,rgba(121,185,73,.18),transparent 70%);pointer-events:none;
}
.sc-final h2{font-size:clamp(1.9rem,4vw,3rem);position:relative}
.sc-final p{position:relative;font-size:1.1rem;max-width:60ch;margin-inline:auto}
.sc-final .sc-hero__cta{justify-content:center;position:relative}

/* ---- Buttons on dark ------------------------------------------------------ */
.sc .btn--ghost{color:#fff;border-color:var(--sc-line-strong);background:transparent}
.sc .btn--ghost:hover{border-color:var(--green);color:var(--green);background:rgba(121,185,73,.08)}
.sc .btn--dark{background:#fff;color:var(--sc-black)}
.sc .btn--dark:hover{background:var(--green);color:#fff}

/* ---- Footer (dark skin) --------------------------------------------------- */
.sc .site-footer{background:var(--sc-black-2);border-top:1px solid var(--sc-line)}

/* ---- Divider -------------------------------------------------------------- */
.sc-rule{height:1px;background:var(--sc-line);border:none;margin:0}

/* ==========================================================================
   Home-page band — "we do supercars as well". Lives on the light site,
   so it carries its own dark surface. Deliberately compact.
   ========================================================================== */
.sc-band{
  position:relative;isolation:isolate;overflow:hidden;background:#070a0e;color:#fff;
  /* no outer margin — a white gap either side looked like a mistake.
     The space lives INSIDE the band via .sc-band__inner padding. */
  min-height:clamp(460px,46vw,620px);          /* tall, as asked */
  display:grid;align-items:center;
}
/* PARALLAX: a fixed-attachment background stays put while the band scrolls over
   it. No JS, no scroll listener. Disabled on touch (iOS ignores `fixed` and
   renders it badly) and for prefers-reduced-motion. */
.sc-band__media{
  position:absolute;inset:0;z-index:-2;
  background:url('../img/supercars/lamborghini-aventador-blue-night.webp') center/cover no-repeat fixed;
}
.sc-band::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(7,10,14,.94) 0%,rgba(7,10,14,.78) 44%,rgba(7,10,14,.42) 100%);
}
@media(hover:none),(prefers-reduced-motion:reduce){
  .sc-band__media{background-attachment:scroll}
}
.sc-band__inner{
  display:grid;grid-template-columns:1fr auto;gap:clamp(28px,4vw,64px);align-items:center;
  padding-block:clamp(56px,7vw,96px);
}
.sc-band .sc-label{color:var(--green);margin-bottom:1rem}
.sc-band .sc-label::after{background:rgba(255,255,255,.16)}
.sc-band h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.7rem);margin-bottom:.5em;text-wrap:balance}
.sc-band p{color:#c3ccd4;margin-bottom:0;font-size:1.08rem;max-width:62ch}
.sc-band__cta{display:flex;flex-direction:column;gap:12px;align-items:stretch;flex:none}
.sc-band__cta .btn{justify-content:center}
/* the band sits on the LIGHT site, so the ghost button needs reversing here too */
.sc-band .btn--ghost{color:#fff;border-color:rgba(255,255,255,.28);background:transparent}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* NOTE: the mid-width header squeeze that makes room for the 7th nav item lives in
   style.css (the .header-inner / .nav / .header-cta bands at 861-1199 and 861-959).
   It must NOT be duplicated here — supercars.css loads after style.css, so an equal-
   specificity `.nav{gap:…}` rule in this file would win and loosen the very spacing
   that fix tightens. */
@media(max-width:980px){
  .sc-index,.sc-pairs,.sc-tiers{grid-template-columns:repeat(2,1fr)}
  .sc-steps--3{grid-template-columns:repeat(2,1fr)}
  /* 3 items in a 2-column hairline grid leave an empty cell that paints as a pale
     block (the grid's 1px `background` shows through). Let the odd one span. */
  .sc-index__item:last-child:nth-child(odd),
  .sc-steps--3 .sc-step:last-child:nth-child(odd){grid-column:1/-1}
  .sc-stats{grid-template-columns:repeat(2,1fr)}
  .sc-split,.sc-contact{grid-template-columns:1fr}
  .sc-split--rev .sc-split__media{order:0}
  .sc-band__inner{grid-template-columns:1fr}
  .sc-band__cta{flex-direction:row;flex-wrap:wrap}
  .sc-band__cta .btn{flex:1;min-width:200px}
}
@media(max-width:680px){
  .sc-index,.sc-pairs,.sc-tiers,.sc-steps,.sc-steps--3{grid-template-columns:1fr}
  .sc-stats{grid-template-columns:1fr}
  /* keep the hero short enough that the page below it is still hinted at */
  .sc-hero__inner{padding-block:40px 34px}
  .sc-hero__meta{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin-top:1.5rem;padding-top:1.2rem;font-size:.84rem}
  .sc-hero__cta{margin-top:1.5rem;gap:10px}
  /* min-width:max-content stops .btn's white-space:nowrap label overflowing a
     squeezed pill — the pair sits side by side when it fits, and wraps when it doesn't */
  .sc-hero__cta .btn{flex:1 1 auto;justify-content:center;min-width:max-content}
  .sc-label{letter-spacing:.2em}
  .sc-label::after,.sc-label.center::before{max-width:60px}
}
@media(prefers-reduced-motion:reduce){
  .sc-pair:hover,.sc-tier:hover,
  .sc-pair:hover .sc-pair__media img,.sc-tier:hover .sc-tier__media img{transform:none}
}

/* On a phone 72vh of hero leaves too little room for the copy; let it size to
   content with a sensible floor instead. */
@media(max-width:860px){
  .sc-hero{min-height:56vh}
}

/* ==========================================================================
   MOBILE TYPE + TOUCH (Dom, 2026-08-14)
   Measured on a 375px viewport: .plate 10.1px, .sc-label 10.9px,
   .sc-pair__from 11.4px, .sc-index__num 11.5px. All are uppercase and tracked,
   which reads smaller still. 12px is the floor.
   NOTE the <=680px block above actively SHRINKS .sc-label to .68rem — this
   block is last in the file, so it wins at equal specificity. Keep it last.
   ========================================================================== */
@media(max-width:860px){
  /* the prestige call box's number was a 32px target */
  .sc-callbox__num{display:inline-flex;align-items:center;min-height:44px}
}

/* The hero's caption plate is position:absolute at bottom-right, so nothing in
   normal flow reserves its band. On a phone the hero copy grows tall enough that
   the stat strip runs underneath it — measured 13px of overlap at 320/375/430,
   which hid the end of "1-24hrs to your replacement". Reserve the plate's band
   (31px tall + its 16px offset, plus a gap) below the copy. */
@media(max-width:860px){
  .sc-hero__inner{padding-bottom:calc(clamp(44px,6vw,84px) + 56px)}
}

/* Super Car Claims brand mark (Dom, 2026-08-20).
   The prestige division trades under its own identity while still sitting inside
   Nationwide, so the SC mark LEADS and the Nationwide line sits beneath it rather
   than being replaced. Sized in px, not a percentage: a logo that rescales with
   the viewport reads as sloppy at the joins between breakpoints. */
.sc-brandmark{display:block;width:190px;height:auto;margin-bottom:1.15rem}
@media(max-width:860px){ .sc-brandmark{width:150px;margin-bottom:.9rem} }

/* ---- Hero slideshow (Dom, 2026-08-20) -------------------------------------
   Slides are stacked and crossfaded. They sit at z-index -2 like the single
   image did, so the existing scrim (.sc-hero::after at -1) still sits between
   the photography and the copy and nothing about the text treatment changes. */
.sc-hero__slides{position:absolute;inset:0;z-index:-2}
.sc-hero__slides .sc-hero__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%;
  opacity:0;transition:opacity 1.1s ease-in-out;
}
.sc-hero__slides .sc-hero__bg.is-current{opacity:1}
/* The plate names the car on screen, so it has to change WITH the image rather
   than after it; a short fade keeps the swap from looking like a glitch. */
.sc-hero .plate{transition:opacity .35s ease}
.sc-hero .plate.is-swapping{opacity:0}
@media(prefers-reduced-motion:reduce){
  /* no crossfade and no rotation: the first slide simply stays put */
  .sc-hero__slides .sc-hero__bg{transition:none}
}

/* The hero label sits directly under the green SC mark, and two greens stacked
   read as heavy and flatten the hierarchy. Light grey lets the logo carry the
   brand colour and demotes the line beneath it to what it is: a descriptor.
   Scoped to the hero ONLY — the same class is the section eyebrow everywhere
   else on the page, and those stay green. (Dom, 2026-08-20) */
.sc-hero .sc-label{color:var(--sc-text)}