/* ===========================================================================
   Southern Autos Repaint & Panel
   Dark editorial automotive theme — lime accent pulled from the logo (#AAE633)
   =========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  --bg:        #0b0b0b;
  --bg-deep:   #060606;
  --panel:     #131313;
  --panel-2:   #191919;
  --line:      rgba(255, 255, 255, .10);
  --line-soft: rgba(255, 255, 255, .06);

  --lime:      #aae633;
  --lime-dim:  #8ec425;

  --ink:       #ffffff;
  --ink-2:     rgba(255, 255, 255, .72);
  --muted:     rgba(255, 255, 255, .48);
  --faint:     rgba(255, 255, 255, .34);

  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 10px;

  --gutter: clamp(1rem, 3.2vw, 2.25rem);
  --wrap: 1360px;

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

/* ----------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.028em;
}

p  { margin: 0 0 1.1em; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--lime); color: #0a0a0a; }

:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------- helpers -- */
.wrap {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
}

.lime  { color: var(--lime); }
.muted { color: var(--muted); }

.section { padding: clamp(4.5rem, 9vw, 8.5rem) 0; }
.section--tight { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.section--flush-top { padding-top: 0; }

/* Eyebrow — short lime dash + small caps label (signature of the theme) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.eyebrow::before {
  content: "";
  width: 16px;
  height: 2px;
  background: var(--lime);
  flex: none;
}

/* Two-column editorial layout: narrow label rail + wide content */
.lay {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: clamp(1.4rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 900px) {
  .lay { grid-template-columns: 1fr; gap: 1.5rem; }
}

.statement {
  font-size: clamp(1.5rem, 3.1vw, 2.55rem);
  line-height: 1.28;
  letter-spacing: -.028em;
  font-weight: 500;
  max-width: 24ch;
  margin: 0;
}
.statement--wide { max-width: 34ch; }

.h2 {
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.08;
}

.lead {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 62ch;
}
.lead--sm { font-size: .9rem; max-width: 46ch; }

/* Reveal on scroll */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------- buttons -- */
.btn {
  --btn-bg: var(--panel-2);
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  padding: .5rem .5rem .5rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .87rem;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn:hover { background: #232323; border-color: rgba(255, 255, 255, .2); }
.btn:active { transform: translateY(1px); }

/* the lime circular arrow badge */
.btn__pip {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--lime);
  color: #0a0a0a;
  display: grid;
  place-items: center;
  flex: none;
  transition: transform .4s var(--ease);
}
.btn__pip svg { width: 15px; height: 15px; stroke-width: 2.2; }
.btn:hover .btn__pip { transform: rotate(-45deg); }

.btn--primary {
  --btn-bg: var(--lime);
  --btn-fg: #0a0a0a;
  border-color: transparent;
}
.btn--primary:hover { background: #bcf24a; border-color: transparent; }
.btn--primary .btn__pip { background: rgba(0, 0, 0, .82); color: var(--lime); }

.btn--plain { padding: .72rem 1.5rem; }
.btn--sm { padding: .48rem 1.05rem; font-size: .8rem; }

/* frosted pill for sitting on top of footage */
.btn--glass {
  --btn-bg: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .24);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn--glass:hover {
  background: rgba(170, 230, 51, .14);
  border-color: rgba(170, 230, 51, .6);
  color: var(--lime);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}

/* ---------------------------------------------------------------- header -- */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  padding: 1.55rem 0;
  transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  padding: .8rem 0;
  background: rgba(10, 10, 10, .86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line-soft);
}

.header__inner {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
  padding-inline: clamp(.25rem, 1.6vw, 1.6rem);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.header.is-stuck .header__inner { padding-inline: 0; }

.brand { flex: none; }
.brand img {
  height: 40px;
  width: auto;
  transition: height .4s var(--ease);
}
.header.is-stuck .brand img { height: 34px; }

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.nav a {
  padding: .45rem .95rem;
  border-radius: 999px;
  font-size: .87rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: color .3s var(--ease), background .3s var(--ease);
}
.nav a:hover { color: var(--ink); background: rgba(255, 255, 255, .07); }
.nav a.is-active { color: var(--ink); background: rgba(255, 255, 255, .1); }
@media (max-width: 1000px) { .nav { display: none; } }

.header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.nav ~ .header__actions { margin-left: .5rem; }

.header__phone {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink);
  background: rgba(255, 255, 255, .04);
  white-space: nowrap;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.header__phone:hover { border-color: var(--lime); background: rgba(170, 230, 51, .1); }
.header__phone svg { width: 14px; height: 14px; color: var(--lime); }
@media (max-width: 620px) { .header__phone span { display: none; } }

/* square hamburger */
.burger {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .05);
  cursor: pointer;
  padding: 0;
  place-items: center;
  gap: 4px;
  align-content: center;
}
.burger span {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
@media (max-width: 1000px) { .burger { display: grid; } }

/* ---------------------------------------------------------------- drawer -- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 89;
  background: rgba(8, 8, 8, .97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 7.5rem var(--gutter) 2.5rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
  overflow-y: auto;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }

.drawer > a {
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: -.03em;
  padding: .55rem 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-2);
  transition: color .3s var(--ease), padding-left .3s var(--ease);
}
.drawer > a:hover, .drawer > a.is-active { color: var(--lime); padding-left: .5rem; }

.drawer__foot {
  margin-top: auto;
  padding-top: 2rem;
  display: grid;
  gap: .35rem;
  font-size: .9rem;
  color: var(--muted);
}
.drawer__foot strong { color: var(--lime); font-size: 1.25rem; }

/* ------------------------------------------------------------------ hero -- */
.hero { padding: 0 var(--gutter); }

.hero__card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #000;
  isolation: isolate;
  min-height: min(88vh, 780px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero--inner .hero__card { min-height: min(56vh, 470px); }

/* Inner-page heroes: clear the fixed header instead of running underneath it. */
.hero--inner { padding-top: 92px; }
.hero--inner .hero__meta { padding-top: 1.7rem; }

/* Split inner hero — copy left, photo right in a contained panel. As a full
   background the photos had to cover a ~4:1 slab, which zoomed the small
   sources into abstraction; framed at near-native aspect they read as shots
   of the workshop again. */
.hero__card--split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  grid-template-areas:
    "meta meta"
    "content side"
    "bar bar";
  align-items: center;
}
.hero__card--split .hero__meta { grid-area: meta; }
.hero__card--split .hero__content {
  grid-area: content;
  margin: 0;
  padding-block: 1.8rem 2.4rem;
}
.hero__card--split .hero__content h1 { font-size: clamp(2rem, 3.7vw, 3.3rem); }
.hero__side {
  grid-area: side;
  padding: 1.4rem clamp(1.25rem, 3vw, 2.6rem) 1.4rem 0;
}
.hero__side img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
}
.hero__card--split .hero__bar { grid-area: bar; }
@media (max-width: 900px) {
  .hero__card--split {
    grid-template-columns: 1fr;
    grid-template-areas: "meta" "content" "side" "bar";
  }
  .hero__card--split .hero__content { padding-block: 1.2rem 1.6rem; }
  .hero__side { padding: 0 clamp(1.25rem, 3vw, 2.6rem) 1.6rem; }
}

/* ======================================================== cinematic hero == */
/* Homepage only. The burnout clip IS the brand shot, so the section treats it
   like a title sequence: full-bleed film, the headline staged over it, and a
   running lime ribbon of services closing the frame. On phones the film stays
   a clean 16:9 plate (a portrait crop would cut the wordmark in half) and the
   copy stacks beneath it on black — same composition, just unfolded. */
.hero--cinema {
  position: relative;
  padding: 92px 0 0;
  background: #000;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}

.hero--cinema .hero__film {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.hero--cinema .hero__film video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Replay control — sits quietly in the corner of the film, revealed only once
   the clip has finished so it never competes with the opening shot. */
.hero__replay {
  position: absolute;
  right: clamp(.9rem, 2vw, 1.6rem);
  bottom: clamp(.9rem, 2vw, 1.6rem);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .95rem .5rem .8rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(10, 10, 10, .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, .9);
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s var(--ease), transform .45s var(--ease),
              background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.hero__replay.is-shown { opacity: 1; transform: none; }
.hero__replay:hover {
  background: rgba(170, 230, 51, .16);
  border-color: rgba(170, 230, 51, .6);
  color: var(--lime);
}
.hero__replay svg { width: 13px; height: 13px; }
/* Below the desktop breakpoint the film sits in normal flow at the top of the
   hero rather than filling it, so anchor the button to the film's bottom edge:
   hero padding-top (100px) + a full-width 16:9 film (56.25vw). */
@media (max-width: 899px) {
  .hero__replay {
    top: calc(100px + 56.25vw - 3.1rem);
    bottom: auto;
    right: clamp(.8rem, 3vw, 1.4rem);
  }
}
@media (max-width: 620px) {
  .hero__replay span { display: none; }
  .hero__replay { padding: .55rem .7rem; }
}

.hero--cinema .hero__scrim { display: none; }

.hero__frame {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  padding: 1.7rem 0 2.4rem;
}

.hero__topline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 1.6rem;
}
.hero__topline-l {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .74rem;
  letter-spacing: .02em;
  color: var(--muted);
}
.hero__topline-l i {
  display: block;
  width: clamp(30px, 6vw, 76px);
  height: 1px;
  background: var(--line);
}
.hero__topline-l .coords { color: var(--faint); font-size: .68rem; letter-spacing: .08em; }
.hero__topline-r {
  max-width: 30ch;
  text-align: right;
  font-size: .74rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}
@media (max-width: 780px) { .hero__topline-r { display: none; } }

/* ---- the title stack ---- */
.hero__stage {
  display: grid;
  gap: 1.3rem;
  justify-items: start;
}
.hero__title {
  font-size: clamp(2.55rem, 6.9vw, 6rem);
  line-height: .98;
  letter-spacing: -.035em;
  font-weight: 700;
  max-width: none;
}
.hero__title .line {
  display: block;
  overflow: hidden;
  padding-bottom: .04em;   /* keeps descenders out of the clip */
}
.hero__title .line em {
  display: inline-block;
  font-style: normal;
}
/* the middle line is drawn in outline — ink not yet sprayed */
.hero__title .line--ghost em {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .92);
}
@supports not (-webkit-text-stroke: 1px #fff) {
  .hero__title .line--ghost em { color: rgba(255, 255, 255, .38); }
}
.hero__title .dot { color: var(--lime); font-style: normal; }

.hero__stage .lead {
  color: rgba(255, 255, 255, .74);
  max-width: 54ch;
  margin: 0;
}

/* entrance — lines rise out of their clip, copy and actions follow */
@keyframes hero-rise { from { transform: translateY(112%); } to { transform: translateY(0); } }
@keyframes hero-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.js .hero__title .line em { animation: hero-rise .95s var(--ease) both; }
.js .hero__title .line:nth-child(1) em { animation-delay: .1s; }
.js .hero__title .line:nth-child(2) em { animation-delay: .22s; }
.js .hero__title .line:nth-child(3) em { animation-delay: .34s; }
.js .hero__stage .lead    { animation: hero-fade .8s var(--ease) .55s both; }
.js .hero__stage .btn-row { animation: hero-fade .8s var(--ease) .7s both; }
.js .hero__topline        { animation: hero-fade .8s var(--ease) .85s both; }

/* ---- services ribbon ---- */
.hero__ribbon {
  position: relative;
  z-index: 2;
  margin-top: 2.6rem;
  background: var(--lime);
  color: #0a0a0a;
  overflow: hidden;
}
.hero__ribbon-track {
  display: flex;
  width: max-content;
  animation: ribbon-run 32s linear infinite;
}
.hero__ribbon-set {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  padding: .92rem 1.2rem;
  white-space: nowrap;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.hero__ribbon-set b { font-size: .55rem; opacity: .45; font-weight: 700; }
@keyframes ribbon-run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hero__ribbon-track { animation: none; } }

/* ---- scroll cue ---- */
.hero__cue {
  display: none;
  position: absolute;
  right: var(--gutter);
  bottom: 96px;
  z-index: 3;
  align-items: center;
  gap: .7rem;
  writing-mode: vertical-rl;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .3s var(--ease);
}
.hero__cue::after {
  content: "";
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, var(--lime), transparent);
}
.hero__cue:hover { color: var(--lime); }

/* ---- immersive layout from 900px: the film becomes the whole stage ---- */
@media (min-width: 900px) {
  .hero--cinema {
    padding: 0;
    min-height: 100vh;
    min-height: max(100svh, 660px);
  }
  .hero--cinema .hero__film {
    position: absolute;
    inset: 0;
    z-index: -2;
    aspect-ratio: auto;
  }
  /* letterboxed, not cropped: the wordmark reaches to 2.8% from each edge of
     the frame, so any cover-crop or zoom slices it. Contain keeps the whole
     plate visible at every viewport; the mattes read as cinema black. */
  .hero--cinema .hero__film video { object-fit: contain; }
  /* darkens the launch corner and the foot of the frame; the wordmark and the
     car stay clear on the right */
  .hero--cinema .hero__scrim {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, 0) 24%),
      linear-gradient(76deg, rgba(4, 4, 4, .9) 0%, rgba(4, 4, 4, .52) 34%, rgba(4, 4, 4, .1) 60%, rgba(4, 4, 4, 0) 76%),
      linear-gradient(to top, rgba(4, 4, 4, .92) 0%, rgba(4, 4, 4, .42) 26%, rgba(4, 4, 4, 0) 52%);
  }
  .hero__frame {
    flex: 1;
    padding: 108px 0 3rem;
  }
  .hero__stage { margin-top: auto; }
  .hero__ribbon { margin-top: 0; }
  .hero__stage .lead { text-shadow: 0 1px 18px rgba(0, 0, 0, .6); }
}
@media (min-width: 1100px) { .hero__cue { display: flex; } }

/* thin meta row under the header, inside the card */
.hero__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  padding: 6.6rem clamp(1.25rem, 3vw, 2.6rem) 0;
  font-size: .72rem;
  letter-spacing: .02em;
  color: var(--ink-2);
}
.hero__meta-l {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.hero__meta-l i {
  display: block;
  width: clamp(30px, 6vw, 76px);
  height: 1px;
  background: rgba(255, 255, 255, .35);
}
.hero__meta-r {
  max-width: 30ch;
  text-align: right;
  color: var(--muted);
  line-height: 1.55;
}
@media (max-width: 780px) {
  .hero__meta { padding-top: 5.6rem; }
  .hero__meta-r { display: none; }
}

.hero__content {
  margin-top: auto;
  padding: 2rem clamp(1.25rem, 3vw, 2.6rem) clamp(1.6rem, 3vw, 2.4rem);
  display: grid;
  gap: 1.1rem;
  justify-items: start;
}
.hero__content h1 {
  font-size: clamp(2.1rem, 5.6vw, 4.15rem);
  line-height: 1.04;
  max-width: 16ch;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .55);
}
.hero__content .lead {
  color: rgba(255, 255, 255, .78);
  max-width: 48ch;
  text-shadow: 0 1px 16px rgba(0, 0, 0, .6);
}

