/* ==========================================================================
   ARTISAN ACOUSTICS — DESIGN SYSTEM
   --------------------------------------------------------------------------
   Hand-editable. No build step mangles this file — what you read is what ships.
   Everything is driven by the custom properties in :root, so a rebrand is a
   handful of values, not a find-and-replace.

   Brand DNA carried over from the legacy site:
     • Brand red   #D3413F   (sampled from the live site)
     • Headings    Oswald, uppercase, condensed
     • Body        Open Sans
     • Red footer band, red rule under the wordmark

   What changed (UX/accessibility, not identity):
     • Type scale is fluid and line length is capped at ~68ch
     • Every interactive element has a visible :focus-visible ring
     • Nav is a real 2-level menu with keyboard + touch support
     • Images reserve space (aspect-ratio) so nothing jumps while loading
     • Section themes give vertical rhythm instead of an undifferentiated wall
   ========================================================================== */

@import url("fonts.css?v=548bb92540");

/* --------------------------------------------------------------- tokens -- */
:root {
  /* Brand ------------------------------------------------------------------ */
  --brand:        #d3413f;  /* 4.57:1 on white — passes WCAG AA for all sizes */
  --brand-600:    #b8332f;  /* 5.9:1  — links + small text on light surfaces   */
  --brand-700:    #98282a;  /* hover / pressed                                */
  --brand-tint:   #fbf1f0;  /* subtle red wash                                */

  /* Neutrals --------------------------------------------------------------- */
  --ink:          #1a1a1a;
  --ink-2:        #4a4a4a;  /* 8.9:1 on white */
  --ink-3:        #6b6b6b;  /* 5.3:1 on white — captions only */
  --surface:      #ffffff;
  --surface-2:    #f6f4f2;  /* warm off-white band */
  --surface-3:    #edeae7;
  --dark:         #1a1a1a;
  --dark-2:       #262322;
  --line:         #e2ddd8;
  --line-strong:  #c9c2bb;

  /* Typography ------------------------------------------------------------- */
  --font-head: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --step--2: clamp(0.75rem, 0.72rem + 0.14vw, 0.8125rem);
  --step--1: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --step-0:  clamp(1rem, 0.97rem + 0.18vw, 1.0625rem);
  --step-1:  clamp(1.125rem, 1.07rem + 0.28vw, 1.25rem);
  --step-2:  clamp(1.3125rem, 1.22rem + 0.45vw, 1.5rem);
  --step-3:  clamp(1.5rem, 1.32rem + 0.9vw, 2rem);
  --step-4:  clamp(1.875rem, 1.55rem + 1.6vw, 2.75rem);
  --step-5:  clamp(2.25rem, 1.6rem + 3.1vw, 4rem);

  /* Space (4px base, doubling-ish) ---------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;
  --section-y: clamp(2.5rem, 1.4rem + 4.4vw, 5rem);

  /* Layout ----------------------------------------------------------------- */
  --wrap:       1200px;
  --wrap-wide:  1440px;
  --wrap-text:  68ch;
  --gutter:     clamp(1rem, 0.5rem + 2vw, 2.5rem);

  --radius:     2px;   /* the legacy site was square-edged; keep it crisp */
  --radius-lg:  4px;
  --shadow-1:   0 1px 2px rgb(26 26 26 / 6%), 0 2px 8px rgb(26 26 26 / 6%);
  --shadow-2:   0 2px 4px rgb(26 26 26 / 8%), 0 12px 28px rgb(26 26 26 / 10%);

  --header-h:   64px;
  --ease:       cubic-bezier(0.2, 0, 0, 1);
}

/* ------------------------------------------------------------------ reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul, ol { padding-inline-start: 1.25em; }

/* ------------------------------------------------------------- typography -- */
h1, h2, h3, h4, h5, .h-display {
  font-family: var(--font-head);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 var(--sp-4);
  color: var(--ink);
  text-wrap: balance;
}
h1, .h1 { font-size: var(--step-5); font-weight: 500; letter-spacing: 0.005em; }
h2, .h2 { font-size: var(--step-4); }
h3, .h3 { font-size: var(--step-2); }
h4, .h4 { font-size: var(--step-1); letter-spacing: 0.04em; }
h5, .h5 { font-size: var(--step-0); letter-spacing: 0.06em; }

