/* Roughley Mechanical — components.

   Button, form field, urgency toggle, service card, dealer badge and process
   specs come verbatim from "04 — Components" of the brand system: square
   corners, 2px borders, 16px/26px button padding, the Iron hover inversion.

   DO NOT RENAME: .field, .field__control, .field--invalid, .urgency__input,
   .is-error and .is-near are part of the contract assets/js/contact-form.js
   selects on. Renaming them silently breaks validation.

   BREAKPOINTS, repeated from layout.css because custom properties cannot be
   used in media conditions:  30em 480 · 34em 544 · 48em 768 · 64em 1024 · 75em 1200 */

/* ── Buttons ─────────────────────────────────────────────────────────────
   "square corners, 2px borders". letter-spacing here is 0.12em, not the
   0.14em used by labels — the brand artifact uses two different values. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-16) var(--space-26);
  border: var(--bw) solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-stretch: var(--w-label);
  font-weight: var(--fw-label);
  font-size: var(--fs-label);
  line-height: 1.1;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) linear, color var(--dur) linear,
              border-color var(--dur) linear;
}

.btn--sm { padding: var(--space-10) var(--space-16); font-size: var(--fs-micro); }

.btn--primary {
  background: var(--copper);          /* white on copper = 5.02:1, AA */
  border-color: var(--copper);
  color: var(--white);
}
.btn--primary:hover,
.btn--primary:focus-visible { background: var(--copper-hover); border-color: var(--copper-hover); color: var(--white); }

.btn--outline { background: transparent; border-color: var(--iron); color: var(--iron); }
.btn--outline:hover,
.btn--outline:focus-visible { background: var(--iron); color: var(--white); }

/* On Iron grounds the outline button has to invert the other way. */
.btn--on-dark { background: transparent; border-color: var(--white); color: var(--white); }
.btn--on-dark:hover,
.btn--on-dark:focus-visible { background: var(--white); color: var(--iron); }

.btn--block { width: 100%; }

/* ── Links ───────────────────────────────────────────────────────────── */

.link-underline {
  display: inline-block;
  font-stretch: var(--w-label);
  font-weight: var(--fw-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--iron);
  text-decoration: none;
  border-bottom: var(--bw) solid var(--copper);
  padding-bottom: var(--space-4);
  align-self: flex-start;
}
.link-underline:hover { color: var(--copper); }
.section--dark .link-underline,
.cta-band .link-underline { color: var(--white); border-bottom-color: var(--copper-tint); }

/* The phone number — the one non-button copper use the brand sanctions. */
.link-tel { color: var(--copper); text-decoration: none; font-weight: 700; white-space: nowrap; }
.link-tel:hover { color: var(--copper-hover); text-decoration: underline; }
.section--dark .link-tel,
.cta-band .link-tel,
.site-footer .link-tel { color: var(--copper-tint); }
.section--dark .link-tel:hover,
.cta-band .link-tel:hover,
.site-footer .link-tel:hover { color: var(--white); }

.link-tel--xl {
  font-stretch: var(--w-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-card-title);
  line-height: var(--lh-card-title);
}

/* ── Hero ────────────────────────────────────────────────────────────────
   Full-bleed duotone photograph, Iron scrim, copy left, quote form right. */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--iron);
  color: var(--white);
  --accent: var(--copper-tint);
}
/* `.hero > .hero__media` (0,2,0), not `.hero__media` (0,1,0): the element also
   carries `.duotone`, whose `position: relative` lives in media.css and would
   otherwise win on load order and drop the photo into the flow. */
.hero > .hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

.hero__scrim { position: absolute; inset: 0; z-index: 1; background: var(--scrim); }

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-32);
  padding-block: var(--space-40) var(--space-56);
}
.hero__copy { display: flex; flex-direction: column; gap: var(--space-16); align-items: flex-start; }
.hero__eyebrow { color: var(--copper-tint); }
.hero__lead { color: var(--mist); }

