/* ============================================================
   BTB Surveyors — Redesign Draft Stylesheet
   Brand-faithful: yellow #fdd215 on near-black #1f1f1f, warm cream.
   Display: Bricolage Grotesque · Body: Inter (current brand font)
   This is a STATIC DRAFT for sign-off, not the final WordPress theme.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Brand */
  --yellow:      #fdd215;
  --yellow-deep: #e6bf13;
  --yellow-soft: #fff4cc;

  --ink:     #1f1f1f;
  --ink-900: #161616;
  --ink-800: #2a2a2a;
  --ink-700: #383838;

  --cream:   #f2eadf;
  --cream-2: #ece7df;
  --paper:   #ffffff;

  --green:   #185d3b;
  --green-soft: #e7f1ea;

  /* Neutrals */
  --gray-900: #111827;
  --gray-700: #374151;
  --gray-600: #4b5563;
  --gray-500: #6b7280;
  --gray-400: #9ca3af;
  --gray-300: #d1d5db;
  --gray-200: #e5e7eb;
  --gray-100: #f3f4f6;

  /* Type */
  --font-display: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Motion */
  --ease-fluid: cubic-bezier(0.32, 0.72, 0, 1);

  /* Shape */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(31,31,31,.05), 0 2px 8px rgba(31,31,31,.05);
  --shadow:    0 12px 30px rgba(31,31,31,.09);
  --shadow-lg: 0 30px 70px rgba(31,31,31,.18);
  --shadow-yellow: 0 14px 34px rgba(253,210,21,.35);

  /* Layout */
  --maxw: 1180px;
  --gut: clamp(20px, 5vw, 56px);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.3rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); }
p { color: var(--gray-700); }
.lead { font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: var(--gray-600); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); display: inline-flex; align-items: center; gap: .55rem;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--yellow-deep); border-radius: 2px; }
.eyebrow.on-dark { color: var(--yellow); }
.mark { background: linear-gradient(transparent 62%, var(--yellow) 62%); padding: 0 .08em; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(56px, 9vw, 110px); }
.section--cream { background: var(--cream); }
.section--ink { background: var(--ink); color: #fff; }
.section--ink p { color: rgba(255,255,255,.72); }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.stack > * + * { margin-top: 1rem; }
.grid { display: grid; gap: clamp(18px, 2.4vw, 30px); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.section-head { max-width: 640px; margin-bottom: clamp(34px, 5vw, 56px); }
.section-head.center { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--yellow); --fg: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  padding: .92rem 1.5rem; border-radius: var(--r-pill); border: 0; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: var(--shadow-sm);
}
.btn:hover { transform: translateY(-2px); background: var(--yellow-deep); box-shadow: var(--shadow-yellow); }
.btn .arr { transition: transform .2s ease; }
.btn:hover .arr { transform: translateX(4px); }
.btn--lg { padding: 1.08rem 1.9rem; font-size: 1.08rem; }
.btn--dark { --bg: var(--ink); --fg: #fff; }
.btn--dark:hover { background: var(--ink-800); box-shadow: var(--shadow); }
.btn--ghost { --bg: transparent; --fg: var(--ink); box-shadow: inset 0 0 0 1.5px var(--gray-300); }
.btn--ghost:hover { background: var(--ink); color: #fff; box-shadow: none; }
.btn--ghost-light { --bg: transparent; --fg: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28); }
.btn--ghost-light:hover { background: #fff; color: var(--ink); box-shadow: none; }
.btn--block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(31,31,31,.96); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav { display: flex; align-items: center; gap: 1.5rem; height: 72px; }
.brand { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 1.15rem; letter-spacing: -.02em; }
.brand .logo-badge {
  width: 34px; height: 34px; border-radius: 9px; background: var(--yellow);
  display: grid; place-items: center; color: var(--ink); font-weight: 800; font-size: .95rem; font-family: var(--font-display);
}
.brand .logo-badge span { transform: translateY(-1px); }
.nav-links { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.nav-links a { color: rgba(255,255,255,.82); font-weight: 500; font-size: .96rem; padding: .5rem .8rem; border-radius: var(--r-sm); transition: color .15s, background .15s; }
.nav-links a:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav-links a.active { color: var(--yellow); }
.nav-cta { display: flex; align-items: center; gap: .7rem; }
.nav-phone { color: var(--yellow); font-weight: 700; font-size: .98rem; white-space: nowrap; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; width: 44px; height: 44px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px auto; border-radius: 2px; transition: .25s; }

/* mobile nav */
@media (max-width: 920px) {
  .nav-links { position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink-900); padding: .5rem var(--gut) 1.5rem; border-bottom: 1px solid rgba(255,255,255,.08);
    transform: translateY(-120%); transition: transform .3s ease; margin-left: 0; }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { padding: .9rem .4rem; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 1.05rem; }
  .nav-toggle { display: block; margin-left: auto; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-phone { display: none; }
}

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; padding-block: clamp(48px, 7vw, 92px); }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 70% at 85% 10%, rgba(253,210,21,.14), transparent 60%),
    radial-gradient(40% 50% at 5% 90%, rgba(253,210,21,.07), transparent 60%);
  pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 64px); align-items: center; position: relative; }
.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: var(--yellow); }
.hero-sub { color: rgba(255,255,255,.75); font-size: clamp(1.05rem, 1.7vw, 1.25rem); max-width: 30ch; }
.hero-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 1.6rem; margin-top: 1.6rem; }
.hero-trust .ht { display: flex; align-items: center; gap: .5rem; font-size: .92rem; color: rgba(255,255,255,.85); font-weight: 600; }
.hero-trust .stars { color: var(--yellow); letter-spacing: 1px; }
.hero-badges { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.4rem; }

