/* ==========================================================================
   ReLevel — main stylesheet
   Mobile-first. Loaded by the WP theme AND by /preview/*.html so there is
   exactly one source of truth for design.
   ========================================================================== */

@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/archivo-black.woff2') format('woff2');
}

:root {
  /* Ground + ink. Neutrals carry a slight green bias so they read as chosen. */
  --ground: #FFFFFF;
  --surface: #F3F3EF;
  --surface-2: #E8E9E3;
  --ink: #1F221C;
  --ink-2: #40453B;
  --muted: #6B7064;
  --line: #D6D8CF;

  /* Brand */
  --green: #2F8F47;
  --green-dark: #226E37;
  --green-tint: #EAF4EC;
  --foam: #E19A34;
  --foam-tint: #FDF3E4;

  /* Semantic */
  --good: #2F8F47;
  --warn: #C2410C;

  /* Type scale */
  --step--1: 0.833rem;
  --step-0: 1rem;
  --step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
  --step-2: clamp(1.4rem, 1.2rem + 1vw, 1.85rem);
  --step-3: clamp(1.75rem, 1.4rem + 1.8vw, 2.6rem);
  --step-4: clamp(2.2rem, 1.6rem + 3vw, 3.6rem);
  --step-5: clamp(2.6rem, 1.7rem + 4.6vw, 5rem);

  /* Layout */
  --wrap: 1120px;
  --wrap-narrow: 760px;
  --pad: clamp(1.15rem, 4vw, 2rem);
  --radius: 6px;
  --shadow: 0 1px 2px rgba(31, 34, 28, 0.06), 0 6px 20px rgba(31, 34, 28, 0.06);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--green-dark); text-underline-offset: 2px; }
a:hover { color: var(--green); }

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

h1, h2, h3, h4 {
  font-family: 'Archivo Black', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.08;
  margin: 0 0 0.5em;
  text-wrap: balance;
  letter-spacing: -0.005em;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); }

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

/* Utility ---------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.wrap--narrow { max-width: var(--wrap-narrow); }
.prose { max-width: 68ch; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.25em; margin: 0 0 1.1em; }
.prose li { margin-bottom: 0.4em; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 12px 18px;
}
.skip-link:focus { left: 0; }

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--green-dark);
  margin: 0 0 0.85rem;
}
.eyebrow--light { color: var(--foam); }

.lede { font-size: var(--step-1); color: var(--ink-2); max-width: 58ch; }

/* Sections --------------------------------------------------------------- */
.section { padding-block: clamp(3rem, 8vw, 5.5rem); }
.section--tight { padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.section--surface { background: var(--surface); }
.section--dark { background: var(--ink); color: #EDEEE8; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .lede { color: #C3C6BB; }
.section-head { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }

/* Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: 'Archivo Black', sans-serif;
  font-size: 1rem;
  line-height: 1;
  padding: 1.05rem 1.6rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.08s ease, background-color 0.15s ease;
  min-height: 52px; /* thumb target */
}
.btn--primary { background: var(--green); color: #fff; box-shadow: 0 3px 0 var(--green-dark); }
.btn--primary:hover { background: var(--green-dark); color: #fff; }
.btn--primary:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--green-dark); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--green); color: var(--green-dark); }
/* On dark grounds the ghost button must flip to light text, or it disappears. */
.section--dark .btn--ghost,
.hero .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.45); }
.section--dark .btn--ghost:hover,
.hero .btn--ghost:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.08); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* --------------------------------------------------------------------------
   Header / nav
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 64px;
  flex-wrap: wrap; /* lets the mobile nav drop onto its own row */
}
.brand { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--ink); }
.brand__logo { height: 34px; width: auto; }
.brand__text { font-family: 'Archivo Black', sans-serif; font-size: 1.25rem; letter-spacing: -0.01em; }
.brand__text .re { color: var(--green); display: inline-block; }

