/* ==================================================================
   01 — PLUMBING & HEATING
   Warm, material-led. Stone/brass palette, humanist serif headings
   over a clean grotesque body, asymmetric grid, slow reveals.
   Design surface is 390px; desktop rules live in min-width queries.
================================================================== */

:root {
  /* Colour — warm stone / brass */
  --color-bg: #f3eee6;
  --color-panel: #fbf7f0;
  --color-ink: #2b2420;
  --color-ink-muted: #6e6255;
  --color-accent: #90632b;
  --color-accent-soft: #eadfc8;
  --color-border: #e1d6c4;
  --color-success: #3c6b3e;
  --color-error: #a13f2c;

  /* RGB triplets of the colours above, for rgba() overlays/shadows/
     glows that need a translucent version of a themed colour. Keep
     each one in sync with its hex value above — every rgba(var(--x-rgb), a)
     in this file resolves through one of these five. */
  --color-bg-rgb: 243, 238, 230;
  --color-panel-rgb: 251, 247, 240;
  --color-ink-rgb: 43, 36, 32;
  --color-accent-rgb: 144, 99, 43;
  --color-highlight-rgb: 255, 255, 255;

  /* Type */
  --font-heading: "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Motion */
  --transition-fast: 200ms;
  --transition-base: 350ms;
  --transition-slow: 600ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --content-max: 1120px;
  --callbar-height: 76px;

  /* Breakpoints — CSS custom properties cannot be referenced inside
     @media conditions, so these can't be wired into the media queries
     below directly. Listed here as the canonical values so a redesign
     changes one place conceptually, even though each @media rule still
     has to repeat the literal number: 420px, 640px, 700px, 860px. */
}

/* ------------------------------------------------------------------
   ALTERNATE PALETTE — cool slate / steel-blue direction.
   To retheme: comment out the colour block in :root above and
   uncomment this one. Everything else (type, spacing, motion) is
   untouched, so the retheme stays coherent.
------------------------------------------------------------------
:root {
  --color-bg: #eef1f3;
  --color-panel: #ffffff;
  --color-ink: #1e2a32;
  --color-ink-muted: #5b6b74;
  --color-accent: #2e6f8e;
  --color-accent-soft: #d8e6ec;
  --color-border: #d2dbdf;
  --color-success: #2f6f52;
  --color-error: #a13f2c;

  --color-bg-rgb: 238, 241, 243;
  --color-panel-rgb: 255, 255, 255;
  --color-ink-rgb: 30, 42, 50;
  --color-accent-rgb: 46, 111, 142;
  --color-highlight-rgb: 255, 255, 255;
}
------------------------------------------------------------------- */

/* ------------------------------------------------------------------
   Reset
------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  padding-bottom: calc(var(--callbar-height) + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
  display: block;
}

h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

.wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 640px) {
  .wrap {
    padding-inline: var(--space-7);
  }
}

/* ------------------------------------------------------------------
   Accessibility helpers
------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-3);
  z-index: 100;
  background: var(--color-ink);
  color: var(--color-bg);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  transition: top var(--transition-fast) var(--ease-out);
}

.skip-link:focus {
  top: var(--space-3);
}

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

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

/* ------------------------------------------------------------------
   Header
------------------------------------------------------------------- */
.site-header {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-panel);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.logo {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.01em;
}

.header-call {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  white-space: nowrap;
}

.header-call:hover,
.header-call:focus-visible {
  border-color: var(--color-accent);
}

.icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* ------------------------------------------------------------------
   Media placeholders — CSS-only, aspect-ratio reserved, labelled
------------------------------------------------------------------- */
.media {
  position: relative;
  aspect-ratio: var(--ar, 4 / 3);
  background-color: var(--color-panel);
  background-image: radial-gradient(120% 120% at 12% 12%, rgba(var(--color-highlight-rgb), 0.55), transparent 60%),
    linear-gradient(135deg, var(--color-accent-soft), var(--color-panel) 78%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  overflow: hidden;
}

/* Richer, textured treatment reserved for the hero image only, so
   the diagonal pattern reads as a signature detail, not a repeated
   template tile. */
.media.media--rich {
  background-image: repeating-linear-gradient(
      135deg,
      rgba(var(--color-ink-rgb), 0.035) 0px,
      rgba(var(--color-ink-rgb), 0.035) 1px,
      transparent 1px,
      transparent 12px
    ),
    radial-gradient(120% 120% at 12% 12%, rgba(var(--color-highlight-rgb), 0.65), transparent 60%),
    linear-gradient(135deg, var(--color-accent-soft), var(--color-panel) 75%);
}

.media__icon {
  width: 34%;
  max-width: 130px;
  color: var(--color-accent);
  opacity: 0.4;
}

.media__label {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  font-size: 0.7rem;
  color: var(--color-ink-muted);
  background: rgba(var(--color-panel-rgb), 0.85);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  line-height: 1.3;
}

/* ------------------------------------------------------------------
   Reveal motion (cross-fade on scroll, scale-and-settle on load)

   No-JS / no-JS-yet safety: content is visible by default. The
   hidden "about to reveal" state only applies once html.js is
   present, which script.js's inline head snippet adds synchronously
   before first paint. If JavaScript never runs (or is blocked), the
   html.js class never exists, so these selectors never match and
   every section, the FAQ and the contact form are fully visible and
   usable from the first render.
------------------------------------------------------------------- */
html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
}