/* split action bar across the foot of the hero card */
.hero__bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(255, 255, 255, .16);
  background: rgba(12, 12, 12, .5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero__bar a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem clamp(1.25rem, 3vw, 2.6rem);
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink);
  transition: background .35s var(--ease), color .35s var(--ease);
}
.hero__bar a + a { border-left: 1px solid rgba(255, 255, 255, .16); }
.hero__bar a svg { width: 17px; height: 17px; transition: transform .4s var(--ease); }
.hero__bar a:hover { background: rgba(170, 230, 51, .14); color: var(--lime); }
.hero__bar a:hover svg { transform: translateX(6px); }
@media (max-width: 620px) {
  .hero__bar { grid-template-columns: 1fr; }
  .hero__bar a + a { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .16); }
  .hero__bar a { padding-block: .95rem; }
}

/* ----------------------------------------------------------------- stats -- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.5rem);
  margin: clamp(2.2rem, 5vw, 3.6rem) 0 0;
}
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); gap: 1.8rem 1.2rem; } }

.stat__n {
  font-size: clamp(2.1rem, 4.4vw, 3.15rem);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
}
.stat__n span { color: var(--lime); }
.stat__l {
  margin-top: .55rem;
  font-size: .78rem;
  color: var(--muted);
  letter-spacing: .01em;
}

/* --------------------------------------------------------------- section -- */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
.section-head__l { display: grid; gap: 1.1rem; }
.section-head__r { max-width: 42ch; }

