/* Self-hosted variable fonts (2026-08-17 mobile-perf fix) - replaces the
   Google Fonts CSS API, which chained HTML -> fonts.googleapis.com CSS ->
   fonts.gstatic.com file across two extra third-party origins. Each family
   ships as a single variable-font woff2 covering its full weight range, so
   one file replaces what used to be several per-weight downloads. Latin
   subset only (matches this site's English-only copy). */
@font-face {
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/fonts/league-spartan-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/work-sans-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/geist-mono-var.woff2') format('woff2');
}

:root {
  /* Yellow/white/black palette (Danny's pick, 2026-09-30, modelled on County
     Plumbers + Safe Gas Brighton - see rr-worthing-plumbers PR #13). --orange
     is kept as the variable name (40+ existing call sites: buttons, icons,
     badges, the FAQ active state, footer hovers) but now holds the site's
     signature yellow rather than orange - all of those call sites are fills/
     icons/large display text, not body copy on white, so the swap is
     contrast-safe as-is. --accent stays dark (not yellow) because it drives
     `a { color }` and nav-link text on white backgrounds, where bright
     yellow fails contrast - this is the "black font" Danny called out on the
     reference sites, not a separate design decision. */
  --navy-900: #14171c;
  --navy-800: #1e2228;
  --navy-700: #262b32;
  --accent: #14171c;
  --accent-dark: #000000;
  --accent-soft: #f5f1e0;
  --mint: #e6f0e6;
  --teal-tint: #e0edf4;
  --grey-tint: #eef1f4;
  --yellow: #f2d964;
  --yellow-dark: #ffd71c;
  --yellow-soft: #fff7d0;
  --orange: #ffde43;
  --orange-dark: #ffd71c;
  --orange-soft: #fff7d0;

  --ink: #14171c;
  --muted: #5b6b7a;
  --line: #e2e8ee;
  --bg: #ffffff;
  --surface: #f3f5f8;
  --danger: #b3261e;
  --focus: #14171c;
  --radius: 14px;
  --radius-sm: 10px;
  --tap: 48px;
  --wrap: 1120px;
  --section-pad: clamp(56px, 9vw, 96px);

  --font-display: 'League Spartan', 'Avenir Next', 'Segoe UI', sans-serif;
  --font-body: 'Work Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Hard guard against sideways page panning. `clip` (not `hidden`) keeps the
     body from becoming a scroll container, so the sticky header still works. */
  overflow-x: clip;
  overscroll-behavior-x: none;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink);
}

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

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

/* --- buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-body);
  line-height: 1.2;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background: var(--orange);
  color: var(--ink);
}

.btn-primary:hover {
  background: var(--orange-dark);
  color: var(--ink);
}

.btn-ghost {
  background: var(--bg);
  border-color: var(--line);
  color: var(--ink);
}

.btn-ghost:hover {
  border-color: var(--orange);
  background: var(--orange);
  color: var(--ink);
}

.btn-white {
  background: #fff;
  color: var(--accent-dark);
}

.btn-white:hover {
  background: var(--accent-soft);
}

.btn-cta {
  background: var(--orange);
  color: var(--ink);
}

.btn-cta:hover {
  background: var(--orange-dark);
  color: var(--ink);
}

.btn-glass {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

.btn-lg {
  min-height: 56px;
  padding: 16px 28px;
  font-size: 16px;
}

.btn-glow {
  box-shadow: 0 10px 30px rgba(255, 123, 10, 0.35);
}

.btn-arrow::after {
  content: '→';
  font-size: 16px;
  line-height: 1;
  transition: transform 0.15s ease;
}

.btn-arrow:hover::after {
  transform: translateX(3px);
}

/* --- header (floating sticky glass bar, foxpixel-style) --- */

.site-header {
  position: sticky;
  top: 8px;
  z-index: 30;
  max-width: calc(var(--wrap) + 40px);
  margin: 8px auto 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(226, 232, 238, 0.9);
  box-shadow: 0 6px 20px rgba(10, 31, 51, 0.08);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 12px 28px rgba(10, 31, 51, 0.13);
}

.nav-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
}

.brand:hover {
  text-decoration: none;
}

.brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.brand-mark svg {
  width: 15px;
  height: 15px;
}

.brand-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--navy-900);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand-logo {
  display: block;
  height: 54px;
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  /* No overflow-x: auto/hidden here — any non-visible overflow turns the nav
     into a clipping container, which cuts off the absolutely-positioned
     "Loft conversions" dropdown that hangs below the bar (site.css:357).
     Desktop nav fits at >=901px; the <=900px panel scrolls with its own
     overflow-y below. */
}

.nav-link {
  flex: none;
  padding: 10px 14px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 2px solid transparent;
}

.nav-link:hover {
  color: var(--accent);
  text-decoration: none;
}