.reveal {
  transition: opacity var(--transition-slow) var(--ease-out),
    transform var(--transition-slow) var(--ease-out);
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

html.js .reveal-on-load {
  opacity: 0;
  transform: scale(1.06);
}

.reveal-on-load {
  transition: opacity var(--transition-base) var(--ease-out),
    transform var(--transition-base) var(--ease-out);
}

html.js .reveal-on-load.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Hero text: settles in just after the hero image, staggered per
   element. Kept on --transition-base (not --transition-slow) and
   with tighter stagger steps than the rest of the page, since this
   group can gate LCP — the hero heading is the likely LCP element. */
html.js .reveal-on-load-text {
  opacity: 0;
  transform: translateY(14px);
}

.reveal-on-load-text {
  transition: opacity var(--transition-base) var(--ease-out),
    transform var(--transition-base) var(--ease-out);
}

html.js .reveal-on-load-text.is-visible {
  opacity: 1;
  transform: none;
}

.hero-copy > :nth-child(1) { transition-delay: 40ms; }
.hero-copy > :nth-child(2) { transition-delay: 90ms; }
.hero-copy > :nth-child(3) { transition-delay: 140ms; }
.hero-copy > :nth-child(4) { transition-delay: 190ms; }
.hero-copy > :nth-child(5) { transition-delay: 240ms; }

/* Staggered entrance within card groups */
.services-primary > .reveal:nth-child(1) { transition-delay: 0ms; }
.services-primary > .reveal:nth-child(2) { transition-delay: 100ms; }
.work-grid > .reveal:nth-child(1) { transition-delay: 0ms; }
.work-grid > .reveal:nth-child(2) { transition-delay: 100ms; }
.testimonial-grid > .reveal:nth-child(1) { transition-delay: 0ms; }
.testimonial-grid > .reveal:nth-child(2) { transition-delay: 100ms; }
.testimonial-grid > .reveal:nth-child(3) { transition-delay: 200ms; }
.credentials > .reveal:nth-child(1) { transition-delay: 0ms; }
.credentials > .reveal:nth-child(2) { transition-delay: 80ms; }
.credentials > .reveal:nth-child(3) { transition-delay: 160ms; }
.credentials > .reveal:nth-child(4) { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js .reveal-on-load,
  html.js .reveal-on-load-text {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Interactive hover lift — reversible, user-triggered, not an entrance animation */
.service-card,
.work-item .media,
.testimonial,
.faq-item {
  transition: transform var(--transition-fast) var(--ease-out),
    box-shadow var(--transition-fast) var(--ease-out);
}

.service-card:hover,
.testimonial:hover,
.faq-item:hover,
.work-item:hover .media {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -16px rgba(var(--color-ink-rgb), 0.35);
}

.footer-nav a {
  position: relative;
}

.footer-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--color-accent-soft);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-fast) var(--ease-out);
}

.footer-nav a:hover::after,
.footer-nav a:focus-visible::after {
  transform: scaleX(1);
}

/* Reduced motion: remove movement from hover/interactive affordances
   too, not just entrance animation — card lift, button nudge, the
   FAQ +/x rotation and the footer underline sweep all snap to their
   end state instantly instead of animating. */
@media (prefers-reduced-motion: reduce) {
  .service-card,
  .work-item .media,
  .testimonial,
  .faq-item,
  .btn,
  .faq-item summary::after,
  .footer-nav a::after,
  .header-call,
  .contact-info__value {
    transition: none;
  }

  .service-card:hover,
  .testimonial:hover,
  .faq-item:hover,
  .work-item:hover .media,
  .btn-primary:hover,
  .btn-primary:focus-visible,
  .btn-urgent:hover,
  .btn-urgent:focus-visible {
    transform: none;
  }
}

