/* ==========================================================================
   Mighty Garage Doors
   Palette sampled from the company logo: orange #E1502A, navy #25348B.
   System fonts only - no webfont request, no layout shift from font swap.
   ========================================================================== */

:root {
  /* Logo orange. Used for icons, rules and accents where contrast is not
     carried by the colour itself. */
  --orange: #e1502a;
  /* Slightly deeper orange for solid CTA buttons. White text on the logo
     orange only reaches 3.9:1; this reaches 4.85:1 and still reads as the
     same brand colour. */
  --orange-cta: #c9441f;
  --orange-dark: #b93c1c;
  --orange-soft: #fdf0ec;
  --navy: #25348b;
  --navy-dark: #1a265f;
  --navy-soft: #eef0f9;

  --ink: #17181c;
  --ink-2: #2e3138;
  --body: #4a4f58;
  --muted: #6d737e;

  --paper: #faf8f5;
  --paper-2: #f3efe9;
  --white: #ffffff;
  --line: #e2ddd5;
  --line-strong: #cdc6bb;

  --shadow-sm: 0 1px 2px rgba(23, 24, 28, .06);
  --shadow: 0 2px 8px rgba(23, 24, 28, .08);
  --shadow-lg: 0 12px 32px rgba(23, 24, 28, .14);

  --radius: 4px;
  --radius-lg: 6px;

  --wrap: 1180px;
  --gap: 1.5rem;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --sticky-h: 0px;
}

*, *::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: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--body);
  background: var(--paper);
  padding-bottom: var(--sticky-h);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--ink); font-weight: 700; line-height: 1.18; letter-spacing: -.018em; margin: 0 0 .6em; }
h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.1rem); letter-spacing: -.026em; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.05rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.35rem); }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--orange-dark); }

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

strong { color: var(--ink-2); font-weight: 700; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; background: var(--paper-2); padding: .1em .35em; border-radius: 3px; }

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

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
/* Wider container for content that needs the room, such as the review wall. */
.wrap--wide { width: min(100% - 2.5rem, 1500px); margin-inline: auto; }
@media (max-width: 560px) { .wrap { width: min(100% - 1.75rem, var(--wrap)); } }

.skip-link {
  position: absolute; left: .5rem; top: -100px; z-index: 200;
  background: var(--navy); color: #fff; padding: .75rem 1.1rem;
  border-radius: var(--radius); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: .5rem; color: #fff; }

.icon { flex: none; }
.icon--inline { vertical-align: -.15em; }

/* ===== Buttons =========================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .8rem 1.35rem; border-radius: var(--radius);
  font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none;
  border: 2px solid transparent; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--call { background: var(--orange-cta); color: #fff; border-color: var(--orange-cta); }
.btn--call:hover { background: var(--orange-dark); border-color: var(--orange-dark); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--white); border-color: var(--ink); color: var(--ink); }
.btn--navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn--navy:hover { background: var(--navy-dark); border-color: var(--navy-dark); color: #fff; }
.btn--lg { padding: .95rem 1.6rem; font-size: 1.075rem; }
.btn--block { width: 100%; }

/* ===== Header ============================================================ */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 90;
}
.site-header__inner { display: flex; align-items: center; gap: 1rem; min-height: 78px; }
.brand { display: flex; align-items: center; flex: none; }
.brand__logo { width: 188px; height: auto; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .55rem .7rem; border-radius: var(--radius);
  color: var(--ink-2); font-weight: 600; font-size: .96rem; text-decoration: none;
  background: none; border: 0; font-family: inherit; cursor: pointer;
}
.nav__link:hover { background: var(--paper-2); color: var(--ink); }
.nav__chev { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.nav__item { position: relative; }
.nav__disclosure[aria-expanded="true"] { background: var(--paper-2); }

.mega {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 1.25rem; z-index: 100;
  min-width: 620px;
}
.mega[hidden] { display: none; }
.mega__inner { display: grid; gap: 1.1rem; }
.mega__group-h {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); font-weight: 700; margin: 0 0 .5rem;
}
.mega__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.75rem; }
.mega__cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.mega__list a {
  display: block; padding: .34rem .45rem; border-radius: 3px;
  color: var(--ink-2); text-decoration: none; font-size: .93rem; font-weight: 500;
}
.mega__list a:hover { background: var(--orange-soft); color: var(--orange-dark); }
.mega__all {
  display: inline-block; font-weight: 700; font-size: .92rem;
  color: var(--orange-dark); text-decoration: none; padding-top: .35rem;
  border-top: 1px solid var(--line);
}
.mega__all:hover { text-decoration: underline; }

