/* LA Roofing — design system
   Direction: Speedy-led (speedyroofing.co.uk) flat trade site, recoloured to
   LA Roofing's black and gold. One family (Geist) at Speedy's lighter
   heading weights; flat small-radius buttons; borderless light-grey inputs.
   Radius rule: 4px buttons and inputs, 10px cards and images. */

:root {
  --ink: #151515;
  --ink-soft: #1f1f1f;
  --ink-line: #2c2c2c;
  --paper: #ffffff;
  --paper-tint: #f5f5f2;
  --gold: #f2c230;
  --gold-deep: #d9a916;
  --text: #333333;
  --text-soft: #565656;
  --text-on-ink: #f4f4f2;
  --text-soft-on-ink: #c9c9c4;
  --line: #e4e4df;
  --field: #f2f2f2;
  --radius-btn: 4px;
  --radius-card: 10px;
  --radius-input: 4px;
  --shadow-card: 0 14px 34px -18px rgba(21, 21, 21, 0.35);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --container: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Geist", "Segoe UI", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--gold); color: var(--ink); }
::-moz-selection { background: var(--gold); color: var(--ink); }

body::-webkit-scrollbar { width: 12px; }
body::-webkit-scrollbar-track { background: var(--paper-tint); }
body::-webkit-scrollbar-thumb { background: #b9b9b2; border-radius: 6px; border: 3px solid var(--paper-tint); }
body::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }

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

a { color: inherit; }

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

h1, h2, h3, h4 {
  font-family: "Geist", "Segoe UI", Arial, sans-serif;
  font-weight: 500;
  line-height: 1.18;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.01em; }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.35rem); font-weight: 600; }

p { max-width: 68ch; }

.container {
  width: min(var(--container), 100% - 2.5rem);
  margin-inline: auto;
}

.section { padding-block: clamp(4rem, 9vw, 6.5rem); }
.section-tint { background: var(--paper-tint); }
.section-ink { background: var(--ink); }
.section-ink h2, .section-ink h3 { color: var(--text-on-ink); }
.section-ink p { color: var(--text-soft-on-ink); }

.section-head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head p { margin-top: 0.9rem; color: var(--text-soft); }

.muted { color: var(--text-soft); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: "Geist", sans-serif;
  font-weight: 400;
  font-size: 0.98rem;
  line-height: 1.2;
  white-space: nowrap;
  padding: 0.75rem 2.2rem;
  border-radius: var(--radius-btn);
  border: 2px solid var(--gold);
  background: var(--gold);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out), background 0.2s, border-color 0.2s;
}

.btn:hover { background: var(--gold-deep); border-color: var(--gold-deep); }
.btn:active { transform: translateY(1px) scale(0.99); }

.btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.85);
  color: #ffffff;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #ffffff; }

.btn-outline-ink {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-outline-ink:hover { background: var(--ink); color: var(--gold); border-color: var(--ink); }

.btn-sm { padding: 0.55rem 1.4rem; font-size: 0.92rem; }

/* ---------- Header ---------- */

.topbar {
  background: var(--ink);
  border-bottom: 1px solid var(--ink-line);
  color: var(--text-soft-on-ink);
  font-size: 0.92rem;
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 42px;
}
.topbar a { color: var(--text-on-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 0.45rem; }
.topbar a:hover { color: var(--gold); }
.topbar-contact { display: flex; gap: 1.5rem; align-items: center; }
.topbar-social { display: flex; gap: 0.9rem; align-items: center; }
.topbar .icon { width: 17px; height: 17px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
}
/* Paint-only transitions: padding/min-height changes snap so scrolling never
   animates layout (the background, radius and shadow carry the pill effect). */
.site-header .container {
  transition: background 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease;
}
/* Once scrolling, the header floats as a rounded pill */
.site-header:not(.at-top) {
  padding: 0.6rem 0 0.2rem;
}
.site-header:not(.at-top) .container {
  background: var(--ink);
  border-radius: 999px;
  min-height: 60px;
  padding-inline: 1.5rem;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.6);
}
.site-header:not(.at-top) .brand img { height: 46px; width: 46px; }
@media (max-width: 920px) {
  .site-header:not(.at-top) .site-nav {
    left: 0.75rem;
    right: 0.75rem;
    margin-top: 0.4rem;
    border-radius: 14px;
    border-top: none;
  }
}
/* At the top of the page the header goes transparent so the nav sits
   directly on the hero image, carrying its own soft gradient veil; it
   solidifies the moment it sticks. */
.site-header.at-top {
  background: linear-gradient(to bottom, rgba(8, 8, 8, 0.6), rgba(8, 8, 8, 0));
  box-shadow: none;
}
/* Nav CTA: solid gold with ink text in both header states, "Get a quote"
   (Jamie, 15 Sep; replaced the frosted white-text pill over the hero). */
.site-header.at-top .site-nav .btn,
.site-header .site-nav .btn {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.55rem 1.25rem;
}
.site-header .site-nav .btn:hover {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  color: var(--ink);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 76px;
}
.brand { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; }
/* The artwork carries built-in padding, so a slight scale-up makes the mark
   read larger without growing the header; the transparent PNG can overhang. */
.brand img {
  height: 64px;
  width: 64px;
  object-fit: cover;
  transform: scale(1.28);
  transform-origin: left center;
  margin-right: 0.4rem;
}
.brand-text { display: grid; line-height: 1.15; }
.brand-name {
  font-family: "Geist", sans-serif;
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: #ffffff;
}
.brand-name span { color: var(--gold); }
.brand-tag {
  font-family: "Geist", sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-soft-on-ink);
}
@media (max-width: 480px) { .brand-name { font-size: 1.3rem; } .brand-tag { font-size: 0.7rem; letter-spacing: 0.16em; } }

.site-nav { display: flex; align-items: center; gap: 1.7rem; }
.site-nav a {
  color: var(--text-on-ink);
  text-decoration: none;
  font-size: 1rem;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.site-nav a:hover { color: var(--gold); }
.site-nav a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }
.site-nav .btn { margin-left: 0.4rem; }

.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--gold);
  border-radius: 8px;
  color: var(--gold);
  padding: 0.45rem 0.55rem;
  cursor: pointer;
}
.nav-toggle .icon { width: 22px; height: 22px; display: block; }

@media (max-width: 920px) {
  .topbar-social { display: none; }
  .topbar .container { justify-content: center; }
  .topbar-contact { flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.5rem; padding-block: 0.35rem; }
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink-soft);
    border-top: 1px solid var(--ink-line);
    padding: 0.6rem 1.25rem 1.25rem;
    display: none;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 0.85rem 0.25rem; border-bottom: 1px solid var(--ink-line); }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--ink-line); }
  .site-nav .btn { margin: 1rem 0 0; justify-content: center; }
}

/* ---------- Hero (home slideshow) ---------- */

.hero {
  position: relative;
  min-height: min(78vh, 720px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ink);
  margin-top: -76px;
  padding-top: 76px;
}
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-slide.active { opacity: 1; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(12, 12, 12, 0.85) 0%, rgba(12, 12, 12, 0) 240px),
    linear-gradient(to right, rgba(12, 12, 12, 0.78) 0%, rgba(12, 12, 12, 0.45) 55%, rgba(12, 12, 12, 0.2) 100%);
}
.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: 4.5rem;
}
.hero-content h1 {
  color: #ffffff;
  font-size: clamp(2.7rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-shadow: 0 3px 34px rgba(0, 0, 0, 0.5);
}
.hero-content h1 .line { display: block; }
.gold-word { color: var(--gold); position: relative; display: inline-block; }
.gold-word svg {
  position: absolute;
  left: -2%;
  bottom: -0.26em;
  width: 104%;
  height: 0.34em;
  overflow: visible;
}
.gold-word svg path { fill: none; stroke: var(--gold); stroke-width: 7; stroke-linecap: round; }
.hero-content p {
  color: #e8e8e4;
  font-size: 1.15rem;
  margin: 1.1rem 0 1.9rem;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero-form {
  background: var(--paper);
  border-radius: var(--radius-card);
  padding: 1.5rem 1.6rem;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.55);
  display: grid;
  gap: 0.8rem;
}
.hero-form h2 { font-size: 1.35rem; font-weight: 600; }
.hero-form .form-note { font-size: 0.85rem; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; padding-block: 3.5rem; }
  .hero-form { max-width: 520px; }
}
/* Full-bleed home hero: viewport-height photo, headline low left, quote bar
   along the bottom. The 42px offset is the topbar above the overlaid header. */
.hero-fullbleed {
  min-height: calc(100vh - 42px);
  min-height: calc(100svh - 42px);
  align-items: stretch;
}
.hero-fullbleed::after {
  background:
    linear-gradient(to bottom, rgba(12, 12, 12, 0.6) 0%, rgba(12, 12, 12, 0) 220px),
    linear-gradient(to top, rgba(12, 12, 12, 0.84) 0%, rgba(12, 12, 12, 0.38) 32%, rgba(12, 12, 12, 0) 58%),
    linear-gradient(to right, rgba(12, 12, 12, 0.4) 0%, rgba(12, 12, 12, 0.08) 100%);
}
.hero-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: 2rem 2.4rem;
}
/* Headline block floats vertically centred in the space above the bar */
.hero-stage .hero-content { margin-block: auto; }
.hero-stage .hero-content h1 {
  max-width: 17ch;
  font-size: clamp(2.9rem, 7vw, 6.1rem);
}
.hero-stage .hero-content p {
  margin-bottom: 0;
  font-size: clamp(1.15rem, 1.5vw, 1.45rem);
}
/* Rotating gold word: a fixed-width slot sized by an invisible copy of the
   longest word, so "Built to" never shifts as words swap; the old word sinks
   and fades, the next rises in. */