.pill {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  padding: .4rem .85rem; border-radius: var(--r-pill); font-size: .82rem; font-weight: 600; color: #fff;
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); }

/* ---------- Quote calculator ---------- */
.quote-card {
  background: var(--paper); color: var(--ink); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); overflow: hidden; position: relative;
}
.quote-card__head { background: var(--yellow); padding: 1.05rem 1.4rem; display: flex; align-items: center; justify-content: space-between; }
.quote-card__head strong { font-family: var(--font-display); font-size: 1.12rem; }
.quote-card__head .tag { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; background: var(--ink); color: var(--yellow); padding: .25rem .6rem; border-radius: var(--r-pill); }
.quote-card__body { padding: 1.4rem; }
.q-steps { display: flex; gap: .4rem; margin-bottom: 1.15rem; }
.q-steps .s { flex: 1; height: 5px; border-radius: 3px; background: var(--gray-200); transition: background .3s; }
.q-steps .s.done { background: var(--yellow); }
.q-step { display: none; }
.q-step.active { display: block; animation: fadeUp .35s ease; }
.q-label { font-weight: 700; font-size: 1.05rem; margin-bottom: .25rem; display: block; }
.q-hint { font-size: .85rem; color: var(--gray-500); margin-bottom: .9rem; }
.q-options { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.q-opt {
  border: 1.5px solid var(--gray-200); border-radius: var(--r); padding: .8rem .9rem; cursor: pointer;
  font-weight: 600; font-size: .95rem; text-align: left; background: #fff; transition: .15s; display: flex; flex-direction: column; gap: .15rem;
}
.q-opt small { font-weight: 500; color: var(--gray-500); font-size: .78rem; }
.q-opt:hover { border-color: var(--ink); }
.q-opt.sel { border-color: var(--ink); background: var(--yellow-soft); box-shadow: inset 0 0 0 1.5px var(--ink); }
.q-input { width: 100%; padding: .85rem 1rem; border: 1.5px solid var(--gray-200); border-radius: var(--r); font-size: 1.05rem; font-weight: 600; }
.q-input:focus { outline: 0; border-color: var(--ink); }
.q-nav { display: flex; gap: .6rem; margin-top: 1.1rem; }
.q-back { background: none; border: 0; color: var(--gray-500); font-weight: 600; cursor: pointer; padding: .5rem; }
.q-result { text-align: center; padding: .4rem 0 .2rem; }
.q-result .price { font-family: var(--font-display); font-size: 3rem; font-weight: 700; color: var(--ink); line-height: 1; }
.q-result .price small { font-size: 1rem; color: var(--gray-500); font-weight: 500; }
.q-result .price-range { color: var(--gray-500); font-size: .9rem; margin-top: .3rem; }
.q-foot-note { font-size: .78rem; color: var(--gray-400); text-align: center; margin-top: .9rem; }

/* ---------- Cards ---------- */
.card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-lg); padding: 1.7rem; transition: transform .25s ease, box-shadow .25s ease, border-color .25s; height: 100%; }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }
.card .ic { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; background: var(--yellow); margin-bottom: 1rem; font-size: 1.4rem; }
.card h3 { margin-bottom: .45rem; }
.card .price-from { font-weight: 700; color: var(--ink); }
.card .price-from span { color: var(--gray-500); font-weight: 500; font-size: .9rem; }
.card .clink { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; margin-top: 1rem; color: var(--ink); border-bottom: 2px solid var(--yellow); padding-bottom: 2px; }

.card--feature { background: var(--ink); color: #fff; border-color: transparent; }
.card--feature p { color: rgba(255,255,255,.72); }
.popular-flag { position: absolute; top: 1rem; right: 1rem; background: var(--ink); color: var(--yellow); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .3rem .7rem; border-radius: var(--r-pill); }
.card { position: relative; }

/* steps */
.step-num { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--yellow-deep); line-height: 1; }
.step-card { background: #fff; border-radius: var(--r-lg); padding: 1.6rem; border: 1px solid var(--gray-200); }

/* ---------- Stats band ---------- */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(16px,3vw,32px); text-align: center; }
.stat .n { font-family: var(--font-display); font-size: clamp(2rem,4vw,3rem); font-weight: 700; color: var(--yellow); line-height: 1; }
.stat .l { color: rgba(255,255,255,.7); font-size: .92rem; margin-top: .35rem; }

/* ---------- Trust / reviews ---------- */
.review { background: #fff; border-radius: var(--r-lg); padding: 1.5rem; border: 1px solid var(--gray-200); height: 100%; }
.review .stars { color: var(--yellow-deep); letter-spacing: 1px; margin-bottom: .6rem; }
.review p { color: var(--ink); font-size: 1.02rem; }
.review .who { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; }
.review .av { width: 40px; height: 40px; border-radius: 50%; background: var(--cream-2); display: grid; place-items: center; font-weight: 700; color: var(--ink); }
.review .who b { display: block; font-size: .92rem; }
.review .who small { color: var(--gray-500); font-size: .8rem; }

/* logos / accreditations row */
.trust-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.4rem 2.6rem; opacity: .8; }
.trust-row .acc { font-weight: 700; color: var(--gray-600); display: flex; align-items: center; gap: .5rem; font-size: .95rem; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--gray-200); }
.faq details { border-bottom: 1px solid var(--gray-200); padding: 1.15rem 0; }
.faq summary { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--yellow-deep); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: .7rem; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--yellow); border-radius: var(--r-lg); padding: clamp(34px, 5vw, 64px); text-align: center; position: relative; overflow: hidden; }
.cta-band::after { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 120% at 50% -10%, rgba(255,255,255,.5), transparent 60%); pointer-events: none; }
.cta-band h2 { position: relative; }
.cta-band p { color: rgba(31,31,31,.72); position: relative; }
.cta-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; position: relative; }

