/* ==================================================================
   Compressor Experts — visual system
   ------------------------------------------------------------------
   One stylesheet, no framework, no build step. Class names are
   unchanged from the previous version, so markup and behaviour are
   untouched — this file only changes how it all looks.

   BRAND COLOURS are sampled from the supplied logo artwork: the green
   is #6EAD44 on black. That green is only 2.72:1 on white, so it is
   used for the mark, rules and graphics — never for small text on
   white. Text and button fills use --brand-text (#4B762E, 5.34:1), a
   darker shade of the same hue. Re-check contrast if these change:
   small text needs 4.5:1, large text 3:1.
   ================================================================== */

/* ---------- type ---------------------------------------------------
   Two variable files, latin subset, self-hosted. Archivo carries the
   display voice (tight, industrial); Inter carries everything a
   contractor actually has to read. */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/Archivo.woff2") format("woff2");
  font-weight: 500 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --brand:        #6ead44;   /* logo green — the mark, rules, graphics */
  --brand-text:   #4b762e;   /* links, button fills — 5.34:1 on white */
  --brand-deep:   #3a5c24;   /* hover / pressed */
  --brand-accent: #9bd37e;   /* green on dark panels — 10.6:1 */
  --brand-light:  #f0f7ea;
  --brand-dark:   #101614;   /* kept: near-black, as the logo uses */

  --ink:          #101614;
  --ink-2:        #4a5350;
  --ink-3:        #6d7673;
  --paper:        #ffffff;
  --paper-2:      #f6f7f5;
  --paper-3:      #eceeea;
  --line:         #e2e5e0;
  --line-dark:    rgba(255, 255, 255, .14);
  --alert:        #b3200f;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font: var(--body);

  --wrap:   78rem;
  --gap:    clamp(1.5rem, 3.5vw, 3rem);
  --band:   clamp(2.75rem, 5.5vw, 5rem);
  --radius: 10px;
  --r:      10px;
  --r-sm:   6px;

  --shadow: 0 1px 2px rgba(16,22,20,.04), 0 8px 24px -12px rgba(16,22,20,.18);
  --shadow-lift: 0 2px 4px rgba(16,22,20,.05), 0 18px 40px -18px rgba(16,22,20,.28);
  --ease: cubic-bezier(.2, .6, .2, 1);
}

/* ---------- reset ------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  letter-spacing: -0.006em;
  color: var(--ink);
  background: var(--paper);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.85rem, 4vw, 2.9rem); }
h3 { font-size: 1.1875rem; letter-spacing: -0.02em; line-height: 1.25; }

p, ul, ol, dl { margin: 0 0 1.15em; }
a { color: var(--brand-text); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-deep); }
ul { padding-left: 1.15em; }
strong { font-weight: 650; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 0; top: 0; z-index: 200;
  transform: translateY(-120%);
  background: var(--ink); color: #fff;
  padding: .85rem 1.35rem; font-weight: 600; text-decoration: none;
}
.skip:focus { transform: translateY(0); color: #fff; }

main:focus { outline: none; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

/* Narrow measure. Constrains the children, not the container, so a
   narrow block keeps the same left edge as the wide bands above it. */
.narrow > * { max-width: 48rem; }

/* ---------- unresolved-fact marker -------------------------------- */

.token {
  background: #ffe680; color: #4a3800;
  border: 1px dashed #a88400; border-radius: 3px;
  padding: 0 .35em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85em; font-weight: 700; white-space: nowrap;
}
.tokennote {
  background: #fff9e0; border-left: 3px solid #e0b400;
  padding: .9rem 1.15rem; border-radius: var(--r-sm);
  font-size: .95rem; color: #4a3800;
}

/* ---------- emergency bar ----------------------------------------- */