.rotating-word { display: inline-block; position: relative; }
.rotating-word .rotating-word-size { visibility: hidden; }
/* Sizer word comes from data-size so it is not page text (search engines read
   the H1 as "Built to last." rather than "Built to withstand.last."). */
.rotating-word .rotating-word-size::before { content: attr(data-size); }
.rotating-word .rotating-word-text {
  position: absolute;
  left: 0;
  top: 0;
  transition: opacity 0.26s ease, transform 0.26s var(--ease-out);
}
.rotating-word.swapping .rotating-word-text { opacity: 0; transform: translateY(0.35em); }
/* On centred mobile text the fixed slot pushes short words left of centre,
   so the gold word takes its own line and each word centres itself. */
@media (max-width: 768px) {
  .rotating-word { display: block; }
  .rotating-word .rotating-word-text { left: 50%; transform: translateX(-50%); }
  .rotating-word.swapping .rotating-word-text { transform: translateX(-50%) translateY(0.35em); }
}
.hero-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.1rem 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  margin-top: 2.2rem;
  padding-top: 1.5rem;
}
.hero-bar .hero-facts { margin-top: 0; }
.hero-bar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
}
/* Postcode pill: labelled white field with the gold go-arrow inside */
.hero-postcode-wrap { display: flex; flex-direction: column; gap: 0.5rem; }
.hero-postcode-label { font-size: 0.92rem; font-weight: 500; color: #ffffff; }
.hero-bar-actions { align-items: flex-end; }
@media (max-width: 900px) {
  .hero-postcode-label { text-align: center; }
}
.hero-postcode {
  display: flex;
  align-items: center;
  background: var(--paper);
  border-radius: var(--radius-btn);
  padding: 0.3rem;
}
.hero-postcode:focus-within { outline: 2px solid var(--gold); outline-offset: 0; }
.hero-postcode.invalid { outline: 2px solid #e0604f; }
.hero-postcode input {
  font: inherit;
  /* 16px minimum: anything smaller makes iOS Safari zoom the page on focus */
  font-size: 1rem;
  color: var(--text);
  background: transparent;
  border: none;
  padding: 0.45rem 0.9rem;
  min-width: 180px;
  outline: none;
}
.hero-postcode-go {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--radius-btn);
  background: var(--gold);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s ease;
}
.hero-postcode-go:hover { background: var(--gold-deep); }
.hero-postcode-go .icon { width: 20px; height: 20px; }
/* Text submit fused into the pill: desktop only, arrow stays for mobile */
.hero-postcode-quote { display: none; }
.hero-postcode-error {
  font-size: 0.88rem;
  color: #ffb4a8;
}
@media (max-width: 900px) {
  .hero-postcode-error { text-align: center; }
}
/* Mobile: the lede ("Family run, trusted quality...") sits just above the
   hairline with the trust facts below it (Jamie, 11 Sep). The headline
   centres in whatever space is left above the lede. */
@media (max-width: 900px) {
  .hero-bar { flex-direction: column; align-items: center; margin-top: 1.4rem; }
  .hero-bar .hero-facts { justify-content: center; }
  .hero-bar-actions { justify-content: center; }
  .hero-postcode { flex-wrap: wrap; justify-content: center; }
  .hero-fullbleed .hero-stage .hero-content { flex: 1 1 auto; display: flex; flex-direction: column; margin-block: 0; }
  .hero-fullbleed .hero-stage .hero-content h1 { margin-block: auto; }
  .hero-fullbleed .hero-stage .hero-content p { margin-top: auto; padding-top: 1.5rem; }
}
/* Desktop: the bar follows the Stitch concept — one frosted panel, facts
   left with hairline dividers, then the white postcode pill with the gold
   arrow submit sitting left of a gold quote link and the solid gold call
   button. The floating label is mobile-only.
   Mobile keeps the plain stacked layout above. */
@media (min-width: 901px) {
  .hero-fullbleed .hero-stage { width: min(1520px, 88%); }
  .hero-bar {
    border-top: none;
    padding: 1rem 1.2rem 1rem 1.6rem;
    background: rgba(13, 13, 13, 0.55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-card);
    box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.6);
    gap: 1rem 1.5rem;
  }
  .hero-bar .hero-facts { gap: 0; flex-wrap: nowrap; }
  .hero-bar .hero-facts li { padding-inline: 1.2rem; white-space: nowrap; }
  .hero-bar .hero-facts li:first-child { padding-left: 0; }
  .hero-bar .hero-facts li + li { border-left: 1px solid rgba(255, 255, 255, 0.18); }
  .hero-bar-actions {
    align-items: center;
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 0.75rem;
  }
  .hero-postcode-label { font-size: 0.78rem; color: rgba(255, 255, 255, 0.85); }
  .hero-postcode-wrap { margin-right: auto; display: grid; gap: 0.25rem; justify-items: start; }
  .hero-postcode { gap: 0.3rem; }
  .hero-postcode input { min-width: 220px; }
  .hero-bar .btn-ghost {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ink);
  }
  .hero-bar .btn-ghost:hover { background: var(--gold-deep); border-color: var(--gold-deep); }
  .hero-postcode-error { text-align: left; }
}
/* Wide desktop: the topbar already carries the trust facts, so the hero bar
   drops its duplicate set (they return below 1101px when the topbar hides). */
@media (min-width: 1101px) {
  .hero-bar .hero-facts { display: none; }
}

/* Sub-page hero */
.page-hero {
  position: relative;
  background: var(--ink);
  overflow: hidden;
  margin-top: -76px;
  padding-top: 76px;
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0.38;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(12, 12, 12, 0.85) 0%, rgba(12, 12, 12, 0.35) 240px, rgba(12, 12, 12, 0.72));
}
.page-hero .container {
  position: relative;
  z-index: 2;
  padding-block: clamp(3.5rem, 8vw, 5.5rem);
}
.page-hero h1 {
  color: #ffffff;
  max-width: 18ch;
  font-size: clamp(2.3rem, 4.6vw, 3.4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-shadow: 0 3px 30px rgba(0, 0, 0, 0.45);
}
.page-hero p { color: #dddcd6; margin-top: 1rem; font-size: 1.15rem; }
/* Service page hero: page-hero look with the home hero's form card */
.service-hero {
  position: relative;
  background: var(--ink);
  overflow: hidden;
  margin-top: -76px;
  padding-top: 76px;
}
.service-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(12, 12, 12, 0.85) 0%, rgba(12, 12, 12, 0.45) 240px, rgba(12, 12, 12, 0.72));
}
.service-hero .hero-grid { padding-block: clamp(3rem, 6vw, 4.5rem); }
/* Mobile: the quote card straddles the hero's bottom edge — half over the
   photo, half on the page — so more of the photo shows above it. The next
   section's padding clears the overhang (form is ~680px tall on a phone). */
@media (max-width: 900px) {
  .service-hero { overflow: visible; }
  .service-hero .hero-grid { padding-bottom: 0; }
  .service-hero .hero-form { margin-top: 6.5rem; margin-bottom: -340px; }
  .service-hero + .section { padding-top: calc(340px + 3.5rem); }
  .service-hero-noform .hero-grid { padding-bottom: clamp(3rem, 6vw, 4.5rem); }
  .service-hero-noform + .section { padding-top: clamp(3rem, 6vw, 4.5rem); }
}
/* Hero without the quote card (your-area page): single column, copy only. */
.service-hero-noform .hero-grid { grid-template-columns: 1fr; }
.service-hero-noform .hero-content { max-width: 640px; }
.service-hero h1 {
  max-width: 16ch;
  font-size: clamp(2.3rem, 4.6vw, 3.4rem);
  line-height: 1.1;
}

/* your-area hero: copy centred on desktop (Jamie, 15 Sep). Mobile is
   already centred site-wide, so this only touches >=901px. */
@media (min-width: 901px) {
  .service-hero-centred .hero-content { margin-inline: auto; text-align: center; }
  .service-hero-centred h1 { margin-inline: auto; max-width: none; }
  .service-hero-centred .hero-content p { margin-inline: auto; }
  .service-hero-centred .hero-actions,
  .service-hero-centred .hero-facts { justify-content: center; }
}

/* Service hero v2 (Jamie, 15 Sep): desktop-only richer treatment. Mobile
   keeps the exact pre-v2 layout — every rule below the base hide sits in a
   >=901px query, and the new aside (trust panel + photo tag)
   do not render on phones at all. */
