/*
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Barlow-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/Barlow-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/Barlow-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/Barlow-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================================================
   ACDC Controls — v2
   Thesis: a well-run parts counter. Warm, plain-spoken, fast to
   scan, phone number always in reach. Brand orange does the
   wayfinding. No monospace, no jargon-as-decoration.
   ============================================================ */

:root {
  --orange:      #EF5E28;   /* true brand orange — graphics only (dots, rules, borders) */
  --orange-ink:  #BF430D;   /* text-safe orange — 5.2:1 on white. Text + button fills. */
  --orange-dk:   #9E3608;   /* button hover */
  --orange-soft: #FDEEE6;
  --amber:       #F79436;
  --charcoal:    #333335;
  --ink:         #26262A;
  --body:        #5C5854;
  --paper:       #FAF7F2;
  --paper-2:     #F3EEE6;
  --white:       #FFFFFF;
  --line:        #E6E0D6;
  --line-dk:     #45454A;

  --gut: clamp(20px, 5vw, 72px);
  --max: 1220px;
  --r: 6px;
}

*, *::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;
  background: var(--paper);
  color: var(--body);
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 { color: var(--charcoal); margin: 0; line-height: 1.08; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2.35rem, 5.6vw, 4.3rem); letter-spacing: -.022em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); letter-spacing: -.018em; }
h3, .h-aside { font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: -.008em; font-weight: 600; }

p { margin: 0 0 1.1em; max-width: 64ch; }
p:last-child { margin-bottom: 0; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.lede { font-size: clamp(1.12rem, 1.9vw, 1.42rem); line-height: 1.5; color: var(--body); max-width: 50ch; }
.muted { color: var(--body); }

/* label replaces the old monospace metadata voice */
.label {
  font-size: 12.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--orange-ink); margin: 0 0 14px;
}
.label--quiet { color: var(--body); }

/* ---------------- header ---------------- */

.head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.head__in { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); min-height: 0; padding-block: 8px; }
.head__logo { flex: 0 0 auto; }
.head__logo img { height: clamp(50px, 4.6vw, 66px); width: auto; }
.nav { display: flex; gap: clamp(12px, 1.9vw, 28px); margin-inline: auto; }
.nav a {
  text-decoration: none; color: var(--charcoal); font-weight: 500; font-size: 16px;
  padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav a:hover, .nav a:focus-visible { color: var(--orange-ink); }
.nav a[aria-current="page"] { color: var(--orange-ink); border-bottom-color: var(--orange); }
.head__call { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

/* ---- disclosure menu button (mobile / tablet only) ---- */

.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: 0 0 auto;
  background: transparent; border: 1px solid var(--line); border-radius: var(--r);
  cursor: pointer; padding: 0;
}
.nav-toggle:hover { border-color: var(--orange); }
.nav-toggle__bars { position: relative; display: block; width: 20px; height: 14px; }
.nav-toggle__bars i {
  position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px;
  background: var(--charcoal);
  transition: transform .22s ease, opacity .18s ease, top .22s ease;
}
.nav-toggle__bars i:nth-child(1) { top: 0; }
.nav-toggle__bars i:nth-child(2) { top: 6px; }
.nav-toggle__bars i:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { top: 6px; transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .nav-toggle__bars i { transition: none; } }

@media (max-width: 980px) {
  .head__in { min-height: 0; padding-block: 10px; gap: 12px; }
  .head__logo img { height: 44px; }
  .head__call { margin-left: auto; gap: 12px; }
  .nav-toggle { display: inline-flex; }

  /* No JS: the nav stays a visible wrapped row, so it is always reachable. */
  .nav { order: 3; width: 100%; margin-inline: 0; overflow-x: auto; }

  /* JS present: it collapses into a panel under the bar. */
  .js-nav .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; gap: 0;
    width: auto; order: 0; overflow: visible;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 28px rgba(0,0,0,.09);
    padding: 6px var(--gut) 14px;
  }
  .js-nav .nav[data-open="true"] { display: flex; }
  .js-nav .nav a {
    display: flex; align-items: center; min-height: 50px;
    font-size: 18px; border-bottom: 1px solid var(--line); border-radius: 0;
    padding: 4px 0;
  }
  .js-nav .nav a:last-child { border-bottom: 0; }
  .js-nav .nav a[aria-current="page"] { border-bottom-color: var(--line); }
}
@media (max-width: 660px) {
  .head__call .status { display: none; }
}

