/* ===========================================================
   Ronaldo's Auto Body — site styles
   Plain CSS, mobile-first. No framework, no build step.

   Dark theme throughout. The darks are the brand's own charcoals
   (taken from the logo), not generic greys, so the palette stays
   locked to the identity. Orange is reserved for things you can
   act on: buttons, links, step numbers, the slider handle.
   =========================================================== */

/* -----------------------------------------------------------
   1. BRAND TOKENS  (safe to tweak)
   ----------------------------------------------------------- */
:root {
  /* Accent — from the logo */
  --orange:        #FE7229;   /* fills, links, anything actionable */
  --orange-bright: #FF8C4D;   /* hover on dark                     */
  --orange-ink:    #A33D0D;   /* orange text on a LIGHT surface    */

  /* Dark palette — the logo charcoal, layered for depth */
  --canvas:    #1A1C1E;   /* main page background            */
  --band:      #141618;   /* deeper alternating section band */
  --surface:   #232629;   /* cards and panels                */
  --surface-2: #2C3034;   /* raised / hover                  */
  --line:      #34383C;   /* hairlines and flat borders      */
  --charcoal:  #393C3F;

  /* Text */
  --text:       #E8E6E4;  /* 13.8:1 on canvas */
  --text-muted: #A5A3A1;  /*  6.8:1 on canvas */
  --ink:        #141618;  /* text ON an orange fill — never white */
  --white:      #FFFFFF;

  /* Type */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --label:   "Barlow Condensed", "Barlow", Arial, sans-serif;

  /* Rhythm */
  --gutter:    1.25rem;
  --maxw:      1180px;
  --maxw-text: 64ch;
  --radius:    4px;
  --fab-h:     4rem;      /* height of the mobile contact bar */

  --shadow-lift: 0 10px 30px rgba(0,0,0,.45);
  --ease: all .2s ease-in-out;
}

/* -----------------------------------------------------------
   2. RESET + BASE
   ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* room for the fixed contact bar so it never covers content */
  padding-bottom: calc(var(--fab-h) + env(safe-area-inset-bottom, 0px));
}

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

a { color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--orange-bright); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: 0.025em;   /* heavy uppercase needs air, not negative tracking */
  color: var(--white);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 6.2vw, 3.35rem); text-transform: uppercase; line-height: 1.04; }
h2 { font-size: clamp(1.75rem, 6.5vw, 2.75rem); text-transform: uppercase; }
h3 { font-size: 1.3rem; letter-spacing: 0.01em; }
h4 { font-size: 1.0625rem; font-weight: 700; }

p { margin: 0 0 1.1em; max-width: var(--maxw-text); }
ul, ol { padding-left: 1.15em; }
li { margin-bottom: .4em; }

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

.skip {
  position: absolute; left: -9999px;
  background: var(--orange); color: var(--ink);
  padding: .75rem 1rem; font-weight: 700; z-index: 200;
}
.skip:focus { left: .5rem; top: .5rem; }

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

/* -----------------------------------------------------------
   3. LAYOUT HELPERS
   ----------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: 3.25rem; background: var(--canvas); }
.section--tight { padding-block: 2.25rem; }
/* Alternating bands stay dark — they only shift depth, never lighten. */
.section--band  { background: var(--band); }
.section--deep  { background: var(--band); }

.lede { font-size: 1.1875rem; line-height: 1.55; color: var(--text-muted); }

/* A stencilled label, like a part number on a shop shelf.
   Deliberately NOT orange: orange is kept for things you can act on. */
.eyebrow {
  font-family: var(--label);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 .85rem;
  display: block;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.75rem; height: 3px;
  margin-right: .6rem;
  vertical-align: middle;
  position: relative; top: -2px;
  background: var(--orange);
}

/* An H3 doing subheading duty under an H2 */
.section__sub {
  font-family: var(--body); font-weight: 500;
  font-size: 1.1875rem; line-height: 1.5;
  letter-spacing: 0; text-transform: none;
  color: var(--text-muted); max-width: var(--maxw-text);
  margin-top: -.25rem;
}

.h2--intro { font-size: clamp(1.5rem, 3.6vw, 2.1rem); line-height: 1.1; }

/* -----------------------------------------------------------
   4. SIGNATURE: the hazard stripe
   Shop-floor safety striping. Used once, under the header, so it
   reads as identity rather than competing with the CTAs.
   ----------------------------------------------------------- */
.stripe {
  height: 6px;
  background: repeating-linear-gradient(
    45deg,
    var(--orange) 0 14px,
    var(--ink)   14px 28px
  );
}