.hero-aside { display: none; }
@media (min-width: 901px) {
  .service-hero-v2 { min-height: min(60vh, 560px); display: flex; flex-direction: column; }
  /* Photo at full strength on the right; a near-solid ink scrim carries the copy on the left. */
  .service-hero-v2 .page-hero-bg { opacity: 1; object-position: center 42%; }
  .service-hero-v2::after {
    background:
      linear-gradient(to bottom, rgba(12, 12, 12, 0.82) 0%, rgba(12, 12, 12, 0) 210px),
      linear-gradient(to top, rgba(12, 12, 12, 0.55) 0%, rgba(12, 12, 12, 0) 180px),
      linear-gradient(97deg, rgba(12, 12, 12, 0.97) 0%, rgba(12, 12, 12, 0.93) 36%, rgba(12, 12, 12, 0.5) 60%, rgba(12, 12, 12, 0.18) 100%);
  }
  /* Gold edge along the bottom of the hero. */
  .service-hero-v2::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    background: var(--gold);
    z-index: 3;
  }
  .service-hero-v2 .hero-grid {
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 7fr) minmax(300px, 4fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
    padding-block: clamp(2.5rem, 4vw, 3.5rem) clamp(2.25rem, 3.5vw, 3rem);
  }
  .service-hero-v2 .hero-content { max-width: 620px; }
  .service-hero-v2 h1 {
    max-width: 14ch;
    font-size: clamp(2.9rem, 4.9vw, 4.3rem);
    line-height: 1.04;
  }
  .service-hero-v2 .hero-content p { font-size: 1.2rem; max-width: 46ch; color: #e2e1dc; margin: 1.3rem 0 2rem; }
  /* Facts as a hairline-divided row, like the home hero bar. */
  .service-hero-v2 .hero-facts { gap: 0; margin-top: 2.1rem; color: #cfcec8; }
  .service-hero-v2 .hero-facts li { padding-inline: 1.1rem; white-space: nowrap; }
  .service-hero-v2 .hero-facts li:first-child { padding-left: 0; }
  .service-hero-v2 .hero-facts li + li { border-left: 1px solid rgba(255, 255, 255, 0.2); }
  /* Wide desktop: the topbar already lists these facts (same rule as home). */
  @media (min-width: 1101px) { .service-hero-v2 .hero-facts { display: none; } }
  /* Frosted trust panel over the photo. */
  .hero-aside {
    display: block;
    justify-self: end;
    align-self: center;
    width: min(100%, 360px);
    padding: 1.35rem 1.45rem 1.15rem;
    background: rgba(13, 13, 13, 0.55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-card);
    box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.6);
  }
  .hero-aside ul { list-style: none; margin: 0; padding: 0; display: grid; }
  .hero-aside li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 0.85rem;
    align-items: start;
    padding-block: 0.85rem;
  }
  .hero-aside li:first-child { padding-top: 0; }
  .hero-aside li + li { border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .hero-aside .icon { width: 22px; height: 22px; color: var(--gold); margin-top: 1px; }
  .hero-aside strong { display: block; font-family: "Geist", sans-serif; font-weight: 600; font-size: 0.98rem; color: #ffffff; line-height: 1.3; }
  .hero-aside span { display: block; font-size: 0.86rem; color: rgba(255, 255, 255, 0.68); margin-top: 0.15rem; }
  .hero-aside-tag {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.9rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.6);
  }
  .hero-aside-tag .icon { width: 14px; height: 14px; color: var(--gold); flex-shrink: 0; }
  @media (prefers-reduced-motion: no-preference) {
    .hero-aside {
      opacity: 0;
      transform: translateY(26px);
      animation: hero-rise 0.9s var(--ease-out) forwards;
    }
    .hero-aside { animation-delay: 0.55s; }
  }
}

/* Hero entrance: lines rise in turn, then the gold underline draws itself. */
@media (prefers-reduced-motion: no-preference) {
  .hero-content h1 .line,
  .service-hero .hero-content h1,
  .page-hero h1,
  .hero-content p,
  .hero-actions,
  .hero-facts,
  .hero-bar,
  .page-hero p {
    opacity: 0;
    transform: translateY(26px);
    animation: hero-rise 0.9s var(--ease-out) forwards;
  }
  .hero-content h1 .line:nth-child(2) { animation-delay: 0.13s; }
  .hero-content p, .page-hero p { animation-delay: 0.3s; }
  .hero-actions, .hero-facts, .hero-bar { animation-delay: 0.42s; }
  /* Inside the full-bleed bar the facts ride the bar's own entrance. */
  .hero-bar .hero-facts { opacity: 1; transform: none; animation: none; }
  .gold-word svg path {
    stroke-dasharray: 320;
    stroke-dashoffset: 320;
    animation: gold-draw 0.7s var(--ease-out) 0.75s forwards;
  }
}
@keyframes hero-rise { to { opacity: 1; transform: translateY(0); } }
@keyframes gold-draw { to { stroke-dashoffset: 0; } }

.hero-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin-top: 1.7rem;
  color: #dddcd6;
  font-size: 0.95rem;
}
.hero-facts li { display: flex; align-items: center; gap: 0.45rem; }
.hero-facts .icon { width: 17px; height: 17px; color: var(--gold); flex-shrink: 0; }

/* What's included band (ink) */
.included-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(2rem, 5vw, 4rem);
  max-width: 980px;
  margin-inline: auto;
}
.included-grid li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  color: var(--text-soft-on-ink);
  font-size: 1.05rem;
  padding: 1.05rem 0;
  border-top: 1px solid var(--ink-line);
}
.included-grid .icon { width: 22px; height: 22px; color: var(--gold); flex-shrink: 0; margin-top: 0.15rem; }
@media (max-width: 700px) {
  .included-grid { grid-template-columns: 1fr; }
}

/* Recent work strip */
.gallery-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.gallery-strip img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-card);
}
.gallery-more { margin-top: 2rem; text-align: center; max-width: none; }
@media (max-width: 700px) {
  .gallery-strip { grid-template-columns: 1fr; }
}

/* Centered trust band */
.trust-band { text-align: center; max-width: 760px; }
.trust-band p { margin-top: 1rem; color: var(--text-soft); }
.trust-band .trust-facts { justify-content: center; margin-block: 1.6rem 1.9rem; color: var(--text-soft); }

/* Reply promise beside forms */
.form-submit { text-align: center; }
.reply-promise {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  color: var(--text-soft);
  margin-top: 0.2rem;
}
.reply-promise .icon { width: 16px; height: 16px; color: var(--gold-deep); flex-shrink: 0; }
.section-ink .reply-promise { color: var(--text-soft-on-ink); }
.section-ink .reply-promise .icon { color: var(--gold); }

/* Customer reviews (renders only when reviews-data.mjs is populated).
   Card slider after Shadcn Studio Testimonials 04. */
.review-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2.4rem) / 3);
  gap: 1.2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block: 0.2rem;
}
.review-track::-webkit-scrollbar { display: none; }
@media (max-width: 900px) { .review-track { grid-auto-columns: calc((100% - 1.2rem) / 2); } }
@media (max-width: 620px) { .review-track { grid-auto-columns: 100%; } }
.review-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.6rem 1.7rem;
  color: var(--text-soft);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 0;
}
.review-stars { display: flex; gap: 2px; font-size: 1.05rem; line-height: 1; color: var(--line); }
.review-stars .filled { color: var(--gold); }
.review-card p { font-size: 1.02rem; margin: 0; }
.review-card footer { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; padding-top: 0.2rem; }
.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Geist", sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  flex: none;
}
.review-who { display: grid; font-weight: 600; font-size: 0.95rem; color: var(--text); }
.review-who span { font-weight: 500; font-size: 0.85rem; color: var(--text-soft); }
.review-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.4rem; }
.review-dots { display: flex; gap: 0.45rem; }
.review-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.25s var(--ease-out);
}
.review-dots span.active { background: var(--gold); }
.review-card p.clamped {
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-more {
  border: none;
  background: none;
  padding: 0;
  font-family: "Geist", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  align-self: flex-start;
}
.review-more:hover { color: var(--ink); text-decoration-thickness: 2px; }
.review-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.review-arrow svg { width: 18px; height: 18px; }
.review-arrow:hover { background: var(--ink); color: var(--gold); border-color: var(--ink); }

/* Guide price sections: centre the heading above and the note/button below */
.section:has(.price-bands) .section-head { text-align: center; }
.section:has(.price-bands) .section-head p { margin-inline: auto; max-width: 62ch; }
.section:has(.price-bands) > .container > p { text-align: center; margin-inline: auto; }
.price-bands { margin-inline: auto; }

/* Case study: heading and copy centred around the before/after slider */
.case-study .section-head { text-align: center; }
.case-study .section-head p { margin-inline: auto; max-width: 62ch; }
.case-study-copy { max-width: 760px; margin: 2rem auto 0; text-align: center; }
.case-study-copy p { color: var(--text-soft); }
.case-study-copy p + p { margin-top: 1rem; }

/* Privacy policy */
.privacy-copy { max-width: 720px; margin-inline: auto; }
.privacy-copy h2 { font-size: 1.45rem; margin-top: 2.2rem; }
.privacy-copy h2:first-child { margin-top: 0; }
.privacy-copy p { color: var(--text-soft); margin-top: 0.8rem; }
.privacy-copy a { color: var(--text); }

/* Sticky mobile CTA bar */
.sticky-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  gap: 0.7rem;
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px -18px rgba(21, 21, 21, 0.4);
  transform: translateY(0);
  transition: transform 0.3s var(--ease-out);
}
.sticky-cta.hidden { transform: translateY(110%); }
.sticky-cta .btn { flex: 1; justify-content: center; display: inline-flex; align-items: center; gap: 0.5rem; padding-inline: 1rem; }
.sticky-cta .btn .icon { width: 18px; height: 18px; flex: none; }
@media (max-width: 700px) {
  .sticky-cta { display: flex; }
  body { padding-bottom: 74px; }
}