p { margin: 0 0 var(--sp-4); max-width: var(--wrap-text); }
.prose > * + * { margin-top: var(--sp-4); }

a { color: var(--brand-600); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--brand-700); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--brand-600);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.lede { font-size: var(--step-1); color: var(--ink-2); max-width: 60ch; }
.eyebrow {
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: var(--step--1); color: var(--brand-600); margin: 0 0 var(--sp-2); font-weight: 500;
}
.muted { color: var(--ink-2); }
.small { font-size: var(--step--1); }
.caption { font-size: var(--step--1); color: var(--ink-3); margin-top: var(--sp-2); max-width: var(--wrap-text); }

/* Accent rule under page titles — carried over from the legacy wordmark */
.rule::after {
  content: ""; display: block; width: 88px; height: 4px;
  background: var(--brand); margin-top: var(--sp-4);
}
.rule.center::after { margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 200;
  background: var(--brand); color: #fff; padding: var(--sp-3) var(--sp-5);
  font-weight: 700; transition: top 0.15s var(--ease);
}
.skip-link:focus { top: var(--sp-3); color: #fff; }

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

.section { padding-block: var(--section-y); position: relative; }
.section > .wrap > * :last-child { margin-bottom: 0; }

/* Two plain (untinted, unphotographed) sections in a row read as one block of
   page, so they share a single gap instead of stacking two full paddings.
   Without this, a page migrated from 15 CMS "sections" is 40% whitespace. */
.section--plain + .section--plain { padding-top: 0; }
.section--plain + .section--plain::before {
  content: ""; display: block; height: var(--sp-6);
}

.section--muted { background: var(--surface-2); }
.section--dark  { background: var(--dark); color: #f4f1ee; }
.section--dark :is(h1,h2,h3,h4,h5) { color: #fff; }
.section--dark .muted, .section--dark p { color: #ddd7d2; }
.section--dark a:not(.btn) { color: #ffb3b0; }
.section--brand { background: var(--brand); color: #fff; }
.section--brand :is(h1,h2,h3,h4,h5) { color: #fff; }
.section--brand p, .section--brand li { color: #fff; }
.section--brand a:not(.btn) { color: #fff; text-decoration-thickness: 2px; }
.section--brand .eyebrow { color: #ffe3e2; }

/* Section with a photographic background */
.section--image { color: #fff; background-size: cover; background-position: center; }
/* 62% is not arbitrary. Over the worst possible backdrop — a pure white region
   of the photo — this scrim resolves to rgb(109,108,108), which gives white
   text 5.30:1. So the band is guaranteed to pass WCAG AA whatever the image
   underneath happens to be. Lower the alpha and that guarantee is gone.
   axe reports these as "incomplete" because it cannot see through a background
   image; the guarantee is structural rather than measured. */
.section--image::before {
  content: ""; position: absolute; inset: 0; background: rgb(20 16 15 / 62%);
}
.section--image > * { position: relative; }
.section--image :is(h1,h2,h3,h4,h5) { color: #fff; }
.section--image p, .section--image li { color: #f2eeeb; }

/* Column grids -------------------------------------------------------------- */
.cols { display: grid; gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); align-items: start; }
.cols--1 { grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols--wide-narrow { grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); }
  .cols--narrow-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.62fr); }
  .cols--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cols--center { align-items: center; }
/* A grid item defaults to min-width:auto, which means the track is sized to the
   item's MIN-CONTENT — and the min-content of a wide table is the wide table,
   even when it sits in a .table-wrap that is supposed to scroll. The result is
   a column wider than the page and the whole document scrolling sideways on a
   phone. min-width:0 lets the track shrink and hands the overflow back to
   .table-wrap, which is the thing that knows how to scroll. */
.col { min-width: 0; }
.col > :first-child { margin-top: 0; }
.col > :last-child  { margin-bottom: 0; }
.col > * + * { margin-top: var(--sp-4); }
.col > * + :is(h2, h3, h4) { margin-top: var(--sp-6); }
.col p, .col li { max-width: 68ch; }

/* Headings step down inside narrow columns — a 2.75rem H2 in a 380px column
   wraps to four lines and stops looking like a heading. */
.cols--3 :is(h2, .h2), .cols--4 :is(h2, .h2) { font-size: var(--step-2); }
.cols--3 :is(h3, .h3), .cols--4 :is(h3, .h3) { font-size: var(--step-1); }
.cols--2 :is(h2, .h2), .cols--wide-narrow :is(h2, .h2), .cols--narrow-wide :is(h2, .h2) { font-size: var(--step-3); }

/* --------------------------------------------------------------- buttons -- */
.btn {
  --btn-bg: var(--brand); --btn-fg: #fff; --btn-bd: var(--brand);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 48px; padding: 0.7em 1.6em;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 2px solid var(--btn-bd); border-radius: var(--radius);
  font-family: var(--font-head); font-weight: 500; font-size: var(--step-0);
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: background-color 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.15s var(--ease);
  text-align: center;
}
.btn:hover { --btn-bg: var(--brand-700); --btn-bd: var(--brand-700); color: #fff; transform: translateY(-1px); }
.btn:active { transform: none; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--brand-600); --btn-bd: var(--brand-600); }
.btn--ghost:hover { --btn-bg: var(--brand-600); --btn-fg: #fff; color: #fff; }
.btn--dark { --btn-bg: var(--ink); --btn-bd: var(--ink); }
.btn--dark:hover { --btn-bg: #000; --btn-bd: #000; }
.btn--wa { --btn-bg: #107a3f; --btn-bd: #107a3f; }   /* 5.4:1 with white text — WCAG AA */
.btn--wa:hover { --btn-bg: #0b5c2f; --btn-bd: #0b5c2f; }
.btn--on-dark { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }
.btn--on-dark:hover { --btn-bg: #f0ece9; --btn-bd: #f0ece9; color: var(--ink); }
.btn--sm { min-height: 40px; padding: 0.45em 1.1em; font-size: var(--step--1); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.section--brand .btn { --btn-bg: #fff; --btn-fg: var(--brand-700); --btn-bd: #fff; }
.section--brand .btn:hover { --btn-bg: #1a1a1a; --btn-fg: #fff; --btn-bd: #1a1a1a; color: #fff; }

/* ---------------------------------------------------------------- header -- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgb(255 255 255 / 92%);
  border-bottom: 1px solid var(--line);
}
/* Only the BLUR moves to a pseudo-element; the background colour stays on the
   header itself. Two separate reasons, and both matter:

   1. backdrop-filter (like filter and transform) makes an element the
      containing block for its position:fixed descendants. The mobile nav
      drawer is one, so with the filter on .site-header its
      `inset: var(--header-h) 0 0 auto` resolved against a 64px header rather
      than the viewport — the whole menu scrolled inside an 80px slit on every
      phone. Moving the filter down one level gives the drawer the viewport.

   2. The background has to stay on the header element. Move it to the pseudo
      and axe can no longer resolve what sits behind the header text, so every
      page returns "colour contrast needs a human check" for the wordmark and
      every nav item — 468 review items across the site, drowning the real
      ones. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  backdrop-filter: saturate(180%) blur(10px);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: baseline; gap: 0.5ch; text-decoration: none; color: var(--ink); flex: 0 0 auto; }
.brand__mark {
  font-family: var(--font-head); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 1.0625rem; line-height: 1;
}
.brand__mark em { font-style: normal; color: var(--brand); }
/* Three brand names plus a territory is a long strapline, and it sits on the
   same row as a nav bar that must not wrap. 900px was enough for one brand
   name; three needs 1440. At 1200 and 1366 it pushed the Enquire button off
   the right edge and put every page into horizontal scroll — 152px of it at
   1200, 37px at 1366, which is one of the commonest laptop widths. */
.brand__sub { font-size: 0.6875rem; color: var(--ink-3); letter-spacing: 0.04em; display: none; white-space: nowrap; }
@media (min-width: 1440px) { .brand__sub { display: inline; } }

.nav-toggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.5em;
  background: none; border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 0.5em 0.8em; font-family: var(--font-head); text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.8125rem; cursor: pointer; min-height: 40px;
}
.nav-toggle__bars { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); }
.nav-toggle__bars::before { top: -6px; } .nav-toggle__bars::after { top: 6px; }
@media (min-width: 1000px) { .nav-toggle { display: none; } }

.nav { margin-left: auto; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-1); align-items: center; }
.nav__link {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.55em 0.75em; min-height: 40px;
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.07em;
  font-size: 0.875rem; color: var(--ink); text-decoration: none; border-radius: var(--radius);
  background: none; border: 0; cursor: pointer;
  /* A two-word entry ("Hypex Amps") was wrapping to two lines and knocking the
     whole bar out of alignment as soon as the strapline grew. Nav labels are
     short by definition; none of them should ever wrap. */
  white-space: nowrap;
}
.nav__link:hover { color: var(--brand-600); background: var(--brand-tint); }
.nav__link[aria-current="page"], .nav__item--active > .nav__link { color: var(--brand-600); box-shadow: inset 0 -3px 0 var(--brand); }
.nav__chev { width: 10px; height: 10px; fill: currentColor; transition: transform 0.15s var(--ease); }
.nav__link[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }

.nav__sub {
  list-style: none; margin: 0; padding: var(--sp-2);
  position: absolute; min-width: 260px; background: #fff;
  border: 1px solid var(--line); box-shadow: var(--shadow-2); border-radius: var(--radius);
  display: none; z-index: 110;
}
.nav__item { position: relative; }
.nav__item--open > .nav__sub { display: block; }
.nav__sub a {
  display: block; padding: 0.6em 0.8em; color: var(--ink); text-decoration: none;
  font-size: var(--step--1); border-radius: var(--radius);
}
.nav__sub a:hover { background: var(--brand-tint); color: var(--brand-700); }
.nav__sub a[aria-current="page"] { color: var(--brand-600); font-weight: 600; }

.header__actions { display: none; gap: var(--sp-2); align-items: center; margin-left: var(--sp-3); }
@media (min-width: 1000px) { .header__actions { display: flex; } }

.search-toggle {
  background: none; border: 1px solid var(--line-strong); border-radius: var(--radius);
  width: 40px; height: 40px; display: inline-grid; place-items: center; cursor: pointer;
}
.search-toggle:hover { border-color: var(--brand); color: var(--brand-600); }
.search-toggle svg { width: 18px; height: 18px; fill: currentColor; }

/* Mobile drawer ------------------------------------------------------------ */
@media (max-width: 999.98px) {
  .nav {
    position: fixed; inset: var(--header-h) 0 0 auto; width: min(88vw, 380px);
    background: #fff; border-left: 1px solid var(--line);
    padding: var(--sp-4) var(--sp-4) var(--sp-8);
    overflow-y: auto; visibility: hidden; pointer-events: none;
    clip-path: inset(0 0 0 100%);
    transition: clip-path 0.22s var(--ease), visibility 0.22s;
    box-shadow: var(--shadow-2);
  }
  .nav[data-open="true"] { visibility: visible; pointer-events: auto; clip-path: inset(0 0 0 0); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { justify-content: space-between; font-size: 1rem; padding: 0.85em 0.4em; border-bottom: 1px solid var(--line); min-height: 48px; }
  .nav__sub { position: static; display: none; border: 0; box-shadow: none; padding: var(--sp-2) 0 var(--sp-3) var(--sp-4); }
  .nav__item--open > .nav__sub { display: block; }
  .nav__sub a { padding: 0.7em 0.4em; min-height: 44px; display: flex; align-items: center; }
  .nav-backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / 40%); z-index: 90; }
}

/* ------------------------------------------------------------ breadcrumbs -- */
.breadcrumbs { padding-block: var(--sp-4) 0; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4em; margin: 0; padding: 0; font-size: var(--step--1); color: var(--ink-3); }
.breadcrumbs li::after { content: "/"; margin-left: 0.5em; color: var(--line-strong); }
.breadcrumbs li:last-child::after { content: ""; }
.breadcrumbs a { color: var(--ink-2); text-decoration: none; }
.breadcrumbs a:hover { color: var(--brand-600); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--ink); }

/* ------------------------------------------------------------- page head -- */
.page-head { padding-block: clamp(2rem, 1.2rem + 3vw, 3.5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.page-head h1 { margin-bottom: var(--sp-3); }
.page-head .lede { margin-bottom: 0; }
.page-head--center { text-align: center; }
.page-head--center .lede { margin-inline: auto; }
.page-head--center p { margin-inline: auto; }

/* ------------------------------------------------------------------ media -- */
.media { margin: 0; }
.media img { width: 100%; border-radius: var(--radius); background: var(--surface-2); }
.media--frame img { border: 1px solid var(--line); }
figure.media figcaption { font-size: var(--step--1); color: var(--ink-3); margin-top: var(--sp-2); }

.gallery { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ------------------------------------------------------------------ cards -- */
.card-grid { display: grid; gap: clamp(1.25rem, 0.8rem + 2vw, 2rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: box-shadow 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.card:hover { box-shadow: var(--shadow-2); border-color: var(--line-strong); transform: translateY(-2px); }
.card:focus-within { box-shadow: var(--shadow-2); }
.card__media { background: var(--surface-2); }
.card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: var(--sp-4); }
.card--photo .card__media img { object-fit: cover; padding: 0; }
.card__body { padding: var(--sp-4) var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.card__title { font-size: var(--step-2); margin: 0; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }
.card__title a:hover { color: var(--brand-600); }
.card__text { margin: 0; font-size: var(--step--1); color: var(--ink-2); }
.card__meta { margin-top: auto; padding-top: var(--sp-3); font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--step--2); color: var(--brand-600); }

/* Feature block (icon-free 3-up) ------------------------------------------- */
.feature { display: flex; flex-direction: column; gap: var(--sp-3); }
.feature img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.feature h3 { margin: 0; font-size: var(--step-1); }
.feature p { margin: 0; font-size: var(--step--1); color: var(--ink-2); max-width: none; }

/* ------------------------------------------------------------------ table -- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: var(--sp-5); }
table { border-collapse: collapse; width: 100%; font-size: var(--step--1); }
caption { text-align: left; font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.08em; padding-bottom: var(--sp-3); color: var(--ink-2); }
th, td { text-align: left; padding: 0.7em 0.9em; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; background: var(--surface-2); border-bottom: 2px solid var(--line-strong); }
tbody tr:nth-child(even) { background: #fbfaf9; }
.section--dark table, .section--brand table { color: inherit; }
/* A scrollable box is keyboard-operable, so it takes focus — and anything that
   takes focus has to show it. */
.table-wrap:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
/* thead sticks so the column you are reading still has a name 200 rows down. */
.table-wrap thead th { position: sticky; top: 0; z-index: 1; }
/* Filter bar — built by site.js, never present in the HTML (see long tables). */
.table-filter { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.table-filter label { font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--step--1); color: var(--ink-2); }
.table-filter input { flex: 1 1 16rem; max-width: 26rem; min-height: 44px; padding: 0.5em 0.8em; font: inherit; font-size: var(--step--1); border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; }
.table-filter input:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.table-filter__count { margin: 0; font-size: var(--step--1); color: var(--ink-2); }

/* Spec list — key/value pairs, readable on a phone */
.specs { display: grid; gap: 0; margin: 0 0 var(--sp-5); border-top: 1px solid var(--line); }
.specs > div { display: grid; grid-template-columns: 1fr; gap: 0.15rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 560px) { .specs > div { grid-template-columns: minmax(140px, 34%) 1fr; gap: var(--sp-4); } }
.specs dt { font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--step--1); color: var(--ink-2); margin: 0; }
.specs dd { margin: 0; }

/* Inverted surfaces -----------------------------------------------------------
   Anything that hard-codes a muted grey for "secondary" text has to be restated
   on a dark, brand or photographic band, or it drops below AA. */
:is(.section--dark, .section--brand, .section--image) {
  --line: rgb(255 255 255 / 24%);
  --line-strong: rgb(255 255 255 / 42%);
  --ink-2: rgb(255 255 255 / 86%);
  --ink-3: rgb(255 255 255 / 78%);
}
:is(.section--dark, .section--brand, .section--image) :is(.specs dt, .caption, .muted, .card__text, figcaption, caption) {
  color: rgb(255 255 255 / 86%);
}
:is(.section--dark, .section--brand, .section--image) .specs dd { color: #fff; }
:is(.section--dark, .section--brand, .section--image) :is(th, td) { border-bottom-color: rgb(255 255 255 / 24%); }
:is(.section--dark, .section--brand, .section--image) thead th {
  background: rgb(255 255 255 / 10%); color: #fff; border-bottom-color: rgb(255 255 255 / 45%);
}
:is(.section--dark, .section--brand, .section--image) tbody tr:nth-child(even) { background: rgb(255 255 255 / 5%); }
:is(.section--dark, .section--brand, .section--image) .callout {
  background: rgb(255 255 255 / 10%); border-left-color: #fff;
}
:is(.section--dark, .section--brand, .section--image) :is(a, .btn):focus-visible { outline-color: #fff; }
.section--brand .specs dt { color: #ffe3e2; }

/* ------------------------------------------------------------------- CTA --- */
.cta-panel { background: var(--brand); color: #fff; padding: clamp(1.75rem, 1.2rem + 2.5vw, 3rem); border-radius: var(--radius-lg); }
.cta-panel :is(h2, h3) { color: #fff; margin-top: 0; }
.cta-panel p { color: #fff; }
.cta-panel .btn { --btn-bg: #fff; --btn-fg: var(--brand-700); --btn-bd: #fff; }
.cta-panel .btn:hover { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); color: #fff; }
.cta-panel .btn--wa { --btn-bg: #0d6e3a; --btn-fg: #fff; --btn-bd: #0d6e3a; }
/* The panel supplies its own red. Inside an already-red band that reads as a
   rectangle of the same colour with invisible edges, so drop the fill and let
   the section be the surface. */
.section--brand .cta-panel { background: none; padding: 0; }
.section--dark .cta-panel { background: var(--brand); }

/* ---------------------------------------------------------------- callout -- */
.callout { border-left: 4px solid var(--brand); background: var(--brand-tint); padding: var(--sp-4) var(--sp-5); border-radius: var(--radius); }
.callout > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ embed -- */
.embed { position: relative; aspect-ratio: 16 / 9; background: var(--ink); border-radius: var(--radius); overflow: hidden; margin-bottom: var(--sp-5); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ------------------------------------------------------------------ forms -- */
.form { display: grid; gap: var(--sp-4); max-width: 46rem; }
.field { display: grid; gap: var(--sp-2); }
.field label { font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--step--1); }
.field .req { color: var(--brand-600); }
.field input, .field textarea, .field select {
  width: 100%; padding: 0.75em 0.9em; border: 1px solid var(--line-strong);
  border-radius: var(--radius); background: #fff; min-height: 48px;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { border-color: var(--brand-600); }
.field .hint { font-size: var(--step--1); color: var(--ink-3); }
.field .error { font-size: var(--step--1); color: var(--brand-700); font-weight: 600; }
.field[data-invalid="true"] input, .field[data-invalid="true"] textarea { border-color: var(--brand-700); border-width: 2px; }
.form__note { font-size: var(--step--1); color: var(--ink-3); max-width: 46rem; }
.form-status { padding: var(--sp-4); border-radius: var(--radius); border-left: 4px solid var(--brand); background: var(--brand-tint); }
.form-status[data-state="ok"] { border-color: #107a3f; background: #eefaf2; }

/* ----------------------------------------------------------------- search -- */
.search-dialog { border: 0; padding: 0; background: transparent; max-width: min(680px, 92vw); width: 100%; margin-top: 8vh; }
.search-dialog::backdrop { background: rgb(20 16 15 / 55%); }
.search-panel { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-2); overflow: hidden; }
.search-panel__head { display: flex; gap: var(--sp-2); padding: var(--sp-4); border-bottom: 1px solid var(--line); }
.search-panel input[type="search"] { flex: 1; min-height: 48px; padding: 0.6em 0.8em; border: 1px solid var(--line-strong); border-radius: var(--radius); }
.search-results { list-style: none; margin: 0; padding: var(--sp-2); max-height: min(52vh, 460px); overflow-y: auto; }
.search-results li a { display: block; padding: var(--sp-3); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.search-results li a:hover, .search-results li a:focus-visible { background: var(--brand-tint); }
.search-results .r-title { font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--step-0); }
.search-results .r-kind { font-size: var(--step--2); color: var(--brand-600); text-transform: uppercase; letter-spacing: 0.1em; }
.search-results .r-snip { font-size: var(--step--1); color: var(--ink-2); margin: 0.2em 0 0; }
.search-results mark { background: #ffe9a8; color: inherit; padding: 0 0.1em; }
.search-empty { padding: var(--sp-5); color: var(--ink-2); }

/* ---------------------------------------------------------------- footer -- */
.site-footer { background: var(--brand); color: #fff; margin-top: var(--section-y); }
.site-footer a:not(.btn) { color: #fff; }   /* :not(.btn) — otherwise button labels turn white-on-white */
.site-footer__grid { display: grid; gap: var(--sp-6); padding-block: var(--sp-7); grid-template-columns: 1fr; }
/* Four children now: the fixed "Find us" block plus three link columns. Two-up
   in the middle band rather than three-plus-an-orphan, four-up once there is
   room. auto-fit is not an option here — a flexible 1.4fr track in the same
   list makes the whole declaration invalid. */
@media (min-width: 720px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer h2 { font-size: var(--step-1); color: #fff; letter-spacing: 0.1em; margin-bottom: var(--sp-4); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.site-footer p { color: #fff; margin-bottom: var(--sp-3); }
.site-footer__legal { border-top: 1px solid rgb(255 255 255 / 28%); padding-block: var(--sp-4); font-size: var(--step--1); display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; }
/* .site-footer ul is display:grid and equally specific, so this needs the
   extra class to win — otherwise the icons stack vertically. */
.site-footer .social { display: flex; gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.site-footer .social a { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgb(255 255 255 / 45%); border-radius: var(--radius); }
.site-footer .social a:hover { background: #fff; color: var(--brand-700); }
.site-footer .social svg { width: 20px; height: 20px; fill: currentColor; }

/* ---------------------------------------------------------- sticky enquiry - */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line); border-top: 1px solid var(--line);
}
.action-bar a { display: flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 54px; background: #fff; color: var(--ink); text-decoration: none; font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.875rem; }
.action-bar a.is-primary { background: var(--brand); color: #fff; }
.action-bar a.is-wa { background: #107a3f; color: #fff; }
@media (min-width: 1000px) { .action-bar { display: none; } }
body:has(.action-bar) { padding-bottom: 56px; }
@media (min-width: 1000px) { body:has(.action-bar) { padding-bottom: 0; } }

/* ------------------------------------------------------------------- misc -- */
.tag-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; margin: 0 0 var(--sp-4); }
.tag { font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--step--2); padding: 0.3em 0.7em; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-2); }
.tag--brand { border-color: var(--brand); color: var(--brand-700); background: var(--brand-tint); }

.pill-nav { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; margin: 0 0 var(--sp-6); }
.pill-nav a { display: inline-block; padding: 0.45em 1em; border: 1px solid var(--line-strong); border-radius: 999px; text-decoration: none; color: var(--ink-2); font-size: var(--step--1); }
.pill-nav a:hover, .pill-nav a[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: #fff; }

.next-prev { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; margin-top: var(--sp-7); }
@media (min-width: 720px) { .next-prev { grid-template-columns: 1fr 1fr; } }
.next-prev a { display: block; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.next-prev a:hover { border-color: var(--brand); }
.next-prev span { display: block; font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.1em; color: var(--brand-600); margin-bottom: 0.2em; }

.center { text-align: center; }
.stack-lg > * + * { margin-top: var(--sp-6); }

/* Print --------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .action-bar, .nav, .search-toggle, .btn { display: none !important; }
  body { color: #000; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}