@media (min-width: 48em) {
  .hero__inner { padding-block: var(--space-56) var(--space-72); gap: var(--space-40); }
}
@media (min-width: 64em) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    align-items: center;
    gap: var(--space-56);
    padding-block: var(--space-72) var(--space-72);
  }
}

/* ── Hero quote form ─────────────────────────────────────────────────────
   Step one of a two-step flow. It is a GET form pointed at contact.html, so
   with JS off it still works — the browser serialises the fields into the
   query string and the full form prefills from them. It never pretends to
   have submitted a request. */

.hero-form {
  background: var(--paper);
  border: var(--bw) solid var(--white);
  color: var(--iron);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
}
.hero-form__heading { color: var(--copper); }
.hero-form__note { color: var(--meta-ink); }
.hero-form .field__label { font-size: var(--fs-micro); }

/* ── Trust bar ───────────────────────────────────────────────────────── */

.trust-bar { background: var(--mist); border-bottom: var(--border-hair); }
/* Centred flex, not an auto-fit grid: the grid stretched a lone credential to
   a full 1200px track, so one badge read as an accident. Flex centres one and
   wraps four without either case needing its own rule. */
.trust-bar__list {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding: var(--space-24) var(--space-20);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-16) var(--space-32);
}
.trust-bar__item img { height: 36px; width: auto; }
.trust-bar__item--empty {
  border: 1px dashed var(--steel);
  padding: var(--space-10) var(--space-14);
  text-align: center;
  width: 100%;
}

/* ── Service card ────────────────────────────────────────────────────────
   One card component. Only the count changes between sections. */

.svc-group__heading { color: var(--accent); margin-top: var(--space-12); }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-20);
}

.svc-card { display: flex; }
.svc-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 100%;
  border: var(--border);
  background: var(--surface-card);
  color: var(--iron);
  text-decoration: none;
  padding-bottom: var(--space-24);
  transition: background-color var(--dur) linear, color var(--dur) linear;
}
.svc-card__media { aspect-ratio: 3 / 2; width: 100%; }

/* Graphic fallback for cards with no photograph. Because every photo is
   duotoned to Iron/Paper anyway, an Iron panel sits in the same visual family
   as a photo card — both read as deliberate, so a half-photographed grid does
   not look half-finished. Drop a correctly-named JPEG into
   assets/img/photos/ and re-run the build to switch a card over. */
.svc-card__media--graphic {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--iron);
  background-image:
    repeating-linear-gradient(45deg,
      rgb(255 255 255 / 0.04) 0 2px,
      transparent 2px 10px);
}
.svc-card__glyph {
  font-stretch: var(--w-display);
  font-weight: var(--fw-display);
  font-size: 72px;
  line-height: 1;
  color: var(--graphite);
  -webkit-text-stroke: 1px var(--meta-ink);
}
.svc-card__link:hover .svc-card__media--graphic,
.svc-card__link:focus-visible .svc-card__media--graphic { background-color: var(--graphite); }
.svc-card__link:hover .svc-card__glyph,
.svc-card__link:focus-visible .svc-card__glyph { color: var(--iron); -webkit-text-stroke-color: var(--copper-tint); }
.svc-card__index {
  font-stretch: var(--w-label);
  font-weight: var(--fw-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  color: var(--copper);
  padding-inline: var(--space-24);
  margin-top: var(--space-4);
}
.svc-card__title {
  font-stretch: var(--w-display);
  font-weight: var(--fw-display);
  font-size: 30px;
  line-height: var(--lh-card-title);
  text-transform: uppercase;
  padding-inline: var(--space-24);
}
.svc-card__short {
  font-size: var(--fs-support);
  line-height: var(--lh-support);
  color: var(--text-body);
  padding-inline: var(--space-24);
}
.svc-card__cta { margin-top: auto; margin-inline: var(--space-24); }

/* The Iron inversion. The whole card is the link, so :hover and
   :focus-visible on the anchor drive it. */
.svc-card__link:hover,
.svc-card__link:focus-visible { background: var(--iron); color: var(--white); }
.svc-card__link:hover .svc-card__index,
.svc-card__link:focus-visible .svc-card__index { color: var(--copper-tint); }
.svc-card__link:hover .svc-card__short,
.svc-card__link:focus-visible .svc-card__short { color: var(--steel); }
.svc-card__link:hover .link-underline,
.svc-card__link:focus-visible .link-underline { color: var(--white); border-bottom-color: var(--copper-tint); }

/* ── Dealer badge ────────────────────────────────────────────────────── */

.dealer-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-20);
  border: var(--border-hair);
  background: var(--surface-card);
  padding: var(--space-16) var(--space-20);
  align-self: flex-start;
}
.dealer-badge__label {
  font-stretch: var(--w-label);
  font-weight: var(--fw-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--meta-ink);
}
.dealer-badge__logo { height: 36px; width: auto; }

