/* Pinnacle Locksmiths - site stylesheet
   Hand-maintained. build.mjs copies this to site/assets/css/site.css and fingerprints it.
   Palette is taken from the client's own brand: the black van, the gold signwriting on it,
   and the near-black of the circular logo. */

/* ---------- fonts (self-hosted, latin subset, variable) ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo.woff2') format('woff2-variations');
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'InterVar';
  src: url('/assets/fonts/inter.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --ink:        #0a0d12;
  --ink-2:      #10141b;
  --steel:      #171d26;
  --steel-2:    #202836;
  --line:       #2b3340;

  --gold:       #f5b301;
  --gold-lift:  #ffcb3d;
  --gold-deep:  #c98a00;   /* fills, borders, decoration */
  --gold-text:  #8a5e00;   /* gold TEXT on a light background - 5.68:1 on white */

  --sea:        #2e7fa8;

  --paper:      #f7f8fa;
  --paper-2:    #edf0f4;
  --card:       #ffffff;

  --tx:         #12161d;
  --tx-soft:    #4c5666;
  --tx-mute:    #6b7686;
  --on-dark:    #eef1f6;
  --on-dark-2:  #a8b3c2;

  --ok:         #1f8a52;
  --alert:      #c02b2b;

  --shell:      min(1280px, 100% - 3rem);
  --shell-tight: min(840px, 100% - 3rem);

  /* Vertical rhythm. Sections were a single uniform value, which is what made the page feel
     flat - everything the same distance from everything else. Three steps, used deliberately. */
  --s-sm:       clamp(3rem, 5vw, 4.5rem);
  --s-md:       clamp(4.5rem, 8vw, 8rem);
  --s-lg:       clamp(6rem, 11vw, 11rem);
  --r:          14px;
  --r-lg:       22px;

  --shadow:     0 1px 2px rgba(10,13,18,.06), 0 8px 24px -12px rgba(10,13,18,.18);
  --shadow-lg:  0 2px 4px rgba(10,13,18,.05), 0 28px 60px -28px rgba(10,13,18,.35);

  --ff-display: 'Archivo', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
  --ff-body:    'InterVar', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

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

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tx);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.35rem, 1.5rem + 4.1vw, 4.9rem); letter-spacing: -0.036em; }
h2 { font-size: clamp(1.8rem, 1.2rem + 2.5vw, 3.2rem); letter-spacing: -0.03em; }
h3 { font-size: clamp(1.2rem, 1.04rem + .78vw, 1.6rem); letter-spacing: -0.022em; }
h4 { font-size: 1.05rem; letter-spacing: -0.005em; }
p  { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

/* ---------- utility ---------- */
.shell { width: var(--shell); margin-inline: auto; }
.shell-tight { width: var(--shell-tight); margin-inline: auto; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: var(--ink); padding: .8rem 1.2rem;
  font-weight: 700; border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--sea);
  outline-offset: 2px;
  border-radius: 4px;
}
.on-dark :where(a, button):focus-visible { outline-color: var(--gold-lift); }

.eyebrow {
  font-family: var(--ff-display);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 1.15rem;
  display: flex; align-items: center; gap: .8rem;
}
.eyebrow::before {
  content: ''; width: 34px; height: 1px; background: currentColor; flex: none; opacity: .55;
}
.on-dark .eyebrow { color: var(--gold); }

.lede { font-size: clamp(1.08rem, 1rem + .4vw, 1.28rem); color: var(--tx-soft); line-height: 1.6; }
.on-dark .lede { color: var(--on-dark-2); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--ff-display); font-weight: 700; font-size: 1rem;
  letter-spacing: -0.005em;
  padding: .92rem 1.5rem;
  border-radius: 999px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.btn--gold  { background: var(--gold); color: #1a1200; box-shadow: 0 6px 20px -8px rgba(245,179,1,.75); }
.btn--gold:hover  { background: var(--gold-lift); box-shadow: 0 10px 26px -8px rgba(245,179,1,.85); }
.btn--dark  { background: var(--ink); color: #fff; }
.btn--dark:hover  { background: var(--steel-2); }
.btn--ghost { background: transparent; color: var(--tx); border-color: rgba(18,22,29,.22); }
.btn--ghost:hover { border-color: var(--tx); background: rgba(18,22,29,.04); }
/* .drawer was missing from this list until 2026-10-06: its "Send an enquiry" was near-black on
   near-black, and no check saw it because nothing measured contrast with the drawer open. */
:where(.on-dark, .hero, .phead, .band, .sec--dark, .drawer) .btn--ghost {
  color: #fff; border-color: rgba(255,255,255,.42);
}
:where(.on-dark, .hero, .phead, .band, .sec--dark, .drawer) .btn--ghost:hover {
  border-color: #fff; background: rgba(255,255,255,.12);
}
.btn--lg { padding: 1.06rem 1.9rem; font-size: 1.08rem; }
.btn--block { width: 100%; }

/* ---------- header ---------- */
.hdr-alert {
  background: var(--ink);
  color: var(--on-dark);
  font-size: .875rem;
}
.hdr-alert__in {
  width: var(--shell); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 42px; padding: .35rem 0;
}
.hdr-alert__msg { display: flex; align-items: center; gap: .5rem; }
.hdr-alert__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none;
  box-shadow: 0 0 0 0 rgba(245,179,1,.7);
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245,179,1,.6); }
  70%  { box-shadow: 0 0 0 9px rgba(245,179,1,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,179,1,0); }
}
@media (prefers-reduced-motion: reduce) { .hdr-alert__dot { animation: none; } }
.hdr-alert a { color: var(--gold); font-weight: 700; text-decoration: none; white-space: nowrap; }
.hdr-alert a:hover { text-decoration: underline; }
@media (max-width: 620px) { .hdr-alert__msg span { display: none; } }