.nav-link.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* --- "Loft conversions" dropdown (desktop: hover/focus-within reveal; mobile:
       flattens into the panel's link grid, see the <=900px media query) --- */

.nav-item {
  display: inline-flex;
  align-items: center;
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.nav-dropdown-chevron {
  width: 13px;
  height: 13px;
  transition: transform 0.15s ease;
}

.nav-dropdown:hover .nav-dropdown-chevron,
.nav-dropdown:focus-within .nav-dropdown-chevron {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 16px 34px rgba(10, 31, 51, 0.14);
  z-index: 40;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-menu .nav-link {
  display: block;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.btn-phone {
  min-height: 46px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.btn-phone-icon {
  display: inline-flex;
  flex: none;
}

.btn-phone-icon svg {
  width: 18px;
  height: 18px;
}

.nav-toggle {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.nav-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: var(--navy-900);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* --- layout --- */

.page {
  display: block;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* --- hero (foxpixel-modelled two-column: warm dusk image, copy left, the
       5-step survey-quote wizard in a white card on the right) --- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
}

/* Abstract curved yellow panel instead of a solid fill (Danny, 2026-10-02:
   "yellow to start on the left side and then curve around halfway through
   hero section, so the form sits on the rounded area, or just before it").
   Box width is the shape's full extent including the bulge; the vertical
   border-radius is 50% of the box's own height so the curve runs the full
   height of the hero with no straight segment, and the horizontal radius
   controls how far the bulge pushes past the flat left edge. Desktop only -
   mobile's stacked layout reverts to a plain rectangle below. */
.hero-shape {
  position: absolute;
  inset: 0;
  width: 61%;
  height: 100%;
  background: var(--yellow);
  border-radius: 0 43% 43% 0 / 0 50% 50% 0;
  z-index: 0;
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 56px 20px 40px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  /* Was align-items: center - with hero-copy and the quote card different
     heights, centring left uneven space above/below the card and read as
     "floating in the middle" (Danny, 2026-10-01). Top-aligning both columns
     anchors the card to the top of the hero, flush with the eyebrow, same
     as County Plumbers/Safe Gas. */
  align-items: start;
}

.hero-copy {
  text-align: left;
}

/* Van cutout (Danny supplied PNG, transparent background with a drop shadow
   already baked in). Sits as a plain block above the copy rather than a
   float the text wraps around - hero-grid's align-items:start already lines
   its top up with the quote card's top, and the height below is picked to
   read as "about half the card" per Danny's spec (2026-10-02: "top of the
   van level with top of quote form... take up about half of it... title,
   short text and button below"). */
.hero-van-img {
  display: block;
  width: auto;
  height: clamp(220px, 28vw, 320px);
  max-width: 100%;
  margin: 0 0 24px;
}

.hero-copy h1 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  font-size: clamp(2.35rem, 4.6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
  max-width: 20ch;
}

.hero-answer {
  font-size: 17px;
  line-height: 1.65;
  color: var(--navy-800);
  margin: 0 0 28px;
  max-width: 52ch;
}

.hero-actions {
  /* Matches .hero-answer's max-width so the button spans the same text
     column instead of sizing to its own label (Danny, 2026-10-01: "extend
     the call button... match the width of the text box"). */
  max-width: 52ch;
  margin: 0 0 14px;
  display: flex;
}

/* Yellow background now sits behind the whole hero, so the button flips to
   ink-on-white for contrast instead of the old yellow-on-dark-scrim pairing. */
.hero-actions .btn-primary {
  background: var(--navy-900);
  color: #fff;
}

.hero-actions .btn-primary:hover {
  background: var(--navy-700);
  color: #fff;
}

/* Only one hero CTA shows at a time - see the render.js comment above
   heroCallCta. Desktop default is the call button (quote card is already
   visible beside it); the 960px hero-grid stack breakpoint below swaps back
   to the scroll-to-quote button. */
.hero-cta-call {
  display: inline-flex;
  width: 100%;
}

.hero-cta-quote {
  display: none;
}

/* --- plain page header (guides, areas, trust - no hero image/wizard) ------ */

.page-intro {
  text-align: center;
}

.page-intro h1 {
  font-size: clamp(2rem, 4.6vw, 2.9rem);
  font-weight: 700;
  margin: 14px 0 16px;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

.area-hero-cta {
  margin: 22px 0 0;
}

/* --- local landmark list (area pages) -------------------------------------- */

.local-ref-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.local-ref-list li {
  background: var(--accent-soft);
  color: var(--navy-800);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
}

/* --- areas-we-cover hub index grid ----------------------------------------- */

.area-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 10px 0 0;
}

.area-index-card {
  display: block;
  padding: 20px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.area-index-card:hover {
  background: var(--surface);
  border-color: var(--orange);
  transform: translateY(-2px);
  text-decoration: none;
}

.area-index-card h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--ink);
}

.area-index-card p {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

/* No .hero-eyebrow color override any more (2026-10-02 yellow-panel redesign)
   - the hero background is now the same light yellow as the rest of the
   site, so the default dark .eyebrow-number/.eyebrow-label colors already
   read fine and the old light-on-dark-scrim variant would be invisible. */

/* Right-hand quote card with the embedded wizard. scroll-margin-top offsets
   the sticky header when the "Get my free quote" buttons scroll to #get-a-quote
   instead of navigating to /quote/ (Danny, 2026-08-13). */
.hero-quote {
  position: relative;
  scroll-margin-top: 90px;
}

.quote-card {
  position: relative;
  z-index: 2;
  background: #fff;
  /* .hero sets color: #fff for the headline/answer text on the photo; reset
     it here so anything in the card without its own color (the wizard's
     option labels, step-3 field labels) isn't white-on-white (Danny,
     2026-10-01 - "quote-form options text has disappeared"). */
  color: var(--ink);
  border-radius: 18px;
  padding: 26px 26px 30px;
  box-shadow: 0 24px 60px rgba(22, 38, 95, 0.18);
}

.quote-card-title {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 700;
  color: var(--navy-900);
  margin: 0 0 6px;
}

.quote-card-sub {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 18px;
}

/* --- embedded wizard component (homepage hero card; /quote/ loads its own
       wizard.css copy of these rules) --- */

.progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.progress-track {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--surface);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 100%;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.progress-label {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  background: var(--orange-soft);
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
}

.trust-badge-icon {
  width: 15px;
  height: 15px;
  flex: none;
}

.step-question {
  font-size: 18px;
  line-height: 1.3;
  color: var(--navy-900);
  margin: 0 0 16px;
  /* Empty until wizard.js sets the question text on load; without a reserved
     line the hero quote card grows post-paint and shifts the page (CLS). */
  min-height: 1.3em;
}

.option-list {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  display: grid;
  gap: 10px;
}

/* #wlc-content is empty markup until wizard.js renders step 1's options into
   it, which otherwise grows the hero quote card after first paint and causes
   layout shift. Reserve the height of step 1 (5 single-select options at
   --tap each, 10px grid gaps) up front. Adjust if step 1's option count
   changes. */
#wlc-content {
  min-height: calc(5 * var(--tap) + 4 * 10px + 6px);
}

.option-item {
  position: relative;
}

.option-item input[type='radio'] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.option-item label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--tap);
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
}

.option-item label:hover {
  border-color: var(--accent);
}

.option-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--orange-soft);
  color: var(--ink);
}

.option-icon svg {
  width: 18px;
  height: 18px;
}

.option-item input[type='radio']:focus-visible + label {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.option-item input[type='radio']:checked + label {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

.option-check {
  width: 22px;
  height: 22px;
  border: 2px solid var(--line);
  border-radius: 50%;
  flex: none;
  display: inline-block;
  position: relative;
}

.option-item input[type='radio']:checked + label .option-check {
  border-color: var(--accent);
}

.option-item input[type='radio']:checked + label .option-check::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--accent);
}

.form-fields {
  display: grid;
  gap: 14px;
  margin: 0 0 8px;
}

.form-field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.form-field input {
  width: 100%;
  min-height: var(--tap);
  padding: 12px 14px;
  font-size: 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.form-field input:focus {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
}

.field-error {
  display: none;
  color: var(--danger);
  font-size: 13px;
  margin-top: 4px;
}

.form-field.invalid input {
  border-color: var(--danger);
}

.form-field.invalid .field-error {
  display: block;
}

.data-notice {
  font-size: 13px;
  color: var(--muted);
  margin: 12px 0 0;
}

.data-notice a {
  color: var(--accent);
}

.wizard-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.wizard-actions .btn {
  flex: 1;
}

.wizard-actions .btn-primary {
  background: var(--orange);
  color: var(--ink);
}

.wizard-actions .btn-primary:hover {
  background: var(--orange-dark);
}

.wizard-actions .btn-primary:disabled {
  background: #f6c79b;
  cursor: not-allowed;
}

.form-error {
  display: none;
  color: var(--danger);
  font-size: 14px;
  font-weight: 600;
  margin-top: 12px;
}

.form-error.visible {
  display: block;
}

.verdict {
  display: none;
  padding: 4px 0;
}

.verdict.visible {
  display: block;
}

.verdict-badge {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.verdict-badge.good {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.verdict-badge.possible {
  background: #fdf3e0;
  color: #8a5a00;
}

.verdict-badge.unlikely {
  background: #fbeae9;
  color: var(--danger);
}

.verdict h2 {
  font-size: 24px;
  line-height: 1.2;
  color: var(--navy-900);
  margin: 0 0 12px;
}

.verdict-note {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 16px;
}

.verdict-recs {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.verdict-recs li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 15px;
}

.verdict-recs li::before {
  content: '✓';
  color: var(--accent);
  font-weight: 700;
}

.verdict-confirm {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy-900);
  margin: 0;
}

.verdict-demo {
  font-size: 13px;
  color: var(--muted);
  background: #fdf3e0;
  border: 1px solid #ecd9a8;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 16px 0 0;
}

.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: -3px;
  margin-right: 8px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- badge pills --- */

.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 24px;
}

.badge-hero {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.38);
  color: #fff;
}

.badge-tint {
  background: var(--accent-soft);
  color: var(--navy-800);
}

/* --- text link with arrow (reference "Learn more" treatment) --- */

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 15px;
  color: var(--accent-dark);
}