.ebar {
  position: sticky; top: 0; z-index: 60;
  background: var(--alert); color: #fff;
  font-size: .875rem; font-weight: 600;
}
.ebar__in {
  display: flex; align-items: center; justify-content: center;
  gap: .3rem 1.15rem; flex-wrap: wrap;
  min-height: 2.5rem; padding-block: .35rem; text-align: center;
}
.ebar__dot {
  display: inline-block; width: .4rem; height: .4rem; margin-right: .45rem;
  border-radius: 50%; background: #fff; vertical-align: middle;
  animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.55); }
  70%  { box-shadow: 0 0 0 .5rem rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.ebar__tel {
  color: #fff; text-decoration: none; font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid rgba(255,255,255,.45);
  padding-bottom: 1px;
}
.ebar__tel:hover { color: #fff; border-bottom-color: #fff; }

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

.site-head {
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 2.5rem; z-index: 55;
}
.site-head__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 5.25rem; flex-wrap: wrap;
}

/* The supplied lockup is stacked (emblem over wordmark), so it needs
   more height than a horizontal logo before the wordmark reads. */
.brand { display: flex; align-items: center; text-decoration: none; }
.brand__logo { display: block; height: 3.9rem; width: auto; flex: none; }
@media (max-width: 30rem) { .brand__logo { height: 3.1rem; } }

.navtoggle {
  display: none; width: 2.9rem; height: 2.9rem;
  background: none; border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer;
}
.navtoggle:hover { border-color: var(--ink); }
.navtoggle__bars, .navtoggle__bars::before, .navtoggle__bars::after {
  display: block; width: 1.15rem; height: 1.5px; background: var(--ink);
  margin-inline: auto; position: relative; border-radius: 2px;
}
.navtoggle__bars::before, .navtoggle__bars::after { content: ""; position: absolute; left: 0; }
.navtoggle__bars::before { top: -6px; }
.navtoggle__bars::after { top: 6px; }

.nav ul {
  display: flex; align-items: center; gap: .25rem 1.75rem;
  list-style: none; margin: 0; padding: 0; flex-wrap: wrap;
}
.nav a {
  position: relative; display: inline-block; padding: .5rem 0;
  color: var(--ink); text-decoration: none;
  font-size: .9375rem; font-weight: 500; letter-spacing: -.008em;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .1rem;
  height: 2px; background: var(--brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { font-weight: 650; }
.nav__cta a::after { display: none; }

@media (max-width: 62rem) {
  .navtoggle { display: block; }
  .nav { flex-basis: 100%; display: none; }
  .nav[data-open="true"] { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 1rem; }
  .nav li { border-top: 1px solid var(--line); }
  .nav a { display: block; padding: .95rem 0; font-size: 1rem; }
  .nav a::after { display: none; }
  .nav__cta { border-top: 0; padding-top: 1rem; }
  .nav__cta a { text-align: center; }
}

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

/* CTAs. The primary sits on the actual logo green with near-black text:
   6.8:1, and far more inviting than the muted dark-green fill that white
   text would force (white on #6EAD44 is only 2.7:1 and fails). */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: .6rem;
  padding: 1.05rem 1.9rem;
  font-family: var(--body);
  font-weight: 650; font-size: 1.0125rem; letter-spacing: -.01em;
  text-decoration: none; text-align: center; cursor: pointer;
  border-radius: 8px; border: 1px solid transparent;
  transition: background .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .18s var(--ease),
              box-shadow .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--brand); color: #0f1a09; border-color: var(--brand);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(16,22,20,.16), 0 10px 22px -14px rgba(110,173,68,.9);
}
.btn--primary::after {
  content: "\2192"; font-size: 1.05em; line-height: 1;
  transition: transform .25s var(--ease);
}
.btn--primary:hover {
  background: #7cbd4d; border-color: #7cbd4d; color: #0f1a09;
  box-shadow: 0 2px 4px rgba(16,22,20,.14), 0 16px 34px -14px rgba(110,173,68,.95);
}
.btn--primary:hover::after { transform: translateX(4px); }

.btn--ghost {
  background: transparent; color: var(--ink);
  border-color: rgba(16,22,20,.3);
}
.btn--ghost:hover {
  background: var(--ink); border-color: var(--ink); color: #fff;
  box-shadow: 0 14px 30px -16px rgba(16,22,20,.7);
}

.btn--emergency {
  background: var(--alert); color: #fff; border-color: var(--alert);
  padding: .68rem 1.25rem; font-size: .92rem; font-weight: 650;
  box-shadow: 0 8px 20px -12px rgba(179,32,15,.9);
}
.btn--emergency:hover { background: #8d1a0c; border-color: #8d1a0c; color: #fff; }

.btn--wide { width: 100%; padding-block: 1.2rem; font-size: 1.07rem; }
.btnrow { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }

.arrow {
  font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; gap: .4rem;
}
.arrow::after { content: "\2192"; transition: transform .25s var(--ease); }
.arrow:hover::after { transform: translateX(4px); }

/* ---------- bands ------------------------------------------------- */

.band { padding-block: var(--band); position: relative; }
.band--alt { background: var(--paper-2); }

/* Dark bands share one treatment: deep ink with a faint green wash so
   the black is not flat, and hairline rules instead of hard borders. */
.band--problem, .band--cta, .hero, .emergency, .site-foot {
  background:
    radial-gradient(120% 100% at 12% 0%, rgba(110,173,68,.10) 0%, rgba(110,173,68,0) 55%),
    var(--ink);
  color: #e7ebe8;
}
.band--problem h2, .band--cta h2, .hero h1, .emergency h1 { color: #fff; }
.band--problem a, .band--cta a:not(.btn), .site-foot a { color: var(--brand-accent); }
.band--problem strong, .band--cta strong { color: #fff; }
.band--cta .btn--ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.band--cta .btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.band--cta .note { color: #a9b3ae; }

.band--feature { background: var(--brand-light); }
.band--cta { padding-block: clamp(2.75rem, 5vw, 4.25rem); }
.band--brands { background: var(--paper-2); }

.note { font-size: .9375rem; color: var(--ink-2); }

/* The eyebrow + hairline pairing is the signature detail: it appears
   before section headings and nowhere else. */
.eyebrow {
  display: flex; align-items: center; gap: .75rem;
  text-transform: uppercase; letter-spacing: .16em;
  font-family: var(--body);
  font-size: .72rem; font-weight: 700; color: var(--brand-text);
  margin-bottom: 1.1rem;
}
.eyebrow::after {
  content: ""; height: 1px; flex: 1; max-width: 5rem;
  background: linear-gradient(90deg, var(--brand), transparent);
}

/* Signature accent: a short green rule above the first heading of a
   section. Generated, so no page markup carries it. */
.band > .wrap > h2:first-child::before,
.band > .wrap > .narrow > h2:first-child::before,
.band--problem .wrap > h2:first-child::before {
  content: ""; display: block;
  width: 2.75rem; height: 3px; border-radius: 2px;
  background: var(--brand); margin-bottom: 1.5rem;
}

.lede {
  font-size: clamp(1.14rem, 2.1vw, 1.4rem);
  line-height: 1.5; color: var(--ink-2); max-width: 46rem;
  letter-spacing: -.014em;
}
.intro { font-size: 1.19rem; line-height: 1.6; color: var(--ink-2); }

/* ---------- page head --------------------------------------------- */

.phead {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(110,173,68,.07) 0%, rgba(110,173,68,0) 60%),
    var(--paper);
}
/* The first band after a page title closes up, so the title and the
   content it introduces read as one unit rather than two screens. */
.phead + .band { padding-top: clamp(2rem, 3.5vw, 3rem); }

/* Headings clear the sticky header when linked to directly. */
h1, h2, h3 { scroll-margin-top: 9rem; }

.crumbs { font-size: .8125rem; margin-bottom: 1.4rem; color: var(--ink-3); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: .45rem; color: var(--line); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--brand-text); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink-3); }

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

/* The hero photograph is a full-bleed backdrop rather than a block
   beside the text. It stays a real <img> — so it keeps its alt text and
   is still the preloaded LCP element — but is positioned to cover the
   section, with the copy layered over a gradient scrim. A negative
   z-index paints it above the section's own background and below the
   content, which is what lets a single element do both jobs.

   The source is portrait, so as a stacked block it made the hero
   enormously tall on a phone. As a backdrop it crops instead. */
/* HERO
   -----------------------------------------------------------------
   On a phone the photograph is a full-bleed backdrop: at 390px @3x it
   needs 1170 pixels and the source is 1280, so it is pixel-sharp.

   On a wide screen full-bleed is the wrong call. A 1440px hero at 2x
   would need 2880 pixels from a 1280px source — a 2.25x upscale, which
   is exactly what made it look soft. Confining the image to the right
   half drops that to about 1.2x. It also reads better: the copy gets a
   solid dark panel instead of fighting a busy photograph. */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(30rem, 74vh, 44rem);
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.hero__shot {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  border-radius: 0; box-shadow: none;
  aspect-ratio: auto;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg,
    rgba(16,22,20,.95) 0%, rgba(16,22,20,.91) 52%,
    rgba(16,22,20,.80) 72%, rgba(16,22,20,.45) 88%,
    rgba(16,22,20,.20) 100%);
}
@media (max-width: 63.99rem) {
  .hero { align-items: flex-end; min-height: clamp(32rem, 82vh, 40rem); }
}

@media (min-width: 64rem) {
  /* Photo occupies the right ~52% and bleeds off the edge. */
  .hero__shot { left: 48%; width: auto; right: 0; }
  .hero::after {
    background:
      linear-gradient(90deg,
        var(--ink) 0%, var(--ink) 38%,
        rgba(16,22,20,.92) 48%, rgba(16,22,20,.55) 60%,
        rgba(16,22,20,.28) 76%, rgba(16,22,20,.22) 100%),
      linear-gradient(0deg, rgba(16,22,20,.45) 0%, rgba(16,22,20,0) 45%);
  }
}

.hero__in { display: block; }
.hero__in > div { position: relative; z-index: 2; max-width: 34rem; }

.hero__kicker {
  display: flex; align-items: center; gap: .75rem;
  text-transform: uppercase; letter-spacing: .16em;
  font-size: .72rem; font-weight: 700; color: var(--brand-accent);
  margin-bottom: 1.4rem;
}
.hero__kicker::after {
  content: ""; height: 1px; flex: 1; max-width: 5rem;
  background: linear-gradient(90deg, var(--brand), transparent);
}
.hero h1 { margin-bottom: .35em; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hero__sub {
  font-size: clamp(1.08rem, 2vw, 1.28rem); line-height: 1.55;
  color: #d5dcd8; max-width: 32rem; letter-spacing: -.012em;
}
.hero .btnrow { margin-top: 2.1rem; }
.hero .btn--ghost { color: #fff; border-color: rgba(255,255,255,.6); backdrop-filter: blur(4px); }
.hero .btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.hero__strap {
  margin-top: 1.75rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,.22);
  font-size: .875rem; color: #a7b0ab;
}

/* ---------- assurance strip --------------------------------------
   Directly under the hero: the four things a contractor needs to know
   before he will consider sending work. Every one is a confirmed fact. */

.assure { background: var(--ink); border-top: 1px solid var(--line-dark); }
.assure__list {
  display: grid; gap: 1px; list-style: none; margin: 0; padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  background: var(--line-dark);
}
.assure__list li {
  background: var(--ink);
  padding: 1.6rem 1.5rem;
  display: flex; flex-direction: column; gap: .3rem;
}
.assure__list b {
  font-family: var(--display);
  font-size: 1.08rem; font-weight: 700; color: #fff; letter-spacing: -.02em;
}
.assure__list span { font-size: .88rem; color: #a9b3ae; line-height: 1.45; }
.assure__list li::before {
  content: ""; width: 1.75rem; height: 3px; border-radius: 2px;
  background: var(--brand); margin-bottom: .55rem;
}

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

.cards {
  display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
  counter-reset: card;
}
.cards--wide { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.cards--brands { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); counter-reset: none; }

.card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.75rem 1.6rem 1.5rem;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease),
              transform .25s var(--ease);
}
.card:hover {
  border-color: rgba(110,173,68,.55);
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}

/* Index numbers come from a CSS counter, so no markup carries them. */
.cards:not(.cards--brands) .card::before {
  counter-increment: card;
  content: counter(card, decimal-leading-zero);
  display: block;
  font-family: var(--display);
  font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  color: var(--brand); margin-bottom: .9rem;
}
.card h2, .card h3 { margin-bottom: .5rem; font-size: 1.1875rem; }
.card h2 a, .card h3 a { text-decoration: none; color: var(--ink); }
.card:hover h2 a, .card:hover h3 a { color: var(--brand-text); }

/* Whole card clickable, without changing the markup. */
.card h2 a::after, .card h3 a::after { content: ""; position: absolute; inset: 0; }

.card p { margin-bottom: .5rem; font-size: .96rem; color: var(--ink-2); line-height: 1.6; }
.card p:last-child { margin-bottom: 0; }
.card .arrow { position: relative; z-index: 1; font-size: .9rem; }

.cards--brands .card { padding: 1.5rem 1.5rem 1.35rem; }
.cards--brands .card h2 { font-size: 1.05rem; letter-spacing: .01em; text-transform: uppercase; }

/* ---------- flow -------------------------------------------------- */

.flow {
  display: flex; flex-wrap: wrap; gap: .5rem;
  list-style: none; margin: 0 0 1.5rem; padding: 0; counter-reset: step;
}
.flow li { flex: 1 1 9rem; display: flex; }
.flow span {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  width: 100%; min-height: 6.5rem; padding: 1.1rem 1rem 1rem;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--display);
  font-weight: 650; font-size: 1rem; color: var(--ink);
  letter-spacing: -.02em;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.flow span::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute; top: .85rem; left: 1rem;
  font-size: .72rem; letter-spacing: .1em; color: var(--brand);
}
.flow li:hover span { border-color: rgba(110,173,68,.6); background: var(--brand-light); }
.flow__cap { max-width: 50rem; color: var(--ink-2); }