/* ── Pillars ─────────────────────────────────────────────────────────── */

.pillar { display: flex; flex-direction: column; gap: var(--space-10); }
.pillar__title {
  font-stretch: var(--w-display);
  font-weight: var(--fw-heading);
  font-size: 22px;
  line-height: 1.1;
  text-transform: uppercase;
}
.pillar__body { font-size: var(--fs-support); line-height: var(--lh-support); color: var(--text-body); }

/* ── Process ─────────────────────────────────────────────────────────── */

.process {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0;
  border: var(--border);
}
.process__step {
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  border-bottom: var(--border);
}
.process__step:last-child { border-bottom: 0; }
@media (min-width: 48em) {
  .process__step { border-bottom: 0; border-right: var(--border); }
  .process__step:last-child { border-right: 0; }
}
.process__num {
  font-stretch: var(--w-label);
  font-weight: var(--fw-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  color: var(--accent);
}
.process__title {
  font-stretch: var(--w-display);
  font-weight: var(--fw-heading);
  font-size: 22px;
  line-height: 1.05;
  text-transform: uppercase;
}
.process__body { font-size: var(--fs-support); line-height: var(--lh-support); color: var(--text-body); }

/* ── Offer / rebates band ────────────────────────────────────────────── */

.offer {
  border: var(--border);
  border-left: 6px solid var(--copper);
  background: var(--surface-card);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.offer__body { display: flex; flex-direction: column; gap: var(--space-8); }
.offer__body .t-label { color: var(--accent); }
.offer .btn { align-self: flex-start; }
.offer--rebates { border-left-color: var(--iron); }

@media (min-width: 48em) {
  .offer { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-32); padding: var(--space-28) var(--space-32); }
  .offer .btn { flex: none; }
}

/* ── Reviews ─────────────────────────────────────────────────────────── */

.reviews__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-20);
}
.review {
  border: var(--border);
  background: var(--surface-card);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.review__quote { font-size: var(--fs-support); line-height: var(--lh-support); }
.review__quote::before { content: "\201C"; }
.review__quote::after  { content: "\201D"; }
.review__who {
  margin-top: auto;
  font-stretch: var(--w-label);
  font-weight: var(--fw-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--meta-ink);
}
.review__town { color: var(--accent); }

/* ── Town grid ───────────────────────────────────────────────────────── */

.town-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-12);
}
.town-grid__item a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: var(--border);
  padding: var(--space-14) var(--space-16);
  text-decoration: none;
  color: var(--iron);
  background: var(--surface-card);
  min-height: 44px;
  transition: background-color var(--dur) linear, color var(--dur) linear;
}
.town-grid__item a:hover,
.town-grid__item a:focus-visible { background: var(--iron); color: var(--white); }
.town-grid__name {
  font-stretch: var(--w-display);
  font-weight: var(--fw-heading);
  font-size: 19px;
  line-height: 1.1;
  text-transform: uppercase;
}
.town-grid__cape {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--meta-ink);
}
.town-grid__item a:hover .town-grid__cape,
.town-grid__item a:focus-visible .town-grid__cape { color: var(--copper-tint); }