.hdr {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid rgba(18,22,29,.09);
  transition: box-shadow .25s var(--ease);
}
.hdr[data-stuck] { box-shadow: 0 10px 30px -18px rgba(10,13,18,.4); }
.hdr__in {
  width: var(--shell); margin-inline: auto;
  display: flex; align-items: center; gap: 1.4rem;
  min-height: 82px;
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: 0 1 auto; min-width: 0; }
.brand img { width: 52px; height: 52px; }
.brand__tx { display: flex; flex-direction: column; line-height: 1.05; }
.brand__nm {
  font-family: var(--ff-display); font-weight: 800; font-size: 1.16rem;
  letter-spacing: -0.028em; color: var(--ink); white-space: nowrap;
}
.brand__sub {
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tx-mute); font-weight: 600; white-space: nowrap;
}
/* 🔴 The brand block and the nav were only 1.2rem apart, so at common desktop widths the
   "THE PEAK OF LOCK & KEY SOLUTIONS" line ran straight into the Home link. Below 1400px the
   strapline is dropped rather than allowed to collide. Above it the row has 14px to spare with
   all three header buttons showing (2026-10-06), which the nav's auto margin puts between the
   strapline and "Home" - so do not add width to anything in the header without re-measuring. */
@media (max-width: 1400px) { .brand__sub { display: none; } }
@media (max-width: 400px) { .brand__sub { display: none; } }

.nav { margin-left: auto; display: flex; align-items: center; gap: .1rem; }
.nav a, .nav > .nav__grp > button {
  font-family: var(--ff-display); font-weight: 600; font-size: .9rem;
  color: var(--tx); text-decoration: none;
  padding: .6rem .55rem; border-radius: 9px;
  background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: .3rem;
  white-space: nowrap;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.nav a:hover, .nav > .nav__grp > button:hover { background: rgba(18,22,29,.06); }
.nav a[aria-current="page"] { color: var(--gold-text); background: rgba(245,179,1,.12); }

.nav__grp { position: relative; }
.nav__grp > button svg { width: .7em; height: .7em; transition: transform .2s var(--ease); }
.nav__grp[data-open] > button svg { transform: rotate(180deg); }
.nav__menu {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 250px; background: #fff; border: 1px solid rgba(18,22,29,.1);
  border-radius: var(--r); box-shadow: var(--shadow-lg);
  padding: .45rem; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav__grp[data-open] > .nav__menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }

/* 🔴 THE DROPDOWN DEAD ZONE.
   The panel sits 8px below the button, and .nav__grp is only as tall as the button - so those
   8px belong to neither. The moment the mouse enters that strip on its way to the menu it is
   outside the group, pointerleave fires, and the menu closes before it can be reached. The bug
   is invisible to page.hover() and to any test that jumps the cursor straight to a menu item,
   because nothing ever crosses the gap.
   This pseudo-element covers it. It is a DOM descendant of .nav__grp, so hovering it does not
   count as leaving the group, and it inherits the panel's pointer-events so it is inert while
   the menu is closed. The visual 8px gap is unchanged. */
.nav__menu::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -14px; height: 14px;
}
.nav__menu a { padding: .58rem .7rem; font-weight: 600; font-size: .93rem; border-radius: 8px; }
.nav__menu a small { display: block; font-family: var(--ff-body); font-weight: 400; font-size: .78rem; color: var(--tx-mute); margin-top: .1rem; }

.hdr__cta { display: flex; align-items: center; gap: .5rem; flex: none; }
/* Three buttons share this row with the nav since "Get an automotive quote" was added (2026-10-06),
   and the row is capped at the 1280px shell however wide the screen is. So the header's buttons
   are a size down from the page's own, and the nav keeps its compact spacing at every width.
   Measured in Chrome: brand 282 (with the strapline) + nav 444 + buttons ~490 + two gaps. */
.hdr__cta .btn { padding: .72rem 1rem; font-size: .92rem; white-space: nowrap; }

.burger {
  display: none; width: 46px; height: 46px; border-radius: 11px;
  border: 1px solid rgba(18,22,29,.16); background: #fff; cursor: pointer;
  align-items: center; justify-content: center; flex: none;
}
.burger span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; transition: background-color .15s; }
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .22s var(--ease), top .22s var(--ease);
}
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* Which quote buttons the header has room for. Both from 1341px (the shell is its full 1280px);
   below that only the automotive one, because "Contact" is still in the nav beside it; below
   1181px the phone button alone. The drawer carries both on a phone. */
