/* ==========================================================================
   Flettons: the one stylesheet for every page
   Dark brand: charcoal canvas, layered surfaces, off-white type, restrained borders,
   Inter. Every colour, radius and size reads a token from section 1.
   Order: tokens, base, type, buttons, sections, header and footer, components,
   responsive rules, then the shared page blocks, then one section per page group.
   A page section only holds rules whose classes that group's pages use; anything
   two groups need lives in a shared block above. Scripts add no styles of their own.
   ========================================================================== */

/* Inter, served from this site (Latin, variable weight; SIL Open Font Licence, see assets/fonts/Inter-OFL.txt).
   One file, declared once per weight in use, so it renders exactly as the Google Fonts copy did. */
/* Inter is one variable font (weights 100 to 900): one face with the full range, so every weight is drawn from the font and the browser never fakes a bold by smearing a lighter one. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* 1. Tokens ------------------------------------------------------------- */
:root {
  --canvas: #171a1c;
  --canvas-deep: #121416;
  --surface: #212528;
  --surface-2: #292e32;
  --surface-3: #31373c;
  --text: #f7f7f5;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-fg: #ffffff;
  --accent-text: #60a5fa;
  /* Blue words and marks: PLUS, Omni, the blue plus. The lighter blue on charcoal (Simon, 7 Nov 2026: the lightest
     of three, #2563eb was too dark there); the light bands set it back to the brand blue. */
  --brand-blue: #60a5fa;
  --text-2: #c4c9cc;
  --text-3: #8f979c;
  --line: #3a4044;
  --line-strong: #7f898f;
  --action-bg: #f7f7f5;
  --action-fg: #171a1c;
  --action-hover: #e4e5e2;
  --focus: #f7f7f5;
  --focus-ring: rgba(247, 247, 245, 0.18);
  --action-fg-muted: #4a5156;
  --ok: #2563eb;
  --ok-ink: #ffffff;
  --warn: #e8c15a;
  --warn-ink: #3d2f05;
  --danger: #ff7b7b;
  --danger-ink: #4a1212;
  --scrim: rgba(23, 26, 28, 0.78);
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 64px);
  --r: 8px;
  --r-card: 12px;
  --header-h: 68px;
  --tile: 1px solid var(--line-strong);

}

/* 2. Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--text); color: var(--canvas); }

.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 14px; border-radius: var(--r); background: var(--action-bg); color: var(--action-fg); font-weight: 600; }
.skip-link:focus { top: 12px; }

/* 3. Type --------------------------------------------------------------- */
.eyebrow {
  display: block;
  margin: 0 0 14px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
}
/* Paragraph rules in cards, asides and price bands must not inflate an eyebrow label inside them */
.card__body .eyebrow, .aside-card .eyebrow, .price-band .eyebrow, .cta .eyebrow { font-size: 0.74rem; line-height: 1.55; color: var(--text-2); }
.eyebrow::after { content: ""; display: block; width: 28px; height: 1px; margin-top: 8px; background: var(--line-strong); }
h1 { font-size: clamp(1.9rem, 1.35rem + 1.5vw, 2.75rem); line-height: 1.08; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.1; }
h2 em, h1 em { font-style: normal; font-weight: 400; color: var(--text-2); }
h3 { font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.01em; }
.lead { color: var(--text-2); font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem); line-height: 1.55; }
.link { color: var(--text); font-weight: 600; display: inline-flex; gap: 8px; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 5px; }
.link:hover { text-decoration-color: var(--text); }
/* A link inside a sentence: keeps the line height, with the tap area padded out instead. */
.link--inline { display: inline-block; min-height: 0; padding-block: 10px; margin-block: -10px; text-underline-offset: 4px; }
.sec--ink .link { color: var(--text); }
.stars { color: var(--text); letter-spacing: 0.12em; font-size: 0.95rem; }
small, .small { font-size: 0.92rem; color: var(--text-2); }

/* 4. Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border: 1.5px solid transparent; border-radius: var(--r);
  font-weight: 600; font-size: 0.98rem; letter-spacing: -0.005em; white-space: nowrap; line-height: 1.2;
  cursor: pointer; text-align: center;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
a[href^="tel:"] { white-space: nowrap; }
.btn--lg { min-height: 52px; padding: 0 26px; font-size: 1.02rem; }
.btn--block { width: 100%; }
.btn--primary { background: var(--action-bg); color: var(--action-fg); border-color: var(--action-bg); }
.btn--primary:hover { background: var(--action-hover); border-color: var(--action-hover); }
.btn__arrow { transition: transform .18s ease; }
.btn--primary:hover .btn__arrow { transform: translateX(3px); }
.btn--ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--text); background: var(--surface); }
.btn--sm { min-height: 40px; padding: 0 14px; font-size: 0.9rem; }
.btn--danger { border-color: rgba(255, 123, 123, 0.5); color: var(--danger); background: transparent; }
.btn--danger:hover { border-color: var(--danger); background: rgba(255, 123, 123, 0.08); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: fs-spin .8s linear infinite; }
@keyframes fs-spin { to { transform: rotate(360deg); } }

/* 5. Sections ----------------------------------------------------------- */
.sec { padding: clamp(48px, 5vw, 72px) 0; }
.sec--bone { background: var(--canvas); }
.sec--bone2 { background: var(--surface); }
.sec--ink { background: var(--canvas-deep); color: var(--text); }
.sec--ink + .sec--ink, .sec--bone + .sec--bone { padding-top: 0; }
/* Paper band: a light section between charcoal ones gives long pages rhythm and makes reading-heavy
   content (what's included, comparison tables, outcomes) easier; the survey level pages alternate
   light and charcoal sections after the hero. It redefines the colour tokens, so every
   component inside draws itself in the light scheme: cards turn white, the inverse tile and the
   primary button turn charcoal, ticks and icons follow the text colour. */
.sec--paper {
  --canvas: #f3f3f0;
  --canvas-deep: #e9e9e5;
  --surface: #fcfcfa;
  --surface-2: #ecece8;
  --surface-3: #e0e1dd;
  --text: #171a1c;
  --accent-text: #1d5fd6;
  --brand-blue: #2563eb;
  --text-2: #454c51;
  --text-3: #5b6368;
  --line: #d6d8d4;
  --line-strong: #7b8388;
  --action-bg: #171a1c;
  --action-fg: #f7f7f5;
  --action-hover: #2d3236;
  --action-fg-muted: #bec3c7;
  --focus: #171a1c;
  --focus-ring: rgba(23, 26, 28, 0.2);
  --ok: #1d5fd6;
  --warn: #7a5a00;
  --danger: #b3261e;
  background: var(--canvas);
  color: var(--text);
  color-scheme: light;
}
.sec--paper .report-cover__page, .sec--paper .g-stack__page { box-shadow: 0 26px 44px -28px rgba(23, 26, 28, 0.42); }
.sec__head { margin-bottom: clamp(24px, 3vw, 40px); }
.sec__head--split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px 56px; align-items: end; }
.sec__intro { color: var(--text-2); font-size: 1.02rem; max-width: 34rem; }
.sec--ink .sec__intro { color: var(--text-2); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* 6. Header (keeps chrome.js hooks: .fs-nav__trigger, [data-fs-mega], .fs-mega…) */
.fs-header {
  position: sticky; top: 0; z-index: 260;
  background: var(--canvas); color: var(--text);
  border-bottom: 1px solid var(--line);
}
.fs-header__inner {
  width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px;
  min-height: var(--header-h);
}
.fs-brand { display: inline-flex; align-items: center; min-height: 44px; }
.fs-brand img { height: 26px; width: auto; }
/* Regulated by RICS beside the wordmark, after a hairline; at RICS's artwork proportions, unfaded. */
.fs-brandset { display: inline-flex; align-items: center; gap: 18px; flex-shrink: 0; }
.fs-rics { height: 34px; width: auto; padding-left: 18px; border-left: 1px solid var(--line); box-sizing: content-box; }
.fs-nav { display: flex; justify-content: center; gap: 2px; }
.fs-nav__item { position: static; }
.fs-nav__link, .fs-nav__trigger {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 42px; padding: 8px 12px; border-radius: var(--r);
  color: var(--text-2); font-weight: 500; font-size: 0.94rem; line-height: 1.2;
  transition: color .15s ease, background-color .15s ease;
}
.fs-nav__link:hover, .fs-nav__trigger:hover, .fs-nav__item.is-open > .fs-nav__trigger { color: var(--text); background: var(--surface); }
.fs-nav__link.is-active, .fs-nav__trigger.is-active { color: var(--text); box-shadow: inset 0 -2px 0 var(--text); border-radius: var(--r) var(--r) 0 0; }
.fs-caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .8; transition: transform .2s ease; }
.fs-nav__item.is-open > .fs-nav__trigger .fs-caret { transform: rotate(-135deg) translateY(-2px); }

.fs-header__actions { display: flex; align-items: center; gap: 10px; }
.fs-header__actions .fs-button--phone { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: var(--r); color: var(--text-2); font-weight: 600; font-size: 0.94rem; }
.fs-header__actions .fs-button--phone:hover { color: var(--text); background: var(--surface); }
.fs-header__actions > * { white-space: nowrap; }
/* Desktop shows the phone as an icon button (Simon, 5 Nov 2026): the RICS mark keeps the room the full number needed. */
.fs-header__actions .fs-button--phone { justify-content: center; width: 42px; min-height: 40px; padding: 0; border: 1px solid var(--line-strong); color: var(--text); }
.fs-header__actions .fs-button--phone:hover { border-color: var(--text); }
.fs-header__actions .fs-button--phone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.fs-member-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: var(--r); color: var(--text); font-weight: 600; font-size: 0.94rem; transition: border-color .15s ease, background-color .15s ease; }
.fs-member-link:hover { border-color: var(--text); background: var(--surface); }
.fs-member-link svg { width: 16px; height: 16px; }
.fs-header .fs-button--quote { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--r); background: var(--action-bg); color: var(--action-fg); font-weight: 600; font-size: 0.94rem; transition: background-color .18s ease; }
.fs-header .fs-button--quote:hover { background: var(--action-hover); }
.fs-menu-toggle { display: none; }
.fs-header-call { display: none; }

/* Mega menu (content is rendered by Blade; chrome.js only opens and closes it) */
.fs-mega-overlay { position: fixed; inset: 0; z-index: 250; background: var(--scrim); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; }
.fs-mega-overlay.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
.fs-mega {
  position: absolute; left: 50%; top: 100%; z-index: 261;
  width: min(1120px, 100vw - 32px); max-height: calc(100vh - var(--header-h) - 24px); overflow: auto;
  transform: translate(-50%, 8px);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r-card) var(--r-card);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.fs-nav__item.is-open > .fs-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.fs-mega__inner { display: grid; grid-template-columns: minmax(220px, 0.8fr) minmax(0, 2fr) minmax(240px, 0.8fr); gap: 32px; padding: 32px; }
.fs-mega__inner:has(.fs-mega__aside[hidden]) { grid-template-columns: minmax(220px, 0.8fr) minmax(0, 2.4fr); }
.fs-mega__intro, .fs-mega__aside { display: flex; flex-direction: column; min-width: 0; }
.fs-eyebrow { display: block; margin-bottom: 14px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.fs-mega__intro h3, .fs-mega__aside h4 { font-size: 1.45rem; line-height: 1.15; letter-spacing: -0.015em; }
.fs-mega__intro p, .fs-mega__aside p { margin-top: 12px; color: var(--text-2); font-size: 0.94rem; line-height: 1.55; }
.fs-mega__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
.fs-mega__card { display: grid; align-content: start; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--canvas); transition: border-color .15s ease, background-color .15s ease; }
.fs-mega__card:hover, .fs-mega__card:focus-visible { border-color: var(--line-strong); background: var(--surface-2); }
.fs-mega__card--featured { border-color: var(--line-strong); }
.fs-mega__card--wide { grid-column: 1 / -1; }
.fs-mega__card-kicker { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 2px; }
.fs-mega__card-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
/* One short brand-blue badge per product in the menus (Simon, 7 Nov 2026). */
.fs-mega__badge, .fs-mobile__badge { display: inline-block; padding: 3px 8px; border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-size: 0.64rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.fs-mobile__badge { margin-left: 8px; vertical-align: 2px; }
.fs-mega__card-title { font-weight: 600; font-size: 0.98rem; color: var(--text); line-height: 1.3; }
.fs-mega__card-copy { color: var(--text-2); font-size: 0.92rem; line-height: 1.45; }
.fs-mega__aside { padding: 22px; border-radius: var(--r); background: var(--canvas); border: 1px solid var(--line); }
.fs-panel-button { display: inline-flex; align-items: center; justify-content: center; margin-top: 18px; min-height: 46px; padding: 0 14px; border-radius: var(--r); background: var(--action-bg); color: var(--action-fg); font-weight: 600; font-size: 0.94rem; width: 100%; white-space: nowrap; transition: background-color .18s ease; }
.fs-panel-button:hover { background: var(--action-hover); }

/* Mobile menu */
.fs-mobile { display: none; }
.fs-mobile__panel { width: min(var(--wrap), 100% - var(--gutter) * 2); margin: 0 auto 20px; padding: 6px 0 18px; border-top: 1px solid var(--line); max-height: calc(100dvh - var(--header-h)); overflow: auto; }
.fs-mobile__list { display: grid; }
.fs-mobile__item { border-bottom: 1px solid var(--line); }
.fs-mobile__trigger, .fs-mobile__link {
  appearance: none; border: 0; background: transparent; width: 100%; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 14px 0; color: var(--text); font-size: 1.2rem; font-weight: 600; text-align: left; letter-spacing: -0.01em;
}
.fs-mobile__link { border-bottom: 1px solid var(--line); }
.fs-mobile__link:last-of-type { border-bottom: 0; }
.fs-mobile__trigger .fs-caret { width: 9px; height: 9px; margin-right: 4px; }
.fs-mobile__item.is-open > .fs-mobile__trigger .fs-caret { transform: rotate(-135deg) translateY(-2px); }
.fs-mobile__submenu { display: none; padding: 0 0 16px; }
.fs-mobile__item.is-open > .fs-mobile__submenu { display: grid; gap: 2px; }
.fs-mobile__submenu a { display: block; min-height: 44px; padding: 10px 0 10px 14px; border-left: 1px solid var(--line); color: var(--text-2); font-size: 1rem; }
.fs-mobile__submenu a:hover { color: var(--text); border-left-color: var(--text); }
.fs-mobile__footer { display: grid; gap: 10px; margin-top: 20px; }
.fs-mobile__rics-foot { margin-bottom: 8px; }
.fs-mobile__rics-mark { width: 110px; height: auto; }
.fs-mobile__footer .fs-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border-radius: var(--r); font-weight: 600; }
.fs-mobile__footer .fs-button--quote { background: var(--action-bg); color: var(--action-fg); }
.fs-mobile__footer .fs-button--phone { border: 1.5px solid var(--line-strong); color: var(--text); }
body.fs-menu-is-open { overflow: hidden; }

/* 7. Footer (keeps .fs-footer__col > h3 "Support" + .fs-footer__links for chrome.js) */
.fs-footer { background: var(--canvas-deep); color: var(--text); border-top: 1px solid var(--line); }
.fs-footer__inner { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
.fs-footer__top { display: grid; grid-template-columns: 1.3fr 2fr 1fr; gap: clamp(28px, 4vw, 56px); padding: 48px 0 36px; }
.fs-footer__brand { display: grid; gap: 18px; align-content: start; }
.fs-footer__wordmark img { height: 28px; width: auto; }
.fs-footer__brand p { color: var(--text-2); font-size: 0.95rem; max-width: 28rem; }
.fs-footer__rics-lockup { display: grid; gap: 10px; }
.fs-footer__rics { width: 130px; height: auto; }
.fs-footer__rics-lockup span { color: var(--text-2); font-size: 0.85rem; }
.fs-footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.fs-footer__col h3, .fs-footer__contact h3 { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); margin-bottom: 16px; font-weight: 600; }
.fs-footer__links { display: grid; gap: 10px; }
.fs-footer__links a { display: inline-block; min-height: 24px; color: var(--text); opacity: .86; font-size: 0.95rem; }
.fs-footer__links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.fs-footer__contact { display: grid; gap: 0; align-content: start; }
.fs-footer__contact-row { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.fs-footer__contact-icon { width: 22px; height: 22px; margin-top: 4px; }
.fs-footer__contact-icon svg { width: 22px; height: 22px; }
.fs-footer__contact-row strong { display: block; font-size: 1.35rem; line-height: 1.1; letter-spacing: -0.01em; }
.fs-footer__contact-row[href^="tel:"] strong { font-size: 1.5rem; }
.fs-footer__contact-row span span { display: block; margin-top: 6px; color: var(--text-2); font-size: 0.9rem; }
.fs-footer__contact-divider { height: 1px; margin: 22px 0; background: var(--line); }
.fs-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 22px 0 30px; border-top: 1px solid var(--line); color: var(--text-2); font-size: 0.82rem; }
.fs-footer__bottom p { margin: 0; }
.fs-footer__bottom-right { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.fs-footer__socials { display: flex; gap: 8px; }
.fs-footer__socials a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--text); transition: border-color .15s ease; }
.fs-footer__socials a:hover { border-color: var(--text); }
.fs-footer__socials svg { width: 16px; height: 16px; }
.registered-mark { font-size: 0.6em; vertical-align: super; }

/* 7b. Slim footer for focused flows (quote journey, sign in, activation).
   The form is the end of the page: no site navigation to scroll past, only the legal line and help. */
body.flow-focused { min-height: 100dvh; display: flex; flex-direction: column; }
body.flow-focused > main { flex: 1 0 auto; }
.fs-footer--slim { border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--canvas) 0%, var(--canvas-deep) 100%); }
.fs-footer__slim { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(18px, 3vw, 40px); padding: 18px 0 22px; }
.fs-footer__slim-brand { display: flex; align-items: center; gap: 18px; }
.fs-footer__slim-brand .fs-footer__wordmark img { height: 22px; width: auto; opacity: .92; }
.fs-footer__slim-brand .fs-footer__rics { width: 100px; padding-left: 18px; border-left: 1px solid var(--line); }
.fs-footer__slim-legal { margin: 0; text-align: center; color: var(--text-2); font-size: 0.78rem; letter-spacing: 0.01em; line-height: 1.4; }
.fs-footer__slim-links { display: flex; align-items: center; gap: 4px; }
.fs-footer__slim-links a { padding: 6px 10px; border-radius: 999px; color: var(--text-2); font-size: 0.82rem; font-weight: 500; transition: color .15s ease, background-color .15s ease; }
.fs-footer__slim-links a:hover, .fs-footer__slim-links a:focus-visible { color: var(--text); background: var(--surface-2); }
.fs-footer__slim-links a:first-child { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .fs-footer__slim { grid-template-columns: 1fr auto; }
  .fs-footer__slim-legal { grid-column: 1 / -1; grid-row: 2; text-align: left; }
}
@media (max-width: 560px) {
  .fs-footer__slim { grid-template-columns: 1fr; gap: 12px; padding: 16px 0 20px; }
  .fs-footer__slim-links { margin-left: -10px; }
  .fs-footer__slim-legal { grid-row: auto; }
}
body.flow-focused .ms-mobile-cta { display: none; }

/* 8. Mobile quick-action bar + voice assistant ------------------------ */
.ms-mobile-cta { display: none; }
body #voice-assistant-root { font-family: var(--sans); }
/* Voice assistant: public/js/voice-assistant.js builds the markup ----------- */
/* The script renders the assistant in a shadow root on #voice-assistant-root and links this
   stylesheet inside it, so these rules style it on every layout (the members' area does not
   load flettons.css itself). Inside, :host is #voice-assistant-root. The --va-* colours are
   literal, not the page tokens, so light sections and the members' area cannot recolour it:
   it is always a dark card with a shimmering border that stands out on charcoal and on paper.
   The shimmer turns a registered angle (the script registers it too, as shadow roots ignore
   @property). Every animation stops under prefers-reduced-motion. */
@property --va-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
#voice-assistant-root, :host {
  --va-bg: #272c30;
  --va-bg-deep: #181b1e;
  --va-text: #f7f7f5;
  --va-text-2: #c4c9cc;
  --va-text-3: #a1a9ae;
  --va-line: #3d4448;
  --va-focus: #f7f7f5;
  --va-go: #2563eb;
  --va-go-hover: #1d5fd6;
  --va-stop: #d63636;
  --va-stop-hover: #e54545;
  --va-live: #6ea8fe;
  --va-error: #ffb3ad;
  --va-ring: rgba(247, 247, 245, 0.34);
  --va-sheen: rgba(247, 247, 245, 0.95);
  --va-sheen-2: rgba(140, 228, 182, 0.85);
  --va-blob-a: rgba(250, 250, 248, 0.85);
  --va-blob-b: rgba(178, 214, 226, 0.7);
  --va-font: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9999;
  font-family: var(--va-font);
}
.flettons-va-shell { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; color: var(--va-text); font-family: var(--va-font); font-size: 16px; line-height: 1.5; letter-spacing: normal; text-align: left; -webkit-font-smoothing: antialiased; }
.flettons-va-shell[data-state="connecting"], .flettons-va-shell[data-state="live"] { --va-ring: rgba(247, 247, 245, 0.42); --va-sheen: #fff; --va-sheen-2: rgba(110, 231, 160, 1); --va-blob-a: rgba(236, 240, 236, 0.6); --va-blob-b: rgba(92, 214, 150, 0.7); }
.flettons-va-shell[data-mode="speaking"] { --va-blob-a: rgba(250, 250, 248, 0.8); --va-blob-b: rgba(120, 222, 170, 0.8); }
.flettons-va-shell button { font-family: inherit; }

/* The panel: a tall rounded card that pops up from the launcher */
.flettons-va-panel {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(352px, calc(100vw - 28px));
  max-height: calc(100vh - 116px);
  max-height: calc(100dvh - 116px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 24px 18px;
  border: 2px solid transparent;
  border-radius: 28px;
  background:
    radial-gradient(120% 70% at 50% 0%, #2c3236 0%, rgba(44, 50, 54, 0) 62%) padding-box,
    linear-gradient(180deg, var(--va-bg) 0%, var(--va-bg-deep) 100%) padding-box,
    conic-gradient(from var(--va-angle), var(--va-ring) 0deg, var(--va-sheen) 40deg, var(--va-ring) 96deg, var(--va-ring) 180deg, var(--va-sheen-2) 220deg, var(--va-ring) 276deg, var(--va-ring) 360deg) border-box;
  box-shadow: 0 0 0 1px rgba(10, 12, 13, 0.6), 0 30px 70px -20px rgba(0, 0, 0, 0.8), 0 0 0 6px rgba(247, 247, 245, 0.04), 0 0 64px -16px rgba(247, 247, 245, 0.3);
  color: var(--va-text);
  text-align: center;
  transform-origin: calc(100% - 28px) calc(100% + 42px);
  animation: va-pop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.15) both, va-spin 8s linear infinite;
  scrollbar-width: thin;
}
.flettons-va-shell[data-state="connecting"] .flettons-va-panel, .flettons-va-shell[data-state="live"] .flettons-va-panel { animation-duration: 0.22s, 2.6s; box-shadow: 0 0 0 1px rgba(10, 12, 13, 0.6), 0 30px 70px -20px rgba(0, 0, 0, 0.8), 0 0 0 6px rgba(110, 231, 160, 0.06), 0 0 72px -12px rgba(110, 231, 160, 0.38); }
.flettons-va-panel > * { flex-shrink: 0; }
/* A soft glow behind the card that turns with its border, so it reads on charcoal.
   It covers the panel only: the 72px is the launcher (58px) plus the 14px gap. */
.flettons-va-shell.is-open::before { content: ""; position: absolute; z-index: -1; top: 0; right: 0; bottom: 72px; width: min(352px, calc(100vw - 28px)); border-radius: 28px; background: conic-gradient(from var(--va-angle), transparent 0deg, rgba(247, 247, 245, 0.9) 40deg, transparent 100deg, transparent 180deg, rgba(110, 231, 160, 0.9) 220deg, transparent 280deg, transparent 360deg); filter: blur(18px); opacity: 0.5; animation: va-glow-in 0.4s ease-out both, va-spin 8s linear infinite; pointer-events: none; }
.flettons-va-shell.is-open[data-state="connecting"]::before, .flettons-va-shell.is-open[data-state="live"]::before { animation-duration: 0.4s, 2.6s; --va-glow: 0.65; }
.flettons-va-title { margin: 0; color: var(--va-text); font-size: 1.5rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.flettons-va-intro { max-width: 28ch; margin: 8px 0 0; color: var(--va-text-2); font-size: 0.98rem; line-height: 1.45; text-wrap: pretty; }
.flettons-va-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 18px 0 0; }

/* The visual: an abstract voice orb (or a portrait, see CONFIG.visualImage) */
.flettons-va-visual { --va-level: 0; position: relative; display: grid; place-items: center; width: 116px; height: 116px; }
.flettons-va-portrait { display: block; width: 112px; height: 112px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(247, 247, 245, 0.14), 0 14px 32px -12px rgba(0, 0, 0, 0.8); }
.flettons-va-orb { position: relative; display: block; width: 92px; height: 92px; }
.flettons-va-orb > span { position: absolute; border-radius: 50%; }
.flettons-va-orb__halo { inset: -22px; background: radial-gradient(circle, var(--va-blob-b) 0%, transparent 68%); filter: blur(10px); opacity: calc(0.22 + var(--va-level) * 0.7); transform: scale(calc(0.86 + var(--va-level) * 0.3)); transition: transform 0.1s linear, opacity 0.1s linear; }
.flettons-va-orb__core { inset: 0; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 62%, #3a4449 0%, #1a1f22 80%); box-shadow: inset 0 0 0 1px rgba(247, 247, 245, 0.14), inset 0 -14px 26px rgba(0, 0, 0, 0.55), 0 18px 36px -14px rgba(0, 0, 0, 0.9); filter: brightness(calc(0.92 + var(--va-level) * 0.55)); transition: filter 0.1s linear; }
/* Two soft lights orbit inside the sphere; they brighten with the voice level */
.flettons-va-orb__core::before, .flettons-va-orb__core::after { content: ""; position: absolute; border-radius: 50%; filter: blur(17px); }
.flettons-va-orb__core::before { top: 6%; left: 8%; width: 60%; height: 60%; background: var(--va-blob-a); transform-origin: 70% 73%; animation: va-rotate 7s linear infinite; }
.flettons-va-orb__core::after { right: 6%; bottom: 6%; width: 62%; height: 62%; background: var(--va-blob-b); transform-origin: 27% 27%; animation: va-rotate 9.5s linear infinite reverse; }
.flettons-va-orb__shine { z-index: 1; top: 9%; left: 20%; width: 40%; height: 24%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0)); transform: rotate(-22deg); }
.flettons-va-shell[data-state="connecting"] .flettons-va-orb__core::before { animation-duration: 1.6s; }
.flettons-va-shell[data-state="connecting"] .flettons-va-orb__core::after { animation-duration: 2.2s; }
.flettons-va-shell[data-state="live"] .flettons-va-orb__core::before { animation-duration: 3.6s; }
.flettons-va-shell[data-state="live"] .flettons-va-orb__core::after { animation-duration: 4.8s; }
.flettons-va-shell[data-state="idle"] .flettons-va-orb, .flettons-va-shell[data-state="ended"] .flettons-va-orb, .flettons-va-shell[data-state="error"] .flettons-va-orb { animation: va-breathe 5.5s ease-in-out infinite; }

/* The call button: blue "Start call", red "End call"; the label sits under the disc */
.flettons-va-call { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; min-width: 132px; min-height: 44px; margin: 0; padding: 4px 10px 6px; border: 0; border-radius: 18px; background: none; color: var(--va-text); font-size: 1rem; font-weight: 600; line-height: 1.3; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.flettons-va-call__disc { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--va-go); color: #fff; box-shadow: 0 12px 26px -10px rgba(37, 99, 235, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.22); transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease; }
.flettons-va-call__disc svg { display: block; width: 30px; height: 30px; transition: transform 0.3s ease; }
.flettons-va-call:hover .flettons-va-call__disc { background: var(--va-go-hover); }
.flettons-va-call:active .flettons-va-call__disc { transform: scale(0.95); }
.flettons-va-call:focus-visible { outline: none; }
.flettons-va-call:focus-visible .flettons-va-call__disc { outline: 2px solid var(--va-focus); outline-offset: 4px; }
.flettons-va-shell[data-state="connecting"] .flettons-va-call__disc, .flettons-va-shell[data-state="live"] .flettons-va-call__disc { background: var(--va-stop); box-shadow: 0 12px 26px -10px rgba(214, 54, 54, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.flettons-va-shell[data-state="connecting"] .flettons-va-call:hover .flettons-va-call__disc, .flettons-va-shell[data-state="live"] .flettons-va-call:hover .flettons-va-call__disc { background: var(--va-stop-hover); }
.flettons-va-shell[data-state="connecting"] .flettons-va-call__disc svg, .flettons-va-shell[data-state="live"] .flettons-va-call__disc svg, .flettons-va-shell[data-state="ending"] .flettons-va-call__disc svg { transform: rotate(135deg); }
.flettons-va-shell[data-state="connecting"] .flettons-va-call__disc { animation: va-ring 1.3s ease-out infinite; }
.flettons-va-shell[data-state="ending"] .flettons-va-call { cursor: progress; }
.flettons-va-shell[data-state="ending"] .flettons-va-call__disc { background: #5b6368; box-shadow: none; }

.flettons-va-status { min-height: 2.9em; max-width: 34ch; margin: 12px 0 0; color: var(--va-text-2); font-size: 0.95rem; font-weight: 500; line-height: 1.45; text-wrap: pretty; }
.flettons-va-shell[data-state="live"] .flettons-va-status { color: var(--va-text); }
.flettons-va-status[data-tone="error"] { color: var(--va-error); }
.flettons-va-note { width: 100%; margin: 16px 0 0; padding: 12px 4px 0; border-top: 1px solid var(--va-line); color: var(--va-text-3); font-size: 0.82rem; line-height: 1.45; text-wrap: pretty; }
.flettons-va-note__link { color: var(--va-text); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.flettons-va-note__link:hover { text-decoration-thickness: 2px; }

/* The launcher: a dark disc with the same shimmer ring; red and pulsing during a call */
.flettons-va-launcher { position: relative; display: grid; place-items: center; width: 58px; height: 58px; margin: 0; padding: 0; border: 2px solid transparent; border-radius: 50%; background: linear-gradient(180deg, #2a3034 0%, #181b1e 100%) padding-box, conic-gradient(from var(--va-angle), var(--va-ring) 0deg, var(--va-sheen) 30deg, var(--va-ring) 70deg, var(--va-ring) 180deg, var(--va-sheen-2) 214deg, var(--va-ring) 254deg, var(--va-ring) 360deg) border-box; color: var(--va-text); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(10, 12, 13, 0.5); cursor: pointer; animation: va-spin 8s linear 2; transition: transform 0.15s ease; -webkit-tap-highlight-color: transparent; }
.flettons-va-launcher:hover { transform: translateY(-1px); }
.flettons-va-launcher:focus-visible { outline: 3px solid #171a1c; outline-offset: 2px; box-shadow: 0 0 0 2px #f7f7f5, 0 14px 30px -10px rgba(0, 0, 0, 0.75); }
.flettons-va-launcher__icon { display: grid; place-items: center; }
.flettons-va-launcher svg { display: block; width: 24px; height: 24px; }
.flettons-va-launcher__icon--live, .flettons-va-launcher__icon--close { display: none; }
.flettons-va-shell[data-state="connecting"] .flettons-va-launcher, .flettons-va-shell[data-state="live"] .flettons-va-launcher { background: linear-gradient(180deg, #e04444 0%, #b92b2b 100%) padding-box, linear-gradient(#f7f7f5, #f7f7f5) border-box; color: #fff; animation: va-pulse 1.8s ease-out infinite; }
.flettons-va-shell[data-state="connecting"] .flettons-va-launcher__icon--mic, .flettons-va-shell[data-state="live"] .flettons-va-launcher__icon--mic { display: none; }
.flettons-va-shell[data-state="connecting"] .flettons-va-launcher__icon--live, .flettons-va-shell[data-state="live"] .flettons-va-launcher__icon--live { display: grid; }
/* While the panel is open the launcher is a plain "close" toggle, so it never looks like a second End call */
.flettons-va-shell.is-open .flettons-va-launcher { background: linear-gradient(180deg, #2a3034 0%, #181b1e 100%) padding-box, conic-gradient(from var(--va-angle), var(--va-ring) 0deg, var(--va-sheen) 30deg, var(--va-ring) 70deg, var(--va-ring) 180deg, var(--va-sheen-2) 214deg, var(--va-ring) 254deg, var(--va-ring) 360deg) border-box; color: var(--va-text); animation: va-spin 8s linear infinite; }
.flettons-va-shell.is-open .flettons-va-launcher__icon { display: none; }
.flettons-va-shell.is-open .flettons-va-launcher__icon--close { display: grid; }
/* Closed during a call: a moving sound wave, not a second phone icon */
.flettons-va-shell[data-state="live"]:not(.is-open) .flettons-va-launcher svg path { animation: va-wave 1.1s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.flettons-va-shell[data-state="live"]:not(.is-open) .flettons-va-launcher svg path:nth-child(2n) { animation-delay: -0.4s; }

/* Minimise: top of the panel; the call carries on with the panel tucked away */
.flettons-va-minimise { align-self: flex-end; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; margin: -10px -12px 4px 0; padding: 4px 10px 4px 8px; border: 1px solid var(--va-line); border-radius: 999px; background: rgba(247, 247, 245, 0.06); color: var(--va-text-2); font-size: 0.85rem; font-weight: 600; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.flettons-va-minimise svg { width: 18px; height: 18px; }
.flettons-va-minimise:hover { color: var(--va-text); background: rgba(247, 247, 245, 0.12); }
.flettons-va-minimise:focus-visible { outline: 2px solid var(--va-focus); outline-offset: 2px; }
/* Minimised during a call: a small "On call" tag beside the red button */
.flettons-va-oncall { display: none; position: absolute; right: 68px; bottom: 13px; align-items: center; gap: 8px; min-height: 32px; margin: 0; padding: 0 12px; border: 1px solid rgba(247, 247, 245, 0.18); border-radius: 999px; background: rgba(24, 27, 30, 0.94); color: var(--va-text); font-size: 0.82rem; font-weight: 600; white-space: nowrap; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.8); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.flettons-va-oncall__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--va-stop); animation: va-blink 1.4s ease-in-out infinite; }
.flettons-va-shell[data-state="connecting"]:not(.is-open) .flettons-va-oncall, .flettons-va-shell[data-state="live"]:not(.is-open) .flettons-va-oncall { display: inline-flex; }
@keyframes va-blink { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .flettons-va-oncall__dot { animation: none; } }

@keyframes va-pop { from { opacity: 0; transform: translateY(12px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes va-spin { to { --va-angle: 360deg; } }
@keyframes va-rotate { to { transform: rotate(360deg); } }
@keyframes va-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes va-glow-in { from { opacity: 0; } to { opacity: var(--va-glow, 0.5); } }
@keyframes va-wave { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.55); } }
@keyframes va-ring { 0% { box-shadow: 0 0 0 0 rgba(214, 54, 54, 0.6); } 100% { box-shadow: 0 0 0 16px rgba(214, 54, 54, 0); } }
@keyframes va-pulse { 0% { box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.75), 0 0 0 0 rgba(214, 54, 54, 0.6); } 70%, 100% { box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.75), 0 0 0 14px rgba(214, 54, 54, 0); } }

/* Contact page hand-off (light DOM, not in the shadow root) */
.flettons-voice-message { margin: 0 0 16px; padding: 16px 18px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--text); font-weight: 600; }
.flettons-voice-highlight { position: relative; outline: 2px solid var(--focus); outline-offset: 8px; }
/* Keeps the footer's last links clear of the launcher on phones (light DOM) */
@media (max-width: 820px) {
  body.has-flettons-voice-assistant .fs-footer__bottom { padding-bottom: 104px; }
}

@media (max-width: 820px) {
  #voice-assistant-root, :host { right: 14px; bottom: 14px; }
  .flettons-va-panel { width: min(352px, calc(100vw - 28px)); max-height: calc(100dvh - 176px); }
}
/* Short screens: the orb sits to the left of the call button so the card stays compact */
@media (max-height: 700px) {
  .flettons-va-panel { padding: 18px 20px 14px; }
  .flettons-va-title { font-size: 1.3rem; }
  .flettons-va-stage { flex-direction: row; align-items: flex-start; justify-content: center; gap: 18px; margin-top: 14px; }
  .flettons-va-visual { width: 84px; height: 84px; margin-top: -6px; }
  .flettons-va-orb { width: 66px; height: 66px; }
  .flettons-va-orb__halo { inset: -12px; }
  .flettons-va-portrait { width: 76px; height: 76px; }
  .flettons-va-call { min-width: 104px; padding-inline: 4px; }
  .flettons-va-call__disc { width: 64px; height: 64px; }
  .flettons-va-status { margin-top: 10px; }
  .flettons-va-note { margin-top: 12px; padding-top: 10px; font-size: 0.8rem; }
}
/* Very short screens (e.g. 320x568 with the quick-action bar): tighter still, so nothing scrolls */
@media (max-height: 600px) {
  .flettons-va-panel { padding: 14px 18px 10px; }
  .flettons-va-title { font-size: 1.2rem; }
  .flettons-va-intro { margin-top: 4px; font-size: 0.9rem; line-height: 1.35; }
  .flettons-va-stage { margin-top: 10px; }
  .flettons-va-status { margin-top: 6px; font-size: 0.9rem; line-height: 1.35; min-height: 2.7em; }
  .flettons-va-note { margin-top: 8px; padding-top: 8px; font-size: 0.76rem; line-height: 1.35; }
}
@media (max-width: 359px) {
  .flettons-va-panel { padding-inline: 16px; }
  .flettons-va-title { font-size: 1.25rem; }
}
/* In the members' area the stylesheet is only inside the shadow root, where :host is the root */
@media print {
  :host { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .flettons-va-shell, .flettons-va-shell::before, .flettons-va-shell *, .flettons-va-shell *::before, .flettons-va-shell *::after { animation: none !important; transition: none !important; }
}

/* 8b. App store badges: Apple's and Google's artwork at one height, never recoloured or cropped */
.app-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.app-badges__badge { display: inline-block; border-radius: 8px; }
.app-badges__badge img { height: 48px; width: auto; }
.app-badges__soon { white-space: nowrap; }
.hx .app-badges { justify-content: center; margin-top: 20px; }
.plus-hero-badges { margin-top: 20px; }
.pl__access .app-badges { margin-top: 14px; }

/* 9. Video cards + modal (markup rendered by site-video-cards.js) ------- */
.inspection-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.inspection-card--offset { margin: 0; }
.inspection-card__media { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-card); overflow: hidden; cursor: pointer; aspect-ratio: 4 / 3; }
.inspection-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.inspection-card__media:hover img { transform: scale(1.03); }
.inspection-card__media img[src*="Flettons Flettons Logo"], .inspection-card__media img[src*="Flettons%20Flettons%20Logo"] { object-fit: contain; padding: 22%; opacity: .3; }
.inspection-card__tag { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 5px 10px; border-radius: 999px; background: var(--scrim); color: var(--text); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.inspection-card__tag:empty { display: none; }
.inspection-card__play { position: absolute; left: 50%; top: 0; z-index: 3; width: 56px; height: 56px; margin-top: calc(37.5% - 28px); padding: 0 0 0 4px; border: 0; border-radius: 50%; background: var(--action-bg); color: var(--action-fg); font-size: 1.05rem; cursor: pointer; transform: translateX(-50%); transition: background-color .15s ease; }
.inspection-card__play:hover { background: var(--action-hover); }
.inspection-card__body { padding-top: 14px; display: grid; gap: 6px; }
.inspection-card__body h3 { font-weight: 600; font-size: 1rem; line-height: 1.35; color: inherit; }
.inspection-card__body p { color: var(--text-2); font-size: 0.96rem; line-height: 1.45; }
.inspection-card__body a { margin-top: 4px; color: var(--text); font-weight: 600; font-size: 0.9rem; display: inline-flex; gap: 6px; }
.inspection-card__body a:hover { text-decoration: underline; text-underline-offset: 4px; }

.inspection-video-modal { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 24px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; }
.inspection-video-modal[hidden] { display: none; }
.inspection-video-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.inspection-video-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.78); }
.inspection-video-modal__dialog { position: relative; z-index: 1; width: min(980px, 100%); background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6); }
.inspection-video-modal__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 24px 26px 18px; }
.inspection-video-modal__eyebrow { display: block; margin-bottom: 8px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.inspection-video-modal__header h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); }
.inspection-video-modal__header p { margin-top: 8px; color: var(--text-2); font-size: 0.95rem; max-width: 40rem; }
.inspection-video-modal__close { flex: 0 0 auto; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; color: var(--text); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.inspection-video-modal__close:hover { border-color: var(--text); }
.inspection-video-modal__frame { margin: 0 18px 18px; border-radius: var(--r); overflow: hidden; background: #000; }
.inspection-video-modal__frame video, .inspection-video-modal__frame iframe.inspection-video-modal__embed { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.inspection-video-modal__frame > p { padding: 32px; color: var(--text-2); }
body.inspection-video-is-open { overflow: hidden; }


/* Card heads keep one pill-high row, empty or not, so card titles line up across a row */
@media (min-width: 720px) { .level__top, .level-card__head, .g-tier__head, .g-level__head { min-height: 28px; } }

/* 11. Shared blocks ---------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.step { padding: 30px 28px 8px 0; border-right: 1px solid var(--line); margin-right: 28px; }
.step:last-child { border-right: 0; margin-right: 0; }
.step__n { display: block; font-size: 2.2rem; font-weight: 700; line-height: 1; color: var(--text-2); margin-bottom: 22px; letter-spacing: -0.02em; }
.step h3 { font-size: 1.2rem; margin-bottom: 12px; }
.step p { color: var(--text-2); font-size: 1rem; }
.step__note { display: inline-block; margin-top: 16px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }

.quote { margin: 0 auto; max-width: 60rem; text-align: center; }
.quote p { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.6rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; text-wrap: balance; }
.quote footer { margin-top: 24px; color: var(--text-2); font-size: 0.95rem; }
.quote footer strong { color: var(--text); margin-right: 10px; }
.reviews { display: grid; grid-template-columns: 1fr 1fr 0.8fr; gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.reviews--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reviews-more { margin-top: 36px; text-align: center; color: var(--text-2); }
.review { padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); display: grid; gap: 14px; align-content: start; }
.review p { font-size: 1rem; color: var(--text); }
.review footer { color: var(--text-2); font-size: 0.94rem; text-wrap: pretty; }
.review footer strong { color: var(--text); margin-right: 8px; }
.review--score { background: var(--canvas-deep); border-color: var(--line-strong); }
.review--score p { color: var(--text-2); }
.review .review__big { font-size: 3.6rem; font-weight: 700; line-height: 1; color: var(--text); letter-spacing: -0.03em; }

.cta { position: relative; isolation: isolate; padding: clamp(56px, 7vw, 88px) 0; color: var(--text); background: var(--canvas-deep); overflow: hidden; border-top: 1px solid var(--line); }
.cta__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(18, 20, 22, 0.96) 0%, rgba(18, 20, 22, 0.78) 55%, rgba(18, 20, 22, 0.45) 100%); }
.cta__in { max-width: 44rem; }
.cta h2 { margin-bottom: 18px; }
.cta p { font-size: 1.05rem; color: var(--text-2); text-wrap: pretty; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Icons (bespoke sprite via <x-site.icon>) */
.icon { display: inline-block; flex: none; vertical-align: middle; width: 24px; height: 24px; --icon-accent: var(--text); }
.icon-tile { display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--text); }
.icon-tile .icon { width: 24px; height: 24px; }

/* Inner-page hero */
.page-hero { position: relative; isolation: isolate; background: var(--canvas-deep); color: var(--text); overflow: hidden; border-bottom: 1px solid var(--line); }
.page-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(18, 20, 22, 0.95) 0%, rgba(18, 20, 22, 0.86) 40%, rgba(18, 20, 22, 0.4) 68%, rgba(18, 20, 22, 0.12) 100%), linear-gradient(0deg, rgba(18, 20, 22, 0.9) 0%, rgba(18, 20, 22, 0) 30%); }
.page-hero__in { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; padding: clamp(32px, 4.5vw, 56px) 0 clamp(32px, 4.5vw, 52px); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr); gap: 28px 56px; align-items: end; }
/* Heroes whose photo carries detail near the copy (a shirt logo on the about photo): the tint holds further across on desktop */
.page-hero--portrait::before { background: linear-gradient(90deg, rgba(18, 20, 22, 0.97) 0%, rgba(18, 20, 22, 0.975) 60%, rgba(18, 20, 22, 0.5) 78%, rgba(18, 20, 22, 0.15) 100%), linear-gradient(0deg, rgba(18, 20, 22, 0.9) 0%, rgba(18, 20, 22, 0) 30%); }
.page-hero__copy { max-width: 46rem; }
.page-hero__lead { margin-top: 16px; max-width: 36rem; font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem); line-height: 1.55; color: var(--text-2); }
.page-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.page-hero__meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; font-size: 0.94rem; color: var(--text-2); }
.page-hero__meta li { display: inline-flex; align-items: flex-start; gap: 10px; }
.page-hero__meta li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 0.62em; margin-top: calc((1lh - 5px) / 2); border-radius: 50%; background: var(--text-2); }
.page-hero__aside { display: grid; gap: 12px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-card); background: rgba(33, 37, 40, 0.82); backdrop-filter: blur(14px); }
.page-hero__aside .eyebrow { margin-bottom: 2px; }
.page-hero__aside dl { margin: 0; display: grid; gap: 12px; }
.page-hero__aside dt { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.page-hero__aside dd { margin: 2px 0 0; font-weight: 500; }
.page-hero__aside .price { font-size: 1.9rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.page-hero__aside .price-label { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); font-weight: 600; margin-right: 8px; }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; font-size: 0.85rem; color: var(--text-2); }
.crumbs a { position: relative; display: inline-block; }
.crumbs a::before { content: ""; position: absolute; inset: -12px -6px; }
.crumbs a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .5; }

/* One compact reassurance strip (replaces repeated stat bars) */
.trust { background: var(--canvas); border-bottom: 1px solid var(--line); }
.trust__in { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 28px; padding: 8px 0; }
.trust__item { display: inline-flex; gap: 10px; align-items: center; min-height: 40px; font-size: 0.9rem; color: var(--text-2); }
.trust__item strong { font-weight: 600; color: var(--text); }
.trust__item img { height: 40px; width: auto; }
.trust__item .icon { width: 18px; height: 18px; color: var(--text-2); }

.prose { max-width: 42rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); margin-top: 1.6em; }
.prose h3 { font-size: 1.2rem; margin-top: 1.6em; }
.prose p, .prose li { color: var(--text-2); }
.prose strong { color: var(--text); font-weight: 600; }
.prose ul, .prose ol { display: grid; gap: 10px; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 14px; height: 8px; border-left: 2px solid var(--text); border-bottom: 2px solid var(--text); transform: rotate(-45deg) translateY(-2px); }
.prose ol { counter-reset: n; }
.prose ol li { position: relative; padding-left: 40px; counter-increment: n; }
.prose ol li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 0.1em; font-size: 1rem; font-weight: 600; color: var(--text); }
.prose a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.split--sticky > :first-child { position: sticky; top: calc(var(--header-h) + 24px); }
.split--center { align-items: center; }
.split__img { width: 100%; border-radius: var(--r-card); object-fit: cover; border: 1px solid var(--line); }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.features--4 { grid-template-columns: repeat(4, 1fr); }
.features--2 { grid-template-columns: repeat(2, 1fr); }
.feature { display: grid; gap: 14px; align-content: start; padding: 26px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.feature h3 { font-size: 1.1rem; }
.feature p { color: var(--text-2); font-size: 1rem; }

.spec { display: grid; border-top: 1px solid var(--line-strong); }
.spec__row { display: grid; grid-template-columns: minmax(180px, 0.6fr) 1fr; gap: 12px 32px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.spec__row dt { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.spec__row dd { margin: 0; color: var(--text-2); }
.spec--2col { grid-template-columns: repeat(2, 1fr); column-gap: 48px; }

.checks { display: grid; gap: 12px; }
.checks--2 { grid-template-columns: repeat(2, 1fr); gap: 12px 32px; }
.checks li { position: relative; padding-left: 30px; }
/* An 18px circle whose centre is at (9px, 0.2em + 9px); the tick is an 8x4 box placed on that centre, then rotated. */
.checks li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); }
.checks li::after { content: ""; position: absolute; left: 9px; top: calc(0.2em + 9px); width: 8px; height: 4px; border-left: 2px solid var(--text); border-bottom: 2px solid var(--text); transform: translate(-50%, -50%) translateY(-1px) rotate(-45deg); transform-origin: center; }

.aside-card { display: grid; gap: 14px; align-content: start; padding: 28px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.aside-card h3 { font-size: 1.4rem; line-height: 1.15; }
.aside-card p { color: var(--text-2); font-size: 0.98rem; }
.aside-card .btn { margin-top: 8px; }

.faq { display: grid; border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 56px; padding: 18px 0; font-weight: 600; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 1.5px solid var(--text); border-bottom: 1.5px solid var(--text); transform: rotate(45deg); transition: transform .2s ease; margin-right: 4px; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > :not(summary) { padding: 0 0 22px; color: var(--text-2); max-width: 44rem; }

.compare { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.compare th, .compare td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare thead th { position: sticky; top: var(--header-h); z-index: 2; background: var(--canvas); border-bottom: 1px solid var(--line-strong); font-weight: 700; font-size: 1.1rem; }
.compare thead th:first-child { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); font-weight: 600; vertical-align: bottom; }
.compare tbody th { font-weight: 500; color: var(--text); }
.compare td { text-align: center; color: var(--text-2); }
.compare .is-featured { background: var(--surface); }
.compare thead .is-featured { background: var(--surface); color: var(--text); }
.compare .yes, .compare .no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.compare .yes { background: var(--action-bg); color: var(--action-fg); }
.compare .no { background: var(--surface-3); color: var(--text-2); }
.compare .yes::before { content: ""; width: 11px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translateY(-1px); }
.compare .no::before { content: "–"; font-weight: 600; line-height: 1; }
.compare-wrap { position: relative; overflow-x: auto; }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.stat-row > div { padding: 24px 28px 28px 0; }
.stat-row > div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.stat-row dt { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.stat-row dd { margin: 8px 0 0; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.8rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--surface); transition: border-color .15s ease; }
.card:hover { border-color: var(--line-strong); }
.card__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card__body { display: grid; gap: 10px; align-content: start; padding: 22px; }
.card__body h3 { font-size: 1.12rem; }
.card__body p { color: var(--text-2); font-size: 1rem; }

/* Forms */
.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label, .field__label { font-size: 0.92rem; font-weight: 600; }
.field label span { margin-left: 4px; font-weight: 400; color: var(--text-2); }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea, .admin-main :where(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea) {
  width: 100%; min-height: 50px; padding: 12px 14px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r);
  background: var(--canvas); color: var(--text); font: inherit; font-size: 1rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder, .field textarea::placeholder, .admin-main ::placeholder { color: var(--text-3); }
.field textarea { min-height: 130px; resize: vertical; }
.field select, .admin-main select:not([multiple]) { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--text) 50%), linear-gradient(135deg, var(--text) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.field input:not([type="checkbox"]):not([type="radio"]):focus, .field select:focus, .field textarea:focus, .admin-main :where(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea):focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px var(--focus-ring); }
.field input:not([type="checkbox"]):not([type="radio"])[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--danger); }
.field__error { font-size: 0.88rem; color: var(--danger); font-weight: 500; }
.field__hint { font-size: 0.92rem; color: var(--text-2); }
.form__note { font-size: 0.92rem; color: var(--text-2); }
.notice ul { margin-top: 6px; padding-left: 20px; list-style: disc; }
.notice:empty { display: none; }
.notice { padding: 14px 18px; border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-weight: 500; }
.notice a { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.notice a:hover { text-decoration-color: currentColor; }
.notice--error, .notice[data-tone="negative"], .notice[data-covered="false"] { border-color: var(--danger); }
.notice--ok, .notice[data-tone="success"], .notice[data-tone="positive"], .notice[data-covered="true"] { border-color: var(--ok); }
.notice[data-tone="warning"] { border-color: var(--warn); }
.error-summary { padding: 16px 18px; border: 1.5px solid var(--danger); border-radius: var(--r); background: var(--surface); }
.error-summary h2 { font-size: 1.05rem; margin-bottom: 8px; }
.error-summary ul { display: grid; gap: 4px; }
.error-summary a { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }

/* Choice cards and chips (radio / checkbox as whole-row controls) */
.choice { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; min-height: 56px; padding: 14px 16px; border: 1.5px solid var(--line-strong); border-radius: var(--r); background: var(--surface); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.choice:hover { border-color: var(--text); }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice__mark { width: 22px; height: 22px; border: 1.5px solid var(--line-strong); border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--canvas); }
.choice--check .choice__mark { border-radius: 5px; }
.choice__mark::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--action-bg); transform: scale(0); transition: transform .12s ease; }
.choice--check .choice__mark::after { width: 10px; height: 5px; border-radius: 0; border-left: 2px solid var(--action-fg); border-bottom: 2px solid var(--action-fg); background: transparent; transform: rotate(-45deg) scale(0); margin-top: -3px; }
.choice input:checked ~ .choice__mark::after { transform: scale(1); }
.choice--check input:checked ~ .choice__mark { background: var(--action-bg); border-color: var(--action-bg); }
.choice--check input:checked ~ .choice__mark::after { transform: rotate(-45deg) scale(1); }
.choice input:checked ~ * { }
.choice:has(input:checked) { border-color: var(--text); background: var(--surface-2); }
.choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.choice__body { display: grid; gap: 2px; min-width: 0; }
.choice__title { font-weight: 600; line-height: 1.3; }
.choice__hint { font-size: 0.94rem; color: var(--text-2); line-height: 1.4; }
.choice__price { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.choice--disabled { opacity: .6; cursor: not-allowed; }
.choice--disabled:hover { border-color: var(--line-strong); }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-row--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.chip-row--grid .chip { justify-content: center; text-align: center; padding-inline: 12px; }
@media (max-width: 560px) { .chip-row--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .chip-row--grid .chip:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.chip { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--r); background: var(--surface); font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip:hover { border-color: var(--text); }
.chip:has(input:checked), .chip[aria-current] { background: var(--action-bg); color: var(--action-fg); border-color: var(--action-bg); }
.chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Status pills */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); background: var(--surface); }
.pill--solid { background: var(--action-bg); color: var(--action-fg); border-color: var(--action-bg); }
.pill--ok { color: var(--ok); border-color: rgba(37, 99, 235, 0.5); }
.pill--warn { color: var(--warn); border-color: rgba(232, 193, 90, 0.5); }
.pill--danger { color: var(--danger); border-color: rgba(255, 123, 123, 0.5); }
.spinner { flex: none; width: 24px; height: 24px; border: 2.5px solid var(--text-2); border-right-color: transparent; border-radius: 50%; animation: fs-spin .9s linear infinite; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-2); flex: none; }
.status-dot--ok { background: var(--ok); }

/* Four-stage customer stepper (shared by every quote screen) */
.stepper { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; }
.stepper__item { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 12px 10px 0; color: var(--text-2); font-size: 0.92rem; font-weight: 500; line-height: 1.25; }
.stepper__item + .stepper__item::before { content: ""; flex: none; width: 28px; height: 1px; background: var(--line); margin-right: 10px; }
.stepper__dot { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1.5px solid var(--line-strong); border-radius: 50%; font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); background: var(--canvas); }
.stepper__item.is-active { color: var(--text); font-weight: 600; }
.stepper__item.is-active .stepper__dot { border-color: var(--text); background: var(--action-bg); color: var(--action-fg); }
.stepper__item.is-complete { color: var(--text); }
.stepper__item.is-complete .stepper__dot { border-color: var(--ok); background: var(--ok); color: var(--ok-ink); text-indent: -999px; overflow: hidden; position: relative; }
.stepper__item.is-complete .stepper__dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 5px; border-left: 2px solid var(--ok-ink); border-bottom: 2px solid var(--ok-ink); transform: translate(-50%, -65%) rotate(-45deg); text-indent: 0; }
.stepper__item a { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }
.stepper__item a:hover { text-decoration-color: currentColor; }
.stepper__compact { display: none; }

/* 12. Responsive ------------------------------------------------------- */
@media (max-width: 1279px) {
  .fs-nav, .fs-header__actions { display: none; }
  .fs-header__inner { grid-template-columns: auto 1fr auto; }
  .fs-header-call { display: inline-grid; place-items: center; justify-self: end; width: 46px; height: 46px; border: 1px solid var(--line-strong); border-radius: var(--r); color: var(--text); }
  .fs-header-call svg { width: 18px; height: 18px; }
  .fs-menu-toggle { display: inline-grid; place-items: center; justify-self: end; width: 46px; height: 46px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r); background: transparent; color: var(--text); cursor: pointer; }
  .fs-menu-toggle > span:not(.fs-menu-toggle__bars) { display: none; }
  .fs-menu-toggle__bars { position: relative; display: block; width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; transition: background-color .15s ease; }
  .fs-menu-toggle__bars span { display: none; }
  .fs-menu-toggle[aria-expanded="true"] .fs-menu-toggle__bars { background: transparent; box-shadow: none; }
  .fs-menu-toggle[aria-expanded="true"] .fs-menu-toggle__bars::before, .fs-menu-toggle[aria-expanded="true"] .fs-menu-toggle__bars::after { content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 2px; background: var(--text); }
  .fs-menu-toggle[aria-expanded="true"] .fs-menu-toggle__bars::before { transform: rotate(45deg); }
  .fs-menu-toggle[aria-expanded="true"] .fs-menu-toggle__bars::after { transform: rotate(-45deg); }
  .fs-mobile { display: block; }
  .fs-footer__top { grid-template-columns: 1fr 1fr; }
  .fs-footer__nav { grid-column: 1 / -1; }
  .sec__head--split { grid-template-columns: 1fr; align-items: start; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(2) { border-right: 0; margin-right: 0; }
  .reviews { grid-template-columns: 1fr 1fr; }
  .page-hero__in { grid-template-columns: 1fr; align-items: start; }
  .features, .features--4 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split--sticky > :first-child { position: static; }
  .spec--2col { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .stat-row > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat-row > div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  /* Inner-page hero on phones and small tablets: the copy runs the full width, so the photo sits
     only behind the top of the hero and fades to solid charcoal before the paragraph and buttons. */
  .page-hero__bg { height: min(420px, 100%); object-position: center 38%; }
  .page-hero::before { background: linear-gradient(180deg, rgba(18, 20, 22, 0.66) 0, rgba(18, 20, 22, 0.8) 150px, rgba(18, 20, 22, 0.94) 270px, rgb(18, 20, 22) 400px); }
  :root { --header-h: 60px; }
  body { font-size: 1rem; }
  .trust__in { gap: 8px 20px; }
  .features, .features--4, .features--2, .checks--2, .cards, .choice-grid { grid-template-columns: 1fr; }
  .spec__row { grid-template-columns: 1fr; gap: 6px; }
  .form__row { grid-template-columns: 1fr; }
  .compare th, .compare td { padding: 12px 10px; font-size: 0.9rem; }
  .compare thead th { font-size: 1rem; top: 0; }
  .page-hero__cta .btn, .cta__actions .btn { width: 100%; }
  .fs-brand img { height: 24px; }
  .fs-footer__top { grid-template-columns: 1fr; gap: 28px; padding: 48px 0 36px; }
  /* Phones: Surveys on the left, Company and Support stacked on the right (Simon, 7 Nov 2026) */
  .fs-footer__nav { grid-template-columns: 1fr 1fr; grid-template-areas: "surveys company" "surveys support"; gap: 26px 20px; }
  .fs-footer__nav > .fs-footer__col:nth-child(1) { grid-area: surveys; }
  .fs-footer__nav > .fs-footer__col:nth-child(2) { grid-area: company; }
  .fs-footer__nav > .fs-footer__col:nth-child(3) { grid-area: support; }
  .fs-footer__links { gap: 12px; }
  .fs-footer__links a { font-size: .92rem; line-height: 1.3; }
  .fs-footer__bottom { flex-direction: column; align-items: flex-start; }
  .sec { padding: clamp(32px, 8vw, 44px) 0; }
  .steps { grid-template-columns: 1fr; }
  .step { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--line); padding: 24px 0; }
  .step:last-child { border-bottom: 0; }
  .reviews { grid-template-columns: 1fr; }
  .cta { padding: 48px 0; }
  body:not(.flow-focused):has(.ms-mobile-cta) { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .ms-mobile-cta { position: fixed; inset: auto 0 0; z-index: 240; display: grid; grid-template-columns: 1fr; gap: 10px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: rgba(23, 26, 28, 0.96); border-top: 1px solid var(--line); backdrop-filter: blur(12px); transition: transform .25s ease; }
  /* Home page: the hero already has the postcode box, so the bar slides in only once it has scrolled away */
  html.hero-quote-visible .ms-mobile-cta { transform: translateY(110%); pointer-events: none; }
  html.hero-quote-visible body:has(.ms-mobile-cta) #voice-assistant-root { bottom: 14px !important; }
  .ms-mobile-cta a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 18px; border-radius: var(--r); font-weight: 600; font-size: 0.96rem; }
  .ms-mobile-cta__quote { background: var(--action-bg); color: var(--action-fg); }
  body:has(.fs-menu-toggle[aria-expanded="true"]) .ms-mobile-cta { display: none; }
  body:has(.fs-menu-toggle[aria-expanded="true"]) #voice-assistant-root { display: none; }
  body:has(.ms-mobile-cta) #voice-assistant-root { bottom: 82px !important; }
  .inspection-video-modal { padding: 12px; }
  /* Five steps on a phone: small dots, short connectors, only the active label and never a wrap. */
  .stepper { display: flex; gap: 4px; align-items: center; }
  .stepper__item { padding: 6px 0; gap: 8px; font-size: 0.86rem; white-space: nowrap; }
  .stepper__item + .stepper__item::before { width: 10px; margin-right: 4px; }
  .stepper__dot { width: 26px; height: 26px; font-size: 0.78rem; }
  .stepper__item:not(.is-active) > span:last-child, .stepper__item:not(.is-active) > a { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .stepper__compact { display: none; }
}

@media (max-width: 400px) {
  .fs-header__inner { gap: 12px; }
  .btn, .btn--lg { padding-inline: 16px; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .btn__arrow, .inspection-card__media img, .fs-mega, .fs-caret, .choice, .chip, .choice__mark::after { transition: none; }
  .btn[aria-busy="true"]::after { animation: none; }
}

@media print {
  .fs-header, .fs-footer, .ms-mobile-cta, #voice-assistant-root, .cta { display: none !important; }
  body { background: #fff; color: #000; }
}

/* 13. Account and status screens ------------------------------------- */
.account { padding: clamp(32px, 5vw, 64px) 0; }
.account__in { display: grid; gap: 24px; justify-content: center; justify-items: center; }
.account-card { width: min(520px, 100%); display: grid; gap: 18px; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.account-card__title { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
.account-card .lead { font-size: 1.02rem; }
.account-card__foot { font-size: 0.94rem; color: var(--text-2); }
.account-card__foot a { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.account--full { display: grid; align-items: center; min-height: 100vh; min-height: 100dvh; background: radial-gradient(90% 60% at 50% 0%, var(--surface) 0%, var(--canvas) 70%); }
.account__brand img { height: 28px; width: auto; }
.account-card--compact { width: min(400px, 100%); gap: 20px; padding: clamp(24px, 6vw, 32px); box-shadow: 0 40px 80px -48px rgba(0, 0, 0, 0.9); }
.account-card--compact .account-card__title { font-size: 1.6rem; }
.account-card__seal { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.account-card__seal img { height: 30px; width: auto; }
.status { display: grid; align-items: center; padding: clamp(48px, 6vw, 88px) 0; }
.status__in { max-width: 44rem; }
.status__in h1 { margin-top: 0; }
.status__in .lead { margin-top: 18px; }
.status__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (max-width: 820px) { .status__actions .btn { width: 100%; } }
/* ==========================================================================
   Shared page blocks: one definition for every page that uses them (survey and
   service pages, guidance, proof and company pages, the quote journey).
   ========================================================================== */
/* Running copy breaks evenly */
.page-hero__lead, .sec__intro, .feature p, .step p, .review p, .aside-card p, .card__body p, .spec__row dd, .faq details > :not(summary) { text-wrap: pretty; }

/* Inline text links keep their line box but gain a 44px hit area */
.levels__foot a, .price-band__actions p a, .spec__row dd a, .faq details a, .prose a, .card__body a:not(.btn) { display: inline-block; padding-block: 10px; margin-block: -10px; }
.sec__intro a { padding-block: 13px; }
.trust a.trust__item { min-height: 44px; margin-block: -4px; }
.spec__row dd a, .levels__foot a, .price-band__actions p a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* Hero aside details and closing calls to action */
.page-hero__aside dd { line-height: 1.45; }
.page-hero__aside dd .price { display: inline-block; vertical-align: baseline; font-variant-numeric: tabular-nums; }
.page-hero__aside .price-label { vertical-align: 0.35em; }
.page-hero__aside .link { font-size: 0.92rem; margin-top: 2px; }
.cta .page-hero__meta { margin-top: 26px; }

/* Related links under a section: a row gap of 20px or more keeps the 44px hit areas apart when it wraps */
.related { display: flex; flex-wrap: wrap; gap: 20px 32px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 0.95rem; }

/* What's included, why it matters, is it the right fit */
.included { margin-top: 30px; }
.why { margin-top: 40px; }
.why .feature { padding: 22px; gap: 10px; }
.why .feature h3 { font-size: 1.02rem; }
.why .feature p { font-size: 1rem; }
.feature .icon-tile, .aside-card .icon-tile { margin-bottom: 4px; }
.spec__row dt .icon { flex: none; }
.spec--2col .spec__row dt, .plus-adds__list .spec__row dt, .fit .spec__row dt { align-items: flex-start; }
.spec--2col .spec__row dt .icon, .plus-adds__list .spec__row dt .icon, .fit .spec__row dt .icon { margin-top: 2px; color: var(--text-2); }
.fit { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.fit .aside-card { position: sticky; top: calc(var(--header-h) + 24px); }
.aside-card .link { display: block; font-size: 0.95rem; } /* block, so the arrow follows wrapped text at 320px */
.aside-card .link > [aria-hidden] { margin-left: 4px; }
.aside-card .btn, .price-band__actions .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; padding-block: 12px; }

/* Closing price band */
.cta--price { padding: clamp(56px, 7vw, 88px) 0; }
.price-band { display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(280px, 0.8fr); gap: clamp(32px, 5vw, 72px); align-items: center; max-width: none; }
.price-band h2 { margin-bottom: 16px; }
.price-band > div > p { color: var(--text-2); font-size: 1.08rem; max-width: 30rem; }
.price-band .page-hero__meta { margin-top: 20px; }
.price-band__price { display: grid; justify-items: start; gap: 6px; padding: 0 clamp(24px, 3vw, 48px); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.price-band__price .price-label { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); font-weight: 600; }
.price-band__price .price { font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-band__rating { margin-top: 8px; font-size: 0.94rem; color: var(--text-2); }
.price-band__rating .stars { margin-right: 6px; }
.price-band__note { max-width: 18rem; font-size: 0.94rem; color: var(--text-2); }
.price-band__actions { display: grid; gap: 12px; min-width: 0; }
.price-band__actions p { margin-top: 6px; font-size: 0.94rem; color: var(--text-2); text-align: center; }
.price-band__actions p a { white-space: nowrap; }

/* The three survey levels (home and all services) */
.levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.levels__foot { margin-top: 28px; max-width: 60rem; color: var(--text-2); font-size: 0.97rem; }

/* Forms and tables */
.choice--compact { min-height: 50px; padding: 12px 14px; }
.choice--compact .choice__title { font-size: 0.95rem; font-weight: 500; }
.compare-wrap:focus-visible { outline-offset: 6px; }

@media (max-width: 1279px) {
  .fit { grid-template-columns: 1fr; }
  .fit .aside-card { position: static; }
  .price-band { grid-template-columns: 1fr 1fr; }
  .price-band > div:first-child { grid-column: 1 / -1; }
  .price-band__price { border-right: 0; }
  .levels--detailed { grid-template-columns: 1fr; }
}

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

@media (max-width: 820px) {
  .price-band { grid-template-columns: 1fr; gap: 32px; }
  .price-band__price { padding: 28px 0 0; border: 0; border-top: 1px solid var(--line); }
  .related { gap: 20px 22px; margin-top: 36px; }
  .why { margin-top: 32px; }
}

/* ==========================================================================
   Page: home
   The first screen with the address finder, then alternating white and charcoal
   bands: the report, interactive reading, the portal, survey levels in pictures with
   a short comparison, what you get, the steps with inspection videos, FAQs.
   ========================================================================== */

/* First screen ------------------------------------------------------------ */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--canvas-deep, var(--canvas)); border-bottom: 1px solid var(--line); }
/* Footage from a survey sits behind the copy; the tint keeps the left side solid enough to read and type over */
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__video { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(18, 20, 22, 0.96) 0%, rgba(18, 20, 22, 0.9) 38%, rgba(18, 20, 22, 0.5) 66%, rgba(18, 20, 22, 0.2) 100%),
    linear-gradient(0deg, rgba(18, 20, 22, 0.9) 0%, rgba(18, 20, 22, 0) 30%);
}
.hero__in { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; min-height: clamp(460px, calc(78svh - var(--header-h, 68px)), 680px); padding: clamp(36px, 6vh, 72px) 0 clamp(40px, 6vh, 72px); }
.hero__copy { max-width: 36rem; }
.hero__title { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.5rem); line-height: 1.04; letter-spacing: -0.025em; }
.hero__lead { margin-top: 14px; font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); line-height: 1.5; color: var(--text-2); max-width: 34rem; }
.hero__quote { margin-top: 24px; }
.hero__quote-label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 0.98rem; }
.hero__quote-row { display: flex; gap: 10px; align-items: stretch; }
.hero__quote-input { flex: 1 1 auto; min-width: 0; min-height: 52px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--text); font: inherit; font-size: 1.05rem; text-transform: uppercase; }
.hero__quote-input::placeholder { color: var(--text-3); text-transform: none; }
.hero__quote-input:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px var(--focus-ring); }
.hero__quote-row .btn { flex: none; }
.hero__quote-hint { margin-top: 10px; font-size: 0.94rem; line-height: 1.5; color: var(--text-2); }
.hero__compare { margin-top: 10px; font-size: 0.95rem; }
.hero__badges { margin-top: 22px; }
.hx-bento__tile--rics .icon { margin-bottom: auto; }

/* Inline address pick on the hero */
.hero__status { display: flex; align-items: center; gap: 10px; margin-top: 10px; min-height: 22px; font-size: 0.92rem; color: var(--text-2); }
.hero__status.is-loading::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--text-2); border-right-color: transparent; border-radius: 50%; animation: fs-spin .8s linear infinite; flex: none; }
/* Combobox: the address list floats under the field so the hero never reflows */
.hero__combo { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.hero__combo .hero__quote-input { width: 100%; }
.hero__quote-input.is-picked { padding-right: 84px; text-transform: none; font-weight: 600; cursor: default; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero__combo-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--canvas); color: var(--text); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.hero__combo-clear:hover, .hero__combo-clear:focus-visible { border-color: var(--text); outline: none; }
.hero__list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; margin: 0; padding: 6px; list-style: none; max-height: min(336px, 48vh); overflow-y: auto; border: 1.5px solid var(--line-strong); border-radius: var(--r); background: var(--surface); box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .85), 0 0 0 1px rgba(0, 0, 0, .3); }
.hero__list[hidden] { display: none; }
.hero__list-heading { padding: 8px 12px 6px; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); font-weight: 600; }
.hero__list [role="option"] { padding: 10px 12px; border-radius: 8px; font-size: 0.98rem; line-height: 1.35; color: var(--text); cursor: pointer; }
.hero__list [role="option"]:hover, .hero__list [role="option"].is-active { background: var(--action-bg); color: var(--action-fg); }
.hero__list-manual { margin-top: 4px; padding: 10px 12px; border-top: 1px solid var(--line); font-size: 0.9rem; }
.hero__list-manual a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
/* The addresses open as a centred pop-up card over a dimmed page, with space all round, above the header and the phone call bar. */
html.hero-sheet-open .hero { z-index: 1001; }
html.hero-sheet-open, html.hero-sheet-open body { overflow: hidden; }
.hero__list { position: fixed; top: 50%; left: max(20px, calc(50% - 280px)); right: max(20px, calc(50% - 280px)); bottom: auto; transform: translateY(-50%); z-index: 1001; max-height: 64vh; max-height: 64dvh; padding: 6px; overscroll-behavior: contain; border: 1.5px solid var(--line-strong); border-radius: 18px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .7), 0 24px 60px -12px rgba(0, 0, 0, .9); }
.hero__list [role="option"] { padding: 14px 12px; }
.hero__list [role="option"] + [role="option"] { border-top: 1px solid var(--line); }
.hero__list-heading { position: sticky; top: -6px; z-index: 1; margin: -6px -6px 0; padding: 16px 18px 10px; background: var(--surface); }
.hero__notice a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.hero__notice { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--warn); border-radius: var(--r); font-size: 0.92rem; line-height: 1.5; color: var(--text-2); }
.hero__notice strong { color: var(--text); }

/* Survey overview --------------------------------------------------------- */
.level { display: grid; gap: 10px; align-content: start; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); transition: border-color .15s ease, background-color .15s ease; }
.level:hover, .level:focus-visible { border-color: var(--line-strong); background: var(--surface-2); }
.level--featured { border-color: var(--text-2); background: var(--surface-2); }
.level__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.level__name { font-size: 1.3rem; }
.level__for { color: var(--text-2); font-size: 0.95rem; min-height: 2.9em; }
.level__price { display: flex; align-items: baseline; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.level__price .price-label { font-size: 0.72rem; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.level__price .price { font-size: clamp(2rem, 1.7rem + 0.9vw, 2.5rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.level__cta { font-weight: 600; font-size: 0.95rem; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--line-strong); }
.level:hover .level__cta { text-decoration-color: var(--text); }

/* Evidence ------------------------------------------------------------------ */

/* Real inspections (CMS cards; enhanced by site-video-cards.js) --------------- */
.videos--compact { margin-top: clamp(28px, 4vw, 44px); padding-top: clamp(20px, 3vw, 28px); border-top: 1px solid var(--line); }
.videos__head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 16px; }
.videos__head .link { flex: none; white-space: nowrap; }
.videos__head h3 { font-size: 1.2rem; }
.videos__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.videos .inspection-card__body { padding-top: 10px; }
.videos .inspection-card__body h3 { font-size: 1rem; }
.videos .inspection-card__body p { font-size: 0.96rem; color: var(--text-2); }

/* Steps ----------------------------------------------------------------------- */
.steps--compact .step { padding: 22px 24px 4px 0; margin-right: 24px; }
.steps--compact .step:last-child { margin-right: 0; }
.steps--compact .step__n { font-size: 1.6rem; margin-bottom: 12px; }
.steps--compact .step h3 { font-size: 1.1rem; margin-bottom: 8px; }
.steps--compact .step p { font-size: 0.95rem; }

/* Regulated by RICS at the top of the first screen, as RICS supplies it */

/* Apple-style bands (home) ------------------------------------------------ */
/* White band: the paper tokens on pure white, so cards, buttons and icons draw themselves in the light scheme. */
.sec--white {
  --canvas: #ffffff;
  --canvas-deep: #f5f5f3;
  --surface: #f5f5f3;
  --surface-2: #ecece8;
  --surface-3: #e0e1dd;
  --text: #171a1c;
  --accent-text: #1d5fd6;
  --brand-blue: #2563eb;
  --text-2: #454c51;
  --text-3: #5b6368;
  --line: #e2e3df;
  --line-strong: #7b8388;
  --action-bg: #171a1c;
  --action-fg: #f7f7f5;
  --action-hover: #2d3236;
  --action-fg-muted: #bec3c7;
  --focus: #171a1c;
  --focus-ring: rgba(23, 26, 28, 0.2);
  background: var(--canvas);
  color: var(--text);
  color-scheme: light;
}
.hx { padding: clamp(72px, 9vw, 128px) 0; overflow: hidden; }
.hx--dark { background: var(--canvas-deep); }
.hx__head { text-align: center; max-width: 46rem; margin-inline: auto; margin-bottom: clamp(36px, 5vw, 64px); }
.hx__head .eyebrow::after { margin-inline: auto; }
.hx__head h2 { font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem); line-height: 1.04; letter-spacing: -0.035em; }
.hx__lead { margin-top: 18px; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); line-height: 1.45; color: var(--text-2); text-wrap: balance; }
.hx__head--left { text-align: left; margin: 0; }
.hx__head--left .eyebrow::after { margin-inline: 0; }
.hx__more { text-align: center; margin-top: 28px; }
.hx__head--left .hx__more { text-align: left; }
.hx__note { margin-top: 28px; text-align: center; color: var(--text-3); font-size: 0.95rem; }
.hx__stage { display: flex; justify-content: center; align-items: flex-end; }
.hx__stage--laptop .dev--laptop { width: min(100%, 1000px); }
.hx__stage--phones { gap: clamp(16px, 4vw, 56px); }
.hx__stage--phones .dev--phone { width: min(42%, 300px); }
.hx__stage--phones .dev--phone:first-child { transform: translateY(-6%); }
.hx__stage--pair { position: relative; padding-right: clamp(40px, 8vw, 120px); }
.hx__stage--pair .dev--laptop { width: min(100%, 940px); }
.hx__stage--pair .dev--phone { position: absolute; right: max(0px, calc(50% - 560px)); bottom: -2%; width: clamp(110px, 20%, 230px); }
.hx__points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: clamp(40px, 5vw, 72px); text-align: center; }
.hx__points--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hx__points .icon { width: 32px; height: 32px; margin: 0 auto 14px; color: var(--text); }
.hx__points h3 { font-size: 1.15rem; margin-bottom: 6px; }
.hx__points p { color: var(--text-2); font-size: 0.98rem; max-width: 18rem; margin-inline: auto; text-wrap: balance; }

/* Device frames: a MacBook Pro and an iPhone drawn around a screen image. Sizes are in cqw of the frame. */
.dev { margin: 0; container-type: inline-size; }
.dev__screen { position: relative; overflow: hidden; background: #000; }
.dev__screen img { width: 100%; height: auto; }
.dev--laptop .dev__body { padding: 0.55cqw; border-radius: 3.2cqw 3.2cqw 0.8cqw 0.8cqw; background: var(--dev-metal); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.55); }
.dev--laptop .dev__screen { border-radius: 2.7cqw 2.7cqw 0.4cqw 0.4cqw; padding: 2.2cqw 2.2cqw 3.6cqw; background: #050505; }
.dev--laptop .dev__screen img { border-radius: 0.5cqw; }
.dev--laptop .dev__notch { position: absolute; top: 2.2cqw; left: 50%; width: 11cqw; height: 1.9cqw; transform: translateX(-50%); border-radius: 0 0 1cqw 1cqw; background: #050505; }
.dev--laptop .dev__base { position: relative; height: 2.6cqw; margin: 0 -6.5cqw; border-radius: 0 0 9cqw 9cqw / 0 0 2.6cqw 2.6cqw; background: linear-gradient(180deg, var(--dev-metal-hi) 0%, var(--dev-metal) 45%, var(--dev-metal-lo) 100%); box-shadow: 0 30px 40px -24px rgba(0, 0, 0, 0.6); }
.dev--laptop .dev__base::before { content: ""; position: absolute; top: 0; left: 50%; width: 15cqw; height: 0.9cqw; transform: translateX(-50%); border-radius: 0 0 1.2cqw 1.2cqw; background: var(--dev-metal-lo); }
.dev--phone .dev__body { padding: 1.6cqw; border-radius: 16cqw; background: var(--dev-metal); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.6); }
.dev--phone .dev__screen { border-radius: 14.5cqw; padding: 3.2cqw; background: #050505; }
.dev--phone .dev__screen img { border-radius: 11.5cqw; }
.dev--phone .dev__notch { position: absolute; top: 5.6cqw; left: 50%; width: 30cqw; height: 8.6cqw; transform: translateX(-50%); border-radius: 99px; background: #050505; }
.dev--black { --dev-metal: #2b2d30; --dev-metal-hi: #3b3e42; --dev-metal-lo: #17181a; }
.dev--silver { --dev-metal: #b9bcbf; --dev-metal-hi: #dfe1e3; --dev-metal-lo: #8d9195; }

/* The live report viewer laid over the MacBook screen (home-report-viewer.js). Sizes in cqw of the frame,
   so it scales with the laptop; phones get a simpler version (no thumbnails). */
.rv { position: absolute; inset: 2.2cqw 2.2cqw 3.6cqw; z-index: 1; display: grid; grid-template-rows: 3.6cqw minmax(0, 1fr); overflow: hidden; border-radius: 0.5cqw; background: #0f1112; color: #c4c9cc; font-size: 1.05cqw; color-scheme: dark; }
.rv__bar { display: flex; align-items: center; gap: 1.4cqw; padding: 0 1.6cqw; background: #1d2023; border-bottom: 1px solid #2c3135; white-space: nowrap; }
.rv__bar b { color: #f7f7f5; font-weight: 600; }
.rv__dots { display: flex; gap: 0.55cqw; }
.rv__dots i { width: 0.85cqw; height: 0.85cqw; border-radius: 50%; background: #3a4044; }
.rv__sp { flex: 1; }
.rv__pill { border: 1px solid #3a4044; border-radius: 999px; padding: 0.3cqw 0.9cqw; font-size: 0.95cqw; color: #f7f7f5; font-variant-numeric: tabular-nums; }
.rv__main { display: grid; grid-template-columns: 10cqw minmax(0, 1fr); min-height: 0; }
.rv__thumbs { display: grid; align-content: start; justify-items: center; gap: 1.2cqw; padding: 1.4cqw 0; overflow-y: auto; scrollbar-width: none; background: #16191b; border-right: 1px solid #2c3135; }
.rv__thumbs button { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 3px; opacity: 0.6; transition: opacity .15s ease; }
.rv__thumbs button[aria-current="true"], .rv__thumbs button:hover { opacity: 1; outline: 2px solid #f7f7f5; outline-offset: 0.3cqw; }
.rv__thumbs img { width: 6cqw; height: auto; border-radius: 3px; }
.rv__pages { position: relative; display: grid; justify-items: center; gap: 1.8cqw; padding: 2.2cqw 0 3cqw; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3a4044 transparent; }
.rv__pages img { width: 52cqw; height: auto; border-radius: 0.3cqw; box-shadow: 0 1.4cqw 3.6cqw rgba(0, 0, 0, 0.55); }
.rv__pages:focus-visible { outline: 2px solid #f7f7f5; outline-offset: -4px; }
.rv__hint { position: absolute; left: 50%; bottom: 2.4cqw; transform: translateX(-50%); padding: 0.7cqw 1.4cqw; border-radius: 999px; background: rgba(247, 247, 245, 0.94); color: #171a1c; font-size: 1.05cqw; font-weight: 600; pointer-events: none; box-shadow: 0 1cqw 2.4cqw rgba(0, 0, 0, 0.45); animation: rv-hint 2.4s ease-in-out infinite; }
.dev--laptop .dev__notch { z-index: 2; }
/* Phones and small tablets: the same scrolling sample, without the thumbnails, with larger text and pages. */
@media (max-width: 820px) {
  .rv { grid-template-rows: 7cqw minmax(0, 1fr); font-size: 2.3cqw; }
  .rv__bar { gap: 2cqw; padding: 0 2.6cqw; }
  .rv__bar > span:not([class]) { display: none; }
  .rv__dots { gap: 1cqw; } .rv__dots i { width: 1.6cqw; height: 1.6cqw; }
  .rv__pill { font-size: 2.1cqw; padding: 0.5cqw 1.6cqw; }
  .rv__main { grid-template-columns: minmax(0, 1fr); }
  .rv__thumbs { display: none; }
  .rv__pages { gap: 3cqw; padding: 4cqw 0 5cqw; overscroll-behavior: contain; }
  .rv__pages img { width: 72cqw; }
  .rv__hint { font-size: 2.4cqw; padding: 1.4cqw 2.8cqw; bottom: 4cqw; white-space: nowrap; }
}
@keyframes rv-hint { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -0.4cqw); } }
@media (prefers-reduced-motion: reduce) { .rv__hint { animation: none; } }
/* One-time scroll hint (Simon, 7 Nov 2026): a brand blue finger swipes up over the screen and the pages
   ride up with it, then both come back. home-report-viewer.js adds .rv--nudge once, when the viewer is in view. */
.rv { --rv-nudge: 9cqw; --rv-finger: 6.2cqw; }
.rv__finger { position: absolute; left: 50%; top: 58%; z-index: 3; display: grid; place-items: center; width: var(--rv-finger); height: var(--rv-finger); margin: calc(var(--rv-finger) / -2) 0 0 calc(var(--rv-finger) / -2); border-radius: 50%; background: #2563eb; color: #fff; box-shadow: 0 0 0 0.35cqw rgba(255, 255, 255, 0.92), 0 1.2cqw 2.8cqw rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none; }
.rv__finger svg { width: 58%; height: 58%; }
.rv--nudge .rv__finger { animation: rv-finger 2.6s cubic-bezier(.45, 0, .25, 1) 0.3s 2 both; }
.rv--nudge .rv__pages > img { animation: rv-nudge 2.6s cubic-bezier(.45, 0, .25, 1) 0.3s 2 both; }
@keyframes rv-finger {
  0% { opacity: 0; transform: translateY(0) scale(1.25); }
  12% { opacity: 1; transform: translateY(0) scale(1); }
  45%, 55% { opacity: 1; transform: translateY(calc(var(--rv-nudge) * -1)) scale(1); }
  88% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(0) scale(1.15); }
}
@keyframes rv-nudge {
  0%, 12% { transform: translateY(0); }
  45%, 55% { transform: translateY(calc(var(--rv-nudge) * -1)); }
  88%, 100% { transform: translateY(0); }
}
@media (max-width: 820px) { .rv { --rv-nudge: 16cqw; --rv-finger: 11cqw; } .rv__finger { box-shadow: 0 0 0 0.6cqw rgba(255, 255, 255, 0.92), 0 2cqw 4cqw rgba(0, 0, 0, 0.45); } }
.rv--phone { --rv-nudge: 26cqw; --rv-finger: 17cqw; }
@media (prefers-reduced-motion: reduce) { .rv__finger { display: none; } .rv--nudge .rv__pages > img { animation: none; } }
/* The same viewer on an iPhone screen (Omni page): the bar sits below the notch, pages fill the width.
   Phones and small tablets keep the still screen underneath, since the MacBook viewer scrolls there already. */
.rv--phone { inset: 3.2cqw; border-radius: 11.5cqw; grid-template-rows: 20cqw minmax(0, 1fr); font-size: 4.2cqw; }
.rv--phone .rv__bar { align-items: flex-end; padding: 0 6cqw 2.6cqw; background: #2a2e31; border-bottom: 0; gap: 2cqw; }
.rv--phone .rv__bar > span:not([class]), .rv--phone .rv__dots { display: none; }
.rv--phone .rv__pill { font-size: 3.6cqw; padding: 0.6cqw 2.4cqw; }
.rv--phone .rv__main { grid-template-columns: minmax(0, 1fr); }
.rv--phone .rv__pages { gap: 4cqw; padding: 5cqw 0 8cqw; overscroll-behavior: contain; scrollbar-width: none; }
.rv--phone .rv__pages img { width: 86cqw; border-radius: 1cqw; }
.rv--phone .rv__hint { font-size: 3.8cqw; padding: 2cqw 4cqw; bottom: 7cqw; white-space: nowrap; }
@media (max-width: 820px) { .rv--phone { display: none; } }
.omni-report-stage { margin-top: clamp(36px, 5vw, 64px); margin-bottom: clamp(36px, 5vw, 64px); }

/* Photograph band, shown only once the picture is added */
.hx-photo { position: relative; isolation: isolate; min-height: clamp(360px, 48vw, 640px); display: grid; align-items: end; color: #f7f7f5; }
.hx-photo img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.hx-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 20, 22, 0) 45%, rgba(18, 20, 22, 0.75) 100%); }
.hx-photo__line { padding-bottom: clamp(28px, 5vw, 56px); font-size: clamp(1.6rem, 1.1rem + 2vw, 2.8rem); font-weight: 700; letter-spacing: -0.03em; }

/* Survey levels in pictures */
.hx-levels { gap: 20px; }
.hx-level { display: flex; flex-direction: column; }
.hx-level .lvl-pic { width: 100%; height: auto; margin: -4px 0 18px; color: var(--text); }
.lvl-pic__base { opacity: 0.3; }
.lvl-pic__glow { opacity: 0.1; }
.hx-level__adds { margin: 4px 0 20px; display: grid; gap: 8px; font-size: 0.95rem; color: var(--text-2); }
.hx-level__adds li { position: relative; padding-left: 22px; }
.hx-level__adds li::before { content: ""; position: absolute; left: 2px; top: 0.45em; width: 10px; height: 6px; border-left: 2px solid var(--text); border-bottom: 2px solid var(--text); transform: rotate(-45deg); }
.hx-level .level__price { margin-top: auto; }

/* Short comparison table */
.hx-compare { margin-top: clamp(48px, 6vw, 80px); max-width: 920px; }
.hx-compare table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.hx-compare th, .hx-compare td { padding: 15px 12px; border-bottom: 1px solid var(--line); }
.hx-compare thead th { font-size: 1rem; font-weight: 700; text-align: center; border-bottom-color: var(--line-strong); }
.hx-compare tbody th { text-align: left; font-weight: 500; }
.hx-compare td { text-align: center; width: 17%; color: var(--text-2); }
.hx-compare .is-featured { background: var(--surface); }
.hx-compare td .icon { width: 20px; height: 20px; display: inline-block; vertical-align: middle; color: var(--text); }
.hx-compare__no { color: var(--text-3); }
.hx-compare__note { font-size: 0.9rem; font-weight: 600; color: var(--text); }

/* What you get: a bento grid */
.hx-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(220px, auto); gap: 16px; }
.hx-bento__tile { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 28px; border-radius: 20px; background: var(--surface); }
.hx-bento__tile .icon { width: 36px; height: 36px; margin-bottom: auto; color: var(--text); }
.hx-bento__tile h3 { font-size: 1.3rem; letter-spacing: -0.02em; }
.hx-bento__tile p { color: var(--text-2); font-size: 0.98rem; }
.hx-bento__tile--cover { grid-row: span 2; justify-content: space-between; gap: 24px; overflow: hidden; background: #171a1c; color: #f7f7f5; }
.hx-bento__tile--cover p { color: #c4c9cc; }
.hx-bento__tile--cover img { width: 72%; margin: 8px auto 0; border-radius: 6px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7); transform: rotate(-3deg); }

/* How it works, quieter */
.hx-steps .step h3 { font-size: 1.15rem; }
.hx .videos { margin-top: clamp(48px, 6vw, 80px); }

/* FAQ */
.hx-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px 72px; align-items: start; }
.hx-faq .faq summary { font-size: 1.1rem; }
.hx-faq__list { display: grid; gap: 8px; margin-bottom: 12px; }
.hx-faq__list li { padding-left: 18px; position: relative; }
.hx-faq__list li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 6px; height: 6px; border-radius: 50%; background: var(--text-2); }
.hx-faq .faq details > p + p { margin-top: 10px; }
.hx-faq .faq a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.hx-cta .cta__in { text-align: center; margin-inline: auto; }
.hx-cta .cta__actions { justify-content: center; }

/* Responsive ----------------------------------------------------------------- */
@media (max-width: 1279px) {
  .steps--compact .step:nth-child(2) { margin-right: 0; }
}

@media (max-width: 1023px) {
  .hx-bento { grid-template-columns: 1fr 1fr; }
  .hero__copy { max-width: 40rem; }
  .level__for { min-height: 0; }
}

@media (max-width: 820px) {
  .hero::before { background: linear-gradient(180deg, rgba(18, 20, 22, 0.72) 0%, rgba(18, 20, 22, 0.88) 45%, rgba(18, 20, 22, 0.97) 100%); }
  .hero__in { min-height: 0; padding: 28px 0 72px; }
  .hero__title { font-size: clamp(2rem, 1.5rem + 2.6vw, 2.4rem); }
  .hero__quote-row { flex-direction: column; }
  .hero__quote-row .btn { width: 100%; }
  .steps--compact .step { padding: 18px 0; margin-right: 0; }
  .hx__points, .hx__points--four { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .hx__stage--phones .dev--phone { width: 46%; }
  .hx__stage--pair { padding-right: 0; padding-bottom: 8%; }
  .hx__stage--pair .dev--phone { right: 0; bottom: 0; width: 28%; }
  .hx__stage--phones .dev--phone:first-child { transform: none; }
  .fs-brandset { gap: 12px; }
  .fs-rics { height: 30px; padding-left: 12px; }
  .hx-compare th, .hx-compare td { padding: 12px 6px; font-size: 0.9rem; }
  .hx-compare thead th { font-size: 0.85rem; }
  .hx-compare td { width: 19%; }
  .hx-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .hx-bento__tile { min-height: 180px; }
  .hx-bento__tile--cover { grid-row: auto; }
  .hx-faq { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 480px) {
  .hx__points { grid-template-columns: 1fr; }
  .hx__points--four { grid-template-columns: 1fr 1fr; gap: 24px 12px; }
}

/* ==========================================================================
   Pages: Level 2, Level 3, Level 3+ and all services
   ========================================================================== */

/* Copy -------------------------------------------------------------------- */
.level-card__best, .route-card p { text-wrap: pretty; }

/* Hero: pills above the eyebrow ------------------------------------------------ */
.level-mark { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 26px; }

/* Illustrative sample report pages (fictional property, never a client file) - */
.report-cover { margin: 0; }
.report-cover__stack { position: relative; display: block; width: 100%; max-width: 540px; aspect-ratio: 1 / 1; }
.report-cover__page { position: absolute; width: 58%; height: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: 0 30px 50px -30px rgba(0, 0, 0, 0.75); transition: border-color .15s ease; }
.report-cover__page--back { left: 0; top: 0; }
.report-cover__page--front { right: 0; bottom: 0; }
.report-cover__stack:hover .report-cover__page, .report-cover__stack:focus-visible .report-cover__page { border-color: var(--line-strong); }
.report-cover__pill { position: absolute; left: 0; bottom: 4px; }
@media (max-width: 480px) { .report-cover__pill { font-size: 0.66rem; letter-spacing: 0.02em; padding: 3px 8px; } }
.report-cover figcaption { margin-top: 20px; max-width: 32rem; font-size: 0.94rem; line-height: 1.5; color: var(--text-2); }
.report-cover figcaption .link { font-size: 0.92rem; margin-top: 6px; min-height: 0; padding-block: 12px; margin-block: -12px; }

/* Scope of inspection ---------------------------------------------------------- */
.scope-foot { margin-top: 28px; }

/* "Is it the right level?" with the level ladder beside it --------------------- */
.fit__intro { margin-top: 18px; }
.fit__list { margin-top: 26px; }
.fit__note { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); max-width: 34rem; color: var(--text-2); font-size: 0.98rem; }

/* The three levels side by side, the page's own one marked (x-survey.ladder) */
.ladder { gap: 18px; }
.ladder > .eyebrow { margin-bottom: 0; }
.ladder__item { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.ladder__item:first-child { padding-top: 4px; border-top: 0; }
.ladder__name { display: grid; gap: 2px; color: var(--text); font-weight: 600; line-height: 1.3; }
.ladder__name a { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.ladder__name a:hover { text-decoration-color: var(--text); }
.ladder__price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ladder__price .price-label { color: var(--text-2); font-size: 0.82rem; font-weight: 500; }
.aside-card .ladder__best { margin-top: 4px; font-size: 0.92rem; line-height: 1.45; }
.ladder__item.is-current .ladder__name { font-size: 1.05rem; }
.aside-card .ladder__foot { font-size: 0.92rem; }
.ladder__foot a { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.ladder__links, .link-row { display: flex; flex-wrap: wrap; gap: 0 24px; }
.ladder__links .link, .link-row .link { display: inline-flex; }

/* Level 3+: the drone photograph and the case beside what the report includes ----- */
.plus-adds { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.plus-adds__proof { position: sticky; top: calc(var(--header-h) + 24px); }
.plus-adds__fig { margin: 0; }
.plus-adds__fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); border: 1px solid var(--line); }
.plus-adds__fig figcaption { margin-top: 14px; font-size: 0.94rem; line-height: 1.5; color: var(--text-2); }
.plus-adds__fig figcaption span { margin-right: 8px; color: var(--text); font-weight: 600; }
.plus-adds .sec__intro { margin-top: 16px; }
.plus-adds__list { margin-top: 28px; }
.plus-adds__list .spec__row:last-child { border-bottom: 0; }
.plus-adds__list .spec__note { font-size: 0.92rem; line-height: 1.55; } /* the bracketed note after a report's name: quieter than a description */
.plus-adds__also { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.plus-adds__sample { margin-top: 18px; }
.plus-case { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 28px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.plus-case__figure { font-size: clamp(2rem, 1.5rem + 1.4vw, 2.75rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.plus-case__body h3 { margin-bottom: 8px; }
.plus-case__body p { color: var(--text-2); font-size: 0.98rem; }

/* All services: the three levels with their prices ----------------------------- */
.level-card { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); transition: border-color .15s ease; }
.level-card:hover { border-color: var(--line-strong); }
.level-card--featured { border-color: var(--text-2); background: var(--surface-2); }
.level-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.level-card h3 { font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem); line-height: 1.12; }
.level-card__best { margin-top: 8px; min-height: 3.1em; color: var(--text-2); font-size: 0.96rem; line-height: 1.5; }
.level-card__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 22px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.level-card__price .price-label { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.level-card__price .price { font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.level-card .checks { flex: 1 0 auto; align-content: start; margin-top: 20px; gap: 10px; font-size: 0.96rem; }
.level-card__foot { display: grid; gap: 6px; margin-top: 26px; }
.level-card__foot .link { justify-self: start; min-height: 44px; font-size: 0.92rem; }

/* All services: short comparison ----------------------------------------------- */
.compare--essentials { min-width: 560px; }
.compare--essentials thead th { position: static; background: transparent; white-space: nowrap; }
/* The section is --surface, so the featured column needs the next step up to read as highlighted. */
.compare--essentials .is-featured, .compare--essentials thead .is-featured { background: var(--surface-2); }
.compare-hint { display: none; margin-top: 12px; font-size: 0.92rem; color: var(--text-2); }
.compare--essentials tbody th { font-size: 0.98rem; }
.compare--essentials .compare__opt { font-size: 0.86rem; font-weight: 600; color: var(--text); }
.compare--essentials tbody th .compare__sub { display: block; margin-top: 4px; max-width: 30rem; font-size: 0.84rem; font-weight: 400; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.compare--essentials thead th:not(:first-child) { text-align: center; }

/* All services: specialist routes ----------------------------------------------- */
.routes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.route-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 26px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); transition: border-color .15s ease; }
.route-card:hover { border-color: var(--line-strong); }
.route-card__label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.route-card h3 { font-size: 1.15rem; }
.route-card p { color: var(--text-2); font-size: 0.95rem; }
.route-card .checks { gap: 8px; font-size: 0.93rem; }
.route-card .link { margin-top: auto; padding-top: 10px; min-height: 54px; font-size: 0.95rem; }

/* All services: how to choose ----------------------------------------------------- */
.choose__intro { margin-top: 22px; max-width: 34rem; color: var(--text-2); font-size: 1.1rem; }
.choose .aside-card { margin-top: 40px; max-width: 30rem; }
.choose .spec__row dt { align-items: flex-start; }
.choose .spec__row dt .icon { margin-top: 1px; color: var(--text-2); }

/* Page-specific photo framing ------------------------------------------------------ */
body.route-survey-level2 .page-hero__bg { object-position: 50% 42%; }
body.route-survey-level3 .page-hero__bg { object-position: 55% 30%; }
body.route-survey-level3plus .page-hero__bg { object-position: 70% 35%; }
body.route-survey-all .page-hero__bg { object-position: 60% 25%; }
body.route-survey-all .cta__bg { object-position: center 12%; }

/* Responsive ------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .plus-adds { grid-template-columns: 1fr; }
  .plus-adds__proof { position: static; }
  .plus-adds__fig img { aspect-ratio: 16 / 9; }
  .level-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto auto auto; column-gap: clamp(24px, 4vw, 48px); }
  .level-card__head, .level-card h3, .level-card__best, .level-card__price { grid-column: 1; }
  .level-card__best { min-height: 0; }
  .level-card .checks { grid-column: 2; grid-row: 1 / 5; margin-top: 0; align-self: center; }
  .level-card__foot { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; }
  .level-card__foot .link { justify-self: end; }
  .routes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .level-mark { margin-bottom: 22px; }
  .plus-case { grid-template-columns: 1fr; }
  .level-card { display: flex; padding: 22px; }
  .level-card .checks { margin-top: 20px; align-self: stretch; }
  .compare-hint { display: block; }
  /* Fixed layout keeps the feature column to 40% so the Level 2 ticks are visible before scrolling, even at 320px. */
  .compare--essentials { min-width: 460px; table-layout: fixed; }
  .compare--essentials th:first-child { width: 40%; }
  .level-card__foot { display: grid; grid-template-columns: 1fr; }
  .level-card__foot .link { justify-self: start; }
  .routes { grid-template-columns: 1fr; }
  .route-card { padding: 22px; }
  .choose .aside-card { max-width: none; }
}

/* On phones the feature column is only 40% wide, so the alterations feasibility note would run to 11 lines.
   It runs the visible width under the name instead; the marks sit level with the name, above it. */
@media (max-width: 600px) {
  /* 100vw less the 16px page gutters and the 10px cell padding on each side, so it ends inside the scroll box. */
  .compare--essentials tbody th .compare__sub { position: relative; z-index: 1; width: calc(100vw - 52px); max-width: 30rem; }
}

/* ==========================================================================
   Pages: Sellers Survey, Single Defect Report, Remote Inspection, Party Wall, HomeCheck
   ========================================================================== */

/* Copy ----------------------------------------------------------------- */
.nobr { white-space: nowrap; }
.eyebrow--center { text-align: center; }
.eyebrow--center::after { margin-inline: auto; } /* row gap >= 20px so the links' 44px hit areas never overlap when the row wraps */

/* Feature cards with an icon tile --------------------------------------- */
.feature--note { background: var(--canvas-deep); border-color: var(--line-strong); }
.feature--note > .icon-tile { background: var(--surface); }
.feature--note .link { font-size: 0.95rem; margin-top: 2px; }

/* What's included: list, photo and aside -------------------------------- */
.split__img--tall { aspect-ratio: 1; }
.split .aside-card { margin-top: 40px; }
.aside-card .eyebrow { margin-bottom: 0; }
.aside-card .checks { margin: 4px 0; gap: 10px; }
.aside-card .checks li { font-size: 0.98rem; } /* flows inline so the arrow follows wrapped text at 320px */
.aside-card p a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Text column with a sticky aside */
.fit .sec__intro { margin-top: 20px; }

/* Spec rows with a leading icon */

/* Steps: three- and five-step variants ---------------------------------- */
.steps--3 { grid-template-columns: repeat(3, 1fr); }
.steps--5 { grid-template-columns: repeat(5, 1fr); }
.steps--5 .step { padding-right: 20px; margin-right: 20px; }
.steps--5 .step:last-child { padding-right: 0; margin-right: 0; }

/* HomeCheck ------------------------------------------------------------- */
.hc-split { align-items: center; }
.hc-split h2 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); }
.hc-panel { display: grid; gap: 14px; align-content: start; padding: clamp(26px, 3vw, 40px); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.hc-panel .eyebrow { margin-bottom: 0; }
.hc-panel h3 { font-size: clamp(1.5rem, 1.25rem + 0.7vw, 2rem); line-height: 1.15; }
.hc-panel p { color: var(--text-2); text-wrap: pretty; }
.hc-panel p a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hc-disclaimer { max-width: 50rem; margin-top: 28px; font-size: 0.94rem; color: var(--text-2); }

/* Hero photo framing ----------------------------------------------------- */
body.route-survey-sellerSurvey .page-hero__bg { object-position: 50% 40%; }
body.route-survey-defectDiagnosis .page-hero__bg { object-position: 60% 35%; }
body.route-survey-remoteConsultation .page-hero__bg { object-position: 50% 30%; }
body.route-survey-partyWallServices .page-hero__bg { object-position: 50% 60%; }
body.route-homeCheck .page-hero__bg { object-position: 50% 40%; }

/* Responsive ------------------------------------------------------------ */
@media (max-width: 1279px) {
  .split__img--tall { aspect-ratio: 16 / 10; }
  .steps--3, .steps--5 { grid-template-columns: repeat(2, 1fr); }
  .steps--5 .step { padding-right: 28px; margin-right: 28px; }
  .steps--5 .step:nth-child(2), .steps--5 .step:nth-child(4) { border-right: 0; margin-right: 0; }
}

@media (max-width: 820px) {
  .steps--3, .steps--5 { grid-template-columns: 1fr; }
  .steps--5 .step { padding-right: 0; margin-right: 0; }
}

/* ==========================================================================
   Pages: compare surveys, survey costs, sample reports, FAQs
   ========================================================================== */

/* Copy --------------------------------------------------------------------- */
.g-level p, .g-tier p, .gallery__body p { text-wrap: pretty; }

/* Tap targets: inline links keep their layout but gain a 44px hit area --------- */
.g-foot a, .g-note a, .qa-answer a, .g-stack figcaption a { padding-block: 13px; }

/* Hero: level tiles in the aside ------------------------------------------------ */
.g-mark { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 26px; }
.page-hero__aside .g-tiles { display: grid; gap: 16px; }
.page-hero__aside .g-tiles > li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 14px; align-items: center; }
.page-hero__aside .g-tiles__name { align-self: end; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.page-hero__aside .g-tiles__desc { align-self: start; font-weight: 400; color: var(--text-2); font-size: 0.98rem; line-height: 1.45; }
.page-hero__aside .g-tiles__desc strong { display: block; font-weight: 500; color: var(--text); }

/* Section footers and related links --------------------------------------------- */
.g-foot { margin-top: 30px; max-width: 60rem; color: var(--text-2); font-size: 0.97rem; }
.g-foot a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.g-related { display: flex; flex-wrap: wrap; gap: 4px 32px; margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 0.95rem; }
.g-note { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--text-2); font-size: 0.95rem; line-height: 1.5; }
.g-note strong { color: var(--text); font-weight: 600; }
.g-note a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* Level summary cards (compare page) ----------------------------------------- */
.g-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.g-level { display: flex; flex-direction: column; gap: 12px; padding: 28px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); transition: border-color .15s ease; }
.g-level:hover { border-color: var(--line-strong); }
.g-level--featured { border-color: var(--text-2); background: var(--surface-2); }
.g-level__head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.g-level h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.15; }
.g-level p { color: var(--text-2); font-size: 1rem; }
.g-level__best { color: var(--text) !important; font-weight: 500; }
.g-level .link { margin-top: auto; padding-top: 6px; font-size: 0.95rem; }

/* Comparison table (821px and up) ----------------------------------------------- */
.compare-wrap--full { overflow: visible; }
.compare--full { table-layout: fixed; }
.compare--full col.compare__label { width: 34%; }
.compare--full thead th { padding: 20px 16px 18px; vertical-align: bottom; }
.compare--full thead th:first-child { padding-left: 0; }
.compare--full thead th.is-featured { border-radius: var(--r) var(--r) 0 0; }
/* The table sits on a surface section, so the featured column steps up one surface level to stay visible */
.sec--bone2 .compare .is-featured, .sec--bone2 .compare thead .is-featured { background: var(--surface-2); }
.compare__lvl { display: grid; justify-items: center; gap: 10px; text-align: center; }
.compare__name { display: block; font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.compare__price { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 8px; }
.compare__price .price-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.compare__price .price { font-size: 1.85rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.compare__pill { margin-bottom: 2px; }
.compare--full tbody th { padding-left: 0; vertical-align: middle; }
.compare--full td { vertical-align: middle; }
.compare--full tbody th strong { display: block; font-weight: 500; }
.compare--full tbody th span { display: block; margin-top: 2px; font-size: 0.9rem; font-weight: 400; color: var(--text-2); }
.compare--full tbody th span.compare__sub-note, .compare-card__row dt span.compare__sub-note { margin-top: 4px; max-width: 30rem; font-size: 0.84rem; line-height: 1.5; text-wrap: pretty; }
.compare--full .compare__group th { padding: 34px 16px 10px 0; border-bottom: 1px solid var(--line-strong); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); text-align: left; vertical-align: bottom; }
.compare__note { display: inline-block; font-size: 0.92rem; font-weight: 600; color: var(--text); line-height: 1.3; }
.compare__extra { display: grid; justify-items: center; gap: 2px; font-size: 0.94rem; font-weight: 600; color: var(--text); line-height: 1.3; }
.compare__extra small { font-size: 0.78rem; font-weight: 500; color: var(--text-2); }
.compare--full tfoot td { padding-top: 22px; padding-bottom: 8px; border-bottom: 0; }
.compare--full tfoot td .btn { width: 100%; max-width: 220px; white-space: normal; }
.compare-cards { display: none; }

/* Comparison cards (820px and below): one card per level ------------------------ */
.compare-card { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.compare-card--featured { border-color: var(--text-2); }
.compare-card__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 14px; align-items: center; padding: 20px; border-bottom: 1px solid var(--line); background: var(--canvas); }
.compare-card--featured .compare-card__head { background: var(--surface-2); }
.compare-card__head h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 1.2rem; }
.compare-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.compare-card__price .price-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.compare-card__price .price { font-size: 1.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.compare-card__group { padding: 6px 20px 10px; }
.compare-card__group + .compare-card__group { border-top: 1px solid var(--line); }
.compare-card__group h4 { margin: 14px 0 6px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.compare-card__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; min-height: 44px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 0.95rem; }
.compare-card__row:first-of-type { border-top: 0; }
.compare-card__row dt { font-weight: 500; }
.compare-card__row dt strong { display: block; font-weight: 500; }
.compare-card__row dt span { display: block; font-size: 0.88rem; color: var(--text-2); }
.compare-card__row dd { margin: 0; text-align: right; color: var(--text-2); font-size: 0.95rem; white-space: nowrap; }
.compare-card__row dd .compare__extra { justify-items: end; }
.compare-card__row dd .compare__note { font-size: 0.88rem; }
/* The tick and dash marks are styled under .compare (the table); the cards need them too */
.compare-card .yes, .compare-card .no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; vertical-align: middle; }
.compare-card .yes { background: var(--action-bg); color: var(--action-fg); }
.compare-card .no { background: var(--surface-3); color: var(--text-2); }
.compare-card .yes::before { content: ""; width: 11px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translateY(-1px); }
.compare-card .no::before { content: "–"; font-weight: 600; line-height: 1; }
.compare-card__foot { padding: 16px 20px 20px; border-top: 1px solid var(--line); }
.compare-card__foot .btn { width: 100%; }

/* "Not sure" help strip under the table ------------------------------------------- */
.compare-help { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 48px; align-items: center; margin-top: clamp(40px, 5vw, 64px); padding: 28px 32px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--canvas); }
.compare-help h3 { font-size: 1.4rem; line-height: 1.15; }
.compare-help p { margin-top: 6px; color: var(--text-2); }
.compare-help__links { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }

/* Illustrative sample pages as a two-page stack (compare page) ------------------ */
.g-stack { margin: 0; }
.g-stack__frame { position: relative; display: block; width: 100%; max-width: 520px; aspect-ratio: 1 / 1; }
.g-stack__page { position: absolute; width: 58%; height: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: 0 30px 50px -30px rgba(0, 0, 0, 0.75); transition: border-color .15s ease; }
.g-stack__page--back { left: 0; top: 0; }
.g-stack__page--front { right: 0; bottom: 0; }
.g-stack__frame:hover .g-stack__page, .g-stack__frame:focus-visible .g-stack__page { border-color: var(--line-strong); }
.g-stack__pill { position: absolute; left: 0; bottom: 4px; }
@media (max-width: 480px) { .g-stack__pill { font-size: 0.66rem; letter-spacing: 0.02em; padding: 3px 8px; } }
.g-stack figcaption { margin-top: 20px; max-width: 32rem; font-size: 0.94rem; line-height: 1.5; color: var(--text-2); }
.g-stack figcaption .link { display: inline-flex; margin-top: 6px; font-size: 0.92rem; }
.g-samples { align-items: center; }
.g-samples h2 { margin-bottom: 20px; }
.g-samples .sec__intro + .link { margin-top: 24px; }

/* Survey costs: the three levels with their prices ------------------------------ */
.g-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.g-tier { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); transition: border-color .15s ease; }
.g-tier:hover { border-color: var(--line-strong); }
.g-tier--featured { border-color: var(--text-2); background: var(--surface-2); }
.g-tier__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.g-tier h3 { font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem); line-height: 1.12; }
.g-tier__best { margin-top: 8px; color: var(--text-2); font-size: 0.96rem; line-height: 1.5; }
.g-tier__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 22px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.g-tier__price .price-label { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.g-tier__price .price { font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.g-tier__price small { flex-basis: 100%; margin-top: 2px; font-size: 0.88rem; color: var(--text-2); }
.g-tier .checks { flex: 1 0 auto; align-content: start; margin-top: 20px; gap: 10px; font-size: 0.96rem; }
.g-tier__foot { display: grid; gap: 8px; margin-top: 26px; }
.g-tier__foot .link { justify-self: start; font-size: 0.92rem; }

/* Survey costs: what sets the price --------------------------------------------- */
.g-factors { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; }
.g-factors h2 { margin-bottom: 22px; }
.g-factors__intro { display: grid; gap: 22px; }
.g-factors .spec__row dt { align-items: flex-start; }
.g-factors .spec__row dt .icon { margin-top: 1px; color: var(--text-2); }
.g-factors h3 { margin-bottom: 14px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.g-factors .spec--no { border-top-color: var(--line); }
.g-factors .spec--no .spec__row dt { color: var(--text-2); font-weight: 500; }
.g-factors .aside-card { margin-top: 10px; }

/* Survey costs: case-study outcomes ---------------------------------------------- */
.g-outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.g-outcome { display: grid; gap: 12px; align-content: start; padding: 32px 32px 8px 0; }
.g-outcome + .g-outcome { padding-left: 32px; border-left: 1px solid var(--line); }
.g-outcome__figure { font-size: clamp(2rem, 1.5rem + 1.4vw, 2.75rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.g-outcome h3 { margin-top: 10px; font-size: 1.15rem; }
.g-outcome p { color: var(--text-2); font-size: 0.96rem; }
.g-outcome .link { margin-top: 4px; font-size: 0.95rem; }

/* Illustrative report pages: gallery --------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.gallery__item { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow: hidden; transition: border-color .15s ease; }
.gallery__item:hover, .gallery__item:focus-within { border-color: var(--line-strong); }
.gallery__item--preferred { border-color: var(--line-strong); }
.gallery__link { position: relative; display: block; background: var(--canvas-deep); border-bottom: 1px solid var(--line); }
.gallery__link img { width: 100%; height: auto; aspect-ratio: 452 / 640; object-fit: cover; object-position: top; transition: opacity .2s ease; }
.gallery__link:hover img { opacity: .92; }
.gallery__link:focus-visible { outline-offset: -4px; }
.gallery__pill { position: absolute; left: 12px; top: auto; bottom: 12px; }
.gallery__open { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--scrim); color: var(--text); font-size: 0.8rem; font-weight: 600; backdrop-filter: blur(8px); }
.gallery__body { display: grid; gap: 8px; align-content: start; padding: 20px 22px 22px; }
.gallery__n { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); font-variant-numeric: tabular-nums; }
.gallery__body h3 { font-size: 1.12rem; }
.gallery__body p { color: var(--text-2); font-size: 0.98rem; line-height: 1.5; }
.gallery__body .gallery__status { padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--line); font-size: 0.84rem; }
.gallery__body .gallery__status strong { color: var(--text); font-weight: 600; }
.gallery__preferred { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; font-size: 0.86rem; }
.gallery__preferred .icon { width: 16px; height: 16px; }

/* Illustrative report pages: lightbox (sample-gallery.js) ------------------------ */
.lightbox { position: fixed; inset: 0; z-index: 520; display: grid; place-items: center; padding: 16px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease; }
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.82); }
.lightbox__dialog { position: relative; z-index: 1; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(960px, 100%); max-height: calc(100dvh - 32px); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: var(--text); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6); overflow: hidden; }
.lightbox__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.lightbox__eyebrow { display: block; margin-bottom: 6px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.lightbox__head h2 { font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem); line-height: 1.2; }
.lightbox__head p { margin-top: 6px; font-size: 0.94rem; color: var(--text-2); max-width: 44rem; }
.lightbox__close { flex: none; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; color: var(--text); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.lightbox__close:hover { border-color: var(--text); }
.lightbox__stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 16px; background: var(--canvas-deep); overflow: auto; }
.lightbox__stage img { display: block; width: auto; max-width: 100%; max-height: max(240px, calc(100dvh - 260px)); height: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.lightbox__foot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); }
.lightbox__nav { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r); background: transparent; color: var(--text); font-weight: 600; font-size: 0.9rem; cursor: pointer; }
.lightbox__nav:hover { border-color: var(--text); background: var(--surface-2); }
.lightbox__count { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 16px; text-align: center; font-size: 0.88rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.lightbox__count a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; min-height: 44px; display: inline-flex; align-items: center; }
body.sample-lightbox-is-open { overflow: hidden; }

/* Illustrative report pages: what is inside -------------------------------------- */
.g-inside { align-items: start; }
.g-inside__fig { margin: 0; }
.g-inside__fig a, .g-inside__fig > span { display: block; max-width: 452px; }
.g-inside__fig img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); transition: border-color .15s ease; }
.g-inside__fig a:hover img, .g-inside__fig a:focus-visible img { border-color: var(--line-strong); }
.g-inside__fig figcaption { margin-top: 16px; max-width: 30rem; font-size: 0.94rem; line-height: 1.5; color: var(--text-2); }
.g-inside__fig figcaption strong { color: var(--text); font-weight: 600; }
.g-inside h2 { margin-bottom: 22px; }
.g-inside .spec { margin-top: 36px; }
.g-inside .spec__row dt { align-items: flex-start; }
.g-inside .spec__row dt .icon { margin-top: 1px; color: var(--text-2); }
.g-inside .aside-card { margin-top: 40px; }
.g-inside .aside-card .link { font-size: 0.95rem; }

/* FAQs ------------------------------------------------------------------------- */
.qa { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 40px clamp(40px, 6vw, 110px); align-items: start; }
.qa-nav { position: sticky; top: calc(var(--header-h) + 28px); display: grid; gap: 16px; }
.qa-search label { display: block; margin-bottom: 10px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.qa-search__field { position: relative; }
.qa-search__field .icon { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--text-2); pointer-events: none; }
.qa-search input { width: 100%; min-height: 50px; padding: 12px 14px 12px 44px; border: 1.5px solid var(--line-strong); border-radius: var(--r); background: var(--canvas); color: var(--text); font: inherit; font-size: 1rem; transition: border-color .15s ease, box-shadow .15s ease; }
.qa-search input::placeholder { color: var(--text-3); }
.qa-search input:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px var(--focus-ring); }
.qa-feedback { font-size: 0.94rem; color: var(--text-2); }
.qa-topics { display: grid; margin-top: 8px; border-top: 1px solid var(--line-strong); }
.qa-topics a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 50px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 0.98rem; font-weight: 500; color: var(--text-2); transition: color .15s ease; }
.qa-topics a span { flex: none; min-width: 28px; font-size: 0.82rem; color: var(--text-2); text-align: right; font-variant-numeric: tabular-nums; }
.qa-topics a:hover, .qa-topics a:focus-visible { color: var(--text); }
.qa-group { scroll-margin-top: calc(var(--header-h) + 28px); }
.qa-group + .qa-group { margin-top: clamp(52px, 5vw, 76px); }
.qa-group__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.qa-group__head h2 { font-size: clamp(1.7rem, 1.3rem + 1.3vw, 2.4rem); }
.qa-group__head p { flex: none; font-size: 0.98rem; color: var(--text-2); }
.qa-answer { display: grid; gap: 12px; }
.qa-answer ul { display: grid; gap: 8px; }
.qa-answer li { position: relative; padding-left: 24px; }
.qa-answer li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--text-2); }
.qa-answer a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.route-guidance-faqs .faq summary { line-height: 1.4; }
.route-guidance-faqs .faq summary:hover { color: var(--text-2); }
.qa-empty { display: grid; gap: 12px; justify-items: start; padding: 32px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.qa-empty h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.qa-empty p { color: var(--text-2); }
.qa-help { margin-top: clamp(56px, 6vw, 88px); grid-template-columns: minmax(0, 1fr) auto; gap: 18px 48px; align-items: center; padding: 32px 36px; }
.qa-help h3 { margin-bottom: 8px; }
.qa-help__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.qa-help__actions .btn { margin-top: 0; }
.route-guidance-faqs .reviews-intro .link { margin-top: 18px; }

/* Page-specific photo framing ---------------------------------------------------- */
body.route-guidance-compareSurveys .page-hero__bg { object-position: 55% 30%; }
body.route-guidance-surveyCosts .page-hero__bg { object-position: 60% 35%; }
body.route-guidance-faqs .page-hero__bg { object-position: center 40%; }
body.route-guidance-sampleReports .page-hero__bg { object-position: 62% center; }

/* Responsive --------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .g-levels { grid-template-columns: 1fr; }
  .g-level { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
  .g-level__head { flex: none; margin: 0; }
  .g-level h3 { flex: 1 1 240px; }
  .g-level p { flex-basis: 100%; }
  .g-level .link { margin-top: 4px; }
  .g-tiers { grid-template-columns: 1fr; }
  .g-tier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto auto; column-gap: clamp(24px, 4vw, 48px); }
  .g-tier__head, .g-tier h3, .g-tier__best, .g-tier__price { grid-column: 1; }
  .g-tier .checks { grid-column: 2; grid-row: 1 / 5; margin-top: 0; align-self: center; }
  .g-tier__foot { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; }
  .g-tier__foot .link { justify-self: end; }
  .g-factors { grid-template-columns: 1fr; }
  .g-outcomes { grid-template-columns: 1fr; }
  .g-outcome, .g-outcome + .g-outcome { padding: 28px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .g-outcome:last-child { border-bottom: 0; }
  .qa { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); }
  .qa-help { grid-template-columns: 1fr; }
  .g-samples .g-stack { justify-self: center; }
  .g-inside__fig { max-width: 520px; }
}

@media (max-width: 1023px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qa { grid-template-columns: 1fr; }
  .qa-nav { position: static; }
  .qa-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}

@media (max-width: 820px) {
  .g-mark { margin-bottom: 22px; }
  .page-hero__aside .g-tiles > li { gap: 2px 12px; }
  .g-level { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; padding: 22px; }
  .g-level__head { margin-bottom: 4px; }
  .g-level h3, .g-level p { flex: none; }
  .compare-wrap--full { display: none; }
  .compare-cards { display: grid; gap: 16px; }
  .compare-help { grid-template-columns: 1fr; padding: 24px 22px; }
  .compare-help__links { display: grid; gap: 10px; justify-items: start; }
  .compare-help__links .btn { width: 100%; }
  .g-related { gap: 0 22px; }
  .g-tier { display: flex; padding: 22px; }
  .g-tier .checks { margin-top: 20px; align-self: stretch; }
  .g-tier__foot { display: grid; grid-template-columns: 1fr; }
  .g-tier__foot .link { justify-self: start; }
  .gallery { grid-template-columns: 1fr; gap: 14px; }
  .gallery__item { grid-template-columns: minmax(118px, 36%) minmax(0, 1fr); grid-template-rows: none; }
  .gallery__link { border-bottom: 0; border-right: 1px solid var(--line); }
  .gallery__link img { height: 100%; aspect-ratio: auto; }
  .gallery__pill { left: 8px; top: auto; bottom: 8px; font-size: 0.62rem; padding: 3px 7px; }
  .gallery__open { display: none; }
  .gallery__body { padding: 16px 16px 18px; }
  .gallery__body h3 { font-size: 1.02rem; }
  .gallery__body p { font-size: 0.95rem; }
  .lightbox { padding: 0; }
  .lightbox__dialog { width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .lightbox__head { padding: 14px 16px 12px; }
  .lightbox__head p { display: none; }
  .lightbox__stage { padding: 10px; }
  .lightbox__stage img { max-height: none; }
  .lightbox__foot { grid-template-columns: auto minmax(0, 1fr) auto; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .lightbox__nav span:not([aria-hidden]) { display: none; }
  .lightbox__nav { padding: 0 12px; }
  .lightbox__count { font-size: 0.82rem; }
  .qa-topics { grid-template-columns: 1fr; }
  .qa-group__head { flex-direction: column; gap: 4px; }
  .qa-help { padding: 28px 22px; }
  .qa-help__actions { display: grid; width: 100%; }
  .qa-help__actions .btn { width: 100%; }
  .route-guidance-faqs .faq summary { font-size: 1rem; }
  .g-note { padding: 14px 16px; }
}

@media (max-width: 400px) {
  .gallery__item { grid-template-columns: 1fr; }
  .gallery__link { border-right: 0; border-bottom: 1px solid var(--line); }
  .gallery__link img { aspect-ratio: 452 / 640; max-height: 300px; object-position: top; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery__link img, .g-level, .g-tier, .gallery__item, .lightbox, .qa-topics a, .qa-search input, .g-stack__page { transition: none; }
}

/* ==========================================================================
   Pages: case studies and reviews
   ========================================================================== */

/* Cropped evidence photo --------------------------------------------------
   Shows one region of a larger published image without a new asset.
   --iw: natural width of the source image; --x/--y/--w/--h: region in source pixels.
   Percentages of left/width/margin-top all resolve against the box width, so the
   crop scales with the layout. */
.shot { position: relative; overflow: hidden; margin: 0; aspect-ratio: var(--w) / var(--h); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.shot img { position: absolute; top: 0; left: calc(var(--x) / var(--w) * -100%); width: calc(var(--iw) / var(--w) * 100%); max-width: none; height: auto; margin-top: calc(var(--y) / var(--w) * -100%); }

.cs-fig { display: grid; gap: 12px; margin: 0; }
.cs-fig figcaption { font-size: 0.94rem; line-height: 1.5; color: var(--text-2); }
.cs-fig figcaption span { margin-right: 8px; font-weight: 600; color: var(--text); }
.cs-fig--portrait { width: min(100%, 380px); justify-self: end; }

/* Money figure + its label ----------------------------------------------- */
.cs-figure { font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
.cs-label { display: block; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.4; color: var(--text-2); }
/* In narrow cards the label can wrap; an inline link keeps the arrow with the last word, and
   block padding on an inline box extends the hit area to 44px without moving the line. */
.cs-sample__body .link, .rv-voice footer .link { display: inline; padding-block: 11px; }

/* Hero asides: case file, outcomes list, review score ---------------------- */
.cs-file__figure { display: grid; gap: 8px; margin: 0; padding: 2px 0 18px; border-bottom: 1px solid var(--line); }
.cs-file__figure .cs-figure { font-size: clamp(2rem, 1.5rem + 1.4vw, 2.75rem); }
.page-hero__aside .cs-file__dl { grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.page-hero__aside .cs-file__dl > div:last-child { grid-column: 1 / -1; }
.cs-file__level { display: inline-flex; align-items: center; gap: 12px; }

.cs-outcomes { display: grid; margin: 0; }
.cs-outcomes li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.cs-outcomes li:first-child { border-top: 0; padding-top: 4px; }
.cs-outcomes__fig { font-size: 1.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cs-outcomes__where { font-size: 0.92rem; color: var(--text-2); }

.rv-score__big { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: clamp(2.6rem, 2rem + 1.8vw, 3.6rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.rv-score__big span { font-size: 1.05rem; font-weight: 500; letter-spacing: 0; color: var(--text-2); }
.rv-score > p:not(.rv-score__big):not(.eyebrow) { color: var(--text-2); font-size: 0.95rem; }

/* Case-study detail: overview --------------------------------------------- */
.cs-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.cs-overview h2 { margin-bottom: 28px; }
.cs-overview .prose p { font-size: 1.08rem; }
.cs-overview .checks { margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--line); }

/* Case-study detail: findings evidence list -------------------------------- */
.cs-findings { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.cs-findings__head { position: sticky; top: calc(var(--header-h) + 32px); }
.cs-findings__head h2 { margin-bottom: 22px; }
.cs-findings__head .cs-fig { margin-top: 36px; }
.findings { display: grid; border-top: 1px solid var(--line-strong); }
.finding { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(128px, 172px); gap: 10px 24px; align-items: start; padding: 28px 0; border-bottom: 1px solid var(--line); }
.finding__body { display: grid; gap: 8px; }
.finding__n { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.finding h3 { font-size: 1.15rem; }
.finding p { font-size: 1rem; color: var(--text-2); }

/* Case-study detail: outcome, client quote, sample page, more case studies -- */
.cs-outcome { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.cs-outcome .prose { margin-top: 28px; }
.cs-outcome .prose p { font-size: 1.08rem; }
.cs-outcome__side { display: grid; gap: 20px; }

.cs-quote { margin: 0; padding: 26px 28px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--canvas); }
.cs-quote p { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.6rem); font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; text-wrap: pretty; }
.cs-quote footer { margin-top: 16px; font-size: 0.94rem; color: var(--text-2); }
.cs-quote--sm { padding: 22px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.cs-quote--sm p { font-size: 1.05rem; font-weight: 400; color: var(--text-2); }

.cs-sample { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: start; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--canvas); }
.cs-sample img { width: 100%; border: 1px solid var(--line); border-radius: 4px; }
.cs-sample__body { display: grid; gap: 8px; justify-items: start; }
.cs-sample__body h3 { font-size: 1.05rem; }
.cs-sample__body p { font-size: 0.96rem; color: var(--text-2); }
.cs-sample__body .link { font-size: 0.92rem; }

.cs-more { display: grid; grid-template-columns: minmax(0, 0.6fr) repeat(2, minmax(0, 1fr)); gap: 16px 48px; align-items: start; margin-top: clamp(56px, 7vw, 96px); padding-top: 28px; border-top: 1px solid var(--line); }
.cs-more .eyebrow { margin: 4px 0 0; }
.cs-more a { display: grid; gap: 6px; min-height: 44px; padding-left: 20px; border-left: 1px solid var(--line); transition: border-color .15s ease; }
.cs-more a strong { font-weight: 600; line-height: 1.35; }
.cs-more a span { font-size: 0.95rem; color: var(--text-2); }
.cs-more a .link, .cs-more a .link span { font-size: 0.95rem; color: var(--text); }
.sec--paper .cs-sample img { box-shadow: 0 14px 24px -16px rgba(23, 26, 28, 0.42); }
.cs-more a:hover { border-left-color: var(--text); }
.cs-more a:hover strong { text-decoration: underline; text-underline-offset: 4px; }

/* Case studies index ------------------------------------------------------- */
.cs-list { display: grid; gap: clamp(56px, 8vw, 112px); }
.cs-item { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.cs-item:nth-child(even) .cs-item__media { order: 2; }
.cs-item__media { margin: 0; }
.cs-item__img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border: 1px solid var(--line); border-radius: var(--r-card); }
.cs-item__body { display: grid; gap: 16px; max-width: 34rem; }
.cs-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-size: 0.94rem; color: var(--text-2); }
.cs-item__meta li { display: inline-flex; align-items: center; gap: 8px; }
.cs-item__meta .icon { color: var(--text-2); }
.cs-item__figure { display: grid; gap: 10px; margin: 0; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.cs-item__figure .cs-figure { font-size: clamp(2.2rem, 1.6rem + 1.8vw, 3.2rem); }
.cs-item__body h3 { font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.9rem); line-height: 1.15; }
.cs-item__body > p { color: var(--text-2); }
.cs-item__outcome { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: baseline; }
.cs-item__outcome strong { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); }

/* Real inspections (cards rendered by site-video-cards.js into the root) */
.cs-videos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }

.cs-voices .cs-quote--sm { max-width: 44rem; margin: clamp(40px, 5vw, 64px) auto 0; text-align: center; }
.cs-voices__more { margin-top: 36px; text-align: center; }

/* Reviews ------------------------------------------------------------------ */
.quote .stars { display: block; margin-bottom: 22px; font-size: 1.05rem; }
.trustindex-widget-shell { padding: clamp(18px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--canvas); }
.trustindex-consent { display: grid; justify-items: center; align-content: center; gap: 18px; min-height: 200px; padding: 0 16px; text-align: center; }
.trustindex-consent p { max-width: 36rem; margin: 0; color: var(--text-2); }
.trustindex-widget-frame:not(:has(> :not(script):not(:empty), iframe))::before { content: "Loading the latest Trustindex reviews\2026"; display: grid; place-items: center; min-height: 200px; padding: 0 16px; font-size: 0.95rem; color: var(--text-2); text-align: center; }
.trustindex-widget-frame.is-unavailable:not(:has(> :not(script):not(:empty), iframe))::before { content: "The review feed hasn\2019t loaded in your browser. Please try again later, or call us on 0330 043 4650."; }
.rv-voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rv-voice { display: grid; grid-template-rows: 1fr auto; gap: 18px; margin: 0; padding: 26px 28px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.rv-voice p { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem); font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; text-wrap: pretty; }
.rv-voice footer { display: grid; gap: 10px; justify-items: start; font-size: 0.94rem; color: var(--text-2); }
.rv-voice footer .link { font-size: 0.92rem; }

/* Responsive --------------------------------------------------------------- */
@media (max-width: 1279px) {
  .cs-findings, .cs-outcome { grid-template-columns: 1fr; }
  .cs-findings__head { position: static; max-width: 46rem; }
  .cs-more { grid-template-columns: 1fr 1fr; }
  .cs-more .eyebrow { grid-column: 1 / -1; }
  .cs-item { grid-template-columns: 1fr 1fr; }
  .rv-voices { grid-template-columns: 1fr; }
  .rv-voice { grid-template-rows: auto; }
}

@media (max-width: 820px) {
  .cs-overview { grid-template-columns: 1fr; }
  .cs-fig--portrait { width: 100%; justify-self: stretch; }
  .page-hero__aside .cs-file__dl { grid-template-columns: 1fr; gap: 12px; }
  .finding { grid-template-columns: 44px minmax(0, 1fr); gap: 10px 16px; padding: 24px 0; }
  .finding .icon-tile { width: 44px; height: 44px; }
  .finding .shot { grid-column: 2; width: min(100%, 220px); }
  .cs-quote { padding: 22px 20px; }
  .cs-sample { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .cs-more { grid-template-columns: 1fr; }
  .cs-more a { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .cs-item { grid-template-columns: 1fr; gap: 24px; }
  .cs-item:nth-child(even) .cs-item__media { order: 0; }
  .cs-item__img { aspect-ratio: 4 / 3; }
  .cs-videos__grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .cs-videos .inspection-card__play { width: 48px; height: 48px; margin-top: calc(37.5% - 24px); }
  .rv-voice { padding: 22px 20px; }
}

@media (max-width: 480px) {
  .cs-videos__grid { grid-template-columns: 1fr; }
  .cs-sample { grid-template-columns: 72px minmax(0, 1fr); }
  .cs-sample .pill { font-size: 0.68rem; letter-spacing: 0.02em; }
  .cs-item__outcome { grid-template-columns: 1fr; gap: 4px; }
}

/* ==========================================================================
   Pages: about, why choose us, contact, Flettons Plus overview
   ========================================================================== */

/* Copy ------------------------------------------------------------------- */
.co-lead, .co-panel p, .co-value p, .co-band p { text-wrap: pretty; }

/* Tap targets: inline links keep their layout but gain a 44px hit area ---- */
.co-panel p a, .co-note a, .co-disclaimer a { display: inline-block; padding-block: 10px; margin-block: -10px; }

/* Shared blocks ------------------------------------------------------------ */
.co-lead { margin-top: 24px; max-width: 38rem; font-size: 1.1rem; color: var(--text-2); }
.co-gap { margin-top: 32px; }
.co-split-title { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); }
.co-center { text-align: center; }
.co-center.eyebrow::after { margin-inline: auto; }
.co-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.co-figure { margin: 0; }
.co-figure .split__img { aspect-ratio: 4 / 3; }
.co-figure figcaption { margin-top: 12px; font-size: 0.94rem; color: var(--text-2); }
.co-split--center { align-items: center; }
.co-links { display: flex; flex-wrap: wrap; gap: 4px 32px; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 0.95rem; }

/* Bordered panel inside a split (surface on canvas, canvas on surface) ---- */
.co-panel { display: grid; gap: 14px; align-content: start; padding: clamp(26px, 3vw, 40px); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.co-panel .eyebrow { margin-bottom: 0; }
.co-panel h3 { font-size: clamp(1.5rem, 1.25rem + 0.7vw, 2rem); line-height: 1.15; }
.co-panel p { color: var(--text-2); }
.co-panel p a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.co-panel .co-actions { margin-top: 8px; }

/* Notes -------------------------------------------------------------------- */
.co-note { display: flex; gap: 14px; align-items: flex-start; max-width: 62rem; margin-top: 32px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--text-2); font-size: 0.96rem; }
.sec--bone2 .co-note { background: var(--canvas); }
.co-note .icon { flex: none; margin-top: 2px; color: var(--text); }
.co-note strong, .co-disclaimer strong { color: var(--text); font-weight: 600; }
.co-note a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.co-disclaimer { max-width: 50rem; margin-top: 28px; font-size: 0.94rem; color: var(--text-2); }
.co-hero-note { display: flex; gap: 10px; align-items: flex-start; max-width: 36rem; margin-top: 24px; font-size: 0.92rem; color: var(--text-2); }
.co-hero-note .icon { flex: none; margin-top: 2px; color: var(--text); }
.co-cta-foot { margin-top: 26px; font-size: 0.95rem; color: var(--text-2); }
.co-cta-foot__sep { margin: 0 10px; }
.co-cta-foot a { display: inline-block; padding-block: 10px; margin-block: -10px; color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* Ruled check list (membership benefits, 4 across) -------------------------- */
.checks.co-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; border-top: 1px solid var(--line-strong); }
.co-list li { padding: 22px 0 22px 30px; border-bottom: 1px solid var(--line); font-weight: 600; line-height: 1.4; }
.co-list li::before { top: calc(22px + 0.2em); }
.co-list li::after { top: calc(22px + 0.55em); }
.co-list li span { display: block; margin-top: 4px; font-weight: 400; font-size: 0.96rem; color: var(--text-2); }

/* Stat row variants -------------------------------------------------------- */
.stat-row.co-stats--3 { grid-template-columns: repeat(3, 1fr); margin-top: clamp(40px, 5vw, 64px); }
.co-stats dd span { margin-left: 6px; font-size: 0.42em; font-weight: 500; color: var(--text-2); letter-spacing: 0; }
.co-stats dd.co-stats__note { max-width: 18rem; margin-top: 10px; font-size: 0.94rem; font-weight: 400; line-height: 1.45; letter-spacing: 0; color: var(--text-2); }

/* Values ---------------------------------------------------------------------- */
.co-value__name { margin: 0; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.co-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.co-value { display: grid; gap: 10px; align-content: start; padding: 20px 20px 22px; border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--surface); }
.co-value p { color: var(--text-2); font-size: 1rem; line-height: 1.45; }

/* Two-up band with a photo (About: people first) ---------------------------- */
.co-band { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.co-band__copy { display: grid; gap: 14px; align-content: center; justify-items: start; padding: clamp(28px, 4vw, 56px); }
.co-band__copy h2 { font-size: clamp(1.7rem, 1.3rem + 1.3vw, 2.6rem); }
.co-band__copy p { color: var(--text-2); max-width: 34rem; }
.co-band__copy .link { margin-top: 6px; }
.co-band__img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }

/* About: a word from our founder ------------------------------------------- */
.co-founder { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin: 0; }
.co-founder__img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; border-radius: var(--r-card); }
.co-founder__copy { display: grid; gap: 14px; align-content: center; }
.co-founder__copy h2 { font-size: clamp(1.7rem, 1.3rem + 1.3vw, 2.6rem); }
.co-founder__quote { display: grid; gap: 14px; margin: 6px 0 0; padding: 0 0 0 20px; border-left: 3px solid var(--accent); }
.co-founder__quote p { margin: 0; color: var(--text-2); font-size: 1.06rem; line-height: 1.6; text-wrap: pretty; }
.co-founder__quote p:first-child { color: var(--text); font-size: 1.18rem; font-weight: 500; }
.co-founder__sign { display: grid; gap: 2px; margin-top: 8px; padding-left: 23px; }
.co-founder__name { font-weight: 600; font-size: 1.08rem; color: var(--text); }
.co-founder__letters { margin-left: 6px; font-weight: 500; font-size: 0.9rem; letter-spacing: 0.02em; color: var(--text-2); }
.co-founder__role { font-size: 0.94rem; color: var(--text-2); }
@media (max-width: 820px) {
  .co-founder { grid-template-columns: 1fr; }
  .co-founder__img { max-width: 420px; aspect-ratio: 4 / 4.4; object-position: center 12%; }
}

/* Why choose us: the promise card in the hero ------------------------------- */
.co-promise { gap: 14px; }
.co-promise .icon-tile { margin-bottom: 4px; }
.co-promise__text { font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.8rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
.co-promise__text em { font-style: normal; font-weight: 400; color: var(--text-2); }
.co-promise__meta { font-size: 0.94rem; color: var(--text-2); }

/* Contact: hero with the form beside the copy -------------------------------- */
body.route-contact .page-hero__in { align-items: start; padding-top: clamp(40px, 5vw, 72px); }
body.route-contact .page-hero__bg { opacity: .6; }
.co-reach { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--line); }
.co-reach > div { display: grid; gap: 8px; align-content: start; justify-items: start; }
.co-reach__label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.co-reach__detail { font-size: 0.95rem; color: var(--text-2); }
.co-reach .btn { margin-top: 4px; }
.co-phone { display: inline-flex; align-items: center; min-height: 48px; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.2rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--text); white-space: nowrap; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 8px; transition: text-decoration-color .15s ease; }
.co-phone:hover { text-decoration-color: var(--line-strong); }
.co-callback { margin-top: 20px; font-size: 0.95rem; color: var(--text-2); }
.co-callback .link { margin-left: 4px; }

.co-form-card { padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); scroll-margin-top: calc(var(--header-h) + 16px); }
.co-form-card__head h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); }
.co-form-card__head p { margin-top: 10px; color: var(--text-2); font-size: 0.97rem; }
.co-form-card .error-summary, .co-form-card .notice { background: var(--canvas); }
.co-form-card .error-summary ul { color: var(--text-2); font-size: 0.95rem; }
.co-form-card .error-summary a { display: inline-block; padding-block: 10px; margin-block: -10px; }
.co-form-card .notice strong { display: block; margin-bottom: 2px; }
.co-form-card .notice span { font-weight: 400; color: var(--text-2); }
.co-secure { display: flex; gap: 10px; align-items: center; justify-content: center; text-align: center; }
.co-secure .icon { flex: none; color: var(--text-2); }

.co-contact-info { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.6fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.co-contact-info h2 { margin-bottom: clamp(32px, 4vw, 52px); }
.co-faq-more { margin-top: 28px; }
.co-evidence { display: grid; gap: 16px; position: sticky; top: calc(var(--header-h) + 24px); }
.co-evidence blockquote { margin: 0; }
.co-evidence .review:not(.review--score) p { font-size: 1.2rem; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; }
.co-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 6px 2px 0; font-size: 0.92rem; font-weight: 600; color: var(--text); }
.co-facts li { display: inline-flex; align-items: center; gap: 9px; }
.co-facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-2); }

/* Flettons Plus: route cards, how it works, illustrative dashboard ---------- */
.cards.co-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.co-route .card__img { aspect-ratio: 16 / 8; }
.co-route .card__body { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 36px); }
.co-route .card__body .eyebrow { margin: 0; }
.co-route h3 { font-size: clamp(1.5rem, 1.25rem + 0.7vw, 2rem); line-height: 1.1; }
.co-route__price, .co-route .card__body .co-route__price { display: flex; align-items: baseline; gap: 10px; color: var(--text); }
.co-route__price .price-label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.co-route__price .price { font-size: 2.2rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.co-route .checks { margin: 4px 0 10px; font-size: 0.97rem; }
.co-route .checks a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.co-route .card__body > .btn:last-child { margin-top: auto; align-self: flex-start; }

.plus-preview { display: grid; gap: 12px; margin: 0; padding: 14px; border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--canvas-deep); color: var(--text); }
.plus-preview__bar { display: flex; gap: 6px; padding: 2px 6px 4px; }
.plus-preview__bar span { width: 9px; height: 9px; border: 1px solid var(--line-strong); border-radius: 50%; }
.plus-preview__hero { display: grid; gap: 0; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.plus-preview__kicker { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.plus-preview__address { margin-top: 8px; font-size: 1.5rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.plus-preview__hero p:not([class]) { margin-top: 8px; font-size: 0.98rem; color: var(--text-2); }
.plus-preview__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.plus-preview__grid div { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.plus-preview__grid dt { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.plus-preview__grid dd { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 0.95rem; font-weight: 600; }
.plus-preview__timeline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; padding: 12px 6px 2px; border-top: 1px solid var(--line); font-size: 0.86rem; color: var(--text-2); }
.plus-preview__timeline li { display: inline-flex; align-items: center; }
.plus-preview__timeline li + li::before { content: ""; width: 26px; height: 1px; margin: 0 12px; background: var(--line-strong); }
.plus-preview figcaption { padding: 2px 6px 4px; font-size: 0.82rem; color: var(--text-2); }

/* About: hero with a photo beside the copy ----------------------------------- */
.co-hero-photo { margin: 0; }
.co-hero-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 40%; border: 1px solid var(--line); border-radius: var(--r-card); }

/* Responsive ----------------------------------------------------------------- */
@media (min-width: 1280px) {
  body.route-aboutUs .page-hero__in { grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr); align-items: center; }
  body.route-contact .page-hero__in { grid-template-columns: minmax(0, 1fr) minmax(460px, 0.9fr); gap: 48px 72px; }
}

/* The base rules fold .stat-row to two columns below 1280px; the 3-up row keeps its dividers until it stacks. */
@media (min-width: 821px) and (max-width: 1279px) {
  .stat-row.co-stats--3 > div:nth-child(-n + 2) { border-bottom: 0; }
  .stat-row.co-stats--3 > div:nth-child(3) { padding-left: 28px; border-left: 1px solid var(--line); }
}

@media (max-width: 1279px) {
  .co-hero-photo img { aspect-ratio: 16 / 9; object-position: center 35%; }
  .checks.co-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-contact-info { grid-template-columns: 1fr; }
  .co-evidence { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-facts { grid-column: 1 / -1; }
  body.route-contact .co-form-card { max-width: 760px; }
}

@media (max-width: 820px) {
  .checks.co-list, .cards.co-cards--2, .co-evidence, .co-values, .co-band, .co-reach { grid-template-columns: 1fr; }
  .stat-row.co-stats--3 { grid-template-columns: 1fr; }
  .stat-row.co-stats--3 > div { padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .stat-row.co-stats--3 > div:last-child { border-bottom: 0; }
  .co-band__img { min-height: 220px; aspect-ratio: 16 / 10; height: auto; }
  .co-hero-photo img { aspect-ratio: 4 / 3; }
  .co-reach { gap: 24px; }
  .co-reach .btn { width: 100%; }
  .co-form-card { padding: 20px 16px; }
  .co-note { padding: 18px; }
  .co-cta-foot > span { display: block; }
  .co-cta-foot > .co-cta-foot__sep { display: none; }
  .plus-preview__timeline { flex-direction: column; align-items: flex-start; gap: 8px; }
  .plus-preview__timeline li::before, .plus-preview__timeline li + li::before { content: ""; width: 6px; height: 6px; margin: 0 10px 0 0; border-radius: 50%; background: var(--line-strong); }
  .co-panel .co-actions .btn, .co-route .btn, .co-actions .btn { width: 100%; }
}

@media (max-width: 400px) {
  .co-phone { font-size: 1.6rem; }
}

/* ==========================================================================
   Pages: partners (landing and application)
   ========================================================================== */

.pa { padding: clamp(28px, 4vw, 56px) 0 clamp(64px, 8vw, 112px); }
.pa .crumbs { margin-bottom: 18px; }
/* Every application step is one centred form, the same width throughout. */
.wrap.pa__shell { width: min(760px, 100% - var(--gutter) * 2); }
.pa__panel { display: grid; gap: 24px; padding: clamp(22px, 3.5vw, 40px); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.pa__panel--wide { max-width: 1040px; }
.pa__panel--narrow { max-width: 640px; margin: 0 auto; }
.pa__head h1, .pa__head h2 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); line-height: 1.08; }
.pa__head .lead { margin-top: 10px; font-size: 1.05rem; }
.pa__hp, .co__hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.pa__fieldset { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.pa__fieldset legend { padding: 0; margin-bottom: 8px; font-weight: 600; }
.pa__optional { margin-left: 4px; font-weight: 400; color: var(--text-2); }
.chip:has(input:disabled) { opacity: 0.4; cursor: not-allowed; }
.chip:has(input:disabled):hover { border-color: var(--line-strong); }
.pa__columns { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
.pa__col { display: grid; gap: 18px; align-content: start; }
.pa__col + .pa__col { padding-left: 40px; border-left: 1px solid var(--line); margin-left: -40px; }
.pa__col h2 { font-size: 1.2rem; }
.pa__services { padding: 20px; border: 1px solid var(--line); border-radius: var(--r); }
.pa__file { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--canvas); font-size: 0.92rem; }
.pa__file em { font-style: normal; color: var(--text-2); }
.field input[type="file"] { padding: 10px 12px; border: 1.5px dashed var(--line-strong); border-radius: var(--r); background: var(--canvas); color: var(--text-2); font-size: 0.92rem; width: 100%; }
.field input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.pa__note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r); font-size: 0.92rem; color: var(--text-2); }
.pa__note .icon { flex: none; margin-top: 2px; color: var(--text); }
.pa__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pa__nav--center { justify-content: center; }
.pa__center { text-align: center; }
.pa__foot { padding-top: 16px; border-top: 1px solid var(--line); text-align: center; font-size: 0.92rem; color: var(--text-2); }
.pa__foot a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.pa__review { display: grid; grid-template-columns: 1fr; gap: 14px; }
.pa__card { display: grid; gap: 14px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--canvas); }
.pa__card header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.pa__card header h2 { font-size: 1.15rem; }
.pa__card header a { font-size: 0.9rem; color: var(--text); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
.pa__card header a:hover { text-decoration-color: var(--text); }
.pa__card dl { margin: 0; display: grid; gap: 8px; }
.pa__card dl div { display: grid; grid-template-columns: minmax(120px, 0.45fr) 1fr; gap: 12px; font-size: 0.95rem; }
.pa__card dt { color: var(--text-2); }
.pa__card dd { margin: 0; overflow-wrap: anywhere; }
.pa__mark { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--ok); color: var(--ok-ink); }
.pa__next { display: grid; gap: 12px; counter-reset: s; }
.pa__next li { position: relative; padding-left: 36px; color: var(--text-2); counter-increment: s; }
.pa__next li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 1px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.pa__next strong { color: var(--text); }

/* Partner landing page */
.pl__access { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; align-items: center; padding: 28px 32px; border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--surface); }
.pl__access h2 { font-size: 1.4rem; }
.pl__access p { margin-top: 8px; color: var(--text-2); }
.pl__access-actions { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 1023px) {
  .pl__access { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .pa { padding-top: 20px; }
  .pa__panel { padding: 20px 16px; }
  .pa__columns { grid-template-columns: 1fr; gap: 24px; }
  .pa__col + .pa__col { padding-left: 0; margin-left: 0; border-left: 0; padding-top: 24px; border-top: 1px solid var(--line); }
  .pa__review { grid-template-columns: 1fr; }
  .pa__card dl div { grid-template-columns: 1fr; gap: 2px; }
  .pa__nav { flex-direction: column-reverse; align-items: stretch; }
  .pa__nav .btn { width: 100%; }
}

/* ==========================================================================
   Pages: quote journey
   Property, your details, your quote, booking and the payment return.
   ========================================================================== */

.quote-page main { background: var(--canvas); }
.qj, .qr, .qb, .qp { padding: clamp(16px, 2.5vw, 28px) 0 clamp(48px, 6vw, 80px); }
.qj__head { margin-bottom: clamp(16px, 2.5vw, 28px); }
.qj__head + .notice, .qj__head + .error-summary { margin-bottom: 24px; }
.notice + .error-summary { margin-top: 12px; }

/* Shared journey panels --------------------------------------------------- */
.qj__panel { display: block; }
/* A new step fades in where it opens (opacity only: a transform would unpin the phone's fixed Continue bar). */
.qj__panel.is-entering { animation: qj-step-in .22s ease-out both; }
@keyframes qj-step-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .qj__panel.is-entering { animation: none; } }
.qj__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(24px, 4vw, 64px); align-items: start; }
/* Steps before the quote are one centred column: the form is the only thing on the page */
.qj__grid--single { grid-template-columns: minmax(0, 1fr); max-width: 52rem; margin-inline: auto; }
.qj .qj__head, .qj > .wrap > .notice, .qj > .wrap > .error-summary { max-width: 52rem; margin-inline: auto; }
/* In the narrower column the stepper sizes each step to its label and stretches the connecting lines */
@media (min-width: 821px) {
  .qj .stepper { display: flex; }
  .qj .stepper__item { flex: none; white-space: nowrap; padding-right: 0; }
  .qj .stepper__item + .stepper__item { flex: 1 1 auto; }
  .qj .stepper__item + .stepper__item::before { flex: 1 1 auto; width: auto; min-width: 16px; margin: 0 12px; }
}
.qj__main { display: grid; gap: 22px; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.qj__panel-head h1, .qj__panel-head h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height: 1.12; outline: none; }
.qj__panel-head .lead { margin-top: 10px; font-size: 1rem; }
.qj__panel-head .eyebrow { margin-bottom: 10px; }
.qj__hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.qj__inline { display: flex; gap: 10px; align-items: stretch; }
.qj__inline input { flex: 1 1 auto; min-width: 0; text-transform: uppercase; }
.qj__inline input::placeholder { text-transform: none; }
.qj__inline .btn { flex: none; min-height: 50px; }
.qj__coverage { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 0.86rem; color: var(--text); }
.qj__coverage.is-no { border-color: rgba(232, 193, 90, 0.6); border-radius: var(--r); display: block; padding: 12px 14px; line-height: 1.5; }
.qj__coverage.is-no a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.qj__status { display: flex; align-items: center; gap: 10px; min-height: 22px; font-size: 0.92rem; color: var(--text-2); }
.qj__status[hidden] { display: none; }
.qj__status.is-loading::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--text-2); border-right-color: transparent; border-radius: 50%; animation: fs-spin .8s linear infinite; flex: none; }
.qj__status.is-error { color: var(--danger); }
/* Address finder: the addresses at a postcode open as a pop-up card over the page. */
.qj__finder { position: relative; }
.qj__pop { display: flex; flex-direction: column; border: 1.5px solid var(--line-strong); border-radius: var(--r); background: var(--surface); box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .85), 0 0 0 1px rgba(0, 0, 0, .3); overflow: hidden; }
.qj__pop-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 0 16px; }
.qj__pop-title { margin: 0; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); font-weight: 600; }
.qj__pop-close { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--canvas); color: var(--text); font: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.qj__pop-close:hover, .qj__pop-close:focus-visible { border-color: var(--text); outline: none; }
.qj__pop-sub { margin: 2px 16px 8px; font-size: 0.86rem; color: var(--text-2); }
.qj__pop-list { flex: 1 1 auto; min-height: 0; margin: 0; padding: 4px 6px 6px; list-style: none; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--line); }
.qj__pop-list:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.qj__pop-list [role="option"] { padding: 12px; border-radius: 8px; font-size: 0.98rem; line-height: 1.35; color: var(--text); cursor: pointer; }
.qj__pop-list [role="option"] + [role="option"] { border-top: 1px solid var(--line); }
@media (hover: hover) { .qj__pop-list [role="option"]:hover { background: var(--action-bg); color: var(--action-fg); border-top-color: transparent; } }
.qj__pop-list [role="option"].is-active, .qj__pop-list [role="option"]:active { background: var(--action-bg); color: var(--action-fg); border-top-color: transparent; }
.qj__pop-foot { margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--text-2); }
/* The pop-up is a centred card over a dimmed page, with space all round, on every screen size. */
.qj__addresses { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px 20px; }
.qj__addresses[hidden] { display: none; }
.qj__addresses::before { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, .7); }
.qj__pop { position: relative; width: 100%; max-width: 560px; max-height: 64vh; max-height: 64dvh; border-radius: 18px; box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .9); }
.qj__pop-list [role="option"] { padding: 14px 12px; }
html.qj-sheet-open, html.qj-sheet-open body { overflow: hidden; }
.link-btn { appearance: none; border: 0; padding: 0; background: none; color: var(--text); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); cursor: pointer; }
.link-btn:hover { text-decoration-color: var(--text); }
.qj__selected { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; padding: 16px 18px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--canvas); }
.qj__selected .icon { margin-top: 2px; }
.qj__selected-label { display: block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); font-weight: 600; }
.qj__selected strong { display: block; margin-top: 2px; line-height: 1.35; overflow-wrap: anywhere; }
.qj__selected-record { display: block; margin-top: 6px; font-size: 0.86rem; color: var(--text-2); }
.qj__manual { display: grid; gap: 16px; margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--r); }
.qj__manual legend { padding: 0 6px; font-weight: 600; }
.qj__fieldset { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.qj__fieldset legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: 0.98rem; }
.qj__fieldset legend span:not(.qj__suggest-badge), .field__label span:not(.qj__suggest-badge) { font-weight: 400; color: var(--text-2); }
.qj__sub { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--canvas); }
.qj__suggest-badge { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); vertical-align: middle; }
.qj__record-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r); font-size: 0.94rem; color: var(--text-2); }
.qj__record-note .icon { flex: none; margin-top: 2px; color: var(--text); }
.qj__record-note em { font-style: normal; color: var(--text); font-weight: 600; }
.qj__record-note--warn { margin-top: 10px; border-color: var(--line-strong); background: var(--surface); color: var(--text); }
.qj__epc-value { display: flex; gap: 12px; align-items: center; min-height: 50px; font-size: 1.1rem; }
.qj__epc-value strong { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: var(--r); font-weight: 700; }
.qj__epc-value a { font-size: 0.88rem; color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.choice-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.choice--invalid { border-color: var(--danger); }
/* Report style: the two real front covers, so the choice is visual rather than described */
.qb__themes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 540px; }
.choice--cover { grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: start; padding: 12px 14px 14px; }
.choice--cover .choice__cover { grid-column: 1 / -1; display: block; aspect-ratio: 480 / 679; overflow: hidden; border-radius: calc(var(--r) - 4px); border: 1px solid var(--line); background: var(--canvas-deep); box-shadow: 0 18px 32px -22px rgba(0, 0, 0, .85); transition: transform .25s ease, box-shadow .25s ease; }
.choice--cover .choice__cover--light { background: #fff; }
.choice--cover .choice__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.choice--cover:hover .choice__cover, .choice--cover:has(input:checked) .choice__cover { transform: translateY(-2px); box-shadow: 0 24px 38px -22px rgba(0, 0, 0, .9); }
.choice--cover .choice__body { margin-top: 12px; }
.choice--cover .choice__mark { margin-top: 12px; }
@media (max-width: 480px) { .qb__themes { gap: 10px; } .choice--cover { padding: 8px 10px 10px; } .choice--cover .choice__hint { display: none; } }
.qj__consent { background: var(--canvas); }
.qj__main .form__row { align-items: start; }
.qj__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 6px; }
.qj__nav .btn--primary { min-width: 200px; }
.qj__recap { padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--canvas); }
.qj__recap-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.qj__recap-head .eyebrow { margin: 0; }
.qj__recap-list { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 20px; }
.qj__recap-list > div:first-child { grid-column: 1 / -1; }
@media (max-width: 640px) { .qj__recap-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qj__recap-list dt { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); font-weight: 600; }
.qj__recap-list dd { margin: 2px 0 0; font-size: 0.95rem; overflow-wrap: anywhere; }

/* The building step names the property it is about */
.qj__property-line { display: block; margin-top: 12px; font-size: 0.95rem; line-height: 1.5; }
.qj__property-line .icon { color: var(--text-2); vertical-align: -4px; margin-right: 6px; }
.qj__property-line strong { overflow-wrap: anywhere; margin-right: 10px; }

/* Property record summary (building step): confirm first, edit only if wrong */
/* The property questions wait behind the loading card while the record is on its way */
.qj__questions { display: grid; gap: inherit; }
.qj__loading { display: flex; align-items: center; gap: 16px; min-height: 96px; padding: 20px; border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--canvas); color: var(--text-2); }
.qj__loading strong { display: block; margin-bottom: 2px; color: var(--text); font-weight: 600; }
.qj__record { display: grid; gap: 14px; padding: 18px 20px; border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--canvas); }
.qj__record .eyebrow { margin-bottom: 6px; }
.qj__record-lead { color: var(--text-2); font-size: 0.95rem; }
.qj__record-list { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px 20px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.qj__record-item { min-width: 0; }
.qj__record-item small { display: block; margin-top: 3px; font-size: 0.8rem; font-weight: 400; line-height: 1.35; color: var(--text-2); }
.qj__record-list dt { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); font-weight: 600; }
.qj__record-list dd { margin: 3px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.qj__record-list dd a { font-weight: 400; font-size: 0.86rem; color: var(--text-2); text-decoration: underline; text-underline-offset: 4px; margin-left: 6px; }
.qj__record-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.qj__record.is-confirmed { border-color: rgba(37, 99, 235, 0.55); }
.qj__record.is-confirmed [data-record-confirm] { display: none; }
.qj__record.is-confirmed [data-record-edit] { min-height: 40px; padding-inline: 14px; font-size: 0.9rem; }
.qj__record.is-confirmed .qj__record-lead { display: none; }
@media (max-width: 820px) { .qj__record { padding: 16px 14px; } .qj__record-actions .btn { width: 100%; } }

/* Stage 3 — results -------------------------------------------------------- */
.qr__intro { display: grid; gap: 0; margin-bottom: clamp(16px, 2.5vw, 28px); max-width: 52rem; }
.qr__about { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 1rem; line-height: 1.5; color: var(--text-2); }
.qr__about .icon { flex: none; margin-top: 3px; color: var(--text); }
.qr__about strong { color: var(--text); font-weight: 600; }
.qr__about-edit { margin-left: 6px; color: var(--text); font-weight: 600; white-space: nowrap; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
.qr__about-edit:hover { text-decoration-color: var(--text); }
.qr__intro h1 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.1; }
.qr__intro .lead { margin-top: 10px; max-width: 40rem; font-size: 1rem; }
.qr__email-note { display: none; }
.qr__review { display: grid; grid-template-columns: auto 1fr; gap: 16px; margin-bottom: 24px; padding: 22px 24px; border: 1px solid var(--warn); border-radius: var(--r-card); background: var(--surface); }
.qr__review .icon { color: var(--warn); margin-top: 2px; }
.qr__review h2 { font-size: 1.2rem; margin-bottom: 6px; }
.qr__review p { color: var(--text-2); }
.qr__review a { color: var(--text); font-weight: 600; }
.qr__layout, .qb__layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: clamp(20px, 3vw, 40px); align-items: start; }
.qr__services { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: start; }

.svc { display: grid; gap: 14px; padding: clamp(18px, 2.5vw, 24px); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); transition: border-color .15s ease; }
.svc.is-selected { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.svc--recommended:not(.is-selected) { border-color: var(--line-strong); }
.svc--ineligible, .svc--unavailable { background: transparent; gap: 10px; padding-block: 16px; }
.svc--ineligible .svc__head, .svc--unavailable .svc__head { align-items: center; }
.svc--ineligible .svc__price, .svc--unavailable .svc__price, .svc--needs_review .svc__price { display: none; }
.svc__extras .choice--disabled .choice__price { font-size: 0.86rem; }
.svc--ineligible .svc__title h2, .svc--unavailable .svc__title h2 { color: var(--text-2); }
.svc__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.svc__kicker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; min-height: 0; }
.svc__kicker:empty { display: none; }
.svc__title h2 { font-size: 1.25rem; line-height: 1.2; }
.svc__desc { margin-top: 6px; color: var(--text-2); font-size: 0.96rem; max-width: 42rem; }
.svc__price { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.svc__price strong { font-size: 2.1rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.svc__price span { font-size: 0.78rem; color: var(--text-2); }
.svc__price--na { color: var(--text-3); }
.svc__reasons { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r); background: var(--canvas); border: 1px solid var(--line); font-size: 0.98rem; color: var(--text-2); }
.svc__reasons li { position: relative; padding-left: 18px; }
.svc__reasons li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--text-2); }
.svc--ineligible .svc__reasons li::before { background: var(--danger); }
.svc--needs_review .svc__reasons li::before { background: var(--warn); }
.svc__inclusions summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-weight: 600; font-size: 0.95rem; }
.svc__inclusions summary::-webkit-details-marker { display: none; }
.svc__inclusions summary::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--text); border-bottom: 1.5px solid var(--text); transform: rotate(45deg); transition: transform .2s ease; }
.svc__inclusions[open] summary::after { transform: rotate(-135deg); }
.svc__inclusions .checks { margin-top: 10px; font-size: 0.95rem; color: var(--text-2); }
.svc__note { display: block; margin-top: 3px; font-size: 0.85rem; line-height: 1.5; text-wrap: pretty; }
.svc__extras { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.svc__extras legend { margin-bottom: 8px; font-weight: 600; font-size: 0.95rem; }
.svc__extras legend span { font-weight: 400; color: var(--text-2); }
.svc__extras .choice { grid-template-columns: 1fr auto auto; min-height: 48px; padding: 10px 14px; }
.svc__extras .choice__hint { font-size: 0.84rem; }
.svc__extras .choice--disabled .choice__price { color: var(--text-2); font-weight: 500; }
/* Extras on a card that is not chosen are muted until that card is chosen */
.svc:not(.is-selected) .svc__extras { opacity: .55; }
/* An extra on a card that is not yet chosen stays clickable: ticking it chooses
   that survey (quote-results.js). It was pointer-events:none, so the tile
   swallowed every click and read as broken (surveyor, 5 Oct 2026). */
.svc:not(.is-selected) .svc__extras .choice { cursor: pointer; }
.svc__choose { display: block; position: relative; margin-top: 4px; }
.svc__choose input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.svc__choose .btn { cursor: pointer; pointer-events: none; }
.svc__choose:has(input:focus-visible) .btn { outline: 2px solid var(--focus); outline-offset: 3px; }
.svc__foot { font-size: 0.92rem; color: var(--text-2); }
.svc__foot a { color: var(--text); font-weight: 600; }

.qr__summary, .qb__aside { position: sticky; top: calc(var(--header-h) + 20px); }
/* Booking: the pay step closes the form, directly under the terms */
.qb__pay { display: grid; gap: 14px; margin-top: 22px; padding: 20px; border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--surface-2); }
.qb__pay-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.qb__pay-total > span:first-child { display: grid; gap: 2px; }
.qb__pay-total small { font-size: 0.86rem; color: var(--text-2); }
.qb__pay-figure { display: grid; justify-items: end; gap: 4px; }
.qb__pay-figure strong { font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.qb__pay .small { margin: 0; color: var(--text-2); }
.qb__pay-hint { grid-column: 1 / -1; margin: 0; font-size: 0.9rem; color: var(--text-2); }
.qb__pay-hint .icon { vertical-align: -2px; margin-right: 4px; }
/* Quote results: the chosen card shows a status, not a button that seems to do nothing */
.svc__chosen { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface-2); font-weight: 600; cursor: default; }
.svc__chosen::before { content: ""; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.svc__chosen small { font-weight: 400; color: var(--text-2); font-size: 0.86rem; }
.qr__summary-card { display: grid; gap: 14px; padding: 20px; border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--surface); }
.qr__summary-card .eyebrow { margin-bottom: 0; }
.qr__summary-empty { color: var(--text-2); font-size: 0.95rem; }
.qr__lines { display: grid; gap: 8px; margin: 0; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.qr__lines li { display: flex; justify-content: space-between; gap: 12px; }
.qr__lines li span { color: var(--text-2); }
.qr__lines li strong { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qr__lines-note span, .qr__lines-note strong { color: var(--text-3); font-weight: 400; }
.qr__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.qr__total span { font-weight: 600; }
.qr__total small { display: block; font-size: 0.78rem; color: var(--text-2); font-weight: 400; }
.qr__upgrade { font-size: 0.92rem; border-color: var(--ok); }
.qr__nudge { display: grid; gap: 10px; padding: 14px 18px; border-radius: var(--r); border: 1px dashed var(--line-strong); }
.qr__nudge[hidden] { display: none; }
.qr__nudge p { margin: 0; font-size: 0.92rem; }
.qr__total strong { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.is-pricing .qr__total strong { opacity: .5; transition: opacity .15s ease; }
.qr__summary-error { margin: 0; }
.qr__meta { display: grid; gap: 6px; font-size: 0.9rem; color: var(--text-2); }
.qr__meta a { color: var(--text); font-weight: 600; }
.qr__summary-card .small .icon { vertical-align: -2px; margin-right: 4px; }

/* Stage 4 — booking --------------------------------------------------------- */
.qb__main { display: grid; gap: 16px; }
.qb__section { display: grid; gap: 16px; padding: clamp(18px, 2.5vw, 24px); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.qb__section h2 { font-size: 1.2rem; }
.qb__section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.qb__section-head .link-btn { font-size: 0.88rem; font-weight: 500; }
.qb__facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; padding: 16px 18px; border-radius: var(--r); background: var(--canvas); border: 1px solid var(--line); }
.qb__facts dt { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); font-weight: 600; }
.qb__facts dd { margin: 3px 0 0; font-size: 0.95rem; overflow-wrap: anywhere; }
.qb__conditional { display: grid; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--canvas); }
.qb__terms { display: grid; gap: 10px; max-height: 220px; overflow: auto; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--canvas); font-size: 0.94rem; color: var(--text-2); }
.qb__terms strong { color: var(--text); }
/* Booking: the consumer's right to cancel, shown in full before the tick boxes */
.qb__terms a, .qb__cancel a, .qb__wait a, .qb .choice__title a, .qb__pay .small a { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.qb__cancel { display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--canvas); font-size: 0.94rem; color: var(--text-2); }
.qb__cancel h3 { margin: 0; font-size: 1.02rem; color: var(--text); }
.qb__cancel p { margin: 0; }
.qb__wait { margin: -6px 0 0; font-size: 0.92rem; color: var(--text-2); }
.qb__chosen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: center; }
.qb__chosen strong { display: block; font-size: 1.05rem; }
.qb__chosen a { display: inline-block; margin-top: 2px; font-size: 0.86rem; color: var(--text-2); text-decoration: underline; text-underline-offset: 4px; }
.qb__chosen a:hover { color: var(--text); }

/* Payment return -------------------------------------------------------------- */
.qp__card { max-width: 46rem; margin: 0 auto; display: grid; gap: 16px; padding: clamp(22px, 3.5vw, 36px); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.qp__card h1 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.1; }
.qp__card h2 { font-size: 1.2rem; margin-top: 10px; }
.qp__card .eyebrow { margin-bottom: 0; }
.qp__mark { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line-strong); color: var(--text); }
.qp__mark--ok { background: var(--ok); border-color: var(--ok); color: var(--ok-ink); }
.qp__mark--fail { border-color: var(--danger); color: var(--danger); }
.qp__lines { border-bottom: 0; padding-bottom: 0; }
.qp__total { padding-top: 12px; border-top: 1px solid var(--line-strong); }
.qp__total strong { font-size: 1.5rem; }
.qp__steps { display: grid; gap: 12px; counter-reset: s; }
.qp__steps li { position: relative; padding-left: 36px; color: var(--text-2); font-size: 0.98rem; counter-increment: s; }
.qp__steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 1px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.qp__steps strong { color: var(--text); }
.qp__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.qp__note { padding: 14px 16px; border: 1px solid var(--warn); border-radius: var(--r); color: var(--text-2); font-size: 0.95rem; }
.qp__note a { color: var(--text); font-weight: 600; }

/* Full-width survey cards on wider screens: name on the left, price on the right; what's included and
   the optional extras side by side, the choose control under them on the right */
@media (min-width: 821px) {
  .svc__head { grid-template-columns: auto minmax(0, 1fr) auto; }
  .svc__price { grid-column: auto; flex-direction: column; align-items: flex-end; gap: 4px; padding-top: 2px; border-top: 0; text-align: right; }
  .svc:has(> .svc__extras) { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: 28px; align-items: start; }
  .svc > .svc__head, .svc > .svc__reasons, .svc > .svc__foot { grid-column: 1 / -1; }
  .svc:has(> .svc__extras) > .svc__inclusions { grid-column: 1; }
  .svc:has(> .svc__extras) > .svc__extras { grid-column: 2; }
  .svc > .svc__choose { grid-column: 1 / -1; justify-self: end; width: min(100%, 320px); }
}

/* Responsive ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .qj__grid, .qr__layout, .qb__layout, .qr__intro { grid-template-columns: 1fr; }
  .qr__summary, .qb__aside { position: static; }
  .qr__summary { order: -1; }
  .qb__aside { order: -1; }
  .qr__summary-card, .qb__aside .qr__summary-card { padding: 20px; }
}

@media (max-width: 820px) {
  .qj, .qr, .qb, .qp { padding-top: 12px; }
  .qj__main, .svc, .qb__section { padding: 18px 14px; border-radius: var(--r-card); }
  .qr__services { grid-template-columns: 1fr; }
  .qj__inline { flex-direction: column; }
  .qj__inline .btn { width: 100%; }
  .choice-grid--3 { grid-template-columns: 1fr; }
  .choice-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qj__nav { flex-direction: column-reverse; align-items: stretch; }
  .qj__nav .btn { width: 100%; }
  .qj__nav > span { display: none; }
  .svc__price strong { font-size: 1.8rem; }
  .svc__extras .choice { grid-template-columns: 1fr auto; }
  .svc__extras .choice__price { grid-row: 2; justify-self: start; font-size: 0.9rem; }
  .svc__extras .choice__mark { grid-row: 1 / span 2; align-self: center; }
  .qb__facts { grid-template-columns: 1fr; }
  .qp__actions .btn { width: 100%; }
  /* Mobile: the results summary becomes a compact bar fixed to the bottom of the viewport */
  .qr { padding-bottom: 140px; }
  html:has(.qr__summary) { scroll-padding-bottom: 170px; }
  /* top:auto matters: the desktop sticky rule sets top, and fixed + top + bottom would stretch the bar over the whole screen. */
  .qr__summary { order: 2; position: fixed; left: 0; right: 0; top: auto; bottom: 0; height: auto; z-index: 240; }
  .qr__summary-card { grid-template-columns: 1fr auto; align-items: center; gap: 8px 14px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-radius: 0; border-width: 1px 0 0; background: rgba(23, 26, 28, 0.97); backdrop-filter: blur(12px); }
  .qr__summary-card .eyebrow { display: none; }
  .qr__summary-card .qr__lines, .qr__summary-card .qr__meta, .qr__summary-card .small { display: none; }
  .qr__summary-card .qr__total { flex-direction: column; align-items: flex-start; gap: 0; }
  .qr__summary-card .qr__total span { font-size: 0.8rem; }
  .qr__summary-card .qr__total strong { font-size: 1.5rem; }
  .qr__summary-card .btn { min-height: 48px; width: auto; padding-inline: 16px; font-size: 0.92rem; }
  .qr__summary-card .qr__summary-error { grid-column: 1 / -1; }
  .qr__summary-card .qr__summary-empty { grid-column: 1 / -1; font-size: 0.88rem; }
  /* The booking step reuses the summary card but not the fixed bar: keep it a framed card with a full-width pay button */
  .qb__aside .qr__summary-card { border-width: 1px; border-radius: var(--r-card); background: var(--surface); backdrop-filter: none; padding: 16px; }
  .qb__aside .qr__summary-card .btn { grid-column: 1 / -1; width: 100%; }
  .svc .pill { white-space: normal; border-radius: var(--r); text-align: left; }
  .qr__email-note { display: block; margin: -8px 0 18px; font-size: 0.92rem; color: var(--text-2); }
  /* The assistant sits above the fixed prices bar (voice-assistant.js sets the exact height); this is the fallback. */
  body:has(.qr__summary) #voice-assistant-root { bottom: 104px; }
}

/* Quote results, concept A (owner, 4 Nov 2026): a small property box, cards that open and close with the
   chosen one open, a slim bar on phones and full-width Continue / Save for later at the end. */
.qr__about { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: 0.95rem; line-height: 1.4; }
.qr__about p { margin: 0; min-width: 0; }
.qr__about small { display: block; margin-top: 2px; font-size: 0.84rem; color: var(--text-2); }
.qr__about .qr__about-edit { margin-left: 0; }
.qr__intro .lead strong { color: var(--text); font-weight: 600; }
.svc__head { grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; cursor: pointer; }
.svc__price { grid-column: auto; flex-direction: column; align-items: flex-end; gap: 4px; padding-top: 0; border-top: 0; text-align: right; }
.svc__toggle { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--canvas); color: var(--text); cursor: pointer; }
.svc__toggle::before { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
.svc__toggle[aria-expanded="true"]::before { transform: translateY(2px) rotate(-135deg); }
.svc__toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.svc__body { display: grid; gap: 14px; }
.svc.is-collapsed { gap: 0; }
.svc.is-collapsed .svc__body { display: none; }
.svc__label { margin: 0 0 8px; font-weight: 600; font-size: 0.95rem; }
.svc__inclusions .checks { margin-top: 0; }
.qr__end { display: none; }
@media (min-width: 821px) {
  .svc__body:has(> .svc__extras) { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: 28px; align-items: start; }
  .svc__body > .svc__reasons, .svc__body > .svc__foot { grid-column: 1 / -1; }
  .svc__body:has(> .svc__extras) > .svc__inclusions { grid-column: 1; }
  .svc__body:has(> .svc__extras) > .svc__extras { grid-column: 2; }
  .svc__body > .svc__choose { grid-column: 1 / -1; justify-self: end; width: min(100%, 320px); }
}
@media (max-width: 820px) {
  .svc__head { grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; }
  .svc__head .icon-tile { display: none; }
  .svc__price strong { font-size: 1.5rem; }
  .svc__price span { font-size: 0.72rem; }
  .svc__desc { font-size: 0.86rem; }
  .svc__kicker { margin-bottom: 4px; }
  .qr { padding-bottom: 96px; }
  html:has(.qr__summary) { scroll-padding-bottom: 110px; }
  /* The bar shows the total and Continue only; notes and Save for later move to the end of the page. */
  .qr__summary .qr__upgrade, .qr__summary .qr__nudge, .qr__summary .qr__save { display: none !important; }
  .qr__end { display: grid; gap: 10px; margin-top: 6px; }
  .qr__end .small { margin: 0; text-align: center; color: var(--text-2); }
}

/* ==========================================================================
   Admin: the staff area (pricing, buyer types, site controls, video cards, Plus
   entitlements, coverage, contacts, partner applications). It uses the site's own
   buttons, notices, pills, chips, eyebrows and forms; this section lays out the
   shell and the pages and sets the denser admin controls. Sign-in is an account card.
   ========================================================================== */

/* Shell ------------------------------------------------------------------- */
.admin { font-size: 0.94rem; line-height: 1.5; }
.admin-app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.admin-sidebar { position: sticky; top: 0; display: flex; flex-direction: column; gap: 6px; height: 100vh; height: 100dvh; padding: 24px 14px 18px; overflow-y: auto; overscroll-behavior: contain; border-right: 1px solid var(--line); background: var(--canvas-deep); }
.admin-sidebar__logo { align-self: flex-start; padding: 6px 10px; }
.admin-sidebar__logo img { height: 24px; width: auto; }
.admin-sidebar__strap { padding: 0 10px; margin-bottom: 18px; color: var(--text-3); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.admin-sidebar__nav { display: grid; gap: 2px; }
.admin-sidebar__nav a { display: flex; align-items: center; min-height: 42px; padding: 0 12px; border-radius: var(--r); color: var(--text-2); font-weight: 500; transition: background-color .15s ease, color .15s ease; }
.admin-sidebar__nav a:hover { background: var(--surface); color: var(--text); }
.admin-sidebar__nav a.is-active { background: var(--surface-2); color: var(--text); box-shadow: inset 2px 0 0 var(--text); }
.admin-sidebar__foot { display: grid; justify-items: start; gap: 10px; margin-top: auto; padding: 16px 10px 0; border-top: 1px solid var(--line); color: var(--text-3); font-size: 0.82rem; }
.admin-main { min-width: 0; padding: 0 32px 56px; }
.admin-topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 12px 20px; min-height: 72px; margin: 0 -32px 28px; padding: 14px 32px; border-bottom: 1px solid var(--line); background: rgba(23, 26, 28, 0.92); backdrop-filter: blur(12px); }
.admin-topbar h1 { flex: 1 1 auto; min-width: 0; font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.6rem); line-height: 1.2; }
.admin-topbar__actions { display: flex; align-items: center; gap: 10px; }
.admin-topbar__menu { display: none; flex: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r); background: transparent; cursor: pointer; }
.admin-topbar__burger { position: relative; display: block; width: 20px; height: 14px; pointer-events: none; }
.admin-topbar__burger-line { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 1px; background: currentColor; transition: transform .2s ease, opacity .15s ease, top .2s ease; }
.admin-topbar__burger-line:nth-child(1) { top: 0; }
.admin-topbar__burger-line:nth-child(2) { top: 6px; }
.admin-topbar__burger-line:nth-child(3) { top: 12px; }
.admin-app.is-sidebar-open .admin-topbar__burger-line:nth-child(1) { top: 6px; transform: rotate(45deg); }
.admin-app.is-sidebar-open .admin-topbar__burger-line:nth-child(2) { opacity: 0; }
.admin-app.is-sidebar-open .admin-topbar__burger-line:nth-child(3) { top: 6px; transform: rotate(-45deg); }
.admin-page-intro { max-width: 52rem; margin: -8px 0 24px; color: var(--text-2); }
.admin-main > .notice, .admin-section > .notice { margin-bottom: 20px; }
.admin-main > .admin-actions { margin-bottom: 18px; }

/* Sections, cards and copy ------------------------------------------------ */
.admin-section { margin-bottom: 24px; padding: 28px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.admin-section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 22px; }
.admin-section h2, .contact-journey-heading h2 { font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem); line-height: 1.15; }
.admin-section__head > p, .admin-section__lede { max-width: 42rem; color: var(--text-2); }
.admin-section__lede { margin: -6px 0 18px; }
.admin-section__head h2 + p { margin-top: 12px; }
.admin-card { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.admin-card h3 { font-size: 1.05rem; }
.admin-card > p { color: var(--text-2); }
.admin-card > .btn { justify-self: start; }
.admin-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; align-items: start; }
.admin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; color: var(--text-2); }
.admin-actions--end { justify-content: flex-end; }
.admin-hint { color: var(--text-2); font-size: 0.86rem; }
.admin-main code { padding: 1px 6px; border-radius: 4px; background: var(--surface-3); font-size: 0.88em; }
.admin-main :is(p, dd, li) a:not(.btn, .chip) { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.admin-main :is(p, dd, li) a:not(.btn, .chip):hover { text-decoration-color: var(--text); }

/* Stats ------------------------------------------------------------------- */
.admin-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.admin-stat { gap: 10px; }
.admin-stat span { color: var(--text-2); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.admin-stat strong { font-size: 2.1rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

/* Controls: the .field controls (Forms, above) at admin density ----------- */
.admin-main :where(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea) { min-height: 44px; padding: 9px 12px; border-width: 1px; font-size: 0.94rem; font-weight: 400; }
.admin-main textarea { min-height: 88px; resize: vertical; }
.admin-main select[multiple] { padding: 6px; }
.admin-main select[multiple] option { padding: 3px 6px; border-radius: 4px; }
.admin-main input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--action-bg); cursor: pointer; }
.admin-field { display: grid; align-content: start; gap: 6px; font-size: 0.86rem; font-weight: 600; }
.admin-field small { font-size: inherit; font-weight: 400; color: var(--text-2); }
.admin-field--wide { grid-column: 1 / -1; }
.admin-toggle { display: flex; align-items: center; gap: 10px; min-height: 44px; line-height: 1.35; cursor: pointer; }
.admin-toggle--tile { padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.admin-toggle--tile:has(input:checked) { border-color: var(--line-strong); }
.admin-toggles { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 8px 16px; }
.admin-check { display: inline-grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
.admin-search { display: grid; gap: 8px; width: min(100%, 520px); font-size: 0.86rem; font-weight: 600; }
.admin-search > div { display: flex; gap: 8px; }
.admin-search input { flex: 1 1 240px; min-width: 0; }

/* Tables ------------------------------------------------------------------ */
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); -webkit-overflow-scrolling: touch; }
.admin-table-wrap > p { padding: 14px 16px; }
.admin-table { width: 100%; min-width: 860px; border-collapse: collapse; }
.admin-table--compact { min-width: 520px; }
.admin-table--surcharges { min-width: 720px; }
.admin-table--surcharges td:nth-child(4) { width: 140px; }
.admin-table--surcharges :is(td, th):last-child { width: 80px; }
.admin-table thead th { padding: 12px; background: var(--surface-2); color: var(--text-2); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.admin-table td, .admin-table tbody th { padding: 10px 12px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.admin-table tbody th { font-weight: 600; vertical-align: middle; }
.admin-table :is(td, th):first-child { padding-left: 16px; }
.admin-table td strong + span { display: block; margin-top: 4px; color: var(--text-2); }
.admin-table :is(input:not([type="checkbox"], [type="number"]), select) { min-width: 9.5rem; }
.admin-table input[type="number"] { min-width: 5.5rem; }
.admin-table textarea { min-width: 240px; min-height: 58px; }
.admin-table--middle td { vertical-align: middle; }
.admin-table tr.is-selected td { background: var(--surface-2); }
.admin-table .pill, .admin-table .admin-actions { white-space: nowrap; }
.admin-table .admin-actions { flex-wrap: nowrap; }
.admin-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; margin-top: 22px; }

/* Pricing: simulator ------------------------------------------------------ */
.admin-simulator { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 24px; align-items: start; }
.admin-simulator__form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 14px 16px; }
.admin-simulator__note, .admin-simulator__form > .btn { grid-column: 1 / -1; }
.admin-simulator__note { color: var(--text-2); }
.admin-simulator__result { position: sticky; top: 96px; display: grid; gap: 12px; padding: 24px; border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--canvas-deep); }
.admin-simulator__result .eyebrow { margin: 0; }
.admin-simulator__result h3 { font-size: 1.3rem; }
.admin-simulator__result p { color: var(--text-2); }
.admin-simulator__price { font-size: 2.6rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.admin-simulator__breakdown-heading { margin-top: 8px; color: var(--text-2); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.admin-simulator__lines li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.admin-simulator__lines strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.admin-simulator__rules { font-size: 0.86rem; }

/* Buyer types ------------------------------------------------------------- */
.bt-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.bt-card--hidden { border-style: dashed; background: transparent; }
.bt-card__head { display: flex; align-items: flex-start; gap: 14px; }
.bt-card__order { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line-strong); border-radius: 50%; font-size: 0.86rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.bt-card__title { flex: 1; min-width: 0; }
.bt-card__title h3 { margin-bottom: 6px; font-size: 1.1rem; }
.bt-card__title p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--text-2); font-size: 0.86rem; }
.bt-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 14px 16px; }
.bt-surveys { padding-top: 14px; border-top: 1px solid var(--line); }
.bt-surveys summary { font-weight: 600; cursor: pointer; }
.bt-surveys[open] summary { margin-bottom: 12px; }
.bt-surveys .admin-table { min-width: 640px; }
.bt-surveys td:nth-child(4) { width: 120px; }
.bt-default { color: var(--text-2); }

/* Video cards: the preview is the public card (section 9) ----------------- */
.video-admin-filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.video-admin-filter-row .admin-field { flex: 1 1 260px; }
.video-admin-preview { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--line-strong); }
.video-admin-preview h3 { margin-bottom: 14px; font-size: 1rem; }
.video-admin-preview .inspection-card { width: min(100%, 340px); }
@media (max-width: 1700px) { .admin-columns--xl { grid-template-columns: minmax(0, 1fr); } }

/* Plus entitlements ------------------------------------------------------- */
.plus-entitlements-preview { margin: 0; white-space: pre-wrap; font-family: inherit; line-height: 1.5; overflow-wrap: anywhere; }

/* Coverage ---------------------------------------------------------------- */
.coverage-admin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.coverage-area-list { display: grid; gap: 12px; }
.coverage-area.is-inactive { opacity: 0.6; }
.coverage-area__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 16px; }
.coverage-area__head > div:first-child { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr); gap: 10px; }
.coverage-area__name { font-size: 1.02rem; font-weight: 600; }
.coverage-prefixes { display: flex; flex-wrap: wrap; gap: 8px; color: var(--text-2); }
.coverage-prefix { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 3px 4px 3px 12px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text); font-size: 0.86rem; font-weight: 600; }
.coverage-prefix.is-inactive { opacity: 0.55; }
.coverage-prefix button { min-height: 28px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--surface-3); color: var(--text-2); font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.coverage-prefix button:hover { color: var(--text); }
.coverage-empty { padding: 22px; border: 1px dashed var(--line-strong); border-radius: var(--r); color: var(--text-2); text-align: center; }

/* Contacts ---------------------------------------------------------------- */
.contact-summary { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; }
.contact-summary h2 + p { margin-top: 10px; color: var(--text-2); }
.contact-summary dl { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 10px; }
.contact-summary dl div, .contact-fields div { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.contact-summary dt, .contact-fields dt { color: var(--text-2); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.contact-summary dd, .contact-fields dd { margin: 4px 0 0; font-weight: 500; overflow-wrap: anywhere; }
.contact-journey-heading { margin: 36px 0 16px; }
.contact-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.contact-detail-grid .admin-section { margin-bottom: 0; }
.contact-detail-grid .pill + h2 { margin-top: 12px; }
.contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 20px 0 0; }

/* Partner applications ---------------------------------------------------- */
.pa-admin__counts { display: flex; flex-wrap: wrap; gap: 8px; }
.pa-admin__counts .chip { min-height: 36px; padding: 4px 12px; font-size: 0.86rem; }
.pa-admin__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.pa-admin__dl { display: grid; gap: 8px; }
.pa-admin__dl div { display: grid; grid-template-columns: minmax(140px, 0.4fr) minmax(0, 1fr); gap: 10px; }
.pa-admin__dl dt { color: var(--text-2); }
.pa-admin__dl dd { margin: 0; overflow-wrap: anywhere; }
.pa-admin__review { max-width: 720px; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1180px) {
  body.admin-sidebar-open { overflow: hidden; }
  .admin-app { grid-template-columns: minmax(0, 1fr); }
  .admin-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 100; width: min(280px, 100vw - 48px); visibility: hidden; transform: translateX(-105%); transition: transform .2s ease, visibility 0s linear .2s; }
  .admin-app.is-sidebar-open .admin-sidebar { visibility: visible; transform: none; box-shadow: 24px 0 60px rgba(0, 0, 0, 0.5); transition: transform .2s ease; }
  .admin-app.is-sidebar-open::after { content: ""; position: fixed; inset: 0; z-index: 90; background: var(--scrim); }
  .admin-topbar__menu { display: inline-grid; }
  .admin-topbar__actions .pill { display: none; }
  .admin-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-simulator, .coverage-admin-grid, .admin-columns { grid-template-columns: minmax(0, 1fr); }
  .admin-simulator__result { position: static; }
  .contact-summary dl { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .admin-main { padding: 0 16px 40px; }
  .admin-topbar { gap: 10px; min-height: 60px; margin: 0 -16px 18px; padding: 8px 16px; }
  .admin-topbar h1 { overflow: hidden; font-size: 1.1rem; white-space: nowrap; text-overflow: ellipsis; }
  .admin-topbar__actions { gap: 6px; }
  .admin-topbar__actions .btn { padding: 0 10px; font-size: 0.84rem; white-space: nowrap; }
  .admin-page-intro { margin: 0 0 16px; }
  .admin-section { padding: 20px 16px; }
  .admin-section__head { flex-direction: column; align-items: stretch; }
  .admin-simulator__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bt-fields, .contact-detail-grid, .contact-fields, .pa-admin__grid { grid-template-columns: minmax(0, 1fr); }
  .bt-card__head { flex-wrap: wrap; }
  .bt-card__head .admin-actions { width: 100%; justify-content: flex-start; }
  .bt-list > .admin-actions .btn { width: 100%; }
  .coverage-area__head, .coverage-area__head > div:first-child { grid-template-columns: minmax(0, 1fr); }
  .coverage-area__head .admin-actions { justify-content: flex-start; }
  .admin-search > div { flex-wrap: wrap; }
  .pa-admin__dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

@media (max-width: 480px) {
  .admin-simulator__form { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 440px) {
  html:has(.admin-topbar__actions) { scroll-padding-top: 127px; }
  .admin-topbar { flex-wrap: wrap; }
  .admin-topbar h1 { flex: 1 1 0; }
  .admin-topbar__actions { width: 100%; }
  .admin-topbar__actions .btn { flex: 1; }
}

/* == Careers & partners (start) == */
/* /careers, /careers/{slug}, /partners and the "Applying for" line on the partner application.
   Built from the shared blocks (page-hero, spec, fit, split, cta); only what they lack is here. */

/* Hero photos of people: on desktop the photo fills the right 62% and fades in from the left, so the
   face sits between the copy and the aside with no hard edge (overrides the shared .page-hero__bg) */
.cr-hero .page-hero__bg { left: auto; width: 62%; object-position: 50% 22%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); }

/* Earnings in the hero aside: figure, period, then the basis note under it */
.page-hero__aside .cr-per { font-size: 0.92rem; color: var(--text-2); font-weight: 500; }
.page-hero__aside dd.cr-basis { max-width: 36rem; margin-top: 6px; font-size: 0.86rem; font-weight: 400; line-height: 1.45; color: var(--text-2); text-wrap: pretty; }

/* Software: the photo beside a short stacked list (overrides the shared .spec__row columns) */
.cr-software { align-items: center; }
.cr-software__fig { margin: 0; }
.cr-software__fig .split__img { aspect-ratio: 4 / 3; object-position: 40% 50%; }
.cr-software__intro { margin-top: 18px; }
.cr-software__list { margin-top: 28px; }
.cr-software__list .spec__row { grid-template-columns: 1fr; gap: 6px; }
.cr-software__list .spec__row dt { align-items: flex-start; }
.cr-software__list .spec__row dt .icon { margin-top: 1px; color: var(--text-2); }
.cr-software__list .spec__row dd { padding-left: 36px; }

/* Open positions: one card per position */
#positions { scroll-margin-top: var(--header-h); }
.cr-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cr-pos { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 18px 18px 18px 20px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); scroll-margin-top: calc(var(--header-h) + 16px); }
.cr-pos:target { border-color: var(--text); }
.cr-pos__main { display: grid; gap: 6px; min-width: 0; }
.cr-pos__region { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.cr-pos__title { font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.015em; }
.cr-pos__title a { display: inline-block; padding-block: 10px; margin-block: -10px; }
.cr-pos__title a:hover { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.cr-pos__areas { font-size: 0.9rem; line-height: 1.45; color: var(--text-2); text-wrap: pretty; }
.cr-pos__areas span { white-space: nowrap; }
.cr-pos__ote { font-size: 0.84rem; font-weight: 600; }
.cr-pos__apply { margin-top: auto; min-height: 44px; padding-inline: 22px; }
.cr-foot { margin-top: 24px; font-size: 0.94rem; color: var(--text-2); }
.cr-foot .link { font-size: 0.94rem; }
.cr-checks { margin-top: 26px; }

/* Closing band: copy lines up with the page column (the shared .cta__in is a centred 44rem box) */
.cr-cta .cta__in { width: min(var(--wrap), 100% - var(--gutter) * 2); max-width: none; }
.cr-cta .cta__in > * { max-width: 44rem; }
.cr-cta .page-hero__meta { max-width: none; }

/* Partners: surveyors first, then one section of cards for property professionals */
.pt-jump { display: inline-block; padding-block: 11px; margin-block: -11px; color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.pt-jump:hover { text-decoration-color: var(--text); }
.pt-checks { margin-top: 26px; }
.pt-checks strong { font-weight: 600; }
.pt-basis { display: block; max-width: 40rem; margin-top: 4px; font-size: 0.9rem; line-height: 1.45; color: var(--text-2); text-wrap: pretty; }
.pt-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.pt-open h3 { font-size: 1.3rem; }
.pt-places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; border-top: 1px solid var(--line); }
.pt-places li { border-bottom: 1px solid var(--line); }
.pt-places a { display: flex; align-items: center; min-height: 44px; padding: 6px 0; font-size: 0.95rem; line-height: 1.25; }
.pt-places a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pt-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pt-type { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); scroll-margin-top: calc(var(--header-h) + 16px); }
.pt-type .icon-tile { margin-bottom: 4px; }
.pt-type h3 { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); }
.pt-type__offer { font-size: 1.3rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
.pt-type__body { margin-bottom: 10px; color: var(--text-2); font-size: 0.98rem; text-wrap: pretty; }
.pt-type .btn { margin-top: auto; min-height: 44px; }
.pt-checks li, .cr-checks li, .careers-page .aside-card .checks li { text-wrap: pretty; }

/* Partner application: the position a surveyor is applying for */
.pa__position { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--canvas); }
.pa__position .icon-tile { width: 40px; height: 40px; }
.pa__position p { flex: 1; min-width: 0; line-height: 1.35; }
.pa__position strong { font-weight: 600; }
.pa__position-label { display: block; margin-bottom: 2px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.pa__position form { flex: none; }
.pa__position .btn { min-height: 44px; }
.pa-admin__position { display: block; margin-top: 4px; color: var(--text-2); font-size: 0.9rem; }

@media (min-width: 1024px) {
  .pt-type__offer { min-height: 2.4em; }
}

@media (min-width: 821px) and (max-width: 1279px) {
  .cr-hero .page-hero__bg { object-position: 12% 22%; }
  .cr-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pt-places { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .pt-types { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .cr-hero .page-hero__bg { left: 0; width: 100%; object-position: 40% 20%; -webkit-mask-image: none; mask-image: none; }
  .cr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-actions .btn { width: 100%; }
  .pa__position { flex-wrap: wrap; row-gap: 8px; }
  .pa__position p { flex: 1 1 calc(100% - 60px); }
  .pa__position form, .pa__position > .btn { margin-left: 54px; }
}

@media (max-width: 560px) {
  .cr-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cr-pos { flex-direction: row; align-items: center; justify-content: space-between; padding: 14px 14px 14px 18px; }
  .cr-pos__main { flex: 1 1 auto; }
  .cr-pos__apply { margin-top: 0; flex: none; }
  .pt-type { padding: 22px; }
}
/* == Careers & partners (end) == */

/* == Inspection checklist (start) == */
/* <x-survey.checklist>: the 100+ point inspection checklist on the level pages (a light band), the
   figure in the hero "At a glance" card, on the all-surveys level cards and in the compare table. */
.ck__head { align-items: start; }
.ck__fig { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.ck__intro { display: grid; gap: 16px; }
.ck__depth { gap: 10px; }
.ck__depth li { font-weight: 500; }
.ck__method { max-width: 34rem; font-size: 0.94rem; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }

/* The ledger: one row per part of the home, each row a disclosure that opens to its points */
.ck__list { margin-top: clamp(28px, 3vw, 40px); }
.ck__ledger-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; padding-bottom: 12px; border-bottom: 1px solid var(--line-strong); }
.ck__ledger-head h3 { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.ck__legend { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--text-2); }
.ck__legend .icon { flex: none; width: 18px; height: 18px; color: var(--text); }
.ck__area { border-bottom: 1px solid var(--line); }
.ck__area summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 8rem minmax(0, 15rem) minmax(0, 1fr) auto; grid-template-areas: "n name sum cue"; align-items: center; gap: 6px 32px; padding: 20px 0; }
.ck__area summary::-webkit-details-marker { display: none; }
.ck__area-n { grid-area: n; display: flex; align-items: baseline; gap: 8px; font-size: 2.25rem; font-weight: 700; line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.ck__area-n b { min-width: 2ch; font-weight: inherit; }
.ck__area-unit { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.ck__area-name { grid-area: name; font-weight: 600; font-size: 1.1rem; line-height: 1.3; }
.ck__area-sum { grid-area: sum; font-size: 0.94rem; line-height: 1.45; color: var(--text-2); text-wrap: pretty; }
.ck__area-cue { grid-area: cue; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line-strong); border-radius: 50%; transition: background-color .18s ease, border-color .18s ease; }
.ck__area-cue::before { content: ""; width: 8px; height: 8px; margin-top: -4px; border-right: 1.5px solid var(--text); border-bottom: 1.5px solid var(--text); transform: rotate(45deg); transition: transform .2s ease; }
.ck__area summary:hover .ck__area-cue { border-color: var(--text); }
.ck__area[open] .ck__area-cue { background: var(--text); border-color: var(--text); }
.ck__area[open] .ck__area-cue::before { margin-top: 4px; border-color: var(--canvas); transform: rotate(-135deg); }
/* A long open area keeps its row (name, count, close) under the header while its points scroll */
.ck__area[open] > summary { position: sticky; top: var(--header-h); z-index: 1; background: var(--canvas); }
.ck__foot { max-width: 46rem; margin-top: 20px; font-size: 0.94rem; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }

/* The points: balanced columns, "where present" inline, the Level 3+ drone mark on the right */
.ck__groups { columns: 3 17rem; column-gap: 48px; padding: 8px 0 24px; }
.ck__group { break-inside: avoid; padding-bottom: 28px; }
.ck__group h4 { margin: 0 0 4px; padding-bottom: 10px; border-bottom: 1px solid var(--line-strong); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.ck__group li { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.96rem; line-height: 1.4; }
.ck__point { min-width: 0; text-wrap: pretty; }
.ck__where { white-space: nowrap; font-size: 0.84rem; color: var(--text-2); }
.ck__drone { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; color: var(--text); }
.ck__drone .icon { width: 16px; height: 16px; align-self: center; }

/* The figure elsewhere: the hero (a small stat beside the level tile below 1280px, where the
   "At a glance" card drops under the hero copy), the card itself, the all-surveys cards, the compare table */
.ck-fig__n { font-variant-numeric: tabular-nums; }
.ck-hero { display: none; flex-direction: column; align-items: flex-start; gap: 4px; color: var(--text); }
.ck-hero .ck-fig__n { font-size: 1.75rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.ck-hero .ck-fig__rest { font-size: 0.82rem; font-weight: 600; line-height: 1.25; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.ck-hero:hover .ck-fig__rest { text-decoration-color: var(--text); }
.level-mark__side { display: grid; gap: 10px; justify-items: start; }
/* Beside the tile, the stat wraps its own words rather than dropping under the tile on narrow phones */
.level-mark > .ck-hero, .level-mark__side { flex: 1 1 0; min-width: 8rem; }
.ck-glance { display: inline-block; padding-block: 10px; margin-block: -10px; color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.ck-glance:hover { text-decoration-color: var(--text); }
.ck-glance .ck-fig__n { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; }
.level-card .level-card__points { font-weight: 600; color: var(--text); }
.level-card__points a { display: inline-block; padding-block: 10px; margin-block: -10px; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.level-card__points a:hover { text-decoration-color: var(--text); }
.compare__fig { display: inline-grid; justify-items: center; gap: 4px; }
.compare__count { font-size: 1.05rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.compare-card__row dd .compare__fig { justify-items: end; }
.compare__list { display: inline-block; padding-block: 10px; margin-block: -10px; font-size: 0.92rem; font-weight: 600; color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; white-space: nowrap; }
.compare__list:hover { text-decoration-color: var(--text); }

@media (max-width: 1279px) {
  .ck-hero { display: inline-flex; }
}
@media (max-width: 1023px) {
  .ck__area summary { grid-template-columns: 6.5rem minmax(0, 1fr) auto; grid-template-areas: "n name cue" "n sum cue"; gap: 4px 20px; }
}
@media (max-width: 820px) {
  .ck__area summary { grid-template-columns: 3.9rem minmax(0, 1fr) auto; gap: 2px 14px; padding: 16px 0; }
  .ck__area-n { flex-direction: column; align-items: flex-start; gap: 5px; font-size: 1.9rem; }
  .ck__area-unit { font-size: 0.64rem; }
  .ck__area-name { font-size: 1.05rem; }
  .ck__area[open] .ck__area-sum { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ck__area-cue, .ck__area-cue::before { transition: none; }
}
/* == Inspection checklist (end) == */

/* Legal pages: privacy, cookies, booking terms, Terms of Engagement, complaints, cancellation form
   (LegalController, resources/views/frontend/legal). A charcoal hero, then the text on a paper band
   with a sticky "On this page" list beside it on wide screens and a fold-out list on phones. */
.legal__in { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.legal__nav { position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; font-size: 0.92rem; }
.legal__nav-title { margin: 0 0 8px; padding-left: 10px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.legal__toc, .legal__related { display: grid; gap: 2px; margin: 0 0 22px; padding: 0; list-style: none; }
.legal__toc a, .legal__related a { display: block; padding: 6px 10px; border-radius: var(--r); color: var(--text-2); line-height: 1.35; transition: background-color .15s ease, color .15s ease; }
.legal__toc a:hover, .legal__toc a:focus-visible, .legal__related a:hover, .legal__related a:focus-visible { background: var(--surface-2); color: var(--text); }
.legal__related a[aria-current="page"] { background: var(--surface-2); color: var(--text); font-weight: 600; }
.legal__body { max-width: 46rem; min-width: 0; }
.legal__body :is(h2, h3) { scroll-margin-top: calc(var(--header-h) + 20px); }
.legal__body h2 { font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem); }
.legal__body h4 { font-size: 1.05rem; margin-top: 1.4em; }
.legal__body .legal__updated { font-size: 0.92rem; color: var(--text-3); }
.legal__body .legal__intro { font-size: 1.08rem; color: var(--text); }
.legal__body ul li { padding-left: 22px; }
.legal__body ul li::before { left: 6px; top: 0.68em; width: 6px; height: 6px; border: 0; border-radius: 50%; background: var(--text-2); transform: none; }
.legal__body blockquote { margin-inline: 0; margin-bottom: 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--line-strong); }
.legal__body blockquote > * + * { margin-top: 0.8em; }
.legal__body hr { border: 0; border-top: 1px solid var(--line); margin: 2.2em 0; }
.legal__body a[href^="mailto:"], .legal__body a[href^="http"] { overflow-wrap: anywhere; }
.legal__body .legal__company { margin-top: 2.4em; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--text-3); }
.legal__body .legal__company a { font-weight: 500; }
.legal-note { padding: clamp(18px, 3vw, 26px); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.legal-note > * + * { margin-top: 0.9em; }
.legal-note h2 { margin-top: 0; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem); }
.legal-note h3 { margin-top: 1.4em; }
.legal-table { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.legal-table table { width: 100%; border-collapse: collapse; font-size: 0.93rem; line-height: 1.45; }
.legal-table th { padding: 10px 14px; background: var(--surface-2); color: var(--text); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.06em; text-align: left; text-transform: uppercase; vertical-align: bottom; }
.legal-table td { padding: 10px 14px; border-top: 1px solid var(--line); color: var(--text-2); vertical-align: top; }
.legal-table code, .legal__body code { padding: 1px 5px; border-radius: 4px; background: var(--surface-2); color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.84em; overflow-wrap: break-word; }
.legal__toc-mobile { display: none; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.legal__toc-mobile summary { cursor: pointer; font-weight: 600; color: var(--text); }
.legal__toc-mobile ol { counter-reset: none; margin-top: 10px; gap: 4px; }
.legal__toc-mobile ol li { padding-left: 0; }
.legal__toc-mobile ol li::before { content: none; }
.legal__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.legal__copied { color: var(--text-2); font-size: 0.92rem; }
.cancel-form { padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--surface); }
.cancel-form > * + * { margin-top: 1em; }
.cancel-form h2 { margin-top: 0; }
.cancel-form__fields { display: grid; gap: 20px; margin: 1.4em 0 0; }
.cancel-form__fields dt { color: var(--text); font-size: 0.95rem; font-weight: 600; }
.cancel-form__fields dd { height: 30px; margin: 0; border-bottom: 1px solid var(--line-strong); }
.cancel-form__note { font-size: 0.92rem; }
.cancel-form__copy-label { display: block; color: var(--text-2); }
.cancel-form__copy { display: block; width: 100%; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--text); font: inherit; font-size: 0.92rem; line-height: 1.5; resize: vertical; }
@media (max-width: 640px) {
  /* Each row becomes a card, with the column heading (data-label) above each value */
  .legal-table { border: 0; background: none; overflow: visible; }
  .legal-table table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; }
  .legal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .legal-table tr { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
  .legal-table tr + tr { margin-top: 12px; }
  .legal-table td { padding: 10px 14px; }
  .legal-table td + td { border-top: 1px solid var(--line); }
  .legal-table td:first-child { border-top: 0; color: var(--text); font-weight: 500; }
  .legal-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--text-3); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
}
@media (max-width: 1023px) {
  .legal__in { grid-template-columns: minmax(0, 1fr); }
  .legal__nav { display: none; }
  .legal__toc-mobile { display: block; }
}
@media print {
  .page-legal .page-hero, .page-legal .legal__nav, .page-legal .legal__actions, .page-legal .legal__toc-mobile, .page-legal .legal-print-hide { display: none !important; }
  .page-legal .sec--paper { padding: 0; background: #fff; }
  .page-legal .legal__in { display: block; width: 100%; }
  .page-legal .legal__body { max-width: none; }
  .page-legal .cancel-form { border-color: #000; }
  .page-legal .cancel-form__fields dd { border-bottom-color: #000; }
}

/* Footer legal links and company line (components/site/legal-links.blade.php; layouts/frontend.blade.php) */
/* Every link has a dot before it; the list is pulled left by one dot and clipped, so a link that starts a line never shows one */
.legal-links { overflow: hidden; }
.legal-links ul { display: flex; flex-wrap: wrap; gap: 2px 0; margin: 0 0 0 -18px; padding: 0; list-style: none; }
.legal-links li { display: inline-flex; align-items: center; }
.legal-links li::before { content: "\00B7"; display: inline-block; width: 18px; text-align: center; color: var(--text-3); }
.legal-links a { display: inline-block; padding: 6px 0; color: var(--text); font-weight: 500; }
.legal-links a:hover, .legal-links a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.fs-footer__legal { display: grid; gap: 6px; flex: 1 1 0; min-width: min(100%, 26rem); max-width: 46rem; }
.fs-footer__legal-line { line-height: 1.5; }
.fs-footer__legal-line a, .fs-footer__slim-legal a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.fs-footer__legal-links--slim { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid var(--line); font-size: 0.82rem; }

/* Contact page: email and registered office beside the phone and voice assistant */

.co-address { font-style: normal; line-height: 1.5; }

/* ===== Survey level pages (Level 2, 3, 3+) in the home page style =====
   <x-survey.hero>, the fit tiles, the six parts of Level 3+ and <x-survey.levels-band>; the rest reuses .hx. */
.sx-hero { background: var(--canvas-deep); color: var(--text); border-bottom: 1px solid var(--line); }
.sx-hero__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 32px 64px; align-items: center; padding: clamp(40px, 6vw, 88px) 0 clamp(48px, 6vw, 88px); }
.sx-hero .eyebrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sx-hero .eyebrow .pill { letter-spacing: 0.06em; }
.sx-hero__title { font-size: clamp(2.6rem, 1.6rem + 3.2vw, 4.25rem); line-height: 1.02; letter-spacing: -0.04em; margin-top: 6px; }
.sx-hero__lead { margin-top: 20px; max-width: 32rem; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); line-height: 1.45; color: var(--text-2); text-wrap: balance; }
.sx-hero__price { display: flex; align-items: baseline; gap: 10px; margin-top: 28px; }
.sx-hero__price .price-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--text-2); }
.sx-hero__price .price { font-size: clamp(2.2rem, 1.8rem + 1.4vw, 3rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.sx-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 26px; }
.sx-hero__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 22px; font-size: 0.9rem; color: var(--text-3); }
.sx-hero__pic { margin: 0; }
.sx-hero .ck-hero { display: inline-flex; margin-top: 24px; }
.sx-hero__pic .lvl-pic { display: block; width: 100%; height: auto; color: var(--text); }

.sx-fit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sx-fit--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sx-fit--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sx-fit li { display: grid; gap: 16px; align-content: start; padding: 26px 22px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); font-size: 1.08rem; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.sx-fit .icon { color: var(--text); }
.sx-fit__note { margin-top: 28px; text-align: center; color: var(--text-2); }

.sx-parts .spec { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; border-top: 0; }
.sx-parts .spec__row { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.sx-parts .spec__row dt { flex-direction: column; align-items: flex-start; gap: 16px; font-size: 1.1rem; line-height: 1.3; }
.sx-parts .spec__row dt .icon { width: 30px; height: 30px; margin: 0; color: var(--text); }
.sx-parts .spec__row dd { font-size: 0.95rem; }
.sx-parts .spec__note { font-size: 0.82rem; color: var(--text-3); }
.sx-photo { margin-top: clamp(40px, 5vw, 64px); max-width: 760px; }
.sx-photo img { aspect-ratio: 16 / 8; object-fit: cover; }
.sx-photo img { display: block; width: 100%; height: auto; border-radius: var(--r-card); }
.sx-photo figcaption { margin-top: 14px; text-align: center; color: var(--text-2); font-size: 0.95rem; }

.sx-levels .is-current { border-color: var(--text); }

@media (max-width: 1023px) {
  .sx-fit, .sx-fit--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-fit--six, .sx-parts .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .sx-hero__in { grid-template-columns: 1fr; }
  .sx-hero__pic { max-width: 360px; margin: 8px auto 0; width: 100%; }
}
@media (max-width: 480px) {
  .sx-fit li { padding: 20px 16px; font-size: 1rem; }
  .sx-parts .spec { grid-template-columns: 1fr; }
}
.sx-hero .eyebrow::after { display: none; }

/* ===== The home page style across every page =====
   Inner-page heroes go plain charcoal with an apple.com-sized headline (no photograph behind the words), light
   bands go pure white like the home page, and sections get more air and larger headlines. */
.page-hero__bg, .page-hero::before { display: none; }
.page-hero__in { padding: clamp(48px, 7vw, 104px) 0 clamp(48px, 6vw, 88px); align-items: center; }
.page-hero h1 { font-size: clamp(2.4rem, 1.5rem + 3vw, 4.25rem); line-height: 1.03; letter-spacing: -0.04em; }
.page-hero__lead { font-size: clamp(1.08rem, 1rem + 0.4vw, 1.3rem); line-height: 1.5; text-wrap: balance; }
.page-hero__aside { background: var(--surface); backdrop-filter: none; }
.sec--paper { --canvas: #ffffff; --surface: #f5f5f3; --line: #e2e3df; }
.sec { padding: clamp(64px, 8vw, 112px) 0; }
.sec h2 { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.1rem); line-height: 1.05; letter-spacing: -0.035em; }
.sec__intro { font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem); line-height: 1.5; }

/* Two charcoal sections in a row: the second turns white, so every page alternates like the home page. */
.sec--ink + .sec--ink, .hx--dark + .cta--price {
  --canvas: #ffffff;
  --canvas-deep: #e9e9e5;
  --surface: #f5f5f3;
  --surface-2: #ecece8;
  --surface-3: #e0e1dd;
  --text: #171a1c;
  --accent-text: #1d5fd6;
  --brand-blue: #2563eb;
  --text-2: #454c51;
  --text-3: #5b6368;
  --line: #e2e3df;
  --line-strong: #7b8388;
  --action-bg: #171a1c;
  --action-fg: #f7f7f5;
  --action-hover: #2d3236;
  --action-fg-muted: #bec3c7;
  --focus: #171a1c;
  --focus-ring: rgba(23, 26, 28, 0.2);
  --ok: #1d5fd6;
  --warn: #7a5a00;
  --danger: #b3261e;
  background: var(--canvas);
  color: var(--text);
  color-scheme: light;
  padding-top: clamp(64px, 8vw, 112px);
}
.sec--ink + .sec--ink .report-cover__page, .sec--ink + .sec--ink .g-stack__page { box-shadow: 0 26px 44px -28px rgba(23, 26, 28, 0.42); }
/* Closing call to action: plain charcoal, centred, like the home page's last band. */
.cta:not(.cta--price) .cta__bg, .cta:not(.cta--price)::before { display: none; }
.cta:not(.cta--price) .cta__in { text-align: center; margin-inline: auto; }
.cta:not(.cta--price) .cta__actions, .cta:not(.cta--price) .page-hero__meta { justify-content: center; }
.cta:not(.cta--price) h2 { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.1rem); line-height: 1.05; letter-spacing: -0.035em; }

/* Service pages (defect, remote, sellers, party wall) on the survey page pattern: a photograph in the hero,
   situation tiles, the inclusions as ticked tiles. */
.sx-hero__pic--photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--r-card) + 6px); }
.sx-fit li small { display: block; margin-top: -6px; font-size: 0.94rem; font-weight: 400; color: var(--text-2); line-height: 1.45; }
.sx-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sx-checks li { display: flex; gap: 12px; align-items: flex-start; padding: 20px 22px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); font-weight: 500; line-height: 1.4; }
.sx-checks .icon { flex: none; width: 22px; height: 22px; margin-top: 1px; }
@media (max-width: 1023px) { .sx-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sx-checks { grid-template-columns: 1fr; } }
/* The price band closes a page on plain charcoal too, like the home page's last band. */
.cta--price .cta__bg, .cta--price::before { display: none; }
/* The level house pictures on the all-surveys, compare and costs cards */
.level-card > .lvl-pic, .g-level > .lvl-pic, .g-tier > .lvl-pic { display: block; width: 100%; height: auto; margin: -6px 0 14px; color: var(--text); }

/* ---- Calmer pages and properly drawn icons (owner, 29 Oct 2026: the services pages are "too busy"; the glyphs
   "should be a little bit bigger ... they look like they're not aligned properly"). Feature icons sit centred in
   one size of rounded tile; the "who it's for" tiles and the included list lose their boxes; the price band is
   one centred close like the home page's. */
.icon-tile { width: 56px; height: 56px; border-radius: 16px; }
.icon-tile .icon { width: 28px; height: 28px; }
.hx__points .icon, .sx-fit li > .icon { box-sizing: content-box; width: 30px; height: 30px; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.hx__points .icon { display: block; margin: 0 auto 18px; }
.hx-bento__tile .icon { width: 44px; height: 44px; }
.trust__item .icon { width: 20px; height: 20px; }
.sx-fit { gap: 40px 24px; }
.sx-fit li { justify-items: center; gap: 14px; padding: 0; border: 0; background: none; text-align: center; }
.sx-fit li small { margin-top: -4px; max-width: 16rem; }
.sx-checks { gap: 0 48px; max-width: 980px; margin-inline: auto; }
.sx-checks li { align-items: center; gap: 14px; padding: 18px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; font-size: 1.05rem; }
.sx-checks .icon { box-sizing: content-box; width: 16px; height: 16px; margin: 0; padding: 6px; border-radius: 50%; background: var(--action-bg); color: var(--action-fg); }
.cta--price.hx-cta { padding: clamp(80px, 10vw, 140px) 0; text-align: center; }
.cta--price .price-band { display: flex; flex-direction: column; align-items: center; gap: 0; max-width: 46rem; margin-inline: auto; }
.cta--price .price-band h2 { margin: 0 0 22px; font-size: clamp(2rem, 1.3rem + 2.2vw, 3.1rem); line-height: 1.05; letter-spacing: -0.035em; text-wrap: balance; }
.cta--price .price-band__price { display: flex; align-items: baseline; justify-content: center; gap: 10px; padding: 0; border: 0; }
.cta--price .price-band__lead { margin-top: 12px; color: var(--text-2); font-size: 1.08rem; max-width: 32rem; }
.cta--price .price-band__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; margin-top: 30px; }
.cta--price .price-band__note { margin-top: 22px; max-width: 30rem; font-size: 0.9rem; color: var(--text-2); }
@media (max-width: 560px) {
  .hx__points .icon, .sx-fit li > .icon { width: 24px; height: 24px; padding: 12px; border-radius: 14px; }
  .sx-fit { gap: 32px 16px; }
}
.hx--dark + .cta--price { border-top: 0; }

/* ---- Blue accent (owner, 30 Oct 2026: "the blue is the most appropriate accent ... it just needs to feel
   utilitarian"). Used sparingly, only where it helps a decision: the main buttons, the recommended level,
   prices, step numbers and the short rule under section labels. Everything else stays black and white.
   --accent fills are the same in both schemes; --accent-text is lighter on charcoal, deeper on white. */
.btn--primary, .fs-header .fs-button--quote, .fs-mobile__footer .fs-button--quote { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn--primary:hover, .fs-header .fs-button--quote:hover, .fs-mobile__footer .fs-button--quote:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-fg); }
.pill--solid { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.level--featured, .g-level--featured, .sx-levels .is-current { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.price { color: var(--accent-text); }
.step__n { color: var(--accent-text); }
.eyebrow::after { background: var(--accent); }

/* ---- Centred home hero (owner, 30 Oct 2026: the headline on one line, everything centred under it, the store
   badges at the bottom right, because "it looks too congested everything being on the left hand side"). */
.hero::before { background: radial-gradient(ellipse 70% 75% at 50% 48%, rgba(18, 20, 22, 0.86) 0%, rgba(18, 20, 22, 0.66) 60%, rgba(18, 20, 22, 0.5) 100%), linear-gradient(0deg, rgba(18, 20, 22, 0.85) 0%, rgba(18, 20, 22, 0) 30%); }
.hero__in { justify-items: center; padding-bottom: clamp(88px, 12vh, 120px); }
.hero__copy { max-width: 60rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__copy .eyebrow::after { margin-inline: auto; }
.hero__title { font-size: clamp(2.2rem, 1.2rem + 3vw, 4rem); text-wrap: balance; }
.hero__lead { max-width: 36rem; margin-inline: auto; }
.hero__quote { width: min(100%, 34rem); margin-top: 32px; }
.hero__quote-label { text-align: center; }
.hero__quote-hint, .hero__status { justify-content: center; text-align: center; }
.hero__notice, .hero__list { text-align: left; }
.hero__compare { margin-top: 14px; }
.hero__badges { position: absolute; right: max(var(--gutter, 16px), calc((100% - var(--wrap, 1200px)) / 2)); bottom: 24px; margin: 0; }
@media (min-width: 821px) { .hero__title { white-space: nowrap; } .hero__title-line { display: inline; } }
@media (max-width: 820px) {
  .hero__title-line { display: block; }
  .hero::before { background: linear-gradient(180deg, rgba(18, 20, 22, 0.72) 0%, rgba(18, 20, 22, 0.88) 45%, rgba(18, 20, 22, 0.97) 100%); }
  .hero__in { padding-bottom: 24px; }
  .hero__badges { position: static; justify-content: center; margin: 0 auto; padding: 0 var(--gutter, 16px) 32px; }
}
/* Breathing room between the hero's parts. */
.hero__copy .eyebrow { margin-bottom: 18px; }
.hero__lead { margin-top: 20px; }
.hero__quote { margin-top: 40px; }
.hero__quote-hint { margin-top: 6px; }
.hero__compare { margin-top: 18px; }
/* Hero spacing (owner, 30 Oct 2026): about 25px more under the header, at least 25px between "No account needed"
   and the store badges, which sit at the bottom left. */
.hero__in { padding-top: calc(clamp(36px, 6vh, 72px) + 25px); padding-bottom: 125px; }
.hero__badges { left: max(var(--gutter, 16px), calc((100% - var(--wrap, 1200px)) / 2)); right: auto; }
@media (max-width: 820px) {
  .hero__in { padding-top: 53px; padding-bottom: 25px; }
  .hero__badges { padding-top: 0; }
}
/* Postcode label (owner, 31 Oct 2026): at the top left of the postcode field, small and quiet, not a centred heading. */
.hero__quote-label { text-align: left; margin-bottom: 10px; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }

/* ---- Brighter, warmer home hero (owner, 31 Oct 2026). A lighter overlay keeps a soft dark centre behind the words
   only, and the footage is lifted a touch warmer. With the store badges hidden until the apps are live, the hero
   needs less room at the bottom, and gets it back once they show. */
.hero::before { background: radial-gradient(ellipse 62% 70% at 50% 46%, rgba(18, 20, 22, 0.64) 0%, rgba(18, 20, 22, 0.4) 62%, rgba(18, 20, 22, 0.18) 100%), linear-gradient(0deg, rgba(18, 20, 22, 0.55) 0%, rgba(18, 20, 22, 0) 26%); }
.hero__video { filter: brightness(1.12) saturate(1.1) sepia(0.08); }
.hero__title, .hero__lead, .hero__copy .eyebrow, .hero__quote-label, .hero__quote-hint { text-shadow: 0 1px 18px rgba(0, 0, 0, 0.35); }
.hero__in { padding-bottom: 88px; }
.hero:has(.hero__badges) .hero__in { padding-bottom: 125px; }
@media (max-width: 820px) {
  .hero::before { background: linear-gradient(180deg, rgba(18, 20, 22, 0.5) 0%, rgba(18, 20, 22, 0.66) 45%, rgba(18, 20, 22, 0.86) 100%); }
  .hero__in, .hero:has(.hero__badges) .hero__in { padding-bottom: 40px; }
}

/* ---- First screen (owner, 31 Oct 2026): the hero and the trust strip fill the window exactly below the header, so
   the strip is the last thing seen and no white shows under it. The hero's content sits centred between the header
   and the strip with equal room above and below. On phones the fixed "Call / Get my survey" bar is taken off too.
   Short windows simply let the hero grow, so nothing is ever squeezed. */
.hero-screen { display: flex; flex-direction: column; min-height: calc(100svh - var(--header-h) - 1px); }
.hero-screen > .hero { flex: 1 0 auto; display: flex; flex-direction: column; }
.hero-screen .hero__in { flex: 1 0 auto; min-height: 0; align-content: center; padding-top: clamp(40px, 7vh, 88px); padding-bottom: clamp(40px, 7vh, 88px); }
.hero-screen .hero:has(.hero__badges) .hero__in { padding-bottom: calc(clamp(40px, 7vh, 88px) + 64px); }
.hero-screen .trust__in { justify-content: center; padding: 14px 0; }
@media (max-width: 820px) {
  .hero-screen { min-height: calc(100svh - var(--header-h) - 1px - 68px - env(safe-area-inset-bottom)); }
  .hero-screen .hero__in, .hero-screen .hero:has(.hero__badges) .hero__in { padding-top: 36px; padding-bottom: 36px; }
  .hero-screen .trust__in { padding: 12px 0; }
}

/* Flettons Omni (docs/FLETTONS-OMNI.md): two package cards side by side, the remote-inspection notice, booking choices. */
.levels--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 980px; margin-inline: auto; }
@media (max-width: 760px) { .levels--two { grid-template-columns: 1fr; } }
.omni-length { display: inline-flex; align-items: baseline; gap: 6px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.omni-length strong { font-size: 1.6rem; letter-spacing: -0.02em; color: var(--text); text-transform: none; }
.omni-note { max-width: 980px; margin: 0 auto; padding: 22px 24px; border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--surface); }
.omni-note h2, .omni-note h3 { font-size: 1.15rem; margin-bottom: 8px; }
.omni-note p { color: var(--text-2); line-height: 1.55; }
.omni-note p + p { margin-top: 8px; }
.omni-note ul { margin: 10px 0 0 18px; color: var(--text-2); line-height: 1.55; list-style: disc; }
.omni-price-meta { margin-top: 6px; font-size: 0.86rem; color: var(--text-2); }
#field-slot, .qb__main { min-width: 0; }
.omni-days { max-width: 100%; display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x proximity; }
.omni-day-chip { flex: 0 0 auto; scroll-snap-align: start; min-width: 74px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; text-align: center; cursor: pointer; line-height: 1.2; }
.omni-day-chip small { display: block; font-size: 0.75rem; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; }
.omni-day-chip strong { display: block; font-size: 1.15rem; }
.omni-day-chip[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.omni-day-chip:focus-visible, .omni-time input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.omni-day { border: 0; margin: 12px 0 0; padding: 0; }
.omni-day legend { font-weight: 600; margin-bottom: 8px; }
.omni-day.is-hidden { display: none; }
.omni-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.omni-time { position: relative; }
.omni-time input { position: absolute; opacity: 0; inset: 0; }
.omni-time span { display: block; padding: 11px 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: center; font-weight: 500; cursor: pointer; }
.omni-time input:checked + span { border-color: var(--accent); background: var(--accent); color: var(--accent-fg); }
.omni-time input:disabled + span { color: var(--text-3); text-decoration: line-through; cursor: not-allowed; opacity: 0.6; }
.omni-picked { margin-top: 12px; font-weight: 600; }
.omni-lengths { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* ==========================================================================
   Flettons Plus page (plus-overview): the real app on a MacBook, an iPad and iPhones
   ========================================================================== */
.dev--tablet .dev__body { padding: 0.9cqw; border-radius: 4.2cqw; background: var(--dev-metal); box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.6); }
.dev--tablet .dev__screen { border-radius: 3.4cqw; padding: 2.6cqw; background: #050505; }
.dev--tablet .dev__screen img { border-radius: 1.4cqw; }
.dev--tablet .dev__notch { display: none; }
.hx__stage--tablet .dev--tablet { width: min(100%, 940px); }
.hx__stage--three { align-items: center; }
.hx__stage--three .dev--phone { width: min(31%, 280px); }
.hx__stage--three .dev--phone:first-child { transform: none; }
.hx__stage--three .dev--phone:nth-child(2) { width: min(34%, 310px); }
.plus-hero { padding-top: clamp(40px, 5vw, 72px); }
.plus-hero .crumbs { justify-content: center; }
.plus-hero__title { font-size: clamp(2.8rem, 1.6rem + 5vw, 5.6rem); line-height: 1; letter-spacing: -0.045em; }
.plus-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.plus-hero .hx__stage { margin-top: clamp(8px, 2vw, 24px); }
.plus-routes .hx-level__adds { margin-bottom: 24px; }
.plus-life { display: grid; }
.plus-life--2 { grid-template-columns: 1fr 1fr; }
.plus-life--3 { grid-template-columns: 2fr 1fr; }
.plus-life--3 .plus-life__photo:first-child { grid-row: span 2; }
.plus-life__photo { margin: 0; }
.plus-life--2 .plus-life__photo, .plus-life--3 .plus-life__photo + .plus-life__photo { min-height: clamp(260px, 24vw, 320px); }
.plus-life--2 .hx-photo__line, .plus-life--3 .plus-life__photo + .plus-life__photo .hx-photo__line { font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); }
.plus-member { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; max-width: 1080px; }
.plus-member__offer { display: flex; flex-direction: column; gap: 16px; padding: clamp(28px, 4vw, 48px); border-radius: 28px; background: var(--surface); border: 1px solid var(--line-strong); }
.plus-member__offer h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height: 1.12; letter-spacing: -0.03em; }
.plus-member__offer .checks { display: grid; gap: 10px; }
.plus-member__offer .level__price { margin-top: 8px; color: var(--text); }
.plus-member__offer .level__price .price { font-size: clamp(2.2rem, 1.8rem + 1.4vw, 3rem); letter-spacing: -0.035em; }
.plus-member__then { margin-top: -10px; color: var(--text-2); }
.plus-member__offer .btn { align-self: flex-start; }
.plus-member__steps { display: grid; gap: 28px; }
.plus-member__steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
.plus-member__steps span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); font-weight: 700; }
.plus-member__steps h3 { font-size: 1.2rem; margin-bottom: 4px; letter-spacing: -0.02em; }
.plus-member__steps p { color: var(--text-2); }
@media (max-width: 820px) {
  .hx__stage--three { gap: 10px; }
  .hx__stage--three .dev--phone, .hx__stage--three .dev--phone:nth-child(2) { width: 32%; }
  .plus-life--2, .plus-life--3 { grid-template-columns: 1fr; }
  .plus-life--3 .plus-life__photo:first-child { grid-row: auto; }
  .plus-member { grid-template-columns: 1fr; }
  .plus-member__offer .btn { align-self: stretch; }
}

/* Flettons Plus page: the dials drawn over the device screens (x-site.gauges, plus-gauges.js) */
.gx { position: absolute; container-type: inline-size; pointer-events: none; }
.dev--tablet .gx { inset: 2.6cqw; }
.dev--phone .gx { inset: 3.2cqw; }
.dev--laptop .gx { inset: 2.2cqw 2.2cqw 3.6cqw; }
.gx > * { position: absolute; }
.gx-needle { transform: rotate(var(--gx-to)); }
.gx-ring circle { stroke-dashoffset: var(--gx-to); }
.gx-fig { display: flex; align-items: baseline; justify-content: center; line-height: 1; padding-top: 0.6%; font-variant-numeric: tabular-nums; }
.gx-fig b { font: inherit; }
.gx-fig small { font-size: 0.48em; }
.gx-label { display: flex; align-items: center; justify-content: center; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gx-label b { font: inherit; }
.gx--ready .gx-needle { transform: rotate(-180deg); transition: transform 3.6s cubic-bezier(0.22, 1, 0.36, 1); }
.gx--ready .gx-ring circle { stroke-dashoffset: 100; transition: stroke-dashoffset 3.6s cubic-bezier(0.22, 1, 0.36, 1); }
.gx--ready.is-on .gx-needle { transform: rotate(var(--gx-to)); }
.gx--ready.is-on .gx-ring circle { stroke-dashoffset: var(--gx-to); }
.gx--ready .gx-ring:nth-of-type(2) circle { transition-delay: 0.16s; }
.gx--ready .gx-ring:nth-of-type(3) circle { transition-delay: 0.32s; }
.gx--ready .gx-ring:nth-of-type(4) circle { transition-delay: 0.48s; }
.gx--ready .gx-ring:nth-of-type(5) circle { transition-delay: 0.64s; }
.gx--ready .gx-ring:nth-of-type(6) circle { transition-delay: 0.8s; }
@media (prefers-reduced-motion: reduce) {
  .gx--ready .gx-needle, .gx--ready .gx-ring circle { transition: none; }
}

/* Flettons Omni: the process, step by step (one iPhone per step, alternating sides) */
.omni-story { list-style: none; display: grid; gap: clamp(56px, 8vw, 112px); max-width: 1040px; }
.omni-story__step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: clamp(28px, 6vw, 96px); align-items: center; }
.omni-story__step:nth-child(even) { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
.omni-story__step:nth-child(even) .omni-story__text { order: 2; }
.omni-story__step .dev--phone { width: 100%; max-width: 300px; justify-self: center; }
.omni-story__n { display: block; font-size: clamp(3rem, 2rem + 4vw, 5.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.05em; color: var(--accent-text); margin-bottom: 14px; }
.omni-story__text h3 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.8rem); line-height: 1.08; letter-spacing: -0.03em; margin: 6px 0 14px; }
.omni-story__text p:not(.eyebrow) { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem); line-height: 1.5; color: var(--text-2); max-width: 30rem; }
@media (max-width: 720px) {
  .omni-story__step, .omni-story__step:nth-child(even) { grid-template-columns: 1fr; text-align: center; }
  .omni-story__step:nth-child(even) .omni-story__text { order: 0; }
  .omni-story__text p:not(.eyebrow) { margin-inline: auto; }
  .omni-story__text .eyebrow::after { margin-inline: auto; }
  .omni-story__step .dev--phone { max-width: 240px; }
}

/* Flettons One page (flettons-one.blade.php): price line under the hero, the components grid and the steps */
.one-price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px; margin-top: 22px; color: var(--text-2); }
.one-price .price { font-size: clamp(1.8rem, 1.5rem + 1vw, 2.4rem); letter-spacing: -0.03em; color: var(--text); }
.one-price small { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; }
.one-parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.one-parts li { display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: 20px; background: var(--surface); }
.one-parts .icon { width: 30px; height: 30px; margin-bottom: 14px; color: var(--text); }
.one-parts h3 { font-size: 1.1rem; letter-spacing: -0.015em; }
.one-parts p { color: var(--text-2); font-size: 0.95rem; }
.one-steps { max-width: 760px; }
@media (max-width: 1023px) { .one-parts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .one-parts { grid-template-columns: 1fr 1fr; gap: 12px; } .one-parts li { padding: 18px; } }

/* Flettons Plus page: features and what they mean for the member (plus-overview #everything) */
.fab { columns: 2; column-gap: 20px; }
.fab__group { break-inside: avoid; margin-bottom: 20px; padding: clamp(24px, 3vw, 36px); border-radius: 24px; background: var(--surface); }
.fab__head { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.fab__head .icon { width: 30px; height: 30px; color: var(--text); flex: none; }
.fab__head h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.55rem); letter-spacing: -0.025em; }
.fab__list { display: grid; }
.fab__list li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.fab__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.fab__list h4 { font-size: 1.05rem; letter-spacing: -0.01em; margin-bottom: 4px; }
.fab__list p { color: var(--text-2); font-size: 0.97rem; }
.fab__benefit { position: relative; margin-top: 8px; padding-left: 22px; color: var(--text) !important; font-weight: 600; }
.fab__benefit::before { content: ""; position: absolute; left: 2px; top: 0.42em; width: 10px; height: 6px; border-left: 2px solid var(--accent, #2563eb); border-bottom: 2px solid var(--accent, #2563eb); transform: rotate(-45deg); }
@media (max-width: 820px) { .fab { columns: 1; } }

/* Admin > Pricing > Bedrooms grid */
.bedroom-grid td { text-align: center; }
.bedroom-grid__money { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.bedroom-grid td { padding-left: 6px; padding-right: 6px; }
.bedroom-grid__money input { width: 5.2em; padding-left: 6px; padding-right: 6px; text-align: right; transition: background-color 0.3s; }
.bedroom-grid__money input.is-filled { background-color: var(--surface-2); }
.bedroom-grid th[scope="row"] { text-align: left; white-space: nowrap; }
.bedroom-grid th[scope="row"] .btn { display: block; margin-top: 6px; }
.bedroom-grid__all { background: var(--surface-2); }
.bedroom-grid__applies th[scope="rowgroup"] { padding-top: 18px; text-align: left; font-weight: 600; }
.bedroom-grid__applies input[type="checkbox"] { width: 20px; height: 20px; }

/* Quote form: the prices are shown once the customer asks for the quote to be sent */
.qj__send-hint { margin: 4px 0 0; color: var(--text-2); font-size: 0.94rem; }
.qj__nav [data-submit][hidden] { display: none; }

/* Energy Performance Certificate panel (quote property step and quote page).
   The A to G colours are the official certificate colours, the one place green is used,
   because clients recognise the scale. */
.qj__epc-panel { display: grid; gap: 12px; padding: 14px 0 0; border-top: 1px solid var(--line); }
.qj__epc-panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.qj__epc-panel-head .eyebrow { margin: 0; }
.qj__epc-panel-head .small { margin: 0; color: var(--text-2); }
.epc-scale { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; align-items: start; }
.epc-scale__band { --band: #888; display: grid; gap: 5px; justify-items: center; min-width: 0; }
.epc-scale__letter { display: grid; place-items: center; width: 100%; height: 30px; border-radius: 4px; background: var(--band); color: #fff; font-weight: 700; font-size: 0.9rem; opacity: 0.35; transition: opacity 0.2s; }
.epc-scale__band--a { --band: #008054; } .epc-scale__band--b { --band: #19b459; }
.epc-scale__band--c { --band: #8dce46; } .epc-scale__band--c .epc-scale__letter { color: #10240a; }
.epc-scale__band--d { --band: #ffd500; } .epc-scale__band--d .epc-scale__letter { color: #2b2400; }
.epc-scale__band--e { --band: #fcaa65; } .epc-scale__band--e .epc-scale__letter { color: #2e1600; }
.epc-scale__band--f { --band: #ef8023; } .epc-scale__band--g { --band: #e9153b; }
.epc-scale__band.is-current .epc-scale__letter { opacity: 1; height: 38px; margin-top: -4px; font-size: 1.1rem; box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--text); }
.epc-scale__band.is-potential .epc-scale__letter { opacity: 0.75; }
.epc-scale__tag { font-size: 0.76rem; line-height: 1.2; font-weight: 600; color: var(--text); text-align: center; }
.epc-scale__tag:empty { display: none; }
.epc-scale__band.is-potential .epc-scale__tag { font-weight: 400; color: var(--text-2); }
.epc-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; align-items: stretch; grid-auto-rows: 1fr; }
.epc-facts__item { display: grid; align-content: start; gap: 1px; padding: 7px 10px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r); background: var(--surface); min-width: 0; }
.epc-facts__label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); }
.epc-facts__value { font-size: 0.88rem; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; }
.qj__epc-note { display: grid; gap: 4px; padding: 10px 12px; font-size: 0.94rem; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.qj__epc-note p { margin: 0; }
.qj__epc-note-head { font-weight: 700; color: var(--text); }
.qj__epc-note .small { color: var(--text-2); }
.qj__epc-note .small:empty { display: none; }
.qj__epc-panel a { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.qr__epc { margin-top: 18px; }
@media (max-width: 560px) {
  .qj__epc-panel { padding: 12px 0 0; }
  .epc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .epc-scale__tag { font-size: 0.7rem; }
}
}
.epc-chip { display: inline-grid; place-items: center; min-width: 28px; height: 24px; margin-right: 6px; padding: 0 6px; border-radius: 4px; color: #fff; font-weight: 700; font-size: 0.85rem; vertical-align: 1px; }
.epc-chip--a { background: #008054; } .epc-chip--b { background: #19b459; } .epc-chip--c { background: #8dce46; color: #10240a; }
.epc-chip--d { background: #ffd500; color: #2b2400; } .epc-chip--e { background: #fcaa65; color: #2e1600; } .epc-chip--f { background: #ef8023; } .epc-chip--g { background: #e9153b; }

/* Show more on the EPC panel, the record card's empty list, and Continue kept in reach on phones */
.qj__record-list[hidden] { display: none; }
.epc-more { display: grid; gap: 10px; }
.epc-more > summary { cursor: pointer; width: max-content; font-weight: 600; font-size: 0.92rem; color: var(--text); text-decoration: underline; text-underline-offset: 4px; list-style: none; }
.epc-more > summary::-webkit-details-marker { display: none; }
.epc-more > summary::after { content: " +"; }
.epc-more[open] > summary::after { content: " \2212"; }
.epc-more[open] > summary { margin-bottom: 10px; }
.epc-more .small { margin: 8px 0 0; color: var(--text-2); }
.epc-more .small:empty { display: none; }
@media (max-width: 640px) {
  /* On phones the quote form behaves like an app form: Back and Continue are anchored to the bottom of the screen */
  .qj__panel .qj__nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--canvas); border-top: 1px solid var(--line); flex-direction: row; box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, 0.5); }
  body.route-quote-index main { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  html.qj-sheet-open .qj__panel .qj__nav { display: none; }
  .qj__panel .qj__nav .btn--ghost { width: auto; flex: 0 0 auto; }
  .qj__panel .qj__nav .btn--primary { flex: 1 1 auto; min-width: 0; }
  /* Room on the right for the voice assistant button, which sits over this corner */
  .qj__panel .qj__nav { padding-right: 84px; }
  .qj__record-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; padding: 10px 0; }
}
.epc-source { margin: 0; font-size: 0.78rem; color: var(--text-2); }

/* No footer on the quote form or the quote results: the header stays, the quote is the whole page */
body.route-quote-index .fs-footer, body.route-quote-results .fs-footer { display: none; }

/* Quote results in brand blue, as in concept A (owner, 4 Nov 2026): the chosen card has a blue outline, blue
   ticks and a light blue reasons box, and "Selected" carries a blue tick (no green on the site). */
.qr .svc.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.qr .svc.is-selected .svc__reasons { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--text); }
.qr .svc.is-selected .svc__reasons li::before { background: var(--accent-text); }
.qr .svc__inclusions .checks li::before { border: 0; background: transparent; }
.qr .svc__inclusions .checks li::after { border-color: var(--accent-text); }
.qr .svc__chosen { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.qr .svc__chosen::before { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.qr .svc.is-selected .svc__toggle { border-color: var(--accent); }
/* Finished quote steps and the "moved you to Level 3+" note in brand blue too, not green. */
.stepper__item.is-complete .stepper__dot { border-color: var(--accent); background: var(--accent); }
.stepper__item.is-complete .stepper__dot::after { border-color: var(--accent-fg); }
.qr__upgrade { border-color: var(--accent); }
/* Phones: the bar slides away while the end-of-page Continue is on screen (one Continue at a time). */
@media (max-width: 820px) {
  .qr__summary { transition: transform .2s ease; }
  .qr__summary.is-tucked { transform: translateY(110%); }
}

/* Level 2 page (4 Nov 2026): photo hero with the report on a laptop and phone, the report band, fit cards with
   properly sized icons, how it works, and the other surveys for home buyers. Mobile first where it matters. */
.l2-hero { position: relative; overflow: hidden; isolation: isolate; }
.l2-hero__photo { position: absolute; inset: 0 0 0 38%; z-index: -1; }
.l2-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 35%; display: block; }
.l2-hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--canvas-deep) 0%, rgba(20, 22, 24, 0.82) 22%, rgba(20, 22, 24, 0.25) 55%, rgba(20, 22, 24, 0) 75%), linear-gradient(0deg, rgba(20, 22, 24, 0.55) 0%, rgba(20, 22, 24, 0) 40%); }
.l2-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 48px; align-items: end; padding: clamp(48px, 6vw, 96px) 0 clamp(40px, 5vw, 72px); min-height: min(640px, 78vh); }
.l2-hero__copy { align-self: center; max-width: 36rem; }
.l2-hero__title { font-size: clamp(2.6rem, 1.5rem + 3.6vw, 4.6rem); }
.l2-hero .sx-hero__lead { color: var(--text); opacity: .92; }
.l2-hero__fit { margin-top: 14px; color: var(--text-2); font-size: 1rem; line-height: 1.5; }
.l2-hero__price { margin-top: 22px; }
.l2-hero__devices { position: relative; align-self: end; justify-self: end; width: min(100%, 560px); padding: 0 6% 0 0; }
.l2-hero__laptop { width: 100%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45)); }
.l2-hero__phone { position: absolute; right: -2%; bottom: -4%; width: 25%; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.5)); }

.l2-ico { display: inline-grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 16px; background: rgba(37, 99, 235, 0.1); color: var(--accent-text); }
.l2-ico .icon { width: 28px; height: 28px; stroke-width: 1.6; }
.l2-ico--lg { width: 84px; height: 84px; border-radius: 24px; }
.l2-ico--lg .icon { width: 40px; height: 40px; stroke-width: 1.5; }
.hx--dark .l2-ico { background: rgba(37, 99, 235, 0.18); color: #8db4ff; }

.l2-report { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px clamp(40px, 5vw, 80px); align-items: center; }
.l2-report__stage { padding: 0 6.5%; }
.l2-report__copy h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3.1rem); line-height: 1.05; letter-spacing: -0.035em; margin-top: 4px; }
.l2-points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 22px; }
.l2-points li { display: flex; gap: 18px; align-items: flex-start; }
.l2-points h3 { font-size: 1.15rem; letter-spacing: -0.01em; line-height: 1.3; }
.l2-points p { margin-top: 4px; color: var(--text-2); font-size: 1rem; line-height: 1.5; }
.l2-report__note { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 0.92rem; line-height: 1.55; color: var(--text-2); }

.l2-fit { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.l2-fit li { display: grid; justify-items: center; align-content: start; gap: 10px; padding: 32px 22px 28px; text-align: center; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.l2-fit .l2-ico { margin-bottom: 8px; }
.l2-fit h3 { font-size: 1.12rem; line-height: 1.3; letter-spacing: -0.01em; }
.l2-fit p { color: var(--text-2); font-size: 0.95rem; line-height: 1.5; max-width: 15rem; }
.l2-fit__note { margin-top: 28px; text-align: center; color: var(--text-2); }

.l2-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: none; }
.l2-steps li { padding: 28px 26px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.l2-steps__n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: 1.05rem; }
.l2-steps h3 { margin-top: 18px; font-size: 1.2rem; letter-spacing: -0.01em; }
.l2-steps p { margin-top: 6px; color: var(--text-2); line-height: 1.55; }

.l2-more { list-style: none; padding: 0; margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.l2-more a { display: flex; align-items: center; gap: 16px; height: 100%; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: var(--text); transition: border-color .15s; }
.l2-more a:hover { border-color: var(--line-strong); }
.l2-more .icon { flex: none; color: #8db4ff; }
.l2-more span:nth-of-type(1) { flex: 1; display: grid; gap: 4px; font-size: 0.92rem; line-height: 1.45; color: var(--text-2); }
.l2-more strong { font-size: 1.02rem; color: var(--text); }

@media (max-width: 1080px) {
  .l2-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l2-more { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .l2-hero__in { grid-template-columns: 1fr; min-height: 0; padding-bottom: 0; }
  .l2-hero__photo { inset: auto 0 0 0; height: 40%; }
  .l2-hero__photo::after { background: linear-gradient(180deg, var(--canvas-deep) 0%, rgba(20, 22, 24, 0.35) 30%, rgba(20, 22, 24, 0.1) 60%, rgba(20, 22, 24, 0.5) 100%); }
  .l2-hero__devices { justify-self: center; width: min(88%, 520px); margin: 16px 0 36px; padding: 0; }
  .l2-hero__phone { right: -6%; }
  .l2-report { grid-template-columns: 1fr; }
  .l2-report__copy { order: -1; }
  .l2-report__stage { padding: 0 6.5%; max-width: 640px; width: 100%; margin-inline: auto; }
  .l2-steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .l2-fit { grid-template-columns: 1fr; gap: 12px; }
  .l2-fit li { grid-template-columns: auto 1fr; justify-items: start; text-align: left; gap: 2px 16px; padding: 20px 18px; }
  .l2-fit .l2-ico { grid-row: span 2; margin: 0; width: 60px; height: 60px; border-radius: 18px; }
  .l2-fit .l2-ico .icon { width: 28px; height: 28px; }
  .l2-fit p { max-width: none; }
  .l2-points li { gap: 14px; }
  .l2-ico { width: 48px; height: 48px; border-radius: 14px; }
  .l2-ico .icon { width: 24px; height: 24px; }
  .l2-hero__devices { width: 92%; }
}

/* Survey level pages: the printed-report illustration and what comes with each level. */
.l2-books { margin-top: 8px; text-align: center; }
.l2-books img { display: block; width: 100%; max-width: 1080px; height: auto; margin: 0 auto; }
.l2-books figcaption { margin-top: 14px; font-size: 0.85rem; color: var(--text-3); }
.l2-includes { list-style: none; padding: 0; margin-top: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.l2-includes li { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid var(--line); }
.l2-includes__name { font-weight: 600; font-size: 1.08rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.l2-includes__text { color: var(--text-2); line-height: 1.5; }
.l2-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; letter-spacing: .02em; background: var(--accent); color: #fff; }
.l2-tag--opt { background: transparent; border: 1px solid #6ea8fe; color: #9cc2ff; }
.l2-faq { margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
@media (max-width: 720px) {
  .l2-includes { grid-template-columns: 1fr; }
}
.l2-fit--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.l2-fit--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.l2-hero__photo img { object-position: var(--l2-photo-pos, 40% 35%); }
.hx--dark .sx-parts { margin-top: 36px; }
@media (max-width: 1080px) { .l2-fit--five { grid-template-columns: repeat(3, minmax(0, 1fr)); } .l2-fit--six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .l2-fit--five, .l2-fit--six { grid-template-columns: 1fr; } }
/* Simon 5 Nov 2026: no new colours. Icons, step numbers and tags are neutral (charcoal on white, white on charcoal);
   brand blue stays for buttons, links and prices. */
.l2-ico { background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.hx--dark .l2-ico { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); color: #fff; }
.sec--white .l2-ico { background: #f5f5f3; color: #171a1c; }
.l2-steps__n { background: transparent; border: 1.5px solid currentColor; color: var(--text); }
.l2-tag { background: #fff; color: #171a1c; }
.l2-tag--opt { background: transparent; border: 1px solid rgba(255, 255, 255, 0.5); color: #fff; }
.l2-more .icon { color: var(--text); }
.l2-hero__copy { max-width: 40rem; }
.l2-hero__title { font-size: clamp(2.3rem, 1.3rem + 2.6vw, 3.7rem); }
/* Simon 5 Nov 2026: "Included" stands out (solid white with a tick); optional extras are outlined and explained. */
.l2-books__note { margin: 18px auto 0; max-width: 40rem; padding: 12px 18px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; font-size: 0.98rem; font-weight: 500; color: var(--text); }
.l2-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 0.82rem; font-weight: 700; background: #fff; color: #171a1c; }
.l2-tag .icon { width: 14px; height: 14px; stroke-width: 3; }
.l2-tag--opt { font-weight: 600; background: transparent; border: 1px solid rgba(255, 255, 255, 0.5); color: #fff; }
.plus-adds__list .spec__row dt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.plus-adds__list .l2-tag--end { order: 2; }
.l2-tag .icon { width: 14px !important; height: 14px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; color: currentColor !important; display: inline-block !important; }
/* Level cards show the printed-report picture instead of the line drawing (Simon, 5 Nov 2026). */
/* (6 Nov 2026) the pictures are now <x-site.level-picture> sets: see "Survey report sets" at the end of this file. */
.hx-level .lvl-pic--report { margin: 0 0 20px; }
/* What each report or extra does: on hover of the row, or tap/focus of the (i) button. */
.l2-includes li, .plus-adds__list .spec__row { position: relative; }
.l2-tip { position: absolute; top: 14px; right: 0; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; background: transparent; color: var(--text); cursor: help; }
.l2-tip .icon { width: 18px; height: 18px; }
.l2-tip__bubble { position: absolute; z-index: 20; right: -6px; bottom: calc(100% + 10px); width: min(300px, 80vw); padding: 12px 14px; border-radius: 12px; background: #fff; color: #171a1c; font-size: 0.92rem; font-weight: 500; line-height: 1.45; text-align: left; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.55); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s; pointer-events: none; }
.l2-tip__bubble::after { content: ""; position: absolute; right: 16px; top: 100%; border: 7px solid transparent; border-top-color: #fff; }
.l2-includes li:hover .l2-tip__bubble, .plus-adds__list .spec__row:hover .l2-tip__bubble, .l2-tip:focus .l2-tip__bubble, .l2-tip:focus-visible .l2-tip__bubble { opacity: 1; visibility: visible; transform: none; }
.l2-includes li:has(.l2-tip) { padding-right: 44px; cursor: help; }
.plus-adds__list .spec__row:has(.l2-tip) { cursor: help; }
.plus-adds__list .l2-tip { top: 12px; right: 12px; }
@media (prefers-reduced-motion: reduce) { .l2-tip__bubble { transition: none; } }

/* Level 2 shows one report: keep it to a modest book size rather than the full band width. */


/* Flettons Omni: an example call at a viewing (Simon, 5 Nov 2026). Surveyor lines left, the client's right. */
.omni-chat { list-style: none; display: grid; gap: 12px; max-width: 760px; margin: 0 auto; }
.omni-chat__line { max-width: 82%; padding: 14px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); }
.omni-chat__line--surveyor { justify-self: start; border-bottom-left-radius: 6px; }
.omni-chat__line--you { justify-self: end; border-bottom-right-radius: 6px; background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.omni-chat__who { display: block; margin-bottom: 4px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.75; }
.omni-chat__line p { margin: 0; line-height: 1.5; }
@media (max-width: 640px) { .omni-chat__line { max-width: 92%; padding: 12px 14px; } }

/* ---- Staging review, 5 Nov 2026: phone voice button and bottom bar --------------------------------------------
   The voice button never sits over the trust bar text or the quote's Continue button, and the bottom quote bar
   waits until the page's own hero button has scrolled away (it used to cover "From £395" on the level pages). */
@media (max-width: 640px) {
  .trust .trust__in, .hero-screen .trust__in { padding-right: 64px; }
  body:has(.qj__panel .qj__nav) #voice-assistant-root { bottom: calc(86px + env(safe-area-inset-bottom)) !important; }
}

/* Staging review, 5 Nov 2026: calmer page tops and no lone card.
   - Page heroes without a side box use one column; headlines balance over two lines instead of leaving one word.
   - Five specialist services sit 3 + 2 (six columns, three spans of two, then two spans of three) on wide screens. */
.page-hero__in:not(:has(.page-hero__aside)) { grid-template-columns: minmax(0, 1fr); }
.page-hero__in:not(:has(.page-hero__aside)) .page-hero__copy { max-width: 62rem; }
.page-hero h1, .sx-hero__title, .l2-hero__title, .hx h2, .sec__head h2 { text-wrap: balance; }
.l2-hero__copy { max-width: 40rem; }
.l2-hero__title { font-size: clamp(2.3rem, 1.3rem + 2.6vw, 3.7rem); }
@media (min-width: 1100px) {
  .routes:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .routes:has(> :nth-child(5):last-child) > * { grid-column: span 2; }
  .routes:has(> :nth-child(5):last-child) > :nth-child(n+4) { grid-column: span 3; }
}
.omni-hero__prices { display: flex; flex-wrap: wrap; gap: 6px 28px; margin-top: 22px; list-style: none; padding: 0; }
.omni-hero__prices li { display: inline-flex; align-items: baseline; gap: 8px; }
.omni-hero__prices .price { font-size: clamp(1.9rem, 1.6rem + 1vw, 2.4rem); font-weight: 700; letter-spacing: -0.03em; color: var(--accent-text); }
.omni-hero__prices .price-label { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); font-weight: 600; }

/* ---- Staging review, 5 Nov 2026: the quote journey -------------------------------------------------------------
   One main button at a time, the same step bar width on every page, one answer style, Continue always visible. */
/* Step 1: Continue appears once an address is chosen or typed; until then Find address is the one blue button,
   and once an address is chosen Find address steps back to an outline button. */
.qj__panel[data-step="address"]:has([data-selected-address][hidden]):has([data-manual-fields][hidden]) .qj__nav { display: none; }
.qj__panel[data-step="address"]:has([data-selected-address]:not([hidden])) [data-find-addresses],
.qj__panel[data-step="address"]:has([data-manual-fields]:not([hidden])) [data-find-addresses] { background: transparent; color: var(--text); border-color: var(--line-strong); }
/* The step bar is the same width on the results and booking pages as on the question steps. */
.qr .qj__head, .qb .qj__head { max-width: 52rem; margin-inline: auto; }
/* Step 3 answers look like the step 2 cards: left-aligned, a round mark for one answer, a square for several. */
.qj .chip-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.qj .chip-row--grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.qj .chip { display: grid; grid-template-columns: 1fr auto; justify-content: stretch; text-align: left; gap: 12px; min-height: 52px; padding: 12px 16px; font-size: 0.98rem; }
.qj .chip-row--grid .chip { justify-content: stretch; text-align: left; padding-inline: 16px; }
.qj .chip::after { content: ""; width: 22px; height: 22px; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--canvas); box-sizing: border-box; }
.qj .chip:has(input[type="checkbox"])::after { border-radius: 5px; }
.qj .chip:has(input:checked), .qj .chip[aria-current] { background: var(--surface-2); color: var(--text); border-color: var(--text); }
.qj .chip:has(input[type="radio"]:checked)::after { background: radial-gradient(circle, var(--action-bg) 0 5px, var(--canvas) 5.5px); }
.qj .chip:has(input[type="checkbox"]:checked)::after { background: var(--action-bg); border-color: var(--action-bg); box-shadow: inset 0 0 0 4px var(--action-bg); }
/* "Show my quote" stays in view, greyed until "Please send me my quote" is ticked. */
.qj__submit-wrap { display: grid; justify-items: end; gap: 6px; }
.qj [data-submit][aria-disabled="true"] { opacity: .45; }
.qj__submit-wrap .qj__send-hint { margin: 0; font-size: 0.86rem; color: var(--text-2); text-align: right; }
.qj__consent--optional { margin-top: 10px; }
.qj__optional { font-weight: 400; color: var(--text-2); font-size: 0.86rem; margin-left: 4px; }
/* Booking: a short terms summary, the full terms behind one tap (no scrolling box). */
.qb__terms-summary { display: grid; gap: 6px; margin: 0 0 12px; padding-left: 1.1em; color: var(--text-2); font-size: 0.95rem; }
.qb__terms { max-height: none; overflow: visible; display: block; padding: 0; border: 0; background: none; }
.qb__terms summary { cursor: pointer; font-weight: 600; color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; margin-bottom: 12px; }
.qb__terms-body { display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--canvas); font-size: 0.94rem; color: var(--text-2); margin-bottom: 12px; }
.qb__terms-body strong { color: var(--text); }
@media (min-width: 641px) {
  .qj__head .stepper { grid-auto-columns: auto; justify-content: space-between; }
  .qj__head .stepper__item { white-space: nowrap; }
}

/* Flettons Omni wordmark and tagline (Simon, 5 Nov 2026): "Flettons" in the text colour, "Omni" in brand blue, a small trade mark. */
.omni-wordmark { margin: 0 0 6px; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.omni-wordmark__omni { color: var(--brand-blue, var(--accent)); }
.omni-wordmark__tm { font-size: 0.5em; font-weight: 400; margin-left: 1px; vertical-align: super; line-height: 0; }
.omni-tagline { margin-bottom: 0; }
.omni-tagline__star { color: inherit; text-decoration: none; font-weight: 700; padding: 0 1px; }
.omni-tagline__star:hover, .omni-tagline__star:focus-visible { color: var(--accent-text, var(--accent)); }
.omni-footnote { margin: 14px 0 0; max-width: 34rem; font-size: 0.82rem; line-height: 1.5; color: var(--text-2); }
.omni-marked__phones { margin-top: clamp(40px, 6vw, 80px); }
/* Simon, 7 Nov 2026: the call is made in our own app, said plainly in the hero. */
.omni-app-note { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; max-width: 34rem; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface, var(--canvas)); font-size: 0.92rem; line-height: 1.45; color: var(--text); }
.omni-app-note svg { flex: 0 0 auto; margin-top: 1px; color: var(--accent-text, var(--accent)); }
.omni-app-note strong { color: var(--accent-text, var(--accent)); font-weight: 650; }

/* Booking: title, and the signature for the Terms of Engagement (5 Nov 2026) */
.field--narrow { max-width: 180px; }
.qb__sign { display: grid; gap: 8px; margin: 18px 0 6px; }
.qb__sign-label { margin: 0; font-weight: 600; color: var(--text); }
.qb__sign-pad { position: relative; height: 170px; border: 1px solid var(--line-strong); border-radius: var(--r); background: #ffffff; overflow: hidden; }
.qb__sign-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.qb__sign-line { position: absolute; left: 18px; right: 18px; bottom: 34px; border-top: 1px solid #c9ced1; padding-top: 4px; font-size: 0.78rem; color: #7f898f; pointer-events: none; }
.qb__sign-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.qb__sign-switch { background: none; border: 0; padding: 0; color: var(--accent-text); font: inherit; font-size: 0.9rem; text-decoration: underline; cursor: pointer; }
#client_address { min-height: 68px; }

/* Home page order (5 Nov 2026): "Which survey do I need?" sits first after the hero, on white. */
.hx-levels__help { margin-top: 14px; color: var(--text-2); font-size: 1rem; }
.hx-reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hx-compare thead th { white-space: nowrap; }
.hx-compare .hx-compare__note { white-space: normal; }
@media (max-width: 900px) {
  .hx-reviews { grid-template-columns: 1fr; }
}
/* Phones: the three level cards sit side by side and swipe, so the chart is one short scroll away. */
@media (max-width: 640px) {
  .hx-levels { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; width: 100%; max-width: none; margin-inline: 0; padding: 4px 16px 14px; scroll-padding-inline: 16px; scrollbar-width: none; }
  .hx-levels::-webkit-scrollbar { display: none; }
  .hx-levels > .hx-level { flex: 0 0 84%; scroll-snap-align: start; }
  .hx-compare th, .hx-compare td { padding-inline: 6px; }
  .hx-compare thead th { font-size: 0.82rem; }
  .hx-compare tbody th { font-size: 0.9rem; }
}

/* Page headlines (5 Nov 2026): long headlines wrapped to 4 lines on About, case studies and Compare.
   A touch smaller so every page hero headline sits on 2 or 3 lines, on phones too. */
.page-hero h1 { font-size: clamp(2rem, 1.2rem + 2.8vw, 3.6rem); }
.sx-hero__title:not(.l2-hero__title) { font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.8rem); }
/* With a photo or case file beside it, the headline column is half the width, so the headline is a size smaller. */
@media (min-width: 900px) {
  .page-hero__in:has(> .page-hero__copy + *) .page-hero__copy h1 { font-size: clamp(2.2rem, 1rem + 2.4vw, 3.1rem); }
}

/* Trustindex widget (Simon, 5 Nov 2026): its text is dark, made for a white page as on the old flettons.com,
   so it sits on a white card with dark text instead of the grey canvas. */
.trustindex-widget-shell { background: #ffffff; border-color: #e2e3df; color: #171a1c; color-scheme: light; }
.trustindex-widget-shell .trustindex-consent p { color: #454c51; }
.trustindex-widget-frame:not(:has(> :not(script):not(:empty), iframe))::before { color: #454c51; }
.fs-mega__more { margin: 18px 0 0; font-size: 0.92rem; }
.fs-mega__more a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* Omni page coverage map (Simon, 5 Nov 2026): canvas animation in a rounded dark frame, poster until it draws. */
.omni-coverage__map { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #0a0a0b center / cover no-repeat; box-shadow: 0 0 0 1px rgba(255,255,255,0.08); }
.omni-coverage__map canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 720px) { .omni-coverage__map { aspect-ratio: 4 / 5; border-radius: 16px; } }

/* Flettons Plus and Flettons One heroes (Simon, 5 Nov 2026): a photograph behind the laptop and gauge, blended into
   the charcoal top and bottom so it sits with the rest of the site. Always dark, in either theme. */
.plus-hero--photo { position: relative; isolation: isolate; overflow: hidden; }
.plus-hero__photo { position: absolute; inset: 34% 0 0 0; z-index: -1; }
.plus-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--plus-photo-pos, 50% 40%); display: block; filter: saturate(0.9); }
.plus-hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--canvas-deep) 0%, rgba(18, 20, 22, 0.62) 28%, rgba(18, 20, 22, 0.5) 62%, var(--canvas-deep) 100%); }
@media (max-width: 720px) { .plus-hero__photo { inset: 48% 0 0 0; } }

/* Flettons Plus: why become a member, six benefits */
.plus-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plus-why li { display: flex; flex-direction: column; gap: 8px; padding: clamp(22px, 2.4vw, 32px); border-radius: 22px; background: var(--surface); }
.plus-why .icon { width: 30px; height: 30px; margin-bottom: 10px; color: var(--text); }
.plus-why h3 { font-size: 1.18rem; letter-spacing: -0.015em; }
.plus-why p { color: var(--text-2); font-size: 0.97rem; }
.plus-why + .app-badges, .plus-why + * { margin-top: 32px; }
@media (max-width: 1023px) { .plus-why { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .plus-why { grid-template-columns: 1fr; gap: 12px; } }

/* Flettons Plus: the full feature list folds away */
.plus-all > summary { list-style: none; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 10px; margin: 0 auto; width: max-content; padding: 12px 22px; border-radius: 999px; border: 1px solid var(--line, rgba(127,127,127,0.3)); font-weight: 600; }
.plus-all > summary::-webkit-details-marker { display: none; }
.plus-all[open] > summary span { transform: rotate(45deg); }
.plus-all > summary span { display: inline-block; transition: transform .2s; font-size: 1.2em; line-height: 1; }
.plus-all[open] > .fab { margin-top: 32px; }

/* Partners page: the products partners get (Simon, 5 Nov 2026) */
.pt-tools + .sec--ink { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: clamp(64px, 8vw, 120px); }
.pt-tools__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(32px, 4vw, 48px); }

/* Partners page: six reasons to join (Simon, 5 Nov 2026) */
.pt-reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: none; }
.pt-reasons li { display: flex; flex-direction: column; gap: 10px; padding: clamp(24px, 2.6vw, 36px); border-radius: 22px; background: var(--surface); }
.pt-reasons__n { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; color: var(--text-2); }
.pt-reasons h3 { font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem); letter-spacing: -0.02em; }
.pt-reasons p { color: var(--text-2); }
.pt-reasons strong { color: var(--text); font-weight: 600; }
.pt-reasons__note { margin-top: 20px; font-size: 0.85rem; color: var(--text-2); max-width: 820px; }
@media (max-width: 1023px) { .pt-reasons { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .pt-reasons { grid-template-columns: 1fr; gap: 12px; } }

/* ===== Reviews widget, FAQs and Reviews heroes, Flettons One hero (Simon, 5 Nov 2026) =====
   The live Trustindex widget replaces the grey review boxes; it sits on a white card on dark and light bands alike. */
.ti-block { margin-top: clamp(32px, 4vw, 56px); }
.hx .ti-block, .sec__head + .ti-block { margin-top: clamp(28px, 3.5vw, 48px); }
.co-evidence .trustindex-widget-shell { padding: 14px; }
.trustindex-widget-frame { min-height: 200px; }
/* FAQs and Reviews heroes: the photograph in a rounded frame beside the words, as on About us */
.faq-hero-photo img { object-position: 45% 30%; }
.rv-hero-photo img { object-position: 50% 45%; }
/* Flettons One: the survey-level hero layout; the "with 12 months" note sits beside the price */
.one-hero .crumbs { margin-bottom: 14px; }
.one-hero .l2-hero__price { flex-wrap: wrap; row-gap: 6px; }
.one-hero__with { color: var(--text-2); font-size: 1rem; }
@media (min-width: 901px) {
  .page-hero__in:has(> .faq-hero-photo), .page-hero__in:has(> .rv-hero-photo) { grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr); align-items: center; }
}

/* Area pages (/building-surveyors-in-<area>): the list of other areas. */
.area-links { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 32px; }
.area-links li { padding: 10px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 1023px) { .area-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .area-links { grid-template-columns: 1fr; } }
.area-hero .hero__quote { max-width: 560px; }
.area-hero .hero__quote-label, .area-hero .hero__quote-hint { color: rgba(255, 255, 255, .86); }
.area-proof__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px 64px; align-items: center; }
.area-proof__rec h2 { margin: 6px 0 14px; }
.area-proof__rec > p { color: var(--text-2); max-width: 56ch; }
.area-proof__price { margin-top: 16px; font-size: 1.05rem; }
.area-proof__price .price { font-size: 1.9rem; font-weight: 700; color: var(--text); }
.area-proof__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 20px; }
.area-proof__facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.area-proof__facts li { display: grid; gap: 4px; padding: 20px 22px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); }
.area-proof__facts strong { font-size: 1.35rem; letter-spacing: -.01em; }
.area-proof__facts span { color: var(--text-2); }
.area-more { max-width: 820px; margin-top: 32px; display: grid; gap: 14px; color: var(--text-2); }
.area-case { max-width: 820px; text-align: center; display: grid; gap: 16px; justify-items: center; }
.area-case__quote { margin: 0; }
.area-case__quote p { font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.4; font-weight: 500; text-wrap: balance; }
.area-case__quote footer { margin-top: 10px; color: var(--text-2); }
.area-faq__prices li { margin-bottom: 6px; }
@media (max-width: 900px) { .area-proof__grid { grid-template-columns: 1fr; } }
.area-hero .hero__quote-label, .area-hero .hero__quote-hint, .area-hero .hero__status { text-align: left; justify-content: flex-start; }

/* Survey report sets (Simon, 6 Nov 2026): <x-site.level-picture>. The survey cover, a brand blue plus sign you can
   see on the light grey cards and the charcoal bands, then the extras as covers with one large icon each. Every
   cover has a hover label; a ticked list underneath names each part. */
.rset { display: block; width: 100%; color: var(--text); }
/* One size everywhere (Simon, 7 Nov 2026): every survey cover is 34% of the picture's width and every extra 16%,
   whatever the level, so Level 2 matches Level 3 and 3+. The plus sits in its own 9% slot, exactly halfway
   between the survey cover and the first extra. Two extras stacked are as tall as the cover. */
.rset__pics { container-type: inline-size; display: flex; justify-content: center; align-items: center; }
.rset__cover { flex: 0 0 34cqw; }
.rset__extras { display: grid; grid-template-columns: repeat(1, 16cqw); gap: 3cqw; align-items: start; }
.rset--3 .rset__extras { grid-template-columns: repeat(2, 16cqw); }
.rset--3plus .rset__extras { grid-template-columns: repeat(3, 16cqw); }
.rset__item { position: relative; display: block; min-width: 0; outline: none; border-radius: 8px; }
.rset__item img { display: block; width: 100%; height: auto; transition: transform .18s ease; }
.rset__item:hover img, .rset__item:focus-visible img { transform: translateY(-3px); }
.rset__item::after { content: attr(data-label); position: absolute; z-index: 30; left: 50%; bottom: calc(100% + 6px); width: max-content; max-width: 220px; padding: 7px 11px; border-radius: 8px; background: #2a2e31; color: #fff; font: 600 0.8rem/1.3 Inter, system-ui, sans-serif; letter-spacing: 0; text-align: center; text-transform: none; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity .15s, transform .15s, visibility .15s; pointer-events: none; }
.hx--dark .rset__item::after, .sec--ink .rset__item::after { background: #fff; color: #2a2e31; }
.rset__item:hover::after, .rset__item:focus::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.rset__item:focus-visible { box-shadow: 0 0 0 3px #2563eb; }
/* Right-hand column of extras: the label opens leftwards, so the hidden label never pushes the page wider than a phone screen. */
.rset--2 .rset__extras > .rset__item::after, .rset--3 .rset__extras > .rset__item:nth-child(2n)::after, .rset--3plus .rset__extras > .rset__item:nth-child(3n)::after { left: auto; right: 0; transform: translate(0, 4px); }
.rset--2 .rset__extras > .rset__item:is(:hover, :focus)::after, .rset--3 .rset__extras > .rset__item:nth-child(2n):is(:hover, :focus)::after, .rset--3plus .rset__extras > .rset__item:nth-child(3n):is(:hover, :focus)::after { transform: translate(0, 0); }
.rset__plus { flex: 0 0 9cqw; display: grid; place-items: center; color: var(--brand-blue, #2563eb); }
.rset__plus svg { width: 5.5cqw; height: auto; }
.rset--band { max-width: 1040px; margin: 0 auto; }
.rset__list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 7px; font-size: 0.9rem; line-height: 1.35; color: var(--text-2); text-align: left; }
.rset__list li { display: flex; align-items: flex-start; gap: 8px; }
.rset__list .icon { flex: none; width: 16px; height: 16px; margin-top: 1px; stroke-width: 2.6; color: var(--text); }
.rset__list .is-opt .icon { color: var(--brand-blue, #2563eb); }
.rset__list small { font-size: 0.82rem; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.hx-level .rset, .level-card > .rset, .g-level > .rset, .g-tier > .rset { margin: 0 0 18px; }
@media (prefers-reduced-motion: reduce) { .rset__item img, .rset__item::after { transition: none; } }

/* The three cards line up on their own now: every set is the survey cover's height (7 Nov 2026). */
/* A survey's extras sit at the bottom of its ticked list (<x-site.level-extras>); an optional one has a blue plus. */
.hx-level__adds li.is-opt::before { content: "+"; left: 1px; top: -0.08em; width: auto; height: auto; border: 0; transform: none; color: var(--brand-blue, #2563eb); font-weight: 700; font-size: 1.15em; line-height: 1.3; }
.checks li.is-opt::after { content: "+"; top: calc(0.2em + 9px); width: auto; height: auto; border: 0; transform: translate(-50%, -50%); color: var(--brand-blue, #2563eb); font-weight: 700; font-size: 14px; line-height: 1; }
li.is-opt small { font-size: 0.85em; font-weight: 600; color: var(--text-3); }
.g-level .level-extras { margin: 4px 0 16px; }
/* The level pill sits centred at the top of each survey box (Simon, 6 Nov 2026). */
.level__top:has(.pill--level), .level__top:has(.pill--solid), .level-card__head:has(.pill--level), .g-tier__head:has(.pill--level), .g-level__head:has(.pill--level) { justify-content: center; text-align: center; }
/* Each extra in a ticked list carries its cover's icon, small and charcoal (Simon, 6 Nov 2026). */
/* The icon stands in place of the tick or plus (Simon, 6 Nov 2026), so no marker is drawn for these items. */
li.lx::before, li.lx::after { display: none !important; }
li.lx .lx__ico { position: absolute; left: 0; top: 0.12em; width: 18px; height: 18px; margin: 0; stroke-width: 1.8; color: #2a2e31; }
.hx--dark li.lx .lx__ico, .sec--ink li.lx .lx__ico { color: #f7f7f5; }
.hx-level__adds li.lx { padding-left: 27px; }

/* Home page level cards: report time under the list, and the compare link straight under the cards (Simon, 7 Nov 2026) */
.hx-level__time { margin: 6px 0 0; color: var(--text-2); font-size: .9rem; }
.hx-level__why { margin: 2px 0 0; color: var(--text-2); font-size: .82rem; line-height: 1.4; }
.hx-levels__more { margin-top: 8px; }

/* Phones (Simon, 7 Nov 2026): the trust items in a left-aligned column so their icons line up, and the report time
   on one line ("after inspection" is said on the level pages and in the FAQ). */
@media (max-width: 640px) {
  .trust .trust__in, .hero-screen .trust__in { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; }
  .trust__more { display: none; }
}

/* Question-mark help tip (<x-site.help-tip>, owner 7 Nov 2026): a small round button; the panel shows on hover, focus
   or tap. Charcoal panel, white text, no new colours. */
.help-tip { position: relative; display: inline-block; vertical-align: middle; margin-left: 6px; }
.help-tip__button { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; color: inherit; font: 700 13px/1 Inter, system-ui, sans-serif; cursor: help; opacity: 0.8; }
.help-tip__button:hover, .help-tip__button:focus-visible { opacity: 1; outline: 2px solid #2563eb; outline-offset: 2px; }
.help-tip__panel { position: absolute; z-index: 60; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); width: min(340px, calc(100vw - 32px)); padding: 14px 16px; border-radius: 10px; background: #2a2e31; color: #fff; font-size: 14px; font-weight: 400; line-height: 1.55; text-align: left; letter-spacing: normal; text-transform: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); visibility: hidden; opacity: 0; transition: opacity 0.15s ease; pointer-events: none; }
.help-tip__button:focus-visible + .help-tip__panel, .help-tip.is-open .help-tip__panel { visibility: visible; opacity: 1; pointer-events: auto; }
@media (hover: hover) and (pointer: fine) { .help-tip:hover .help-tip__panel { visibility: visible; opacity: 1; pointer-events: auto; } }
@media (max-width: 820px) {
  .help-tip__button { width: 26px; height: 26px; }
  .help-tip__panel { position: fixed; left: 16px; right: 16px; bottom: auto; top: 50%; transform: translateY(-50%); width: auto; }
}

/* One report cover per service (Simon, 7 Nov 2026): <x-site.report-cover>. The same charcoal Flettons cover as the
   level covers, each service with its own house photograph. 'card' is the size of a level card's cover. */
.rcover { position: relative; display: block; flex: none; }
.rcover img { display: block; width: 100%; height: auto; transition: transform .18s ease; }
.rcover:hover img { transform: translateY(-3px); }
.rcover--card { width: 116px; margin-bottom: 4px; }
.rcover--feature { width: min(240px, 60vw); margin: 0 auto 32px; }
.rcover::after { content: attr(data-label); position: absolute; z-index: 30; left: 50%; bottom: calc(100% + 6px); width: max-content; max-width: 220px; padding: 7px 11px; border-radius: 8px; background: #2a2e31; color: #fff; font: 600 0.8rem/1.3 Inter, system-ui, sans-serif; text-align: center; opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity .15s, transform .15s, visibility .15s; pointer-events: none; }
.hx--dark .rcover::after, .sec--ink .rcover::after { background: #fff; color: #2a2e31; }
.rcover:hover::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* Simon, 7 Nov 2026: the ™ after Flettons Omni is small, top right and never bold, even in a bold heading. */
sup.tm { font-size: 0.5em; font-weight: 400; font-style: normal; vertical-align: super; line-height: 0; margin-left: 0.05em; letter-spacing: 0; }

/* ===== Non-traditional construction guides (Simon, 7 Nov 2026: "a high quality branded blog") =====
   /guides (A to Z), /guides/<family> and every guide at its old address. Charcoal hero on a faint drawing-board
   grid, white reading pages, brand blue for the accents. Classes start gd-. */
.gd-hero, .gd-post-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(60rem 28rem at 85% -10%, rgba(37, 99, 235, 0.16), transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--canvas-deep);
  border-bottom: 1px solid var(--line);
}
.gd-hero__in { padding: clamp(40px, 6vw, 88px) 0 clamp(40px, 5vw, 72px); max-width: 860px; margin-inline: auto; text-align: center; }
.gd-hero .eyebrow { display: inline-block; }
.gd-hero .eyebrow::after { margin-inline: auto; }
.gd-hero__title { font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.25rem); line-height: 1.02; letter-spacing: -0.04em; }
.gd-hero__title em { font-style: normal; font-weight: 400; color: var(--accent-text); }
.gd-hero__glyph { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin-right: 0.15em; vertical-align: -0.2em; border-radius: 14px; background: rgba(37, 99, 235, 0.14); color: var(--text); --glyph-accent: #6ea8fe; }
.gd-hero__glyph svg { width: 0.75em; height: 0.75em; }
.gd-hero__lead { margin: 20px auto 0; max-width: 40rem; text-wrap: balance; }
.gd-crumbs { justify-content: center; }
.gd-search { position: relative; max-width: 560px; margin: 32px auto 0; }
.gd-search__icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.gd-search__input {
  width: 100%; min-height: 58px; padding: 0 20px 0 52px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: rgba(255, 255, 255, 0.06); color: var(--text); font-size: 1.05rem;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.gd-search__input::placeholder { color: var(--text-3); }
.gd-search__input:focus { outline: none; border-color: var(--accent); background: rgba(255, 255, 255, 0.09); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.25); }
.gd-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin-top: 24px; color: var(--text-2); font-size: 0.95rem; }
.gd-stats strong { color: var(--text); font-weight: 700; }
.gd-stats li + li::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 14px 3px -14px; border-radius: 50%; background: var(--accent); }

/* Construction families */
.gd-families { padding-bottom: 0; }
.gd-library { padding-top: 24px; }
.gd-families__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.gd-family {
  display: grid; gap: 4px; height: 100%; padding: 18px 16px;
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--canvas);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.gd-family:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(23, 26, 28, 0.08); }
.gd-family.is-current { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.gd-family__glyph { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 8px; border-radius: 12px; background: var(--surface); color: var(--text); }
.gd-family.is-current .gd-family__glyph { background: var(--accent); color: #fff; --glyph-accent: #fff; }
.gd-family__name { font-weight: 700; line-height: 1.25; }
.gd-family__count { font-size: 0.88rem; color: var(--text-3); }

/* A to Z */
.gd-az {
  position: sticky; top: var(--header-h); z-index: 20;
  display: flex; flex-wrap: wrap; gap: 2px; justify-content: center;
  margin: 0 calc(var(--gutter) * -1) 8px; padding: 10px var(--gutter);
  background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.gd-az a, .gd-az span { display: grid; place-items: center; min-width: 34px; height: 34px; border-radius: 8px; font-weight: 600; font-size: 0.92rem; }
.gd-az a:hover { background: var(--accent); color: #fff; }
.gd-az span { color: var(--surface-3); }
.gd-count { min-height: 1.5em; margin: 8px 0 0; color: var(--text-2); text-align: center; font-weight: 600; }
.gd-group { scroll-margin-top: calc(var(--header-h) + 64px); }
.gd-letter { display: flex; align-items: center; gap: 16px; margin: 36px 0 18px; font-size: 1.6rem; }
.gd-letter::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.gd-letter::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }
.gd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.gd-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.gd-card {
  display: flex; flex-direction: column; overflow: hidden; height: 100%;
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--canvas);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.gd-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12); }
.gd-card__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface); }
.gd-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gd-card:hover .gd-card__media img { transform: scale(1.04); }
.gd-card__media--art {
  display: grid; place-items: center; color: #f7f7f5; --glyph-accent: #6ea8fe;
  background:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(145deg, #2b3034, #171a1c);
}
.gd-card__media--art svg { width: 64px; height: 64px; stroke-width: 1.2; opacity: .92; }
.gd-card__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 18px 18px; }
.gd-card__title { font-size: 1.08rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--text); }
.gd-card__excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.93rem; line-height: 1.5; color: var(--text-2); }
.gd-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 8px; font-size: 0.85rem; font-weight: 600; color: var(--text-3); }
.gd-card__arrow { color: var(--accent-text); transition: transform .2s ease; }
.gd-card:hover .gd-card__arrow { transform: translateX(4px); }

.gd-pill {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 4px 10px 4px 8px; border-radius: 999px;
  background: rgba(37, 99, 235, 0.09); color: var(--accent-text);
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
}
.gd-pill svg { stroke-width: 1.8; --glyph-accent: currentColor; }
.gd-pill--dark { background: rgba(37, 99, 235, 0.18); color: #9cc3ff; padding: 6px 14px 6px 10px; }
.gd-pill--dark:hover { background: rgba(37, 99, 235, 0.3); }

.gd-empty { display: grid; justify-items: center; gap: 8px; padding: 48px 16px; text-align: center; color: var(--text-2); }
.gd-empty svg { color: var(--text-3); }

/* Booking band */
.gd-band { background: var(--canvas-deep); border-top: 1px solid var(--line); }
.gd-band__in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 32px 64px; align-items: center; }
.gd-band h2 em { color: var(--accent-text); }
.gd-band .lead { margin-top: 16px; max-width: 36rem; }
.gd-band__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 24px; color: var(--text-2); font-weight: 600; }
.gd-band__price .price-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }
.gd-band__price .price { font-size: 2rem; font-weight: 700; color: var(--text); letter-spacing: -0.03em; }
.gd-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 20px; }
.gd-band__points { display: grid; gap: 14px; }
.gd-band__points li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: var(--text-2); }
.gd-band__points svg { flex: none; color: var(--accent-text); }
.gd-band__points strong { color: var(--text); }

/* A guide */
.gd-progress { position: sticky; top: var(--header-h); z-index: 250; height: 3px; margin-bottom: -3px; pointer-events: none; }
.gd-progress span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }
.gd-post-hero__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 32px 56px; align-items: center; padding: clamp(32px, 5vw, 72px) 0 clamp(40px, 5vw, 72px); }
.gd-post-hero .crumbs { margin-bottom: 18px; }
.gd-post-hero__title { margin-top: 18px; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem); line-height: 1.06; letter-spacing: -0.035em; }
.gd-post-hero__lead { margin-top: 18px; max-width: 38rem; }
.gd-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 24px; color: var(--text-2); font-size: 0.92rem; }
.gd-meta li { display: inline-flex; align-items: center; gap: 8px; }
.gd-meta svg { color: var(--accent-text); }
.gd-post-hero__media { margin: 0; }
.gd-post-hero__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); }
.gd-post-hero__media figcaption { margin-top: 12px; font-size: 0.85rem; color: var(--text-3); }
.gd-post-hero__art {
  display: grid; place-items: center; aspect-ratio: 3 / 2; border-radius: 16px; border: 1px solid var(--line);
  color: #f7f7f5; --glyph-accent: #6ea8fe;
  background:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(145deg, #2b3034, #1b1e21);
}
.gd-post-hero__art svg { width: 38%; height: auto; stroke-width: 1; }

.gd-post__grid { display: grid; grid-template-columns: 280px minmax(0, 720px); gap: 56px; justify-content: center; align-items: start; }
.gd-rail { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 20px; }
.gd-toc { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--canvas); }
.gd-toc summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; cursor: pointer; list-style: none; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.gd-toc summary::-webkit-details-marker { display: none; }
.gd-toc summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .2s ease; }
.gd-toc[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.gd-toc ol { display: grid; gap: 2px; max-height: 52vh; overflow: auto; padding: 0 8px 12px; }
.gd-toc a { display: flex; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 0.9rem; line-height: 1.35; color: var(--text-2); transition: background-color .15s ease, color .15s ease; }
.gd-toc a:hover { background: var(--surface); color: var(--text); }
.gd-toc a.is-current { background: rgba(37, 99, 235, 0.08); color: var(--accent-text); font-weight: 600; }
.gd-toc__n { flex: none; font-variant-numeric: tabular-nums; font-size: 0.78rem; font-weight: 700; color: var(--text-3); padding-top: 1px; }
.gd-toc a.is-current .gd-toc__n { color: var(--accent-text); }
.gd-rail__card { padding: 20px; border-radius: var(--r-card); background: #171a1c; color: #f7f7f5; }
.gd-rail__card p { font-size: 0.93rem; line-height: 1.5; color: #c4c9cc; }
.gd-rail__eyebrow { margin-bottom: 8px; font-size: 1.05rem !important; font-weight: 700; color: #f7f7f5 !important; }
.gd-rail__price { display: flex; align-items: baseline; gap: 8px; margin: 14px 0; }
.gd-rail__price .price-label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.gd-rail__price .price { font-size: 1.6rem; font-weight: 700; color: #f7f7f5; letter-spacing: -0.02em; }
.gd-rail__card .btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.gd-rail__card .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* The article */
.gd-prose { min-width: 0; font-size: 1.09rem; line-height: 1.75; color: #2a3034; }
.gd-prose > * + * { margin-top: 1.1em; }
.gd-prose h2, .gd-prose h3, .gd-prose h4 { color: var(--text); scroll-margin-top: calc(var(--header-h) + 24px); }
.gd-prose h2 { position: relative; margin-top: 2.2em; padding-top: 18px; font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.85rem); line-height: 1.2; }
.gd-prose h2::before { content: ""; position: absolute; left: 0; top: 0; width: 36px; height: 3px; border-radius: 2px; background: var(--accent); }
.gd-prose > h2:first-child { margin-top: 0; }
.gd-prose h3 { margin-top: 1.8em; font-size: 1.22rem; }
.gd-prose h4 { margin-top: 1.5em; font-size: 1.05rem; }
.gd-prose strong { color: var(--text); font-weight: 650; }
.gd-prose a { color: var(--accent-text); text-decoration: underline; text-decoration-color: rgba(37, 99, 235, 0.35); text-underline-offset: 3px; }
.gd-prose a:hover { text-decoration-color: currentColor; }
.gd-prose ul, .gd-prose ol { display: grid; gap: 0.55em; padding-left: 0; }
.gd-prose ul > li { position: relative; padding-left: 28px; }
.gd-prose ul > li::before { content: ""; position: absolute; left: 4px; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12); }
.gd-prose ol { counter-reset: gd; }
.gd-prose ol > li { position: relative; padding-left: 40px; counter-increment: gd; }
.gd-prose ol > li::before { content: counter(gd); position: absolute; left: 0; top: 0.15em; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #171a1c; color: #fff; font-size: 0.8rem; font-weight: 700; line-height: 1; }
.gd-prose li > p + p, .gd-prose li > ul { margin-top: 0.5em; }
.gd-callout { position: relative; margin: 1.8em 0; padding: 20px 22px 20px 24px; border-radius: var(--r-card); background: #f5f6f8; border-left: 4px solid var(--accent); }
.gd-callout p + p { margin-top: 0.6em; }
.gd-callout--key { background: #171a1c; color: #e4e6e8; border-left: 0; padding: 22px 24px; background-image: radial-gradient(24rem 10rem at 100% 0%, rgba(37, 99, 235, 0.25), transparent 70%); }
.gd-callout--key strong { color: #fff; }
.gd-callout__label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #9cc3ff; }
.gd-callout__label::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.gd-figure { margin: 2em 0; }
.gd-figure img { width: 100%; border-radius: 14px; border: 1px solid var(--line); }
.gd-figure figcaption { display: flex; gap: 10px; margin-top: 10px; font-size: 0.88rem; line-height: 1.5; color: var(--text-3); }
.gd-figure figcaption::before { content: ""; flex: none; width: 3px; border-radius: 2px; background: var(--accent); }
.gd-table { margin: 1.8em 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); -webkit-overflow-scrolling: touch; }
.gd-table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.94rem; line-height: 1.5; }
.gd-table th { padding: 12px 16px; background: #171a1c; color: #f7f7f5; text-align: left; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; }
.gd-table td { padding: 12px 16px; border-top: 1px solid var(--line); vertical-align: top; }
.gd-table tbody tr:nth-child(even) td { background: #fafaf9; }
.gd-table td:first-child { font-weight: 600; color: var(--text); }
.gd-video a { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; background: #171a1c; color: #fff !important; text-decoration: none !important; font-weight: 600; }
.gd-video a::before { content: ""; width: 0; height: 0; border-left: 10px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.gd-disclaimer { display: flex; gap: 14px; margin-top: 2.6em !important; padding: 18px 20px; border-radius: var(--r-card); border: 1px dashed var(--line-strong); font-size: 0.9rem; line-height: 1.6; color: var(--text-3); }
.gd-disclaimer svg { flex: none; margin-top: 2px; color: var(--text-3); }
.gd-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 2.4em !important; }
.gd-pager__link { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-card); transition: border-color .2s ease, background-color .2s ease; }
.gd-pager__link:hover { border-color: var(--accent); background: rgba(37, 99, 235, 0.04); }
.gd-pager__link--next { grid-column: 2; text-align: right; }
.gd-pager__dir { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.gd-pager__name { font-weight: 700; color: var(--text); line-height: 1.3; }

.gd-related { background: var(--canvas); }
.gd-related__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: 28px; }

@media (max-width: 1100px) {
  .gd-families__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .gd-post-hero__in, .gd-band__in { grid-template-columns: 1fr; }
  .gd-post-hero__in--art .gd-post-hero__media { display: none; }
  .gd-post__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .gd-rail { position: static; }
  .gd-rail__card { display: none; }
  .gd-grid, .gd-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .gd-hero__in { text-align: left; }
  .gd-hero .eyebrow::after { margin-inline: 0; }
  .gd-crumbs, .gd-stats { justify-content: flex-start; }
  .gd-search { margin-left: 0; }
  .gd-families__list { display: flex; gap: 10px; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter) 8px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .gd-families__list::-webkit-scrollbar { display: none; }
  .gd-families__list li { flex: 0 0 150px; scroll-snap-align: start; }
  .gd-az { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .gd-az::-webkit-scrollbar { display: none; }
  .gd-az a, .gd-az span { min-width: 32px; flex: none; }
  .gd-grid, .gd-grid--three { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .gd-card { flex-direction: row; }
  .gd-card__media { flex: 0 0 112px; aspect-ratio: auto; min-height: 100%; }
  .gd-card__media--art svg { width: 44px; height: 44px; }
  .gd-card__body { padding: 14px 14px 14px 16px; gap: 6px; }
  .gd-card__excerpt { -webkit-line-clamp: 2; font-size: 0.88rem; }
  .gd-pill { font-size: 0.68rem; }
  .gd-prose { font-size: 1.04rem; line-height: 1.7; }
  .gd-pager { grid-template-columns: 1fr; }
  .gd-pager__link--next { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .gd-card, .gd-card__media img, .gd-family, .gd-card__arrow { transition: none; }
  .gd-card:hover, .gd-family:hover { transform: none; }
  .gd-card:hover .gd-card__media img { transform: none; }
}
.gd-post-hero .gd-crumbs { justify-content: flex-start; }
@media (max-width: 640px) {
  .gd-families__list { scroll-padding-inline: var(--gutter); }
  .gd-stats li + li::before { display: none; }
}
.guide-glyph__accent { stroke: var(--glyph-accent, #2563eb); }
.gd-post-hero__title--long { font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem); line-height: 1.12; }
.gd-hero__glyph { display: grid; width: 72px; height: 72px; margin: 0 auto 20px; vertical-align: 0; border-radius: 18px; }
.gd-hero__glyph svg { width: 40px; height: 40px; }
.gd-families { padding-top: 40px; }
@media (max-width: 640px) { .gd-hero__glyph { margin-left: 0; width: 60px; height: 60px; } }

/* House Type Check (/house-type-check) ------------------------------------
   Homepage look: a photo hero with the form as a raised card, then calm sections. */
.htc-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--canvas-deep); border-bottom: 1px solid var(--line); }
.htc-hero__media { position: absolute; inset: 0; z-index: -2; }
.htc-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; filter: saturate(1.05); }
.htc-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
    linear-gradient(90deg, rgba(18, 20, 22, 0.95) 0%, rgba(18, 20, 22, 0.86) 42%, rgba(18, 20, 22, 0.55) 70%, rgba(18, 20, 22, 0.35) 100%),
    linear-gradient(0deg, rgba(18, 20, 22, 0.92) 0%, rgba(18, 20, 22, 0) 35%); }
.htc-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(40px, 7vh, 88px) 0 clamp(44px, 7vh, 88px); }
.htc-hero__title { margin: 12px 0 0; font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.7rem); line-height: 1.03; letter-spacing: -0.03em; }
.htc-hero__title span { display: block; color: var(--accent-text); }
.htc-hero__lead { margin: 18px 0 0; max-width: 34rem; font-size: clamp(1.04rem, 1rem + 0.3vw, 1.18rem); line-height: 1.55; color: var(--text-2); }
.htc-proof { display: grid; gap: 14px; margin: 30px 0 0; padding: 0; list-style: none; }
.htc-proof li { display: flex; align-items: center; gap: 14px; color: var(--text-2); font-size: 0.97rem; }
.htc-proof .icon { flex: none; width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: rgba(37, 99, 235, 0.16); color: var(--accent-text); }
.htc-proof strong { display: block; color: var(--text); font-weight: 650; }
.htc-has-result .htc-hero__card { display: none; }
.htc-has-result .htc-hero__in { grid-template-columns: minmax(0, 1fr); padding-block: clamp(32px, 5vh, 56px); }
.htc-has-result .htc-proof { display: none; }

/* The form card */
.htc-panel { display: grid; gap: 20px; padding: clamp(22px, 3vw, 32px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 18px; background: rgba(33, 37, 40, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7); }
.htc-panel h2 { margin: 0; font-size: 1.35rem; letter-spacing: -0.01em; }
.htc-panel p { margin: 0; color: var(--text-2); }
.htc-panel a:not(.btn) { color: var(--accent-text); }
.htc-panel--note { justify-items: start; }
.htc-panel__icon { width: 48px; height: 48px; padding: 11px; border-radius: 12px; background: rgba(37, 99, 235, 0.16); color: var(--accent-text); }
.htc-form__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.htc-steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: htc; }
.htc-steps li { counter-increment: htc; display: flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; color: var(--text-3); }
.htc-steps li::before { content: counter(htc); display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 0.7rem; }
.htc-steps li + li::after { content: none; }
.htc-steps li.is-on { color: var(--text); }
.htc-steps li.is-on::before { background: var(--accent); border-color: var(--accent); color: #fff; }
.htc-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: rgba(37, 99, 235, 0.12); border: 1px solid rgba(37, 99, 235, 0.35); color: var(--text-2); font-size: 0.92rem; }
.htc-banner .icon { flex: none; color: var(--accent-text); margin-top: 2px; }
.htc-step { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.htc-step legend { margin-bottom: 12px; padding: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.htc-step legend span { margin-left: 6px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.htc-search { position: relative; display: flex; gap: 8px; padding: 6px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--canvas); transition: border-color .15s, box-shadow .15s; }
.htc-search:focus-within { border-color: var(--text); box-shadow: 0 0 0 3px var(--focus-ring); }
.htc-search__icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.htc-search input { flex: 1; min-width: 0; height: 46px; padding: 0 10px 0 40px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 1.02rem; outline: none; text-transform: uppercase; }
.htc-search input::placeholder { text-transform: none; color: var(--text-3); }
.htc-find { min-height: 46px; padding: 0 18px; flex: none; }
/* The address pop-up itself is the homepage's .hero__list card; the chosen address then sits in the field. */
.htc-search input.is-picked { text-transform: none; font-weight: 600; text-overflow: ellipsis; cursor: default; }
.htc-link { justify-self: start; padding: 0; border: 0; background: none; color: var(--text-3); font: inherit; font-size: 0.88rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.htc-link:hover { color: var(--text); }
.htc-manual { display: grid; gap: 12px; }
.htc-drop { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px dashed var(--line-strong); border-radius: 12px; background: rgba(255, 255, 255, 0.02); cursor: pointer; transition: border-color .15s, background .15s; }
.htc-drop:hover, .htc-drop.is-over { border-color: var(--accent); background: rgba(37, 99, 235, 0.08); }
.htc-drop.is-full { display: none; }
.htc-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.htc-drop__icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--surface-3); color: var(--text); }
.htc-drop__text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.htc-drop__title { font-weight: 650; }
.htc-drop__hint { font-size: 0.85rem; color: var(--text-3); }
.htc-drop__btn { flex: none; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 8px; font-size: 0.88rem; font-weight: 600; }
.htc-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.htc-thumbs:empty { display: none; }
.htc-thumb { position: relative; width: 92px; height: 92px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.htc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.htc-thumb__remove { position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--scrim); color: var(--text); font-size: 1.05rem; line-height: 1; cursor: pointer; }
.htc-run { width: 100%; }
.htc-fine { margin: 0; font-size: 0.8rem; color: var(--text-3); line-height: 1.5; }
.htc-fine .icon { display: inline-block; margin-right: 4px; vertical-align: -2px; }
.htc-fine a { color: var(--text-2); }

/* The progress overlay */
.htc-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(18, 20, 22, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: htc-fade .25s ease; }
.htc-overlay[hidden] { display: none; }
.htc-overlay__box { width: min(540px, 100%); display: grid; gap: 16px; padding: clamp(24px, 4vw, 36px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; background: var(--surface); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.8); }
.htc-overlay__box h2 { margin: 0; font-size: 1.35rem; line-height: 1.25; letter-spacing: -0.01em; }
.htc-overlay__mark { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: rgba(37, 99, 235, 0.16); color: var(--accent-text); }
.htc-overlay__mark::after { content: ""; position: absolute; inset: -6px; border-radius: 22px; border: 2px solid rgba(37, 99, 235, 0.35); animation: htc-pulse 1.8s ease-out infinite; }
.htc-bar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.htc-bar span { display: block; width: 4%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-text)); transition: width .6s ease; }
.htc-stages { display: grid; gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; }
.htc-stages li { position: relative; padding-left: 34px; color: var(--text-3); line-height: 1.4; transition: color .2s; }
.htc-stages li::before { content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border: 2px solid var(--line-strong); border-radius: 50%; box-sizing: border-box; }
.htc-stages li.is-active { color: var(--text); font-weight: 600; }
.htc-stages li.is-active::before { border-color: var(--accent); border-right-color: transparent; animation: htc-spin .8s linear infinite; }
.htc-stages li.is-done, .htc-stages li.is-skipped { color: var(--text-2); }
.htc-stages li.is-done::before { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.htc-stages li.is-skipped::before { border-color: var(--line-strong); background: var(--line-strong); }
@keyframes htc-spin { to { transform: rotate(360deg); } }
@keyframes htc-pulse { 0% { opacity: 1; transform: scale(0.92); } 100% { opacity: 0; transform: scale(1.18); } }
@keyframes htc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes htc-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
body.htc-locked { overflow: hidden; }

/* The estimate */
.htc-results { padding: clamp(32px, 5vw, 64px) 0; scroll-margin-top: calc(var(--header-h) + 8px); }
.htc-results__in { display: grid; gap: 24px; max-width: 960px; }
.htc-result, .htc-desk, .htc-done { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); animation: htc-rise .45s ease both; }
.htc-result:focus, .htc-done:focus { outline: none; }
.htc-result { display: grid; gap: 22px; padding: clamp(22px, 4vw, 40px); }
.htc-result__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.htc-result__head h2 { margin: 8px 0 0; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem); line-height: 1.05; letter-spacing: -0.025em; }
.htc-result__head h2 span { display: block; margin-top: 6px; font-size: 0.5em; font-weight: 500; letter-spacing: 0; color: var(--text-2); }
.htc-result__head .htc-result__plain { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); line-height: 1.2; }
.htc-result__address { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; color: var(--text-3); font-size: 0.92rem; }
.htc-result__text { margin: 0; color: var(--text-2); }
.htc-tag { flex: none; padding: 6px 12px; border: 1px solid rgba(37, 99, 235, 0.5); border-radius: 999px; color: var(--accent-text); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.htc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.htc-tile { display: grid; gap: 4px; align-content: start; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.htc-tile__icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 8px; border-radius: 10px; background: rgba(37, 99, 235, 0.16); color: var(--accent-text); }
.htc-tile__k { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.htc-tile__v { font-size: 1.08rem; line-height: 1.3; }
.htc-tile__sub { font-size: 0.88rem; color: var(--text-2); }
.htc-flag { display: grid; grid-template-columns: 220px minmax(0, 1fr); overflow: hidden; border: 1px solid rgba(37, 99, 235, 0.55); border-radius: 16px; background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(37, 99, 235, 0.03)); }
.htc-flag__img { width: 100%; height: 100%; min-height: 180px; object-fit: cover; display: block; }
.htc-flag__body { display: grid; gap: 8px; align-content: start; padding: 22px; }
.htc-flag__body h3 { margin: 0; font-size: 1.4rem; letter-spacing: -0.01em; }
.htc-flag__body p { margin: 0; color: var(--text-2); }
.htc-flag__label { display: flex; align-items: center; gap: 6px; font-size: 0.78rem !important; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text) !important; }
.htc-flag__family { font-size: 0.9rem; color: var(--text-3) !important; }
.htc-flag .btn { justify-self: start; margin-top: 6px; }
.htc-road, .htc-note, .htc-caution { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.htc-road { padding: 16px 18px; border-radius: 14px; background: var(--surface-2); color: var(--text-2); }
.htc-road .icon, .htc-note .icon { flex: none; color: var(--accent-text); margin-top: 2px; }
.htc-note { color: var(--text-2); font-size: 0.94rem; }
.htc-seen h3 { margin: 0 0 10px; font-size: 1rem; }
.htc-seen ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.htc-seen li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-2); }
.htc-seen .icon { flex: none; color: var(--accent-text); margin-top: 3px; }
.htc-caution { padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.86rem; color: var(--text-3); }
.htc-caution .icon { flex: none; margin-top: 3px; }

/* The free desk study offer */
.htc-desk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); overflow: hidden; animation-delay: .12s; }
.htc-desk__pitch { display: grid; gap: 14px; align-content: start; padding: clamp(22px, 4vw, 40px); background: linear-gradient(160deg, rgba(37, 99, 235, 0.18), rgba(37, 99, 235, 0.02) 70%); border-right: 1px solid var(--line); }
.htc-desk__pitch h2 { margin: 0; font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem); line-height: 1.15; letter-spacing: -0.02em; }
.htc-desk__pitch p { margin: 0; color: var(--text-2); }
.htc-list { display: grid; gap: 12px; margin: 6px 0 0; padding: 0; list-style: none; }
.htc-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-2); font-size: 0.95rem; }
.htc-list .icon { flex: none; color: var(--accent-text); }
.htc-desk__form { display: grid; gap: 16px; align-content: start; padding: clamp(22px, 4vw, 40px); }
.htc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.htc-check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; color: var(--text-2); cursor: pointer; }
.htc-check input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--accent); }
.htc-check a { color: var(--accent-text); }
.htc-limits { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 0.88rem; color: var(--text-2); }
.htc-limits summary { cursor: pointer; font-weight: 600; color: var(--text); }
.htc-limits p { margin: 8px 0 0; }
.htc-desk__submit { width: 100%; }
.htc-done { display: grid; gap: 14px; justify-items: start; padding: clamp(24px, 4vw, 44px); }
.htc-done h2 { margin: 0; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); letter-spacing: -0.02em; }
.htc-done p { margin: 0; max-width: 40rem; color: var(--text-2); }
.htc-done__mark { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--accent); color: #fff; }
.htc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

/* The sections below */
.htc-section { padding: clamp(56px, 8vw, 104px) 0; border-bottom: 1px solid var(--line); }
.htc-section--alt { background: var(--canvas-deep); }
.htc-section--note { padding: 28px 0; }
.htc-section__head { max-width: 40rem; margin-bottom: clamp(28px, 4vw, 44px); }
.htc-section__head h2 { margin: 10px 0 0; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.1; letter-spacing: -0.025em; }
.htc-section__lead { margin: 12px 0 0; color: var(--text-2); font-size: 1.05rem; }
.htc-section__head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; max-width: none; }
.htc-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.htc-feature { display: grid; gap: 10px; align-content: start; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); transition: transform .2s ease, border-color .2s ease; }
.htc-feature:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.htc-feature h3 { margin: 6px 0 0; font-size: 1.15rem; }
.htc-feature p { margin: 0; color: var(--text-2); }
.htc-feature__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--surface-3); color: var(--text); }
.htc-feature--accent { border-color: rgba(37, 99, 235, 0.55); background: linear-gradient(160deg, rgba(37, 99, 235, 0.16), var(--surface) 65%); }
.htc-feature--accent .htc-feature__icon { background: var(--accent); color: #fff; }
.htc-how { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.htc-how .htc-section__head { margin-bottom: 0; }
.htc-timeline { position: relative; display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; }
.htc-timeline::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: linear-gradient(var(--accent), var(--line)); }
.htc-timeline li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; }
.htc-timeline__n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--canvas-deep); border: 2px solid var(--accent); color: var(--text); font-weight: 700; }
.htc-timeline h3 { margin: 8px 0 6px; font-size: 1.12rem; }
.htc-timeline p { margin: 0; color: var(--text-2); }
.htc-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.htc-type-card { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--text); text-decoration: none; transition: transform .2s ease, border-color .2s ease; }
.htc-type-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.htc-type-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.htc-type-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.htc-type-card:hover .htc-type-card__media img { transform: scale(1.04); }
.htc-type-card__body { display: grid; gap: 4px; padding: 16px; }
.htc-type-card__body span { font-size: 0.86rem; color: var(--text-3); }
.htc-disclaimer { display: flex; gap: 10px; align-items: flex-start; margin: 0; color: var(--text-3); font-size: 0.9rem; }
.htc-disclaimer .icon { flex: none; margin-top: 2px; }

@media (max-width: 960px) {
  .htc-hero__in { grid-template-columns: minmax(0, 1fr); }
  .htc-proof { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .htc-features { grid-template-columns: minmax(0, 1fr); }
  .htc-how { grid-template-columns: minmax(0, 1fr); }
  .htc-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .htc-desk { grid-template-columns: minmax(0, 1fr); }
  .htc-desk__pitch { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .htc-hero__in { padding-top: 28px; }
  .htc-proof { display: none; }
  .htc-hero__lead { font-size: 1rem; }
  .htc-panel { padding: 20px 16px; border-radius: 16px; }
  .htc-form__head { display: grid; }
  .htc-search { flex-wrap: wrap; }
  .htc-search input { flex-basis: 100%; }
  .htc-search__icon { top: 29px; }
  .htc-find { width: 100%; }
  .htc-drop__btn { display: none; }
  .htc-row { grid-template-columns: minmax(0, 1fr); }
  .htc-result__head { flex-direction: column-reverse; }
  .htc-flag { grid-template-columns: minmax(0, 1fr); }
  .htc-flag__img { min-height: 0; aspect-ratio: 16 / 9; }
  .htc-types { gap: 10px; }
  .htc-type-card__body { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .htc-stages li.is-active::before { animation: none; border-right-color: var(--accent); }
  .htc-overlay__mark::after, .htc-overlay, .htc-result, .htc-desk, .htc-done { animation: none; }
  .htc-feature, .htc-type-card, .htc-type-card__media img, .htc-bar span { transition: none; }
}
.gd-hero__check { margin: 12px 0 0; font-size: 0.94rem; color: var(--text-2); }
.gd-hero__check a { color: var(--accent-text); font-weight: 600; }

/* Home "Kept informed at every step" (Simon, 7 Nov 2026): the eight updates a client gets, numbered, in a wrapping grid
   on the charcoal band. Brand blue numbers, no new colours. */
.hx-updates { margin-top: 40px; }
.hx-updates__title { font-size: 1.15rem; margin: 0 0 16px; }
.hx-updates__list { list-style: none; counter-reset: upd; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hx-updates__list li { counter-increment: upd; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; font-size: .92rem; line-height: 1.35; }
.hx-updates__list li::before { content: counter(upd); flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #2563eb; color: #fff; font-weight: 700; font-size: .8rem; }
@media (max-width: 900px) { .hx-updates__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .hx-updates__list { grid-template-columns: 1fr; } }

/* Defects and buying advice library (/advice, 7 Nov 2026): reuses the guides' look, plus the "In short" answer,
   the questions and answers, and the quote prompts inside the article. */
.gd-callout--answer { background: #eef4ff; border-left-color: var(--accent); }
.gd-callout--answer .gd-callout__label { color: var(--accent-text, #1d4ed8); }
.gd-callout--answer p { font-size: 1.04rem; line-height: 1.6; color: var(--text); }
.gd-faq { margin-top: 2.4em; }
.gd-faq h3 { margin-top: 1.4em; font-size: 1.08rem; }
.gd-faq h3 + p { margin-top: 0.4em; }
.gd-quote-prompt { display: flex; gap: 10px; align-items: flex-start; margin: 1.4em 0; padding: 14px 16px; border-radius: var(--r-card); border: 1px solid var(--line); background: #fff; font-size: 0.96rem; }
.gd-quote-prompt svg { flex: none; margin-top: 2px; color: var(--accent); }
.gd-quote-prompt a { color: var(--accent-text, #1d4ed8); font-weight: 600; }
.gd-inline-cta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-top: 2.6em; padding: 22px 24px; border-radius: var(--r-card); background: #171a1c; color: #e4e6e8; }
.gd-inline-cta p { margin: 0; color: #c4c9cc; font-size: 0.95rem; }
.gd-inline-cta .gd-inline-cta__title { color: #fff; font-weight: 700; font-size: 1.08rem; margin-bottom: 4px; }
.gd-inline-cta .btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.gd-rail__link { display: block; margin-top: 12px; font-size: 0.86rem; line-height: 1.4; color: #9cc3ff; }
.gd-letter--topic { font-size: 1.3rem; }
.gd-letter--topic a { color: inherit; text-decoration: none; }
.gd-letter--topic a:hover { color: var(--accent); }

/* Google Analytics cookie choice (partials/analytics-consent). Above the mobile quick action bar. */
.ga-consent { position: fixed; z-index: 300; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: 640px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 16px; border-radius: 12px; background: #2a2e31; color: #fff; font-size: 0.9rem; line-height: 1.4; box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.55); }
.ga-consent[hidden] { display: none; }
.ga-consent p { flex: 1 1 280px; margin: 0; }
.ga-consent a { color: #fff; text-decoration: underline; }
.ga-consent__actions { display: flex; gap: 8px; }
.ga-consent__btn { min-height: 44px; padding: 0 18px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.5); background: transparent; color: #fff; font: 600 0.9rem/1 Inter, system-ui, sans-serif; cursor: pointer; }
.ga-consent__btn--accept { border-color: #2563eb; background: #2563eb; }
body:has(.ga-consent:not([hidden])) #voice-assistant-root { visibility: hidden; }
@media print { .ga-consent { display: none !important; } }
/* Live review, 7 Nov 2026: on a phone the cookie bar sat over the quote's Continue button (and the other fixed
   bottom bars), so a visitor who ignored it could not carry on. It now sits just above whichever bar the page has. */
@media (max-width: 640px) {
  /* The quote form fills the screen down to its Continue bar, so there the choice sits at the top, under the header. */
  body:has(.qj__form) .ga-consent { top: calc(var(--header-h, 64px) + 8px); bottom: auto; }
  body:has(.qr__summary) .ga-consent { bottom: calc(110px + env(safe-area-inset-bottom)); }
  html:not(.hero-quote-visible) body:not(.flow-focused):has(.ms-mobile-cta) .ga-consent { bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* Guides with no photograph yet (Simon, 7 Nov 2026): a branded tile, replaced by a photo when one is added. */
.gd-awaiting { position: relative; }
.gd-awaiting .gd-awaiting__brand { position: absolute; top: 14px; left: 16px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.02em; color: #fff; }
.gd-awaiting .gd-awaiting__note { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.gd-post-hero__art.gd-awaiting { grid-template-rows: 1fr auto; align-content: center; gap: 12px; padding: 48px 24px 56px; }
.gd-post-hero__art.gd-awaiting svg { width: 32%; align-self: end; justify-self: center; }
.gd-post-hero__art .gd-awaiting__brand { top: 20px; left: 24px; font-size: 1rem; }
.gd-post-hero__art .gd-awaiting__name { align-self: start; text-align: center; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.gd-post-hero__art .gd-awaiting__note { bottom: 20px; font-size: 0.78rem; }
@media (max-width: 640px) {
  .gd-card__media.gd-awaiting .gd-awaiting__brand, .gd-card__media.gd-awaiting .gd-awaiting__note { display: none; }
}
@media (max-width: 960px) {
  .gd-post-hero__in--art .gd-post-hero__media { display: block; max-width: 520px; }
}

/* Construction guides "In short" box (7 Nov 2026): the quick answers at the top of every guide. */
.gd-short { margin-top: 0; }
.gd-short__list { margin: 4px 0 0; display: grid; gap: 12px; }
.gd-short__row { display: grid; grid-template-columns: 11rem 1fr; gap: 4px 18px; padding-top: 12px; border-top: 1px solid rgba(37, 99, 235, 0.16); }
.gd-short__row:first-child { padding-top: 0; border-top: 0; }
.gd-short dt { font-weight: 700; font-size: 0.92rem; color: var(--text); }
.gd-short dd { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--text); }
@media (max-width: 640px) { .gd-short__row { grid-template-columns: 1fr; } }