/* Cookie consent banner (built by js/main.js, Sep 2026). Ink card bottom
   left on desktop; full width on phones, sitting over the sticky CTA bar
   until answered. Accept and Decline are the same size on purpose: the ICO
   wants refusing to be as easy as accepting. */
.cookie-banner {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 90;
  width: min(400px, calc(100% - 2.5rem));
  padding: 1.3rem 1.4rem 1.4rem;
  background: var(--ink);
  color: var(--text-on-ink);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-card);
  box-shadow: 0 22px 50px -20px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner.is-open { opacity: 1; transform: none; }
.cookie-banner-title { font-weight: 600; font-size: 1.02rem; color: #ffffff; margin-bottom: 0.35rem; }
.cookie-banner-text { font-size: 0.92rem; line-height: 1.55; color: var(--text-soft-on-ink); margin-bottom: 1rem; }
.cookie-banner-text a { color: var(--text-on-ink); }
.cookie-banner-text a:hover { color: var(--gold); }
.cookie-banner-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.cookie-banner-actions .btn { width: 100%; padding-inline: 1rem; }
.cookie-decline { background: transparent; border-color: rgba(255, 255, 255, 0.85); color: #ffffff; }
.cookie-decline:hover { background: rgba(255, 255, 255, 0.12); border-color: #ffffff; }
.footer-cookie-link {
  font: inherit;
  color: var(--text-soft-on-ink);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.footer-cookie-link:hover { color: var(--gold); text-decoration: underline; }
.privacy-copy .btn { margin-top: 0.4rem; }
@media (min-width: 701px) {
  .cookie-banner { width: min(470px, calc(100% - 2.5rem)); padding: 1.7rem 1.8rem 1.8rem; left: 1.5rem; }
  .cookie-banner-title { font-size: 1.2rem; margin-bottom: 0.5rem; }
  .cookie-banner-text { font-size: 1rem; line-height: 1.6; margin-bottom: 1.3rem; }
  .cookie-banner-actions { gap: 0.75rem; }
  .cookie-banner-actions .btn { padding-block: 0.8rem; font-size: 1rem; }
}
@media (max-width: 700px) {
  .cookie-banner {
    left: 0;
    bottom: 0;
    width: 100%;
    border-radius: 0;
    border-width: 1px 0 0;
    padding: 1.2rem 1rem calc(1rem + env(safe-area-inset-bottom));
    text-align: center;
  }
  .cookie-banner-actions .btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: none; }
}

.breadcrumbs { font-size: 0.92rem; color: #b9b9b2; margin-bottom: 1.1rem; }
.breadcrumbs a { color: #d9d9d3; text-decoration: none; }
.breadcrumbs a:hover { color: var(--gold); }

/* ---------- Trust strip ---------- */

.trust-strip { background: var(--gold); }
.trust-strip .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 0.95rem;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: "Geist", sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink);
}
.trust-item .icon { width: 19px; height: 19px; }

/* ---------- Cards / grids ---------- */

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.6rem;
}
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
  transform-style: preserve-3d;
  will-change: transform;
}
.service-card:hover { box-shadow: var(--shadow-card); }
.service-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink); }
.service-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.service-card:hover .service-card-media img { transform: scale(1.05); }
.service-card-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.service-card-body p { color: var(--text-soft); font-size: 1rem; flex: 1; }
.service-card-more {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: "Geist", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}
.service-card-more .icon { width: 17px; height: 17px; transition: transform 0.25s var(--ease-out); color: var(--gold-deep); }
.service-card:hover .service-card-more .icon { transform: translateX(5px); }

/* Work gallery */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.3rem;
}
.work-item {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--ink);
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow 0.35s var(--ease-out);
}
.work-item.wide { aspect-ratio: 16 / 10; grid-column: span 2; }
@media (max-width: 640px) { .work-item.wide { grid-column: span 1; } }
.work-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); cursor: zoom-in; }
.work-item:hover img { transform: scale(1.04); }
.work-item:hover { box-shadow: var(--shadow-card); }

/* Lightbox for full-size gallery viewing */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(8, 8, 8, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  cursor: zoom-out;
}
.lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: var(--radius-card);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
}
.lightbox-close {
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
  background: none;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  color: #ffffff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { border-color: var(--gold); color: var(--gold); }

/* Before / after slider */
.ba-slider {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-width: 620px;
  margin-inline: auto;
  touch-action: none;
  background: var(--ink);
  user-select: none;
  -webkit-user-select: none;
}
.ba-slider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ba-after-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 0 0 50%);
}
.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  background: var(--gold);
  transform: translateX(-50%);
  cursor: ew-resize;
}
.ba-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151515' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7l-5 5 5 5'/%3E%3Cpath d='M16 7l5 5-5 5'/%3E%3C/svg%3E");
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: center;
}
.ba-label {
  position: absolute;
  top: 1rem;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-btn);
  font-family: "Geist", sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  background: rgba(12, 12, 12, 0.72);
  color: #ffffff;
  z-index: 2;
  pointer-events: none;
}
.ba-label.before { left: 1rem; }
.ba-label.after { right: 1rem; }

/* ---------- Split sections ---------- */

.split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split-media {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-copy h2 { margin-bottom: 1rem; }
.split-copy p + p { margin-top: 0.9rem; }
.split-copy .btn { margin-top: 1.7rem; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split-media { max-height: 420px; }
}

/* Checklist */
.check-list { list-style: none; display: grid; gap: 0.8rem; margin-top: 1.4rem; }
.check-list li { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--text-soft); }
.check-list .icon { width: 21px; height: 21px; color: var(--gold-deep); flex-shrink: 0; margin-top: 0.2rem; }
.section-ink .check-list li { color: var(--text-soft-on-ink); }
.section-ink .check-list .icon { color: var(--gold); }

/* ---------- Steps timeline (How we quote) ---------- */

.steps { list-style: none; display: grid; gap: 0; max-width: 760px; margin-inline: auto; counter-reset: step; }
.step {
  position: relative;
  padding: 0 0 2.4rem 4.4rem;
  counter-increment: step;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -0.2rem;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold);
  font-family: "Geist", sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 54px;
  bottom: 6px;
  width: 2px;
  background: var(--line);
}
.step:last-child { padding-bottom: 0; }
.step:last-child::after { display: none; }
.step h2, .step h3 { font-size: clamp(1.15rem, 1.9vw, 1.35rem); font-weight: 600; letter-spacing: 0; margin-bottom: 0.4rem; }
.step p { color: var(--text-soft); font-size: 1.05rem; }

/* ---------- Calculator ---------- */

.calc-shell {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 860px;
  margin-inline: auto;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: stretch;
}
@media (max-width: 900px) { .calc-shell { grid-template-columns: 1fr; } }

.calc-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: var(--shadow-card);
}
.calc-progress { display: flex; gap: 0.5rem; margin-bottom: 1.8rem; }
.calc-progress span {
  height: 6px;
  flex: 1;
  border-radius: 3px;
  background: var(--line);
  transition: background 0.3s;
}
.calc-progress span.done { background: var(--gold); }

.calc-step h3 { font-size: clamp(1.5rem, 2.4vw, 1.85rem); margin-bottom: 0.45rem; }
.calc-step > p { color: var(--text-soft); margin-bottom: 1.4rem; font-size: 1.02rem; }

.calc-eyebrow {
  display: block;
  font-family: "Geist", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 0.6rem;
}
.calc-options { display: grid; gap: 0; border-bottom: 1px solid var(--line); }
.calc-option {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  text-align: left;
  font-family: "Heebo", sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 1.1rem 0.9rem;
  cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease, padding-left 0.22s ease;
}
.calc-option .opt-num {
  font-family: "Geist", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--gold-deep);
  transition: color 0.22s ease;
}
.calc-option .opt-text { flex: 1; }
.calc-option .opt-arrow {
  width: 20px;
  height: 20px;
  color: var(--gold);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
/* Hover fill only on devices that actually hover: on touch screens the
   browser keeps :hover stuck on the last tapped spot, which painted the
   same row ink-black on the next step. */
@media (hover: hover) {
  .calc-option:hover { background: var(--ink); color: #fff; padding-left: 1.35rem; }
  .calc-option:hover .opt-num { color: var(--gold); }
  .calc-option:hover small { color: rgba(255, 255, 255, 0.65); }
  .calc-option:hover .opt-arrow { opacity: 1; transform: none; }
}
.calc-option.selected { background: var(--gold); color: var(--ink); }
.calc-option.selected .opt-num { color: var(--ink); }
.calc-option.selected .opt-arrow { opacity: 1; transform: none; color: var(--ink); }
.calc-option:active { transform: scale(0.995); }
.calc-option small { display: block; color: var(--text-soft); font-weight: 400; font-size: 0.9rem; margin-top: 0.2rem; }

.calc-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1.8rem; }
.calc-back {
  background: none;
  border: none;
  font-family: "Geist", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.4rem;
}
.calc-back:hover { color: var(--ink); }
.calc-back .icon { width: 17px; height: 17px; }
.calc-back[hidden] { display: none; }

/* p.calc-result-price must out-specify the .calc-step > p body size */
.calc-step p.calc-result-price,
.calc-result-price {
  font-family: "Geist", sans-serif;
  font-weight: 700;
  font-size: clamp(2.1rem, 4.5vw, 2.9rem);
  color: var(--ink);
  margin: 0.6rem 0 0.4rem;
}
.calc-result-note { color: var(--text-soft); font-size: 0.98rem; }
.calc-summary { list-style: none; margin: 1.3rem 0; display: grid; gap: 0.5rem; border-top: 1px solid var(--line); padding-top: 1.3rem; }
.calc-summary li { display: flex; justify-content: space-between; gap: 1rem; font-size: 1rem; }
.calc-summary li span:first-child { color: var(--text-soft); }
.calc-summary li span:last-child { font-weight: 500; text-align: right; }
.calc-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 1.4rem; }