/* ---------- Generic page hero (inner) ---------- */
.page-hero { background: var(--ink); color: #fff; padding-block: clamp(48px, 7vw, 84px); position: relative; overflow: hidden; }
.page-hero::before { content:""; position:absolute; inset:0; background: radial-gradient(50% 80% at 90% 0%, rgba(253,210,21,.12), transparent 60%); }
.page-hero h1 { color: #fff; max-width: 18ch; }
.page-hero .lead { color: rgba(255,255,255,.72); max-width: 56ch; }
.crumbs { font-size: .85rem; color: rgba(255,255,255,.55); margin-bottom: 1rem; }
.crumbs a:hover { color: var(--yellow); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink-900); color: rgba(255,255,255,.7); padding-block: clamp(48px,6vw,72px) 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(24px,4vw,48px); }
.site-footer h4 { color: #fff; font-size: .95rem; margin-bottom: 1rem; font-family: var(--font-body); letter-spacing: .04em; text-transform: uppercase; }
.site-footer a:hover { color: var(--yellow); }
.site-footer .f-links li { margin-bottom: .6rem; }
.site-footer .f-links a { font-size: .95rem; }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem; color: rgba(255,255,255,.5); }
.footer-brand p { color: rgba(255,255,255,.6); max-width: 36ch; margin-top: 1rem; font-size: .95rem; }

/* ---------- Sticky mobile CTA ---------- */
.mobile-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 70; display: none; gap: .5rem; padding: .6rem; background: rgba(31,31,31,.97); backdrop-filter: blur(8px); border-top: 1px solid rgba(255,255,255,.1); }
.mobile-bar .btn { flex: 1; padding: .8rem; font-size: .95rem; }
.mobile-bar .btn--call { background: #fff; }
@media (max-width: 720px) { .mobile-bar { display: flex; } body { padding-bottom: 70px; } }

/* Hidden until the visitor scrolls away from the top (app.js adds
   .is-visible via a sentinel at the top of the document), so the bar
   doesn't eat ~70px of the hero on first paint. */
.mobile-bar-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 220px; pointer-events: none; }
.mobile-bar {
  transform: translateY(110%);
  opacity: 0;
  visibility: hidden;
  transition: transform .45s var(--ease-fluid), opacity .3s ease, visibility .45s;
}
.mobile-bar.is-visible { transform: none; opacity: 1; visibility: visible; }

/* ---------- Animations ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
[data-delay="1"] { transition-delay: .08s; }
[data-delay="2"] { transition-delay: .16s; }
[data-delay="3"] { transition-delay: .24s; }
[data-delay="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2,1fr); gap: 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .q-options { grid-template-columns: 1fr; }
  h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); }
}

/* ---------- Helpers ---------- */
.muted { color: var(--gray-500); }
.checklist li { display: flex; gap: .65rem; align-items: flex-start; margin-bottom: .7rem; }
.checklist li::before { content: "✓"; color: var(--green); font-weight: 800; background: var(--green-soft); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; flex-shrink: 0; margin-top: 2px; }
.section--ink .checklist li::before { background: rgba(253,210,21,.16); color: var(--yellow); }
.section--ink .checklist li { color: rgba(255,255,255,.85); }
.tag-row { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ============================================================
   POLISH + IMAGERY  (v2 — added in the refinement pass)
   ============================================================ */

/* ---- Generic media ---- */
.media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); position: relative; }
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ratio-43 { aspect-ratio: 4/3; }
.ratio-32 { aspect-ratio: 3/2; }
.ratio-11 { aspect-ratio: 1/1; }
.ratio-169 { aspect-ratio: 16/9; }

/* ---- Photo hero (homepage) ---- */
.hero {
  background-image:
    linear-gradient(110deg, rgba(20,20,20,.94) 0%, rgba(20,20,20,.86) 42%, rgba(20,20,20,.55) 100%),
    var(--hero-img, url('img/hero-house.jpg'));
  background-size: cover; background-position: center right;
}
@media (max-width: 960px){
  .hero { background-image: linear-gradient(rgba(20,20,20,.92), rgba(20,20,20,.92)), var(--hero-img, url('img/hero-house.jpg')); }
}