/* ----------------------------------------------------------------- cards -- */
.grid {
  display: grid;
  gap: clamp(.9rem, 1.6vw, 1.35rem);
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
}

/* image-led service card */
.mcard {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--panel);
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
}
.mcard--tall { min-height: 460px; }
.mcard__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.mcard:hover .mcard__img { transform: scale(1.05); }
.mcard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0, 0, 0, .9) 4%, rgba(0, 0, 0, .35) 42%, rgba(0, 0, 0, .1) 78%);
}
.mcard__chip {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .38rem .8rem;
  border-radius: 999px;
  background: rgba(15, 15, 15, .62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .13);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.mcard__chip svg { width: 13px; height: 13px; color: var(--lime); }
.mcard__body { padding: 1.4rem; display: grid; gap: .55rem; }
.mcard__body h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.mcard__body p { margin: 0; font-size: .88rem; color: rgba(255, 255, 255, .68); line-height: 1.6; }

/* flat text card */
.tcard {
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--panel);
  display: grid;
  gap: .7rem;
  align-content: start;
  transition: border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}
.tcard:hover { border-color: rgba(170, 230, 51, .35); background: var(--panel-2); transform: translateY(-3px); }
.tcard__icon {
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: rgba(170, 230, 51, .12);
  border: 1px solid rgba(170, 230, 51, .22);
  margin-bottom: .35rem;
}
.tcard__icon svg { width: 19px; height: 19px; color: var(--lime); }
.tcard h3 { font-size: 1.15rem; letter-spacing: -.02em; }
.tcard p { margin: 0; font-size: .9rem; color: var(--muted); line-height: 1.68; }