/* Calculator visual: worn house becomes the finished roof at the result.
   No card chrome; the renders sit straight on the page and fill the column
   to match the form panel's height. */
.calc-visual-col { display: flex; flex-direction: column; }
.calc-visual {
  position: relative;
  flex: 1;
  min-height: 340px;
}
@media (max-width: 900px) { .calc-visual-col { display: none; } }
.calc-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.calc-visual .calc-house-after {
  opacity: 0;
  transition: opacity 0.9s var(--ease-out);
}
.calc-visual.done .calc-house-after { opacity: 1; }
.calc-visual-label {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-btn);
  font-family: "Geist", sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  background: rgba(12, 12, 12, 0.72);
  color: #ffffff;
}
.calc-visual.done .calc-visual-label { background: var(--gold); color: var(--ink); }
.house-hint { text-align: center; color: var(--text-soft); font-size: 0.92rem; margin-top: 0.6rem; }

/* ---------- Forms ---------- */

.form-grid { display: grid; gap: 1.1rem; }
.form-grid.two-col { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .form-grid.two-col { grid-template-columns: 1fr; } }
.field { display: grid; gap: 0.45rem; }
.field label { font-family: "Geist", sans-serif; font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.field input, .field select, .field textarea {
  font-family: "Geist", sans-serif;
  font-size: 1rem;
  color: var(--ink);
  background: var(--field);
  border: 2px solid transparent;
  border-radius: var(--radius-input);
  padding: 0.8rem 1rem;
  width: 100%;
  caret-color: var(--gold-deep);
}
.field input::placeholder, .field textarea::placeholder { color: #6d6d68; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.field textarea { min-height: 130px; resize: vertical; }
.field .hint { font-size: 0.88rem; color: var(--text-soft); }
.field .error-msg { font-size: 0.9rem; color: #a3341f; display: none; }
.field.invalid input, .field.invalid textarea { border-color: #a3341f; }
.field.invalid .error-msg { display: block; }
.form-note { font-size: 0.95rem; color: var(--text-soft); }
.form-status { font-weight: 500; color: var(--ink); }
.form-success { display: grid; gap: 0.6rem; padding-block: 1rem; }
.section-ink .form-success h3 { color: var(--text-on-ink); }

.section-ink .field label { color: var(--text-on-ink); }
.section-ink .field input, .section-ink .field select, .section-ink .field textarea {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
.section-ink .field input:focus, .section-ink .field select:focus, .section-ink .field textarea:focus { border-color: var(--gold); }
/* The native option list renders on a light panel, so options must never
   inherit the dark section's white text. */
.field select option { color: var(--ink); background: var(--paper); }
.section-ink .field input::placeholder, .section-ink .field textarea::placeholder { color: #b5b5ae; }
.section-ink .form-note { color: var(--text-soft-on-ink); }
.section-ink .form-status { color: var(--text-on-ink); }

/* ---------- Contact / social ---------- */

.contact-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.contact-cell {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  padding: 1.8rem 1.6rem;
  border-left: 1px solid var(--line);
  text-align: left;
  justify-items: start;
}
.contact-cell:first-child { border-left: 0; padding-left: 0; }
.contact-cell a { text-decoration: none; font-weight: 500; color: var(--ink); }
.contact-cell a:hover { color: var(--gold-deep); }
.strip-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: "Geist", sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 0.35rem;
}
.strip-label .icon { width: 17px; height: 17px; }
@media (max-width: 900px) {
  .contact-strip { grid-template-columns: 1fr; border-top: 0; }
  .contact-cell { border-left: 0; border-top: 1px solid var(--line); padding: 1.3rem 0; }
  .contact-cell:first-child { border-top: 0; }
}

/* Contact page: strip lives inside the dark form section's left column */
.contact-split { align-items: start; }
.contact-split .contact-strip {
  grid-template-columns: 1fr 1fr;
  border: 0;
  margin-top: 2.2rem;
}
.contact-split .contact-cell {
  border-left: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding: 1.25rem 1rem 0.4rem 0;
}
.contact-split .contact-cell a,
.contact-split .contact-cell span:not(.strip-label) { color: #fff; }
.contact-split .contact-cell .muted { color: rgba(255, 255, 255, 0.55); }
.contact-split .contact-cell a:hover { color: var(--gold); }
.contact-split .strip-label { color: var(--gold); }
/* Social boxes: no label and no hairline above, they just follow on */
.contact-split .contact-socials { border-top: 0; padding-top: 0.6rem; }
@media (max-width: 560px) {
  .contact-split .contact-strip { grid-template-columns: 1fr; }
}
.contact-cell .social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.contact-cell .social-link .icon { width: 17px; height: 17px; flex: none; }

/* Contact page socials as bordered boxes (Sep 2026) */
.social-boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 0.2rem;
  max-width: 320px;
}
.social-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-width: 140px;
  padding: 0.65rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  font-family: "Geist", sans-serif;
  font-weight: 500;
}
.social-box .icon { width: 17px; height: 17px; flex: none; }
.contact-split .contact-cell a.social-box:hover {
  color: var(--gold);
  border-color: var(--gold);
}

.fb-embed-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
}
.fb-embed-wrap iframe { border: none; max-width: 100%; border-radius: var(--radius-card); }
/* Our own job photos under the Facebook header (the plugin no longer sends
   the timeline). Every tile opens the Facebook page. */
.fb-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  width: 100%;
}
.fb-photos a { display: block; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 1; }
.fb-photos img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
@media (hover: hover) { .fb-photos a:hover img { transform: scale(1.04); } }
.fb-more { color: var(--text); font-weight: 500; text-underline-offset: 3px; }
.fb-more:hover { color: var(--gold-deep); }
/* When the plugin is blocked (content blockers, some Safari setups) the
   iframe never loads; js/main.js adds .fb-failed and this panel takes over. */
.fb-embed-fallback {
  display: none;
  width: 100%;
  padding: 2.2rem 1.6rem;
  background: var(--paper-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  text-align: center;
  text-decoration: none;
  color: var(--text-soft);
}
.fb-embed-fallback strong { display: block; color: var(--text); margin-bottom: 0.35rem; }
.fb-embed-fallback:hover strong { color: var(--gold-deep); }
.fb-embed-wrap.fb-failed iframe { display: none; }
.fb-embed-wrap.fb-failed .fb-embed-fallback { display: block; }
.social-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.6rem; }
.social-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.35rem;
  border-radius: var(--radius-btn);
  border: 2px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  font-family: "Geist", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.2s, color 0.2s;
}
.social-chip:hover { background: var(--ink); color: var(--gold); }
.social-chip .icon { width: 19px; height: 19px; }
.section-ink .social-chip { border-color: var(--gold); color: var(--gold); }
.section-ink .social-chip:hover { background: var(--gold); color: var(--ink); }

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

.cta-band { background: var(--ink); }
.cta-band .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding-block: clamp(2.8rem, 6vw, 4rem);
}
.cta-band h2 { color: #ffffff; max-width: 22ch; }
.cta-band p { color: var(--text-soft-on-ink); margin-top: 0.6rem; }
.cta-band-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---------- Footer ---------- */

.site-footer { background: var(--ink); color: var(--text-soft-on-ink); border-top: 1px solid var(--ink-line); }
.site-footer .container { padding-block: 3rem 2.5rem; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; } }
.footer-grid .footer-heading {
  color: #ffffff;
  font-family: "Geist", sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 1.3rem;
}
.footer-grid ul { list-style: none; display: grid; gap: 0.9rem; }
.footer-grid a { color: var(--text-soft-on-ink); text-decoration: none; font-size: 0.98rem; font-weight: 500; }
.footer-grid a:hover { color: var(--gold); text-decoration: underline; }
.footer-bar { background: rgba(255, 255, 255, 0.05); }
.footer-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: 1.3rem;
  font-size: 0.9rem;
}
.footer-bar-inner strong { color: #ffffff; font-weight: 600; }
.footer-bar-inner a { color: var(--text-soft-on-ink); text-decoration: none; }
.footer-bar-inner a:hover { color: var(--gold); text-decoration: underline; }
.footer-social { display: flex; align-items: center; gap: 1.3rem; }
.footer-social a { display: inline-flex; }
.footer-social .icon { width: 20px; height: 20px; }
.footer-social a:hover .icon { color: var(--gold); }

/* ---------- Reveal on scroll ---------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  }
  .reveal.in { opacity: 1; transform: none; }
  .reveal-d1 { transition-delay: 0.08s; }
  .reveal-d2 { transition-delay: 0.16s; }
  .reveal-d3 { transition-delay: 0.24s; }
}

/* ---------- FAQ ---------- */

.faq { max-width: 780px; margin-inline: auto; display: grid; gap: 0.9rem; }
.faq details {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.1rem 1.3rem;
  background: var(--paper);
}
.faq summary {
  font-family: "Geist", sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  color: var(--ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--gold-deep); transition: transform 0.25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: 0.8rem; color: var(--text-soft); font-size: 1.02rem; }

/* ---------- Areas ---------- */

.area-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; max-width: 800px; margin-inline: auto; }
.area-cloud span,
.area-cloud a {
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-btn);
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 0.98rem;
  color: var(--text-soft);
}
.area-cloud a { text-decoration: none; transition: border-color 0.2s, color 0.2s; }
.area-cloud a:hover,
.area-cloud a:focus-visible { border-color: var(--gold-deep); color: var(--text); }