/* -----------------------------------------------------------
   5. BUTTONS
   Orange carries NEAR-BLACK text, never white: white on #FE7229
   is 2.75:1 and fails. Ink on orange is 6.2:1 and passes.
   ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3.25rem;
  padding: .8rem 1.4rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; width: 1.2em; height: 1.2em; }

.btn--primary { background: var(--orange); color: var(--ink); }
.btn--primary:hover { background: var(--orange-bright); color: var(--ink); }

/* Secondary CTA: orange outline on dark */
.btn--outline { background: transparent; color: var(--orange); border-color: var(--orange); }
.btn--outline:hover { background: var(--orange); color: var(--ink); }

.btn--ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn--ghost:hover { background: var(--surface-2); color: var(--white); border-color: var(--text-muted); }

.btn--block { width: 100%; }
.btn--lg { min-height: 3.75rem; font-size: 1.1875rem; padding-inline: 1.75rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn-row > .btn { flex: 1 1 14rem; }

/* -----------------------------------------------------------
   6. HEADER
   ----------------------------------------------------------- */
.topbar { background: var(--band); border-bottom: 1px solid var(--line); }
.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
}
.topbar__logo { display: block; flex: none; }
/* The logo files carry ~26% transparent padding above and below the
   artwork. object-fit crops that dead space. Measured, not guessed. */
.topbar__logo img { width: 170px; height: 58px; object-fit: cover; }

.navtoggle {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 2.9rem; padding: .5rem .85rem;
  background: var(--surface); color: var(--text);
  border: 2px solid var(--line); border-radius: var(--radius);
  font-family: var(--label); font-size: 1.0625rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.navtoggle__bars { display: block; width: 1.1rem; height: 2px; background: currentColor; position: relative; }
.navtoggle__bars::before,
.navtoggle__bars::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor;
}
.navtoggle__bars::before { top: -6px; }
.navtoggle__bars::after  { top: 6px; }

.nav { display: none; flex: 0 0 100%; }
.nav[data-open="true"] { display: block; border-top: 1px solid var(--line); }
.nav__list { list-style: none; margin: 0; padding: .5rem 0 1rem; }
.nav__list li { margin: 0; }
.nav__link {
  display: block;
  padding: .9rem .25rem;
  font-family: var(--label);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.nav__link:hover { color: var(--orange); }
.nav__link[aria-current="page"],
.nav__link--section { color: var(--orange); }

.topbar__actions { display: none; }

/* -----------------------------------------------------------
   7. EMERGENCY CONTACT BAR
   Fixed to the bottom on phones. Someone standing at a collision
   scene should never have to scroll to find the phone number.
   ----------------------------------------------------------- */
.fabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 130;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--orange);
  border-top: 2px solid var(--ink);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -6px 20px rgba(0,0,0,.35);
}
.fabbar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: var(--fab-h);
  padding: .5rem .6rem;
  color: var(--ink);                 /* 6.2:1 on orange */
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
  text-align: center;
}
.fabbar__btn + .fabbar__btn { border-left: 2px solid var(--ink); }
.fabbar__btn:hover,
.fabbar__btn:active { background: var(--orange-bright); color: var(--ink); }
.fabbar__btn svg { flex: none; width: 1.25em; height: 1.25em; }

/* -----------------------------------------------------------
   8. HERO + DIRECT CONTACT CARD
   ----------------------------------------------------------- */
.hero { background: var(--canvas); overflow: hidden; }
.hero__inner { padding-block: 2.75rem 3rem; }
.hero__lede { font-size: 1.125rem; color: var(--text-muted); max-width: 46ch; }

.contactcard {
  margin-top: 2.25rem;
  background: var(--surface);
  border: 2px solid var(--orange);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
}
.contactcard__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; margin-bottom: 1rem;
  color: var(--orange);
  border: 2px solid var(--orange);
  border-radius: 50%;
}
.contactcard__icon svg { width: 1.6rem; height: 1.6rem; }
.contactcard h3 { font-size: 1.5rem; margin-bottom: .4em; text-transform: uppercase; }
.contactcard p { color: var(--text-muted); font-size: 1.0625rem; }
.contactcard .btn-row { margin-top: 1.5rem; }
.contactcard .btn-row > .btn { flex: 1 1 100%; }
.contactcard__note {
  margin: 1.1rem 0 0;
  font-family: var(--label); font-size: .9375rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted);
}

/* -----------------------------------------------------------
   9. TRUST BAR
   ----------------------------------------------------------- */
