/* ==========================================================================
   Save Your Appliance, LLC — design system
   Palette sampled from the live savemeqc.com: brand orange #f15a29 (action)
   + brand blue #1c75bc (trust), on the site's existing near-black/grey ramp.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     PALETTE LOCK — every colour below is either a hex sampled directly from
     savemeqc.com, or a shade of one produced by mixing it with #000 / #fff,
     which are themselves palette members. No new hues are introduced.

       #f15a29  brand orange  — the action colour
       #1c75bc  brand blue    — the supporting/trust colour
       #000000 #1a1b1f #313131 #333333 #463939 #666666 #999999
       #cccccc #eeeeee #efefef #f5f5f5 #f7f7f7 #ffffff
     --------------------------------------------------------------------- */

  /* sampled brand hues */
  --orange-500: #f15a29;
  --orange-600: color-mix(in srgb, #f15a29 85%, #000);
  --orange-400: color-mix(in srgb, #f15a29 88%, #fff);
  --orange-100: color-mix(in srgb, #f15a29 12%, #fff);
  --orange-50:  color-mix(in srgb, #f15a29 6%, #fff);

  --blue-600: #1c75bc;
  --blue-700: color-mix(in srgb, #1c75bc 82%, #000);
  --blue-800: color-mix(in srgb, #1c75bc 64%, #000);
  --blue-100: color-mix(in srgb, #1c75bc 13%, #fff);
  --blue-50:  color-mix(in srgb, #1c75bc 6%, #fff);

  /* sampled neutrals */
  --black:   #000000;
  --dark-800:#1a1b1f;
  --dark-700:#313131;
  --dark-600:#333333;

  /* #463939 is the warm brown-grey already in the client's palette. It carries
     the whole dark side of this design: a family business reads warmer on brown
     than on the blue-black a software company would use. */
  --warm-900: color-mix(in srgb, #463939 58%, #000);
  --warm-800: #463939;
  --warm-700: color-mix(in srgb, #463939 84%, #fff);
  --warm-100: color-mix(in srgb, #463939 9%, #fff);
  --warm-50:  color-mix(in srgb, #463939 4%, #fff);

  /* --- semantic aliases: existing rules keep working, values are on-palette --- */
  --navy-900: var(--warm-900);
  --navy-800: var(--warm-800);
  --navy-700: var(--blue-700);
  --navy-600: var(--blue-600);
  --navy-500: var(--blue-600);
  --navy-100: var(--blue-100);
  --navy-50:  var(--blue-50);

  --amber-600: var(--orange-600);
  --amber-500: var(--orange-500);
  --amber-400: var(--orange-400);
  --amber-100: var(--orange-100);

  /* success / required markers stay on-palette rather than adding green & red */
  --green-600: var(--blue-600);
  --green-100: var(--blue-100);
  --red-600:   var(--orange-600);

  /* neutrals — headings take the warm brown (11:1 on white), body stays neutral
     grey so long passages don't read tinted */
  --ink:      #463939;
  --ink-2:    #333333;
  --ink-3:    #666666;
  --ink-4:    #999999;
  --line:     #eeeeee;
  --line-2:   #f5f5f5;
  --rule:     #cccccc;
  --surface:  #ffffff;
  --surface-2:#f7f7f7;
  --surface-3:#efefef;

  /* Type — mirrors the reference site's own families (Montserrat for display,
     Open Sans / Source Sans for body) with a system fallback chain, so no
     external font request is introduced. */
  --font: 'Open Sans', 'Source Sans Pro', 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Montserrat', 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* fluid scale */
  --fs-xs:   0.8125rem;
  --fs-sm:   0.9062rem;
  --fs-base: 1rem;
  --fs-lg:   clamp(1.0625rem, 0.4vw + 0.98rem, 1.1875rem);
  --fs-xl:   clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem);
  --fs-2xl:  clamp(1.5rem, 1.1vw + 1.25rem, 2rem);
  --fs-3xl:  clamp(1.875rem, 2vw + 1.4rem, 2.75rem);
  --fs-4xl:  clamp(2.25rem, 3.4vw + 1.4rem, 3.75rem);

  /* space */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;
  --sp-9: clamp(3.5rem, 6vw, 6rem);

  /* Rounder than a corporate default — the softness is most of what makes this
     read as a household trade rather than a SaaS dashboard. */
  --r-sm: 10px; --r: 18px; --r-lg: 26px; --r-xl: 34px; --r-full: 999px;

  /* Shadows tinted with the warm brown rather than neutral black, so depth
     agrees with the surfaces instead of greying them. Each carries an offset
     and a soft blur. */
  --shadow-sm: 0 1px 2px rgba(70,57,57,.07), 0 2px 5px rgba(70,57,57,.06);
  --shadow:    0 4px 14px rgba(70,57,57,.09), 0 2px 5px rgba(70,57,57,.05);
  --shadow-lg: 0 20px 44px rgba(70,57,57,.13), 0 5px 14px rgba(70,57,57,.07);
  --shadow-xl: 0 34px 76px rgba(70,57,57,.20);

  --wrap: 1180px;
  --wrap-narrow: 780px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1,h2,h3,h4 { color: var(--ink); font-family: var(--font-display); line-height: 1.15; letter-spacing: -.021em; margin: 0 0 var(--sp-4); font-weight: 800; }
h1 { font-size: var(--fs-4xl); letter-spacing: -.033em; }
h2 { font-size: var(--fs-3xl); letter-spacing: -.028em; }
h3 { font-size: var(--fs-xl); font-weight: 750; letter-spacing: -.018em; }
h4 { font-size: var(--fs-lg); font-weight: 700; }
p  { margin: 0 0 var(--sp-4); }
a  { color: var(--navy-600); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy-700); }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.15em; }
strong { color: var(--ink); font-weight: 680; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-7) 0; }

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

/* ---- browser surfaces -------------------------------------------------
   Selection, caret, scrollbar and list markers ship with defaults that belong
   to no design system. Theming them from the palette is the cheapest signal
   that a page was drawn rather than assembled. */
::selection { background: color-mix(in srgb, var(--orange-500) 26%, #fff); color: var(--warm-900); }
:root { caret-color: var(--orange-500); accent-color: var(--orange-500); }
::marker { color: var(--orange-500); }

* { scrollbar-color: var(--warm-700) var(--surface-3); scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--surface-3); }
::-webkit-scrollbar-thumb {
  background: var(--warm-700); border-radius: var(--r-full);
  border: 3px solid var(--surface-3);
}
::-webkit-scrollbar-thumb:hover { background: var(--warm-800); }

/* Dark surfaces get their own selection + scrollbar treatment. */
.section--navy ::selection, .hero ::selection, .pagehead ::selection, .footer ::selection {
  background: var(--orange-500); color: var(--warm-900);
}

.skiplink {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy-800); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--r-sm) 0;
}
.skiplink:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--sp-5); }
.wrap--narrow { max-width: var(--wrap-narrow); }
.icon { width: 1.15em; height: 1.15em; flex: none; }

.section { padding-block: var(--sp-9); }
.section--tint { background: var(--surface-2); }
.section--navy { background: var(--navy-900); color: #cccccc; }
.section--navy h2, .section--navy h3 { color: #fff; }

.eyebrow {
  font-size: var(--fs-xs); font-weight: 750; letter-spacing: .13em; text-transform: uppercase;
  color: var(--navy-600); margin: 0 0 var(--sp-3);
}
.section--navy .eyebrow { color: var(--amber-400); }
.lede { font-size: var(--fs-lg); color: var(--ink-3); max-width: 62ch; }
.sechead { margin-bottom: var(--sp-7); max-width: 66ch; }
.sechead--center { margin-inline: auto; text-align: center; }
.sechead--center .lede { margin-inline: auto; }
.sechead h2 { margin-bottom: var(--sp-3); }

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

.btn {
  --btn-bg: var(--navy-700); --btn-fg: #fff; --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .875rem 1.5rem; border-radius: var(--r-full);
  background: var(--btn-bg); color: var(--btn-fg); border: 2px solid var(--btn-bd);
  font-weight: 700; font-size: var(--fs-sm); letter-spacing: -.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  box-shadow: var(--shadow-sm);
}
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn--accent  { --btn-bg: var(--amber-500); --btn-fg: var(--dark-800); box-shadow: 0 6px 18px rgba(241,90,41,.35); }
.btn--accent:hover { --btn-bg: var(--amber-400); box-shadow: 0 10px 26px rgba(241,90,41,.42); }
.btn--ghost   { --btn-bg: transparent; --btn-fg: var(--navy-700); --btn-bd: var(--line); box-shadow: none; }
.btn--ghost:hover { --btn-bg: var(--navy-50); --btn-bd: var(--navy-100); }
.btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.4); box-shadow: none; }
.btn--outline-light:hover { --btn-bg: rgba(255,255,255,.12); --btn-bd: #fff; }
.btn--white { --btn-bg: #fff; --btn-fg: var(--navy-800); }
.btn--sm { padding: .625rem 1.1rem; font-size: var(--fs-xs); }
/* Touch devices get a 44px minimum hit area regardless of visual size. */
@media (pointer: coarse) { .btn, .callbar__btn, .navtoggle { min-height: 44px; } }
.btn--lg { padding: 1.0625rem 2rem; font-size: var(--fs-base); }
.btn--block { display: flex; width: 100%; }
.btnrow { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* --------------------------------------------------------------- topbar */

.topbar { background: var(--navy-900); color: #999999; font-size: var(--fs-xs); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 40px; }
.topbar__msg { display: flex; align-items: center; gap: .5em; margin: 0; }
.topbar__msg .icon { color: var(--amber-400); }
.topbar__actions { display: flex; gap: var(--sp-5); }
.topbar__link { display: inline-flex; align-items: center; gap: .45em; color: #eeeeee; text-decoration: none; font-weight: 600; }
.topbar__link:hover { color: #fff; }
.topbar__link .icon { color: var(--amber-400); width: 1em; height: 1em; }
@media (max-width: 860px) {
  .topbar__msg { display: none; }
  .topbar__inner { justify-content: center; }
  .topbar__actions { gap: var(--sp-4); }
}
@media (max-width: 520px) { .topbar__link:not(.topbar__link--phone) { display: none; } }

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

.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-2);
  transition: box-shadow .2s var(--ease);
}
.header.is-stuck { box-shadow: var(--shadow); }
/* Fixed height on purpose. An earlier version shrank the header on scroll,
   which meant animating min-height/height inside a position:sticky element —
   a layout recalculation every frame, during scroll, which is the worst place
   to pay it. Only box-shadow (compositor-only) reacts to the stuck state. */
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); min-height: 84px; }

/* The client's logo is the only brand mark. It already contains the business
   name, so no text is set alongside it. */
.logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
/* Sized so the "SAVE YOUR APPLIANCE" wordmark stays legible, in the
   proportions the reference site displays it at. */
.logo__img { height: 64px; width: auto; }

/* Footer variant: the lockup's wings and "APPLIANCE" wordmark are dark linework
   that would vanish against the near-black footer, so the logo sits on a white
   plate. The artwork itself is never recoloured or filtered. */
.logo--compact { background: #fff; padding: .7rem .9rem; border-radius: var(--r); box-shadow: var(--shadow-sm); }
.logo--compact .logo__img { height: 64px; }

@media (max-width: 1040px) {
  .logo__img, .header.is-stuck .logo__img { height: 52px; }
}
@media (max-width: 420px) {
  .logo__img, .header.is-stuck .logo__img { height: 44px; }
}

.nav__list { display: flex; align-items: center; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: block; padding: .5rem .7rem; border-radius: var(--r-sm);
  color: var(--ink-2); font-weight: 650; font-size: var(--fs-sm); text-decoration: none;
  transition: color .15s, background .15s;
}
.nav__link:hover { color: var(--navy-700); background: var(--navy-50); }
.nav__link.is-active { color: var(--navy-800); background: var(--navy-100); }
.nav__item--cta { margin-left: var(--sp-2); }

.header__cta { display: flex; align-items: center; gap: var(--sp-3); }
.header__call { display: none; }
/* Trigger. The three bars alone were not reading as "menu", so the word ships
   next to them. Filled in brand orange rather than an outlined ghost button so
   it is unmistakably the control on a busy header. */
.navtoggle {
  display: none; align-items: center; gap: .5rem;
  min-height: 44px; padding: .5rem .85rem .5rem .75rem;
  border: 0; border-radius: var(--r-sm);
  background: var(--orange-500); color: var(--warm-900);
  font: inherit; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .02em;
  cursor: pointer; box-shadow: var(--shadow-sm);
}
.navtoggle__bars { display: grid; gap: 4px; }
.navtoggle__bar { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .22s var(--ease), opacity .16s; }
.navtoggle[aria-expanded="true"] .navtoggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .navtoggle__bar:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] .navtoggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---- slide-out drawer ---------------------------------------------------
   Replaces the old push-down dropdown, which people did not recognise as a
   menu. Enters from the right edge, over the page rather than displacing it. */
.drawer-scrim {
  position: fixed; inset: 0; z-index: 120;
  background: color-mix(in srgb, var(--warm-900) 62%, transparent);
  opacity: 0; transition: opacity .28s var(--ease);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.drawer-scrim[data-open] { opacity: 1; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 121;
  width: min(82vw, 380px);            /* leaves ~18% of the page visible */
  display: flex; flex-direction: column;
  background: #fff; color: var(--ink-2);
  box-shadow: -18px 0 50px rgba(70,57,57,.28);
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.22,1,.36,1);
  overscroll-behavior: contain; overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom);
}
.drawer[data-open] { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .drawer { transition: none; }
  .drawer-scrim { transition: none; }
}

.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.drawer__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-sm); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.drawer__close {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink); cursor: pointer;
}
.drawer__close:hover { background: var(--warm-100); }
.drawer__close .icon { width: 18px; height: 18px; }

.drawer__nav { flex: 1; padding: var(--sp-4) var(--sp-5); }
.drawer__list { list-style: none; margin: 0; padding: 0; }
.drawer__list a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: 52px; padding: .8rem 0;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem;
  text-decoration: none;
}
.drawer__list a .icon { width: 1em; height: 1em; color: var(--rule); transition: transform .18s var(--ease), color .18s; }
.drawer__list a:hover { color: var(--orange-600); }
.drawer__list a:hover .icon { color: var(--orange-500); transform: translateX(4px); }
.drawer__list a[aria-current] { color: var(--orange-600); }
.drawer__list a[aria-current] .icon { color: var(--orange-500); }
.drawer__sub { margin: var(--sp-6) 0 var(--sp-2); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.drawer__list--sub a { font-size: var(--fs-base); font-weight: 650; min-height: 46px; }

.drawer__foot { padding: var(--sp-5); border-top: 1px solid var(--line); background: var(--warm-50); }
.drawer__mail { display: flex; align-items: center; gap: .5rem; margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--ink-2); text-decoration: none; word-break: break-all; }
.drawer__mail .icon { color: var(--orange-500); flex: none; }
.drawer__hours { display: flex; align-items: center; gap: .5rem; margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--ink-3); }
.drawer__hours .icon { color: var(--orange-500); flex: none; }

@media (max-width: 1040px) {
  .nav { display: none; }
  .navtoggle { display: inline-flex; }
  .header__inner { min-height: 72px; }
}
@media (min-width: 1041px) {
  .drawer, .drawer-scrim { display: none !important; }
}
@media (min-width: 1041px) { .header__call { display: inline-flex; } }
@media (max-width: 400px) { .logo__sub { display: none; } }

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

.hero { position: relative; background: var(--navy-900); color: #cccccc; overflow: hidden; padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.hero::before {
  content: ''; position: absolute; inset: 0;
  /* Warm-led: the orange carries the top-right light and the blue only cools
     the far corner. Blue-dominant read as a tech company, not a family trade. */
  background:
    radial-gradient(900px 520px at 80% 4%, rgba(241,90,41,.30), transparent 64%),
    radial-gradient(700px 460px at 6% 96%, rgba(70,57,57,.55), transparent 62%),
    radial-gradient(560px 360px at 24% 12%, rgba(28,117,188,.16), transparent 60%);
}
/* A single hairline rule under the hero, picking up the brand orange at the
   left edge where the copy starts — enough to close the section without
   decorating the background. */
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--orange-500) 0 clamp(90px, 12vw, 190px), rgba(255,255,255,.09) 0);
}
.hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr; gap: var(--sp-8); align-items: center; }
.hero h1 { color: #fff; margin-bottom: var(--sp-5); }
.hero h1 em { font-style: normal; color: var(--amber-400); }
.hero__lede { font-size: var(--fs-lg); color: #cccccc; max-width: 54ch; margin-bottom: var(--sp-6); }
.hero__pill {
  display: inline-flex; align-items: center; gap: .55em; margin-bottom: var(--sp-5);
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16);
  padding: .45rem 1rem; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; color: #ffffff;
}
.hero__pill .icon { color: var(--amber-400); }
.hero__trust { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); list-style: none; margin: var(--sp-6) 0 0; padding: 0; font-size: var(--fs-sm); font-weight: 650; color: #999999; }
.hero__trust li { display: inline-flex; align-items: center; gap: .45em; }
.hero__trust .icon { color: var(--amber-400); }

/* The hero panel is a paper work order, not a glass card.
   It went through two failed versions: dark tiles on a dark hero (the client
   read them as "blank, can't see the buttons") and a 3-up grid whose labels
   broke mid-word at 375px. A white card with full-width ruled rows fixes both
   at once — every row is 100% of the panel width, so "Gas and Electric Dryers"
   sets on one line and never needs a column to be wide enough for it.
   White stock also gives the labels 12.6:1 instead of the 3-ish:1 they had. */
.hero__panel {
  background: #ffffff;
  border-radius: var(--r-lg);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.55), 0 2px 0 0 rgba(255,255,255,.06);
  overflow: hidden;
}
.ticket__head {
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 2px solid var(--warm-800);
}
.ticket__title { font-size: var(--fs-lg); color: var(--ink); margin: 0 0 .35rem; letter-spacing: -.01em; }
.ticket__sub { font-size: var(--fs-sm); color: #666666; margin: 0; max-width: 34ch; }

.ticket__list { list-style: none; margin: 0; padding: 0; }
.ticket__list li + li .ticket__row { border-top: 1px solid #eeeeee; }

.ticket__row {
  display: grid;
  grid-template-columns: 2.1rem 1.85rem 1fr auto;
  align-items: center; gap: .6rem;
  padding: .78rem var(--sp-5);
  text-decoration: none; color: var(--ink);
  font-weight: 700; font-size: .9375rem; line-height: 1.25;
  /* Colour and shadow only — never a layout property, which would reflow the
     whole panel on hover. */
  transition: background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
/* A tabular hand-numbered column, the way a real work order is ruled. */
.ticket__n {
  font-variant-numeric: tabular-nums; font-size: .75rem; font-weight: 700;
  color: #999999; letter-spacing: .04em;
}
.ticket__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.85rem; height: 1.85rem; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--orange-500) 12%, #fff);
  color: var(--orange-600);
}
.ticket__ico .icon { width: 18px; height: 18px; }
/* Labels never break inside a word — "Dishwash/ers" is worse than any wrap. */
.ticket__label { overflow-wrap: normal; word-break: normal; hyphens: none; }
.ticket__go { width: 16px; height: 16px; color: #cccccc; transition: color .15s var(--ease), transform .15s var(--ease); }

.ticket__row:hover,
.ticket__row:focus-visible {
  background: color-mix(in srgb, var(--orange-500) 9%, #fff);
  color: var(--orange-600);
  box-shadow: inset 3px 0 0 0 var(--orange-500);
}
.ticket__row:hover .ticket__go,
.ticket__row:focus-visible .ticket__go { color: var(--orange-600); transform: translateX(3px); }
.ticket__row:hover .ticket__n,
.ticket__row:focus-visible .ticket__n { color: var(--orange-600); }
.ticket__row:hover .ticket__ico,
.ticket__row:focus-visible .ticket__ico { background: var(--orange-500); color: var(--warm-900); }

.ticket__cta { margin: var(--sp-4) var(--sp-5) 0; width: calc(100% - var(--sp-5) * 2); }
.ticket__foot {
  margin: 0; padding: var(--sp-3) var(--sp-5) var(--sp-5);
  font-size: var(--fs-xs); color: #666666; text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .ticket__row, .ticket__go { transition: none; }
  .ticket__row:hover .ticket__go { transform: none; }
}

@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--sp-7); }
  .hero__panel { order: 2; }
}
@media (max-width: 480px) {
  .ticket__head { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
  .ticket__row { padding: .72rem var(--sp-4); grid-template-columns: 1.75rem 1.7rem 1fr auto; font-size: .875rem; }
  .ticket__cta { margin: var(--sp-3) var(--sp-4) 0; width: calc(100% - var(--sp-4) * 2); }
  .ticket__foot { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
}

/* --------------------------------------------------------------- pagehead */

.pagehead { position: relative; background: var(--navy-800); color: #cccccc; padding-block: clamp(2.75rem, 5vw, 4.5rem); overflow: hidden; }
.pagehead::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(760px 400px at 84% 0%, rgba(241,90,41,.26), transparent 64%),
    radial-gradient(520px 320px at 14% 100%, rgba(28,117,188,.14), transparent 62%);
}
.pagehead__inner { position: relative; z-index: 1; max-width: 74ch; }
.pagehead h1 { color: #fff; margin-bottom: var(--sp-4); font-size: var(--fs-3xl); }
.pagehead p { color: #cccccc; font-size: var(--fs-lg); margin: 0; }
.pagehead .eyebrow { color: var(--amber-400); }
.pagehead__actions { margin-top: var(--sp-6); }
/* Smaller communities get a shorter head — they are a deeper tier than the
   twelve hand-written city pages and should not compete with them visually. */
.pagehead--slim { padding-block: clamp(2.25rem, 4vw, 3.25rem); }
.pagehead--slim h1 { font-size: var(--fs-2xl); }
.pagehead--slim p { font-size: var(--fs-base); }

.crumbs { background: var(--surface-2); border-bottom: 1px solid var(--line-2); font-size: var(--fs-xs); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; list-style: none; margin: 0; padding: .7rem 0; color: var(--ink-3); }
.crumbs li + li::before { content: '/'; margin-right: .5rem; color: var(--line); }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--navy-600); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); font-weight: 650; }

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

/* Two-column rule-separated list rather than a grid of boxes. Uneven title
   lengths ("Gas and Electric Dryers" vs "Ranges") made equal-height cards look
   broken; rows absorb the difference and read as a service menu. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-5); }
.cards--compact { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* Each service is a solid, clearly-bounded control. The earlier faint version
   read as blank page — these carry a real border, a filled icon badge and a
   visible labelled action so they are unmistakably clickable. */
.card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--rule); border-radius: var(--r);
  padding: var(--sp-5); text-decoration: none; color: inherit;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card__icon {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: color-mix(in srgb, var(--orange-500) 13%, #fff);
  color: var(--orange-600); margin: 0 0 var(--sp-4);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.card__icon .icon { width: 24px; height: 24px; }

.card--service:hover {
  border-color: var(--orange-500);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.card--service:hover .card__icon { background: var(--orange-500); color: #fff; }

.card__title { margin: 0 0 .4rem; font-size: var(--fs-lg); max-width: none; }
.card__body { font-size: var(--fs-sm); color: var(--ink-3); margin: 0 0 var(--sp-5); flex: 1; }

/* Visible, labelled affordance — an arrow alone was not reading as a control. */
.card__link {
  display: inline-flex; align-items: center; gap: .45em;
  align-self: flex-start; margin-top: auto;
  padding: .5rem .95rem; border-radius: var(--r-full);
  background: color-mix(in srgb, var(--orange-500) 12%, #fff);
  color: var(--orange-600); font-weight: 750; font-size: var(--fs-xs);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.card__link .icon { width: 1em; height: 1em; transition: transform .2s var(--ease); }
.card--service:hover .card__link { background: var(--orange-500); color: #fff; }
.card--service:hover .card__link .icon { transform: translateX(4px); }

/* feature list (why choose us) */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--sp-5); }
/* No chip behind the glyph — the icon sits directly on the surface above a
   short warm rule, which is quieter and less templated. */
.feature { background: #fff; border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-6) var(--sp-6) 0; }
.feature__icon { display: block; color: var(--orange-500); margin-bottom: var(--sp-4); }
.feature__icon .icon { width: 30px; height: 30px; }
.feature h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-3); position: relative; padding-bottom: var(--sp-3); }
.feature h3::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px;
  background: color-mix(in srgb, var(--warm-800) 22%, #fff); border-radius: 2px;
}
.feature p { font-size: var(--fs-sm); color: var(--ink-3); margin: 0; max-width: 46ch; }

/* symptom grid on service pages */
.symptoms { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-4); }
.symptom { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-5); transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.symptom:hover { border-color: var(--rule); box-shadow: var(--shadow-sm); }
.symptom h3 { font-size: var(--fs-base); margin-bottom: var(--sp-2); color: var(--ink); }
.symptom p { font-size: var(--fs-sm); color: var(--ink-3); margin: 0; }

/* checklist */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.checklist li { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--fs-sm); }
.checklist .icon { color: var(--green-600); margin-top: .18em; }
.checklist--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-3) var(--sp-5); }

/* steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--sp-5); counter-reset: s; }
/* The 01/02/03 stays: these are genuinely sequential steps, so the numbering
   carries information rather than decorating the section. */
.step { position: relative; padding: var(--sp-6); background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.step__n {
  font-family: var(--font-display); font-size: 1rem; font-weight: 800; line-height: 1;
  color: var(--orange-600); letter-spacing: .1em; margin-bottom: var(--sp-4);
  display: inline-flex; align-items: center; gap: .6rem;
}
.step__n::after { content: ''; width: 28px; height: 2px; background: color-mix(in srgb, var(--orange-500) 40%, #fff); }
.step h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.step p { font-size: var(--fs-sm); color: var(--ink-3); margin: 0; }

/* Replaces the big-number stat grid: the same facts, but as a signed promise
   from the owner. A family business is more credible in its own voice than in
   dashboard metrics. */
.promise {
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r-xl); padding: var(--sp-6) var(--sp-6) var(--sp-5);
}
.promise__h { color: #fff; font-size: var(--fs-lg); margin-bottom: var(--sp-5); }
.promise__list { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: var(--sp-4); }
.promise__list li {
  position: relative; padding-left: 1.9rem; color: #eeeeee; font-size: var(--fs-sm); line-height: 1.6;
}
.promise__list li::before {
  content: ''; position: absolute; left: 0; top: .45em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--orange-500); box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange-500) 22%, transparent);
}
.promise__list strong { color: #fff; }
.promise__sig {
  margin: 0; padding-top: var(--sp-4); border-top: 1px solid rgba(255,255,255,.12);
  font-size: var(--fs-sm); color: #cccccc; font-style: italic;
}

/* two-column split */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-8); align-items: start; }
.split--reverse > :first-child { order: 2; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--sp-6); } .split--reverse > :first-child { order: 0; } }

.prose > :last-child { margin-bottom: 0; }
.prose h2 { margin-top: var(--sp-7); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--sp-6); }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }

/* aside card */
.aside { position: sticky; top: 96px; background: var(--navy-50); border: 1px solid var(--navy-100); border-radius: var(--r-lg); padding: var(--sp-6); }
.aside h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.aside p { font-size: var(--fs-sm); color: var(--ink-3); }
.aside__hours { list-style: none; padding: 0; margin: 0 0 var(--sp-5); font-size: var(--fs-sm); }
.aside__hours li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px dashed var(--navy-100); }
.aside__hours li:last-child { border-bottom: 0; }
.is-closed { color: var(--ink-3); }
@media (max-width: 900px) { .aside { position: static; } }

/* --------------------------------------------------------------- reviews */

.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--sp-5); }
.review { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-6); display: flex; flex-direction: column; }
.review--featured { grid-column: 1 / -1; background: linear-gradient(135deg, var(--navy-900), var(--navy-700)); border-color: transparent; color: #cccccc; }
.review--featured .review__body { color: #f5f5f5; font-size: var(--fs-xl); font-weight: 500; line-height: 1.5; letter-spacing: -.015em; }
.review--featured .review__name { color: #fff; }
.review--featured .review__meta { color: #999999; }
.stars { display: flex; gap: 2px; color: var(--amber-500); margin-bottom: var(--sp-4); }
.stars .icon { width: 18px; height: 18px; }
.review--featured .stars { color: var(--amber-400); }
.review__body { font-size: var(--fs-base); color: var(--ink-2); margin-bottom: var(--sp-5); flex: 1; }
.review__who { display: flex; flex-direction: column; gap: .1rem; }
.review__name { font-weight: 750; color: var(--ink); font-size: var(--fs-sm); }
.review__meta { font-size: var(--fs-xs); color: var(--ink-3); }

.reviewcta { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); }
.reviewcta a {
  display: flex; align-items: center; gap: .75rem; padding: var(--sp-5);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  text-decoration: none; color: var(--ink); font-weight: 700;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.reviewcta a:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.reviewcta .icon { width: 26px; height: 26px; color: var(--navy-600); }

/* --------------------------------------------------------------- cr work */

.crgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: var(--sp-5); }
.crcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.crcard__media { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--navy-800), var(--navy-600)); display: grid; place-items: center; color: rgba(255,255,255,.3); }
.crcard__media img { width: 100%; height: 100%; object-fit: cover; }
.crcard__media .icon { width: 52px; height: 52px; }
.crcard__body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.crcard__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: var(--sp-3); }
.tag { font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .28rem .6rem; border-radius: var(--r-full); background: var(--navy-100); color: var(--navy-800); }
.tag--amber { background: var(--amber-100); color: var(--amber-600); }
.crcard h3 { font-size: var(--fs-base); margin-bottom: var(--sp-4); }
.crcard dl { margin: 0; display: grid; gap: var(--sp-3); font-size: var(--fs-sm); }
.crcard dt { font-weight: 750; color: var(--navy-700); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .15rem; }
.crcard dd { margin: 0; color: var(--ink-3); }

.uploadnote { border: 2px dashed var(--navy-100); background: var(--navy-50); border-radius: var(--r-lg); padding: var(--sp-6); }
.uploadnote h3 { margin-bottom: var(--sp-3); }
.uploadnote code { background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: .1rem .4rem; font-size: .875em; color: var(--navy-700); }

/* --------------------------------------------------------------- areas */

.arealist { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-3); }
.areacard {
  display: flex; flex-direction: column; gap: .2rem; padding: var(--sp-4) var(--sp-5);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  text-decoration: none; color: var(--ink); font-weight: 700; font-size: var(--fs-sm);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s;
}
.areacard:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--navy-100); color: var(--navy-700); }
.areacard span { font-size: var(--fs-xs); font-weight: 500; color: var(--ink-3); }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.chips li {
  font-size: var(--fs-sm); padding: .4rem .85rem; border-radius: var(--r-full);
  background: #fff; border: 1px solid var(--line); color: var(--ink-2);
}

/* Every community chip is now a real link to that town's page. The padding
   moves off the <li> and onto the <a> so the whole pill is the hit target
   rather than just the text inside it. */
.chips--linked li { padding: 0; border: 0; background: none; border-radius: 0; }
.chips--linked a {
  display: inline-block;
  font-size: var(--fs-sm); padding: .4rem .85rem; border-radius: var(--r-full);
  background: #fff; border: 1px solid var(--line); color: var(--ink-2);
  text-decoration: none; font-weight: 650;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.chips--linked a:hover,
.chips--linked a:focus-visible {
  background: color-mix(in srgb, var(--orange-500) 10%, #fff);
  border-color: var(--orange-500); color: var(--orange-600);
}
/* The twelve cities with a full hand-written page read slightly heavier than
   the smaller communities — a hierarchy cue, not a different destination. */
.chips--linked a.is-primary { border-color: var(--warm-800); color: var(--ink); font-weight: 750; }

/* ---- Google review strip ------------------------------------------------
   Horizontal rail: scrolls on small screens, wraps into a grid on wide ones.
   Cards are equal width so a long review does not dominate the row. */
.rv__rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr);
  gap: var(--sp-5); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; padding-bottom: var(--sp-4);
  scrollbar-width: thin;
}
.rv__card {
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--rule); border-radius: var(--r);
  padding: var(--sp-5); box-shadow: var(--shadow-sm);
}
.rv__stars { display: inline-flex; gap: 2px; color: var(--orange-500); margin-bottom: var(--sp-4); }
.rv__stars .icon { width: 17px; height: 17px; }
.rv__body { font-size: var(--fs-sm); color: var(--ink-2); margin: 0 0 var(--sp-5); flex: 1; }
.rv__who { display: flex; align-items: center; gap: .7rem; margin-top: auto; }
.rv__avatar {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: color-mix(in srgb, var(--orange-500) 15%, #fff); color: var(--orange-600);
  font-family: var(--font-display); font-weight: 800; font-size: 1rem; flex: none;
}
.rv__name { display: block; font-weight: 750; color: var(--ink); font-size: var(--fs-sm); }
.rv__meta { display: block; font-size: var(--fs-xs); color: var(--ink-3); }
.rv__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-6); }

/* Three or fewer fit without scrolling, so let them share the row evenly. */
@media (min-width: 900px) {
  .rv__rail { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); overflow: visible; }
}

/* ---- three-way cross-link block ----------------------------------------
   Brands <-> appliance types <-> locations. Plain linked lists on purpose:
   this block exists to be crawled and scanned, not decorated. */
.xlink__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-6); }
.xlink__col { min-width: 0; }
.xlink__h {
  font-size: var(--fs-base); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3);
  border-bottom: 2px solid color-mix(in srgb, var(--orange-500) 34%, #fff);
}
.xlink__h a { color: var(--ink); text-decoration: none; }
.xlink__h a:hover { color: var(--orange-600); }
.xlink__list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; columns: 1; }
.xlink__list li { margin-bottom: .45rem; }
.xlink__list a { color: var(--ink-2); text-decoration: none; font-size: var(--fs-sm); }
.xlink__list a:hover { color: var(--orange-600); text-decoration: underline; text-underline-offset: 3px; }
.xlink__all { display: inline-flex; align-items: center; gap: .4em; font-size: var(--fs-sm); font-weight: 700; color: var(--orange-600); text-decoration: none; }
.xlink__all .icon { width: 1em; height: 1em; transition: transform .18s var(--ease); }
.xlink__all:hover .icon { transform: translateX(4px); }
@media (max-width: 560px) { .xlink__list { columns: 2; column-gap: var(--sp-4); } }

/* --------------------------------------------------------------- faq */

.faq { display: grid; gap: var(--sp-3); }
.faq__item { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.faq__item[open] { border-color: var(--navy-100); box-shadow: var(--shadow-sm); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5); cursor: pointer; list-style: none;
  font-weight: 700; color: var(--ink); font-size: var(--fs-base);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--navy-700); }
.faq__chev { color: var(--navy-600); transform: rotate(90deg); transition: transform .22s var(--ease); flex: none; }
.faq__item[open] .faq__chev { transform: rotate(-90deg); }
.faq__a { padding: 0 var(--sp-5) var(--sp-5); }
.faq__a p { margin: 0; color: var(--ink-3); font-size: var(--fs-sm); }

/* --------------------------------------------------------------- band */

.band { background: linear-gradient(120deg, var(--navy-800), var(--navy-600)); color: #fff; padding-block: var(--sp-8); }
.band__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; }
.band__text { max-width: 56ch; }
.band h2 { color: #fff; font-size: var(--fs-2xl); margin-bottom: var(--sp-2); }
.band p { color: #eeeeee; margin: 0; font-size: var(--fs-sm); }
.band__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

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

.formcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--shadow); }
.field { margin-bottom: var(--sp-4); }
.field label { display: block; font-weight: 700; font-size: var(--fs-sm); color: var(--ink); margin-bottom: .4rem; }
.field .req { color: var(--red-600); }
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--r-sm);
  font: inherit; font-size: var(--fs-sm); color: var(--ink); background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy-500); box-shadow: 0 0 0 3px var(--navy-100);
}
.field textarea { min-height: 120px; resize: vertical; }
.field__hint { font-size: var(--fs-xs); color: var(--ink-3); margin: .35rem 0 0; }
.fieldrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 560px) { .fieldrow { grid-template-columns: 1fr; } }
.formnote { font-size: var(--fs-xs); color: var(--ink-3); margin-top: var(--sp-4); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contactlist { list-style: none; padding: 0; margin: 0 0 var(--sp-6); display: grid; gap: var(--sp-4); }
.contactlist li { display: flex; gap: var(--sp-4); align-items: flex-start; }
.contactlist .icon { width: 22px; height: 22px; color: var(--navy-600); margin-top: .2em; flex: none; }
.contactlist dt, .contactlist strong { display: block; font-weight: 750; color: var(--ink); font-size: var(--fs-sm); }
.contactlist a { font-size: var(--fs-lg); font-weight: 700; text-decoration: none; }

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

.footer { background: var(--navy-900); color: #999999; font-size: var(--fs-sm); padding-top: var(--sp-8); margin-top: 0; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--sp-7) var(--sp-6); padding-bottom: var(--sp-8); }
.footer__h { color: #fff; font-size: var(--fs-sm); font-weight: 750; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 var(--sp-4); display: flex; align-items: center; gap: .45em; }
.footer__h .icon { color: var(--amber-400); width: 1em; height: 1em; }
.footer__h--sp { margin-top: var(--sp-6); }
.footer__blurb { margin: var(--sp-4) 0; max-width: 42ch; color: #999999; font-size: var(--fs-sm); }
.footer__badges { list-style: none; padding: 0; margin: 0 0 var(--sp-4); display: flex; flex-wrap: wrap; gap: .4rem; }
.footer__badges li { display: inline-flex; align-items: center; gap: .35em; font-size: var(--fs-xs); font-weight: 650; color: #cccccc; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); padding: .3rem .7rem; border-radius: var(--r-full); }
.footer__badges .icon { color: var(--amber-400); width: .95em; height: .95em; }
.footer__license { font-size: var(--fs-xs); color: #666666; margin: 0 0 var(--sp-4); }
.footer__social { display: flex; gap: var(--sp-3); }
.footer__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); background: rgba(255,255,255,.08); color: #eeeeee; transition: background .16s, color .16s, transform .16s; }
.footer__social a:hover { background: var(--amber-500); color: var(--dark-800); transform: translateY(-2px); }
.footer__social .icon { width: 20px; height: 20px; }

.footer__links, .footer__contact, .footer__hours { list-style: none; padding: 0; margin: 0; }
.footer__links li { margin-bottom: .55rem; }
.footer__links--tight li { margin-bottom: .35rem; }
.footer__links a { color: #999999; text-decoration: none; transition: color .15s; }
.footer__links a:hover { color: #fff; text-decoration: underline; }
.footer__contact li { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.footer__contact .icon { color: var(--amber-400); }
.footer__contact a { color: #ffffff; text-decoration: none; font-weight: 700; }
.footer__contact a:hover { color: #fff; }
.footer__hours li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; }
.footer__hours .is-closed { color: #666666; }
.footer__cta { margin-top: var(--sp-5); }

.footer__bar { border-top: 1px solid rgba(255,255,255,.1); }
.footer__bar-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding-block: var(--sp-5); font-size: var(--fs-xs); color: #666666; }
.footer__bar p { margin: 0; }
.footer__bar-links { display: flex; gap: var(--sp-5); }
.footer__bar-links a { color: #666666; text-decoration: none; }
.footer__bar-links a:hover { color: #fff; }

@media (max-width: 980px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; gap: var(--sp-6); } .footer__bar-inner { flex-direction: column; text-align: center; } }

/* --------------------------------------------------------------- callbar */

.callbar { display: none; }
@media (max-width: 760px) {
  .callbar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
    background: var(--line); box-shadow: 0 -4px 18px rgba(0,0,0,.14);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .callbar__btn { display: flex; align-items: center; justify-content: center; gap: .5em; padding: .95rem; font-weight: 750; font-size: var(--fs-sm); text-decoration: none; }
  .callbar__btn--call { background: var(--navy-800); color: #fff; }
  .callbar__btn--book { background: var(--amber-500); color: var(--dark-800); }
  .footer { padding-bottom: 60px; }
}

/* --------------------------------------------------------------- utils */

.center { text-align: center; }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mb-0 { margin-bottom: 0; }
.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; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ------------------------------------------------- questions (/questions/)
   Set as a workshop notebook rather than a blog post. The devices here are
   deliberately few and reused: a ruled margin, tabular numerals, and one boxed
   callout. The numerals are the same motif as the home page's work-order
   panel, so the site reads as one authored language instead of a new pattern
   invented per page type. */

.qa__cat {
  font-size: var(--fs-xs); font-weight: 750; letter-spacing: .06em;
  text-transform: uppercase; color: var(--amber-400); margin: 0 0 .5rem;
}

/* The short answer. Warm paper stock and larger type than the body — this is
   the part most readers want, so it is the part that looks like a destination.
   Emphasis comes from the tint, the type size and the label; it does NOT come
   from a thick coloured bar down one side, which is the same side-tab tell
   already removed from the symptom cards. The tint alone separates it. */
.qa__short {
  background: color-mix(in srgb, var(--orange-500) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--orange-500) 22%, #fff);
  border-radius: var(--r);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-8);
}
.qa__short-label {
  margin: 0 0 .4rem; font-size: var(--fs-xs); font-weight: 750;
  letter-spacing: .06em; text-transform: uppercase; color: var(--orange-600);
}
.qa__short-body {
  margin: 0; font-size: var(--fs-lg); line-height: 1.55; color: var(--ink);
  font-weight: 550; text-wrap: pretty;
}

/* Ruled margin down the long-form answer. On narrow screens the rule and the
   numerals move inline rather than being dropped — the numbering is how the
   sections read as a sequence, not decoration. */
.qa__sec { position: relative; padding-left: 3.5rem; margin-bottom: var(--sp-7); }
.qa__sec::before {
  content: ''; position: absolute; left: 1.1rem; top: .35rem; bottom: -.9rem;
  width: 1px; background: var(--line-2);
}
.qa__sec:last-child::before { bottom: .5rem; }
.qa__num {
  position: absolute; left: 0; top: 0;
  font-variant-numeric: tabular-nums; font-size: .75rem; font-weight: 750;
  letter-spacing: .04em; color: var(--orange-600);
  background: #fff; padding: .15rem 0 .35rem;
}
.qa__h { font-size: var(--fs-xl); margin: 0 0 var(--sp-3); letter-spacing: -.01em; }
.qa__sec p { margin: 0 0 var(--sp-4); max-width: 66ch; text-wrap: pretty; }
.qa__sec p:last-child { margin-bottom: 0; }

.qa__sig {
  border-top: 2px solid var(--warm-800); margin-top: var(--sp-8);
  padding-top: var(--sp-5); display: flex; flex-wrap: wrap;
  align-items: center; gap: var(--sp-5); justify-content: space-between;
}
.qa__sig p { margin: 0; max-width: 52ch; color: var(--ink-2); font-size: var(--fs-sm); }

.qa__rel { margin-top: var(--sp-7); }
.qa__rel-label {
  font-size: var(--fs-xs); font-weight: 750; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 .65rem;
}

@media (max-width: 560px) {
  .qa__sec { padding-left: 0; }
  .qa__sec::before { display: none; }
  .qa__num { position: static; display: block; margin-bottom: .35rem; padding: 0; }
  .qa__short { padding: var(--sp-4) var(--sp-5); }
  .qa__short-body { font-size: var(--fs-base); }
}

/* ---- questions hub ---- */

.qcat { margin-top: var(--sp-8); }
.qcat__head {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: .5rem var(--sp-4); border-bottom: 2px solid var(--warm-800);
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-5);
}
.qcat__h { margin: 0; font-size: var(--fs-xl); }
.qcat__blurb { grid-column: 1; margin: 0; color: var(--ink-3); font-size: var(--fs-sm); }
/* Tabular count sitting in the header's right edge — the same numeral motif
   as the work-order rows, doing the job an icon would otherwise do badly. */
.qcat__count {
  grid-row: 1 / span 2; grid-column: 2; align-self: center;
  font-variant-numeric: tabular-nums; font-size: var(--fs-2xl);
  font-weight: 800; color: color-mix(in srgb, var(--orange-500) 30%, #fff);
  line-height: 1;
}

.qcat__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: var(--sp-4);
}
.qcard {
  display: flex; flex-direction: column; gap: .55rem; height: 100%;
  background: #fff; border: 1px solid var(--rule); border-radius: var(--r);
  padding: var(--sp-5); text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
}
.qcard:hover, .qcard:focus-visible {
  border-color: var(--orange-500); box-shadow: var(--shadow-lg); transform: translateY(-3px);
}
.qcard__q { font-weight: 750; color: var(--ink); font-size: var(--fs-base); line-height: 1.35; text-wrap: balance; }
.qcard__a { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.55; flex: 1; }
.qcard__go {
  display: inline-flex; align-items: center; gap: .4em; margin-top: .35rem;
  font-size: var(--fs-xs); font-weight: 750; color: var(--orange-600);
}
.qcard__go .icon { width: 14px; height: 14px; transition: transform .16s var(--ease); }
.qcard:hover .qcard__go .icon { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .qcard, .qcard__go .icon { transition: none; }
  .qcard:hover { transform: none; }
  .qcard:hover .qcard__go .icon { transform: none; }
}

@media print {
  .topbar, .header, .callbar, .band, .footer__social { display: none !important; }
  body { color: #000; }
}