/* ── Breadcrumb ──────────────────────────────────────────────────────── */

.breadcrumb__list { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; }
.breadcrumb__item {
  font-size: var(--fs-micro);
  letter-spacing: 0.02em;
  color: var(--text-meta);
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}
.breadcrumb__item + .breadcrumb__item::before { content: "/"; color: var(--steel); }
.breadcrumb__item a { color: var(--text-meta); text-decoration: none; }
.breadcrumb__item a:hover { color: var(--copper); text-decoration: underline; }

/* ── Sticky mobile call bar ──────────────────────────────────────────────
   Phones only. Both contractor references carry one; it is consistently the
   biggest mobile conversion lift for a service business. */

.call-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-callbar);
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: var(--bw) solid var(--iron);
}
.call-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: var(--callbar-h);
  text-decoration: none;
  font-stretch: var(--w-label);
  font-weight: var(--fw-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
}
.call-bar__btn--call { background: var(--iron); color: var(--white); }
.call-bar__btn--primary { background: var(--copper); color: var(--white); }
.call-bar__btn:focus-visible { outline-offset: -6px; }

@media (min-width: 48em) { .call-bar { display: none; } }

/* ── Callouts ────────────────────────────────────────────────────────── */

.callout {
  border-left: 4px solid var(--iron);
  background: var(--mist);
  padding: var(--space-16) var(--space-20);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.callout--emergency { background: var(--surface-card); border: var(--bw) solid var(--copper); }
.callout--placeholder { border-left-color: var(--copper); }
.callout__title {
  font-stretch: var(--w-label);
  font-weight: var(--fw-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.callout p { font-size: var(--fs-support); line-height: var(--lh-support); }
/* Copper on the Mist callout fill is 3.98:1 and fails AA for normal text.
   The brand's pressed copper is 5.29:1 on Mist and 6.67:1 on white. */
.callout .link-tel { color: var(--copper-hover); }

/* ── Form ────────────────────────────────────────────────────────────── */

.form { display: flex; flex-direction: column; gap: var(--space-24); max-width: 760px; }
.form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-16); }

.form__status:not(:empty) {
  border: var(--bw) solid var(--iron);
  padding: var(--space-14) var(--space-16);
  font-size: var(--fs-support);
}
.form__status.is-error:not(:empty) { border-color: var(--copper); }
.form__status.is-success:not(:empty) { border-color: var(--iron); background: var(--mist); }

/* SMS consent. A native checkbox, square to match the 2px system, with the
   full filed disclosure as its label — carriers require the whole text to be
   visible, not tucked behind a link. */
.consent { display: grid; grid-template-columns: auto 1fr; gap: var(--space-12); align-items: start; }
.consent__input {
  appearance: none;
  width: 22px; height: 22px;
  margin: 2px 0 0;
  border: var(--bw) solid var(--iron);
  background: var(--white);
  display: grid;
  place-content: center;
  cursor: pointer;
}
.consent__input::before {
  content: "";
  width: 12px; height: 12px;
  background: var(--copper);
  transform: scale(0);
}
.consent__input:checked::before { transform: scale(1); }
.consent__label { font-size: var(--fs-micro); line-height: 1.5; color: var(--text-meta); cursor: pointer; }
.consent__label a { color: var(--copper-hover); }
.cf-turnstile:empty { display: none; }

.field { display: flex; flex-direction: column; gap: var(--space-8); }
.field__label {
  font-stretch: var(--w-label);
  font-weight: var(--fw-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.field__req { color: var(--copper); }

.field__control {
  font-family: inherit;
  font-size: var(--fs-input);   /* exactly 16px — below this iOS force-zooms */
  line-height: 1.4;
  padding: var(--space-14);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--iron);
  width: 100%;
}
/* No `outline: none` here. A class selector (0,1,0) beats the :where()-wrapped
   focus rule in base.css, which silently left every input with no focus ring —
   leaving only the colour-only border change below, which is not sufficient on
   its own. base.css already suppresses the ring for mouse focus. */
.field__control:focus { border-color: var(--copper); }

select.field__control {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--iron) 50%),
    linear-gradient(135deg, var(--iron) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--space-40);
}