/* ---------- lists ------------------------------------------------- */

.ticks {
  list-style: none; padding: 0;
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.ticks li { position: relative; padding-left: 1.9rem; color: var(--ink-2); }
.ticks li::before {
  content: ""; position: absolute; left: .2rem; top: .55em;
  width: .58rem; height: .32rem;
  border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
}

.scenarios { list-style: none; padding: 0; display: grid; gap: 1.15rem; }
.scenarios li { position: relative; padding: .1rem 0 .1rem 1.5rem; color: var(--ink-2); }
.scenarios li::before {
  content: ""; position: absolute; left: 0; top: .55em; bottom: .55em;
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--brand), rgba(110,173,68,.15));
}

.why {
  list-style: none; padding: 0;
  display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.why li { border-top: 1px solid var(--line); padding-top: 1.1rem; }
.why h3 { margin-bottom: .35rem; }
.why p { margin: 0; color: var(--ink-2); font-size: .96rem; }

.facts {
  list-style: none; padding: 0;
  display: grid; gap: 1.75rem 2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.facts li { border-top: 2px solid var(--brand); padding-top: 1rem; }
.facts h3 { margin-bottom: .2rem; font-size: 1.0625rem; }
.facts p { margin: 0; color: var(--ink-2); font-size: .94rem; }

.brandlist {
  list-style: none; padding: 0; margin: 0 0 1.35rem;
  display: flex; flex-wrap: wrap; gap: .55rem;
}
.brandlist li {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 100px; padding: .5rem 1.05rem;
  font-weight: 600; font-size: .9rem; color: var(--ink);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.brandlist li:hover { border-color: var(--brand); color: var(--brand-text); }

/* Tiles sized for a logo image; they fall back to the brand name set as a
   wordmark when no logo file is present, so the row stays even either way. */
.brandlist--tiles { gap: .65rem; }
.brandlist--tiles .brandtile {
  display: grid; place-items: center;
  min-width: 8.5rem; height: 3.4rem; padding: .5rem .9rem;
  border-radius: var(--r-sm);
}
.brandtile img {
  max-height: 2.2rem; max-width: 7rem; height: 2.2rem; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .72;
  transition: filter .25s var(--ease), opacity .25s var(--ease);
}
.brandlist--tiles li:hover img { filter: grayscale(0); opacity: 1; }
.brandtile span { font-weight: 700; letter-spacing: .01em; font-size: .92rem; }

.card--brand .card__logo {
  display: flex; align-items: center; height: 2.6rem; margin-bottom: 1rem;
}
.card--brand .card__logo img { max-height: 2.4rem; max-width: 9rem; object-fit: contain; }
.card--brand .card__logo span {
  font-family: var(--display); font-size: 1.05rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--brand-text);
}
.cards--brands .card::before { content: none; }

.warranty {
  background: var(--brand-light);
  border: 1px solid rgba(110,173,68,.35);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-sm);
  padding: 1rem 1.2rem; margin-top: 1.75rem;
}

/* ---------- cases and gallery ------------------------------------- */

.cases {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.case {
  background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.6rem 1.5rem;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.case:hover { border-color: rgba(110,173,68,.5); box-shadow: var(--shadow); }
.case h3 { margin-bottom: .35rem; }
.case__ctx {
  font-size: .82rem; font-weight: 650; color: var(--brand-text);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: .8rem; line-height: 1.4;
}
.case p:last-child { margin: 0; font-size: .95rem; color: var(--ink-2); }

.gallery {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(18.5rem, 1fr));
}
.shot {
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; background: var(--paper);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease),
              transform .25s var(--ease);
}
.shot:hover { border-color: rgba(110,173,68,.5); box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.shot__img {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; background: var(--paper-3);
}
.shot__cap { padding: 1.2rem 1.35rem 1.35rem; }
.shot { display: flex; flex-direction: column; }
.shot__cap { flex: 1; }
.shot__cap h2 { font-size: 1.02rem; margin-bottom: 0; line-height: 1.35; }
.shot__ctx {
  font-size: .82rem; font-weight: 650; color: var(--brand-text);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem;
}
.shot__cap p:last-child { margin: 0; font-size: .94rem; color: var(--ink-2); }

/* ---------- brands intro pairing ----------------------------------- */
/* A real teardown photo next to the /brands/ intro text — see eqintro
   in pages.js. Proves overhaul capability without a logo grid. */

.eqintro {
  display: grid; align-items: center; gap: var(--gap);
  grid-template-columns: 1.15fr 1fr;
}
.eqintro__photo { margin: 0; }
.eqintro__img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r); box-shadow: var(--shadow-lift);
  aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-3);
}
.eqintro__photo figcaption {
  margin-top: .6rem; font-size: .85rem; color: var(--ink-3);
}
@media (max-width: 56rem) {
  .eqintro { grid-template-columns: 1fr; }
  .eqintro__photo { order: -1; }
}