.text-link::after {
  content: '→';
  font-size: 15px;
  transition: transform 0.15s ease;
}

.text-link:hover {
  text-decoration: none;
}

.text-link:hover::after {
  transform: translateX(3px);
}

/* --- "Our Expertise" two-column band --- */

.expertise-section {
  padding: clamp(56px, 9vw, 96px) 0;
}

.expertise-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: stretch;
}

.expertise-copy h2 {
  font-size: clamp(1.9rem, 3.8vw, 2.6rem);
  color: var(--navy-900);
  margin: 0 0 20px;
  max-width: 26ch;
}

.expertise-copy p {
  font-size: 17px;
  color: var(--muted);
  margin: 0 0 26px;
  max-width: 58ch;
}

.expertise-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin: 0;
}

.expertise-image {
  height: 100%;
  min-height: 360px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(10, 31, 51, 0.18);
}

.expertise-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- "Our promise" value-card band (light blue rounded panel,
       reference "Delivery promise": badge + heading + 5-across items) --- */

.promise-band {
  padding: clamp(24px, 4vw, 40px) 0;
}

.promise-panel {
  background: #edf4fc;
  border-radius: 15px;
  padding: clamp(36px, 5.5vw, 60px) clamp(20px, 4vw, 44px);
}

.promise-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px;
}