/* numbered process step */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  counter-reset: step;
}
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

.step {
  background: var(--bg);
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  display: grid;
  gap: .6rem;
  align-content: start;
  transition: background .4s var(--ease);
  counter-increment: step;
}
.step:hover { background: var(--panel); }
.step::before {
  content: "0" counter(step);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--lime);
}
.step h3 { font-size: 1.12rem; }
.step p { margin: 0; font-size: .88rem; color: var(--muted); line-height: 1.68; }

/* ----------------------------------------------------------------- split -- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.split__media {
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--panel);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__body { display: grid; gap: 1.15rem; align-content: start; }
.split__body p { margin: 0; color: var(--muted); line-height: 1.75; }

/* tick list */
.ticks { display: grid; gap: .85rem; }
.ticks li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: .8rem;
  align-items: start;
  font-size: .92rem;
  color: var(--muted);
  line-height: 1.6;
}
.ticks svg { width: 20px; height: 20px; color: var(--lime); margin-top: 2px; }
.ticks strong { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------ band -- */
.band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  isolation: isolate;
}
.band__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, rgba(6, 6, 6, .93) 8%, rgba(6, 6, 6, .72) 48%, rgba(6, 6, 6, .35) 100%);
}
.band--center::after {
  background: radial-gradient(120% 100% at 50% 50%, rgba(6, 6, 6, .72) 0%, rgba(6, 6, 6, .94) 72%);
}
.band__inner {
  padding: clamp(2.6rem, 6vw, 5.5rem) clamp(1.5rem, 4vw, 4rem);
  display: grid;
  gap: 1.2rem;
  justify-items: start;
  max-width: 62ch;
}
.band--center .band__inner {
  max-width: 60ch;
  margin-inline: auto;
  justify-items: center;
  text-align: center;
}