.site-header__cta { flex: none; }
.header-phone {
  display: flex; flex-direction: column; line-height: 1.15;
  text-decoration: none; padding: .45rem .95rem;
  border-left: 1px solid var(--line);
}
.header-phone__label { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; }
.header-phone__number { font-size: 1.24rem; font-weight: 800; color: var(--orange-dark); letter-spacing: -.02em; }
.header-phone:hover .header-phone__number { color: var(--orange); }

.nav-toggle {
  display: none; margin-left: auto; width: 46px; height: 46px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--white); cursor: pointer; padding: 11px 10px;
  flex-direction: column; justify-content: space-between;
}
.nav-toggle__bar { display: block; height: 2px; background: var(--ink); border-radius: 2px; }

@media (max-width: 1040px) {
  .nav-toggle { display: flex; order: 3; margin-left: .5rem; }
  /* Logo, phone and the menu button all share one row; the nav panel drops
     below. Without this the phone wraps onto its own line and pushes the H1
     and the hero call button down the screen on a phone. */
  .site-header__inner { min-height: 66px; flex-wrap: wrap; gap: .5rem; }
  .brand { margin-right: auto; }
  .nav {
    margin-left: 0; order: 3; width: 100%;
    max-height: 0; overflow: hidden; transition: max-height .22s ease;
  }
  .nav.is-open { max-height: 80vh; overflow-y: auto; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 0 1rem; }
  .nav__list > li { border-bottom: 1px solid var(--line); }
  .nav__link { width: 100%; justify-content: space-between; padding: .85rem .25rem; font-size: 1.02rem; border-radius: 0; }
  .mega { position: static; transform: none; min-width: 0; box-shadow: none; border: 0; border-radius: 0; padding: .25rem 0 1rem .5rem; background: var(--paper); }
  .mega__cols, .mega__cols--3 { grid-template-columns: 1fr; }
  .site-header__cta { order: 2; margin-left: 0; }
  .nav { order: 4; }
  .header-phone { border-left: 0; padding: .25rem .4rem; text-align: right; }
  .header-phone__number { font-size: 1.12rem; }
}
@media (max-width: 420px) {
  .brand__logo { width: 148px; }
  .header-phone__number { font-size: 1rem; }
}