.trustbar { background: var(--band); border-block: 1px solid var(--line); }
.trustbar__inner { display: grid; gap: 0; }
.trustcard { padding: 1.6rem var(--gutter); border-bottom: 1px solid var(--line); }
.trustcard:last-child { border-bottom: 0; }
.trustcard__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; margin-bottom: .85rem;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.trustcard__icon svg { width: 1.6rem; height: 1.6rem; }
.trustcard h3 { font-size: 1.1875rem; margin-bottom: .35em; }
.trustcard p { color: var(--text-muted); font-size: 1rem; margin-bottom: 0; }

/* -----------------------------------------------------------
   10. SERVICE GRID — fully interactive cards
   ----------------------------------------------------------- */
.svcgrid { display: grid; gap: 1.25rem; margin-top: 2rem; }
.svccard {
  position: relative;                /* anchors the stretched link */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.35rem 1.35rem;
  display: flex; flex-direction: column;
  transition: all .2s ease-in-out;
}
.svccard h3 { margin-bottom: .45em; font-size: 1.3rem; color: var(--white); }
.svccard p { color: var(--text-muted); font-size: 1rem; flex: 1; margin-bottom: 1.1rem; }
.svccard__link { color: var(--white); text-decoration: none; }
/* whole card clickable, but the <a> stays a real crawlable link
   whose accessible name is the service, not "View Service Details" */
.svccard__link::after { content: ""; position: absolute; inset: 0; }
.svccard__more {
  font-family: var(--label); font-size: 1rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--orange);
}
.svccard:hover,
.svccard:focus-within {
  transform: translateY(-4px);
  border-color: var(--orange);
  box-shadow: var(--shadow-lift);
}
.svccard:hover .svccard__link { color: var(--orange); }
.svccard:focus-within { outline: 2px solid var(--orange); outline-offset: 2px; }

/* -----------------------------------------------------------
   11. BEFORE / AFTER SLIDER
   ----------------------------------------------------------- */
.ba {
  --pos: 50%;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  touch-action: pan-y;
}
.ba__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ba__img--before {
  position: absolute; inset: 0; height: 100%;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.ba__range {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none; appearance: none;
  background: transparent;
}
.ba__handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--pos);
  width: 3px; margin-left: -1.5px;
  background: var(--orange);
  pointer-events: none;
  z-index: 2;
}
.ba__handle::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 2.75rem; height: 2.75rem;
  transform: translate(-50%, -50%);
  background: var(--orange);
  border: 3px solid var(--ink);
  border-radius: 50%;
}
.ba__range:focus-visible ~ .ba__handle {
  box-shadow: 0 0 0 3px var(--canvas), 0 0 0 7px var(--orange);
}
.ba__tag {
  position: absolute; bottom: .75rem;
  font-family: var(--label); font-size: .875rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .35rem .65rem; border-radius: 2px;
  pointer-events: none;
  transition: opacity .25s ease-in-out;
  z-index: 3;                       /* always above the divider line */
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.ba__tag--before { left: .75rem;  background: var(--ink); color: var(--white); }
.ba__tag--after  { right: .75rem; background: var(--orange);      color: var(--ink); }
/* fade the labels away once the user starts dragging */
.ba.is-active .ba__tag { opacity: 0; }

.ba-figure figcaption { font-size: 1rem; color: var(--text-muted); padding-top: .75rem; }

/* -----------------------------------------------------------
   12. PROCESS STEPS  (step numbers are an orange anchor)
   ----------------------------------------------------------- */
.procwrap { display: grid; gap: 2rem; }
.procsteps { list-style: none; margin: 1.5rem 0 0; padding: 0; }
/* No CSS counters: the step numbers are part of the headings. */
.procstep {
  margin: 0 0 1rem;
  padding: 1.3rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius);
}
.procstep h3 { font-size: 1.1875rem; margin-bottom: .3em; color: var(--white); }
.procstep h3 .procstep__n { color: var(--orange); }
.procstep p { margin-bottom: 0; color: var(--text-muted); font-size: 1rem; }

/* -----------------------------------------------------------
   13. CARDS, PILLARS, NOTES
   ----------------------------------------------------------- */
.grid { display: grid; gap: 1.25rem; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
}
/* Sources are 1600x1067 (3:2). Matching the frame means object-fit has
   nothing to crop, so the full shop floor and paint booth stay in view. */
.card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card__body { padding: 1.25rem; flex: 1; }
.card__body > :last-child { margin-bottom: 0; }
.card h3 { margin-bottom: .4em; color: var(--white); }
.card p { color: var(--text-muted); font-size: 1rem; }

.pillar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--orange);
  border-radius: var(--radius);
  padding: 1.4rem 1.25rem;
}
.pillar h3 { margin-bottom: .4em; font-size: 1.1875rem; color: var(--white); }
.pillar p { color: var(--text-muted); font-size: 1rem; margin-bottom: 0; }