/* ------------------------------------------------------------------ form -- */
.form {
  display: grid;
  gap: 1rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--panel);
}
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }

.field { display: grid; gap: .45rem; }
.field > label {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .8rem .95rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #0e0e0e;
  color: var(--ink);
  font: inherit;
  font-size: .93rem;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--lime);
  background: #111;
}
.field select { appearance: none; cursor: pointer; }
.field--select { position: relative; }
.field--select::after {
  content: "";
  position: absolute;
  right: 1rem;
  bottom: 1.15rem;
  width: 7px;
  height: 7px;
  border-right: 1.6px solid var(--muted);
  border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg);
  pointer-events: none;
}
/* Honeypot. display:none rather than off-screen on purpose — browser autofill
   and password managers skip hidden fields but happily fill an off-screen one. */
.hp { display: none; }

.form__status { margin: 0; font-size: .9rem; line-height: 1.6; }
.form__status.is-ok  { color: var(--lime); }
.form__status.is-err { color: #ff8a7a; }

/* ------------------------------------------------------------- info tiles -- */
.info {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.info__item {
  background: var(--panel);
  padding: 1.35rem 1.5rem;
  display: grid;
  gap: .3rem;
}
.info__item h4 {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.info__item p, .info__item address {
  margin: 0;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
}
.info__item a:hover { color: var(--lime); }

.map {
  border: 0;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  filter: grayscale(1) invert(.92) contrast(.85) hue-rotate(180deg);
}

/* -------------------------------------------------------------- faq/list -- */
.qa { border-top: 1px solid var(--line-soft); }
.qa__item { border-bottom: 1px solid var(--line-soft); }
.qa__q {
  width: 100%;
  background: none;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight: 500;
  letter-spacing: -.02em;
  text-align: left;
  padding: 1.35rem 3rem 1.35rem 0;
  cursor: pointer;
  position: relative;
  transition: color .3s var(--ease);
}
.qa__q:hover { color: var(--lime); }
.qa__q::after,
.qa__q::before {
  content: "";
  position: absolute;
  right: .5rem;
  top: 50%;
  width: 13px;
  height: 1.6px;
  background: var(--lime);
  transition: transform .35s var(--ease);
}
.qa__q::before { transform: translateY(-50%) rotate(90deg); }
.qa__q::after  { transform: translateY(-50%); }
.qa__item.is-open .qa__q::before { transform: translateY(-50%) rotate(0deg); }
.qa__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease);
}
.qa__item.is-open .qa__a { grid-template-rows: 1fr; }
.qa__a > div { overflow: hidden; }
.qa__a p {
  margin: 0;
  padding: 0 3rem 1.5rem 0;
  color: var(--muted);
  font-size: .93rem;
  line-height: 1.75;
}

/* ---------------------------------------------------------------- footer -- */
.footer {
  border-top: 1px solid var(--line-soft);
  padding: clamp(3rem, 6vw, 5rem) 0 2rem;
  background: var(--bg-deep);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr .85fr .95fr .95fr 1.15fr;
  gap: clamp(1.5rem, 3vw, 2.4rem);
}
@media (max-width: 1080px) { .footer__grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

.footer__brand img { height: 46px; width: auto; margin-bottom: 1.1rem; }
.footer__brand p { color: var(--muted); font-size: .9rem; max-width: 34ch; line-height: 1.7; }

.footer h4 {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.footer li { margin-bottom: .5rem; }
.footer li a, .footer address a {
  color: var(--ink-2);
  font-size: .9rem;
  transition: color .3s var(--ease);
}
.footer li a:hover, .footer address a:hover { color: var(--lime); }
.footer address {
  font-style: normal;
  font-size: .9rem;
  color: var(--ink-2);
  line-height: 1.85;
}

.social { display: flex; gap: .5rem; }
.social a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-2);
  transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.social a:hover { border-color: var(--lime); color: var(--lime); background: rgba(170, 230, 51, .1); }
.social svg { width: 17px; height: 17px; }

.footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .8rem;
  color: var(--faint);
}
.footer__bottom a { color: var(--muted); }
.footer__bottom a:hover { color: var(--lime); }

/* ------------------------------------------------------------- call FAB -- */
.call-fab {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 80;
  display: none;
  align-items: center;
  gap: .55rem;
  padding: .8rem 1.3rem;
  border-radius: 999px;
  background: var(--lime);
  color: #0a0a0a;
  font-size: .9rem;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.call-fab svg { width: 16px; height: 16px; }
@media (max-width: 620px) { .call-fab { display: inline-flex; } }

/* T-SAU-022 — six-column footer + Car Craft badge */
.footer__grid { grid-template-columns: 1.4fr .85fr .95fr 1.05fr .95fr 1.15fr; }
@media (max-width: 1080px) { .footer__grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 900px)  { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .footer__grid { grid-template-columns: 1fr; } }
.footer__member { display:inline-flex; align-items:center; gap:.6rem; margin-top:.4rem; color:var(--muted); font-size:.82rem; text-decoration:none; }
.footer__member img { height:34px; width:auto; margin:0; }
.footer__member:hover { color:var(--lime); }

/* T-SAU-022 (23/09/2026, session fix after handover) — long eyebrow on a phone.
   .eyebrow is white-space:nowrap and the split hero's single <=900px track was a
   bare 1fr (auto minimum), so a label wider than the card — the government page's
   "Government & Emergency Fleet Repairs" at 375px — grew the track past the card.
   .hero__card still carries justify-content:flex-end from its flex layout, which
   in grid right-aligns the oversized track, so the excess spilled off the LEFT
   edge and the card's overflow:hidden clipped the start of every hero line.
   Seen live at 375px on /government-emergency-services; the other 17 pages fit.
   Two guards: eyebrows may wrap at phone width (no change for labels that fit),
   and the mobile hero track can never exceed the card. */
@media (max-width: 560px) { .eyebrow { white-space: normal; } }
@media (max-width: 900px) { .hero__card--split { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   T-SAU-025 (24/09/2026) — Services dropdown: desktop nav menu + mobile
   drawer group. Reuses existing tokens only. Desktop panel opens on
   hover/focus-within for pointer+hover devices (CSS only, gated behind the
   media query below) AND via the caret's click/Enter/Space, which toggles
   .is-open (app.js) — the two never fight: is-open is a superset trigger,
   hover/focus-within only ever add to what .is-open already allows. The
   drawer group reuses the .qa__a grid-template-rows(0fr→1fr) collapse
   idiom for its own accordion. Do not restructure the rules above this.
   ========================================================================== */

/* ---------------------------------------------------------- nav: trigger -- */

.nav__item--menu {
  position: relative;
  display: flex;
  align-items: center;
}

.nav__caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-left: -0.3rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink-2);
  cursor: pointer;
}

.nav__caret svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }

.nav__caret:hover { color: var(--lime); }

.nav__caret:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* ------------------------------------------------------------- nav: panel -- */

.nav__menu {
  position: absolute;
  z-index: 2;
  top: calc(100% + 14px);
  left: 50%;
  width: min(340px, calc(100vw - (var(--gutter) * 2)));
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -6px);
  transition: opacity 0.18s var(--ease) 0.12s, transform 0.18s var(--ease) 0.12s, visibility 0s linear 0.3s;
}