/* ------------------------------------------------------------------
   Hero
------------------------------------------------------------------- */
.hero {
  padding-block: var(--space-5) var(--space-4);
}

.hero .wrap {
  display: grid;
  gap: var(--space-4);
}

.hero-eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.hero-heading {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.9rem, 7vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.hero-tagline {
  margin-top: var(--space-3);
  font-size: 1.02rem;
  color: var(--color-ink-muted);
  max-width: 40ch;
}

.hero-actions {
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero-trust {
  margin-top: var(--space-3);
  font-size: 0.82rem;
  color: var(--color-ink-muted);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform var(--transition-fast) var(--ease-out),
    background var(--transition-fast) var(--ease-out),
    border-color var(--transition-fast) var(--ease-out);
  min-height: 48px;
}

.btn-primary {
  background: var(--color-ink);
  color: var(--color-bg);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-border);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  border-color: var(--color-accent);
}

.hero-media {
  --ar: 16 / 10;
}

@media (min-width: 860px) {
  .hero {
    padding-block: var(--space-8) var(--space-7);
  }

  .hero .wrap {
    grid-template-columns: 5fr 7fr;
    align-items: center;
    gap: var(--space-6);
  }

  .hero-media {
    --ar: 5 / 4;
    margin-block-start: calc(-1 * var(--space-6));
  }
}

/* ------------------------------------------------------------------
   Reassurance strip
------------------------------------------------------------------- */
.reassurance {
  background: var(--color-panel);
  border-block: 1px solid var(--color-border);
}

.reassurance .wrap {
  padding-block: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.88rem;
}

.reassurance strong {
  color: var(--color-accent);
}

/* ------------------------------------------------------------------
   Section shell
------------------------------------------------------------------- */
.section {
  padding-block: var(--space-8);
}

.section-head {
  max-width: 52ch;
  margin-bottom: var(--space-6);
}

.eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.section-heading {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  line-height: 1.2;
}

.section-lede {
  margin-top: var(--space-3);
  color: var(--color-ink-muted);
}

/* ------------------------------------------------------------------
   Services
------------------------------------------------------------------- */
.services-primary {
  display: grid;
  gap: var(--space-5);
}

.service-card {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
}

.service-card__title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
}

.service-card__badge {
  display: inline-block;
  margin-left: var(--space-2);
  vertical-align: middle;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink);
  background: var(--color-accent-soft);
  padding: 0.25em 0.6em;
  border-radius: var(--radius-pill);
}

.service-card__text {
  color: var(--color-ink-muted);
}

.services-secondary {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-ink);
  color: var(--color-bg);
}

.services-secondary__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-panel);
  flex-shrink: 0;
}

.services-secondary__body {
  flex: 1;
  min-width: 12rem;
}

.services-secondary__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent-soft);
  margin-bottom: var(--space-1);
}

.services-secondary__title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
}

.services-secondary__text {
  margin-top: var(--space-1);
  color: rgba(var(--color-bg-rgb), 0.75);
  font-size: 0.92rem;
  max-width: 46ch;
}

.btn-urgent {
  background: var(--color-accent);
  color: var(--color-panel);
}

.btn-urgent:hover,
.btn-urgent:focus-visible {
  transform: translateY(-1px);
}

@media (min-width: 700px) {
  .services-primary {
    grid-template-columns: 1fr 1fr;
  }
}

/* ------------------------------------------------------------------
   Why us
------------------------------------------------------------------- */
.credentials {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, 1fr);
}

.credential {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: 0.9rem;
}

.credential__icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.credential__value {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.credential__label {
  color: var(--color-ink-muted);
}

.token {
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-muted);
}