.promise-head h2 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  color: var(--navy-900);
  margin: 0;
}

.promise-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 30px 22px;
}

.promise-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.promise-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 6px 16px rgba(14, 107, 201, 0.12);
}

.promise-icon svg {
  width: 24px;
  height: 24px;
}

.promise-item h3 {
  font-size: 16.5px;
  color: var(--navy-900);
  margin: 0 0 8px;
}

.promise-item p {
  font-size: 14.5px;
  color: var(--muted);
  margin: 0;
  max-width: 32ch;
}

/* --- "Loft Conversion Insights" band (2-col: photo grid left, copy right) --- */

.insights-section {
  padding: clamp(48px, 8vw, 88px) 0;
}

.insights-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.insights-media {
  min-width: 0;
}

.insights-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  align-items: center;
}

.insights-photo-col {
  display: grid;
  gap: 30px;
}

.insights-photo-col img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 16px 36px rgba(10, 31, 51, 0.16);
}

.insights-photo-col .insight-photo--tall {
  aspect-ratio: 4 / 5;
}

.insights-photo-col .insight-photo--wide {
  aspect-ratio: 16 / 11;
}

.insights-copy {
  text-align: left;
}

.insights-copy h2 {
  font-size: clamp(1.9rem, 3.8vw, 2.6rem);
  color: var(--navy-900);
  margin: 0 0 16px;
  max-width: 22ch;
}

.insights-intro {
  font-size: 17px;
  color: var(--muted);
  margin: 0 0 26px;
  max-width: 52ch;
}

.insights-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 40px;
  margin: 0 0 28px;
}

.insights-check {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 13px;
}

.insights-check li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.insights-check li::before {
  content: '✓';
  width: 25px;
  height: 25px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.insights-cta {
  margin: 0;
}

/* --- "quick links" band (reference: filled accent card + tinted card with
       accent border and corner icon, each a process/offer signpost) --- */

.quicklinks-section {
  padding-top: 0;
}

.quicklinks-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 30px);
  align-items: stretch;
}

.quicklink {
  position: relative;
  border-radius: 15px;
  padding: clamp(26px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.quicklink--filled {
  background: var(--orange);
  color: var(--ink);
}

.quicklink--outline {
  background: var(--grey-tint);
  border: 1.5px solid var(--orange);
}

.quicklink-icon {
  position: absolute;
  top: 26px;
  right: 26px;
  width: 34px;
  height: 34px;
  color: var(--orange);
}

.quicklink-icon svg {
  width: 100%;
  height: 100%;
}

.quicklink .quicklink-badge {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
}

.quicklink--filled .quicklink-badge {
  border-color: rgba(20, 23, 28, 0.35);
}

.quicklink--filled .quicklink-icon {
  color: var(--ink);
}

.quicklink--outline .quicklink-badge {
  color: var(--orange-dark);
}

.quicklink h3 {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  color: inherit;
  margin: 0 0 14px;
  max-width: 24ch;
}

.quicklink p {
  font-size: 15.5px;
  line-height: 1.65;
  margin: 0 0 24px;
  max-width: 46ch;
}

.quicklink--filled p {
  color: rgba(255, 255, 255, 0.92);
}

.quicklink--outline p {
  color: var(--muted);
}

.btn-quicklink {
  margin-top: auto;
  background: #fff;
  color: var(--ink);
  border-radius: 50px;
}

.btn-quicklink:hover {
  background: var(--orange);
  color: var(--ink);
}

/* --- eyebrow rows (Manifold numbered section labels) --- */

.eyebrow-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.eyebrow-number {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  color: var(--accent);
  line-height: 1;
}

.eyebrow-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--navy-800);
  line-height: 1;
}

/* --- content sections --- */