.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 0 10px;
  background: none; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav {
  display: none;
  border-top: 1px solid var(--line);
  padding-block: 0.5rem 1rem;
  /* Full-width row under the brand/toggle rather than squeezed between them. */
  flex-basis: 100%;
  order: 3;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
.site-nav.is-open { display: block; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav li { border-bottom: 1px solid var(--surface-2); }
.site-nav li:last-child { border-bottom: 0; }
.site-nav a {
  display: block; padding: 0.85rem 0.25rem;
  text-decoration: none; color: var(--ink); font-weight: 600;
}
.site-nav a:hover, .site-nav .current-menu-item > a { color: var(--green-dark); }
.header-cta { display: none; }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-header__bar { flex-wrap: nowrap; }
  .site-nav {
    display: block; border-top: 0; padding: 0;
    flex-basis: auto; order: 0; max-height: none; overflow: visible;
  }
  .site-nav ul { display: flex; gap: 1.5rem; align-items: center; }
  .site-nav li { border: 0; }
  .site-nav a { padding: 0.4rem 0; font-size: 0.95rem; }
  .header-cta {
    display: inline-flex; align-items: center; gap: 0.45rem;
    background: var(--ink); color: #fff; text-decoration: none;
    padding: 0.7rem 1.15rem; border-radius: var(--radius);
    font-weight: 700; font-size: 0.95rem; white-space: nowrap;
  }
  .header-cta:hover { background: var(--green-dark); color: #fff; }
}

/* Sticky mobile call bar -------------------------------------------------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--ink);
  box-shadow: 0 -2px 14px rgba(0,0,0,0.18);
  padding-bottom: env(safe-area-inset-bottom);
}
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.95rem 0.5rem; min-height: 54px;
  color: #fff; text-decoration: none; font-weight: 700; font-size: 1rem;
}
.callbar a + a { border-left: 1px solid rgba(255,255,255,0.18); }
.callbar a.is-primary { background: var(--green); }
body.has-callbar { padding-bottom: 58px; }
@media (min-width: 900px) {
  .callbar { display: none; }
  body.has-callbar { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Hero (homepage) — video with poster fallback
   -------------------------------------------------------------------------- */
.hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,22,18,0.82) 0%, rgba(20,22,18,0.62) 45%, rgba(20,22,18,0.88) 100%);
}
.hero__inner {
  position: relative;
  padding-block: clamp(3.5rem, 12vw, 7rem);
  /* Was 40ch, which is measured against body text and strangled the display-size
     H1 on desktop. Constrain the H1 and sub individually instead. */
  max-width: min(48rem, 100%);
}
.hero h1 { max-width: 16ch; }
/* Slightly tighter than --step-5 so the CTA stays above the fold on phones. */
.hero h1 { font-size: clamp(2.1rem, 1.5rem + 3.4vw, 4.2rem); color: #fff; margin-bottom: 0.45em; }
.hero__sub { font-size: var(--step-1); color: #DDE0D6; margin-bottom: 1.75rem; max-width: 34ch; }
.hero__trust {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  margin-top: 1.75rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.2);
  font-size: 0.92rem; color: #C9CCC1;
}
.hero__trust span { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero__trust svg { flex: none; }

/* Wordmark leveling animation -------------------------------------------- */
.levelmark {
  font-family: 'Archivo Black', sans-serif;
  font-size: var(--step-5);
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  user-select: none;
}
.levelmark .re {
  color: var(--green);
  display: inline-block;
  transform-origin: 50% 90%;
  transform: rotate(-6deg) translateY(0.16em);
  transition: transform 1.4s cubic-bezier(0.24, 1.2, 0.32, 1);
  will-change: transform;
}
.levelmark.is-level .re { transform: rotate(0deg) translateY(0); }

/* Spirit level readout */
.levelgauge { display: inline-flex; flex-direction: column; gap: 0.5rem; }
.levelgauge__state {
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums;
}
.levelgauge.is-level .levelgauge__state { color: var(--green-dark); }
.levelgauge__vial {
  position: relative; width: 180px; height: 28px; border-radius: 14px;
  background: #fff; border: 1.5px solid var(--line); overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.07);
}
.levelgauge__vial::before, .levelgauge__vial::after {
  content: ""; position: absolute; top: 3px; bottom: 3px; width: 1.5px; background: var(--line);
}
.levelgauge__vial::before { left: calc(50% - 16px); }
.levelgauge__vial::after { left: calc(50% + 16px); }
.levelgauge__bubble {
  position: absolute; top: 4px; left: 50%; margin-left: -12px;
  width: 24px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95), var(--foam) 72%);
  transform: translateX(-46px);
  transition: transform 1.4s cubic-bezier(0.24, 1.2, 0.32, 1);
}
.levelgauge.is-level .levelgauge__bubble {
  transform: translateX(0);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95), var(--green) 72%);
}

/* --------------------------------------------------------------------------
   Cards / grids
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 1rem; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .grid { gap: 1.15rem; }
  .grid--2, .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 940px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.card {
  display: flex; flex-direction: column;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.section--surface .card { background: #fff; }
a.card:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: var(--shadow); }
.card__media { aspect-ratio: 16 / 10; background: var(--surface-2); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 1.15rem 1.25rem 1.35rem; flex: 1; }
.card__body h3 { margin-bottom: 0.3rem; }
.card__body p { color: var(--muted); font-size: 0.95rem; margin: 0; }
.card__meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-top: 0.85rem;
  font-size: 0.78rem;
}
.chip {
  display: inline-block; padding: 0.25rem 0.6rem; border-radius: 100px;
  background: var(--green-tint); color: var(--green-dark); font-weight: 700;
  letter-spacing: 0.02em;
}
.chip--foam { background: var(--foam-tint); color: #8A5A11; }
.card__link {
  margin-top: 1rem; font-weight: 700; color: var(--green-dark);
  font-size: 0.95rem; display: inline-flex; align-items: center; gap: 0.35rem;
}

/* Steps ------------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: 1.5rem; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.step { position: relative; padding-top: 2.6rem; }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--green); color: #fff;
  font-family: 'Archivo Black', sans-serif; font-size: 0.95rem;
  display: grid; place-items: center;
}
.section--dark .step::before { background: var(--foam); color: var(--ink); }
.step h3 { margin-bottom: 0.35rem; }
.step p { color: var(--muted); font-size: 0.95rem; margin: 0; }
.section--dark .step p { color: #B9BDB1; }

/* Comparison table -------------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); }
table.compare { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 520px; background: #fff; }
table.compare th, table.compare td { padding: 0.9rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); }
table.compare tr:last-child td { border-bottom: 0; }
table.compare thead th { background: var(--surface); font-family: 'Archivo Black', sans-serif; font-weight: 400; font-size: 0.95rem; }
table.compare thead th.is-us { color: var(--green-dark); }
table.compare td.is-us { font-weight: 700; }
table.compare td.is-them, table.compare th[scope="row"] { color: var(--muted); font-weight: 400; }

/* Price tiers -------------------------------------------------------------
   Three options ordered cheapest to most expensive. The middle one is ours
   and is deliberately the only one that carries colour, so the eye lands on
   it while the price order still reads honestly left to right.
   -------------------------------------------------------------------------- */
.tiers {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .tiers {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    /* Room for the middle column to sit proud without clipping its badge. */
    padding-top: 2.25rem;
  }
}

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.35rem 1.6rem;
}
.section--surface .tier { background: #fff; }

.tier__label {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); margin-bottom: 0.6rem;
}
.tier h3 { font-size: var(--step-1); margin-bottom: 0.15rem; }
.tier__price {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  line-height: 1; color: var(--muted);
  margin: 0.6rem 0 0.2rem;
  font-variant-numeric: tabular-nums;
}
.tier__price-note { font-size: 0.85rem; color: var(--muted); margin: 0 0 1.1rem; }

.tier__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; font-size: 0.92rem; }
.tier__list li { display: grid; grid-template-columns: 1.15rem 1fr; gap: 0.55rem; align-items: start; }
.tier__list svg { margin-top: 0.28rem; }
.tier__list .yes { color: var(--green-dark); }
.tier__list .no { color: var(--muted); }
.tier__foot { margin-top: auto; padding-top: 1.35rem; }

/* The middle column: ours. */
.tier--ours {
  border: 2px solid var(--green);
  background: var(--green-tint);
  box-shadow: 0 8px 30px rgba(47, 143, 71, 0.16);
}
.section--surface .tier--ours { background: var(--green-tint); }
.tier--ours .tier__label { color: var(--green-dark); }
.tier--ours .tier__price { color: var(--green-dark); }
.tier--ours .tier__price-note { color: var(--ink-2); }
@media (min-width: 900px) {
  /* Lift it out of the row so it reads as the chosen plan. */
  .tier--ours { transform: translateY(-2.25rem); }
}
.tier__badge {
  position: absolute; top: -0.85rem; left: 1.35rem;
  background: var(--green); color: #fff;
  font-family: 'Archivo Black', sans-serif; font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.4rem 0.75rem; border-radius: 100px;
}

/* The honest downside line at the bottom of each column. */
.tier__caveat {
  margin-top: 1.1rem; padding-top: 0.9rem;
  border-top: 1px dashed var(--line);
  font-size: 0.85rem; color: var(--muted);
}
.tier--ours .tier__caveat { border-top-color: rgba(47,143,71,0.3); }

/* FAQ --------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative;
  font-weight: 700; font-size: 1.05rem;
  min-height: 52px;
  display: flex; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 0.4rem; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 2.5px solid var(--green); border-bottom: 2.5px solid var(--green);
  transform: rotate(45deg); transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details > div { padding: 0 0 1.3rem; color: var(--ink-2); max-width: 68ch; }

/* Before / after ---------------------------------------------------------- */
.ba { display: grid; gap: 0.75rem; grid-template-columns: 1fr 1fr; }
.ba figure { margin: 0; }
.ba img { border-radius: var(--radius); width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--surface-2); }
.ba figcaption {
  margin-top: 0.4rem; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}

/* Forms ------------------------------------------------------------------- */
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.25rem, 4vw, 2rem); box-shadow: var(--shadow);
}
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 700; font-size: 0.92rem; margin-bottom: 0.35rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.85rem 0.9rem;
  font: inherit; font-size: 1rem; /* 16px min: stops iOS zoom-on-focus */
  color: var(--ink); background: #fff;
  border: 1.5px solid var(--line); border-radius: var(--radius);
  min-height: 50px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px var(--green-tint); }
.field--half { display: grid; gap: 1rem; }
@media (min-width: 620px) { .field--half { grid-template-columns: 1fr 1fr; } }
.form-note { font-size: 0.85rem; color: var(--muted); margin-top: 0.85rem; }

/* Breadcrumbs ------------------------------------------------------------- */
.crumbs { font-size: 0.85rem; color: var(--muted); padding-block: 1rem 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.crumbs li:not(:last-child)::after { content: "›"; margin-left: 0.4rem; color: var(--line); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--green-dark); text-decoration: underline; }

/* Page header ------------------------------------------------------------- */
.page-head { padding-block: clamp(1.5rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2.5rem); border-bottom: 1px solid var(--line); }
.page-head h1 { margin-bottom: 0.4em; }

/* Photo strip -------------------------------------------------------------
   Scroll-snapping row on phones, grid on desktop. Real job photos are the
   most persuasive asset on the site, so they get real space.
   -------------------------------------------------------------------------- */
.photostrip {
  display: grid;
  gap: 1rem;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
}
.photostrip figure { margin: 0; scroll-snap-align: start; }
.photostrip img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); background: var(--surface-2);
}
.photostrip figcaption {
  margin-top: 0.5rem; font-size: 0.85rem; color: var(--muted);
}
@media (min-width: 700px) {
  .photostrip {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: auto;
    overflow: visible;
    gap: 1.25rem;
  }
}

/* Page hero image (service and area pages) -------------------------------- */
.page-hero-img {
  width: 100%;
  aspect-ratio: 21 / 8;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--surface-2);
  margin-bottom: 1.75rem;
}
@media (max-width: 620px) { .page-hero-img { aspect-ratio: 16 / 10; } }

/* Coverage map ------------------------------------------------------------ */
.areamap-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  margin-bottom: 1.5rem;
}
.areamap { display: block; width: 100%; height: auto; }

/* Service-area list ------------------------------------------------------- */
.area-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .area-list { grid-template-columns: repeat(4, 1fr); } }
.area-list a {
  display: block; padding: 0.7rem 0.85rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; font-weight: 600; font-size: 0.95rem; color: var(--ink);
}
.area-list a:hover { border-color: var(--green); color: var(--green-dark); }