.field__hint { font-size: var(--fs-micro); color: var(--text-meta); letter-spacing: 0.02em; text-transform: none; }

/* Errors are never colour-only (SC 1.4.1): visible text plus a heavier
   weight, in addition to the border change. */
.field__error {
  font-size: var(--fs-support);
  font-weight: 700;
  color: var(--copper-hover);   /* 6.67:1 on Paper */
  display: flex;
  gap: var(--space-8);
}
.field__error::before { content: "\2014"; flex: none; }
.field--invalid .field__control { border-color: var(--copper); }

.field__counter { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-meta); align-self: flex-end; }
.field__counter.is-near { color: var(--copper-hover); }

/* ── Urgency toggle ──────────────────────────────────────────────────────
   A radio group, not two buttons. :checked + label does the whole job, so
   this needs no JavaScript: it works with JS off, arrow-key navigation and
   roving focus come free from the native group, and it submits a real value. */

.urgency { display: flex; flex-direction: column; gap: var(--space-8); }
.urgency__legend { padding: 0; }
.urgency__grid { display: grid; border: var(--border); }

.urgency__label {
  display: block;
  padding: var(--space-14);
  text-align: center;
  font-weight: var(--fw-label);
  font-size: var(--fs-support);
  line-height: 1.25;
  background: var(--white);
  color: var(--iron);
  cursor: pointer;
  transition: background-color var(--dur) linear, color var(--dur) linear;
}
.urgency__option + .urgency__option .urgency__label { border-top: var(--border); }

@media (min-width: 34em) {
  /* Flips at 34em, not 60em — "Emergency — no heat / no water" at 15px will
     not fit a ~170px half-column. */
  .urgency__grid { grid-template-columns: 1fr 1fr; }
  .urgency__option + .urgency__option .urgency__label { border-top: 0; border-left: var(--border); }
}

.urgency__input[value="routine"]:checked   + .urgency__label { background: var(--iron);   color: var(--white); }
.urgency__input[value="emergency"]:checked + .urgency__label { background: var(--copper); color: var(--white); }

/* Inset ring: the toggle has a hard 2px border with no surrounding space, so
   an outward ring would be clipped by the neighbouring cell. */
.urgency__input:focus-visible + .urgency__label { outline: var(--focus-ring); outline-offset: -6px; }

/* ── Facts list ──────────────────────────────────────────────────────── */

.facts { display: flex; flex-direction: column; gap: var(--space-24); }
.facts__group { display: flex; flex-direction: column; gap: var(--space-6); }
.facts__term {
  font-stretch: var(--w-label);
  font-weight: var(--fw-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-meta);
}
.facts__def { font-size: var(--fs-support); line-height: var(--lh-support); }

/* Every unconfirmed fact carries data-placeholder. One grep before launch
   finds all of them; the dotted rule makes them visible in review. */
[data-placeholder] { border-bottom: 1px dotted var(--copper); }
.section--dark [data-placeholder],
.cta-band [data-placeholder],
.site-footer [data-placeholder] { border-bottom-color: var(--copper-tint); }

/* ── People ──────────────────────────────────────────────────────────── */

.person { display: flex; flex-direction: column; gap: var(--space-16); }
.person__name {
  font-stretch: var(--w-display);
  font-weight: var(--fw-display);
  font-size: 32px;
  line-height: 1;
  text-transform: uppercase;
}
.person__role {
  font-stretch: var(--w-label);
  font-weight: var(--fw-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--copper);
}

/* ── Service detail blocks ───────────────────────────────────────────── */