.note {
  border-left: 4px solid var(--orange);
  background: var(--surface);
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius);
}
.note > :last-child { margin-bottom: 0; }
.note h3 { color: var(--white); }
.note p { color: var(--text-muted); }

.ctabox {
  background: var(--surface);
  border: 2px solid var(--orange);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem;
  display: grid; gap: 1.1rem; align-items: center;
}
.ctabox__text { margin: 0; font-size: 1.1875rem; font-weight: 500; color: var(--text); max-width: 52ch; }

.relatedlist { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.relatedlist li { margin: 0; }
.relatedlist a {
  display: inline-block;
  padding: .7rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text); text-decoration: none;
  font-family: var(--label); font-size: 1.0625rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  transition: var(--ease);
}
.relatedlist a:hover { border-color: var(--orange); color: var(--orange); }

.samplenote {
  background: var(--surface);
  border: 1px dashed var(--text-muted);
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}
.samplenote > :last-child { margin-bottom: 0; }
.samplenote strong { color: var(--text); }
code {
  background: var(--surface-2); color: var(--text);
  padding: .1em .35em; border-radius: 3px; font-size: .9em;
}

/* -----------------------------------------------------------
   14. REVIEWS
   ----------------------------------------------------------- */
.reviews { display: grid; gap: 1.25rem; }
.review {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.25rem;
  display: flex; flex-direction: column;
}
.review blockquote {
  margin: 0 0 1rem; padding: 0;
  font-size: 1.0625rem; line-height: 1.55; color: var(--text);
  flex: 1;
}
.review blockquote::before { content: "\201C"; color: var(--orange); font-weight: 700; }
.review blockquote::after  { content: "\201D"; color: var(--orange); font-weight: 700; }
.review__by { font-weight: 600; color: var(--white); font-size: 1rem; }
.review__detail {
  font-family: var(--label); font-size: .875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted);
}
.chip {
  align-self: flex-start;
  display: inline-block;
  margin-bottom: .9rem;
  padding: .2rem .55rem;
  background: var(--surface-2); color: var(--text);
  font-family: var(--label); font-size: .8125rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  border-radius: 2px;
}

/* -----------------------------------------------------------
   15. CONTACT BLOCKS
   ----------------------------------------------------------- */
.deflist { margin: 0; }
.deflist dt {
  font-family: var(--label); font-size: .9375rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
  margin-top: 1.1rem;
}
.deflist dt:first-child { margin-top: 0; }
.deflist dd { margin: .15rem 0 0; color: var(--text); }
.deflist dd a { display: inline-block; padding: .3rem 0; }

.hours { list-style: none; margin: 0; padding: 0; }
.hours li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--line);
  margin: 0;
  color: var(--text);
}
.hours li:last-child { border-bottom: 0; }
.hours b { font-weight: 600; }

address { font-style: normal; line-height: 1.65; margin: 0 0 1rem; color: var(--text); }
address strong { color: var(--white); }
/* the phone number in an address block is a primary tap target */
address a { display: inline-block; padding: .55rem 0; font-weight: 600; }

/* -----------------------------------------------------------
   16. PAGE HEADER (inner pages)
   ----------------------------------------------------------- */
.pagehead { background: var(--band); border-bottom: 1px solid var(--line); }
.pagehead__inner { padding-block: 2.5rem; }
.pagehead h1 { font-size: clamp(2rem, 7vw, 3.1rem); }
.pagehead p { color: var(--text-muted); font-size: 1.125rem; margin-bottom: 0; }

.breadcrumb {
  font-family: var(--label); font-size: .9375rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: .75rem;
}
.breadcrumb a { color: var(--orange); text-decoration: none; display: inline-block; padding: .3rem 0; }
.breadcrumb a:hover { text-decoration: underline; }

/* -----------------------------------------------------------
   17. FINAL CALL-TO-ACTION BAND
   ----------------------------------------------------------- */
.cta-band { background: var(--orange); color: var(--ink); }
.cta-band__inner { padding-block: 2.75rem; }
.cta-band h2 { color: var(--ink); }
.cta-band p { color: #3A2412; font-weight: 500; }
.cta-band .btn--dark { background: var(--ink); color: var(--white); border-color: var(--ink); }
.cta-band .btn--dark:hover { background: var(--canvas); color: var(--white); }
.cta-band .btn--ghost { color: var(--ink); border-color: var(--ink); }
.cta-band .btn--ghost:hover { background: var(--ink); color: var(--white); }

/* -----------------------------------------------------------
   18. FOOTER
   ----------------------------------------------------------- */
.footer { background: var(--band); color: var(--text-muted); font-size: 1rem; border-top: 1px solid var(--line); }
.footer__inner { padding-block: 2.5rem 1.5rem; display: grid; gap: 2rem; }
.footer h2 {
  color: var(--white);
  font-family: var(--label); font-size: 1rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: .75rem;
}
.footer a { color: var(--text); }
.footer a:hover { color: var(--orange); }
.footer__logo img { width: 200px; height: 68px; object-fit: cover; margin-bottom: 1rem; }
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: .15rem; }
.footer__list a { display: inline-block; padding: .7rem 0; }
.footer__area { font-size: .9375rem; color: var(--text-muted); max-width: 36ch; }
.footer__legal {
  border-top: 1px solid var(--line);
  padding-block: 1.25rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  justify-content: space-between;
  font-size: .9375rem;
}
.footer__legal p { margin: 0; max-width: none; }

/* -----------------------------------------------------------
   19. MOTION
   ----------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .5s cubic-bezier(.2,.7,.3,1) both; }
  .rise--2 { animation-delay: .08s; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .svccard:hover { transform: none; }
}

/* -----------------------------------------------------------
   20. LARGER SCREENS
   ----------------------------------------------------------- */
@media (min-width: 40rem) {         /* 640px */
  :root { --gutter: 2rem; }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .reviews { grid-template-columns: repeat(2, 1fr); }
  .svcgrid { grid-template-columns: repeat(2, 1fr); }
  .ctabox { grid-template-columns: 1fr auto; }
  /* stacked, not side by side: a phone number must never wrap mid-number */
  .contactcard .btn-row > .btn { flex: 1 1 100%; }
  .hero__inner { padding-block: 3.5rem; }
}

@media (min-width: 60rem) {         /* 960px — desktop */
  .section { padding-block: 4.5rem; }
  .section--tight { padding-block: 3rem; }

  /* The contact bar is a phone affordance only */
  .fabbar { display: none; }
  body { padding-bottom: 0; }

  .topbar {
    position: sticky; top: 0; z-index: 100;
    box-shadow: 0 1px 0 var(--line);
  }
  .topbar__inner { min-height: 5rem; gap: 2rem; flex-wrap: nowrap; }
  .topbar__logo img { width: 200px; height: 68px; }
  .navtoggle { display: none; }

  .nav { display: block; flex: 0 0 auto; margin-left: auto; }
  .nav[data-open="true"] { border-top: 0; }
  .nav__list { display: flex; gap: 1.15rem; padding: 0; }
  .nav__link {
    padding: .35rem 0;
    border-bottom: 3px solid transparent;
    font-size: 1.0625rem;
  }
  .nav__link[aria-current="page"] { border-bottom-color: var(--orange); }
  .nav__link--section { border-bottom-color: var(--line); }
  .nav__link:hover { border-bottom-color: var(--line); }

  .topbar__actions { display: flex; gap: .6rem; flex: none; }
  .topbar__actions .btn { min-height: 2.9rem; font-size: 1rem; padding-inline: 1.1rem; }

  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .reviews { grid-template-columns: repeat(3, 1fr); }
  .trustbar__inner { grid-template-columns: repeat(3, 1fr); }
  .trustcard {
    border-bottom: 0; border-right: 1px solid var(--line);
    padding-block: 2.25rem;
  }
  .trustcard:first-child { padding-left: 0; }
  .trustcard:last-child { border-right: 0; padding-right: 0; }

  .hero__inner {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 3.5rem;
    align-items: center;
    padding-block: 4.5rem;
  }
  .contactcard { margin-top: 0; padding: 2.25rem 2rem; }

  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
  .split--wide-left { grid-template-columns: 1.3fr .7fr; }
  .procwrap { grid-template-columns: 1.35fr .65fr; gap: 3.5rem; align-items: start; }

  .pagehead__inner { padding-block: 3.75rem; }
  .footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; }
  .cta-band__inner { padding-block: 3.5rem; display: flex; align-items: center; gap: 3rem; justify-content: space-between; }
  .cta-band__inner > div { flex: 1; }
  .cta-band .btn-row { flex: none; }
  .btn-row > .btn { flex: 0 1 auto; }
}

@media (min-width: 75rem) {
  .grid { gap: 1.75rem; }
  .nav__list { gap: 1.5rem; }
  .svcgrid { gap: 1.75rem; }
}

/* -----------------------------------------------------------
   21. PRINT
   ----------------------------------------------------------- */
@media print {
  .fabbar, .nav, .navtoggle, .cta-band { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
}