/* ---- Image service cards ---- */
.card--img { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card__media { aspect-ratio: 16/10; overflow: hidden; position: relative; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card--img:hover .card__media img { transform: scale(1.05); }
.card__media .flag { position: absolute; top: .9rem; left: .9rem; background: var(--yellow); color: var(--ink); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; padding: .3rem .7rem; border-radius: var(--r-pill); z-index: 2; }
.card__body { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { margin-bottom: .4rem; }
.card__price { font-weight: 700; color: var(--ink); margin-top: auto; padding-top: 1rem; display: flex; align-items: baseline; justify-content: space-between; }
.card__price span { color: var(--gray-500); font-weight: 500; font-size: .85rem; }
.card__price .clink { margin-top: 0; }

/* ---- Split image section ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 68px); align-items: center; }
.split--reverse .split__media { order: -1; }
.split__media { position: relative; }
.split__media .media { aspect-ratio: 4/3; }
.split__media .float-stat {
  position: absolute; bottom: -22px; right: -10px; background: var(--ink); color: #fff;
  border-radius: var(--r); padding: 1rem 1.25rem; box-shadow: var(--shadow-lg); z-index: 3; text-align: left;
}
.split__media .float-stat .n { font-family: var(--font-display); font-size: 1.9rem; color: var(--yellow); line-height: 1; }
.split__media .float-stat .l { font-size: .8rem; color: rgba(255,255,255,.72); margin-top: .15rem; }
@media (max-width: 820px){ .split { grid-template-columns: 1fr; } .split--reverse .split__media { order: 0; } .split__media .float-stat { right: 14px; } }

/* ---- Photo band (full-width image with overlay + content) ---- */
.photo-band { position: relative; color: #fff; border-radius: 0; overflow: hidden; }
.photo-band__bg { position: absolute; inset: 0; }
.photo-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.photo-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,20,20,.92), rgba(20,20,20,.7)); }
.photo-band > .wrap { position: relative; z-index: 2; }
.photo-band .stat .l { color: rgba(255,255,255,.72); }

/* ---- Process strip with thin connecting accent ---- */
.steps-row { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2.5vw,30px); position: relative; }
.steps-row .step-card { position: relative; }
.steps-row .step-card .step-num { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--yellow); color: var(--ink); font-size: 1.3rem; }
@media (max-width: 820px){ .steps-row { grid-template-columns: 1fr; } }

/* ---- Team cards (real photos) ---- */
.team-card { background:#fff; border:1px solid var(--gray-200); border-radius: var(--r-lg); overflow: hidden; transition: transform .25s, box-shadow .25s; }
.team-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.team-card .photo { aspect-ratio: 1/1; overflow: hidden; }
.team-card .photo img { width:100%; height:100%; object-fit: cover; filter: grayscale(.15); transition: filter .3s, transform .5s; }
.team-card:hover .photo img { filter: grayscale(0); transform: scale(1.04); }
.team-card .info { padding: 1.15rem 1.3rem 1.4rem; }
.team-card .info h3 { font-size: 1.2rem; }
.team-card .info .cred { color: var(--yellow-deep); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; margin: .25rem 0 .5rem; }
.team-card .info p { font-size: .92rem; }

/* ---- Area / location tiles with image ---- */
.place-tile { position: relative; display: block; border-radius: var(--r); overflow: hidden; aspect-ratio: 3/2; box-shadow: var(--shadow-sm); }
.place-tile img { width:100%; height:100%; object-fit: cover; transition: transform .5s; }
.place-tile:hover img { transform: scale(1.06); }
.place-tile::after { content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(20,20,20,.85), rgba(20,20,20,.05) 65%); }
.place-tile .name { position:absolute; left:0; bottom:0; z-index:2; padding: .9rem 1rem; color:#fff; font-family: var(--font-display); font-weight:700; font-size:1.1rem; }
.place-tile .name small { display:block; font-family: var(--font-body); font-weight:500; font-size:.74rem; color:var(--yellow); letter-spacing:.03em; }

/* compact text-only place links (for the long tail) */
.place-list { display:grid; grid-template-columns: repeat(4,1fr); gap:.5rem; }
.place-list a { display:flex; align-items:center; gap:.5rem; padding:.7rem .9rem; border:1px solid var(--gray-200); border-radius: var(--r-sm); background:#fff; font-weight:600; font-size:.92rem; transition:.15s; }
.place-list a:hover { border-color: var(--ink); background: var(--yellow-soft); }
.place-list a::before { content:"📍"; font-size:.85rem; }
@media (max-width: 760px){ .place-list { grid-template-columns: 1fr 1fr; } }

/* ---- Section intro refinement: tighter, larger ---- */
.section-head h2 { line-height: 1.02; }
.section-head .lead { margin-top: .7rem; }

/* ---- Inner page hero with image accent ---- */
.page-hero--img { background-image: linear-gradient(100deg, rgba(20,20,20,.95) 30%, rgba(20,20,20,.6)), var(--ph-img); background-size: cover; background-position: center; }

/* ---- Logo strip refinement ---- */
.trust-row .acc { font-size: .9rem; }

/* ---- Pull quote ---- */
.pullquote { font-family: var(--font-display); font-size: clamp(1.4rem,2.6vw,2rem); line-height: 1.25; letter-spacing: -.01em; }

/* ---- Small caption ---- */
.cap { font-size: .8rem; color: var(--gray-400); margin-top: .6rem; }

/* ============================================================
   HIGH-END v3 — applying the `high-end-visual-design` skill
   Editorial-luxury + soft-structuralism on the BTB brand.
   Floating glass nav · machined double-bezel cards ·
   button-in-button CTAs · film grain · fluid spring motion.
   ============================================================ */

:root{
  /* squircle radii */
  --r-sm: 12px; --r: 18px; --r-lg: 28px;
  /* highly-diffused ambient shadows (no harsh dark drops) */
  --shadow-sm: 0 1px 2px rgba(31,31,31,.03), 0 6px 16px -6px rgba(31,31,31,.10);
  --shadow:    0 10px 30px -12px rgba(31,31,31,.16), 0 30px 60px -28px rgba(31,31,31,.14);
  --shadow-lg: 0 18px 48px -16px rgba(31,31,31,.22), 0 60px 110px -40px rgba(31,31,31,.26);
}

/* ---- Film-grain overlay (fixed, never repaints) ---- */
body::after{
  content:""; position:fixed; inset:0; z-index:90; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Massive typography ---- */
h1{ font-size: clamp(2.6rem, 6.4vw, 4.9rem); letter-spacing:-.035em; }
h2{ font-size: clamp(2rem, 4.4vw, 3.3rem); letter-spacing:-.03em; }
.lead{ letter-spacing:-.01em; }

/* ---- Macro-whitespace ---- */
.section{ padding-block: clamp(70px, 10vw, 144px); }

/* ---- Eyebrow → micro pill badge ---- */
.eyebrow{
  background: rgba(31,31,31,.05); border:1px solid rgba(31,31,31,.08);
  padding:.42rem .85rem; border-radius:var(--r-pill);
  font-size:.68rem; letter-spacing:.2em; color:var(--ink);
}
.eyebrow::before{ display:none; }
.eyebrow.on-dark{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); color: var(--yellow); }

/* ---- Floating glass nav island ---- */
.site-header{
  position: sticky; top:0; z-index:60;
  background: transparent; border:0; backdrop-filter:none;
  padding: 14px clamp(14px,3vw,22px) 0;
}
.site-header .nav{
  max-width: 1120px; height: 64px; margin-inline:auto;
  padding: 0 10px 0 22px;
  background: rgba(24,24,24,.92);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  border:1px solid rgba(255,255,255,.10); border-radius: var(--r-pill);
  box-shadow: 0 12px 34px -14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.09);
}
.nav-links a{ border-radius: var(--r-pill); }
.nav-cta .btn{ padding:.62rem 1.1rem; }

/* mobile menu → glass panel detached from the pill */
@media (max-width: 920px){
  .site-header .nav{ padding-right:6px; }
  .nav-links{
    inset:auto; top:90px; left:clamp(14px,3vw,22px); right:clamp(14px,3vw,22px);
    background: rgba(20,20,20,.86); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
    border:1px solid rgba(255,255,255,.10); border-radius: var(--r-lg); padding:.6rem 1rem 1.1rem;
    box-shadow: var(--shadow-lg); transform: translateY(-14px); opacity:0; transition: transform .5s var(--ease-fluid), opacity .35s ease;
  }
  .nav-links.open{ transform: translateY(0); opacity:1; }
  .nav-links a{ border-bottom:1px solid rgba(255,255,255,.06); }
}

/* ---- Button-in-button trailing icon + magnetic physics ---- */
.btn{ transition: transform .45s var(--ease-fluid), box-shadow .45s var(--ease-fluid), background .3s ease; }
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: scale(.975); }
.btn .arr{
  display:inline-grid; place-items:center; width:27px; height:27px; border-radius:50%;
  background: rgba(31,31,31,.12); margin:-.2rem -.45rem -.2rem .15rem; font-size:.85rem; line-height:1;
  transition: transform .5s var(--ease-fluid), background .3s ease;
}
.btn:hover .arr{ transform: translate(3px,-1px) scale(1.08); }
.btn--dark .arr, .btn--ghost-light .arr{ background: rgba(255,255,255,.18); }
.btn--ghost:hover .arr{ background: rgba(255,255,255,.18); }
/* keep text-link arrows flat (only buttons get the circle) */
.clink .arr{ all: unset; transition: transform .3s var(--ease-fluid); }
.clink:hover .arr{ transform: translateX(4px); }

