/* ==========================================================================
   gjdavis.co.uk

   One stylesheet, no framework, no build step. The site is six page types and
   the whole thing is under 30 KB, which is worth more on a Lincolnshire mobile
   signal than any amount of tooling.

   Light only, declared rather than defaulted. A tradesman's site is looked at
   in daylight on a phone by somebody deciding whether to ring; a dark variant
   would be two palettes to keep honest for no one's benefit.

   Nothing here sets `fill` or `stroke`, because the icon sprite carries those
   as presentation attributes and a CSS rule would beat them. See icons.svg.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Warm, not clinical. The oranges are workwear and rust rather than
     hi-vis; the greys have a little brown in them so white photographs sit
     on the page instead of glowing off it. */
  --ink: #191c1f;
  --ink-soft: #4c545c;
  --ink-faint: #79828b;
  --paper: #fbf9f6;
  --surface: #ffffff;
  --sand: #f4efe8;
  --line: #e4ddd3;
  --line-strong: #cfc5b7;

  --brand: #b0501b;
  --brand-dark: #8c3f14;
  --brand-tint: #fdf1e7;
  --slate: #1d262c;
  --slate-soft: #2b3841;

  --ok: #2c6e49;
  --warn: #9a6a00;
  --danger: #a32b1c;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(25, 28, 31, 0.05);
  --shadow: 0 6px 20px -8px rgba(25, 28, 31, 0.22);
  --shadow-lg: 0 20px 45px -20px rgba(25, 28, 31, 0.35);

  --wrap: 1140px;
  --gap: clamp(1.25rem, 3vw, 2.25rem);
  --band-y: clamp(3rem, 7vw, 5.5rem);

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
}

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

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.15rem); }
h2 { font-size: clamp(1.55rem, 1.3rem + 1.2vw, 2.2rem); }
h3 { font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-dark); text-underline-offset: 0.18em; }
a:hover { color: var(--brand); }

/* A visible focus ring everywhere, on the same terms. Removing it is the
   single most common accessibility mistake on sites like this one. */
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}

.sprite { display: none; }

.icon { width: 1.5rem; height: 1.5rem; flex: none; }
.icon--sm { width: 1.15rem; height: 1.15rem; flex: none; }
.icon--lg { width: 2rem; height: 2rem; flex: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 0.5rem; top: -4rem; z-index: 100;
  padding: 0.7rem 1.1rem; background: var(--slate); color: #fff;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none; font-weight: 600;
  transition: top 0.15s ease;
}
.skip:focus { top: 0; color: #fff; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

/* ==========================================================================
   Masthead
   ========================================================================== */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  min-height: 4.5rem;
  padding-block: 0.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: #fff;
  flex: none;
}
.brand__icon { width: 1.5rem; height: 1.5rem; }

.brand__words { display: flex; flex-direction: column; line-height: 1.2; }
.brand__name { font-size: 1.15rem; letter-spacing: -0.01em; }
.brand__tag {
  font-size: 0.76rem;
  color: var(--ink-faint);
  /* The tagline is a nice-to-have next to a 44px tap target. It goes first. */
  display: none;
}