@media (max-width: 1340px) { .hdr__cta .hdr__quote { display: none; } }
@media (max-width: 1180px) { .hdr__cta .hdr__auto { display: none; } }
@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: flex; }
  /* the nav's auto margin was what pushed the buttons to the right edge; with the nav gone the
     phone button and the burger sat beside the logo on a tablet */
  .hdr__cta { margin-left: auto; }
}
@media (max-width: 560px) {
  .hdr__cta .btn span { display: none; }
  .hdr__cta .btn { padding: .8rem .95rem; }
  .hdr__in { gap: .6rem; min-height: 66px; }
  .brand img { width: 42px; height: 42px; }
  .brand { gap: .5rem; }
  .brand__nm { font-size: 1rem; letter-spacing: -0.03em; }
  .burger { width: 42px; height: 42px; }
}
@media (max-width: 380px) {
  .brand__nm { font-size: .92rem; }
  .brand img { width: 36px; height: 36px; }
}

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 120;
  background: var(--ink); color: var(--on-dark);
  transform: translateX(100%);
  transition: transform .3s var(--ease);
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden;
}
.drawer[data-open] { transform: none; visibility: visible; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.drawer__close { width: 44px; height: 44px; border-radius: 11px; border: 1px solid rgba(255,255,255,.22); background: none; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.drawer nav { padding: .9rem 1.25rem 2rem; display: flex; flex-direction: column; }
.drawer nav a {
  font-family: var(--ff-display); font-weight: 700; font-size: 1.24rem;
  color: #fff; text-decoration: none; padding: .82rem 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.drawer nav a[aria-current="page"] { color: var(--gold); }
.drawer nav a small { display: block; font-family: var(--ff-body); font-weight: 400; font-size: .8rem; color: var(--on-dark-2); }
.drawer__foot { padding: 1.4rem 1.25rem 2.4rem; display: grid; gap: .7rem; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--on-dark);
  isolation: isolate;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    /* Heavy on the left so the headline has contrast, then falling away so the client's own
       photograph is actually visible on the right. No radial pocket - that existed only to give
       the 3D lock something to read against, and the lock now has its own section. */
    linear-gradient(100deg, rgba(10,13,18,.95) 0%, rgba(10,13,18,.86) 32%, rgba(10,13,18,.5) 56%, rgba(10,13,18,.26) 78%, rgba(10,13,18,.2) 100%),
    linear-gradient(to top, rgba(10,13,18,.88) 0%, rgba(10,13,18,0) 40%);
}
.hero__in {
  position: relative; z-index: 2;
  width: var(--shell); margin-inline: auto;
  padding: clamp(4.5rem, 10vw, 9rem) 0 clamp(4rem, 8vw, 7rem);
  max-width: none;
  min-height: clamp(30rem, 62vh, 44rem);
  display: flex; align-items: center;
}
.hero__col { max-width: 42rem; }
.hero h1 { color: #fff; margin-bottom: .35em; }
.hero h1 .accent {
  background: linear-gradient(96deg, var(--gold-lift), var(--gold) 55%, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: inline-block;
}
@supports not (background-clip: text) { .hero h1 .accent { color: var(--gold); } }
.hero__sub { font-size: clamp(1.06rem, .98rem + .5vw, 1.32rem); color: #cfd6e0; max-width: 34rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.9rem 0 0; }
/* The home hero has three buttons since "Get an automotive quote" was added (2026-10-06). They
   need 685px and the text column is 672px, so from tablet width up the row alone may run 2rem
   past the column's edge rather than leave the third button on a line of its own. Scoped to
   .hero: the same class is reused further down the home page, in a column that ends at the
   shell's edge. */
@media (min-width: 761px) { .hero .hero__cta { margin-right: -2rem; } }
/* ...and on a phone three pills of three different widths stack raggedly, so they fill the row. */
@media (max-width: 560px) { .hero .hero__cta .btn { flex: 1 1 100%; } }

.hero__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2.1rem 0 0; padding: 0; list-style: none; }
.hero__chips li {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .855rem; font-weight: 600;
  padding: .46rem .85rem .46rem .7rem;
  border: 1px solid rgba(255,255,255,.2); border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: #e6ebf2;
  backdrop-filter: blur(6px);
}
.hero__chips svg { width: 15px; height: 15px; color: var(--gold); flex: none; }

@media (max-width: 900px) {
  .hero__bg img { object-position: 68% 50%; }
  .hero__bg::after {
    background:
      linear-gradient(180deg, rgba(10,13,18,.9) 0%, rgba(10,13,18,.76) 45%, rgba(10,13,18,.9) 100%);
  }
}

/* ---------- trust strip ---------- */
.trust {
  background: var(--ink); color: var(--on-dark-2);
  border-top: 1px solid rgba(255,255,255,.09);
  border-bottom: 1px solid rgba(255,255,255,.09);
  padding: 1.35rem 0;
}
.trust__in {
  width: var(--shell); margin-inline: auto;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1rem, 4vw, 3.2rem); flex-wrap: wrap;
  font-size: .78rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
}
.trust__i { display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap; }
.trust__i svg { width: 17px; height: 17px; color: var(--gold); flex: none; }

/* ---------- sections ---------- */
.sec { padding: var(--s-md) 0; }
.sec--tight { padding: var(--s-sm) 0; }
.sec--tall  { padding: var(--s-lg) 0; }
.sec--paper { background: var(--paper); }
.sec--white { background: #fff; }
.sec--soft  { background: var(--paper-2); }
.sec--dark  { background: var(--ink); color: var(--on-dark); }
.sec--dark h2, .sec--dark h3 { color: #fff; }
.sec--dark p { color: var(--on-dark-2); }

.sec__head { max-width: 44rem; margin-bottom: clamp(2.6rem, 5vw, 4.2rem); }
.sec__head--mid { margin-inline: auto; text-align: center; }
.sec__head--mid .eyebrow { justify-content: center; }

/* ---------- cards ---------- */
.grid { display: grid; gap: 1.4rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.card {
  background: var(--card);
  border: 1px solid rgba(18,22,29,.09);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
a.card { text-decoration: none; color: inherit; }
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(245,179,1,.5); }
.card__img { aspect-ratio: 16 / 10; background: var(--paper-2); overflow: hidden; }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
a.card:hover .card__img img { transform: scale(1.045); }
.card__body { padding: 1.4rem 1.5rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.card__body h3 { margin-bottom: .45rem; }
.card__body p { color: var(--tx-soft); font-size: .96rem; margin-bottom: 1rem; }
.card__more {
  margin-top: auto; font-family: var(--ff-display); font-weight: 700; font-size: .93rem;
  color: var(--gold-text); display: inline-flex; align-items: center; gap: .4rem;
}
.card__more svg { width: 1em; height: 1em; transition: transform .2s var(--ease); }
a.card:hover .card__more svg { transform: translateX(4px); }

.sec--dark .card { background: var(--steel); border-color: rgba(255,255,255,.09); }
.sec--dark .card__body p { color: var(--on-dark-2); }
.sec--dark .card__more { color: var(--gold); }

/* icon card */
.icard { background: var(--card); border: 1px solid rgba(18,22,29,.09); border-radius: var(--r-lg); padding: 1.6rem; }
.icard__ic {
  width: 48px; height: 48px; border-radius: 13px;
  background: linear-gradient(140deg, rgba(245,179,1,.2), rgba(245,179,1,.06));
  border: 1px solid rgba(245,179,1,.34);
  display: grid; place-items: center; margin-bottom: 1.05rem;
}
.icard__ic svg { width: 23px; height: 23px; color: var(--gold-text); }
.icard h3 { font-size: 1.14rem; margin-bottom: .4rem; }
.icard p { color: var(--tx-soft); font-size: .955rem; margin: 0; }
.sec--dark .icard { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.1); }
.sec--dark .icard__ic { background: rgba(245,179,1,.14); }
.sec--dark .icard__ic svg { color: var(--gold); }
.sec--dark .icard p { color: var(--on-dark-2); }

/* ---------- prose ---------- */
.prose { max-width: 44rem; }
.prose h2 { margin-top: 2.4rem; }
.prose h3 { margin-top: 1.9rem; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 0; margin: 0 0 1.3rem; list-style: none; }
.prose ol { counter-reset: n; }
.prose ul > li, .prose ol > li { position: relative; padding-left: 1.85rem; margin-bottom: .6rem; }
.prose ul > li::before {
  content: ''; position: absolute; left: .3rem; top: .62em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--gold); transform: rotate(45deg);
}
.prose ol > li { counter-increment: n; }
.prose ol > li::before {
  content: counter(n); position: absolute; left: 0; top: .06em;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--ink); color: var(--gold);
  font-family: var(--ff-display); font-size: .76rem; font-weight: 700;
  display: grid; place-items: center;
}
.prose a { color: var(--gold-text); text-decoration-thickness: 1.5px; text-underline-offset: 2px; font-weight: 600; }
.prose a:hover { color: var(--ink); }
.prose strong { font-weight: 700; color: var(--tx); }

/* two-column list for long service lists */
.cols2 { columns: 2; column-gap: 2.2rem; }
.cols2 > li { break-inside: avoid; }
@media (max-width: 620px) { .cols2 { columns: 1; } }

/* ---------- split ---------- */
.split { display: grid; gap: clamp(2.4rem, 5vw, 5.5rem); align-items: center; grid-template-columns: 1fr; }
/* 7/5 rather than 50/50 - an even split reads as a wireframe, not a layout */
@media (min-width: 900px) {
  .split { grid-template-columns: 7fr 5fr; }
  .split--rev { grid-template-columns: 5fr 7fr; }
  .split--rev > :first-child { order: 2; }
  .split--even { grid-template-columns: 1fr 1fr; }
  .split--top { align-items: start; }
}
.split__media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.split__media img { width: 100%; }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1.2rem; }
.stat { text-align: center; padding: 1.4rem .8rem; border: 1px solid rgba(255,255,255,.1); border-radius: var(--r); background: rgba(255,255,255,.04); }
.stat__n { font-family: var(--ff-display); font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); font-weight: 800; color: var(--gold); line-height: 1; }
.stat__l { font-size: .82rem; color: var(--on-dark-2); margin-top: .45rem; letter-spacing: .02em; }

/* ---------- area lists ---------- */
.arealist { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); }
.arealist a {
  display: flex; align-items: center; gap: .5rem;
  padding: .62rem .85rem; border-radius: 10px;
  background: #fff; border: 1px solid rgba(18,22,29,.09);
  text-decoration: none; font-size: .93rem; font-weight: 600;
  transition: border-color .16s var(--ease), background-color .16s var(--ease), transform .16s var(--ease);
}
.arealist a:hover { border-color: var(--gold); background: rgba(245,179,1,.07); transform: translateX(2px); }
.arealist svg { width: 14px; height: 14px; color: var(--gold-text); flex: none; }
/* a link grid inside body copy must not pick up the prose bullet and indent (brand pages, 2026-09-15) */
.prose .arealist { margin-bottom: 1.3rem; }
.prose .arealist > li { padding-left: 0; margin-bottom: 0; }
.prose .arealist > li::before { content: none; display: none; }
.sec--dark .arealist a { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: #fff; }
.sec--dark .arealist a:hover { background: rgba(245,179,1,.14); border-color: var(--gold); }

/* ---------- breadcrumbs ---------- */
.crumbs { font-size: .84rem; color: var(--tx-mute); padding: 1rem 0 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.crumbs li { display: flex; align-items: center; gap: .4rem; }
.crumbs li + li::before { content: '/'; color: rgba(18,22,29,.28); }
.crumbs a { color: var(--tx-mute); text-decoration: none; }
.crumbs a:hover { color: var(--gold-deep); text-decoration: underline; }
.crumbs [aria-current] { color: var(--tx); font-weight: 600; }

/* ---------- page head ---------- */
.phead { background: var(--ink); color: var(--on-dark); position: relative; overflow: hidden; }
.phead::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(70rem 30rem at 82% -20%, rgba(245,179,1,.15), transparent 62%);
}
.phead__in { position: relative; width: var(--shell); margin-inline: auto; padding: clamp(2.2rem, 5vw, 3.6rem) 0 clamp(2.4rem, 5vw, 3.8rem); }
.phead .crumbs, .phead .crumbs a { color: rgba(232,237,244,.6); }
.phead .crumbs a:hover { color: var(--gold); }
.phead .crumbs li + li::before { color: rgba(232,237,244,.3); }
.phead .crumbs [aria-current] { color: #fff; }
.phead h1 { color: #fff; margin: 1.1rem 0 .5rem; max-width: 24ch; }
.phead p { color: var(--on-dark-2); max-width: 46rem; font-size: clamp(1.02rem, .96rem + .35vw, 1.18rem); margin: 0; }
.phead__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: .75rem; max-width: 48rem; }
.faq details {
  background: #fff; border: 1px solid rgba(18,22,29,.1); border-radius: var(--r);
  overflow: hidden; transition: border-color .18s var(--ease);
}
.faq details[open] { border-color: rgba(245,179,1,.55); }
.faq summary {
  cursor: pointer; padding: 1.1rem 3rem 1.1rem 1.25rem; position: relative;
  font-family: var(--ff-display); font-weight: 700; font-size: 1.04rem; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 1.2rem; top: 1.42rem;
  width: 10px; height: 10px; border-right: 2.5px solid var(--gold-text); border-bottom: 2.5px solid var(--gold-text);
  transform: rotate(45deg); transition: transform .22s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.6rem; }
.faq .faq__a { padding: 0 1.25rem 1.25rem; color: var(--tx-soft); }
.faq .faq__a > :last-child { margin-bottom: 0; }
.sec--dark .faq details { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.11); }
.sec--dark .faq .faq__a { color: var(--on-dark-2); }

/* ---------- callout ---------- */
.callout {
  border-left: 4px solid var(--gold);
  background: linear-gradient(100deg, rgba(245,179,1,.12), rgba(245,179,1,.03));
  padding: 1.25rem 1.4rem; border-radius: 0 var(--r) var(--r) 0; margin: 1.8rem 0;
}
.callout > :last-child { margin-bottom: 0; }
.callout strong { color: var(--ink); }

/* ---------- CTA band ---------- */
.band { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.band::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(52rem 26rem at 15% 0%, rgba(245,179,1,.2), transparent 60%),
              radial-gradient(46rem 24rem at 90% 110%, rgba(46,127,168,.24), transparent 62%);
}
.band__in { position: relative; width: var(--shell); margin-inline: auto; padding: clamp(3rem, 6vw, 4.6rem) 0; text-align: center; }
.band h2 { color: #fff; margin-bottom: .5rem; }
.band p { color: var(--on-dark-2); max-width: 40rem; margin-inline: auto; }
.band__cta { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; margin-top: 1.9rem; }
.band__ph {
  display: block; font-family: var(--ff-display); font-weight: 800;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); color: var(--gold);
  text-decoration: none; letter-spacing: -0.03em; margin-top: .4rem;
}
.band__ph:hover { color: var(--gold-lift); }

/* ---------- form ---------- */
.formwrap { background: #fff; border: 1px solid rgba(18,22,29,.1); border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.3rem); box-shadow: var(--shadow); scroll-margin-top: 110px; }
/* an in-page "Send an enquiry" link has just brought this form into view (site.js) */
.formwrap[data-flash] { animation: formflash 1.6s var(--ease) 1; }
@keyframes formflash {
  0%, 35% { box-shadow: 0 0 0 4px var(--gold), var(--shadow); }
  100%    { box-shadow: 0 0 0 0 rgba(245,179,1,0), var(--shadow); }
}
@media (prefers-reduced-motion: reduce) { .formwrap[data-flash] { animation: none; } }
.sec--dark .formwrap { background: var(--steel); border-color: rgba(255,255,255,.1); }
.field { margin-bottom: 1.05rem; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .4rem; color: var(--tx); }
.sec--dark .field label { color: #fff; }
.field .req { color: var(--alert); }
.sec--dark .field .req { color: #ff8f8f; }
.field input, .field textarea, .field select {
  width: 100%; padding: .82rem .95rem;
  border: 1.5px solid rgba(18,22,29,.18); border-radius: 11px;
  background: #fff; color: var(--tx);
  -webkit-text-fill-color: var(--tx);
  font-family: var(--ff-body); font-size: 1rem; line-height: 1.5;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(245,179,1,.18);
}
.field input::placeholder, .field textarea::placeholder { color: #9aa4b2; -webkit-text-fill-color: #9aa4b2; }
.field--2 { display: grid; gap: 1.05rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .field--2 { grid-template-columns: 1fr 1fr; } }
.hpot { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }
.formnote { font-size: .82rem; color: var(--tx-mute); margin-top: .9rem; }
.sec--dark .formnote { color: var(--on-dark-2); }
.formmsg { padding: .95rem 1.1rem; border-radius: 11px; margin-bottom: 1.1rem; font-size: .95rem; font-weight: 600; }
.formmsg[data-t="ok"]  { background: rgba(31,138,82,.12); color: #14603a; border: 1px solid rgba(31,138,82,.3); }
.formmsg[data-t="err"] { background: rgba(192,43,43,.1); color: #8f1f1f; border: 1px solid rgba(192,43,43,.28); }
.sec--dark .formmsg[data-t="ok"]  { background: rgba(31,138,82,.2); color: #a6e9c6; }
.sec--dark .formmsg[data-t="err"] { background: rgba(192,43,43,.22); color: #ffbcbc; }

/* ---------- brand grid ---------- */
.brands { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
.brands a {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  padding: 1.1rem .7rem; background: #fff; border: 1px solid rgba(18,22,29,.09);
  border-radius: var(--r); text-decoration: none; text-align: center;
  font-family: var(--ff-display); font-weight: 700; font-size: .93rem; color: var(--tx);
  transition: border-color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease);
}
.brands a:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--shadow); }
.brands img { width: 62px; height: 62px; object-fit: contain; }

/* ---------- footer ---------- */
.ftr { background: var(--ink); color: var(--on-dark-2); padding-top: clamp(3rem, 6vw, 4.5rem); font-size: .93rem; }
.ftr__grid { width: var(--shell); margin-inline: auto; display: grid; gap: 2.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.ftr__brand { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; text-decoration: none; }
.ftr__brand img { width: 50px; height: 50px; background: #fff; border-radius: 50%; padding: 2px; }
.ftr__brand .brand__nm { color: #fff; }
.ftr__brand .brand__sub { color: var(--on-dark-2); }
.ftr h4 { color: #fff; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1rem; }
.ftr ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.ftr a { color: var(--on-dark-2); text-decoration: none; }
.ftr a:hover { color: var(--gold); text-decoration: underline; }
.ftr__ph { font-family: var(--ff-display); font-size: 1.5rem; font-weight: 800; color: var(--gold) !important; text-decoration: none !important; letter-spacing: -0.02em; display: inline-block; margin-bottom: .3rem; }
.ftr__badge { display: flex; align-items: center; gap: .7rem; margin-top: 1.2rem; padding: .8rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r); }
.ftr__badge img { width: 52px; height: auto; flex: none; background: #fff; border-radius: 8px; padding: 3px; }
.ftr__badge span { font-size: .8rem; line-height: 1.35; }
/* the badge is a link to the MLA member directory (2026-09-15) - the whole badge is the target */
a.ftr__badge { color: var(--on-dark-2); transition: border-color .18s var(--ease); }
a.ftr__badge:hover { border-color: var(--gold); text-decoration: none; }
a.ftr__badge:hover .ftr__badge-sub { color: var(--gold); text-decoration: underline; }
.ftr__base {
  width: var(--shell); margin-inline: auto; margin-top: clamp(2.4rem, 5vw, 3.4rem);
  border-top: 1px solid rgba(255,255,255,.1); padding: 1.4rem 0 6.5rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; justify-content: space-between;
  font-size: .84rem;
}
.ftr__base ul { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.ftr__credit { color: var(--on-dark-2); text-decoration: none; }
.ftr__credit:hover { text-decoration: underline; color: var(--gold); }
@media (min-width: 1081px) { .ftr__base { padding-bottom: 1.6rem; } }

/* ---------- floating contact bar (fleet component) ---------- */
.floatbar { position: fixed; right: 14px; bottom: 14px; z-index: 110; display: flex; flex-direction: column-reverse; align-items: center; gap: 10px; }
.floatbar__btn {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--steel-2); color: #fff; text-decoration: none;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.6);
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.floatbar__btn svg { width: 23px; height: 23px; }
.floatbar__btn--phone { background: var(--gold); color: #1a1200; border-color: transparent; width: 60px; height: 60px; }
.floatbar__btn--phone svg { width: 27px; height: 27px; }
.floatbar__btn:hover { transform: scale(1.08); }
.floatbar__btn--fb:hover { background: #1877f2; }
.floatbar__btn--mail:hover { background: var(--sea); }
.floatbar__toggle { display: none; }
.cnc-js .floatbar__toggle { display: grid; }
.cnc-js .floatbar__stack { display: none; flex-direction: column-reverse; gap: 10px; }
.cnc-js .floatbar[data-open] .floatbar__stack { display: flex; }
.floatbar__stack { display: flex; flex-direction: column-reverse; gap: 10px; }
@media (max-width: 1080px) { .floatbar { bottom: 12px; right: 12px; } }
@media (prefers-reduced-motion: reduce) { .floatbar__btn { transition: none; } }

/* ---------- reveal on scroll (scoped to .cnc-js so no-JS and crawlers see everything) ---------- */
.cnc-js .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.cnc-js .rv[data-seen] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .cnc-js .rv { opacity: 1; transform: none; transition: none; } }

/* ---------- misc ---------- */
.tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
hr { border: 0; border-top: 1px solid rgba(18,22,29,.12); margin: 2.4rem 0; }
::selection { background: var(--gold); color: #1a1200; }

/* ============================================================================
   v2 components - editorial layout.
   The first pass leaned on repeated three-up card grids, which reads as a
   template rather than as a designed page. These are the pieces that replace
   them: a positioning statement at display scale, a numbered service list, a
   full-bleed feature band for the padlock, and figures with real captions.
   ============================================================================ */

/* ---------- statement: a positioning line at display scale ---------- */
.statement { padding: var(--s-lg) 0; background: #fff; }
.statement__in { width: var(--shell); margin-inline: auto; display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 900px) { .statement__in { grid-template-columns: 8fr 4fr; align-items: end; } }
.statement__lead {
  font-family: var(--ff-display);
  font-size: clamp(1.55rem, 1.05rem + 2.1vw, 2.7rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.028em;
  color: var(--tx);
  margin: 0;
  text-wrap: pretty;
}
.statement__lead em { font-style: normal; color: var(--gold-text); }
.statement__side { border-left: 2px solid rgba(245,179,1,.55); padding-left: 1.5rem; }
.statement__side p { color: var(--tx-soft); font-size: .99rem; margin-bottom: .9rem; }
.statement__side p:last-child { margin-bottom: 0; }

/* ---------- numbered editorial list, replacing the card grid ---------- */
.svclist { border-top: 1px solid rgba(18,22,29,.13); }
.svclist__row {
  display: grid; gap: .4rem 2.5rem; align-items: baseline;
  padding: clamp(1.5rem, 2.6vw, 2.3rem) 0;
  border-bottom: 1px solid rgba(18,22,29,.13);
  text-decoration: none; color: inherit;
  position: relative;
  transition: padding-left .3s var(--ease);
}
.svclist__row::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.svclist__row:hover::after { transform: scaleX(1); }
.svclist__row:hover { padding-left: .9rem; }
@media (min-width: 800px) {
  .svclist__row { grid-template-columns: 3.5rem minmax(0, 15rem) minmax(0, 1fr) 2rem; }
}
.svclist__n {
  font-family: var(--ff-display); font-size: .8rem; font-weight: 700;
  color: var(--gold-text); letter-spacing: .08em; padding-top: .35rem;
}
.svclist__t {
  font-family: var(--ff-display); font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem);
  font-weight: 700; letter-spacing: -0.026em; line-height: 1.14; margin: 0;
}
.svclist__d { color: var(--tx-soft); font-size: .99rem; margin: 0; max-width: 40rem; }
.svclist__go {
  justify-self: end; align-self: center; color: var(--gold-text);
  display: none; transition: transform .3s var(--ease);
}
.svclist__go svg { width: 22px; height: 22px; }
@media (min-width: 800px) { .svclist__go { display: block; } }
.svclist__row:hover .svclist__go { transform: translateX(6px); }

/* ---------- feature band: full-bleed dark, for the padlock ---------- */
.feature { position: relative; background: var(--ink); color: var(--on-dark); overflow: hidden; isolation: isolate; }
.feature::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(46rem 38rem at 74% 48%, rgba(245,179,1,.115) 0%, rgba(245,179,1,0) 66%),
    radial-gradient(40rem 30rem at 8% 92%, rgba(46,127,168,.16) 0%, rgba(46,127,168,0) 70%);
}
.feature__in {
  position: relative; z-index: 2;
  width: var(--shell); margin-inline: auto;
  padding: var(--s-lg) 0;
  display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .feature__in { grid-template-columns: 6fr 6fr; } }
.feature h2 { color: #fff; }
.feature p { color: var(--on-dark-2); }
.feature__stage { position: relative; aspect-ratio: 1 / 1; max-height: 34rem; width: 100%; }
.feature__canvas {
  /* 🔴 The explicit 100% is load-bearing. A <canvas> is a REPLACED element with an intrinsic
     300x150 size, so `inset: 0` with width:auto resolves to THAT rather than stretching the way
     a <div> would - and it renders as a small picture in the corner while every DOM check
     reports a healthy WebGL context. build/shots.mjs asserts the backing store size. */
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 1s var(--ease);
}
.feature__canvas[data-ready] { opacity: 1; }
/* a still, styled fallback so the section never looks empty without WebGL or on a phone */
.feature__fallback { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .6s var(--ease); }
.feature__fallback svg { width: min(58%, 17rem); height: auto; color: rgba(245,179,1,.34); }
.feature__canvas[data-ready] + .feature__fallback { opacity: 0; }
@media (max-width: 767px) { .feature__stage { aspect-ratio: 4 / 3; max-height: 20rem; } }

.feature__points { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.15rem; }
.feature__points li { display: grid; grid-template-columns: 1.7rem 1fr; gap: .9rem; align-items: start; }
.feature__points svg { width: 19px; height: 19px; color: var(--gold); margin-top: .22rem; }
.feature__points strong { color: #fff; display: block; font-family: var(--ff-display); font-size: 1.03rem; margin-bottom: .12rem; }
.feature__points span { color: var(--on-dark-2); font-size: .95rem; line-height: 1.55; }

/* ---------- figure with a caption ---------- */
.figure { margin: 0; }
.figure img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.figure figcaption {
  margin-top: .95rem; font-size: .84rem; color: var(--tx-mute);
  padding-left: 1rem; border-left: 2px solid rgba(245,179,1,.5); line-height: 1.5;
}
.on-dark .figure figcaption, .feature .figure figcaption, .sec--dark .figure figcaption { color: var(--on-dark-2); }

/* ---------- a quieter, wider stat row ---------- */
.stats--rule { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.stats--rule .stat {
  background: none; border: 0; border-left: 1px solid rgba(255,255,255,.14);
  border-radius: 0; text-align: left; padding: .3rem 1.6rem 1rem;
}
.stats--rule .stat:first-child { border-left: 0; padding-left: 0; }
.stats--rule .stat__n { font-size: clamp(2.1rem, 1.5rem + 2vw, 3.1rem); letter-spacing: -0.035em; }
.stats--rule .stat__l { font-size: .82rem; color: var(--on-dark-2); max-width: 12rem; line-height: 1.45; }
@media (max-width: 620px) {
  .stats--rule .stat { border-left: 0; border-top: 1px solid rgba(255,255,255,.14); padding: 1.1rem 0 .2rem; }
  .stats--rule .stat:first-child { border-top: 0; }
}

/* ---------- area columns ---------- */
.areacols { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 760px) { .areacols { grid-template-columns: repeat(3, 1fr); } }
.areacol { border-top: 2px solid var(--gold); padding-top: 1.4rem; }
.areacol h3 { font-size: 1.3rem; margin-bottom: .55rem; }
.areacol h3 a { text-decoration: none; }
.areacol h3 a:hover { color: var(--gold-text); }
.areacol > p { color: var(--tx-soft); font-size: .95rem; margin-bottom: 1.1rem; }
.areacol__list { list-style: none; padding: 0; margin: 0 0 1.2rem; columns: 2; column-gap: 1.4rem; font-size: .92rem; }
.areacol__list li { margin-bottom: .38rem; break-inside: avoid; }
.areacol__list a { color: var(--tx-soft); text-decoration: none; }
.areacol__list a:hover { color: var(--gold-text); text-decoration: underline; }
.sec--dark .areacol > p { color: var(--on-dark-2); }
.sec--dark .areacol__list a { color: var(--on-dark-2); }
.sec--dark .areacol__list a:hover { color: var(--gold); }

/* ---------- steps ---------- */
.steps { display: grid; gap: clamp(1.8rem, 3vw, 3rem); grid-template-columns: 1fr; counter-reset: st; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { counter-increment: st; padding-top: 1.5rem; border-top: 1px solid rgba(18,22,29,.16); }
.step::before {
  content: '0' counter(st);
  font-family: var(--ff-display); font-size: .8rem; font-weight: 700; letter-spacing: .1em;
  color: var(--gold-text); display: block; margin-bottom: .8rem;
}
.step h3 { font-size: 1.28rem; margin-bottom: .5rem; }
.step p { color: var(--tx-soft); font-size: .97rem; margin: 0; }
.sec--dark .step { border-top-color: rgba(255,255,255,.18); }
.sec--dark .step p { color: var(--on-dark-2); }
.sec--dark .step::before { color: var(--gold); }

/* ---------- hero refinements ---------- */
.hero__chips { gap: .55rem; margin-top: 2.6rem; }
.hero__chips li {
  border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.055);
  font-size: .82rem; letter-spacing: .01em;
}
.hero__rule {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 3;
  background: linear-gradient(90deg, rgba(245,179,1,0), rgba(245,179,1,.7) 20%, rgba(245,179,1,.7) 80%, rgba(245,179,1,0));
}

/* ---------- prose measure ---------- */
.prose { max-width: 40rem; }
.prose h2 { margin-top: 3rem; }
.prose h3 { margin-top: 2.2rem; }

/* ---------- icon flow ----------
   The reset sets `svg { display: block }`, which pushes an icon sitting inside a line of text
   onto its own line. Icons in flowing text sit inline; icons inside flex components (buttons,
   list rows) are unaffected because those set their own layout. */
:where(p, li, a, span, h3, h4, summary, strong, figcaption) > svg {
  display: inline-block; vertical-align: -0.14em;
}
.card__more { text-decoration: none; }
.card__more:hover { text-decoration: underline; }

/* the service list numbers carry more weight */
.svclist__n { font-size: .95rem; opacity: .75; }

/* ---- Car key enquiry form (every page under /automotive/, added 2026-09-09) ----
   🔴 Every selector here is prefixed .field--choice on purpose: the fieldset carries .field, so
   the generic `.field label { display: block }` rule (0,1,1) outranks a bare `.choice` (0,1,0)
   and the radio circle collapsed to a 2px sliver. Seen in a real screenshot, not in any check.
   Rego is shown upper case as typed; the server normalises it too. The key-type choice is a
   fieldset of styled radios so a thumb can hit them, and so the selected state is visible at
   AA contrast on both the white and the dark form backgrounds. */
.input--rego { text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.field--choice { border: 0; padding: 0; margin: 0 0 1.05rem; min-width: 0; }
.field--choice legend { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .55rem; color: var(--tx); padding: 0; }
.sec--dark .field--choice legend { color: #fff; }
.field--choice .choices { display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .field--choice .choices { grid-template-columns: 1fr 1fr 1fr; } }
.field--choice .choice { position: relative; display: flex; align-items: flex-start; gap: .65rem; padding: .78rem .85rem; border: 1.5px solid rgba(18,22,29,.18); border-radius: 11px; background: #fff; cursor: pointer; font-weight: 400; font-size: .93rem; margin: 0; color: var(--tx); transition: border-color .16s var(--ease), box-shadow .16s var(--ease); }
.field--choice .choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.choice__box { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: .1rem; border-radius: 50%; border: 2px solid rgba(18,22,29,.35); background: #fff; position: relative; }
.choice__text { display: block; line-height: 1.35; }
.choice__text strong { display: block; font-weight: 600; color: var(--tx); }
.choice__text small { display: block; font-size: .78rem; color: var(--tx-mute); margin-top: .12rem; }
.field--choice .choice:hover { border-color: rgba(18,22,29,.4); }
.field--choice .choice:has(input:checked) { border-color: var(--gold-deep); box-shadow: 0 0 0 3px rgba(201,138,0,.18); }
.field--choice .choice:has(input:checked) .choice__box { border-color: var(--gold-deep); }
.field--choice .choice:has(input:checked) .choice__box::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--gold-deep); }
.field--choice .choice:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.sec--dark .field--choice .choice { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); }
.sec--dark .choice__text strong { color: #fff; }
.sec--dark .choice__text small { color: var(--on-dark-2); }
.sec--dark .choice__box { background: transparent; border-color: rgba(255,255,255,.5); }
.sec--dark .field--choice .choice:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245,179,1,.22); }
.sec--dark .field--choice .choice:has(input:checked) .choice__box { border-color: var(--gold); }
.sec--dark .field--choice .choice:has(input:checked) .choice__box::after { background: var(--gold); }

/* Four hubs on the home page row since Bream Bay was added: two up on tablet, four across on a
   wide screen, so no column is orphaned onto its own line. */
@media (min-width: 760px) { .areacols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .areacols { grid-template-columns: repeat(4, 1fr); } }