.content-section {
  padding: clamp(28px, 5vw, 56px) 0;
}

.content-section h2 {
  font-size: clamp(1.55rem, 4vw, 2.15rem);
  font-weight: 700;
  margin: 0 0 18px;
  max-width: 26ch;
}

.content-section .lead {
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 auto 20px;
  line-height: 1.5;
  max-width: 60ch;
  text-align: center;
}

.content-section p {
  margin: 0 auto 20px;
  max-width: 68ch;
  text-align: left;
}

/* --- Q&A section card grid (reference-site boxed treatment) --- */

.sections-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 10px 0 0;
}

/* An odd trailing card (e.g. 3 cards: 2 up top, 1 left over) spans the full
   row instead of leaving an empty column beside it. */
.sections-grid .qa-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.qa-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  background: var(--bg);
  color: var(--ink);
}

.qa-card h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.55rem);
  font-weight: 700;
  margin: 0 0 12px;
  max-width: none;
}

.qa-card .lead {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: none;
  text-align: left;
}

.qa-card p {
  margin: 0 0 14px;
  max-width: none;
  text-align: left;
  font-size: 15.5px;
  color: var(--muted);
}

.qa-card p:last-of-type {
  margin-bottom: 0;
}

.qa-card .qa-card-links {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qa-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.qa-card-link::after {
  content: '→';
  font-size: 14px;
  transition: transform 0.15s ease;
}

.qa-card-link:hover {
  border-color: var(--orange);
  background: var(--orange);
  color: var(--ink);
  text-decoration: none;
}

.qa-card-link:hover::after {
  transform: translateX(3px);
}

/* tint variants (rotated) - the reference site's mixed card band */

.qa-card--accent {
  background: var(--accent-soft);
  border-color: rgba(14, 107, 201, 0.22);
}

.qa-card--accent .lead {
  color: var(--accent-dark);
}

.qa-card--dark {
  background: var(--navy-900);
  border-color: transparent;
  color: #fff;
}

.qa-card--dark h2 {
  color: #fff;
}

.qa-card--dark .lead {
  color: #fff;
}

.qa-card--dark p {
  color: rgba(255, 255, 255, 0.82);
}

.qa-card--dark .qa-card-link {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
}

.qa-card--dark .qa-card-link:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--orange);
  color: var(--orange);
}

.qa-card--mint {
  background: var(--mint);
  border-color: rgba(74, 119, 74, 0.2);
}

.qa-card--plain {
  background: var(--bg);
  border-color: var(--line);
}

.band {
  background: var(--surface);
}

/* --- birminghamplumber-style section head (centered title + accent divider) --- */

.section-head {
  text-align: center;
  margin: 0 auto 28px;
  max-width: 720px;
}

.section-head h2 {
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  font-weight: 700;
  color: var(--navy-900);
  margin: 0 0 14px;
  max-width: none;
}

.section-divider {
  display: block;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: var(--orange);
  margin: 0 auto;
}

/* --- services grid (white service boxes, birminghamplumber-style) --- */

.services-section {
  background: var(--surface);
}

.services-section .wrap {
  padding-top: clamp(40px, 7vw, 72px);
  padding-bottom: clamp(40px, 7vw, 72px);
}

.services-intro {
  text-align: center;
  max-width: 620px;
  margin: -6px auto 26px;
  font-size: 16.5px;
  color: var(--muted);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 10px 0 0;
}

@media (max-width: 860px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}

.tinted-bento-card {
  position: relative;
  display: block;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 26px;
  padding-bottom: 150px;
  min-height: 260px;
  color: var(--ink);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.tinted-bento-card:hover {
  text-decoration: none;
  color: var(--ink);
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(10, 31, 51, 0.12);
  border-color: var(--accent);
}

.service-icon {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--navy-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.service-icon svg {
  width: 52px;
  height: 52px;
  stroke-width: 2.1;
}

.service-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  color: var(--navy-900);
  margin-bottom: 8px;
  max-width: 75%;
}

.service-benefit {
  display: block;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 14px;
  max-width: 75%;
}

.service-learn {
  position: absolute;
  left: 26px;
  bottom: 62px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

@media (max-width: 560px) {
  .tinted-bento-card {
    padding-bottom: 130px;
    min-height: 0;
  }

  .service-icon {
    width: 92px;
    height: 92px;
  }

  .service-icon svg {
    width: 44px;
    height: 44px;
  }

  .service-name,
  .service-benefit {
    max-width: 62%;
  }
}

.service-learn::after {
  content: '→';
  font-size: 14px;
  transition: transform 0.15s ease;
}

.tinted-bento-card:hover .service-learn::after {
  transform: translateX(3px);
}

/* --- detail rows (category list + photo) --- */

.detail-rows {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.detail-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.detail-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 36px 40px;
}

.detail-card h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--navy-900);
  margin: 0 0 20px;
}

.detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.detail-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}

.detail-list li a {
  color: inherit;
  text-decoration: none;
}

.detail-list li a:hover {
  text-decoration: underline;
}

.detail-list .detail-icon {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--orange-dark);
}