.masthead__call {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.05rem;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.masthead__call:hover { background: var(--brand-dark); color: #fff; }
.masthead__number { display: none; }

/* --- navigation ---------------------------------------------------------- */

.masthead__menu {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.masthead__menu:hover { background: var(--sand); }

.nav__bars, .nav__bars::before, .nav__bars::after {
  display: block;
  width: 1.05rem; height: 2px;
  background: var(--ink);
  border-radius: 2px;
}
.nav__bars { position: relative; }
.nav__bars::before, .nav__bars::after { content: ""; position: absolute; left: 0; }
.nav__bars::before { top: -6px; }
.nav__bars::after { top: 6px; }

/* On a narrow screen the links take a row of their own underneath the brand
   and the call button, which is where the toggle collapses them to. */
.nav {
  flex: 1 0 100%;
  order: 5;
  border-top: 1px solid var(--line);
  padding-top: 0.4rem;
}

.nav__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
}
.nav__list a {
  display: block;
  padding: 0.6rem 0.7rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  border-radius: var(--radius-sm);
}
.nav__list a:hover { color: var(--brand-dark); background: var(--sand); }

@media (min-width: 62rem) {
  .brand__tag { display: block; }
  .masthead__number { display: inline; }

  /* Wide enough for one row: the links sit in the header itself, the toggle
     goes away, and `hidden` -- which site.js may have left on the nav from a
     narrower viewport -- is overridden rather than fought with a resize
     listener. The [hidden] UA rule is a single attribute selector, so this
     one out-specifies it without !important. */
  .masthead__menu { display: none; }
  .nav {
    flex: 0 1 auto;
    /* brand (0, with margin-right:auto) — nav — call button. */
    order: 1;
    border-top: 0;
    padding-top: 0;
  }
  .masthead__call { order: 2; }
  .nav[hidden] { display: block; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* 48px minimum, which is the smallest thing a thumb hits reliably. */
  min-height: 3rem;
  padding: 0.7rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); color: #fff; }

.btn--dark { background: var(--slate); color: #fff; }
.btn--dark:hover { background: var(--slate-soft); color: #fff; }

.btn--ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn--ghost:hover { background: var(--sand); color: var(--ink); }

.btn--light { background: #fff; color: var(--slate); }
.btn--light:hover { background: var(--sand); color: var(--slate); }

.btn--wide { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 650;
  text-decoration: none;
}
.textlink:hover { text-decoration: underline; }
.textlink .icon--sm { transition: transform 0.15s ease; }
.textlink:hover .icon--sm { transform: translateX(3px); }

/* ==========================================================================
   Bands and section headers
   ========================================================================== */

.band { padding-block: var(--band-y); }
.band--sand { background: var(--sand); }
.band--surface { background: var(--surface); }
.band--slate { background: var(--slate); color: #e9eef1; }
.band--slate h2 { color: #fff; }
.band--tight { padding-block: clamp(2rem, 4vw, 3rem); }

.band__head {
  max-width: 46rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.band__head p { color: var(--ink-soft); font-size: 1.075em; margin-bottom: 0; }
.band--slate .band__head p { color: #b9c5cd; }

.eyebrow {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 0.6rem;
}
.band--slate .eyebrow { color: #e39a6a; }

.band__foot { margin-top: 2rem; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  background: linear-gradient(180deg, var(--sand) 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

.hero__intro {
  font-size: clamp(1.075rem, 1rem + 0.5vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 34em;
}

.hero__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--sand);
  aspect-ratio: 4 / 3;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* No photo uploaded yet: a tidy panel of the brand colour rather than a
   broken image or a hole in the layout. The site has to look finished on the
   day it goes live, before anybody has been near the admin. */
.hero__placeholder {
  display: grid;
  place-items: center;
  height: 100%;
  background:
    repeating-linear-gradient(
      45deg,
      var(--sand) 0 12px,
      #ece5db 12px 24px
    );
  color: var(--line-strong);
}
.hero__placeholder .icon { width: 4rem; height: 4rem; }

@media (min-width: 56rem) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; }
}

/* --- the reassurance strip under the hero -------------------------------- */

.credentials {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
}
.credentials li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  font-size: 0.95rem;
}
.credentials .icon--sm { color: var(--ok); }

/* ==========================================================================
   Grids and cards
   ========================================================================== */

.grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
/* 20rem, not 21: at 1140px the wrap is 1076px wide inside its padding, and
   three 21rem tracks plus two gaps come to 1080. Four pixels over, and the
   front page's three featured jobs laid out two-and-one. */
.grid--wide {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}
.grid--two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--line-strong);
}
.card__body { padding: 1.35rem; display: flex; flex-direction: column; flex: 1; }
.card__title { margin-bottom: 0.4rem; font-size: 1.2rem; }
.card__title a { color: inherit; text-decoration: none; }
/* The whole card is the click target, without nesting the <a> around block
   content and without any JavaScript. */
.card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.card { position: relative; }
.card__text { color: var(--ink-soft); margin-bottom: 1rem; }
.card__foot {
  margin-top: auto;
  padding-top: 0.5rem;
  color: var(--brand-dark);
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.card__media {
  aspect-ratio: 4 / 3;
  background: var(--sand);
  overflow: hidden;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card:hover .card__media img { transform: scale(1.02); }
.card__media img { transition: transform 0.3s ease; }

.card__placeholder {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--line-strong);
  background: var(--sand);
}
.card__placeholder .icon { width: 2.75rem; height: 2.75rem; }

.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin-bottom: 0.7rem;
}
.card__meta span { display: inline-flex; align-items: center; gap: 0.3rem; }

/* --- service card -------------------------------------------------------- */

.service-card__icon {
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: var(--radius-sm);
  background: var(--brand-tint);
  color: var(--brand);
  margin-bottom: 1rem;
}
.service-card__price {
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--ink-faint);
  margin-bottom: 0.6rem;
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.quote {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem 1.4rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.band--slate .quote {
  background: var(--slate-soft);
  border-color: #3b4a55;
  color: #e9eef1;
}
.quote__mark { color: var(--brand-tint); width: 2.2rem; height: 2.2rem; }
.band--slate .quote__mark { color: #3b4a55; }
.quote__body { margin: 0.4rem 0 1.1rem; font-size: 1.05rem; }
.quote__by { margin-top: auto; font-size: 0.9rem; color: var(--ink-faint); }
.band--slate .quote__by { color: #a9b8c2; }
.quote__name { display: block; font-weight: 650; color: var(--ink); }
.band--slate .quote__name { color: #fff; }
.quote__stars {
  color: #d08a1a;
  letter-spacing: 0.08em;
  font-size: 1.05rem;
}

/* ==========================================================================
   Long-form text (the Markdown subset renders into this)
   ========================================================================== */

.prose {
  max-width: 42rem;
  font-size: 1.06em;
}
.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: 2em; font-size: 1.5rem; }
.prose h3 { margin-top: 1.6em; font-size: 1.2rem; }
.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.35rem; }
.prose li { margin-bottom: 0.4em; }
.prose li::marker { color: var(--brand); }
.prose blockquote {
  margin: 1.5em 0;
  padding: 0.2rem 0 0.2rem 1.15rem;
  border-left: 3px solid var(--brand);
  color: var(--ink-soft);
  font-style: italic;
}
.prose strong { font-weight: 700; }
.prose--wide { max-width: 52rem; }

.lede {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 40em;
}

/* ==========================================================================
   Page headers
   ========================================================================== */

.pagehead {
  background: var(--sand);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2rem, 5vw, 3.5rem);
}
.pagehead h1 { margin-bottom: 0.35em; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--brand-dark); text-decoration: underline; }
.crumbs li::after { content: "/"; margin-left: 0.4rem; color: var(--line-strong); }
.crumbs li:last-child::after { content: ""; }

/* ==========================================================================
   Filters, pagination
   ========================================================================== */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--gap);
}
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.6rem;
  padding: 0.4rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
}
.chip:hover { border-color: var(--brand); color: var(--brand-dark); }
.chip[aria-current="true"] {
  background: var(--slate);
  border-color: var(--slate);
  color: #fff;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: clamp(2rem, 5vw, 3rem);
}
.pager__count { color: var(--ink-faint); font-size: 0.92rem; }

/* ==========================================================================
   Project gallery
   ========================================================================== */

.gallery {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.gallery__item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--sand);
  border: 1px solid var(--line);
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery__item:hover img { transform: scale(1.03); }
.gallery__item img { transition: transform 0.3s ease; }

.gallery__stage {
  position: absolute;
  left: 0.5rem; top: 0.5rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: rgba(29, 38, 44, 0.85);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gallery__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.4rem 0.7rem 0.55rem;
  background: linear-gradient(180deg, rgba(29, 38, 44, 0) 0%, rgba(29, 38, 44, 0.82) 100%);
  color: #fff;
  font-size: 0.82rem;
  line-height: 1.35;
}

/* --- lightbox ------------------------------------------------------------ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgba(14, 18, 21, 0.94);
  padding: 0.75rem;
}
.lightbox[hidden] { display: none; }

.lightbox__bar {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.lightbox__figure {
  display: grid;
  place-items: center;
  min-height: 0;
  margin: 0;
}
.lightbox__figure img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
}
.lightbox__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: #d8e0e5;
  font-size: 0.9rem;
  padding: 0.6rem 0.2rem 0.2rem;
}
.lightbox__caption { flex: 1; min-width: 0; margin: 0; }
.lightbox__nav { display: flex; align-items: center; gap: 0.5rem; }
.lightbox__count { color: #8fa2ae; font-variant-numeric: tabular-nums; }

/* Set by site.js while the lightbox is open, so the page behind does not
   scroll away under it. */
.is-locked, .is-locked body { overflow: hidden; }

.iconbtn {
  display: grid;
  place-items: center;
  width: 2.9rem; height: 2.9rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
}
.iconbtn:hover { background: rgba(255, 255, 255, 0.18); }
.iconbtn[disabled] { opacity: 0.35; cursor: default; }

/* ==========================================================================
   Forms
   ========================================================================== */

.form { max-width: 38rem; }

.field { margin-bottom: 1.35rem; }
.field > label {
  display: block;
  font-weight: 650;
  margin-bottom: 0.35rem;
}
.field__hint {
  display: block;
  font-size: 0.88rem;
  color: var(--ink-faint);
  margin-bottom: 0.45rem;
}
.field__optional { font-weight: 400; color: var(--ink-faint); }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
select,
textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }

input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(176, 80, 27, 0.15);
  outline: none;
}

.field--error input,
.field--error select,
.field--error textarea { border-color: var(--danger); }

.field__error {
  display: block;
  margin-top: 0.4rem;
  color: var(--danger);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Off-screen rather than display:none. A bot that skips obviously hidden
   inputs would walk straight past a display:none honeypot; this one it
   fills in, which is exactly what we want it to do. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0;
}

.notice {
  padding: 1rem 1.15rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  margin-bottom: 1.5rem;
}
.notice--error {
  border-color: #e6bfb8;
  background: #fdf3f1;
  color: #7d2317;
}
.notice--ok {
  border-color: #bcd9c6;
  background: #f1f8f3;
  color: #1f5636;
}

/* ==========================================================================
   Contact page layout
   ========================================================================== */

.contact-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 58rem) {
  .contact-grid { grid-template-columns: 1.15fr 0.85fr; }
}

.contact-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.contact-card h2 { font-size: 1.25rem; }

.contact-list {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.contact-list li { display: flex; gap: 0.75rem; align-items: flex-start; }
.contact-list .icon { color: var(--brand); margin-top: 0.15rem; }
.contact-list strong { display: block; }
.contact-list span { color: var(--ink-faint); font-size: 0.9rem; }
.contact-list a { font-weight: 650; text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }

/* ==========================================================================
   Common questions
   ========================================================================== */

.faq { border-top: 1px solid var(--line); max-width: 46rem; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  font-weight: 650;
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--brand);
  line-height: 1;
}
.faq__item[open] .faq__q::after { content: "−"; }
.faq__a { padding-bottom: 1.2rem; color: var(--ink-soft); }
.faq__a > :last-child { margin-bottom: 0; }

/* ==========================================================================
   Call to action band
   ========================================================================== */

.cta { text-align: center; }
.cta__inner { max-width: 42rem; margin-inline: auto; }
.cta .btn-row { justify-content: center; }
.cta__phone {
  display: inline-block;
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
  margin-bottom: 0.25rem;
}
.cta__phone:hover { color: #f0b48c; }

/* ==========================================================================
   Empty states
   ========================================================================== */

.empty {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3rem);
  text-align: center;
  color: var(--ink-faint);
  background: var(--surface);
}
.empty .icon--lg { color: var(--line-strong); margin-inline: auto; }
.empty h2 { color: var(--ink-soft); font-size: 1.2rem; margin-top: 0.75rem; }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  background: var(--slate);
  color: #b9c5cd;
  padding-top: clamp(2.5rem, 6vw, 4rem);
  margin-top: 0;
}
/* Clears the fixed call bar so the last line of the footer is readable on a
   phone instead of sitting underneath it. */
@media (max-width: 47.999rem) { .footer { padding-bottom: 5rem; } }

.footer a { color: #dbe4ea; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }

.footer__grid {
  display: grid;
  gap: 2rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 48rem) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr; gap: 3rem; }
}