/* ---------- Area link grids ---------- */

.area-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.9rem;
}
.area-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.95rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: var(--paper);
  text-decoration: none;
  font-family: "Geist", sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink);
  transition: border-color 0.2s, background 0.2s;
}
.area-links a .icon { width: 17px; height: 17px; color: var(--gold-deep); flex-shrink: 0; }
.area-links a:hover { border-color: var(--gold); background: #fdf6e0; }

/* ---------- Price bands table (calculator page) ---------- */

.price-bands { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.3rem; max-width: 960px; }
.price-band {
  position: relative;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-card);
  padding: 1.8rem 1.6rem 1.5rem;
  background: var(--ink-soft);
  display: grid;
  gap: 0.45rem;
  align-content: start;
  container-type: inline-size; /* lets .price size to the card, not the viewport */
  min-width: 0;
}
.price-band.featured { border: 2px solid var(--gold); }
.price-band .tag {
  position: absolute;
  top: -0.85rem;
  left: 1.4rem;
  background: var(--gold);
  color: var(--ink);
  font-family: "Geist", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 0.25rem 0.8rem;
  border-radius: var(--radius-btn);
}
.price-band .size { font-family: "Geist", sans-serif; font-weight: 600; color: #ffffff; font-size: 0.98rem; }
.price-band .price {
  font-family: "Geist", sans-serif;
  font-weight: 700;
  font-size: clamp(1.45rem, 11cqi, 2.4rem); /* sized to the card so "£6,200 - £6,800" fits a 3-col card */
  line-height: 1.15;
  color: var(--gold);
  white-space: nowrap; /* never break a price range mid-figure */
  letter-spacing: -0.01em;
}
.price-band .note { font-size: 0.92rem; color: var(--text-soft-on-ink); }
.price-band .warranty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.7rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--ink-line);
  font-size: 0.9rem;
  color: var(--text-soft-on-ink);
}
.price-band .warranty .icon { width: 17px; height: 17px; color: var(--gold); flex-shrink: 0; }

/* ---------- Topbar trust facts (Speedy-style) ---------- */

.topbar-facts { display: flex; gap: 0; align-items: center; font-size: 0.88rem; color: var(--text-soft-on-ink); }
.topbar-facts span { padding-inline: 0.9rem; border-left: 1px solid var(--ink-line); white-space: nowrap; }
.topbar-facts span:first-child { border-left: none; }
@media (max-width: 1100px) { .topbar-facts { display: none; } }

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

.values-panel {
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-card);
  padding: clamp(2rem, 4.5vw, 3.4rem);
}
.values-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: clamp(1.6rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--ink-line);
}
.values-brand { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 1.8rem); }
.values-logo { width: clamp(88px, 10vw, 124px); height: auto; }
.values-heading { display: grid; gap: 0.5rem; line-height: 1; }
.values-kicker {
  font-size: clamp(0.82rem, 1.2vw, 0.95rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.45em;
  color: var(--gold);
}
.values-word {
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  font-weight: 600;
  color: var(--text-on-ink);
}
.values-panel .values-lede {
  max-width: 360px;
  text-align: right;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1.55;
  color: var(--text-on-ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.4em;
}
/* Desktop lede (Jamie, 15 Sep): the right-aligned underlined sentence
   wrapped into an orphaned "we touch." with a broken underline. Now a
   left-aligned, balanced two-liner with a gold rule on its left edge and no
   underline. Mobile (<=768px) keeps the centred underlined version. */
@media (min-width: 769px) {
  .values-panel .values-lede {
    max-width: 26ch;
    text-align: left;
    text-decoration: none;
    border-left: 3px solid var(--gold);
    padding-left: 1.3rem;
    font-size: clamp(1.1rem, 1.45vw, 1.3rem);
    line-height: 1.45;
    text-wrap: balance;
    flex-shrink: 0;
  }
}
.values-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
}
.value-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; }
.value-head .icon { width: 26px; height: 26px; color: var(--gold); flex-shrink: 0; }
.value-head h3 { font-size: 1.1rem; }
.value-item p { color: var(--text-soft-on-ink); font-size: 0.98rem; }
@media (max-width: 1000px) {
  .values-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .values-head { flex-direction: column; text-align: center; }
  .values-brand { flex-direction: column; }
  .values-heading { display: flex; align-items: baseline; justify-content: center; gap: 0.3em; }
  .values-kicker {
    font-size: 2.1rem;
    text-transform: none;
    letter-spacing: -0.015em;
    color: var(--text-on-ink);
  }
  .values-word { font-size: 2.1rem; }
  .values-panel .values-lede { text-align: center; max-width: 34ch; }
}
@media (max-width: 560px) {
  .values-row { grid-template-columns: 1fr; }
}

/* ---------- Coverage map ---------- */

.map-shell {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (max-width: 900px) { .map-shell { grid-template-columns: 1fr; } }

.area-map-real {
  position: relative;
  z-index: 0;
  height: 480px;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #e9e9e4;
}
@media (max-width: 640px) { .area-map-real { height: 380px; } }
.map-fallback { padding: 2rem; color: var(--text-soft); }
.la-pin { background: none; border: none; }

/* ---------- Roof anatomy (roof replacement): scroll-driven exploded roof ---------- */

.anatomy-section { overflow: clip; }

/* The stage is the SVG viewBox (1370x1330 in frame pixels: the 1560x1048
   frame with its empty left 230px cropped, 150px of label room above and
   132px below). The frame/canvas is placed inside by those same ratios so
   labels and picture line up at any size. */
.anatomy-stage {
  position: relative;
  aspect-ratio: 1370 / 1330;
  width: min(100%, calc((100vh - 370px) * 1.03)); /* 370 = header clearance + heading + note */
  margin-inline: auto;
  overflow: hidden;
}

.anatomy-media {
  position: absolute;
  left: -16.788%;  /* -230 / 1370 */
  top: 11.278%;    /* 150 / 1330 */
  width: 113.869%; /* 1560 / 1370 */
  height: 78.797%; /* 1048 / 1330 */
}

.anatomy-live .anatomy-still { visibility: hidden; }

/* A quiet centred paragraph under a diagram, tool or list (.section-note is
   the general-purpose version used on the calculator and how-we-quote). */
.anatomy-note,
.section-note {
  max-width: 640px;
  margin: 1.6rem auto 0;
  text-align: center;
  color: var(--text-soft);
  font-size: 1.02rem;
  line-height: 1.6;
}
.section-note { margin-top: 2.2rem; max-width: 720px; }
@media (max-width: 860px) {
  .anatomy-note { margin-top: 0.8rem; font-size: 0.92rem; line-height: 1.55; }
}

.anatomy-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.anatomy-svg text {
  font-family: "Geist", "Segoe UI", Arial, sans-serif;
  font-size: 34px;
  font-weight: 600;
  fill: var(--ink);
}
.anatomy-svg line { stroke: var(--gold-deep); stroke-width: 3.5; stroke-linecap: round; }
.anatomy-svg marker path { fill: var(--gold-deep); }

/* armed = JS scrub active (never applied under reduced motion or without JS;
   the static fallback is the final frame with every label showing) */
.anatomy-armed { padding-block: 0; }
.anatomy-armed .anatomy-scroll { height: 250vh; }
.anatomy-armed .anatomy-sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding-block: 5rem 1.5rem; /* top clears the floating header pill */
}
/* Mobile: a shorter pin — the explode still reads, without ~2 extra screens
   of scroll-tax between the quote form and the guide prices. Content is
   top-aligned (not centred) so the note under the diagram clears the
   fixed bottom CTA bar. */
@media (max-width: 860px) {
  .anatomy-armed .anatomy-scroll { height: 180vh; }
  .anatomy-armed .anatomy-sticky { place-items: start center; }
}