/* Footer ------------------------------------------------------------------ */
.site-footer { background: var(--ink); color: #B9BDB1; padding-block: clamp(2.5rem, 6vw, 4rem) 2rem; font-size: 0.95rem; }
.site-footer a { color: #DDE0D6; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer h2, .site-footer h3 { color: #fff; font-size: 0.95rem; margin-bottom: 0.75rem; }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; } }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.site-footer .brand__text { color: #fff; }
.footer-bottom {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
  font-size: 0.85rem; color: #8D9186;
}

/* Reduced motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .levelmark .re { transform: none; }
  .levelgauge__bubble { transform: translateX(0); }
}

/* Print ------------------------------------------------------------------- */
@media print {
  .site-header, .callbar, .site-footer, .btn { display: none !important; }
  body { color: #000; }
}

/* --------------------------------------------------------------------------
   Interactive property diagram
   Outline-only pseudo-3D. Each hotspot rests sunken and tilted; hover, focus,
   or tap levels it. Faces are filled with the page ground so shapes occlude
   correctly without any shading.
   -------------------------------------------------------------------------- */
.housedia-wrap {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
}
.housedia { display: block; width: 100%; height: auto; overflow: visible; }

.housedia .hs {
  /* Resting state: settled. --drop and --tilt are set per hotspot inline. */
  transform: translateY(var(--drop, 10px)) rotate(var(--tilt, 1deg));
  transition: transform 900ms cubic-bezier(0.22, 1.15, 0.3, 1);
  cursor: pointer;
}
.housedia .hs a { text-decoration: none; }

.housedia .face {
  fill: var(--ground);
  stroke: var(--ink-2);
  stroke-width: 1.6;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke 260ms ease, fill 260ms ease;
}
.housedia .detail {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.3;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke 260ms ease;
}
.housedia .crack {
  fill: none;
  stroke: var(--foam);
  stroke-width: 2.6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 1;
  transition: opacity 500ms ease;
}
.housedia .hs__hit { fill: transparent; stroke: none; }

/* Levelled state. .is-level is set by JS for touch and the intro cycle. */
.housedia .hs:hover,
.housedia .hs:focus-within,
.housedia .hs.is-level { transform: translateY(0) rotate(0deg); }

.housedia .hs:hover .face,
.housedia .hs:focus-within .face,
.housedia .hs.is-level .face {
  stroke: var(--green);
  fill: var(--green-tint);
}
.housedia .hs:hover .detail,
.housedia .hs:focus-within .detail,
.housedia .hs.is-level .detail { stroke: var(--green-dark); }

.housedia .hs:hover .crack,
.housedia .hs:focus-within .crack,
.housedia .hs.is-level .crack { opacity: 0; }

/* Dim the rest of the scene so the active piece carries the eye. */
.housedia-wrap.is-engaged .hs:not(:hover):not(:focus-within):not(.is-level) .face { stroke: var(--line); }
.housedia-wrap.is-engaged .hs:not(:hover):not(:focus-within):not(.is-level) .detail { stroke: var(--line); }

.housedia .hs a:focus-visible .hs__hit {
  stroke: var(--green);
  stroke-width: 2;
  stroke-dasharray: 5 4;
}

/* Info card */
.housedia-card {
  position: absolute;
  z-index: 3;
  width: min(19rem, 78vw);
  background: var(--ground);
  border: 1.5px solid var(--green);
  border-radius: var(--radius);
  padding: 0.85rem 1rem 0.95rem;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
  pointer-events: none;
}
.housedia-card.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.housedia-card h3 { font-size: 1rem; margin-bottom: 0.25rem; }
.housedia-card p { font-size: 0.88rem; color: var(--muted); margin: 0; }
.housedia-card .housedia-card__go {
  display: inline-block; margin-top: 0.5rem;
  font-size: 0.85rem; font-weight: 700; color: var(--green-dark);
}

.housedia-hint {
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 0.75rem;
}
.housedia-hint__touch { display: none; }
@media (hover: none), (pointer: coarse) {
  .housedia-hint__pointer { display: none; }
  .housedia-hint__touch { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .housedia .hs { transform: none; transition: none; }
  .housedia .crack { opacity: 0; }
}

/* --------------------------------------------------------------------------
   Before / after comparison slider
   A range input sits transparently over the whole frame and drives --pos, so
   drag, touch, and arrow keys all work with no custom pointer handling and the
   control stays a real form element for screen readers.
   -------------------------------------------------------------------------- */
.ba-slider {
  --pos: 50%;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-2);
  aspect-ratio: 4 / 3;
  isolation: isolate;
  user-select: none;
  touch-action: pan-y; /* let vertical scroll through, capture horizontal */
}
@media (min-width: 700px) { .ba-slider { aspect-ratio: 16 / 10; } }

.ba-slider__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.ba-slider__img--before {
  /* Clipped from the right so the "after" shows through beyond the handle. */
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  z-index: 2;
}

.ba-slider__handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--pos);
  width: 3px; margin-left: -1.5px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(31,34,28,0.35);
  z-index: 3;
  pointer-events: none;
}
.ba-slider__grip {
  position: absolute; top: 50%; left: 50%;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(31,34,28,0.32);
  display: grid; place-items: center;
  color: var(--ink);
}
.ba-slider__grip svg { display: block; }

.ba-slider__tag {
  position: absolute; bottom: 0.75rem;
  z-index: 3;
  font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.35rem 0.7rem; border-radius: 100px;
  background: rgba(31,34,28,0.78); color: #fff;
  pointer-events: none;
}
.ba-slider__tag--before { left: 0.75rem; }
.ba-slider__tag--after { right: 0.75rem; background: rgba(47,143,71,0.9); }

.ba-slider__range {
  position: absolute; inset: 0;
  z-index: 4;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  opacity: 0;
  cursor: ew-resize;
  appearance: none;
  background: transparent;
}
.ba-slider__range:focus-visible ~ .ba-slider__handle .ba-slider__grip {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}

.ba-caption {
  margin-top: 0.7rem;
  font-size: 0.88rem;
  color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: baseline;
}
.ba-caption strong { color: var(--ink); font-weight: 700; }

/* Estimate form success state ------------------------------------------- */
.form-sent {
  border-left: 4px solid var(--green);
  padding-left: 1.1rem;
}
.form-sent p:last-child { margin-top: 1.25rem; }