/* ===== Breadcrumbs ======================================================= */
.crumbs { background: var(--paper-2); border-bottom: 1px solid var(--line); font-size: .855rem; }
.crumbs__list { display: flex; flex-wrap: wrap; gap: .3rem .55rem; list-style: none; margin: 0; padding: .7rem 0; }
.crumbs__list li { display: flex; align-items: center; gap: .55rem; color: var(--muted); }
.crumbs__list li + li::before { content: "›"; color: var(--line-strong); }
.crumbs a { color: var(--body); text-decoration: none; }
.crumbs a:hover { color: var(--orange-dark); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ===== Sections ========================================================== */
.section { padding: clamp(2.75rem, 2rem + 3vw, 4.75rem) 0; }
.section--tight { padding: clamp(2rem, 1.5rem + 2vw, 3.25rem) 0; }
.section--paper { background: var(--paper-2); }
.section--white { background: var(--white); }
.section--ink { background: var(--ink); color: #cfd3da; }
.section--ink h2, .section--ink h3 { color: #fff; }

.section__head { max-width: 64ch; margin-bottom: 2rem; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__kicker {
  display: block; font-size: .74rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--orange-dark); margin-bottom: .6rem;
}
.section__lede { font-size: 1.115rem; color: var(--body); }

.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.4rem; }
.prose h3 { margin-top: 1.8rem; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.15rem; margin: 0 0 1.2em; }
.prose li { margin-bottom: .45em; }

.lede { font-size: 1.155rem; line-height: 1.6; color: var(--ink-2); }

/* ===== Hero ============================================================== */
.hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(15,16,20,.94) 0%, rgba(15,16,20,.84) 42%, rgba(15,16,20,.48) 100%);
}
@media (max-width: 860px) {
  /* Narrow screens put the headline over the middle of the photo rather than
     the shaded left edge, so the scrim has to be even across the frame. */
  .hero__media::after {
    background: linear-gradient(180deg, rgba(15,16,20,.9) 0%, rgba(15,16,20,.82) 55%, rgba(15,16,20,.88) 100%);
  }
}
.hero__inner { position: relative; padding: clamp(3rem, 2rem + 6vw, 6rem) 0 clamp(2.5rem, 2rem + 4vw, 4.5rem); }
.hero__content { max-width: 44rem; }
.hero__eyebrow {
  display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: #ffb59d; margin-bottom: 1rem;
  border-left: 3px solid var(--orange); padding-left: .7rem;
}
.hero h1 { color: #fff; margin-bottom: .7rem; }
.hero__sub { font-size: clamp(1.06rem, 1rem + .45vw, 1.25rem); color: #d7dae0; max-width: 40rem; margin-bottom: 1.6rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.hero__actions .btn--ghost { color: #fff; border-color: rgba(255,255,255,.42); }
.hero__actions .btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }
.hero__note { margin-top: 1.1rem; font-size: .92rem; color: #a8aeb8; }
.hero--compact .hero__inner { padding: clamp(2.25rem, 1.75rem + 3vw, 3.5rem) 0; }
.hero--plain { background: var(--white); color: var(--body); border-bottom: 1px solid var(--line); }
.hero--plain h1 { color: var(--ink); }
.hero--plain .hero__sub { color: var(--body); }
.hero--plain .hero__eyebrow { color: var(--orange-dark); }
.hero--plain .hero__note { color: var(--muted); }
/* A plain hero sits on white, so the ghost button needs dark ink. Without this
   it inherits the white-on-photo styling above and disappears. */
.hero--plain .hero__actions .btn--ghost { color: var(--ink); border-color: var(--line-strong); background: transparent; }
.hero--plain .hero__actions .btn--ghost:hover { background: var(--paper-2); border-color: var(--ink); color: var(--ink); }

/* ===== Trust strip ======================================================= */
/* Sits inside .wrap so it lines up with the content column, not the viewport. */
.trust-strip-wrap { padding-block: 1.25rem; }
.trust-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; list-style: none; margin: 0; padding: 0;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
}
.trust-strip__item { display: flex; align-items: center; gap: .7rem; padding: 1.05rem 1.1rem; background: var(--white); }
.trust-strip__icon { color: var(--orange); }
.trust-strip__text { display: flex; flex-direction: column; line-height: 1.3; font-size: .9rem; }
.trust-strip__text strong { color: var(--ink); font-size: .96rem; }
.trust-strip__text span { color: var(--muted); font-size: .82rem; }
@media (max-width: 900px) { .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .trust-strip { grid-template-columns: 1fr; } }

/* ===== Grids ============================================================= */
.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--split { grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: start; }
@media (max-width: 980px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--split { grid-template-columns: 1fr; }
}
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* ===== Service cards ===================================================== */
.svc-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: border-color .15s ease, box-shadow .15s ease; }
.svc-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.svc-card__link { display: block; padding: 1.5rem 1.4rem; text-decoration: none; height: 100%; }
.svc-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--radius);
  background: var(--orange-soft); color: var(--orange-dark); margin-bottom: .95rem;
}
.svc-card__title { font-size: 1.1rem; margin-bottom: .45rem; color: var(--ink); }
.svc-card__blurb { font-size: .945rem; color: var(--body); margin-bottom: .85rem; }
.svc-card__more { font-size: .875rem; font-weight: 700; color: var(--orange-dark); display: inline-flex; align-items: center; gap: .3rem; }
.svc-card:hover .svc-card__more { text-decoration: underline; }

