/* ══════════════════════════════════════════════════════════════════════
   Superior Heating & Cooling — page layout and components.

   Every rule here replaces an inline style. Names describe the role, not
   the appearance, and the sizes that vary per component are held as local
   custom properties so a component can be retuned in one place.

   Spacing scale — section padding was normalised onto three steps; the
   comp shipped six values within a few pixels of each other.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --tint: #f3f2f2;
  --ink-2: #444141;
  --ink-3: #7d7979;
  --line-soft: #ededec;
  --line-softer: #ececeb;
  --sky: #8fb4e8;
  --pale-blue: #bcd2f0;
  --gold: #ffc83d;

  --pad-lg: clamp(40px, 5vw, 76px);
  --pad-md: clamp(36px, 5vw, 64px);
  --pad-sm: clamp(32px, 4vw, 56px);
  /* Split panels come in two sizes in the comp; one token each rather than
     the six near-identical values it shipped. */
  --pad-panel: clamp(36px, 5vw, 68px);
  --pad-panel-sm: clamp(32px, 4vw, 35px);
  --gap-split: clamp(24px, 4vw, 52px);
}

/* ── Shell and sections ─────────────────────────────────────────────── */
.shell { max-width: var(--shell); margin: 0 auto; padding-inline: var(--gutter); }

.section { border-bottom: 1px solid var(--hairline); }
.section--tint { background: var(--tint); }
.section--ink  { background: var(--ink); color: #ffffff; }
.section--red  { background: var(--red); color: #ffffff; }
.section--navy { background: var(--navy); color: #ffffff; }

/* Padded body inside a section. --edge drops the block padding so a split
   layout can run to the section's own edges. */
.section__body { max-width: var(--shell); margin: 0 auto; padding: var(--pad-lg) var(--gutter); }
.section__body--md   { padding-block: var(--pad-md); }
.section__body--sm   { padding-block: var(--pad-sm); }
.section__body--edge { padding-block: 0; }

/* ── Type ───────────────────────────────────────────────────────────── */
.kicker {
  font-size: 12px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--red); margin-bottom: 12px;
}
.kicker--navy  { color: var(--navy); }
.kicker--plain { color: inherit; }
.kicker--tight { letter-spacing: 0.16em; margin-bottom: 10px; }

.section-title { font-size: clamp(28px, 3.8vw, 48px); letter-spacing: -0.02em; margin: 0; }
.section-title--sm { font-size: clamp(26px, 3.4vw, 40px); }
.page-title { font-size: clamp(34px, 5.4vw, 62px); line-height: 1; letter-spacing: -0.03em; margin: 0; }
.page-title--wide { font-size: clamp(34px, 5.4vw, 66px); }

.lede { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.5; color: var(--ink-2); margin: 0; }
.body-text { font-size: 16px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.note { font-size: 13px; color: var(--ink-3); margin: 0; }

.measure-20 { max-width: 20ch; }
.measure-22 { max-width: 22ch; }
.measure-24 { max-width: 24ch; }
.measure-26 { max-width: 26ch; }
.measure-34 { max-width: 34ch; }
.measure-38 { max-width: 38ch; }
.measure-46 { max-width: 46ch; }
.measure-52 { max-width: 52ch; }
.measure-58 { max-width: 58ch; }
.measure-60 { max-width: 60ch; }
.measure-80 { max-width: 80ch; }

.stack-sm > * + * { margin-top: 18px; }

/* ── Shared bits ────────────────────────────────────────────────────── */
.stars { color: var(--red); letter-spacing: 0.1em; }
.stars--gold { color: var(--gold); }
/* The one rating component — see _includes/aggregate-rating.html. It is
   inline-flex so it disappears cleanly when the include renders nothing. */
.rating { display: inline-flex; align-items: center; gap: 8px; }
.rating__text { font-size: 13px; }
.hero__rating .stars { font-size: 17px; }
.hero__rating .rating__text { font-size: 14px; font-weight: 800; }
.site-trust__rating .stars { font-size: 16px; }
.site-trust__rating .rating__text { font-weight: 800; letter-spacing: 0.04em; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.actions--spaced { margin-top: 28px; }

.btn--lg    { font-size: 15px; padding: 16px 22px; letter-spacing: 0.04em; text-transform: uppercase; }
.btn--xl    { font-size: clamp(15px, 1.7vw, 18px); padding: 18px 24px; letter-spacing: 0.02em; font-weight: 900; }
.btn--wide  { padding-inline: 24px; }
.btn--outline-light { border: 1px solid rgba(255, 255, 255, 0.28); color: #ffffff; }
.btn--outline-light:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); }
.btn--white { background: #ffffff; color: var(--ink); font-weight: 900; }
.btn--white:hover { background: #f1efef; color: var(--ink); }
.btn--red   { background: var(--red); color: #ffffff; }
.btn--red:hover { background: #a00707; color: #ffffff; }
.btn--hairline { border-width: 1px; border-color: #c9c6c5; }
.btn--form  { width: 100%; justify-content: flex-start; font-size: 15px; padding: 16px 20px; letter-spacing: 0.04em; text-transform: uppercase; }
.btn--form-auto { width: auto; }

.link-rule {
  font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid var(--red); padding-bottom: 4px;
  color: inherit;
}
.link-rule:hover { color: var(--red); }
.link-rule--thin { padding-bottom: 3px; }

/* ── Auto-fitting grids. --min is the column floor before wrapping. ─── */
.autogrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 280px)), 1fr));
  gap: var(--gap, 16px);
}
.autofill { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 300px)), 1fr)); }

/* A two-up layout that runs to the section edges. */
.split { --min: 320px; --gap: 0px; }
.split--wide { --min: 340px; }
.split--narrow { --min: 300px; }
.split__pane { min-width: 0; padding-block: var(--pad-panel); }
.split__pane--compact { padding-block: var(--pad-panel-sm); }
.split__pane--start { padding-right: var(--gap-split); }
.split__pane--end { padding-left: var(--gap-split); border-left: 1px solid var(--hairline); }
.split__pane--center { display: flex; flex-direction: column; justify-content: center; }
.split__media { min-width: 0; min-height: clamp(320px, 40vw, 520px); }
.split__media--tall { min-height: clamp(320px, 40vw, 560px); }
.split__media--short { min-height: clamp(300px, 36vw, 480px); }

/* ── Hero (home) ────────────────────────────────────────────────────── */
.hero { position: relative; background: var(--ink); }
.hero__media { position: absolute; inset: 0; }
.hero__grid {
  position: relative; pointer-events: none;
  max-width: var(--shell); margin: 0 auto;
  padding: clamp(32px, 5vw, 64px) var(--gutter);
  --min: 330px; --gap: clamp(20px, 2.5vw, 32px);
  align-items: stretch;
}
.hero__panel {
  background: var(--ink); color: #ffffff;
  padding: clamp(28px, 4vw, 52px); pointer-events: auto;
}
.hero__badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--red); padding: 8px 14px; margin-bottom: 26px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
}
.hero__badge::before { content: ""; width: 8px; height: 8px; background: #ffffff; display: block; }
.hero__title { font-size: clamp(36px, 5.6vw, 68px); line-height: 0.98; letter-spacing: -0.03em; margin: 0 0 20px; }
.hero__lede { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.5; color: #e4e1e1; max-width: 38ch; margin: 0 0 30px; }
.hero__actions { margin-bottom: 30px; }
.hero__proof {
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
  border-top: 1px solid #3a3736; padding-top: 22px;
}
.hero__proof-note { font-size: 13px; color: #bab6b6; }

/* ── Stat bar ───────────────────────────────────────────────────────── */
.statbar { --min: 200px; --gap: 0px; max-width: var(--shell); margin: 0 auto; padding-inline: var(--gutter); }
.statbar__item { padding: 22px 20px; border-left: 1px solid rgba(255, 255, 255, 0.18); }
.statbar__item:first-child { padding-left: 0; border-left: 0; }
.statbar__item:last-child { padding-right: 0; }
.statbar__value { font-size: clamp(22px, 2.6vw, 30px); font-weight: 900; letter-spacing: -0.02em; }
.statbar__label {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pale-blue); margin-top: 4px;
}

/* ── Section head with a trailing link ──────────────────────────────── */
.section-head {
  display: flex; flex-wrap: wrap; gap: 16px 40px;
  align-items: flex-end; justify-content: space-between; margin-bottom: 34px;
}
.section-head--tight { gap: 12px 32px; }
.section-head__aside { display: flex; gap: 10px; align-items: center; }

/* ── Feature cards ──────────────────────────────────────────────────── */
.feature-grid { --min: 180px; }
.feature-card {
  text-decoration: none; color: inherit; display: flex; flex-direction: column;
  background: #ffffff; min-width: 0; border: 1px solid var(--hairline);
  transition: border-color 0.2s ease;
}
.feature-card:hover { border-color: #c9c6c5; }
.feature-card__media { aspect-ratio: 4 / 3; min-width: 0; }
.feature-card__body { padding: 24px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.feature-card__title { font-size: 20px; letter-spacing: -0.01em; margin: 0; }
.feature-card__text { font-size: 14px; line-height: 1.5; color: var(--ink-muted); margin: 0; flex: 1 1 auto; }
.feature-card__cta { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); }

/* ── Simple labelled rows ───────────────────────────────────────────── */
.tag-rows { margin-top: 34px; border-top: 1px solid var(--hairline); --min: 180px; --gap: 16px clamp(20px, 4vw, 48px); }
.tag-row { font-size: 15px; font-weight: 600; padding: 14px 0; border-bottom: 1px solid var(--line-softer); }

/* ── Steps ──────────────────────────────────────────────────────────── */
.steps { --min: 190px; --gap: 24px 0; }
.step { min-width: 0; display: flex; flex-direction: column; }
.step__marker { display: flex; align-items: center; }
.step__num {
  width: 28px; height: 28px; background: var(--red); color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; flex: 0 0 auto;
}
.step__rule { flex: 1 1 auto; height: 1px; background: var(--color-neutral-300); min-width: 0; }
.step__title { font-size: 18px; margin: 20px 0 8px; padding-right: 24px; }
.step__text { font-size: 14px; line-height: 1.55; color: var(--ink-muted); margin: 0; padding-right: 24px; }

/* ── Checklist ──────────────────────────────────────────────────────── */
.checklist__item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px solid var(--line-soft);
}
.checklist__mark { color: var(--red); font-size: 17px; font-weight: 900; line-height: 1.3; }
.checklist__text { font-size: 16px; line-height: 1.45; font-weight: 600; }

/* ── Red promo panel ────────────────────────────────────────────────── */
.promo__price { font-size: clamp(64px, 11vw, 120px); font-weight: 900; letter-spacing: -0.05em; line-height: 0.85; }
.promo__price-label { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 10px; }
.promo__price-note { font-size: 17px; font-weight: 700; margin-top: 12px; }
.promo__price-fine { font-size: 15px; margin-top: 6px; opacity: 0.9; }
.promo__title { font-size: clamp(30px, 4.2vw, 56px); letter-spacing: -0.03em; line-height: 0.98; margin: 0 0 18px; }
.promo__text { font-size: 17px; line-height: 1.5; max-width: 40ch; margin: 0 0 28px; }
.split__pane--on-red { border-left-color: rgba(255, 255, 255, 0.28); }

/* ── Testimonials ───────────────────────────────────────────────────── */
.quote-grid { --min: 280px; }
.quote-card {
  background: #ffffff; padding: 28px 24px; display: flex; flex-direction: column;
  gap: 14px; min-width: 0; border: 1px solid var(--hairline); margin: 0;
}
.quote-card__text { font-size: 16px; line-height: 1.55; margin: 0; flex: 1 1 auto; }
.quote-card__meta { border-top: 1px solid var(--hairline); padding-top: 14px; margin: 0; }
.quote-card__name { font-size: 14px; font-weight: 800; }
.quote-card__detail { font-size: 13px; color: var(--ink-3); }

/* ── Work tiles ─────────────────────────────────────────────────────── */
.work-grid { --min: 200px; --gap: 12px; }
.work-tile { aspect-ratio: 4 / 5; min-width: 0; }

/* ── Page header block ──────────────────────────────────────────────── */
.page-head__lede { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.5; color: var(--ink-2); margin: 0; }

/* ── Services grid (bordered cells) ─────────────────────────────────── */
.service-grid { --min: 300px; --gap: 0px; border-left: 1px solid var(--hairline); }
.service-cell {
  border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  padding: 30px 26px; min-width: 0;
}
.service-cell__title { font-size: 20px; letter-spacing: -0.01em; margin: 0 0 10px; }
.service-cell__text { font-size: 14px; line-height: 1.55; color: var(--ink-muted); margin: 0; }

/* ── Info cards ─────────────────────────────────────────────────────── */
.card-grid { --min: 270px; }
.info-card { background: #ffffff; padding: 26px 24px; min-width: 0; border: 1px solid var(--hairline); }
.info-card__title { font-size: 19px; margin: 0 0 10px; }
.info-card__text { font-size: 14px; line-height: 1.55; color: var(--ink-muted); margin: 0 0 18px; }

/* ── Trio strip (about) ─────────────────────────────────────────────── */
.trio { --min: 240px; --gap: 0px; }
.trio__item { padding: 30px 24px; border-left: 1px solid var(--hairline); }
.trio__item:first-child { padding-left: 0; border-left: 0; }
.trio__item:last-child { padding-right: 0; }
.trio__title { font-size: 16px; margin: 0 0 8px; }
.trio__text { font-size: 14px; color: var(--ink-muted); margin: 0; }

/* ── Pricing table ──────────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; border: 1px solid var(--hairline); }
.price-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.price-table thead tr { background: var(--ink); color: #ffffff; }
.price-table th {
  text-align: left; padding: 16px 18px; font-size: 12px;
  font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
}
.price-table tbody tr { border-top: 1px solid var(--line-softer); }
.price-table td, .price-table tbody th { padding: 16px 18px; white-space: nowrap; }
.price-table tbody th { font-size: 15px; font-weight: 800; text-align: left; text-transform: none; letter-spacing: 0; }
.price-table__total { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.price-table__per { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

/* ── Callout ────────────────────────────────────────────────────────── */
.callout {
  margin-top: 28px; border-left: 2px solid var(--red);
  padding: 16px 0 16px 20px; background: var(--tint);
}
.callout__text { font-size: 16px; font-weight: 700; margin: 0; }
.callout__text a { color: #8a0707; }

/* ── Benefit rows (ticked list) ─────────────────────────────────────── */
.benefit-rows { background: #ffffff; border: 1px solid var(--hairline); margin-bottom: 34px; }
.benefit-row {
  display: flex; gap: 16px; align-items: baseline; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--line-soft);
}
.benefit-row__text { font-size: 15px; font-weight: 700; line-height: 1.45; }
.benefit-row__tick { color: var(--red); font-size: 18px; font-weight: 900; flex: 0 0 auto; }

/* ── Inspection checklists ──────────────────────────────────────────── */
.checks-grid { --min: 290px; }
.check-card { background: #ffffff; padding: 26px 24px; min-width: 0; border: 1px solid var(--hairline); }
.check-card__title {
  font-size: 13px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; margin: 0 0 18px; color: var(--red);
}
.check-item {
  font-size: 14px; line-height: 1.45; padding: 9px 0;
  border-top: 1px solid var(--color-neutral-200); color: var(--ink-2);
}

/* ── Big statistic ──────────────────────────────────────────────────── */
.bigstat { --min: 300px; --gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: 20px; }
.bigstat__num { font-size: clamp(72px, 12vw, 132px); font-weight: 900; letter-spacing: -0.05em; line-height: 0.85; color: var(--red); }
.bigstat__text { font-size: 17px; line-height: 1.5; margin: 18px 0 0; max-width: 34ch; }
.bigstat__aside { border-left: 1px solid var(--hairline); padding-left: clamp(20px, 3vw, 36px); }
.benefit { padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.benefit__title { font-size: 18px; margin: 0 0 6px; }
.benefit__text { font-size: 14px; line-height: 1.5; color: var(--ink-muted); margin: 0; }

/* ── Terms and perks ────────────────────────────────────────────────── */
.terms-grid { --min: 320px; --gap: 0 clamp(24px, 4vw, 48px); }
.term { font-size: 13px; line-height: 1.55; color: var(--ink-muted); margin: 0; padding: 12px 0; border-top: 1px solid var(--line-softer); }
.block-title { font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 20px; }
.perk { font-size: 15px; line-height: 1.5; padding: 14px 0; border-top: 1px solid var(--line-softer); }

/* ── Contact details ────────────────────────────────────────────────── */
.contact-item { border-top: 1px solid var(--hairline); padding: 20px 0; }
.contact-item:last-of-type { border-bottom: 1px solid var(--hairline); }
.contact-item__label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px;
}
.contact-item__value {
  font-size: clamp(26px, 3.6vw, 38px); font-weight: 900; letter-spacing: -0.02em;
  text-decoration: none; color: var(--ink);
}
.contact-item__value--sm { font-size: clamp(18px, 2.4vw, 26px); font-weight: 800; letter-spacing: -0.01em; word-break: break-all; }
.contact-item__text { font-size: 16px; font-weight: 600; line-height: 1.5; }

/* ── New-construction spec list ─────────────────────────────────────── */
.spec-list { border-top: 1px solid var(--hairline); }
.spec { padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.spec__label { font-size: 16px; }
.spec__text { font-size: 15px; color: var(--ink-muted); }

/* ── Forms (the design reference Paperform is built to match) ───────── */
/* The panel classes go on the form's CONTAINER, never on the <form> itself.
   A Paperform embed replaces the designed form, so any box or padding carried
   by the form element disappears the moment a paperform_id is set — which is
   how the new-construction embed ended up flush to the section with no
   padding at all. The container is there either way.

   --form-pad is a variable so .split--bleed-end below can extend one side
   without restating the clamp. */
.form-panel { --form-pad: clamp(28px, 4vw, 48px); min-width: 0; padding: var(--form-pad); }
.form-panel--tint { background: var(--tint); border-left: 1px solid var(--hairline); }
.form-panel--white { --form-pad: clamp(28px, 4vw, 44px); background: #ffffff; color: var(--ink); border-left: 1px solid #f0dcdc; }
.form-panel--boxed { --form-pad: clamp(24px, 3vw, 40px); background: #ffffff; border: 1px solid var(--hairline); }

/* A tinted pane sitting in the last column of a split stops at the shell's
   edge, leaving a white band down the right of wide screens that reads as a
   mistake. Run the background out to the viewport instead, keeping the form
   where it is by matching the negative margin with the same padding. max()
   collapses it once the viewport is narrower than the shell, and the clip
   stops the extra width becoming a horizontal scrollbar. */
@media (min-width: 900px) {
  .split--bleed-end { overflow-x: clip; }
  .split--bleed-end > .form-panel {
    --bleed: max(0px, (100vw - var(--shell)) / 2);
    margin-right: calc(-1 * (var(--gutter) + var(--bleed)));
    padding-right: calc(var(--form-pad) + var(--gutter) + var(--bleed));
  }
}

.form__grid { display: grid; gap: 14px; }
.form__grid--roomy { gap: 16px; }
.form__title { font-size: 24px; margin: 0 0 6px; }
.form__intro { font-size: 14px; color: var(--ink-muted); margin: 0 0 22px; }
.form__note { font-size: 12px; color: var(--ink-3); margin: 0; }

.field { display: block; }
.field__label {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 6px;
}
.field__control {
  width: 100%; box-sizing: border-box; border: 1px solid var(--hairline);
  padding: 12px; font-size: 15px; background: #ffffff;
}
.field__control--lg { padding: 14px; }
.field__control--area { resize: vertical; }
.field__control--file { border-style: dashed; border-color: #cfcccb; padding: 12px; font-size: 14px; }
.field-row { --min: 150px; --gap: 14px; }
.field-row--wide { --min: 160px; --gap: 16px; }

.form-success__kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); margin-bottom: 10px; }
.form-success__title { font-size: 24px; margin: 0 0 10px; }
.form-success__text { font-size: 14px; color: var(--ink-muted); margin: 0; }
.form-error { font-size: 13px; color: var(--red); margin: 0; }

.section-title + .autogrid { margin-top: 28px; }
.contact-lede { font-size: clamp(34px, 5vw, 58px); margin-bottom: 30px; }
.nc-lede { margin-bottom: 28px; }
.nc-form { max-width: 680px; margin-inline: auto; }
.form__title--lg { font-size: 26px; margin-bottom: 20px; }
.form-success__title--lg { font-size: 26px; }
.join-title { margin-bottom: 18px; }
.form__title--spaced { margin-bottom: 22px; }
.perks-panel { padding: clamp(28px, 4vw, 44px); }
.maint-title { font-size: clamp(34px, 5.2vw, 64px); margin-bottom: 20px; }
.maint-lede { margin-bottom: 30px; }
.maint-heading { font-size: clamp(28px, 3.8vw, 46px); margin-bottom: 14px; }
.maint-intro { margin-bottom: 32px; }
.maint-intro--wide { margin-bottom: 34px; }
.note--table { margin-top: 16px; }
.signup__title { font-size: clamp(30px, 4vw, 52px); letter-spacing: -0.03em; line-height: 1; margin: 0 0 18px; }
.signup__text { font-size: 16px; line-height: 1.55; color: var(--color-neutral-300); margin: 0 0 26px; }
.signup__note { font-size: 13px; color: var(--color-neutral-500); margin: 26px 0 0; }
.form__title--signup { font-size: 22px; margin-bottom: 20px; }
.book-panel { background: #ffffff; padding: clamp(24px, 3vw, 40px); pointer-events: auto; align-self: end; }
.book-panel__title { font-size: clamp(22px, 2.4vw, 28px); margin: 0 0 6px; letter-spacing: -0.02em; }
.form__grid--book { gap: 12px; }
.btn--form-book { padding: 16px 18px; }
.form-success__title--book { font-size: 26px; }
.steps-heading { margin-bottom: 36px; }
.section-title--why { font-size: clamp(28px, 3.6vw, 44px); margin-bottom: 24px; }
.split__pane--why { padding-left: var(--gap-split); }
.work-head { margin-bottom: 30px; }
.work-heading { margin-bottom: 14px; }

/* ── Shared CTA band ────────────────────────────────────────────────── */
.cta__grid { --min: 300px; --gap: clamp(24px, 4vw, 48px); align-items: center; }
.cta__title { font-size: clamp(30px, 4.4vw, 56px); letter-spacing: -0.03em; line-height: 0.98; margin: 0; }
.cta__actions { align-items: center; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-footer { background: var(--ink); color: #ffffff; }
.site-footer__inner {
  max-width: var(--shell); margin: 0 auto;
  padding: clamp(36px, 4vw, 56px) var(--gutter);
  --min: 220px; --gap: clamp(28px, 4vw, 48px);
}
.site-footer__logo { height: 44px; width: auto; filter: invert(1); margin-bottom: 18px; }
.site-footer__blurb { font-size: 14px; line-height: 1.55; color: var(--color-neutral-400); margin: 0; }
.site-footer__heading {
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-neutral-500); margin: 0 0 14px;
}
.site-footer__links { display: grid; gap: 8px; font-size: 14px; }
.site-footer__links a { color: #ffffff; text-decoration: none; }
.site-footer__links a:hover { text-decoration: underline; }
.site-footer__phone { font-weight: 800; }
.site-footer__break { word-break: break-all; }
.site-footer__social { color: var(--sky); }
.site-footer__social:hover { color: var(--sky); }
.site-footer__area { font-size: 14px; line-height: 1.7; color: var(--color-neutral-400); }
.site-footer__badge {
  font-size: 12px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sky); margin-top: 14px;
}
.site-footer__base { border-top: 1px solid #3a3736; }
.site-footer__legal {
  max-width: var(--shell); margin: 0 auto;
  padding: 18px var(--gutter); font-size: 12px; color: var(--ink-3);
}

/* The 404 page reuses the tag rows as a link list. */
.notfound-links { margin-top: 0; border-top: 0; }
.notfound-links a { color: inherit; text-decoration: none; }
.notfound-links a:hover { color: var(--red); }

/* ── FAQ ────────────────────────────────────────────────────────────── */
.faq-grid { --min: 380px; --gap: 0 clamp(24px, 4vw, 48px); }
.faq { padding: 20px 0; border-top: 1px solid var(--line-softer); }
.faq__q { font-size: 17px; line-height: 1.35; margin: 0 0 8px; }
.faq__a { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.faq__a a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.faq__a a:hover { color: var(--red); }
.faq-actions { margin-top: 20px; }