.detail-photo {
  border-radius: 20px;
  overflow: hidden;
  min-height: 280px;
}

.detail-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 860px) {
  .detail-row {
    grid-template-columns: 1fr;
  }

  .detail-photo {
    min-height: 220px;
    order: -1;
  }

  .detail-card {
    padding: 28px 26px;
  }
}

/* --- table --- */

.table-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  margin: 10px 0 4px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

th,
td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

th {
  background: var(--accent-soft);
  font-weight: 700;
  color: var(--navy-800);
  white-space: nowrap;
}

tr:last-child td {
  border-bottom: none;
}

.table-caption {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--navy-800);
  text-align: center;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
}

/* --- reference section (detail table) --- */

.reference-section {
  padding-top: 0;
}

/* --- quick cost-estimator widget (guide pages with a conversion-type /
       indicative-range data_table - currently just the cost guide) --- */

.cost-calc {
  max-width: 480px;
  margin: 10px auto 0;
  padding: 24px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: left;
}

.cost-calc-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-800);
  margin: 0 0 6px;
}

.cost-calc-select {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
}

.cost-calc-result {
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
}

.cost-calc-range {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--navy-900);
}

.cost-calc-suited {
  display: block;
  font-size: 14px;
  color: var(--navy-800);
  margin-top: 4px;
}

.cost-calc-note {
  font-size: 13px;
  color: var(--muted);
  margin: 14px 0 0;
}

/* --- "Considering a loft conversion?" CTA (reference: light grey rounded card,
       text left, actions right) --- */

.cta-panel {
  padding: clamp(24px, 4vw, 40px) 0;
}

.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  background: #f4f4f4;
  border-radius: 15px;
  padding: clamp(28px, 4.5vw, 48px);
}

.cta-copy h2 {
  font-size: clamp(1.55rem, 3.6vw, 2.1rem);
  color: var(--ink);
  margin: 0 0 12px;
  max-width: 22ch;
}

/* Yellow highlighter-style treatment, not plain yellow text - .cta-hl sits
   on the light-grey CTA band (#f4f4f4) and on area pages' white page-intro,
   both too close to yellow for readable text-on-background contrast. */