.anatomy-armed .anatomy-label {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.anatomy-armed.anatomy-done .anatomy-label { opacity: 1; transform: none; }
/* labels are children 2-11 of the svg (child 1 is <defs>) */
.anatomy-done .anatomy-label:nth-child(3) { transition-delay: 0.03s; }
.anatomy-done .anatomy-label:nth-child(4) { transition-delay: 0.06s; }
.anatomy-done .anatomy-label:nth-child(5) { transition-delay: 0.09s; }
.anatomy-done .anatomy-label:nth-child(6) { transition-delay: 0.12s; }
.anatomy-done .anatomy-label:nth-child(7) { transition-delay: 0.15s; }
.anatomy-done .anatomy-label:nth-child(8) { transition-delay: 0.18s; }
.anatomy-done .anatomy-label:nth-child(9) { transition-delay: 0.21s; }
.anatomy-done .anatomy-label:nth-child(10) { transition-delay: 0.24s; }
.anatomy-done .anatomy-label:nth-child(11) { transition-delay: 0.27s; }

/* Mobile: same diagram at full width; bigger type and arrows so the labels
   stay legible when the whole stage is ~340px wide (52px -> ~13px). */
@media (max-width: 860px) {
  .anatomy-stage { width: 94%; }
  .anatomy-svg text { font-size: 54px; }
  .anatomy-svg line { stroke-width: 6; }
}
.la-pin svg { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35)); }
.leaflet-tooltip { font-family: "Geist", sans-serif; font-weight: 600; }

.map-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.9rem 1.8rem;
  box-shadow: var(--shadow-card);
  min-height: 300px;
  display: grid;
  gap: 0.8rem;
  align-content: start;
}
.map-panel h3 { font-size: 1.4rem; }
.map-panel .towns { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.map-panel .towns span,
.map-panel .towns a {
  padding: 0.4rem 0.95rem;
  border-radius: var(--radius-btn);
  background: var(--paper-tint);
  border: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--text-soft);
}
/* Clickable town chips (they act like the map pins) */
.map-panel .towns [data-slug] { cursor: pointer; text-decoration: none; }
.map-panel .towns [data-slug]:hover,
.map-panel .towns [data-slug]:focus-visible { border-color: var(--gold-deep); color: var(--text); }
.map-panel .btn { justify-self: start; margin-top: 0.4rem; }
.map-hint { font-size: 0.92rem; color: var(--text-soft); }
.map-fallback { padding: 1.2rem; }

/* ---------- Next-steps timeline (your-area page, ink band) ---------- */
/* A quiet vertical rail; steps sit dim until scrolled into view, then light
   up. The most recently lit dot carries a soft gold ring. */
.timeline,
.timeline-head {
  max-width: 640px;
  margin-inline: auto;
}
.timeline-head { margin-bottom: 2.6rem; }
.timeline-cta { margin-top: 2.4rem; text-align: center; }
.timeline-head h2 { color: #ffffff; font-size: clamp(1.9rem, 3.2vw, 2.4rem); font-weight: 500; }
.timeline {
  list-style: none;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: rgba(255, 255, 255, 0.14);
}
.timeline-step {
  position: relative;
  padding: 0 0 2.8rem 4rem;
  opacity: 0.35;
  transition: opacity 0.7s ease;
}
.timeline-step:last-child { padding-bottom: 0.5rem; }
.timeline-step.lit { opacity: 1; }
.timeline-badge {
  position: absolute;
  left: 0;
  top: -0.2em;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1c1c1c;
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: border-color 0.7s ease, box-shadow 0.7s ease;
}
.timeline-badge .icon { width: 19px; height: 19px; color: rgba(255, 255, 255, 0.65); transition: color 0.7s ease; }
.timeline-step.lit .timeline-badge { border-color: var(--gold); }
.timeline-step.lit .timeline-badge .icon { color: var(--gold); }
.timeline-step.current .timeline-badge {
  box-shadow: 0 0 0 7px rgba(242, 194, 48, 0.14);
}
.timeline-when {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "Geist", sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--gold);
  background: rgba(242, 194, 48, 0.1);
  border-radius: 999px;
  padding: 0.28rem 0.8rem;
  margin-bottom: 0.7rem;
}
.timeline-when .icon { width: 14px; height: 14px; }
.timeline-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.timeline-tags span {
  font-family: "Geist", sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 0.28rem 0.8rem;
}
.timeline-step h3 {
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 0.55rem;
}
.timeline-step p {
  color: var(--text-soft-on-ink);
  line-height: 1.7;
  max-width: 52ch;
}
.timeline-media {
  display: block;
  width: 100%;
  max-width: 470px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-card);
  margin-top: 1.2rem;
}

/* ---------- Centred headings and cards, all viewports (Aug 2026) ---------- */

.section-head { text-align: center; }
.section-head p { margin-inline: auto; }
.page-hero .container { text-align: center; }
.page-hero h1, .page-hero p { margin-inline: auto; }
.service-card-body { text-align: center; align-items: center; }
.service-card-more { justify-content: center; }
.value-item { text-align: center; }
.value-head { justify-content: center; }
.price-band { text-align: center; justify-items: center; }
.price-bands-cta { margin-top: 1.2rem; display: block; text-align: center; }
.price-band .warranty { justify-content: center; }
.price-band .tag { left: 50%; transform: translateX(-50%); }

/* ---------- Mobile: centred text on every page (desktop untouched) ---------- */

@media (max-width: 768px) {
  .hero-content,
  .split-copy,
  .map-panel,
  .map-hint,
  .calc-step,
  .faq details,
  .house-hint,
  .cta-band .container > div:first-child {
    text-align: center;
  }
  .split-copy p,
  .calc-step > p { margin-inline: auto; }
  .hero-actions,
  .social-row,
  .cta-band-actions { justify-content: center; }
  .check-list { width: fit-content; margin-inline: auto; }
  .check-list li { justify-content: flex-start; text-align: left; }
  .split-copy .btn { margin-inline: auto; display: inline-flex; }
  .split-copy { display: grid; justify-items: center; }
  .map-panel { justify-items: center; }
  .map-panel .towns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
    width: 100%;
    max-width: 340px;
  }
  .map-panel .towns > * { text-align: center; }
  .map-panel .towns > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; min-width: 48%; }
  .map-panel .btn { justify-self: center; }
  .hero-form h2 { text-align: center; }
  .faq summary { justify-content: center; }
  .calc-options .calc-option { text-align: left; }
  .calc-actions { justify-content: center; }
  .calc-nav { justify-content: center; gap: 2rem; }
  .steps { justify-items: center; }
  .step { padding-left: 0; padding-top: 4rem; text-align: center; }
  .step::before { left: 50%; transform: translateX(-50%); top: 0; width: 46px; height: 46px; }
  .step::after { display: none; }
  .step p { margin-inline: auto; }
  .footer-bar-inner { justify-content: center; text-align: center; }
}

/* Contact page mobile: form first; heading, lede and checklist centred like
   the rest of the site, contact strip below stays left-aligned with
   full-width hairlines (Sep 2026) */

@media (max-width: 860px) {
  .contact-split .split-copy { order: 2; }
}
@media (max-width: 768px) {
  .contact-split .split-copy { justify-items: stretch; }
  .contact-split .contact-strip { width: 100%; text-align: left; }
  .contact-split .contact-cell { padding-right: 0; }
  .contact-split .social-boxes { margin-inline: auto; }
}

/* Mobile nav sheet open: the page behind must not scroll */
body.nav-open { overflow: hidden; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--gold);
  color: var(--ink);
  padding: 0.8rem 1.4rem;
  font-family: "Geist", sans-serif;
  font-weight: 600;
  border-radius: 0 0 10px 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- Service page layout (Jamie, 15 Sep 2026) ----------
   Service pages (body.page-service) get: an ink "how we do it" panel in
   the intro split instead of a second copy of the hero photo, a 3-column
   included grid, a two-column FAQ (copy left, accordion right) and ~15%
   tighter section padding. Layout rules are desktop (>=901px) only; the
   panel itself renders on every viewport where the photo used to be. */
.service-panel {
  background: var(--ink);
  color: var(--text-on-ink);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  text-align: left;
  border: 1px solid var(--ink-line);
}
/* Photo header: the service's own job photo, darkened, with the kicker and
   title sitting on it, and a gold rule where it meets the steps. */