/* ---- Machined "double-bezel" surfaces ---- */
.card, .review, .step-card, .team-card, .quote-card, .map, .place-list a, .faq{
  border-radius: var(--r-lg);
}
.card, .review, .step-card, .team-card{
  border:1px solid rgba(31,31,31,.07);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.7), var(--shadow-sm);
  transition: transform .55s var(--ease-fluid), box-shadow .55s var(--ease-fluid), border-color .4s ease;
}
.card:hover, .review:hover, .team-card:hover{
  transform: translateY(-6px);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.7), var(--shadow);
  border-color: rgba(31,31,31,.04);
}
.quote-card{ box-shadow: inset 0 1px 1px rgba(255,255,255,.6), var(--shadow-lg); }
.card--img{ border-radius: var(--r-lg); }
.card--img .card__media img{ transition: transform .8s var(--ease-fluid); }

/* concentric inner radius on image-card media (top corners only) */
.card__media{ border-radius: calc(var(--r-lg) - 7px) calc(var(--r-lg) - 7px) 0 0; }

/* ---- Media & splits: softer, deeper ---- */
.media{ border-radius: var(--r-lg); box-shadow: var(--shadow); }
.split__media .float-stat{ border-radius: var(--r); box-shadow: var(--shadow-lg); }
.cta-band{ border-radius: 34px; }

/* ---- Inputs: bezel feel ---- */
.q-input{ border-radius: var(--r); border-color: rgba(31,31,31,.12); transition: border-color .3s ease, box-shadow .3s ease; }
.q-input:focus{ box-shadow: 0 0 0 4px rgba(253,210,21,.25); }
.q-opt{ border-radius: var(--r); transition: border-color .3s var(--ease-fluid), background .3s ease, box-shadow .3s ease; }
.quote-card__head{ border-radius: var(--r-lg) var(--r-lg) 0 0; }