/* Invisible bridge across the 14px gap between the trigger and the panel, so
   the pointer can travel down into the panel without :hover dropping off
   .nav__item--menu on the way. pointer-events is a discrete property: it
   would flip to none the instant hover was lost, and the panel could never
   be reached by mouse. */
.nav__menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 14px;
}

@media (hover: hover) and (pointer: fine) {
  .nav__item--menu:hover .nav__menu,
  .nav__item--menu:focus-within .nav__menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0s linear;
  }

  .nav__item--menu:hover .nav__caret svg,
  .nav__item--menu:focus-within .nav__caret svg { transform: rotate(180deg); }
}

.nav__item--menu.is-open .nav__menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0s linear;
}

.nav__item--menu.is-open .nav__caret svg { transform: rotate(180deg); }

/* Escape returns focus to the caret, which sits inside .nav__item--menu —
   without this override that focus would satisfy :focus-within above and
   reopen the panel it was just asked to close. Cleared on the caret's own
   blur (app.js), by which point focus has moved on anyway. */
.nav__item--menu.is-forced-closed .nav__menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate(-50%, -6px) !important;
  transition: none !important;
}

.nav__item--menu.is-forced-closed .nav__caret svg { transform: none !important; }

.nav__menu-eyebrow { display: block; margin: 0.1rem 0.35rem 0.7rem; }

/* The rows are anchors inside .nav, so the generic `.nav a` pill rule above
   (class + element, plus its :hover / .is-active variants) outranks a
   single-class rule. Scoping under .nav__menu lifts these above it, and the
   pill padding, 999px radius and white hover tint are reset explicitly. */