@media (min-width: 700px) {
  .credentials {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ------------------------------------------------------------------
   Recent work
------------------------------------------------------------------- */
.work-grid {
  display: grid;
  gap: var(--space-5);
}

.work-item {
  display: grid;
  gap: var(--space-3);
}

.work-item .media {
  --ar: 4 / 3;
}

.work-item__headline {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
}

.work-item__result {
  margin-top: var(--space-1);
  font-size: 0.88rem;
  color: var(--color-ink-muted);
}

@media (min-width: 700px) {
  .work-grid {
    grid-template-columns: 7fr 5fr;
    align-items: start;
  }
}

/* ------------------------------------------------------------------
   Testimonials
------------------------------------------------------------------- */
.testimonial-grid {
  display: grid;
  gap: var(--space-5);
}

.testimonial {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-3);
}

.testimonial blockquote {
  margin: 0;
  font-size: 1.02rem;
  font-family: var(--font-heading);
  line-height: 1.5;
}

.testimonial cite {
  font-style: normal;
  color: var(--color-ink-muted);
  font-size: 0.85rem;
}

.testimonial cite::before {
  content: "\2014 ";
}

@media (min-width: 700px) {
  .testimonial-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ------------------------------------------------------------------
   Service area
------------------------------------------------------------------- */
.area .wrap {
  max-width: 68ch;
}

/* ------------------------------------------------------------------
   FAQ
------------------------------------------------------------------- */
.faq .wrap {
  max-width: 800px;
}

.faq-list {
  display: grid;
  gap: var(--space-3);
}

.faq-item {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
}

.faq-item summary {
  cursor: pointer;
  padding-block: var(--space-3);
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-size: 1.2rem;
  color: var(--color-accent);
  transition: transform var(--transition-fast) var(--ease-out);
  flex-shrink: 0;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  padding-block: 0 var(--space-4);
  color: var(--color-ink-muted);
}

/* ------------------------------------------------------------------
   Contact
------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  gap: var(--space-6);
}

.contact-info {
  display: grid;
  gap: 0;
  align-content: start;
}

.contact-info__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.contact-info__item:last-of-type {
  border-bottom: none;
}

.contact-info__icon {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--color-accent);
  flex-shrink: 0;
}

.contact-info__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.contact-info__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.contact-info__value {
  font-size: 1.05rem;
  text-decoration: none;
  font-weight: 600;
}

.contact-info__value:hover,
.contact-info__value:focus-visible {
  color: var(--color-accent);
}

.contact-info__note {
  margin-top: var(--space-4);
  font-size: 0.85rem;
  color: var(--color-ink-muted);
}

.form {
  display: grid;
  gap: var(--space-4);
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field label {
  font-size: 0.85rem;
  font-weight: 600;
}

.field input,
.field textarea {
  font: inherit;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-ink);
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 1px;
}

.field textarea {
  resize: vertical;
  min-height: 7rem;
}

.form-status {
  font-size: 0.9rem;
  min-height: 1.2em;
}

.form-status[data-state="success"] {
  color: var(--color-success);
}

.form-status[data-state="error"] {
  color: var(--color-error);
}

@media (min-width: 860px) {
  .contact-grid {
    grid-template-columns: 5fr 7fr;
  }
}

/* ------------------------------------------------------------------
   Footer
------------------------------------------------------------------- */
.site-footer {
  background: var(--color-ink);
  color: var(--color-bg);
  padding-block: var(--space-7);
}

.footer-grid {
  display: grid;
  gap: var(--space-6);
}

.footer-brand {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
}

.footer-tagline {
  margin-top: var(--space-2);
  color: rgba(var(--color-bg-rgb), 0.7);
  font-size: 0.9rem;
  max-width: 32ch;
}

.footer-nav {
  display: grid;
  gap: var(--space-2);
  font-size: 0.9rem;
}

.footer-nav a {
  text-decoration: none;
  color: rgba(var(--color-bg-rgb), 0.85);
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--color-bg);
}

.footer-meta {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(var(--color-bg-rgb), 0.15);
  font-size: 0.78rem;
  color: rgba(var(--color-bg-rgb), 0.6);
  display: grid;
  gap: var(--space-1);
}

@media (min-width: 700px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr;
  }
}

/* ------------------------------------------------------------------
   Sticky click-to-call bar (mobile pattern; hidden on wide desktop
   where the header call link already covers the job)
------------------------------------------------------------------- */
.call-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  background: var(--color-ink);
  border-top: 3px solid var(--color-accent);
  box-shadow: 0 -8px 24px -12px rgba(var(--color-ink-rgb), 0.4);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.call-bar__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--callbar-height);
  padding-inline: var(--space-4);
  color: var(--color-bg);
  text-decoration: none;
}

.call-bar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-panel);
  flex-shrink: 0;
}

.call-bar__icon .icon {
  width: 1.15rem;
  height: 1.15rem;
}

.call-bar__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  flex: 1;
  min-width: 0;
}

.call-bar__label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent-soft);
}

.call-bar__number {
  font-size: 1.08rem;
  font-weight: 800;
  white-space: nowrap;
}

.call-bar__urgency {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.call-bar__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb), 0.3);
}

.call-bar__urgency-text {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-accent-soft);
  white-space: nowrap;
}

@media (max-width: 420px) {
  .call-bar__urgency-text {
    display: none;
  }
}

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

  body {
    padding-bottom: 0;
  }
}