.footer__name { color: #fff; font-size: 1.3rem; margin-bottom: 0.25rem; }
.footer__tag { color: #9fb0bb; margin-bottom: 1.1rem; }
.footer__heading {
  color: #fff;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}
.footer__heading:not(:first-child) { margin-top: 1.5rem; }
.footer__phone a { font-size: 1.25rem; font-weight: 700; color: #fff; }
.footer__note { display: block; font-size: 0.85rem; color: #9fb0bb; }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.footer__areas { color: #9fb0bb; font-size: 0.94rem; }
.footer__social { display: flex; gap: 1rem; margin-top: 1rem; }

.footer__base {
  border-top: 1px solid #33404a;
  padding-block: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.86rem;
  color: #8fa2ae;
}
.footer__base p { margin: 0; }

/* ==========================================================================
   Fixed call bar (phones only)
   ========================================================================== */

.callbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px -10px rgba(25, 28, 31, 0.4);
}
.callbar__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 3rem;
  border-radius: var(--radius-sm);
  font-weight: 650;
  text-decoration: none;
  font-size: 0.98rem;
}
.callbar__btn--call { background: var(--brand); color: #fff; }
.callbar__btn--quote {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}

@media (min-width: 48rem) { .callbar { display: none; } }
@media (max-width: 47.999rem) { body { padding-bottom: 0; } }

/* ==========================================================================
   Print — someone will print a quote page or the contact details
   ========================================================================== */

@media print {
  .masthead, .callbar, .footer, .btn-row, .filters, .pager, .skip { display: none; }
  body { background: #fff; font-size: 11pt; }
  .band, .hero { padding-block: 1rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}