.nav__menu .nav__menu-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.6rem 0.5rem;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink-2);
  text-decoration: none;
  transition: background-color 0.3s var(--ease);
}

.nav__menu .nav__menu-row:hover,
.nav__menu .nav__menu-row:focus-visible { color: var(--ink-2); background: rgba(170, 230, 51, 0.07); }

.nav__menu .nav__menu-row.is-active { color: var(--ink-2); background: rgba(170, 230, 51, 0.05); }

.nav__menu .nav__menu-row:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }

.nav__menu-n {
  flex: none;
  padding-top: 0.1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--lime);
  opacity: 0.7;
  transition: opacity 0.3s var(--ease);
}

.nav__menu-row:hover .nav__menu-n,
.nav__menu-row:focus-visible .nav__menu-n,
.nav__menu-row.is-active .nav__menu-n { opacity: 1; }

.nav__menu-copy { display: flex; flex-direction: column; gap: 0.15rem; }

.nav__menu-label { font-size: 0.92rem; font-weight: 600; color: var(--ink); transition: color 0.3s var(--ease); }

.nav__menu-row:hover .nav__menu-label,
.nav__menu-row:focus-visible .nav__menu-label,
.nav__menu-row.is-active .nav__menu-label { color: var(--lime); }

.nav__menu-desc { font-size: 0.76rem; line-height: 1.4; color: var(--muted); }

.nav__menu .nav__menu-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.4rem;
  padding: 0.65rem 0.75rem;
  border-top: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: none;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.nav__menu .nav__menu-all svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }

.nav__menu .nav__menu-all:hover,
.nav__menu .nav__menu-all:focus-visible,
.nav__menu .nav__menu-all.is-active { color: var(--lime); background: rgba(170, 230, 51, 0.07); }

.nav__menu .nav__menu-all:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }

.nav__menu .nav__menu-all:hover svg,
.nav__menu .nav__menu-all:focus-visible svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .nav__menu,
  .nav__caret svg,
  .nav__menu-all svg { transition: none !important; }
}

/* -------------------------------------------------------- drawer: group -- */

.drawer__group-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }

/* .drawer > a (font size, hover/is-active colour + indent) no longer matches
   once the link sits one level deeper inside .drawer__group-row, so its
   look is restated here rather than restructuring the selector above. */
.drawer__group-row > a {
  flex: 1 1 auto;
  padding: 0.9rem 0;
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.3s var(--ease), padding-left 0.3s var(--ease);
}

.drawer__group-row > a:hover,
.drawer__group-row > a.is-active { color: var(--lime); padding-left: 0.4rem; }

.drawer__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink-2);
  transition: transform 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.drawer__toggle:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

.drawer__toggle svg { width: 17px; height: 17px; }

.drawer__group.is-open .drawer__toggle { transform: rotate(180deg); color: var(--lime); border-color: rgba(170, 230, 51, 0.35); }

.drawer__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--ease); }

.drawer__group.is-open .drawer__sub { grid-template-rows: 1fr; }

.drawer__sub > div { overflow: hidden; }

.drawer__sub a {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.65rem 0 0.65rem 0.5rem;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.3s var(--ease), padding-left 0.3s var(--ease);
}

.drawer__sub a b { flex: none; font-size: 0.78rem; font-weight: 700; color: var(--lime); opacity: 0.75; }

.drawer__sub a:hover,
.drawer__sub a.is-active { color: var(--lime); padding-left: 0.9rem; }

.drawer__sub a.is-active b { opacity: 1; }

.drawer__sub a.drawer__sub-all {
  justify-content: space-between;
  margin-top: 0.3rem;
  padding: 0.85rem 0 0.65rem 0.5rem;
  border-top: 1px solid var(--line-soft);
}

.drawer__sub a.drawer__sub-all svg { flex: none; width: 15px; height: 15px; }

@media (prefers-reduced-motion: reduce) {
  .drawer__toggle,
  .drawer__sub { transition: none !important; }
}

/* Print: scroll, load and click never happen on paper, so anything that starts hidden must start shown.
   And paper is white. This theme is light-on-black, and with Chrome's default (background graphics
   off) the black never prints, so the white text lands on white paper. On paper it prints as ink. */
