/* ==========================================================================
   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");

/* --------------------------------------------------------------- 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; }
.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%);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.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); }
.brand__sub { font-size: 0.6875rem; color: var(--ink-3); letter-spacing: 0.04em; display: none; }
@media (min-width: 900px) { .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;
}
.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; }

/* 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; }
@media (min-width: 720px) { .site-footer__grid { grid-template-columns: 1.4fr 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; }
}