.cta-hl {
  background: var(--orange);
  color: var(--ink);
  padding: 0 6px;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.cta-sub {
  margin: 0;
  color: var(--muted);
  font-size: 16.5px;
  max-width: 60ch;
}

.cta-actions {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

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

.faq-section {
  background: var(--surface);
}

.faq-section .wrap {
  padding-top: clamp(40px, 7vw, 72px);
  padding-bottom: clamp(40px, 7vw, 72px);
}

.faq {
  border: 1px solid var(--line);
  border-radius: 20px;
  margin: 0 0 20px;
  background: var(--surface);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.faq:last-child {
  margin-bottom: 0;
}

.faq:hover {
  border-color: var(--orange);
}

/* Open row turns solid yellow (County Plumbers' active-accordion treatment,
   Danny 2026-09-30) instead of just flipping the +/- marker. */
.faq[open] {
  background: var(--orange);
  border-color: var(--orange);
}

.faq[open] summary {
  color: var(--ink);
}

.faq[open] p {
  color: var(--ink);
}

.faq[open] summary::after {
  border-color: var(--ink);
  transform: rotate(-135deg);
}

.faq summary {
  cursor: pointer;
  padding: 26px 28px;
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '';
  width: 10px;
  height: 10px;
  flex: none;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
  transition: transform 0.2s ease, border-color 0.15s ease;
}

.faq p {
  margin: 0;
  padding: 0 28px 26px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

/* --- related links (link tiles) --- */

.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin: 10px 0 0;
}

.link-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-weight: 600;
  color: var(--ink);
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.link-tile:hover {
  background: var(--surface);
  border-color: var(--orange);
  color: var(--navy-900);
  text-decoration: none;
  transform: translateY(-2px);
}

.link-tile::after {
  content: '→';
  color: var(--ink);
  font-size: 16px;
  flex: none;
}

/* --- contact page: details + click-to-load map (2026-08-23, rev 2026-08-24) ---
   The map is a committed WebP facade with an overlaid accessible button -
   no Google request until the visitor activates it (site.js injects
   Google's keyless share embed iframe for the Worthing locality view, no
   API key). Contact page only; never on the homepage or in the footer. */

.contact-details-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}

.contact-copy h2 {
  margin: 0 0 14px;
  font-size: clamp(24px, 3vw, 30px);
}

.contact-copy .lead {
  margin: 0 0 20px;
}

.contact-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.contact-row {
  margin: 0;
}

.contact-row dt {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 4px;
}

.contact-row dd {
  margin: 0;
  font-weight: 500;
}

.contact-address {
  font-style: normal;
  font-weight: 500;
  line-height: 1.6;
}

.contact-cta {
  margin: 24px 0 0;
}

.map-heading {
  margin: 0 0 12px;
  font-size: clamp(17px, 2vw, 19px);
  font-weight: 600;
  color: var(--navy-900);
}

.map-facade {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  line-height: 0;
}

.map-facade img {
  width: 100%;
  height: auto;
}

.map-load-btn {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  box-shadow: 0 8px 24px rgba(10, 31, 51, 0.28);
}

.map-facade iframe {
  display: block;
  width: 100%;
  height: 440px;
  border: 0;
  line-height: 1;
}

.map-caption {
  margin: 10px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}

@media (max-width: 900px) {
  .contact-details-grid {
    grid-template-columns: 1fr;
  }

  .map-facade iframe {
    height: 320px;
  }
}

/* --- footer (black/navy, Manifold-style) --- */

.site-footer {
  background: var(--navy-900);
  color: rgba(255, 255, 255, 0.8);
  padding: clamp(48px, 8vw, 80px) 0 32px;
}

.footer-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

.footer-top {
  /* Flex, not a fixed 3-column grid (Danny, 2026-09-30): the old grid
     reserved a column for "Call us" even after it moved inline under the
     address, and reserved another for "Follow us" even pre-tenant when no
     social_profiles are configured - both showed up as dead space that made
     this block look oversized. Flex only takes the width each rendered
     piece actually needs. */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-brand-col {
  flex: 1 1 420px;
  max-width: 480px;
}

.footer-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  margin: 0 0 10px;
}

.footer-tagline {
  margin: 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
  max-width: 36ch;
}

.footer-head {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 12px;
}

.footer-sitemap {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.3fr;
  gap: 40px;
  padding: 36px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-col {
  display: grid;
  gap: 10px;
  align-content: start;
}

.footer-col .footer-head {
  margin-bottom: 2px;
}

.footer-col a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  font-weight: 500;
}

.footer-col a:hover {
  color: var(--orange);
}

/* Areas column: two sub-columns at desktop so 13 links don't stretch the
   footer twice as tall as the others. */
.footer-col-areas {
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
}

.footer-col-areas .footer-head {
  grid-column: 1 / -1;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding: 20px 0 4px;
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13.5px;
  font-weight: 500;
}

.footer-legal a:hover {
  color: var(--orange);
}

.footer-phone {
  margin: 14px 0 0;
}

.footer-phone a {
  color: #fff;
  font-weight: 600;
}

.footer-phone a:hover {
  color: var(--orange);
}

/* Phone and enquiry hours (2026-08-24) - compact line under the footer phone
   number, sitewide. "Enquiry hours", never "opening hours" (correspondence-only
   address, no premises). */
.footer-hours {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
}

.footer-copy {
  margin: 28px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

/* --- footer correspondence address + Follow us (2026-08-24) ---
   NAP comes from one config source (site.config.json) and is
   correspondence-only - no office/visit/drop-in or opening-hours wording
   appears anywhere. The address sits compactly under the brand/coverage
   lines in the first column (no standalone column, no label - Danny
   2026-08-24). Social links are inline SVGs (no icon CDN, spec §11) in one
   evenly spaced .social-row with 44x44px touch targets; the white focus
   outline keeps the site-wide focus ring visible on the dark footer. */

.footer-nap {
  margin: 14px 0 0;
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  max-width: 34ch;
}

.footer-social {
  display: block;
}

.social-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
  color: #fff;
}

.social-link svg {
  width: 20px;
  height: 20px;
}

.social-link:hover {
  color: var(--orange);
  border-color: var(--orange);
  text-decoration: none;
}

.site-footer a:focus-visible {
  outline-color: #fff;
}

@media (max-width: 1100px) {
  .footer-brand-col {
    flex-basis: 100%;
    max-width: none;
  }

  .footer-sitemap {
    grid-template-columns: 1fr 1fr;
  }

  .footer-col-areas {
    grid-column: 1 / -1;
  }
}

/* --- fixed mobile call bar (<=900px only, see media query below) --- */

.mobile-call-bar {
  display: none;
}

.mobile-call-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  background: var(--orange);
  color: var(--ink);
  font-weight: 700;
  font-size: 16px;
  border-radius: var(--radius-sm);
}

.mobile-call-btn:hover {
  background: var(--orange-dark);
  color: #fff;
  text-decoration: none;
}

.mobile-call-icon {
  display: inline-flex;
  flex: none;
}

.mobile-call-icon svg {
  width: 18px;
  height: 18px;
}

/* --- responsive (mobile-first) --- */

/* ≤900px: collapse the nav into a dropdown panel opened by the hamburger. The
   old horizontal-scroll strip is gone - the page never pans sideways now. The
   header-actions phone button hides in favour of the fixed mobile call bar at
   the bottom of the screen (Danny, 2026-08-13). */
@media (max-width: 900px) {
  .mobile-call-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--navy-900);
    box-shadow: 0 -8px 24px rgba(10, 31, 51, 0.18);
  }

  body {
    padding-bottom: 68px;
  }

  .nav-inner {
    flex-wrap: wrap;
    gap: 10px;
  }

  .brand {
    order: 1;
    flex: 1;
    min-width: 0;
  }

  .brand-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .brand-logo {
    height: 42px;
  }

  .header-actions {
    order: 2;
    display: none;
  }

  .nav-toggle {
    order: 3;
    display: inline-flex;
  }

  .site-nav {
    order: 4;
    flex-basis: 100%;
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    margin-top: 6px;
    padding: 10px 0 2px;
    border-top: 1px solid var(--line);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    max-height: 72vh;
  }

  .site-header.is-open .site-nav {
    display: grid;
  }

  .site-header.is-open .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .site-header.is-open .nav-toggle-bar:nth-child(2) {
    opacity: 0;
  }

  .site-header.is-open .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .nav-link {
    padding: 13px 10px;
    font-size: 14.5px;
    border: none;
    border-radius: 8px;
  }

  .nav-link:hover,
  .nav-link.is-active {
    background: var(--accent-soft);
    border-bottom: none;
  }

  /* The "Loft conversions" dropdown flattens into the panel's link grid on
     mobile - the wrapper divs generate no boxes of their own, so their <a>
     children become direct grid items alongside the top-level links. */
  .nav-item,
  .nav-dropdown,
  .nav-dropdown-menu {
    display: contents;
  }

  .nav-dropdown-toggle {
    display: none;
  }

  .footer-top {
    gap: 28px;
  }

  .footer-sitemap {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .footer-col-areas {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .footer-sitemap {
    grid-template-columns: 1fr;
  }

  .footer-col-areas {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .expertise-grid {
    grid-template-columns: 1fr;
  }

  .expertise-image {
    order: -1;
    height: auto;
    min-height: 0;
  }

  .expertise-image img {
    aspect-ratio: 3 / 2;
    height: auto;
  }

  .insights-grid {
    grid-template-columns: 1fr;
  }

  .insights-media {
    order: -1;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
  }

  .promise-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-inner {
    padding-top: 90px;
    padding-bottom: 42px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  /* First cut mirrored the desktop curve 90deg (full-height panel, deep
     vertical bulge) - Danny, 2026-10-02: that read as "a vertical curve
     that goes downward", not the desktop effect. Desktop's curve is flat
     along the top/bottom of its box with the bulge entirely on the right
     edge (horizontal motion); the mobile equivalent keeps that horizontal
     reading by staying SHORT (ends around the subhead, well above the
     button) with a shallow bottom arc that sweeps left-to-right instead of
     drooping down the middle. Horizontal radius 50% still gives one
     seamless curve (corners meet at centre, no flat segment); vertical
     radius is a modest fraction of this shorter box so the dip stays wide
     and shallow rather than a narrow tail. */
  .hero-shape {
    width: 100%;
    /* Sized off viewport width, not % of .hero - .hero's own height includes
       the long quote wizard below the fold, so a %-of-parent height would
       push the whole curve down past the intro copy and off-screen. */
    height: clamp(420px, 108vw, 520px);
    border-radius: 0 0 50% 50% / 0 0 20% 20%;
  }

  .hero-copy {
    text-align: center;
  }

  .hero-copy h1 {
    /* Desktop widened this to 20ch for the stacked van layout's full-width
       column; stacked mobile is centred and narrower, so keep the tighter
       wrap the centred headline already read well at. */
    max-width: 14ch;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-answer {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-quote {
    max-width: 540px;
    width: 100%;
    margin: 0 auto;
  }

  /* Stacked layout puts the quote card below the copy, out of view until the
     visitor scrolls - the call button only makes sense on the side-by-side
     desktop hero. Swap back to the scroll-to-quote button here. */
  .hero-cta-call {
    display: none;
  }

  /* Centre the actions row and let the quote button fill it - chunky,
     full-width tap target reads better on mobile than the left-aligned
     auto-width button (Danny, 2026-10-02: "centre the Get Quote button
     and make it a little wider... full width... chunky"). */
  .hero-actions {
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }

  .hero-cta-quote {
    display: inline-flex;
    width: 100%;
  }

  /* Stacked layout centres the copy, so the van becomes a plain centred
     block above the headline instead of sizing against the (now stacked,
     out of view) quote card. */
  .hero-van-img {
    display: block;
    width: min(320px, 72%);
    height: auto;
    margin: 0 auto 20px;
  }
}

@media (max-width: 860px) {
  .sections-grid {
    grid-template-columns: 1fr;
  }

  .quicklinks-grid {
    grid-template-columns: 1fr;
  }

  .cta-inner {
    flex-direction: column;
    text-align: center;
  }

  .cta-copy h2 {
    margin-left: auto;
    margin-right: auto;
  }

  .cta-actions {
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .promise-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .hero-inner {
    padding-top: 82px;
    padding-bottom: 34px;
  }

  .hero-grid {
    gap: 34px;
  }

  .quote-card {
    padding: 22px 18px 26px;
    border-radius: 14px;
  }

  .quote-card-title {
    font-size: 24px;
  }

  .promise-grid {
    grid-template-columns: 1fr;
  }

  .insights-lists {
    grid-template-columns: 1fr;
  }

  .insights-photos {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .insights-photo-col {
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .header-actions {
    gap: 8px;
  }

  .btn-phone {
    padding: 12px 14px;
  }
}