/* ---------------- the open-now line (signature) ---------------- */

.status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--body); white-space: nowrap; }
.status__dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--orange); flex: 0 0 auto;
  box-shadow: 0 0 0 4px var(--orange-soft);
}
.status--shut .status__dot { background: #9A958E; box-shadow: 0 0 0 4px #EDE8E0; }
.status a { color: var(--orange-ink); font-weight: 600; text-decoration: none; }
.status a:hover { text-decoration: underline; }

.phone {
  font-size: clamp(1rem, 1.25vw, 1.12rem); font-weight: 700; color: var(--charcoal);
  text-decoration: none; letter-spacing: -.01em; white-space: nowrap;
}
.phone:hover { color: var(--orange-ink); }

/* ---------------- buttons ---------------- */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 600; letter-spacing: .005em;
  padding: 14px 26px; border-radius: var(--r); border: 2px solid var(--orange-ink);
  background: var(--orange-ink); color: #fff; text-decoration: none; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover, .btn:focus-visible { background: var(--orange-dk); border-color: var(--orange-dk); }
.btn--ghost { background: transparent; color: var(--charcoal); border-color: var(--line); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: transparent; border-color: var(--orange-ink); color: var(--orange-ink); }
.btn--onDark { background: var(--orange-ink); border-color: var(--orange-ink); color: #fff; }

/* ---------------- sections ---------------- */

.sec { padding-block: clamp(40px, 5.2vw, 74px); }
.sec--tint { background: var(--paper-2); }
.sec--white { background: var(--white); }
.sec--dark { background: var(--charcoal); color: #CFCBC6; }
.sec--dark h2, .sec--dark h3 { color: #fff; }
.sec--dark .label { color: var(--amber); }
.sec--tight { padding-block: clamp(28px, 3.4vw, 46px); }

.grid2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(24px, 3.4vw, 54px); align-items: start; }
.grid2--stretch { align-items: stretch; }
.grid2--lead { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); }
@media (max-width: 880px) { .grid2, .grid2--lead { grid-template-columns: 1fr; gap: 28px; } }

.stack > * + * { margin-top: 1.5rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* trace-and-node divider, lifted from the logo */
.trace { display: flex; align-items: center; gap: 0; margin-block: clamp(30px, 5vw, 54px); }
.trace::before { content: ""; height: 2px; background: var(--orange); width: clamp(40px, 8vw, 96px); flex: 0 0 auto; }
.trace::after {
  content: ""; width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--orange); margin-left: -1px; flex: 0 0 auto;
}

/* ---------------- hero ---------------- */

.hero { padding-top: clamp(38px, 4.6vw, 64px); padding-bottom: clamp(38px, 4.6vw, 64px); }
.hero h1 { margin-bottom: 22px; }
.hero h1 em { font-style: normal; color: var(--orange-ink); }
.hero__actions { margin-top: 30px; }
.hero__aside {
  --aside-pad: clamp(24px, 3vw, 34px);
  background: var(--charcoal); color: #C9C5C0; border-radius: var(--r);
  padding: var(--aside-pad); align-self: start;
}
.hero__aside h3, .hero__aside .h-aside { color: #fff; margin-bottom: 10px; }
.hero__aside .phone { color: #fff; font-size: 1.5rem; }
.hero__aside .phone:hover { color: var(--amber); }
.hero__aside .btn--ghost { border-color: #55555C; color: #fff; }
.hero__aside .btn--ghost:hover { border-color: var(--amber); color: var(--amber); }

/* grouped block so short columns have edges instead of trailing off */
.panel {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(22px, 2.8vw, 32px); align-self: start;
}
.panel--tint { background: var(--paper-2); }
.panel h3 { margin-bottom: 10px; }

/* ---------------- image hero ---------------- */

.hero--img {
  position: relative;
  background: var(--charcoal);
  color: #E8E5E1;
  padding-block: clamp(56px, 8vw, 116px);
  overflow: hidden;
}
.hero--img::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--hero-img);
  background-size: cover; background-position: center;
}
/* Overlay is deliberately heavy — white body copy over a photograph has to clear
   4.5:1 everywhere, including the lightest part of the image. */
.hero--img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(24,24,26,.93) 0%, rgba(24,24,26,.86) 46%, rgba(24,24,26,.72) 100%);
}
.hero--img > * { position: relative; z-index: 1; }
.hero--img h1 { color: #fff; }
.hero--img .lede { color: #E8E5E1; }
.hero--img .label { color: var(--amber); }
.hero--img .btn--ghost { border-color: rgba(255,255,255,.42); color: #fff; }
.hero--img .btn--ghost:hover, .hero--img .btn--ghost:focus-visible { border-color: var(--amber); color: var(--amber); background: transparent; }
.hero--img .phone { color: #fff; }
.hero--img .phone:hover { color: var(--amber); }

/* rotating word from the original site — Safely / Reliably / Globally */
.rot { color: var(--amber); display: inline-block; }
.rot__w { display: inline-block; }
.js-rot .rot__w { transition: opacity .34s ease, transform .34s ease; }
.js-rot .rot__w.is-out { opacity: 0; transform: translateY(-.22em); }
@media (prefers-reduced-motion: reduce) { .js-rot .rot__w { transition: none; } }

/* the quick-contact panel, restyled for a dark photographic hero */
.hero--img .hero__aside {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(3px);
}
.hero--img .hero__aside h3 { color: #fff; }
.hero--img .hero__aside p { color: #E0DCD8; }

/* Contact hero. The aside has no heading of its own, so it is lined up with the
   lede — the paragraph under the h1 — rather than starting level with the
   headline. The h1 occupies its own grid row, so the second row's two items share
   a top edge; the aside is then pulled up by exactly its own padding, which puts
   its first line of TEXT (not its border) on the lede's first line. Using the
   aside's own --aside-pad keeps the two in sync if the padding is ever retuned. */
.hero__split {
  display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
  column-gap: clamp(24px, 3.4vw, 54px); row-gap: 0; align-items: start;
}
.hero__split > h1 { grid-column: 1; grid-row: 1; }
.hero__split > .hero__lead { grid-column: 1; grid-row: 2; }
.hero__split > .hero__aside { grid-column: 2; grid-row: 2; margin-top: calc(-1 * var(--aside-pad)); }

@media (max-width: 880px) {
  .hero__split { grid-template-columns: 1fr; }
  .hero__split > h1,
  .hero__split > .hero__lead,
  .hero__split > .hero__aside { grid-column: 1; grid-row: auto; }
  /* stacked: the h1's own margin spaces it from the lede, so only the aside
     needs a gap, and the pull-up would just crop it */
  .hero__split > .hero__aside { margin-top: 28px; }
}


/* photo band used further down about / contact */
.band-img {
  position: relative; background: var(--charcoal); color: #E8E5E1;
  padding-block: clamp(48px, 6vw, 88px); overflow: hidden;
}
.band-img::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--hero-img); background-size: cover; background-position: center;
}
.band-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(24,24,26,.93) 0%, rgba(24,24,26,.80) 100%);
}
.band-img > * { position: relative; z-index: 1; }
.band-img h2, .band-img h3 { color: #fff; }
.band-img .label { color: var(--amber); }
.band-img .chips li { background: transparent; border-color: rgba(255,255,255,.28); color: #E8E5E1; }

/* ---------------- rating ---------------- */

.rating { display: inline-flex; align-items: center; gap: 11px; }
.rating__stars { display: inline-flex; gap: 2px; }
.rating__stars svg { width: 17px; height: 17px; fill: var(--amber); display: block; }
.rating__n { font-weight: 700; font-size: 17px; color: var(--charcoal); }
.rating__c { font-size: 15px; color: var(--body); }
.hero--img .rating__n { color: #fff; }
.hero--img .rating__c { color: #D8D4D0; }

/* ---------------- trust strip ---------------- */

.trust { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(18px, 3vw, 40px); }
.trust--6 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.trust__item { display: block; }
.trust__n { display: block; font-size: clamp(1.7rem, 2.7vw, 2.2rem); font-weight: 700; color: var(--charcoal); letter-spacing: -.02em; line-height: 1; }
.trust__l { display: block; margin-top: 8px; font-size: 15px; color: var(--body); line-height: 1.35; max-width: 22ch; }
@media (max-width: 860px) { .trust, .trust--6 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 460px) { .trust, .trust--6 { grid-template-columns: 1fr; gap: 16px; } }

/* ---------------- product rows ---------------- */

.fam { border-top: 2px solid var(--charcoal); }
.sec--dark .fam { border-top-color: var(--amber); }
.prow {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.25fr) auto;
  gap: clamp(12px, 2.4vw, 32px); align-items: center;
  padding: 17px 14px 17px 0; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: background .15s ease, padding-left .15s ease;
}
.sec--dark .prow { border-bottom-color: var(--line-dk); }
.prow:hover, .prow:focus-visible { background: var(--white); padding-left: 14px; }
.sec--dark .prow:hover, .sec--dark .prow:focus-visible { background: #3D3D41; }
.prow__t { font-size: clamp(1.08rem, 1.75vw, 1.32rem); font-weight: 600; color: var(--charcoal); line-height: 1.25; }
.sec--dark .prow__t { color: #fff; }
.prow__d { font-size: 16px; line-height: 1.45; color: var(--body); }
.sec--dark .prow__d { color: #B4AFA9; }
.prow__go { color: var(--orange); font-weight: 700; font-size: 20px; }
@media (max-width: 760px) {
  .prow { grid-template-columns: 1fr auto; gap: 6px 14px; padding-block: 20px; }
  .prow__d { grid-column: 1 / -1; }
}

/* ---------------- cards ---------------- */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.cards--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1040px) { .cards--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .cards--4 { grid-template-columns: 1fr; } }
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(20px, 2.3vw, 28px);
  display: flex; flex-direction: column;
}
.card h3 { margin-bottom: 9px; }
.card p { font-size: 16.5px; }
.card--accent { border-left: 4px solid var(--orange); }

/* ---------------- certification list ---------------- */

.certs { list-style: none; margin: 0; padding: 0; }
.certs li {
  display: grid; grid-template-columns: 128px minmax(0,1fr); gap: 20px;
  padding: 16px 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.sec--dark .certs li { border-bottom-color: var(--line-dk); }
.certs b { font-weight: 700; color: var(--orange-ink); font-size: 17px; letter-spacing: .01em; }
.certs span { font-size: 16.5px; line-height: 1.45; }
@media (max-width: 620px) { .certs li { grid-template-columns: 1fr; gap: 4px; } }

/* ---------------- chips ---------------- */

.chips { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; margin: 0; padding: 0; }
.chips li {
  font-size: 15px; font-weight: 500; color: var(--charcoal);
  padding: 8px 15px; border: 1px solid var(--line); border-radius: 100px; background: var(--white);
}
.sec--dark .chips li { background: transparent; border-color: var(--line-dk); color: #CFCBC6; }

/* ---------------- spec table ---------------- */

.spec { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.spec__hd { background: var(--charcoal); color: #fff; padding: 13px 20px; font-weight: 600; font-size: 15px; letter-spacing: .05em; text-transform: uppercase; }
.spec dl { margin: 0; padding: 6px 20px 18px; }
.spec dt { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--body); margin-top: 15px; }
.spec dd { margin: 3px 0 0; font-size: 17px; font-weight: 500; color: var(--charcoal); line-height: 1.4; font-variant-numeric: tabular-nums; }

/* ---------------- catalogue link ---------------- */

.cat__lbl { margin: 18px 0 8px; }
/* The hero gradient is heaviest on the left, where the headline sits, and
   lightest on the right, where this label sits. Amber only clears 4.5:1 on the
   dark end, so the label in an image hero drops back to white (8.2:1 at the
   lightest pixel behind it). */
.hero--img .cat__lbl { color: #fff; }

.cat {
  display: flex; align-items: center; gap: 16px;
  margin-top: 0; padding: 16px 20px;
  background: var(--white); border: 1px solid var(--line);
  border-left: 4px solid var(--orange); border-radius: var(--r);
  text-decoration: none; color: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.cat:hover, .cat:focus-visible { border-color: var(--orange); background: var(--orange-soft); }
.cat__ico {
  flex: 0 0 auto; width: 34px; height: 42px; border-radius: 2px;
  background: var(--orange-soft); border: 1px solid #F0C4AE;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--orange-ink);
}
.cat__t { display: block; font-weight: 600; color: var(--charcoal); font-size: 17px; line-height: 1.3; }
.cat__m { display: block; font-size: 14.5px; color: var(--body); margin-top: 3px; }
.cat__go { margin-left: auto; color: var(--orange-ink); font-weight: 700; font-size: 18px; flex: 0 0 auto; }

/* ---------------- contact / form ---------------- */

.form { display: grid; gap: 17px; max-width: 560px; }
.field label { display: block; font-size: 15px; font-weight: 600; color: var(--charcoal); margin-bottom: 6px; }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 17px; color: var(--ink);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px;
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--orange); outline-offset: -1px; border-color: var(--orange); }
.field textarea { min-height: 136px; resize: vertical; }

.callout {
  background: var(--orange-soft); border: 1px solid #F6D2C0; border-left: 4px solid var(--orange);
  border-radius: var(--r); padding: clamp(20px, 2.6vw, 28px);
}
.callout h3, .callout .h-aside { margin-bottom: 8px; }

/* ---------------- light-surface guard ----------------
   .hero--img / .band-img set a near-white text colour on the whole section.
   Any light-background component dropped inside one would inherit it and
   render invisible (this is what happened to the contact hero callout).
   These components now state their own colours instead of inheriting, so a
   light box is legible wherever it is placed. Declared after the dark-context
   overrides so they win on equal specificity. */
.callout, .panel, .card {
  color: var(--body);
}
.callout h2, .callout h3, .callout h4, .callout .h-aside,
.panel h2, .panel h3, .panel h4, .panel .h-aside,
.card h2, .card h3, .card h4, .card .h-aside {
  color: var(--charcoal);
}
.hero--img .callout .phone, .hero--img .panel .phone, .hero--img .card .phone,
.band-img .callout .phone, .band-img .panel .phone, .band-img .card .phone,
.callout .phone, .panel .phone, .card .phone {
  color: var(--orange-ink);
}
.hero--img .callout .label, .band-img .callout .label,
.hero--img .panel .label, .band-img .panel .label,
.hero--img .card .label, .band-img .card .label {
  color: var(--orange-ink);
}

/* honeypot — off-screen, never shown, not announced */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formnote { font-size: 15px; margin: 0; min-height: 1.2em; }
.formnote.is-ok { color: #1E7A47; font-weight: 600; }
.formnote.is-err { color: var(--alarm, #9A2C21); font-weight: 600; }

/* ---------------- footer ---------------- */

.foot { background: var(--charcoal); color: #B4AFA9; padding-block: clamp(40px, 5vw, 64px); }
.foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 32px; }
.foot .foot__h { color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; margin-bottom: 14px; }
.foot a { color: #E4E0DB; text-decoration: none; }
.foot a:hover { color: var(--amber); text-decoration: underline; }
.foot__logo img { width: 150px; margin-bottom: 16px; }
.foot p { font-size: 16px; line-height: 1.65; }
.foot__bar {
  margin-top: clamp(30px, 4vw, 46px); padding-top: 22px; border-top: 1px solid var(--line-dk);
  display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: space-between; font-size: 14.5px;
}

/* ---------------- a11y ---------------- */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  /* --orange is a graphics-only orange (3.3:1 with white). The skip link is
     real text, so it uses the text-safe orange. */
  background: var(--orange-ink); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r) 0; font-weight: 600;
}
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }