/* ==========================================================================
   GarageDoorHou.com
   Deliberately hand-written and small: a local service site does not need a
   framework, and a smaller stylesheet is a faster page for someone standing
   in a driveway on a phone.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- brand ---
     Red / grey / white. --red-600 is the brand red and is used ONLY on white
     or light grey; it measures 4.79:1 on #fff, which clears WCAG AA (4.5:1)
     for normal text. On dark surfaces use --red-400 (7.0:1 on --ink-900).
     Never set white text directly on --red-600 (3.9:1 — fails) without the
     --red-700 shade, which is what the button styles below use. */
  --red-700: #a81c26;
  --red-600: #c8102e;
  --red-500: #d22630;
  --red-400: #ff6b73;
  --red-50:  #fdeced;
  --ink-900: #1c1f24;
  --ink-800: #2b3038;
  --ink-700: #3d444e;
  --ink-500: #5f6773;
  --line: #dcdfe4;
  --bg: #ffffff;
  --bg-alt: #f1f2f2;
  --bg-warm: #faf7f7;
  --ok: #12734a;
  --err: #b3261e;
  --star: #f0a01a;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(11, 33, 56, .07), 0 1px 3px rgba(11, 33, 56, .06);
  --shadow-md: 0 8px 24px rgba(11, 33, 56, .10);
  --wrap: 1140px;
  --wrap-narrow: 720px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

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

/* Cheap insurance against a horizontal scrollbar from a wide child (a long
   unbroken token in content, a future nav label). Layout is verified clean at
   320/360/390/768/1024/1200/1300/1440px — see the breakpoint notes below. */
body { overflow-x: hidden; }


body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-900);
  background: var(--bg);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--red-600); }
a:hover { color: var(--ink-700); }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; color: var(--ink-900); letter-spacing: -.01em; }
h1 { font-size: clamp(1.85rem, 4vw, 2.7rem); }
h2 { font-size: clamp(1.35rem, 2.6vw, 1.85rem); margin-top: 1.8em; }
h3 { font-size: 1.15rem; margin-top: 1.5em; }
h4 { font-size: 1rem; }

p { margin: 0 0 1.1em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap--narrow { max-width: var(--wrap-narrow); }

.skip {
  position: absolute; left: -9999px; top: 0; background: #fff; padding: 10px 16px; z-index: 200;
}
.skip:focus { left: 0; }

.muted { color: var(--ink-500); font-size: .9em; }
.nowrap { white-space: nowrap; }
.eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--red-600); margin: 0 0 .6em;
}
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ topbar */
.topbar { background: var(--ink-900); color: #e8eaed; font-size: .86rem; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.topbar__note { margin: 0; }
.topbar__phone { color: #fff; text-decoration: none; display: inline-flex; gap: 8px; align-items: baseline; }
.topbar__phone-label { color: var(--red-600); font-weight: 600; }

/* ------------------------------------------------------------------ header */
.header { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 100; }
.header__inner { display: flex; align-items: center; gap: 10px; min-height: 70px; position: relative; }

.nav-toggle, .nav-toggle__label { display: none; }

/* ------------------------------------------------------------------- brand */
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; flex: 0 0 auto; }
.brand__logo { width: 250px; height: auto; flex: 0 0 auto; }
.header__phone {
  margin-left: auto; text-align: right; text-decoration: none; color: var(--ink-900);
  display: none; line-height: 1.15;
}
.header__phone span { display: block; font-size: .7rem; color: var(--ink-500); text-transform: uppercase; letter-spacing: .06em; }
.header__phone strong { font-size: 1.05rem; color: var(--red-600); }

/* --------------------------------------------------------------------- nav */
.nav { margin-left: 8px; }
.nav__list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; align-items: center; }
.nav__item { position: relative; }
.nav__item > a {
  display: flex; align-items: center; gap: 5px; padding: 12px 9px; border-radius: 6px;
  text-decoration: none; color: var(--ink-800); font-size: .88rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .01em; white-space: nowrap;
}
.nav__item > a:hover { color: var(--red-600); background: var(--bg-alt); }
.nav__item.is-active > a { color: var(--red-600); }

/* Dropdown: CSS-only on hover AND keyboard focus, so it works with no JS and
   survives a script failure. aria-expanded is toggled by site.js when present. */
.nav__caret {
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .65; transition: transform .15s;
}
.nav__item:hover .nav__caret, .nav__item:focus-within .nav__caret { transform: rotate(180deg); }
.nav__menu {
  position: absolute; top: 100%; left: 0; min-width: 268px; z-index: 120;
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--red-600);
  border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-md);
  list-style: none; margin: 0; padding: 8px; display: none;
}
.nav__item:hover > .nav__menu,
.nav__item:focus-within > .nav__menu { display: block; }
.nav__menu a {
  display: block; padding: 9px 12px; border-radius: 6px; text-decoration: none;
  color: var(--ink-700); font-size: .9rem; line-height: 1.35;
}
.nav__menu a:hover { background: var(--bg-alt); color: var(--red-600); }
.nav__menu .nav__all { font-weight: 700; color: var(--red-600); border-top: 1px solid var(--line); margin-top: 4px; padding-top: 11px; border-radius: 0 0 6px 6px; }
.nav__group { padding: 10px 12px 4px; font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-500); }

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: 9px; border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: .95rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, transform .05s;
}
.btn--lg { padding: 14px 24px; font-size: 1.02rem; }
.btn--tiny { padding: 6px 10px; font-size: .82rem; border-radius: 6px; }
.btn--primary { background: var(--red-700); color: #fff; border-color: var(--red-700); }
.btn--primary:hover { background: var(--red-600); color: #fff; border-color: var(--red-600); }
/* Ghost is the on-dark secondary button. On light surfaces it must switch to
   the outline treatment below — white text on #f1f2f2 is invisible, which is
   exactly what happened when the hero moved from a dark to a light field. */
.btn--ghost { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.header .btn--ghost { border-color: var(--line); color: var(--ink-800); }
.btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.header .btn--ghost:hover { background: var(--bg-alt); color: var(--ink-800); }
/* Outline: the secondary button for LIGHT backgrounds. 9.8:1 text contrast. */
.btn--outline { background: #fff; border-color: var(--ink-700); color: var(--ink-900); }
.btn--outline:hover { background: var(--red-600); border-color: var(--red-600); color: #fff; }
.hero .btn--outline, .reviews__side .btn--outline { background: #fff; }
.header__cta { white-space: nowrap; flex: 0 0 auto; }
/* Full-width calls-to-action carry the phone number; give them a real hit area
   (>=48px) so they clear every tap-target guideline. */
.btn--call { min-height: 48px; }
.btn:active { transform: translateY(1px); }

/* -------------------------------------------------------------------- hero */
/* The homepage opens with the service image and a short, high-contrast answer.
   The form moves into a modal so the visual hierarchy starts with the brand. */
.hero { position: relative; min-height: 600px; overflow: hidden; background: var(--ink-900); color: #fff; }
.hero__image { position: absolute; inset: 0; }
.hero__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28,31,36,.92) 0%, rgba(28,31,36,.72) 42%, rgba(28,31,36,.18) 100%); }
.hero__image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__inner { position: relative; min-height: 600px; display: flex; align-items: center; padding: 52px 20px 56px; }
.hero__copy { max-width: 620px; }
.hero h1 { color: #fff; margin-bottom: .4em; max-width: 15ch; text-wrap: balance; }
.hero .eyebrow { color: #ff9aa0; }
.hero__lede { font-size: 1.08rem; color: #f0f1f2; max-width: 46ch; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 22px; }
.hero__points { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.hero__points li { position: relative; padding-left: 26px; color: rgba(255,255,255,.92); font-size: .95rem; }
.hero__points li::before {
  content: ""; position: absolute; left: 4px; top: .55em; width: 9px; height: 9px;
  border-radius: 50%; background: var(--red-600);
}

/* --------------------------------------------------------------- estimate modal */
.estimate-modal {
  width: min(720px, calc(100% - 28px)); max-height: calc(100dvh - 28px); overflow: auto;
  border: 0; border-radius: var(--radius-lg); padding: 0; color: var(--ink-900);
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
}
.estimate-modal::backdrop { background: rgba(28,31,36,.76); backdrop-filter: blur(3px); }
.estimate-modal__body { padding: 28px; }
.estimate-modal .leadform { max-width: none; margin: 0; padding: 0; box-shadow: none; }
.estimate-modal__close {
  position: sticky; float: right; top: 14px; z-index: 2; width: 40px; height: 40px;
  margin: 14px 14px -54px 0; border: 1px solid var(--line); border-radius: 50%;
  background: #fff; color: var(--ink-700); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.estimate-modal__close:hover { color: var(--red-600); border-color: var(--red-600); }
.estimate-modal:focus { outline: none; }
.estimate-modal.is-open { display: block; position: fixed; inset: 14px; margin: auto; z-index: 150; }
.estimate-noscript { margin: 18px auto; padding: 12px 20px; text-align: center; }
body.modal-open { overflow: hidden; }

/* --------------------------------------------------------------- hero photo */
.hero-photo { position: relative; min-height: 430px; overflow: hidden; background: var(--ink-900); }
.hero-photo__image { position: absolute; inset: 0; }
.hero-photo__image::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(28,31,36,.93) 0%, rgba(28,31,36,.76) 33%, rgba(28,31,36,.08) 72%, rgba(28,31,36,.18) 100%);
}
.hero-photo__image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-photo__inner { position: relative; min-height: 430px; display: flex; align-items: center; }
.hero-photo__card { max-width: 470px; padding: 30px 32px; border-left: 4px solid var(--red-500); color: #fff; background: rgba(28,31,36,.72); box-shadow: var(--shadow-md); }
.hero-photo__card h2 { margin-top: 0; color: #fff; font-size: clamp(1.6rem, 3vw, 2.25rem); }
.hero-photo__card p:not(.eyebrow) { color: #f0f1f2; }
.hero-photo__card .eyebrow { color: #ff9aa0; }

/* ---------------------------------------------------------------- leadform */
.leadform {
  background: #fff; color: var(--ink-900); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 26px; scroll-margin-top: 90px;
}
.page > .leadform, .page ~ .leadform { margin: 0 auto; }
main > .leadform, .hero .leadform { max-width: none; }
.leadform__head h2 { margin: 0 0 .25em; font-size: 1.3rem; }
.leadform__head p { color: var(--ink-500); font-size: .92rem; margin-bottom: 1.2em; }
.leadform__form { display: block; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .86rem; font-weight: 600; color: var(--ink-700); }
.field .req { color: var(--err); }
.field .opt { color: var(--ink-500); font-weight: 400; }
.field input, .field select, .field textarea {
  font: inherit; font-size: .95rem; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; color: var(--ink-900); width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--red-600); outline-offset: 1px; border-color: var(--red-600);
}
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--err); }
.field__error { color: var(--err); font-size: .82rem; margin: 0; }
.leadform__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.leadform__alt { margin: 0; font-size: .92rem; color: var(--ink-500); }
.leadform__privacy { font-size: .78rem; color: var(--ink-500); margin: 12px 0 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert { padding: 11px 14px; border-radius: 8px; font-size: .9rem; margin: 0 0 16px; }
.alert--error { background: #fdecea; color: var(--err); border: 1px solid #f5c6c2; }

/* standalone form on inner pages */
.page + .leadform, .related + .leadform, .hubchildren + .leadform {
  max-width: var(--wrap-narrow); margin: 40px auto; padding: 26px;
}

/* --------------------------------------------------------------- sections */
section { padding: 0; }
.paths, .pillars, .areas { padding: 40px 0; }
.paths { padding: 40px 0; background: var(--bg-alt); }
.paths h2 { margin-top: 0; }
.areas { background: var(--bg-alt); }
.section__lede { color: var(--ink-500); margin-top: -.4em; }
.map-embed {
  position: relative; min-height: 480px; margin: 28px 0 34px; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: #e8efec;
  box-shadow: var(--shadow-sm);
}
.service-area-map { width: 100%; height: 480px; }
.leaflet-container { font: inherit; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 16px; }
.cards--three { grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }
.card {
  display: flex; flex-direction: column; gap: 7px; padding: 20px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none;
  color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.card:hover { border-color: var(--red-600); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.card--lg { padding: 24px; }
.card__role {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--red-600);
}
.card__title { font-size: 1.06rem; color: var(--ink-900); }
.card__desc { font-size: .92rem; color: var(--ink-500); }

.commercial-band { background: var(--ink-900); color: #d7dae0; padding: 44px 0; }
.commercial-band h2 { color: #fff; }
.commercial-band__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: center; }
.commercial-band .eyebrow { color: var(--red-600); }
.commercial-band__list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 7px; }
.commercial-band__list a { color: var(--red-600); }
.commercial-band__cta {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-lg); padding: 22px;
}
.commercial-band__ctaTitle { font-weight: 700; color: #fff; margin-bottom: .3em; }
/* --------------------------------------------------------------- gallery */
.gallery { padding: 46px 0; background: var(--bg-alt); }
.gallery h2 { margin-top: 0; text-align: center; }
.gallery .section__lede { text-align: center; }
.gallery__grid { list-style: none; padding: 0; margin: 30px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.gallery__item { position: relative; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); background: var(--ink-900); }
.gallery__item img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.gallery__label { position: absolute; left: 10px; bottom: 10px; padding: 4px 11px; border-radius: 999px; background: rgba(28,31,36,.78); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.gallery__note { margin: 16px 0 0; text-align: center; color: var(--ink-500); font-size: .8rem; }

.areas__list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.areas__list li {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 13px; font-size: .88rem; color: var(--ink-700);
}

/* ------------------------------------------------------------------- pages */
/* Head: breadcrumb, then H1, lede and a single meta row — no eyebrow above the
   title. The old tracked-out all-caps eyebrow competed with the H1 for the
   first glance and repeated what the breadcrumb already said.
   The H1, lede and meta are centred while the body below stays left-aligned:
   the heading announces the page, the detail is read. Mixing those two is what
   made the head look misaligned. */
.page__head { padding: 24px 0 18px; }
.page__head .wrap--narrow { text-align: center; }
.page__head h1 { margin-bottom: .35em; text-wrap: balance; }
.page__head .lede { font-size: 1.1rem; color: var(--ink-700); margin-left: auto; margin-right: auto; max-width: 62ch; }
.page__meta { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; font-size: .82rem; color: var(--ink-500); margin: 16px 0 0; }
.service-tag { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink-700); }
.service-tag img { width: 22px; height: 22px; border-radius: 6px; flex: 0 0 auto; }

/* Wide photo band between the page head and the body. Height is clamped and the
   image is clipped, so one asset serves every width without reflow or layout
   shift (the intrinsic width/height attributes keep the reserved space). */
.page__band { margin: 0 0 30px; }
.page__band img { display: block; width: 100%; height: auto; aspect-ratio: 2.15 / 1; object-fit: cover; border-radius: var(--radius-lg); }
.page__hero { margin: 0 0 30px; }
.page__hero img { width: 100%; height: auto; border-radius: var(--radius-lg); }
.page__body { padding: 10px 20px 30px; }

.prose { font-size: 1.03rem; }
.page__body .prose {
  max-width: 72ch; margin: 0 auto; overflow-wrap: anywhere;
}
.page__body .prose > h2, .page__body .prose > h3 { text-align: center; }
.prose > * { max-width: 72ch; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: .4em; }
.prose h2 { scroll-margin-top: 90px; }
.prose h3 { scroll-margin-top: 90px; }
.prose img { border-radius: var(--radius); margin: 1.4em 0; }
.prose code { background: var(--bg-alt); padding: 2px 6px; border-radius: 5px; font-size: .9em; }
.prose pre { background: var(--ink-900); color: #e8eaed; padding: 16px; border-radius: var(--radius); overflow: auto; }
.prose pre code { background: none; color: inherit; padding: 0; }
.prose blockquote {
  margin: 1.5em 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--red-600);
  color: var(--ink-700);
}
.prose table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.prose th { background: var(--bg-alt); font-size: .84rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-700); }
.table-wrap { overflow-x: auto; max-width: 100%; margin: 1.5em 0; }
.prose .table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose .table-wrap table { min-width: 560px; }

.callout {
  background: var(--bg-warm); border: 1px solid #f2d3d6; border-left: 4px solid var(--red-600);
  border-radius: var(--radius); padding: 16px 18px; margin: 1.6em 0;
}
.callout > *:last-child { margin-bottom: 0; }
.callout--note { background: var(--bg-alt); border-color: var(--line); border-left-color: var(--ink-700); }

.cta {
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 20px 22px; margin: 1.8em 0;
}
.cta__title { font-weight: 700; font-size: 1.08rem; color: var(--ink-900); margin-bottom: .3em; }
.cta > *:last-child { margin-bottom: 0; }

.faq { margin: 1.6em 0; max-width: 72ch; }
.faq__item { border-bottom: 1px solid var(--line); padding: 12px 0; }
.faq__q { cursor: pointer; font-weight: 600; color: var(--ink-900); list-style: none; position: relative; padding-right: 28px; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+"; position: absolute; right: 4px; top: -2px; font-size: 1.3rem;
  color: var(--red-600); font-weight: 400;
}
.faq__item[open] .faq__q::after { content: "–"; }
.faq__a { padding-top: .6em; color: var(--ink-700); }
.faq__a > *:last-child { margin-bottom: 0; }

.hubchildren, .related { padding: 30px 0; border-top: 1px solid var(--line); margin-top: 26px; }
.related__list { list-style: none; padding: 0; display: grid; gap: 8px; }
.related__list a { font-weight: 500; }

.crumbs { padding: 14px 0 0; font-size: .82rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; color: var(--ink-500); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line); }
.crumbs a { color: var(--ink-500); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ------------------------------------------------------------ site cta/foot */
.site-cta { background: var(--ink-800); color: #fff; padding: 34px 0; }
.site-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.site-cta h2 { color: #fff; margin: 0 0 .2em; font-size: 1.3rem; }
.site-cta p { margin: 0; color: #c9ccd2; }
.site-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.footer { background: var(--ink-900); color: #a8adb6; padding: 44px 0 20px; font-size: .92rem; }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 28px; }
.footer__brand { color: #fff; font-weight: 700; font-size: 1.05rem; margin-bottom: .6em; }
.footer__logo { display: block; width: min(260px, 100%); height: auto; margin-bottom: 18px; }
.footer__nap { font-style: normal; line-height: 1.7; }
.footer a { color: #e8eaed; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer__head { color: #fff; font-weight: 600; margin-bottom: .7em; font-size: .88rem; text-transform: uppercase; letter-spacing: .05em; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; }
.footer__more { margin-top: 10px; }
.footer__hours { color: #9aa0a8; font-size: .88rem; }
.footer__social { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.footer__social a {
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 6px 13px;
  font-size: .8rem; font-weight: 600; white-space: nowrap;
}
.footer__social a:hover { border-color: #fff; }
.footer__legal {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 30px; padding-top: 16px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .84rem; color: #9aa0a8;
}
.footer__legal p { margin: 0; }

.callbar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 120;
  background: var(--red-600); color: #fff; text-align: center;
  padding: 12px; font-weight: 700; text-decoration: none;
  box-shadow: 0 -4px 16px rgba(0,0,0,.18);
}
.callbar span { font-weight: 500; font-size: .82rem; margin-right: 8px; }

/* ------------------------------------------------------------------ thanks */
.thanks { padding: 46px 0; }
.thanks__steps { padding-left: 22px; display: grid; gap: 14px; margin: 26px 0; }
.thanks__steps strong { display: block; color: var(--ink-900); }
.thanks__urgent { background: var(--bg-warm); border: 1px solid #f2d3d6; border-radius: var(--radius-lg); padding: 20px 22px; margin: 26px 0; }
.thanks__links ul { padding-left: 20px; }

.notfound { padding: 46px 0 60px; }
.notfound__cta { margin-top: 26px; }

/* ------------------------------------------------------------------- admin */
.admin { padding: 32px 0; }
.admin--login { padding: 60px 0; }
.admin__login { max-width: 340px; display: grid; gap: 14px; margin-top: 20px; }
.admin__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.admin__bar h1 { margin: 0; }
.admin__bar-actions { display: flex; gap: 10px; }
.admin__bar .btn--ghost { border-color: var(--line); color: var(--ink-800); }
.admin__bar .btn--ghost:hover { background: var(--bg-alt); color: var(--ink-800); }
.admin__stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
.stat {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 16px;
  text-decoration: none; color: inherit; min-width: 92px; text-align: center; background: #fff;
}
.stat strong { display: block; font-size: 1.3rem; color: var(--ink-800); }
.stat span { font-size: .78rem; color: var(--ink-500); text-transform: uppercase; letter-spacing: .04em; }
.stat.is-active { border-color: var(--red-600); background: #f1f2f2; }
.admin__table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin__table th, .admin__table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin__table th { background: var(--bg-alt); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-700); }
.admin__msg { max-width: 280px; font-size: .88rem; color: var(--ink-700); }
.admin__status { display: flex; gap: 6px; }
.admin__status select { font-size: .84rem; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; }
.admin__empty { padding: 30px; background: var(--bg-alt); border-radius: var(--radius); color: var(--ink-500); }
.tag {
  display: inline-block; background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 9px; font-size: .76rem; color: var(--ink-700);
}
.admin--map code { background: var(--bg-alt); padding: 1px 6px; border-radius: 5px; }
.mapgroup { border-left: 3px solid var(--line); padding-left: 16px; margin-bottom: 22px; }
.mapgroup__hub { margin: 0 0 6px; }
.mapgroup__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: .92rem; }
.mapgroup__list strong { color: var(--red-600); margin-right: 6px; font-size: .84rem; }
.mapgroup__hub strong { color: var(--red-600); margin-right: 6px; font-size: .84rem; }

/* ------------------------------------------------------------ trust badges */
/* Only rendered when config['trust'] actually holds a real credential — see
   templates/partials/trust-badges.php. Never add a badge for an accreditation
   the business does not hold. */
.trustbar { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; }
.trustbar__head {
  text-align: center; font-size: .74rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-500); margin: 0 0 14px;
}
.trustbar__list {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
  justify-content: center; align-items: stretch; gap: 12px;
}
.trustbar__item {
  display: flex; align-items: center; gap: 10px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 15px; min-height: 48px;
}
.trustbar__logo { width: 34px; height: 34px; flex: 0 0 auto; }
.trustbar__label { font-size: .78rem; color: var(--ink-500); line-height: 1.25; display: block; }
.trustbar__value { font-size: .92rem; font-weight: 700; color: var(--ink-900); line-height: 1.25; display: block; }
.trustbar__item--rating .trustbar__value { color: var(--red-600); }

.stars { display: inline-flex; gap: 1px; color: var(--star); font-size: .95rem; line-height: 1; }
.stars span[aria-hidden] { opacity: .28; }

/* ----------------------------------------------------------------- reviews */
/* Displayed as plain content. Deliberately NOT wrapped in Review /
   AggregateRating JSON-LD: Google disqualifies self-hosted reviews about your
   own organisation (including third-party widgets), so the markup would earn
   nothing and risks a structured-data penalty. */
.reviews { padding: 58px 0; background: #fff; border-top: 1px solid var(--line); }
.reviews__head { margin-top: 0; text-align: center; }
.reviews__lede { text-align: center; color: var(--ink-500); margin: -.4em 0 28px; }
.reviews__badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 30px; }
.reviews__badge { min-height: 84px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-alt); color: var(--ink-700); text-align: center; font-size: .75rem; font-weight: 700; line-height: 1.18; }
.reviews__badge b { color: var(--red-600); font-size: .85rem; letter-spacing: .04em; white-space: nowrap; }
.reviews__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: start; }
.review { position: relative; }
.review__mark {
  font-size: 3.4rem; line-height: .7; color: var(--red-600); font-weight: 800; display: block; margin-bottom: 4px;
}
.review__stars { margin-bottom: 12px; font-size: 1.15rem; }
.review__quote { font-size: 1.02rem; color: var(--ink-700); margin: 0 0 14px; }
.review__who { font-weight: 700; color: var(--red-600); margin: 0; }
.review__meta { font-size: .82rem; color: var(--ink-500); margin: 2px 0 0; }
.review__nav { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.review__arrow {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: #fff;
  color: var(--ink-700); font-size: 1.1rem; cursor: pointer; display: grid; place-items: center;
}
.review__arrow:hover { border-color: var(--red-600); color: var(--red-600); }
.review__arrow[disabled] { opacity: .35; cursor: default; }
.review__count { font-size: .84rem; color: var(--ink-500); }
.reviews__side { background: var(--bg-alt); border-radius: var(--radius-lg); padding: 22px; }
.reviews__side h3 { margin-top: 0; font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; }
.reviews__score { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.reviews__score b { font-size: 2.1rem; color: var(--red-600); line-height: 1; }
.reviews__side .btn { width: 100%; margin-top: 10px; }
.reviews__trustmarks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 18px; }
.reviews__trustmarks span { min-height: 56px; display: grid; place-items: center; padding: 7px; text-align: center; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-700); font-size: .74rem; font-weight: 700; line-height: 1.15; }
.reviews__empty {
  border: 1px dashed var(--line); border-radius: var(--radius); padding: 20px;
  color: var(--ink-500); font-size: .9rem; text-align: center;
}

/* --------------------------------------------------------- service icons */
.svcgrid { padding: 46px 0; background: var(--bg-alt); }
.svcgrid h2 { margin-top: 0; }
.svcgrid h2, .svcgrid .section__lede { text-align: center; }
.svccards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.svccard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 20px;
  text-align: center; text-decoration: none; color: inherit; display: flex; flex-direction: column;
  align-items: center; transition: box-shadow .15s, transform .15s, border-color .15s;
}
.svccard:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--red-600); }
.svccard__icon {
  width: 62px; height: 62px; border-radius: 50%; background: var(--red-50); color: #fff;
  display: grid; place-items: center; margin-bottom: 14px; flex: 0 0 auto;
}
.svccard__icon img { width: 62px; height: 62px; border-radius: 50%; }
.svccard__title { font-size: 1.05rem; font-weight: 800; color: var(--red-600); margin: 0 0 8px; text-transform: uppercase; letter-spacing: -.005em; }
.svccard__desc { font-size: .92rem; color: var(--ink-700); margin: 0 0 16px; }
.svccard__more {
  margin-top: auto; border: 1px solid var(--line); border-radius: 6px; padding: 9px 20px;
  font-size: .84rem; font-weight: 700; color: var(--ink-800); text-transform: uppercase; letter-spacing: .04em;
}
.svccard:hover .svccard__more { background: var(--red-600); border-color: var(--red-600); color: #fff; }
.svccard { padding: 0 0 24px; overflow: hidden; border-radius: 8px; }
.svccard__photo { display: block; width: 100%; margin-bottom: 22px; }
.svccard__photo img { display: block; width: 100%; aspect-ratio: 2 / 1; height: auto; object-fit: cover; }
.svccard__title, .svccard__desc { padding-inline: 20px; }
.svccard__icon { margin-top: -42px; position: relative; border: 4px solid #fff; width: 70px; height: 70px; }
.svccard__icon img { width: 62px; height: 62px; }
.svcgrid h2, .gallery h2 { color: var(--red-700); text-transform: uppercase; }

/* --------------------------------------------------------- estimate band */
.estimate { padding: 46px 0; background: #fff; }
.estimate__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 36px; align-items: center; }
.estimate h2 { text-transform: uppercase; color: var(--red-600); }
.estimate__points { list-style: none; padding: 0; margin: 16px 0 22px; display: grid; gap: 9px; }
.estimate__points li { position: relative; padding-left: 26px; color: var(--ink-700); }
.estimate__points li::before {
  content: ""; position: absolute; left: 3px; top: .5em; width: 10px; height: 10px;
  border-radius: 50%; background: var(--red-600);
}
.estimate__art {
  background: var(--bg-alt); border-radius: var(--radius-lg); min-height: 260px;
  display: grid; place-items: center; color: var(--ink-500); font-size: .88rem; text-align: center; padding: 24px;
}
.estimate__art strong { color: var(--ink-900); }
.estimate__art--van { background: transparent; padding: 0; gap: 18px; }
.estimate__art--van picture { display: block; width: 100%; max-width: 640px; }
.estimate__art--van img { display: block; width: 100%; height: auto; object-fit: contain; }
.estimate__resources { width: 100%; }
.estimate__art--van .estimate__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; margin: 0; }
.estimate__art--van .estimate__links a { display: inline-block; padding-block: 8px; }
.estimate__links { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.estimate__links a { font-weight: 700; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1320px) {
  /* Below this width the inline nav crowds the phone + CTA, so collapse to the
     hamburger earlier than the old 980px breakpoint. */
  .nav { display: none; }
  .nav-toggle__label {
    display: flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer;
    padding: 12px; margin-left: auto; width: 48px; height: 48px;
  }
  .nav-toggle__label span { width: 24px; height: 2px; background: var(--ink-800); display: block; }
  .nav-toggle:checked ~ .nav {
    display: block; position: absolute; left: 0; right: 0; top: 100%; max-height: 78vh; overflow-y: auto;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md);
    padding: 8px 14px 16px;
  }
  .nav-toggle:checked ~ .nav .nav__list { flex-direction: column; gap: 0; align-items: stretch; }
  .nav-toggle:checked ~ .nav .nav__item > a {
    padding: 14px 10px; border-bottom: 1px solid var(--line); text-transform: none; font-size: 1rem;
  }
  /* Accordion: the submenu stays in flow inside the mobile panel. */
  .nav-toggle:checked ~ .nav .nav__menu {
    display: block; position: static; border: 0; border-top: 0; box-shadow: none;
    min-width: 0; padding: 4px 0 8px 14px; background: var(--bg-alt); border-radius: 0;
  }
  .nav-toggle:checked ~ .nav .nav__menu a { padding: 12px 10px; min-height: 48px; display: flex; align-items: center; }
  .nav-toggle:checked ~ .nav .nav__caret { display: none; }
  .header__cta { display: none; }
  .header__phone { display: block; margin-left: 0; }
  .svccards { grid-template-columns: 1fr 1fr; }
  .reviews__grid { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 980px) {
  .estimate__inner { grid-template-columns: 1fr; }
  .hero__inner { min-height: 560px; gap: 30px; padding-top: 40px; }
  .commercial-band__inner { grid-template-columns: 1fr; }
  .gallery__grid { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 420px) {
  /* At 320px the mark + full wordmark + 48px hamburger need 343px in a 320px
     viewport, so the wordmark goes and the shield mark carries the brand. */
  .brand__text { display: none; }
  .header__inner { gap: 8px; }
  .wrap { padding: 0 14px; }
  .gallery__grid { grid-template-columns: 1fr; }
  .page__body { padding-left: 14px; padding-right: 14px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .field-grid { grid-template-columns: 1fr; }
  .topbar__note { display: none; }
  .topbar__inner { justify-content: center; }
  .brand__logo { width: 200px; height: auto; }
  .brand__text strong { font-size: .95rem; }
  /* The header phone cannot fit on one line at this width and would wrap into
     a 4-line block. The sticky call bar already gives a full-width tap-to-call
     below, so drop the header copy rather than stack it. */
  .header__phone { display: none; }
  .footer__grid { grid-template-columns: 1fr; }
  .callbar { display: block; }
  .footer { padding-bottom: 70px; }
  .site-cta { padding-bottom: 70px; }
  .leadform { padding: 20px; }
  .hero-photo, .hero-photo__inner { min-height: 0; }
  .map-embed { min-height: 360px; }
  .service-area-map { height: 360px; }
  .hero-photo__image { position: relative; height: 240px; }
  .hero-photo__image::after { display: none; }
  .hero-photo__image img { object-position: 78% center; }
  .hero-photo__card { margin: 26px 0; padding: 8px 18px; background: transparent; box-shadow: none; }
  .hero { min-height: 0; }
  .hero__image { position: relative; height: 250px; }
  .hero__inner { min-height: 0; padding: 28px 20px 36px; }
  .hero__image img { object-position: 88% center; }
  .hero__image::after { background: linear-gradient(0deg, var(--ink-900), transparent 28%); }
  .hero h1 { max-width: 17ch; }
  .estimate-modal__body { padding: 22px 20px; }
  /* Comfortable touch sizing on phones */
  .field input, .field select, .field textarea { min-height: 46px; }
  .btn { min-height: 46px; }
  /* The topbar phone is redundant on a phone — the sticky call bar and the
     header phone both sit within thumb reach. Hiding it removes a 23px-tall
     tap target rather than leaving a sub-minimum one. */
  .topbar__phone { display: none; }
  .svccards { grid-template-columns: 1fr; }
  .gallery__grid { grid-template-columns: 1fr; gap: 20px; }
  .trustbar__item { flex: 1 1 100%; }
  .review__arrow { width: 48px; height: 48px; }
  .reviews__trustmarks { grid-template-columns: 1fr; }
  .reviews__badges { grid-template-columns: 1fr 1fr; gap: 8px; }
  .reviews__badge { min-height: 74px; padding: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .topbar, .header, .site-cta, .footer, .callbar, .leadform { display: none; }
}

/* ------------------------------------------------- pre-publication banner */
/* Shown while a page still contains unreplaced pricing placeholders. The page
   is also noindex while this is visible — see app/render.php. */
.draftbanner {
  background: #4a2c00;
  color: #f7dadd;
  font-size: .88rem;
  padding: 12px 0;
  border-bottom: 3px solid var(--red-600);
}
.draftbanner strong { color: #fff; }
.draftbanner code {
  background: rgba(255,255,255,.12);
  padding: 1px 6px;
  border-radius: 4px;
  color: #fff;
}

/* ------------------------------------------------------- language switcher */
/* Sits in the topbar next to the phone. The phone is the primary action, so
   the switcher is quieter than it: same row, lower emphasis. */
.topbar__actions { display: flex; align-items: center; gap: 14px; }
.topbar__lang {
  display: inline-flex; align-items: center; gap: 6px; color: #e8eaed; text-decoration: none;
  font-size: .84rem; font-weight: 600; padding: 6px 4px; border-radius: 6px;
  border-bottom: 1px solid transparent;
}
.topbar__lang:hover, .topbar__lang:focus-visible { color: #fff; border-bottom-color: var(--red-400); }
.topbar__lang svg { opacity: .8; flex: 0 0 auto; }
@media (max-width: 640px) {
  /* The floor: switcher stays, the redundant topbar phone goes (the sticky call
     bar below already covers calling). */
  .topbar__actions { gap: 10px; }
  .topbar__inner { justify-content: space-between; }
}

/* ----------------------------------------------------- credential strip */
/* Short factual claims, placed where the visitor decides. Deliberately text
   rather than badge images: these are things the business can be held to, and
   a real sentence reads as a claim where a seal reads as decoration. */
.creds {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
  gap: 8px 22px; align-items: center;
}
.creds__item {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .9rem; font-weight: 600; color: var(--ink-800);
}
.creds__item svg { color: var(--red-600); flex: 0 0 auto; }
/* On the homepage it sits on white under the hero, so it needs its own spacing. */
.hero + .creds, .hero + * .creds { margin-top: 0; }
/* Homepage assurance row: the same factual claims as badges, not a sentence. */
.home-creds {
  background: #fff; border-bottom: 1px solid var(--line); padding: 18px 0;
}
.home-creds .wrap { display: flex; justify-content: center; }
.home-creds .creds { justify-content: center; gap: 10px; }
.home-creds .creds__item {
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px; font-size: .85rem; white-space: nowrap;
}
/* In the dark footer, invert. */
.footer .creds { margin: 12px 0 0; gap: 6px 18px; }
.footer .creds__item { color: #e8eaed; font-size: .84rem; }
.footer .creds__item svg { color: var(--red-400); }
@media (max-width: 640px) {
  .creds { gap: 6px 14px; }
  .creds__item { font-size: .84rem; }
}

/* ------------------------------------------------------- trust badge marks */
/* Monogram shown when no official seal image has been supplied. Neutral by
   design: it attributes a claim to its source without imitating anyone's
   trademarked seal, which only the issuing programme may license. */
.trustbar__mark {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 8px;
  display: grid; place-items: center; background: var(--red-50); color: var(--red-700);
  font-weight: 800; font-size: .82rem; letter-spacing: -.02em; line-height: 1;
}
.trustbar__item--rating .trustbar__mark { background: var(--red-700); color: #fff; }