/* ---- Heavier fluid scroll-entry (fade-up + blur) ---- */
.reveal{ opacity:0; transform: translateY(30px); filter: blur(7px);
  transition: opacity .85s var(--ease-fluid), transform .85s var(--ease-fluid), filter .85s var(--ease-fluid); }
.reveal.in{ opacity:1; transform:none; filter:none; }
[data-delay="1"]{ transition-delay:.1s; }
[data-delay="2"]{ transition-delay:.2s; }
[data-delay="3"]{ transition-delay:.3s; }
[data-delay="4"]{ transition-delay:.4s; }

/* hero CTA arrow contrast on dark */
.hero .btn--dark .arr{ background: rgba(255,255,255,.18); }

@media (prefers-reduced-motion: reduce){
  .reveal{ filter:none; }
  body::after{ display:none; }
}

/* ---- v3 fix: keep the floating nav pill on one tidy line ---- */
.btn{ white-space: nowrap; }
.site-header .nav{ gap: .9rem; }
.nav-links{ gap: .05rem; }
.nav-links a{ padding: .5rem .6rem; font-size: .9rem; }
.nav-cta{ gap: .6rem; }
.nav-phone{ font-size: .9rem; }
.nav-cta .btn{ padding: .58rem .95rem; font-size: .92rem; }
/* below 1100px the phone link is dropped from the pill (still in footer/contact) */
@media (max-width: 1100px) and (min-width: 921px){ .nav-phone{ display:none; } }
/* a touch more room in the island */
@media (min-width: 921px){ .site-header .nav{ max-width: 1160px; } }

/* ============================================================
   v4 — consistent inner heroes (image on the right) +
   full, never-clipped headings in centred sections
   ============================================================ */

/* Inner hero: same two-column layout as home, image instead of widget */
.hero-media .media{ aspect-ratio: 4/3; box-shadow: var(--shadow-lg); width: 100%; }
.hero-media .media img{ width:100%; height:100%; object-fit: cover; }
.hero .crumbs{ margin-bottom: .9rem; }
.hero .hero-sub{ color: rgba(255,255,255,.78); }
@media (max-width: 960px){
  .hero-media{ margin-top: 1.6rem; }
  .hero-media .media{ aspect-ratio: 16/10; }
}

/* Headings & subheadings: balanced, full, never clipped */
h1, h2, h3 { text-wrap: balance; overflow-wrap: break-word; }
.lead, .hero-sub, .section-head p, .page-hero .lead { text-wrap: pretty; }
/* give centred section intros room so full-sentence headings don't break awkwardly */
.section-head { max-width: 780px; }
.section-head h2 { max-width: none; }
/* nothing in a heading/intro container should be cut off */
.hero, .page-hero, .section-head, .hero-grid > div { overflow: visible; }
.page-hero h1 { max-width: none; }
.page-hero .lead { max-width: 62ch; }

/* ============================================================
   v5 — nested navigation (dropdown submenus) for SEO + UX
   ============================================================ */
.nav-item{ position: relative; display: flex; align-items: center; }
.nav-item > a{ display: inline-flex; align-items: center; gap: .26rem; }
.nav-item .chev{ width: 13px; height: 13px; opacity: .6; transition: transform .3s var(--ease-fluid); }
.nav-item:hover .chev, .nav-item:focus-within .chev{ transform: rotate(180deg); opacity: 1; }