.service-panel-media {
  position: relative;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 3.2rem clamp(1.4rem, 3vw, 2rem) 1.3rem;
  background-size: cover;
  background-position: center 40%;
  border-bottom: 3px solid var(--gold);
}
.service-panel-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 12, 12, 0.96) 0%, rgba(12, 12, 12, 0.72) 45%, rgba(12, 12, 12, 0.35) 100%);
}
.service-panel-media > * { position: relative; }
.service-panel-kicker {
  font-family: "Geist", sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.45rem;
}
.service-panel h3 {
  color: #ffffff;
  font-size: clamp(1.4rem, 2.1vw, 1.8rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}
/* Steps on a gold rail: numbered rings joined by a hairline. */
.service-panel ol {
  list-style: none;
  counter-reset: sp;
  margin: 0;
  padding: 1.1rem clamp(1.4rem, 3vw, 2rem) 0.4rem;
  display: grid;
}
.service-panel li {
  counter-increment: sp;
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 1rem;
  padding-block: 0.85rem;
}
.service-panel li::before {
  content: counter(sp, decimal-leading-zero);
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  font-family: "Geist", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  background: var(--ink);
  position: relative;
  z-index: 1;
  transition: background 0.25s, color 0.25s;
}
.service-panel li::after {
  content: "";
  position: absolute;
  left: 16.5px;
  top: calc(0.85rem + 34px);
  bottom: -0.85rem;
  width: 1px;
  background: var(--ink-line);
}
.service-panel li:last-child::after { display: none; }
@media (hover: hover) {
  .service-panel li:hover::before { background: var(--gold); color: var(--ink); }
}
.service-panel strong { display: block; color: #ffffff; font-weight: 600; font-size: 1.02rem; line-height: 1.3; padding-top: 0.35rem; }
.service-panel span { grid-column: 2; display: block; color: var(--text-soft-on-ink); font-size: 0.92rem; line-height: 1.5; margin-top: 0.2rem; }
.service-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin-top: 0.6rem;
  padding: 1rem clamp(1.4rem, 3vw, 2rem) 1.2rem;
  border-top: 1px solid var(--ink-line);
  background: var(--ink-soft);
  font-size: 0.86rem;
}
.service-panel-foot span { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--text-soft-on-ink); }
.service-panel-foot .icon { width: 16px; height: 16px; color: var(--gold); flex-shrink: 0; }
.service-panel-foot a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--gold);
  font-family: "Geist", sans-serif;
  font-weight: 600;
  text-decoration: none;
}
.service-panel-foot a .icon { transition: transform 0.25s; }
.service-panel-foot a:hover .icon { transform: translateX(3px); }
.faq-call { margin-top: 1.3rem; }
@media (min-width: 901px) {
  .page-service .section { padding-block: clamp(3.4rem, 7.5vw, 5.5rem); }
  .page-service .included-grid { grid-template-columns: repeat(3, 1fr); max-width: 1120px; }
  .faq-split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }
  .faq-split .section-head { text-align: left; margin-bottom: 0; position: sticky; top: 110px; }
  .faq-split .section-head p { margin-inline: 0; }
  .faq-split .faq { max-width: none; margin-inline: 0; }
}
/* The third intro paragraph on service pages is desktop-only (Jamie, 15
   Sep): it balances the copy column against the taller panel. Phones keep
   the two paragraphs they had before. */
@media (max-width: 900px) {
  .page-service .split-copy p:nth-of-type(3) { display: none; }
}
/* Service pages: phones keep the pre-rework page exactly (Jamie, 15 Sep).
   Every rework element is desktop-only and every original element that
   the rework replaced comes back on mobile. */
@media (max-width: 900px) {
  .page-service .service-panel,
  .page-service .pt-desktop,
  .page-service .faq-call,
  .page-service .related-intro { display: none; }
  .page-service .faq-section { background: var(--paper-tint); }
}
@media (min-width: 901px) {
  .page-service .split-media-mobile,
  .page-service .trust-section,
  .page-service .included-more { display: none; }
  .page-service .related-section { background: var(--paper-tint); }
}

/* About: team photo as a captioned figure */
.team-figure { max-width: 760px; margin-inline: auto; }
.team-figure img { width: 100%; height: auto; border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.team-figure figcaption {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 0.95rem;
  color: var(--text);
}
.team-figure figcaption span {
  margin-right: 0.6rem;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* Split with no media: one readable column */
.split.split-solo { grid-template-columns: minmax(0, 760px); justify-content: center; }

/* Area chips on phones: neat two-column grid, odd last chip centred */
@media (max-width: 640px) {
  .area-cloud { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; max-width: 360px; }
  .area-cloud > * { text-align: center; padding-inline: 0.5rem; }
  .area-cloud > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 0.3rem); }
}

/* ---------- How we quote: scroll rail (after Shadcn Studio Timeline 3) ----------
   Left rail on every width. Track is drawn on the list, the gold fill is a
   span added by js/main.js and scaled from the scroll position. */
.steps-rail { position: relative; justify-items: stretch; }
.steps-rail::before,
.steps-rail .steps-fill {
  content: "";
  position: absolute;
  left: 25px;
  top: 26px;
  width: 2px;
}
.steps-rail::before { display: none; }
.steps-rail .steps-fill {
  height: 0;
  background: var(--gold-deep);
  transform: scaleY(0);
  transform-origin: top;
  will-change: transform;
}
.steps-rail .step { padding: 0 0 2.8rem 4.6rem; text-align: left; opacity: 1; transform: none; }
.steps-rail .step:last-of-type { padding-bottom: 0; }
/* grey track: one segment per step, badge to badge, none after the last */
.steps-rail .step::after { display: block; left: 25px; top: 26px; bottom: -26px; width: 2px; background: var(--line); }
.steps-rail .step:last-of-type::after { display: none; }
.steps-rail .step::before {
  left: 0;
  top: 0;
  width: 52px;
  height: 52px;
  transform: none;
  z-index: 1;
  box-shadow: inset 0 0 0 1px var(--ink), 0 0 0 6px var(--paper);
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
/* .rail-live is set by JS: without it every badge stays in the lit style */
.steps-rail.rail-live .step:not(.lit)::before {
  background: var(--paper-tint);
  color: var(--text-soft);
  box-shadow: inset 0 0 0 1px var(--line), 0 0 0 6px var(--paper);
}
.steps-rail .step h2 { padding-top: 0.7rem; transition: color 0.3s var(--ease-out); }
.steps-rail.rail-live .step:not(.lit) h2 { color: var(--text-soft); }
.steps-rail .step p { margin-inline: 0; max-width: 56ch; }
@media (max-width: 640px) {
  .steps-rail .steps-fill { left: 21px; top: 22px; }
  .steps-rail .step::after { left: 21px; top: 22px; bottom: -22px; }
  .steps-rail .step { padding: 0 0 2.4rem 3.7rem; }
  .steps-rail .step::before { width: 44px; height: 44px; font-size: 0.95rem; }
  .steps-rail .step h2 { padding-top: 0.5rem; }
}

/* ---------- Area page services bento (23 Sep 2026) ----------
   Photo tiles, no description text: the town pages must not repeat the
   service blurbs (duplicate content). Desktop: roof replacement is a 2x2
   feature tile, then two rows of pairs, then two wide tiles. */

.svc-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 230px;
  gap: 0.9rem;
}
.svc-tile:first-child { grid-column: span 2; grid-row: span 2; }
.svc-tile:nth-child(6), .svc-tile:nth-child(7) { grid-column: span 2; }
.svc-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-btn);
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}
.svc-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.6s var(--ease-out);
}
.svc-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(21, 21, 21, 0.92) 0%, rgba(21, 21, 21, 0.55) 38%, rgba(21, 21, 21, 0) 68%);
}
.svc-tile::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.svc-tile-body {
  position: absolute;
  left: 1.3rem;
  right: 4.6rem;
  bottom: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: left;
}
.svc-tile .svc-num {
  font-family: "Geist", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--gold);
}
.svc-tile .svc-name {
  font-family: "Geist", sans-serif;
  font-weight: 700;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.svc-tile:first-child .svc-name { font-size: clamp(1.7rem, 3vw, 2.6rem); }
.svc-tile:first-child .svc-tile-body { left: 1.8rem; bottom: 1.7rem; }
.svc-tile-go {
  position: absolute;
  right: 1.1rem;
  bottom: 1.1rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  transition: transform 0.3s var(--ease-out);
}
.svc-tile-go .icon { width: 19px; height: 19px; }
.svc-tile:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (hover: hover) {
  .svc-tile:hover img { transform: scale(1.06); }
  .svc-tile:hover::after { transform: scaleX(1); }
  .svc-tile:hover .svc-tile-go { transform: translateX(3px); }
}
@media (max-width: 900px) {
  .svc-bento { grid-template-columns: repeat(2, 1fr); grid-template-rows: 300px; grid-auto-rows: 190px; gap: 0.7rem; }
  .svc-tile:first-child { grid-column: span 2; grid-row: span 1; }
  .svc-tile:nth-child(6), .svc-tile:nth-child(7) { grid-column: span 1; }
}
@media (max-width: 600px) {
  .svc-bento { grid-template-rows: 220px; grid-auto-rows: 150px; gap: 0.6rem; }
  .svc-tile-body { left: 0.85rem; right: 0.85rem; bottom: 0.8rem; gap: 0.2rem; }
  .svc-tile .svc-name { font-size: 1.02rem; }
  .svc-tile .svc-num { font-size: 0.7rem; }
  .svc-tile-go { display: none; }
  .svc-tile:first-child .svc-tile-go { display: grid; right: 0.85rem; bottom: 0.85rem; }
  .svc-tile:first-child .svc-tile-body { left: 1rem; right: 4.2rem; bottom: 1rem; }
  .svc-tile:first-child .svc-name { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-tile img, .svc-tile::after, .svc-tile-go { transition: none; }
}

/* Inline "Also covering" town links under the service-page area cards */
.area-more { max-width: 760px; margin: 1.6rem auto 0; text-align: center; color: var(--text-soft); font-size: 0.98rem; line-height: 1.7; }
.area-more a { color: var(--text); }