/* ===== Problem router ==================================================== */
.problems { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.problem { background: var(--white); padding: 1.35rem 1.3rem; text-decoration: none; display: block; }
.problem:hover { background: var(--orange-soft); }
.problem__q { font-weight: 800; color: var(--ink); font-size: 1.04rem; margin-bottom: .3rem; display: block; }
.problem__a { font-size: .92rem; color: var(--body); display: block; }
.problem__go { font-size: .85rem; font-weight: 700; color: var(--orange-dark); margin-top: .6rem; display: inline-block; }

/* ===== Link grids ======================================================== */
.link-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.link-grid a {
  display: block; padding: .48rem .6rem; border-radius: var(--radius);
  background: var(--white); border: 1px solid var(--line);
  color: var(--ink-2); text-decoration: none; font-size: .93rem; font-weight: 500;
}
.link-grid a:hover { border-color: var(--orange); color: var(--orange-dark); background: var(--orange-soft); }
.link-grid__note { display: block; font-size: .77rem; color: var(--muted); }
.link-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 265px), 1fr)); }
.link-grid--plain a { background: transparent; border-color: transparent; padding: .3rem 0; }
.link-grid--plain a:hover { background: transparent; text-decoration: underline; }

.region-group { margin-bottom: 1.75rem; }
.region-group__h { font-size: 1.02rem; margin-bottom: .7rem; color: var(--ink); display: flex; align-items: baseline; gap: .6rem; }
.region-group__count { font-size: .78rem; font-weight: 600; color: var(--muted); }

/* ===== Media ============================================================= */
.media-photo, .media-video { margin: 0; }
.media-photo img { border-radius: var(--radius-lg); background: var(--paper-2); width: 100%; }
.team-photo { margin: 1.25rem 0 1.5rem; }
.team-photo--portrait { max-width: 420px; }
.media-photo figcaption, .media-video figcaption { font-size: .875rem; color: var(--muted); margin-top: .55rem; line-height: 1.45; }

.media-video__frame {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: #0d0e11; aspect-ratio: var(--ratio, 9 / 16);
  /* Portrait social clips are 9:16. Uncapped, three of them side by side
     push everything else off the screen, so cap the box and let the
     video cover it. */
  max-height: 520px;
}
.media-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-video__badge {
  position: absolute; top: .6rem; left: .6rem; z-index: 2;
  background: rgba(17,18,22,.82); color: #fff; font-size: .68rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; padding: .25rem .5rem; border-radius: 3px;
  pointer-events: none;
}
.media-video video[controls]:not([data-played]) + .media-video__badge { display: block; }

.media-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

/* ===== Projects ========================================================== */
.filters { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.75rem; }
.filter {
  padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--white); color: var(--ink-2); font-weight: 600; font-size: .9rem;
  cursor: pointer; font-family: inherit;
}
.filter:hover { border-color: var(--ink); }
.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Projects gallery: a wall of the actual work, nothing else. No titles and
   no captions, because a sentence describing the photograph beside it tells
   the reader something they can already see. */
.gallery {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.gtile { margin: 0; }
.gtile[hidden] { display: none; }
.gtile__btn {
  display: block; position: relative; width: 100%; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--paper-2); cursor: zoom-in;
  transition: border-color .15s ease, transform .15s ease;
}
.gtile__btn:hover { border-color: var(--ink); }
.gtile__btn img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.gtile__bar {
  position: absolute; inset: auto 0 0 0;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: 1.6rem .7rem .55rem;
  background: linear-gradient(to top, rgba(12,13,16,.78), rgba(12,13,16,0));
  color: #fff; font-size: .8rem; font-weight: 600; text-align: left;
}
.gtile__place { letter-spacing: .01em; }
.gtile__count { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .92; }

/* Lightbox: native <dialog>, so Escape, focus trapping and the backdrop are
   the browser's job rather than ours. */
.lb {
  width: min(100% - 1.5rem, 1100px); max-height: 88vh;
  padding: 0; border: 0; border-radius: var(--radius-lg);
  background: var(--white); color: var(--body); overflow: hidden;
}
.lb::backdrop { background: rgba(12, 13, 16, .82); }
.lb__topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1rem; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--white); z-index: 2;
}
.lb__place { font-weight: 800; color: var(--ink); font-size: 1.02rem; }
.lb__close {
  width: 38px; height: 38px; flex: none; border: 1px solid var(--line-strong);
  background: var(--white); border-radius: var(--radius); cursor: pointer;
  font-size: 1.4rem; line-height: 1; color: var(--ink-2);
}
.lb__close:hover { background: var(--paper-2); border-color: var(--ink); }
.lb__body {
  display: grid; gap: .85rem; padding: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  overflow-y: auto; max-height: calc(88vh - 60px);
}
.lb__shot { margin: 0; }
.lb__shot img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.lb .media-video { margin: 0; }
.lb .media-video__frame { max-height: 60vh; }
@media (max-width: 560px) {
  .gallery { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: .5rem; }
  .lb { width: 100%; max-height: 92vh; border-radius: 0; }
  .lb__body { max-height: calc(92vh - 60px); }
}

/* ===== CTA bands ========================================================= */
.cta-band { background: var(--ink); color: #fff; }
.cta-band--light { background: var(--orange-soft); color: var(--ink-2); border-block: 1px solid #f3d8cf; }
.cta-band--navy { background: var(--navy-dark); }
.cta-band__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.25rem; padding: clamp(1.5rem, 1rem + 2vw, 2.35rem) 0;
}
.cta-band__text { max-width: 46rem; }
.cta-band__heading { font-size: clamp(1.18rem, 1.05rem + .7vw, 1.5rem); font-weight: 800; color: #fff; margin: 0 0 .3rem; letter-spacing: -.015em; }
.cta-band--light .cta-band__heading { color: var(--ink); }
.cta-band__body { margin: 0; color: #b9bfc9; font-size: .985rem; }
.cta-band--light .cta-band__body { color: var(--body); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.cta-band .btn--ghost { color: #fff; border-color: rgba(255,255,255,.42); }
.cta-band .btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }
.cta-band--light .btn--ghost { color: var(--ink); border-color: var(--line-strong); }
.cta-band--light .btn--ghost:hover { background: var(--white); border-color: var(--ink); color: var(--ink); }

/* ===== Lists ============================================================= */
.checklist { list-style: none; margin: 0 0 1.2em; padding: 0; display: grid; gap: .55rem; }
.checklist li { position: relative; padding-left: 1.65rem; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; background: var(--orange); border-radius: 2px;
}
.notes { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .9rem; }
.notes li {
  background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--navy);
  border-radius: var(--radius); padding: .95rem 1.1rem; font-size: .96rem;
}

/* ===== FAQ =============================================================== */
.faq { border-top: 1px solid var(--line); max-width: 72ch; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  cursor: pointer; list-style: none; padding: 1.05rem 2.25rem 1.05rem 0;
  font-weight: 700; color: var(--ink); position: relative; font-size: 1.03rem;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: ""; position: absolute; right: .35rem; top: 1.45rem;
  width: 9px; height: 9px; border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange);
  transform: rotate(45deg); transition: transform .18s ease;
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); }
.faq__q:hover { color: var(--orange-dark); }
.faq__a { padding: 0 2.25rem 1.15rem 0; color: var(--body); }
.faq__a p { margin: 0; }

/* ===== Phone callout (contact page) ===================================== */
.estimate__phone { font-weight: 600; color: var(--ink-2); }
.estimate__phone a { color: var(--orange-dark); font-weight: 800; font-size: 1.12rem; white-space: nowrap; }

/* ===== Map =============================================================== */
.map { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--paper-2); }
.map iframe { display: block; width: 100%; border: 0; }
.map--tall iframe { min-height: 420px; }

/* ===== Reviews =========================================================== */
.rating-line { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-weight: 700; color: var(--ink); }
.stars { display: inline-flex; gap: 1px; color: var(--orange); }
.review-platforms { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); list-style: none; margin: 0; padding: 0; }
.review-platform { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.2rem 1.25rem; }
.review-platform h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.review-platform p { font-size: .9rem; color: var(--muted); margin-bottom: .7rem; }
.review-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.35rem 1.3rem; }
.review-card__text { font-size: 1rem; color: var(--ink-2); }
.review-card__meta { font-size: .85rem; color: var(--muted); margin-top: .7rem; }
.notice {
  background: var(--navy-soft); border: 1px solid #d6dbf1; border-left: 3px solid var(--navy);
  border-radius: var(--radius); padding: 1.1rem 1.25rem; font-size: .95rem; color: var(--ink-2);
}

/* ===== Illustrations =====================================================
   Generated or stock imagery used to show what a part looks like, kept out
   of every "our work" section.
   ======================================================================== */
.illus { margin: 0; }
.illus__frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-2); }
.illus img { width: 100%; height: auto; display: block; aspect-ratio: 3 / 2; object-fit: cover; }
.illus figcaption { font-size: .875rem; color: var(--muted); margin-top: .55rem; line-height: 1.45; }

/* Inline illustration sitting alongside body copy on a service page. */
.illus--inline { margin: 1.75rem 0; }
.illus--inline .illus img { aspect-ratio: 2 / 1; }

/* Narrow illustration used as a lead-in beside a heading. */
.illus--lead { margin-bottom: 1.5rem; }

/* ===== Review screenshots ================================================
   Real Google review cards, shown as captured. Heights vary a lot, so a
   column layout packs them far better than a grid would.
   ======================================================================== */
/* The source screenshots are about 700px wide. Rendering them much narrower
   than that shrinks the review text to the point where nobody can read it,
   which defeats the reason for showing a screenshot at all. Two columns in a
   wider-than-usual container keeps each one close to its native size. */
.review-wall { columns: 2; column-gap: 1.5rem; }
.review-wall--compact { columns: 1; max-width: 720px; }
@media (max-width: 1180px) { .review-wall { columns: 1; max-width: 720px; margin-inline: auto; } }

/* Compact wall (home, service, city pages): one column of screenshots with the
   rating summary beside it on wide screens, so the screenshots stay near
   native size without leaving half the section empty. Stacks below 1100px. */
.reviews-split { display: grid; gap: 2rem; }
.reviews-split .section__head { margin-bottom: 1.5rem; }
.reviews-split .review-wall--compact { margin-inline: 0; }
@media (min-width: 1100px) {
  .reviews-split { grid-template-columns: minmax(0, 1fr) 700px; gap: 3rem; align-items: start; }
  .reviews-split .review-wall--compact { max-width: none; }
}
/* Only pin the summary where the viewport is tall enough to show all of it. */
@media (min-width: 1100px) and (min-height: 760px) {
  .reviews-split__aside { position: sticky; top: calc(78px + 1.5rem); }
}

.rating-card {
  max-width: 440px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.35rem;
}
.rating-card__summary { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
.rating-card__score { margin: 0; font-size: 3.25rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.rating-card__count { margin: .3rem 0 0; font-size: .9rem; color: var(--muted); }
.rating-bars { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .35rem; }
.rating-bars__row { display: grid; grid-template-columns: 1ch 1fr 2.5ch; align-items: center; gap: .6rem; font-size: .85rem; color: var(--muted); }
.rating-bars__track { height: 8px; background: var(--paper-2); border-radius: 999px; overflow: hidden; }
.rating-bars__fill { display: block; height: 100%; background: var(--orange); }
.rating-bars__count { text-align: right; }
.rating-card__actions { display: grid; gap: .65rem; }
/* Stacked above the screenshots on tablets: lay the card out sideways so it
   costs less height before the reviews start. */
@media (min-width: 640px) and (max-width: 1099px) {
  .rating-card { max-width: 720px; display: grid; grid-template-columns: 1fr 230px; gap: 1.75rem; align-items: center; }
  .rating-bars { margin-bottom: 0; }
}
/* The sticky mobile bar already offers the call at these widths. */
@media (max-width: 860px) { .rating-card__actions .btn--call { display: none; } }

.review-shot {
  break-inside: avoid;
  margin: 0 0 1.25rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.review-shot__link { display: block; }
.review-shot img { width: 100%; height: auto; display: block; }
/* The enlarge hint only earns its place where the screenshot is genuinely too
   small to read, which is phone widths. */
.review-shot__zoom { display: none; margin-left: auto; color: var(--navy); font-weight: 600; }
@media (max-width: 680px) { .review-shot__zoom { display: inline; } }
.review-shot__cap {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  padding: .6rem .85rem .7rem;
  border-top: 1px solid var(--paper-2);
  font-size: .8rem; color: var(--muted);
}
.review-shot__stars { color: var(--orange); letter-spacing: .06em; font-size: .85rem; }

/* ===== Aside / sidebar =================================================== */
.aside-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.35rem 1.35rem; margin-bottom: 1.25rem; }
.aside-card h2, .aside-card h3 { font-size: 1.02rem; margin-bottom: .8rem; }
.aside-card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.aside-card__list a { display: block; padding: .38rem 0; color: var(--ink-2); text-decoration: none; font-size: .94rem; border-bottom: 1px solid var(--paper-2); }
.aside-card__list a:hover { color: var(--orange-dark); }
.aside-card--call { background: var(--ink); border-color: var(--ink); color: #c9cdd5; }
.aside-card--call h2, .aside-card--call h3 { color: #fff; }
.aside-card--call p { font-size: .94rem; }

.sticky-aside { position: sticky; top: 96px; }
@media (max-width: 980px) { .sticky-aside { position: static; } }

/* ===== Table ============================================================= */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line); }
th { background: var(--paper-2); font-weight: 700; color: var(--ink); }
tr:last-child td { border-bottom: 0; }

/* ===== Footer ============================================================ */
.site-footer { background: var(--ink); color: #a9aeb8; margin-top: 0; }
.site-footer__grid {
  display: grid; grid-template-columns: 1.25fr 1fr 1fr 1.2fr;
  gap: clamp(1.75rem, 1rem + 2.5vw, 3rem); padding: clamp(2.5rem, 2rem + 2vw, 3.75rem) 0 2.5rem;
}
@media (max-width: 980px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer__logo { background: #fff; padding: .55rem .7rem; border-radius: var(--radius); margin-bottom: 1rem; }
.site-footer__blurb { font-size: .94rem; margin-bottom: 1.15rem; max-width: 30ch; }
.site-footer__h { font-size: .76rem; text-transform: uppercase; letter-spacing: .11em; color: #fff; font-weight: 800; margin-bottom: .95rem; }
.site-footer a { color: #c5cad3; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .link-grid { grid-template-columns: 1fr; gap: 0; }
.site-footer .link-grid a { background: transparent; border: 0; padding: .28rem 0; font-size: .92rem; }
.site-footer .link-grid a:hover { background: transparent; color: #fff; }
.site-footer__more { display: inline-block; margin-top: .7rem; font-weight: 700; font-size: .88rem; color: #ffa88d !important; }
.nap { font-style: normal; font-size: .94rem; display: grid; gap: .15rem; margin-bottom: 1rem; }
.nap__phone { font-size: 1.18rem; font-weight: 800; color: #ff9b7c !important; margin-top: .3rem; }
.site-footer__hours { font-size: .9rem; line-height: 1.7; margin-bottom: 1rem; }
.site-footer__hours strong, .site-footer__licence strong { color: #fff; }
.site-footer__licence { font-size: .9rem; line-height: 1.6; }
.site-footer__licence-note { color: #8f959f; font-size: .75rem; margin-left: .4rem; white-space: nowrap; }
.social { list-style: none; display: flex; flex-wrap: wrap; gap: .9rem; margin: 1.1rem 0 0; padding: 0; font-size: .9rem; }
.site-footer__bar { border-top: 1px solid #2a2c32; }
.site-footer__bar-inner { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; padding: 1.15rem 0; font-size: .86rem; }
.site-footer__bar p { margin: 0; }
.site-footer__legal { list-style: none; display: flex; flex-wrap: wrap; gap: 1.15rem; margin: 0; padding: 0; }

/* ===== Mobile sticky CTA ================================================= */
.mobile-cta { display: none; }
@media (max-width: 860px) {
  :root { --sticky-h: 62px; }
  .mobile-cta {
    display: grid; grid-template-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    box-shadow: 0 -2px 14px rgba(0,0,0,.18);
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--ink);
  }
  .mobile-cta a {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    padding: 1rem .75rem; font-weight: 800; font-size: 1.02rem; text-decoration: none;
    min-height: 62px;
  }
  .mobile-cta__call { background: var(--orange-cta); color: #fff; }
  .mobile-cta__call:active { background: var(--orange-dark); }
}

/* ===== Utilities ========================================================= */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 1.1rem; }
.text-center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }