/* 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 {
  /* birminghamplumber-style palette (Danny's pick, 2026-08-11): white base,
     navy text, blue primary, orange accent CTAs. */
  --navy-900: #0a1f33;
  --navy-800: #123353;
  --navy-700: #163d63;
  --accent: #0e6bc9;
  --accent-dark: #0b56a3;
  --accent-soft: #e7f0fa;
  --mint: #e6f0e6;
  --teal-tint: #e0edf4;
  --grey-tint: #eef1f4;
  --orange: #ff7b0a;
  --orange-dark: #e66c00;
  --orange-soft: #ffe3c7;

  --ink: #1c2b38;
  --muted: #5b6b7a;
  --line: #e2e8ee;
  --bg: #ffffff;
  --surface: #f3f5f8;
  --danger: #b3261e;
  --focus: #0e6bc9;
  --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: #fff;
}

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

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

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

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

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

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

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

.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: 5px 12px;
  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: 34px;
  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: 6px 10px;
  font-size: 12.5px;
  font-weight: 600;
  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: 34px;
  padding: 7px 14px;
  font-size: 12.5px;
  white-space: nowrap;
}

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

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

.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(--navy-900);
  color: var(--ink);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scrim - the photo stays visible on the right (behind the opaque quote
   card), with targeted darkening behind the copy column on the left for text
   contrast, plus a light bottom fade for the CTA/coverage line. Two layers:
   left-to-right darkening (readability), then the vertical fade. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      90deg,
      rgba(8, 14, 36, 0.5) 0%,
      rgba(8, 14, 36, 0.32) 32%,
      rgba(8, 14, 36, 0.08) 56%,
      rgba(8, 14, 36, 0) 68%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.02) 32%,
      rgba(18, 28, 64, 0.22) 68%,
      rgba(15, 24, 58, 0.46) 100%
    );
}

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

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
}

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

.hero-copy h1 {
  font-family: var(--font-display);
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 16px rgba(4, 8, 22, 0.35);
  font-size: clamp(2.35rem, 4.6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
  max-width: 14ch;
}

.hero-answer {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 12px rgba(4, 8, 22, 0.3);
  margin: 0 0 28px;
  max-width: 52ch;
}

.hero-actions {
  margin: 0 0 14px;
}

.hero-coverage {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}

/* --- 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;
}

/* --- 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;
}

/* Light-on-image eyebrow overrides (hero copy sits over the dark-scrimmed
   left side of the photo, not the light card background). */
.hero-eyebrow .eyebrow-number {
  color: var(--orange-dark);
}

.hero-eyebrow .eyebrow-label {
  color: rgba(255, 255, 255, 0.85);
}

/* 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;
  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(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

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

.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 (6 single-select options at
   --tap each, 10px grid gaps) up front. Adjust if step 1's option count
   changes. */
#wlc-content {
  min-height: calc(6 * var(--tap) + 5 * 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-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: #fff;
}

.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: #fff;
}

.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(255, 255, 255, 0.6);
}

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

.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(--orange-dark);
  border-radius: 50px;
}

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

/* --- 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);
  color: var(--orange-dark);
  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(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: 10px 0 0;
}

.tinted-bento-card {
  display: block;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 24px;
  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 {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

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

.service-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--navy-900);
  margin-bottom: 6px;
}

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

.service-learn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--orange);
}

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

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

/* --- 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;
}

.cta-hl {
  color: var(--orange);
}

.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: var(--radius);
  margin: 0 0 12px;
  background: var(--bg);
  transition: border-color 0.15s ease;
}

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

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

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

.faq summary::after {
  content: '+';
  font-size: 22px;
  font-weight: 700;
  color: var(--orange);
  flex: none;
}

.faq[open] summary::after {
  content: '−';
}

.faq p {
  margin: 0;
  padding: 0 18px 16px;
  font-size: 16px;
  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(--orange);
  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 {
  display: grid;
  /* three columns (Nyx, 2026-09-15): brand + compact address | call | follow.
     The old "Explore" column was replaced by the full footer sitemap below. */
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.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-contact a {
  color: #fff;
  font-weight: 600;
}

.footer-contact 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-top {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .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: #fff;
  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: 32px;
  }

  .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 {
    grid-template-columns: 1fr;
    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: 118px;
    padding-bottom: 64px;
  }

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

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

  .hero-copy h1 {
    margin-left: auto;
    margin-right: auto;
  }

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

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

@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: 108px;
    padding-bottom: 48px;
  }

  .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;
  }
}