.svc-detail { display: flex; flex-direction: column; gap: var(--space-12); padding-top: var(--space-24); border-top: var(--border-hair); }
.svc-detail__title {
  font-stretch: var(--w-display);
  font-weight: var(--fw-heading);
  font-size: 28px;
  line-height: 1.05;
  text-transform: uppercase;
}
.svc-detail__list { display: flex; flex-direction: column; }
.svc-detail__list li { padding: var(--space-10) 0; border-bottom: var(--border-fine); font-size: var(--fs-support); }
.svc-detail__list li:last-child { border-bottom: 0; }

/* Copper is 3.50:1 on Iron and fails AA. Anything that can land on either
   ground uses var(--accent), which .section--dark remaps to the 6.46:1 tint.
   Hardcoding var(--copper) here is the bug this comment exists to prevent. */

/* ── FAQ ─────────────────────────────────────────────────────────────── */

.faq { display: flex; flex-direction: column; border-top: var(--border); }
.faq__item { border-bottom: var(--border); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-18) 0;
  cursor: pointer;
  list-style: none;
  font-stretch: var(--w-display);
  font-weight: var(--fw-heading);
  font-size: 19px;
  line-height: 1.25;
  text-transform: uppercase;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; color: var(--accent); font-size: 24px; line-height: 1; flex: none; }
.faq__item[open] .faq__q::after { content: "\2212"; }
.faq__a { padding-bottom: var(--space-18); font-size: var(--fs-support); line-height: var(--lh-support); color: var(--text-body); max-width: var(--measure); }

/* ── Contact page 2-col ──────────────────────────────────────────────── */

.contact-layout { display: grid; gap: var(--space-40); }
@media (min-width: 64em) {
  .contact-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: var(--space-56); align-items: start; }
}

/* ── Honeypot. display:none is correct here — unlike the radio inputs, this
   one genuinely should be hidden from assistive tech too. ─────────────── */
.hp { display: none; }


/* ── Page hero ───────────────────────────────────────────────────────────
   The compact inner-page counterpart to .hero. Same duotone-and-scrim
   treatment, less vertical weight, and it degrades to a flat Iron band when
   the page has no photograph. */

.page-hero {
  position: relative;
  isolation: isolate;
  background: var(--iron);
  color: var(--white);
  --accent: var(--copper-tint);
  --text-body: var(--mist);
}
/* Same specificity trap as .hero: the element also carries .duotone, whose
   position:relative lives in media.css and would otherwise win on load order. */
.page-hero > .page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__scrim { position: absolute; inset: 0; z-index: 1; background: var(--scrim); }

.page-hero__inner {
  position: relative;
  z-index: 2;
  gap: var(--space-14);
  align-items: flex-start;
  padding-block: var(--space-40) var(--space-40);
}
.page-hero__eyebrow { color: var(--copper-tint); }
.page-hero__lead { color: var(--mist); }
.page-hero__inner .actions { margin-top: var(--space-6); }

@media (min-width: 48em) {
  .page-hero__inner { padding-block: var(--space-56) var(--space-56); }
}

/* ── Link grid ───────────────────────────────────────────────────────────
   Used for related services, town-to-service links and the 404 routes. One
   component, count varies by context. */

.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-12);
}
.link-card a {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  height: 100%;
  border: var(--border);
  background: var(--surface-card);
  color: var(--iron);
  text-decoration: none;
  padding: var(--space-18) var(--space-20);
  transition: background-color var(--dur) linear, color var(--dur) linear;
}
.link-card a:hover,
.link-card a:focus-visible { background: var(--iron); color: var(--white); }
.link-card__title {
  font-stretch: var(--w-display);
  font-weight: var(--fw-heading);
  font-size: 21px;
  line-height: 1.1;
  text-transform: uppercase;
}
.link-card__short { font-size: var(--fs-support); line-height: var(--lh-support); color: var(--text-body); }
.link-card a:hover .link-card__short,
.link-card a:focus-visible .link-card__short { color: var(--steel); }

/* Dark grounds: the bullet lists and link cards need their own treatment. */
.section--dark .svc-detail__list li { border-bottom-color: var(--graphite); }
.section--dark .svc-detail__list li:last-child { border-bottom: 0; }