.sub{
  position: absolute; top: calc(100% + 16px); left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 250px; padding: .5rem;
  background: rgba(26,26,26,.92); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.10); border-radius: 20px;
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s var(--ease-fluid), transform .3s var(--ease-fluid), visibility .3s;
  z-index: 70;
}
.sub::before{ content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; } /* hover bridge */
.nav-item:hover > .sub, .nav-item:focus-within > .sub{
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.sub a{
  display: flex; align-items: center; gap: .55rem; padding: .62rem .8rem; border-radius: 12px;
  font-size: .92rem; color: rgba(255,255,255,.82); white-space: nowrap; font-weight: 500;
  transition: background .2s ease, color .2s ease;
}
.sub a:hover{ background: rgba(255,255,255,.09); color: #fff; }
.sub a.sub-all{ color: var(--yellow); font-weight: 700; margin-top: .15rem; border-top: 1px solid rgba(255,255,255,.08); border-radius: 0 0 12px 12px; }

/* mobile: submenus expand inline (indented) — crawlable + tap-friendly */
@media (max-width: 920px){
  .nav-item{ flex-direction: column; align-items: stretch; }
  .nav-item .chev{ display: none; }
  .sub{
    position: static; transform: none; min-width: 0; padding: 0 0 .4rem .9rem;
    background: transparent; border: 0; box-shadow: none;
    opacity: 1; visibility: visible; pointer-events: auto;
  }
  .sub::before{ display: none; }
  .sub a{ padding: .55rem .4rem; font-size: .95rem; border-radius: 8px; }
  .sub a.sub-all{ border-top: 0; }
}

/* ============================================================
   v6 — region → city hierarchy in the Areas dropdown
   ============================================================ */
.sub .sub-region{ font-weight: 700; }
.sub .sub-city{ position: relative; padding-left: 1.6rem; }
.sub .sub-city::before{
  content: ""; position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-left: 1.5px solid rgba(255,255,255,.25); border-bottom: 1.5px solid rgba(255,255,255,.25);
  border-bottom-left-radius: 2px;
}
@media (max-width: 920px){ .sub .sub-city{ padding-left: 1.4rem; } }

/* ============================================================
   v7 — Elementor header: mobile layout + usable dropdown
   ------------------------------------------------------------
   header.php defers to Elementor whenever a header template exists,
   and one does, so every .site-header / .nav-links rule above is
   dead on the live site. These rules give the Elementor header the
   same responsive treatment the theme header used to get.

   The bug this fixes: the header row (.elementor-element-d867e8b)
   stays flex-direction:row/nowrap at every width, so at 390px the
   nav widget is squeezed to ~58px (~49px at 360px). The dropdown is
   positioned against that widget — its containing block — so the
   menu opened as an unusable ~50px sliver. Making the intermediate
   containers position:static hands the containing block to the fixed
   header container, so top/left/right resolve against the full
   header width and track any header height change automatically.

   Elementor collapses this menu to its dropdown at <=1024px (the
   widget carries .elementor-nav-menu--dropdown-tablet), so that is
   the breakpoint used here.
   ============================================================ */
@media (max-width: 1024px){
  .elementor-location-header .elementor-element-d867e8b{
    align-items: center;
    gap: .75rem;
    /* The container carries a fixed 1160px content width that never goes
       fluid below desktop, so at 768px it centred to left:-196px and forced
       the page 964px wide. Constrain it to the viewport. */
    max-width: 100%;
  }
  /* push the nav cluster to the right edge. Deliberately NOT flex:0 0 auto —
     that stops the cluster shrinking and overflows the row at 721-1024px,
     where the phone and CTA are both still shown. */
  .elementor-location-header .elementor-element-afc2b6a{
    margin-left: auto;
    min-width: 0;
  }

  /* hand the dropdown's containing block to the sticky header container */
  .elementor-location-header .elementor-element-d867e8b,
  .elementor-location-header .elementor-element-afc2b6a,
  .elementor-location-header .elementor-element-cfe3a8f{ position: static; }

  /* glass panel detached from the bar — mirrors the .nav-links
     treatment the theme header used at <=920px */
  .elementor-location-header nav.elementor-nav-menu--dropdown{
    position: absolute;
    top: calc(100% + 8px);
    left: clamp(14px, 3vw, 22px);
    right: clamp(14px, 3vw, 22px);
    width: auto !important;
    max-width: none;
    max-height: 70svh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: .5rem .75rem 1rem;
    background: rgba(20,20,20,.86);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
            backdrop-filter: blur(22px) saturate(1.4);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
  }
  .elementor-location-header nav.elementor-nav-menu--dropdown .elementor-nav-menu{
    display: block;
  }
  /* 44px minimum tap target (Apple HIG) — menu links were 17-19px tall */
  .elementor-location-header nav.elementor-nav-menu--dropdown a{
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: .55rem .7rem;
    font-size: .95rem;
    font-weight: 500;
    color: rgba(255,255,255,.86);
    border-bottom: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
  }
  .elementor-location-header nav.elementor-nav-menu--dropdown a:hover,
  .elementor-location-header nav.elementor-nav-menu--dropdown a:focus-visible{
    background: rgba(255,255,255,.09);   /* hover colour lives in v10 */
  }
  /* Elementor reuses .elementor-nav-menu--dropdown for BOTH the mobile
     <nav> container and every nested <ul class="sub-menu">, hence the
     nav. qualifier on the panel rules above. Submenus expand inline and
     indented instead, matching the .sub treatment the theme header used. */
  .elementor-location-header nav.elementor-nav-menu--dropdown ul.sub-menu{
    position: static;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0 0 .3rem .4rem;
    width: auto;
    max-height: none;
  }
  /* nested items indented, matching the .sub treatment above */
  .elementor-location-header nav.elementor-nav-menu--dropdown ul a{
    padding-left: 1.5rem;
    font-size: .9rem;
    color: rgba(255,255,255,.72);
    border-bottom: 0;
  }
  .elementor-location-header .elementor-menu-toggle{
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ============================================================
   v8 — home hero trust row, simplified on mobile only
   On a phone the five star glyphs plus "4.8 / 5" plus three pills is
   more furniture than signal, so mobile drops the stars for a plain
   "4.8 star rating" and sheds the Price-match pill. Desktop keeps the
   full treatment — the markup carries both labels and CSS picks one,
   so nothing is lost at any width.
   ============================================================ */
/* ============================================================
   v9 — desktop dropdowns, matched to the mobile panel
   ------------------------------------------------------------
   Elementor's widget-nav-menu.min.css sets
     .elementor-nav-menu--dropdown { background-color: #fff }
   while the header template paints submenu links white, so desktop
   dropdowns rendered white-on-white — a contrast ratio of 1.0, i.e.
   entirely invisible. Nothing here needs !important: this selector
   is (0,3,1) against Elementor's (0,1,0).

   Scoped to >=1025px because below that the same <ul class="sub-menu">
   is the inline-expanding mobile submenu, which is styled in v7.
   ============================================================ */
@media (min-width: 1025px){
  .elementor-location-header nav.elementor-nav-menu--main ul.sub-menu{
    min-width: 250px;
    padding: .5rem;
    background: rgba(20,20,20,.86);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
            backdrop-filter: blur(22px) saturate(1.4);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
  }
  .elementor-location-header nav.elementor-nav-menu--main ul.sub-menu a{
    padding: .62rem .8rem;
    border-radius: 10px;
    font-size: .92rem;
    font-weight: 500;
    color: rgba(255,255,255,.82);
    transition: background .2s ease, color .2s ease;
  }
  .elementor-location-header nav.elementor-nav-menu--main ul.sub-menu a:hover,
  .elementor-location-header nav.elementor-nav-menu--main ul.sub-menu a:focus-visible{
    background: rgba(255,255,255,.09);   /* hover colour lives in v10 */
  }
}

/* ============================================================
   v10 — brand yellow on menu hover
   ------------------------------------------------------------
   Elementor writes per-widget hover rules into inline CSS at roughly
   (0,6,0), e.g.
     .elementor-115 .elementor-element.elementor-element-cfe3a8f
       .elementor-nav-menu--main .elementor-item:hover { color:#fff }
   No readable authored selector outranks that, so this uses
   !important rather than an unmaintainable specificity arms race.

   Contrast checked against both surfaces the menu sits on:
     yellow on the header bar rgba(24,24,24,.92)  -> 12.18:1
     yellow on the dropdown panel rgba(20,20,20,.86) -> 12.64:1
   Both clear WCAG AA (4.5:1) with room to spare.

   li:hover > a keeps the parent item lit while the pointer is down
   inside its submenu, so the open branch stays legible.
   ============================================================ */
.elementor-location-header .elementor-nav-menu a:hover,
.elementor-location-header .elementor-nav-menu a:focus-visible,
.elementor-location-header .elementor-nav-menu li:hover > a{
  color: var(--yellow) !important;
}

/* ============================================================
   v12 — "A survey that earns its fee" band
   ------------------------------------------------------------
   Drops the "15 min / Callback promise" stat (the promise now sits
   in the trust strip above) and gives the band a background image.

   survey-work.jpg is used rather than one of the house shots because
   it is the only sizeable asset not already on this page — the hero,
   split sections and cards between them use hero-house, house-brick,
   house-modern, keys and report — and at 142KB it is also the
   lightest of the candidates.

   No !important on background-image: Elementor suppresses backgrounds
   via .e-con.e-parent:not(.e-lazyloaded){background-image:none} until
   its observer adds .e-lazyloaded on scroll-in. This section does get
   that class, so declaring the image normally keeps the lazy-load
   behaviour intact instead of forcing an eager fetch below the fold.

   Overlay is 86-90% opaque so text stays legible over any part of the
   photo. Worst case (a blank-white region) the effective backdrop is
   ~rgb(58,58,58): yellow #fdd215 lands at ~8:1 and white at ~11:1,
   both past WCAG AA.
   ============================================================ */
.elementor-element-8598c25{ display: none !important; }

.elementor-element-3071dfd{
  background-image:
    linear-gradient(rgba(31,31,31,.90), rgba(31,31,31,.86)),
    url("img/survey-work.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: scroll;   /* `fixed` janks and misrenders on iOS */
}

/* ============================================================
   v11 — home hero stats rendered as pills
   ------------------------------------------------------------
   Gives the rating / surveys / turnaround row the same pill
   treatment as the trust badges directly beneath it, so the two
   rows read as one system instead of two unrelated styles.

   Values lifted verbatim from the badge pills in widget 459f022:
     background rgba(255,255,255,.08)
     border     1px solid rgba(255,255,255,.16)
     radius     999px
     padding    7px 14px
     font       13px / 600

   The container's gap is an inline style (gap:14px 22px), and
   inline styles outrank stylesheets, so tightening it to the
   badges' 8px is the one place !important is unavoidable here.
   ============================================================ */
.elementor-element-eabc7dd > div{
  gap: 8px !important;
}
.elementor-element-eabc7dd > div > span{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
/* icons carry width/height attributes; CSS outranks those, and 14px
   sits better against 13px text than the original 16px */
.elementor-element-eabc7dd > div > span svg{
  width: 14px;
  height: 14px;
}

/* Rating reads as a single star icon followed by "4.8", identically at
   every width. The wrapper must be a non-shrinking flex item: as a plain
   inline span it collapsed to 16px and stacked its icon(s) one per line. */
.btb-hero-stars{
  display: inline-flex;
  align-items: center;
  flex: none;
}

/* The hero badges row is retired entirely. "RICS & RPSA regulated" only
   repeated the eyebrow sitting directly above the H1, and Price-match
   guarantee + Fast callback now live in the trust strip below the hero.
   Supersedes the earlier per-pill rules; the .btb-badge--pricematch hook
   left in that widget's markup is harmless but no longer referenced. */
.elementor-element-459f022{ display: none !important; }

/* Below 720px the fixed .mobile-bar carries Call + Get my quote, so
   repeating them in the header only starves the row of width. Kept
   visible between 721-1024px, where .mobile-bar is still hidden. */
@media (max-width: 720px){
  .elementor-location-header .elementor-element-b774e95,
  .elementor-location-header .elementor-element-e48aafc{ display: none; }
}

/* ============================================================
   v13 — hero image fills to the very top, behind the fixed
   transparent header (removes the white band above the menu).
   The header is position:fixed (~98px tall) and every hero sits
   directly below it, so that band showed the white body bg.
   Pull each hero up by the header height and add the same amount
   of top padding (reproducing the original clamp) so content stays
   put and clears the floating nav pill. app.js keeps --btb-header-h
   in sync responsively and handles Elementor-page heroes.
   ============================================================ */
:root{ --btb-header-h: 98px; }
.hero{
  margin-top: calc(-1 * var(--btb-header-h));
  padding-top: calc(clamp(48px, 7vw, 92px) + var(--btb-header-h));
}
.page-hero{
  margin-top: calc(-1 * var(--btb-header-h));
  padding-top: calc(clamp(48px, 7vw, 84px) + var(--btb-header-h));
}