/* ---------- equipment tabs ----------------------------------------- */
/* Interactive 3-tab equipment grid on /brands/, replacing the old static
   card--brand grid. Built from layout.js#equipmentTabs(). No JS required:
   each label wraps its own radio input, so the native radiogroup gives
   click and arrow-key switching for free; :has() shows the matching
   panel. site.js upgrades the group into a proper ARIA tablist when JS
   is available — see "equipment tabs" in site.js. */

.eqtabs__nav {
  display: flex; flex-wrap: wrap; gap: .6rem;
  list-style: none; margin: 0 0 1.75rem; padding: 0;
}
.eqtabs__btn {
  position: relative;
  display: flex; flex-direction: column; gap: .15rem;
  padding: .75rem 1.15rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; user-select: none;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.eqtabs__btn input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.eqtabs__btn:has(input:focus-visible) {
  outline: 3px solid var(--brand); outline-offset: 2px;
}
.eqtabs__btnlabel {
  font-family: var(--display); font-weight: 700; font-size: .96rem;
  letter-spacing: -.01em; color: var(--ink);
}
.eqtabs__btnsub { font-size: .8rem; color: var(--ink-3); }
.eqtabs__btn:hover { border-color: rgba(110,173,68,.55); }
.eqtabs__btn:has(input:checked) {
  background: var(--ink); border-color: var(--ink);
}
.eqtabs__btn:has(input:checked) .eqtabs__btnlabel { color: #fff; }
.eqtabs__btn:has(input:checked) .eqtabs__btnsub { color: #a9b3ae; }

/* Mobile only: three full-width buttons stack and eat ~240px of vertical
   space before any content shows. Turn the row into a horizontal scroller
   instead — same markup, same desktop layout, just doesn't wrap. */
@media (max-width: 40rem) {
  .eqtabs__nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    margin-bottom: 1.25rem;
    padding-bottom: .5rem;
    scrollbar-width: none;
  }
  .eqtabs__nav::-webkit-scrollbar { display: none; }
  .eqtabs__btn {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }
}

/* Panel switching. The :first-of-type rule is the fallback for browsers
   without :has(); every browser that ships :has() also gets the real
   per-tab switch from the rules below it. */
.eqtabs__panel { display: none; }
.eqtabs__panel:first-of-type { display: block; }
.eqtabs:has(input:checked) .eqtabs__panel { display: none; }
.eqtabs:has(input[value="core"]:checked) .eqtabs__panel[data-panel="core"],
.eqtabs:has(input[value="industrial"]:checked) .eqtabs__panel[data-panel="industrial"],
.eqtabs:has(input[value="hvac"]:checked) .eqtabs__panel[data-panel="hvac"] {
  display: block;
}

.eqgrid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
}
.eqcard {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  background: #f4f5f7;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: .9rem .9rem 1.1rem;
  overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.eqcard:hover, .eqcard:focus-within { border-color: rgba(110,173,68,.5); box-shadow: var(--shadow-lift); transform: translateY(-2px); }

.eqcard__badge {
  align-self: flex-start;
  display: flex; align-items: center; min-height: 1.6rem;
  margin-bottom: .75rem; padding: .3rem .55rem;
  background: var(--paper); border-radius: var(--r-sm);
  box-shadow: var(--shadow);
}
.eqcard__badge img { max-height: 1.35rem; max-width: 6rem; height: 1.35rem; width: auto; object-fit: contain; }
.eqcard__badge span {
  font-family: var(--display); font-size: .74rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--brand-text);
}

.eqcard__media {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 4 / 3;
  background: #fff; border-radius: var(--r-sm);
}
.eqcard__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.eqcard__pending {
  display: flex; align-items: center; justify-content: center;
  width: 80%; height: 65%;
  border: 1.5px dashed var(--line); border-radius: var(--r-sm);
}
.eqcard__pending span { font-size: .78rem; color: var(--ink-3); font-style: italic; }

/* Hover state: smooth dark overlay revealing the technical caption. */
.eqcard__overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.1rem 1.15rem;
  background: rgba(0, 0, 0, .8);
  color: #fff;
  opacity: 0; transition: opacity .25s var(--ease);
}
.eqcard:hover .eqcard__overlay, .eqcard:focus-within .eqcard__overlay { opacity: 1; }
.eqcard__type {
  margin: 0 0 .3rem; font-family: var(--display); font-weight: 700;
  font-size: .92rem; letter-spacing: -.01em; color: #fff;
}
.eqcard__cap { margin: 0; font-size: .86rem; line-height: 1.45; color: #e7e9e6; }

/* Touch devices have no hover, so the caption stays visible instead of
   hiding behind an overlay only a mouse can trigger. */
@media (hover: none) {
  .eqcard { padding-bottom: 0; }
  .eqcard__overlay {
    position: static; opacity: 1;
    background: transparent; color: var(--ink);
    padding: .85rem .1rem .1rem;
  }
  .eqcard__type { color: var(--ink); }
  .eqcard__cap { color: var(--ink-2); }
}

/* ---------- partner tiers ----------------------------------------- */

.tiers2 {
  list-style: none; padding: 0; margin: 0 0 1.5rem;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.tiers2 li {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.6rem 1.5rem;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.tiers2 li:hover { border-color: rgba(110,173,68,.55); box-shadow: var(--shadow); }
.tiers2__n {
  display: block; font-family: var(--display);
  font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  color: var(--brand); margin-bottom: .8rem;
}
.tiers2 h3 { margin-bottom: .4rem; }
.tiers2 p { margin: 0; font-size: .95rem; color: var(--ink-2); }

/* The failure-to-operation chain runs to nine steps, so it wraps to a
   second row rather than squeezing each one unreadably thin. */
.flow--chain li { flex: 1 1 7.5rem; }
.flow--chain span { min-height: 5rem; font-size: .92rem; }

/* ---------- work slider ------------------------------------------- */

/* A scroll-snap rail, not a JavaScript carousel: it swipes natively on a
   phone, scrolls with a trackpad, tabs with a keyboard, and still works
   with JS off. The arrows are an enhancement on top. */
.slider { position: relative; }
.slider__track {
  display: flex; gap: 1rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: .25rem .25rem 1.25rem;
  margin-inline: -.25rem;
  list-style: none;
  scrollbar-width: none;
}
.slider__track::-webkit-scrollbar { display: none; }

.slide {
  position: relative; flex: 0 0 auto;
  width: clamp(15rem, 24vw, 19rem);
  scroll-snap-align: start;
  border-radius: var(--r); overflow: hidden;
  background: var(--paper-3);
  box-shadow: var(--shadow);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.slide:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.slide img {
  display: block; width: 100%; aspect-ratio: 3 / 4;
  object-fit: cover;
}
.slide figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 3.5rem 1.15rem 1.15rem;
  color: #fff; font-size: .95rem; font-weight: 600; line-height: 1.35;
  letter-spacing: -.012em;
  background: linear-gradient(0deg, rgba(16,22,20,.92) 0%,
                                    rgba(16,22,20,.72) 45%,
                                    rgba(16,22,20,0) 100%);
}

.slider__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-top: .5rem;
}
.slider__nav { display: flex; gap: .5rem; }
.slider__btn {
  width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); cursor: pointer;
  font-size: 1.1rem; line-height: 1;
  transition: background .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .2s var(--ease);
}
.slider__btn:hover:not(:disabled) {
  background: var(--ink); border-color: var(--ink); color: #fff; transform: translateY(-2px);
}
.slider__btn:disabled { opacity: .35; cursor: default; }
.band--alt .slider__btn { background: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  .slider__track { scroll-behavior: auto; }
  .slide:hover { transform: none; }
}

/* ---------- emergency page ---------------------------------------- */

.emergency { padding-block: clamp(3rem, 7vw, 5rem); }
.emergency h1 { margin-bottom: .3em; }
.emergency__sub { font-size: clamp(1.1rem, 2.1vw, 1.3rem); color: #b9c2be; max-width: 42rem; }
.emergency__actions {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin: 2.5rem 0 1.5rem;
}
.bigcall, .bigwa {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .35rem; padding: 2rem 1rem; border-radius: var(--r);
  text-decoration: none; text-align: center;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.bigcall { background: var(--alert); color: #fff; box-shadow: 0 18px 40px -22px rgba(179,32,15,.9); }
.bigcall:hover { background: #c9250f; color: #fff; transform: translateY(-2px); }
.bigwa { background: var(--brand); color: #0d1a08; box-shadow: 0 18px 40px -22px rgba(110,173,68,.9); }
.bigwa:hover { background: #7cbd4d; color: #0d1a08; transform: translateY(-2px); }
.bigcall__label, .bigwa__label {
  text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; font-weight: 700;
}
.bigcall__num, .bigwa__num {
  font-family: var(--display);
  font-size: clamp(1.55rem, 4.6vw, 2.15rem); font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.emergency__note { color: #a9b3ae; font-size: .9375rem; }

/* The page's two calls to action settle, then the same dark surface
   carries straight on into proof that the rest of the job is covered
   too — no hard cut to a new panel for what is still one urgent
   thought. Text stays on the emergency palette; ticks get a --dark
   pass since the light-page checkmark and copy colours vanish here. */
.emergency__resolve {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line-dark);
}
.emergency__resolve h2 { color: #fff; margin-bottom: .6em; }
.emergency__resolve p { color: #b9c2be; }
.emergency__resolve strong { color: #fff; }
.emergency__resolve a { color: var(--brand-accent); }
.ticks--dark li { color: #b9c2be; }
.ticks--dark li::before { border-left-color: var(--brand-accent); border-bottom-color: var(--brand-accent); }

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

.contact { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .contact { grid-template-columns: 21rem minmax(0, 1fr); } }

/* minmax(0,1fr) so the value column can actually shrink — a bare 1fr
   refuses to go below its content width and pushed the page sideways on
   a phone. Under 30rem it stacks entirely. */
.deets { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .6rem 1.15rem; margin-bottom: 2rem; }
@media (max-width: 30rem) {
  .deets { grid-template-columns: 1fr; gap: .15rem; }
  .deets dd { margin-bottom: .9rem; }
}
.deets dt {
  font-weight: 700; color: var(--ink-3); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .1em; padding-top: .2rem;
}
.deets dd { margin: 0; }

.map { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.map__load {
  display: block; width: 100%; padding: 2.75rem 1rem;
  background: var(--paper-2); border: 0; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--ink);
  transition: background .2s var(--ease);
}
.map__load:hover { background: var(--brand-light); }
.map__note { font-size: .8125rem; color: var(--ink-3); margin: 0; padding: .7rem 1rem; }
.map iframe { display: block; width: 100%; height: 21rem; border: 0; }

/* ---------- forms ------------------------------------------------- */

.contact__form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow);
}
.field { margin-bottom: 1.2rem; }
.field label, .field legend { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .4rem; }
fieldset.field { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 1rem 1.1rem; }
fieldset.field legend { padding-inline: .45rem; margin-bottom: 0; }
.req { color: var(--alert); }

input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  width: 100%; padding: .8rem .85rem; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1px solid #b6bdb9; border-radius: var(--r-sm);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: #8c948f; }
input:focus, select:focus, textarea:focus {
  border-color: var(--brand-text);
  box-shadow: 0 0 0 3px rgba(110,173,68,.18);
  outline: none;
}
textarea { resize: vertical; }

.opt { display: flex; align-items: flex-start; gap: .6rem; font-weight: 400; margin-bottom: .45rem; }
.opt input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .22rem; accent-color: var(--brand-text); }

.grid2 { display: grid; gap: 0 1.1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.hp { position: absolute; left: -9999px; }

/* Two long, otherwise bare lists on /services/ — a real site photo
   anchors each so "commercial" and "industrial" read as two places,
   not just two headings. */
.expertise {
  display: grid; gap: var(--gap) 2.5rem; margin-top: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}
.expertise__shot { margin: 0 0 1.1rem; }
.expertise__img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r); box-shadow: var(--shadow);
  aspect-ratio: 16 / 10; object-fit: cover; background: var(--paper-3);
}
.expertise__col h3 { margin-bottom: .8rem; }

/* Five entry points that combine rather than run in sequence — no
   ordinal numbering, unlike .flow, and each one links through. */
.chainlinks {
  list-style: none; padding: 0; margin: 0 0 1.75rem;
  display: flex; flex-wrap: wrap; gap: .6rem;
}
.chainlinks a {
  display: inline-flex; align-items: center;
  padding: .6rem 1.15rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper);
  font-family: var(--display); font-weight: 650; font-size: .92rem;
  color: var(--ink); text-decoration: none;
  transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.chainlinks a:hover { border-color: var(--brand); background: var(--brand-light); color: var(--brand-text); }

.urgent {
  background: #fdeceb; border: 1px solid rgba(179,32,15,.25);
  border-left: 3px solid var(--alert);
  padding: 1.15rem 1.25rem; margin-bottom: 1.6rem; border-radius: var(--r-sm);
}
.urgent p:last-child { margin-bottom: 0; }

.tiers { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.tier { border-top: 2px solid var(--brand); padding-top: 1.35rem; }
.tier h2 { font-size: clamp(1.3rem, 2.1vw, 1.7rem); letter-spacing: -.025em; margin-bottom: .6rem; }
.tier p { color: var(--ink-2); }

.prose h2 { margin-top: 2.5rem; font-size: 1.4rem; }
.prose h2:first-child { margin-top: 0; }
.prose li { color: var(--ink-2); margin-bottom: .35em; }

/* ---------- photography ------------------------------------------- */

.feature { display: grid; gap: var(--gap); align-items: center; }
@media (min-width: 64rem) { .feature { grid-template-columns: 1fr 1fr; } }
.feature--top { align-items: start; }
.feature__shot {
  display: block; width: 100%; border-radius: var(--r);
  aspect-ratio: 4 / 3; object-fit: cover;
  box-shadow: var(--shadow-lift);
}

.svcshot { margin: 0 0 1.75rem; }
.svcshot img {
  display: block; width: 100%; border-radius: var(--r);
  aspect-ratio: 16 / 9; object-fit: cover;
}
.svcshot figcaption {
  font-size: .85rem; color: var(--ink-3); padding-top: .65rem;
  border-top: 1px solid var(--line); margin-top: .65rem;
}

/* ---------- WhatsApp button --------------------------------------- */

.wa {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 70;
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: #25d366; color: #fff;
  box-shadow: 0 6px 24px rgba(0,0,0,.3);
  transition: transform .2s var(--ease), background .2s var(--ease),
              opacity .18s ease, visibility .18s ease;
}
.wa svg { width: 1.95rem; height: 1.95rem; fill: currentColor; }
.wa:hover { background: #1fbb59; color: #fff; transform: scale(1.06); }

/* The floating button must never sit on top of the form's submit
   button. On a narrow screen the submit runs full width, so a
   right-hand gutter makes overlap geometrically impossible with no
   JavaScript involved. site.js additionally fades the button while the
   submit is on screen, but the layout does not depend on that. */
@media (max-width: 40rem) {
  .wa { width: 3.1rem; height: 3.1rem; right: .85rem; bottom: .85rem; }
  .wa svg { width: 1.65rem; height: 1.65rem; }
  .wa[data-tucked="true"] { opacity: 0; visibility: hidden; pointer-events: none; }
  .field--submit { padding-right: 4rem; }
  .field--submit .btn--wide { margin-bottom: 1.5rem; }
}

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

.site-foot { padding-block: clamp(2.75rem, 5vw, 4.25rem) 0; font-size: .9375rem; color: #a9b3ae; }
.site-foot__grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.site-foot__h {
  font-family: var(--body);
  font-size: .72rem; color: #fff; text-transform: uppercase;
  letter-spacing: .16em; font-weight: 700; margin-bottom: 1.25rem;
}
.site-foot__list { list-style: none; padding: 0; }
.site-foot__list li { margin-bottom: .55rem; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: #fff; text-decoration: underline; }
.site-foot__addr strong, .site-foot__hours strong { color: #fff; }
.site-foot__bee {
  display: inline-block; color: #fff; font-weight: 600; font-size: .82rem;
  border: 1px solid var(--line-dark); border-radius: 100px; padding: .35rem .9rem;
}
.site-foot__sister { margin-top: 1.5rem; }
.site-foot__sister strong { color: #fff; }
.site-foot__base {
  border-top: 1px solid var(--line-dark); margin-top: clamp(2.25rem, 4vw, 3.25rem); padding-block: 1.5rem;
}
.site-foot__base p { margin: 0; font-size: .84rem; color: #7f8884; }

/* ---------- motion ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .btn:hover, .card:hover, .shot:hover, .wa:hover,
  .bigcall:hover, .bigwa:hover, .eqcard:hover { transform: none; }
}

/* ---------- print ------------------------------------------------- */

@media print {
  .ebar, .nav, .navtoggle, .wa, .band--cta, .skip, .map { display: none !important; }
  body { color: #000; font-size: 11pt; background: #fff; }
  .site-head { position: static; }
  .hero, .band--problem, .emergency, .site-foot, .band--cta {
    background: #fff !important; color: #000 !important;
  }
  .hero h1, .band--problem h2, .emergency h1, .site-foot__h,
  .site-foot__addr strong, .site-foot__hours strong { color: #000 !important; }
  .card, .case, .shot { break-inside: avoid; box-shadow: none; }
  a { color: #000; text-decoration: underline; }
}