@media print {
  /* -- hidden until scrolled, loaded or clicked -- */
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .hero__title .line em,
  .js .hero__stage .lead,
  .js .hero__stage .btn-row,
  .js .hero__topline { animation: none !important; opacity: 1 !important; transform: none !important; }
  .qa__a { grid-template-rows: 1fr !important; }
  .qa__a > div { overflow: visible !important; }

  /* -- ink on paper: the same tokens, re-pointed. The brand lime is 1.5:1 on white, so lime text
        prints in a darker green of the same hue (5.6:1). -- */
  :root {
    --bg: #fff;  --bg-deep: #fff;  --panel: #fff;  --panel-2: #fff;
    --line: rgba(0, 0, 0, .28);  --line-soft: rgba(0, 0, 0, .14);
    --lime: #4a7300;  --lime-dim: #4a7300;
    --ink: #111;  --ink-2: #333;  --muted: #4a4a4a;  --faint: #5c5c5c;
  }
  *, *::before, *::after {
    text-shadow: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* -- screen-only controls -- */
  .burger, .drawer, .nav, .hero__cue, .hero__replay, .hero__bar,
  .call-fab, .btn__pip, .cf-turnstile { display: none !important; }

  /* -- a fixed header prints over the top of every sheet; the 92px gaps only cleared it -- */
  .header, .header.is-stuck { position: static; padding: 0 0 .8rem; background: none; border-bottom: 1px solid var(--line-soft); }
  .hero--inner, .hero--cinema { padding-top: 0; }
  html .crumb { padding-top: .6rem; }   /* landing.css loads after this file, hence html */

  /* -- hero: the film and the black card stay on screen; the words print -- */
  .hero--cinema, .hero .hero__card { background: none; min-height: 0; }
  .hero--cinema .hero__film, .hero--cinema .hero__scrim { display: none; }
  .hero__frame { padding: 1rem 0 1.4rem; }
  .hero__title .line--ghost em { -webkit-text-stroke-color: var(--ink); }
  .hero__stage .lead, .hero__content .lead { color: var(--ink-2); }
  .hero__meta-l i { background: var(--line); }
  /* copy beside the photo, as on a desktop, rather than a half-sheet photo under it */
  .hero__card--split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    grid-template-areas: "meta meta" "content side";
  }
  .hero__side { padding: 1rem 1.25rem 1rem 0; }
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* .lay is one column at paper width anyway, and as a grid Chrome moved the whole row to the next
     sheet rather than split it, leaving most of a sheet blank (two suburb pages went 6 sheets to 4) */
  .lay { display: block; }
  .lay > * + * { margin-top: 1.2rem; }

  /* services ribbon: one still line, not a looping lime strip */
  .hero__ribbon { margin-top: .6rem; background: none; color: var(--ink-2); border-block: 1px solid var(--line-soft); }
  .hero__ribbon-track { animation: none; width: auto; }
  .hero__ribbon-set { flex-wrap: wrap; white-space: normal; gap: .35rem 1.4rem; padding: .7rem 0; }
  .hero__ribbon-set + .hero__ribbon-set { display: none; }   /* the second copy only exists to loop */

  /* buttons print as labels (the phone number is the useful one), not lime pills */
  .btn, .btn--primary, .btn--glass { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line); }
  .btn { padding: .45rem 1.1rem; }

  /* band photos are decoration (alt=""), so they go with their scrim and the copy reads on paper */
  .band__bg, .band::after { display: none; }
  .band { border: 1px solid var(--line-soft); }

  /* photo cards keep their photo, so their copy stays white on the dark scrim, and the scrim is told
     to print whatever the dialog says. Without it the white copy sits on bare photo. */
  .mcard {
    --ink: #fff;  --ink-2: rgba(255, 255, 255, .82);  --muted: rgba(255, 255, 255, .82);
    --lime: #aae633;  --panel: #131313;
    color: var(--ink);
    min-height: 240px;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .mcard--tall { min-height: 300px; }
  .mcard__body p { color: rgba(255, 255, 255, .86); }
  /* a shorter card puts the title higher up the photo, where the screen scrim is thin */
  .mcard::after { background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .74) 52%, rgba(0, 0, 0, .1) 86%); }

  /* the hairline grids draw their lines as the container's background showing through 1px gaps;
     where one breaks across sheets that background prints as a grey slab, so draw the lines */
  .steps, .info, html .proof { background: none; }
  .step, .info__item, .proof__item { outline: 1px solid var(--line-soft); }

  /* surfaces tuned for black */
  .field input, .field select, .field textarea { background: #fff; }
  .map { filter: none; }
  .proof .proof__item--brand img { filter: grayscale(1); opacity: 1; }   /* landing.css again */
  html .filebar .filebar__tabs a b { opacity: 1; }                       /* the 01-04 numbers faded to 2.8:1 */

  /* FAQ: every answer prints open, so the plus/minus would say otherwise */
  .qa__q::before, .qa__q::after { display: none; }
  .qa__q { padding-right: 0; }

  /* screen-sized gaps become paper-sized, and nothing splits across a sheet edge */
  .section { padding: 1.6rem 0; }
  .section--tight { padding: 1.2rem 0; }
  .section--flush-top { padding-top: 0; }
  .hero__card, .mcard, .tcard, .step, .stat, .info__item, .qa__item,
  .split__media, .band, .proof__item, .ticks li { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
}