/* Cooper Construction brand: shared/brand.md. System fonts only, no web fonts, no tracking. */
:root {
  --charcoal: #1b1b24;
  --silver: #808080;
  --light-grey: #f2f2f2;
  --mid-grey: #e4e4e4;
  --ivory: #f5efe1;
  --text: #333333;
  --note: var(--text); /* RC7 marketing 5: notes, help, .opt and captions are body colour, not grey */
  --white: #ffffff;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, "Helvetica Neue", Helvetica, sans-serif;
  /* RC6 type system (brief section 0): the ONLY families and sizes on the site. See the type block at the end. */
  --font-body: var(--sans);
  --font-head: var(--serif);
  --size-body: 1.0625rem;
  --size-h1: clamp(2rem, 4.6vw, 3.25rem);
  --size-h2: clamp(1.6rem, 3.2vw, 2.25rem);
  --size-h3: 1.3rem;
  --size-btn: var(--size-body);
  --wrap: 68rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.smooth { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html.smooth { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-body); font-size: var(--size-body); line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--charcoal); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid #2e6da4; outline-offset: 2px; }

h1, h2, h3 { color: var(--charcoal); font-weight: normal; line-height: 1.2; margin: 0 0 0.6em; }
h1 { letter-spacing: -0.01em; }

p { margin: 0 0 1em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--white); padding: 0.5rem 1rem; z-index: 10; }

/* Header band: logo left, title right in light grey Georgia */
.band { background: var(--charcoal); color: var(--light-grey); }
.band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; }
.band img { width: 11.5rem; }
.band nav { display: flex; gap: 1.25rem; }
.band nav a { color: var(--light-grey); text-decoration: none; }
.band nav a:hover, .band nav a[aria-current] { text-decoration: underline; }
@media (max-width: 40rem) {
  .band .wrap { flex-wrap: wrap; padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .band img { width: 9.5rem; }
  .band nav { gap: 1rem; }
}

/* Hero */
.hero { background: var(--charcoal); color: var(--light-grey); padding: 3.5rem 0 4rem; border-top: 1px solid #2c2c38; }
.hero h1 { color: var(--white); max-width: 22ch; }
.eyebrow { letter-spacing: 0.14em; text-transform: uppercase; color: #b3b3b3; margin-bottom: 1rem; }
.promise { color: var(--ivory); max-width: 40ch; border-left: 3px solid var(--silver); padding-left: 1rem; margin: 1.5rem 0 2rem; }
.hero-price { color: var(--light-grey); margin: 0 0 1.75rem; }
.hero-price strong { font-weight: normal; color: var(--white); }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.btn { display: inline-block; padding: 0.85rem 1.4rem; font-weight: bold; line-height: 1.2; text-decoration: none; border: 2px solid var(--charcoal); background: var(--charcoal); color: var(--white); cursor: pointer; }
.btn:hover { background: #33333f; }
.btn-light { background: var(--ivory); color: var(--charcoal); border-color: var(--ivory); }
.btn-light:hover { background: var(--white); }
.btn-ghost { background: transparent; color: var(--white); border-color: var(--silver); }
.btn-ghost:hover { background: #2c2c38; }

/* Sections */
section { padding: 4rem 0; }
section.alt { background: var(--light-grey); }
.lede { max-width: 46rem; }
.note { color: var(--note); }
.cols { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .cols-2 { grid-template-columns: 1fr 1fr; } .cols-3 { grid-template-columns: repeat(3, 1fr); } }

.ticks { list-style: none; padding: 0; margin: 0 0 1rem; }
.ticks li { padding-left: 1.6rem; position: relative; margin-bottom: 0.55rem; }
.ticks li::before { content: ""; position: absolute; left: 0.2rem; top: 0.55em; width: 0.55rem; height: 0.3rem; border-left: 2px solid var(--charcoal); border-bottom: 2px solid var(--charcoal); transform: rotate(-45deg); }

/* Stages */
.stage { background: var(--white); border-top: 4px solid var(--charcoal); padding: 1.5rem; }
.stage h3 { margin-bottom: 0.25rem; }
.stage .when { color: var(--note); margin-bottom: 1rem; }
.stage ol { margin: 0; padding-left: 0; list-style: none; counter-reset: none; }
.stage ol li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.25rem; padding: 0.6rem 0; border-top: 1px solid var(--mid-grey); }
.stage ol li span.n { color: var(--note); }
.stage ol li b { color: var(--charcoal); }
.stage ul { margin: 0; padding: 0; list-style: none; }
.stage ul li { padding: 0.6rem 0; border-top: 1px solid var(--mid-grey); }

/* Price */
.price-box { background: var(--charcoal); color: var(--light-grey); padding: 2rem; }
.price-box h2 { color: var(--white); }
.big { color: var(--white); line-height: 1; margin: 0.25rem 0 0.5rem; }
.price-box .ex { color: var(--light-grey); margin-bottom: 1.25rem; }
.price-box a:not(.btn) { color: var(--ivory); }
.compare { background: var(--white); padding: 2rem; border: 1px solid var(--mid-grey); }
.founding { background: var(--ivory); padding: 2rem; margin-top: 1.5rem; }
.founding h3 { margin-bottom: 0.5rem; }

/* Steps */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps > li { counter-increment: step; position: relative; padding: 0 0 1.75rem 3.25rem; }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: -0.1rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--charcoal); color: var(--white); font-family: var(--serif); display: grid; place-items: center; }
.steps > li::after { content: ""; position: absolute; left: 1.05rem; top: 2.3rem; bottom: 0.3rem; width: 2px; background: var(--mid-grey); }
.steps > li:last-child::after { display: none; }
.steps h3 { margin-bottom: 0.25rem; }
.steps .time { color: var(--note); }

/* FAQ */
.faq details { border-top: 1px solid var(--mid-grey); padding: 0; }
.faq details:last-child { border-bottom: 1px solid var(--mid-grey); }
.faq summary { padding: 1rem 0; cursor: pointer; color: var(--charcoal); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); color: var(--silver); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 0 1rem; max-width: 48rem; }

/* Tables */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; background: var(--white); }
th, td { text-align: left; padding: 0.8rem 0.75rem; border-bottom: 1px solid var(--mid-grey); vertical-align: top; }
thead th { background: var(--charcoal); color: var(--light-grey); font-weight: normal; }
td.num, th.num { text-align: right; white-space: nowrap; }
tbody tr.pkg { background: var(--ivory); }
@media (max-width: 40rem) {
  .stack thead { display: none; }
  .stack tr { display: block; border-bottom: 1px solid var(--mid-grey); padding: 0.75rem 0; }
  .stack td { display: block; border: 0; padding: 0.15rem 0.75rem; text-align: left; }
  .stack td[data-label]::before { content: attr(data-label) ": "; color: var(--note); }
  .stack td:first-child { font-weight: bold; }
}

/* Form */
.enquire { background: var(--charcoal); color: var(--light-grey); }
.enquire h2 { color: var(--white); }
.enquire a:not(.btn) { color: var(--ivory); }
form { background: var(--white); color: var(--text); padding: 1.5rem; max-width: 46rem; }
@media (min-width: 48rem) { form { padding: 2rem; } }
.field { margin-bottom: 1.1rem; }
.field label, fieldset legend { display: block; font-weight: bold; color: var(--charcoal); margin-bottom: 0.35rem; }
.opt { font-weight: normal; color: var(--note); }
input[type=text], input[type=email], input[type=tel], select, textarea {
  width: 100%; padding: 0.75rem; font: inherit; color: var(--text);
  border: 1px solid #8a8a8a; background: var(--white); border-radius: 0;
}
input:focus, select:focus, textarea:focus { outline: 3px solid #2e6da4; outline-offset: 0; border-color: var(--charcoal); }
.row { display: grid; gap: 0 1rem; }
@media (min-width: 40rem) { .row { grid-template-columns: 1fr 1fr; } }
fieldset { border: 0; padding: 0; margin: 0 0 1.1rem; }
.consent { background: var(--light-grey); padding: 1rem; margin-bottom: 0.75rem; }
.consent label { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.5rem; font-weight: normal; margin: 0; }
.consent input { width: 1.2rem; height: 1.2rem; margin-top: 0.2rem; }
.hidden { position: absolute; left: -9999px; }

/* Footer */
footer { background: var(--charcoal); color: var(--light-grey); padding: 2.5rem 0; border-top: 1px solid #2c2c38; }
footer a { color: var(--light-grey); }
/* RC7 marketing 5: the company line has an inline grey (style="color:#b3b3b3") on every page; body colour wins until that inline style is removed */
footer .note { color: var(--light-grey) !important; }
footer .wrap { display: grid; gap: 1rem; }
@media (min-width: 48rem) { footer .wrap { grid-template-columns: 2fr 1fr; } }

.draft-flag { background: #fff3cd; border: 1px solid #9c5700; color: #5c3400; padding: 1rem; margin-bottom: 2rem; }
.prose { max-width: 46rem; }
.prose h2 { margin-top: 2rem; }

/* Credentials strip under the hero */
.credentials { background: var(--ivory); padding: 1.25rem 0; }
.credentials p { margin: 0; color: var(--charcoal); }

/* Keep the footer at the bottom on short pages (thanks) */
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }
/* Short pages (thanks): fill the gap between hero and footer */
main.fill-dark { background: var(--charcoal); }

/* ---- Landing v2 ---- */
.hero-places { color: var(--ivory); margin: -0.75rem 0 1.5rem; }

/* Not for you if */
.not-for { background: var(--light-grey); padding: 1.5rem; }
.crosses { list-style: none; padding: 0; margin: 0 0 1rem; }
.crosses li { position: relative; padding-left: 1.6rem; margin-bottom: 0.6rem; }
.crosses li::before { content: "\00D7"; position: absolute; left: 0.1rem; top: -0.1rem; font-size: 1.3rem; color: var(--charcoal); }

/* Stage cards + see all 13 */
.stage-n { letter-spacing: 0.12em; text-transform: uppercase; color: var(--note); margin: 0 0 0.25rem; }
.all-parts { margin-top: 1.5rem; }
.all-parts > summary { cursor: pointer; display: inline-block; font-weight: bold; line-height: 1.2; padding: 0.75rem 1.2rem; border: 2px solid var(--charcoal); background: var(--white); color: var(--charcoal); }
.all-parts[open] > summary { margin-bottom: 1.25rem; }
.all-parts > summary::-webkit-details-marker { display: none; }

/* Sample report previews */
.previews { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 48rem) { .previews { grid-template-columns: repeat(4, 1fr); } }
.previews figure { margin: 0; }
.previews img { border: 1px solid var(--mid-grey); box-shadow: 0 2px 10px rgba(27,27,36,0.12); }
.previews figcaption { color: var(--note); margin-top: 0.5rem; }

/* Price box: Loan Ready first step + promise */
.first-step { border-top: 1px solid #3a3a48; margin-top: 1.25rem; padding-top: 1.25rem; }

.price-box .promise-line { color: var(--ivory); }
/* 5-day promise conditions box (price box and FAQ) */
.promise-box { background: var(--ivory); color: var(--charcoal); padding: 1rem 1.25rem; margin: 1rem 0 0.5rem; }
.promise-box .promise-head { margin-bottom: 0.25rem; }
.promise-box ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.promise-box li { margin-bottom: 0.35rem; }
.price-box .promise-more a { color: var(--ivory); }
.places { color: var(--charcoal); }

/* Calculator */
.calc { background: var(--light-grey); padding: 1.5rem; max-width: none; }
.calc .result { margin: 0 0 1.25rem; }
.calc output { color: var(--charcoal); }

/* People */
.people { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .people { grid-template-columns: repeat(2, minmax(0, 22rem)); } }
.person { margin: 0; display: flex; gap: 1.25rem; align-items: center; }
.portrait { width: 7.5rem; height: 7.5rem; border-radius: 50%; object-fit: cover; flex: none; }

/* Scored thank-you pages */
.booking-slot { border: 2px dashed var(--silver); color: var(--light-grey); padding: 1.5rem; margin: 0 0 1.5rem; max-width: 30rem; text-align: center; }

/* Sticky mobile button */
.sticky-cta { display: none; }
@media (max-width: 48rem) {
  .sticky-cta { display: block; position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 20; text-align: center;
    padding: 0.95rem 1rem; background: var(--ivory); color: var(--charcoal); font-weight: bold; line-height: 1.2;
    text-decoration: none; box-shadow: 0 4px 16px rgba(0,0,0,0.3); transition: transform 0.2s, opacity 0.2s, visibility 0.2s; }
  /* RC7 a11y: a hidden bar can't take keyboard focus, and focused items scroll clear of the bar */
  .sticky-cta.is-hidden { transform: translateY(150%); opacity: 0; pointer-events: none; visibility: hidden; }
  body { padding-bottom: 5rem; }
  html { scroll-padding-bottom: 5rem; }
}
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }
.btn-big { padding: 1rem 1.5rem; }

/* ---- Review changes 19 Sep 2026 ---- */
/* Short-rooms strip under the hero */
.short-rooms { background: var(--white); padding: 1.75rem 0; border-bottom: 1px solid var(--mid-grey); }
.short-rooms p { margin: 0; max-width: 52rem; }
.short-rooms b { color: var(--charcoal); font-weight: normal; display: block; margin-bottom: 0.35rem; }

/* Callouts under the parts list */
.callout { background: var(--white); border-left: 4px solid var(--charcoal); padding: 1.25rem 1.5rem; margin-top: 1.5rem; max-width: 52rem; }
.callout h3 { margin-bottom: 0.4rem; }
.callout p:last-child { margin-bottom: 0; }

/* Real documents */
.layout-compare { display: grid; gap: 1.5rem; margin-bottom: 2.5rem; }
@media (min-width: 48rem) { .layout-compare { grid-template-columns: 3fr 2fr; align-items: start; } }
.pair { display: grid; gap: 1rem; }
@media (min-width: 30rem) { .pair { grid-template-columns: 1fr 1fr; } }
.docs { display: grid; gap: 1.5rem; }
@media (min-width: 40rem) { .docs { grid-template-columns: 1fr 1fr; } }
.layout-compare figure, .docs figure { margin: 0; }
.layout-compare a, .docs a { display: block; margin-bottom: 0.5rem; }
.layout-compare img, .docs img { border: 1px solid var(--mid-grey); box-shadow: 0 2px 10px rgba(27,27,36,0.12); background: var(--white); cursor: zoom-in; }
.layout-compare figcaption, .docs figcaption { color: var(--text); }

/* Full-size viewer */
.viewer { border: 0; padding: 0; width: min(96vw, 80rem); max-height: 94vh; background: var(--white); }
.viewer::backdrop { background: rgba(27,27,36,0.85); }
.viewer-bar { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.6rem 1rem; background: var(--charcoal); color: var(--light-grey); }
.viewer-bar p { margin: 0; }
.viewer-bar .btn { background: var(--ivory); color: var(--charcoal); border-color: var(--ivory); padding: 0.5rem 1rem; }
.viewer img { width: 100%; }

/* Calculator: money lost in alert red (#B02A2A on #F2F2F2 = 5.8:1, passes AA) */
.calc output.loss { color: #b02a2a; font-weight: bold; }
/* Before/after plans are tall and narrow: cap the height so the pair sits side by side at a readable size */
.pair img { height: 34rem; width: auto; max-width: 100%; object-fit: contain; margin: 0 auto; }
.pair figcaption { text-align: center; }
@media (max-width: 29.99rem) { .pair img { height: 28rem; } }

/* ---- "Need, not want" rewrite, 20 Sep 2026 ---- */
/* Hero: the sub-line is longer now, and the credentials moved in under the buttons */
.hero .promise { max-width: 56ch; }
.hero a:not(.btn) { color: var(--ivory); }
.hero-trust { display: flex; align-items: center; gap: 0.85rem; margin: 2rem 0 0; color: var(--light-grey); }
.hero-trust img { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; flex: none; }

/* Where conversions lose money: four cards */
.losses { display: grid; gap: 1.25rem; margin: 2rem 0 1.5rem; }
@media (min-width: 48rem) { .losses { grid-template-columns: 1fr 1fr; } }
.loss-card { background: var(--white); border: 1px solid var(--mid-grey); padding: 1.5rem; }
.loss-card h3 { margin-bottom: 0.5rem; }
.loss-card .eg { color: var(--note); }
.loss-card .stopped { margin-bottom: 0; padding-top: 0.75rem; border-top: 1px solid var(--mid-grey); }
.loss-card .stopped b { color: var(--charcoal); }
.loss-close { margin-bottom: 0; }

/* Everyone on your build works for someone */
.works-for { background: var(--ivory); }
.works-for ul { list-style: none; padding: 0; margin: 0 0 1.25rem; max-width: 52rem; }
.works-for li { padding: 0.6rem 0; border-top: 1px solid rgba(27,27,36,0.15); }
.works-for-us { max-width: 52rem; margin-bottom: 0; }
.works-for-us b { font-weight: normal; }

/* Stage cards: what each stage stops */
.stage .stops { margin-bottom: 0.75rem; }

/* Real documents: the room check leads, full width */
@media (min-width: 40rem) { .docs-lead { grid-template-columns: 1fr; } }
.docs-lead { max-width: 52rem; margin-bottom: 2.5rem; }

/* Calculator: the package comparison line */
.calc .compare-result { margin-bottom: 0; }

/* Thank-you page A: why now, and what happens next */
.why-now { max-width: 44rem; color: var(--light-grey); }
.why-now b { color: var(--white); }
.next-steps { max-width: 44rem; margin: 0 0 1.5rem; }
.next-steps h2 { color: var(--white); margin-bottom: 0.5rem; }
.next-steps ol { margin: 0; padding-left: 1.3rem; color: var(--light-grey); }
.next-steps li { margin-bottom: 0.35rem; }
/* Cards with no example line: keep the "Stopped by" line on the bottom edge */
.loss-card { display: flex; flex-direction: column; }
.loss-card .stopped { margin-top: auto; }

/* Launch, 5 Oct 2026 */
.hero .promise-line { color: var(--light-grey); max-width: 60ch; margin: -1rem 0 1.75rem; }
.hero-note { color: var(--light-grey); margin: 1rem 0 0; }
.hero-note a { color: var(--ivory); }

#what-you-get .deliverables { display: grid; gap: 1.25rem; margin: 1.5rem 0; }
@media (min-width: 40rem) { #what-you-get .deliverables { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { #what-you-get .deliverables { grid-template-columns: repeat(4, 1fr); } }
.deliv { background: var(--white); border-top: 4px solid var(--charcoal); padding: 1.25rem; box-shadow: 0 1px 4px rgba(27,27,36,0.08); }
.deliv h3 { margin-bottom: 0.4rem; }
.deliv p { margin: 0 0 0.6rem; }
.deliv .why { color: var(--note); margin: 0; }
.deliv .why b { color: var(--charcoal); }
.deliv-img { margin: 0 0 0.9rem; }
.deliv-img img { width: 100%; height: 11rem; object-fit: cover; object-position: top; border: 1px solid var(--mid-grey); background: var(--white); }
.deliv-close { color: var(--charcoal); margin: 1rem 0 0; }

.talk-now { margin: 1.5rem 0; padding: 1.25rem 1.25rem 0.5rem; border: 1px solid #3a3a48; }
.talk-now h2 { color: var(--white); margin-bottom: 0.75rem; }

/* Sticky mobile bar: Call and Book a call */
@media (max-width: 48rem) {
  .sticky-bar { display: grid; grid-template-columns: 1fr 2fr; gap: 0; padding: 0; background: var(--charcoal); }
  .sticky-bar a { display: block; padding: 0.95rem 0.5rem; text-align: center; text-decoration: none; font-weight: bold; line-height: 1.2; }
  .sticky-bar a:first-child { color: var(--white); border-right: 1px solid #3a3a48; }
  .sticky-bar a:last-child { background: var(--ivory); color: var(--charcoal); }
}

/* Product film */
.film { padding: 2rem 0 0; }
.film-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; align-items: start; max-width: 64rem; margin: 0 auto; }

picture { display: block; }

/* SEO pack, 4 Oct */
.all-parts .stage h4 { color: var(--charcoal); font-weight: normal; margin: 0 0 0.25rem; }
.deliv .more { margin: 0.6rem 0 0; }
.deliv-img a { display: block; }
.prose-wide { max-width: 60rem; }
.prose-wide > p, .prose-wide > ul { max-width: 46rem; }
.hero-price a { color: var(--ivory); }

/* ---- Launch, 7 Oct 2026 (data/launch_copy.md) ---- */
/* Sticky header with a solid Book a call button, on every page and every width */
.band { position: sticky; top: 0; z-index: 30; }
html { scroll-padding-top: 5.5rem; }
.skip:focus { z-index: 40; }
.band nav { align-items: center; }
.btn-head { padding: 0.6rem 1rem; background: var(--ivory); color: var(--charcoal); border-color: var(--ivory); white-space: nowrap; }
.band nav a.btn-head { color: var(--charcoal); text-decoration: none; }
.btn-head:hover { background: var(--white); }
@media (max-width: 40rem) {
  html { scroll-padding-top: 4.5rem; }
  .band .wrap { flex-wrap: nowrap; min-height: 3.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; gap: 0.75rem; }
  .band img { width: 6.5rem; }
  .band nav { gap: 0.85rem; }
  .band .nav-wide { display: none; }
  .btn-head { padding: 0.5rem 0.75rem; }
}

/* Hero: copy, then the real layout (below the button on phones) */
.hero-grid { display: grid; gap: 2rem; }
@media (min-width: 56rem) { .hero-grid { grid-template-columns: 3fr 2fr; align-items: start; } }
.hero .hero-grid .promise { margin: 0.5rem 0 0.75rem; }
.hero-decision { color: var(--light-grey); margin: 0 0 1.25rem; }
.hero .actions { align-items: center; }
.badge { display: inline-block; margin: 0; padding: 0.45rem 0.75rem; border: 1px solid var(--silver); color: var(--charcoal); max-width: 26rem; }
.price-box .badge, .band-dark .badge { color: var(--ivory); }
.price-box .note { color: var(--light-grey); }
.hero-covers { color: var(--light-grey); margin: 1rem 0 0.25rem; max-width: 52ch; }
.hero .hero-note { margin-top: 0.25rem; }
.hero-check { margin: 0.75rem 0 0; }
.hero-check a { font-weight: bold; display: inline-block; padding: 0.6rem 0; }
.badge a { display: inline-block; padding: 0.4rem 0; }
.hero-visual { margin: 0; background: var(--white); padding: 0.5rem; }
.hero-visual figcaption { color: var(--note); padding: 0.5rem 0.25rem 0; }

/* Proof strip */
.proof { background: var(--ivory); padding: 1.1rem 0; }
.proof .wrap { display: flex; align-items: center; gap: 0.9rem; }
.proof img { width: 3.25rem; height: 3.25rem; border-radius: 50%; object-fit: cover; flex: none; }
.proof-line { margin: 0; color: var(--charcoal); }
.proof-gloss { margin: 0.15rem 0 0; color: var(--note); }
abbr[title] { text-decoration: underline dotted; text-underline-offset: 0.2em; cursor: help; }

/* Start-here block (Layout only): one per page */
.start-here { border: 1px solid var(--mid-grey); background: var(--white); padding: 1.25rem 1.5rem; max-width: 52rem; }
.start-here p { margin: 0 0 0.6rem; }
.start-here p:last-child { margin-bottom: 0; }
.start-here-head b { font-weight: normal; color: var(--charcoal); }
.price-box .start-here { background: transparent; border: 0; border-top: 1px solid #3a3a48; border-bottom: 1px solid #3a3a48; padding: 1.25rem 0; margin: 1.25rem 0; }
.price-box .start-here-head b { color: var(--white); }
.price-covers { color: var(--light-grey); margin-bottom: 0; }
.price-side { display: grid; gap: 1.5rem; align-content: start; }
.price-side .founding { margin-top: 0; }

/* What you get: 6 cards, 3 across on wide screens */
@media (min-width: 64rem) { #what-you-get .deliverables { grid-template-columns: repeat(3, 1fr); } }

/* Who it's for, merged with "works for" */
.works-for .not-for { background: var(--white); }
.works-for h2 { margin-bottom: 1rem; }

/* Bottom bar on phones. RC7 marketing P2: two equal cells, [Call Tahirah] [Book a 20-minute call], each at least 44 px tall.
   A bar with one link (the paid-call page keeps its Call bar) spans the full width. */
@media (max-width: 48rem) {
  .sticky-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sticky-bar a { min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 0.5rem; }
  .sticky-bar a:only-child { grid-column: 1 / -1; background: var(--ivory); color: var(--charcoal); border-right: 0; }
}

/* Plain text link in place of the old ghost button */
.text-link { font-weight: bold; }
.enquire .text-link, .hero .text-link { color: var(--ivory); }

/* Build Ready page */
.hero-credit { color: var(--light-grey); max-width: 60ch; margin: -1rem 0 1.75rem; }

.br-parts > li p { margin: 0 0 0.4rem; }
.br-parts > li .why { color: var(--note); }
.br-parts > li .why b { color: var(--charcoal); }
.start-here-sec { padding: 3rem 0; }
.close-check { margin: 1rem 0 0; }
@media (max-width: 40rem) { .hero { padding-top: 2.25rem; } }

/* QA 7 Oct: tick and cross lists keep their indent inside bordered lists */
.works-for .crosses li { padding-left: 1.6rem; }
.works-for .crosses li::before { top: 0.45rem; }
.stage ul.ticks li { padding-left: 1.6rem; }
.stage ul.ticks li::before { top: 1.1em; }
/* QA 7 Oct: header button at least 44px tall on phones; a gap under button rows */
@media (max-width: 48rem) { .band nav a.btn-head { min-height: 2.75rem; display: inline-flex; align-items: center; } }
.actions + p { margin-top: 1rem; }

/* Preview 2: what comes after Layout only */
.start-next { margin-top: 0.5rem; }

/* Preview 2: click-to-load films */
.film-grid { grid-template-columns: 2fr 1fr; }
.vid-fig { margin: 0; }
.vid { position: relative; display: block; background: var(--charcoal); }
.vid img { display: block; width: 100%; height: auto; }
.vid-play { position: absolute; left: 50%; top: 50%; width: 4rem; height: 4rem; margin: -2rem 0 0 -2rem; border-radius: 50%; background: rgba(27,27,36,0.82); border: 2px solid var(--ivory); }
.vid-play::after { content: ""; position: absolute; left: 1.55rem; top: 1.2rem; border-style: solid; border-width: 0.8rem 0 0.8rem 1.3rem; border-color: transparent transparent transparent var(--ivory); }
.vid:hover .vid-play, .vid:focus-visible .vid-play { background: var(--charcoal); }
.vid-fig video { display: block; width: 100%; height: auto; background: var(--charcoal); }
.vid-fig figcaption { margin-top: 0.4rem; }
.vid-small { max-width: 16rem; margin: 1rem 0; }
.page-film { padding: 2rem 0 0; }
.page-film .vid-fig { max-width: 22rem; }
@media (max-width: 48rem) {
  .film-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }

  .vid-small { max-width: 13rem; }
  .page-film .vid-fig { max-width: 16rem; }
}

/* Cookie banner (consent.js): Accept and Reject look the same and sit side by side */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--charcoal); color: var(--ivory); border-top: 2px solid var(--ivory); padding: 1rem 0; box-shadow: 0 -4px 16px rgba(0,0,0,0.25); }
.cookie-banner .wrap { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; justify-content: space-between; }
.cookie-banner p { margin: 0; max-width: 48rem; }
.cookie-banner a { color: var(--ivory); }
.cookie-actions { display: flex; gap: 0.75rem; }
.cookie-btn { min-width: 7.5rem; min-height: 2.75rem; padding: 0.6rem 1.2rem; font-weight: bold; background: var(--ivory); color: var(--charcoal); border: 2px solid var(--ivory); cursor: pointer; }
.cookie-btn:hover, .cookie-btn:focus-visible { background: var(--white); }
@media (max-width: 48rem) { .cookie-actions { width: 100%; } .cookie-btn { flex: 1 1 0; } }
body.has-cookie-banner { padding-bottom: 12rem; }
/* RC7 a11y: while the cookie banner is open, the sticky bar would sit behind it and take keyboard focus unseen */
body.has-cookie-banner .sticky-cta { display: none; }

/* QA 2: phone film grid, both posters the same shape (the film itself opens full screen) */
@media (max-width: 48rem) { .film-grid .vid img { aspect-ratio: 4 / 5; object-fit: cover; } }

/* Preview 3: phone number in the header ("Call" on phones) */
.band nav a.nav-tel { white-space: nowrap; }
/* RC7 marketing 4: header links are 44 px tap targets. :where() keeps it to the header nav (not the sticky bar)
   and at low specificity, so .band .nav-wide still hides the wide links on phones. */
.nav-tel, :where(.band) nav a:not(.btn) { min-height: 44px; display: inline-flex; align-items: center; padding: 0 8px; }
.tel-short { display: none; }
@media (max-width: 48rem) { .tel-long { display: none; } .tel-short { display: inline; } }

/* Preview 3: a more compact banner on phones (longer wording) */
@media (max-width: 48rem) { .cookie-banner { padding: 0.5rem 0; } .cookie-banner p { line-height: 1.25; } .cookie-banner .wrap { gap: 0.5rem; } }
/* RC7 marketing 3: banner about 170 px tall at 360–375 px (five lines of text, then the buttons), so the hero button clears */
@media (max-width: 24rem) { .cookie-banner .wrap { padding: 0 0.5rem; } }

/* Tahirah 16:17: home film on its own; two films of the same shape side by side on Site Checks */
.film-grid.film-solo { grid-template-columns: 1fr; max-width: 48rem; }
.film-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 36rem; }
.page-film .film-pair .vid-fig { max-width: none; }
@media (max-width: 48rem) {
  .film-grid.film-solo { grid-template-columns: 1fr; max-width: 16rem; margin: 0 auto; }
  .film-grid.film-solo .vid img { aspect-ratio: auto; object-fit: initial; }
  .film-pair { gap: 0.75rem; }
}

/* Delay calculator (rc3): rooms x rent + finance + optional holding costs.
   Append to the end of site.css so these win over the older .calc rules (lines ~214-216, 271, 309-310). */
.calc.calc-delay { background: var(--white); padding: 1.25rem; max-width: none; display: grid; gap: 1.5rem; margin-top: 1.5rem; }
@media (min-width: 48rem) {
  .calc.calc-delay { grid-template-columns: 1fr 1fr; gap: 2rem; padding: 2rem; align-items: start; }
  .calc-delay .calc-result { position: sticky; top: 1rem; }
}

/* Inputs: labels above, big touch targets, 16px+ text so phones don't zoom */
.calc-delay .field { margin-bottom: 1rem; }

.calc-delay input[type=text] { padding: 0.8rem 0.9rem; min-height: 3.25rem; font-variant-numeric: tabular-nums; }

/* Holding costs: closed by default */
.calc-holding { border-top: 1px solid var(--mid-grey); border-bottom: 1px solid var(--mid-grey); margin: 0.5rem 0 1.25rem; }
.calc-holding > summary { cursor: pointer; list-style: none; padding: 0.9rem 0; font-weight: bold; color: var(--charcoal); display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 3rem; }
.calc-holding > summary::-webkit-details-marker { display: none; }
.calc-holding > summary::after { content: "+"; color: var(--silver); font-size: 1.4rem; line-height: 1; }
.calc-holding[open] > summary::after { content: "\2212"; }
.calc-holding > summary:focus-visible { outline: 3px solid #2e6da4; outline-offset: 2px; }
.calc-holding-fields { padding-bottom: 0.25rem; }

.calc-delay .calc-go { width: 100%; }
@media (min-width: 30rem) { .calc-delay .calc-go { width: auto; } }

/* Result panel: the bit people should see */
.calc-delay .calc-result { background: var(--ivory); border-left: 4px solid var(--charcoal); padding: 1.25rem 1.25rem 1.5rem; }
.calc-delay .calc-total-label { margin: 0; color: var(--charcoal); font-weight: bold; }
.calc-delay .calc-total { margin: 0.25rem 0 1rem; line-height: 1.1; }
.calc-delay .calc-total output { font-variant-numeric: tabular-nums; }
.calc-delay .calc-breakdown { margin: 0 0 1.25rem; padding: 0; border-top: 1px solid rgba(27, 27, 36, 0.15); }
.calc-delay .calc-breakdown > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(27, 27, 36, 0.15); }
.calc-delay .calc-breakdown dt { color: var(--text); }
.calc-delay .calc-breakdown dd { margin: 0; }
.calc-delay .calc-breakdown output { font-weight: bold; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.calc-delay .compare-result { margin: 0 0 0.6rem; }
.calc-delay .compare-result output { color: var(--charcoal); }
.calc-delay .calc-compare output { font-weight: bold; }
.calc-delay .calc-human { margin: 1rem 0 0; padding-top: 0.75rem; border-top: 1px solid rgba(27, 27, 36, 0.15); color: var(--note); }

/* RC3 (8 Oct 2026): sales rewrite, data/rc3_copy.md */

/* Calculator copy: help text under each label, example note */
.calc-delay .help { display: block; color: var(--note); margin: -0.15rem 0 0.45rem; line-height: 1.4; }
.calc-delay .calc-holding-fields .help { margin: 0 0 1rem; }
.calc-example { background: var(--ivory); padding: 0.6rem 0.85rem; margin: 0 0 1.25rem; }
.calc-example b { color: var(--charcoal); }
#calculator > .wrap > .note { margin-top: -0.5rem; }

/* Repeated CTA: button, then the 2-minute check link, then a small line */
.cta-row { margin-top: 2rem; }
.cta-check { margin: 0.75rem 0 0; }
.cta-check a { font-weight: bold; display: inline-block; padding: 0.4rem 0; }
.cta-under { color: var(--note); margin: 0.25rem 0 0; }
.price-box .cta-check { margin: -0.5rem 0 0.75rem; }

/* Hero: promise badge beside the button */
.hero .actions { align-items: center; gap: 0.75rem 1rem; }
.hero .badge { color: var(--ivory); border-color: #5a5a66; }
.hero .badge a { color: var(--ivory); }

/* Price: anchor stack */
.anchor-stack { margin: 0.5rem 0 1.5rem; padding: 1rem 0; border-top: 1px solid #3a3a48; border-bottom: 1px solid #3a3a48; }
.anchor-stack p { margin: 0; }
.anchor-was { color: var(--light-grey); }
.anchor-was s { text-decoration-thickness: 2px; }
.anchor-now { color: var(--white); margin: 0.5rem 0 0.35rem !important; }
.anchor-big { display: block; line-height: 1.05; color: var(--white); }
.anchor-save { display: inline-block; background: var(--ivory); color: var(--charcoal); font-weight: bold; padding: 0.3rem 0.7rem; }
.promise-panel { margin: 1.25rem 0; }
.promise-panel .note { margin: 0.5rem 0 0; }
.price-side .start-here { max-width: none; }
.price-side .start-here-head { margin: 0 0 0.6rem; }
.compare p:last-child, .founding p:last-child { margin-bottom: 0; }

/* Item 2: "Adam on the layout" video beside a room photo, both 4:5 */
.media-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 40rem; margin: 1.5rem 0 2.5rem; align-items: start; }
.media-pair .vid-fig { max-width: none; margin: 0; }
.room-photo { margin: 0; }
.room-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.room-photo-ph { aspect-ratio: 4 / 5; background: var(--mid-grey); color: var(--note); display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; }
.room-photo figcaption { margin-top: 0.4rem; color: var(--text); }
@media (max-width: 48rem) { .media-pair { gap: 0.75rem; } }

/* Item 6: process band */
.process-band { background: var(--charcoal); color: var(--light-grey); padding: 4.5rem 0; }
.process-band h2 { color: var(--white); max-width: 26ch; }
.process-steps { list-style: none; padding: 0; margin: 2rem 0; display: grid; gap: 1.5rem; }
@media (min-width: 40rem) { .process-steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .process-steps { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }
.process-steps li { border-top: 2px solid var(--silver); padding-top: 1rem; }
.process-n { display: block; line-height: 1; color: var(--ivory); margin-bottom: 0.5rem; }
.process-steps h3 { color: var(--white); margin-bottom: 0.35rem; }
.process-steps p { margin: 0; }
.process-line { color: var(--white); max-width: 34ch; line-height: 1.3; margin: 0 0 1.75rem; }
.process-band .cta-check a { color: var(--ivory); }

/* #documents blocks */
.doc-block { margin: 0 0 3rem; }
.doc-block:last-child { margin-bottom: 0; }
.doc-text > :last-child { margin-bottom: 0; }
.doc-text .more { margin: 0.5rem 0 0; }
/* Item 9: SOW pages left, selling text right; one column on phones */
.sow-example { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 48rem) { .sow-example { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
.sow-pages { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.sow-pages figure { margin: 0; }
.sow-pages a { display: block; }
.sow-pages img, .pack-pages img { border: 1px solid var(--mid-grey); box-shadow: 0 2px 10px rgba(27,27,36,0.12); background: var(--white); cursor: zoom-in; width: 100%; }
.sow-caption { grid-column: 1 / -1; color: var(--note); margin: 0.25rem 0 0; }
.docs h3 { margin-bottom: 0.75rem; }
/* Design pack: composite + two pages, 3-up on desktop */
.pack-pages { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1rem; align-items: start; }
.pack-pages figure { margin: 0; }
.pack-pages a { display: block; }
.pack-pages .pack-main { grid-column: 1 / -1; }
@media (min-width: 48rem) { .pack-pages { grid-template-columns: 2fr 1fr 1fr; gap: 1rem; } .pack-pages .pack-main { grid-column: auto; } }
.doc-block > p { max-width: 52rem; }

/* Item 5: the 4 visits */
.visits { list-style: none; padding: 0; margin: 2rem 0 1.5rem; display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .visits { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .visits { grid-template-columns: repeat(4, 1fr); } }
.visit { background: var(--white); border-top: 4px solid var(--charcoal); padding: 1.25rem; }
.visit-n { line-height: 1; color: var(--charcoal); margin: 0 0 0.5rem; }
.visit h3 { margin-bottom: 0.4rem; }
.visit p:last-child { margin-bottom: 0; }
.visits-after { max-width: 52rem; margin-bottom: 1.5rem; }
.visits-price { color: var(--charcoal); }

/* Who it's for: "Not for you if" is now an H3 */
.not-for h3 { margin-bottom: 0.75rem; }

/* Final CTA band, above the footer */
.final-cta { background: var(--ivory); }
.final-cta h2 { max-width: 24ch; }
.final-promise { max-width: 46rem; color: var(--text); border-left: 3px solid var(--charcoal); padding-left: 1rem; margin: 0 0 1.5rem; }

/* Full project management page */
.pm-proof { color: var(--ivory); margin: 0 0 1rem; }
.pm-included { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
@media (min-width: 48rem) { .pm-included { grid-template-columns: 1fr 1fr; } }
.pm-included article { background: var(--white); border-top: 4px solid var(--charcoal); padding: 1.25rem 1.5rem; }
.pm-included ul { margin-bottom: 0; }
.pm-pain { max-width: 46rem; }
.pm-pain li { padding: 0.6rem 0; border-top: 1px solid var(--mid-grey); }
.pm-pain { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.pm-yourself { background: var(--ivory); padding: 1.5rem; margin-top: 1.5rem; max-width: 52rem; }
.pm-yourself p:last-child { margin-bottom: 0; }

/* RC3 item 2: intro text beside the video + photo pair, so no white gap on desktop */
.wyg-intro { display: grid; gap: 0.5rem 2.5rem; margin-bottom: 2.5rem; align-items: start; }
.wyg-intro .media-pair { margin: 0.5rem 0 0; }
@media (min-width: 56rem) { .wyg-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } .wyg-intro .media-pair { max-width: none; margin: 0; } }
.deliv-img figcaption { color: var(--note); margin-top: 0.4rem; line-height: 1.4; }

/* ---- RC3 round 2 (8 Oct 2026): psych + claims review, shorter home page ---- */
/* Phones: tighter sections and hero, so the hero button sits on the first screen */
@media (max-width: 40rem) {
  section { padding: 2.75rem 0; }
  .hero { padding: 1.25rem 0 2.5rem; }
  .hero .eyebrow { letter-spacing: 0.1em; margin-bottom: 0.6rem; }
  .hero h1 { margin-bottom: 0.4rem; }
  .hero .hero-grid .promise { line-height: 1.5; margin: 0.4rem 0 0.75rem; }
  .hero-price { margin-bottom: 0.9rem; }

  .process-band { padding: 3rem 0; }
}
.hero-decision { color: var(--light-grey); margin: 0.5rem 0 0; max-width: 52ch; }
.hero .hero-check + .hero-decision { margin-top: 0.25rem; }

/* A small round face beside "20 minutes with Tahirah" */
.with-face { display: flex; align-items: center; gap: 0.85rem; margin: 0.75rem 0 1rem; }
.with-face .face { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; flex: none; }
.with-face p { margin: 0; }
.final-cta .with-face .face { width: 3.5rem; height: 3.5rem; }

/* Price: PM comparison as one line; founding subline; Layout only text link and small print */
.price-pm { color: var(--light-grey); border-top: 1px solid #3a3a48; padding-top: 1rem; margin: 1.25rem 0 0; }
.founding-sub { color: var(--charcoal); margin-bottom: 0.75rem; }

.start-here-link a { font-weight: bold; }
.start-here .note { margin-top: 0.5rem; }

/* Short-room card: Adam's film beside his two lines */
.loss-quote { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; align-items: start; margin: 0 0 1rem; }
.loss-quote .vid-small { max-width: none; margin: 0; }
.loss-quote .eg { margin: 0 0 0.6rem; }
@media (min-width: 64rem) { .loss-quote { grid-template-columns: 9rem 1fr; } }

/* Process band: 2 x 2 on phones */
@media (max-width: 39.99rem) {
  .process-steps { grid-template-columns: 1fr; gap: 0.9rem; margin: 1.25rem 0; }
  .process-steps li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 0.75rem; padding-top: 0.75rem; }
  .process-steps .process-n { grid-row: span 2; margin: 0; }
  .process-steps h3 { margin-bottom: 0.15rem; }
  .process-n { margin-bottom: 0.25rem; }

  .process-steps p { line-height: 1.45; }
}

/* One timeline: call > book > Loan Ready > Build Ready > Site Checks */
.timeline { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; }
.tl-step { background: var(--white); padding: 1rem 1.25rem; border-left: 4px solid var(--mid-grey); }
.tl-step.stage { border-top: 0; border-left: 4px solid var(--charcoal); padding: 1.1rem 1.25rem; }
.tl-step h3 { margin-bottom: 0.2rem; }
.tl-step p { margin: 0 0 0.5rem; }
.tl-step p:last-child { margin-bottom: 0; }
.tl-step .time { color: var(--note); }
@media (min-width: 48rem) { .timeline { grid-template-columns: repeat(6, 1fr); } .tl-step { grid-column: span 3; } .tl-step.stage { grid-column: span 2; } }
.tl-note { margin-top: 1.25rem; }

/* What you get, page by page: one gallery */
.gallery { display: grid; gap: 1rem; margin-top: 1.5rem; }
.g-card { background: var(--white); border-top: 4px solid var(--charcoal); padding: 1rem; box-shadow: 0 1px 4px rgba(27,27,36,0.08); display: grid; grid-template-columns: 7rem 1fr; gap: 0.9rem; align-items: start; }
.g-card[hidden] { display: none; }
.g-card h3 { margin-bottom: 0.3rem; }
.g-card p { margin: 0 0 0.5rem; }
.g-card .g-text > :last-child, .g-card .doc-text > :last-child { margin-bottom: 0; }

.g-thumb { margin: 0; }
.g-thumb a { display: block; }
.g-thumb img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: top left; border: 1px solid var(--mid-grey); background: var(--white); cursor: zoom-in; }
.g-thumb figcaption { color: var(--note); margin-top: 0.35rem; line-height: 1.35; }
.g-thumb figcaption b { font-weight: normal; }
.g-wide, .g-pair { grid-template-columns: 1fr; }
.g-pair .media-pair { margin: 0; max-width: none; }
.g-ba .pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.gallery > *, .g-ba .pair > * { min-width: 0; }
.g-ba .pair img { height: 17rem; }
.g-wide .sow-pages, .g-wide .pack-pages { margin: 0; }
.sow-pages .sow-snippet { grid-column: 1 / -1; }
.g-wide .ticks { margin: 0 0 0.6rem; }
@media (min-width: 48rem) {
  .gallery { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .g-card { padding: 1.25rem; grid-template-columns: 1fr; }
  .g-thumb img { aspect-ratio: 16 / 10; }
  .g-wide { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 1.75rem; }
  .g-ba .pair img { height: 26rem; }
  .sow-pages .sow-snippet { grid-column: auto; }
  .g-wide .sow-pages { grid-template-columns: 1.4fr 1fr 1fr; align-items: start; }
}
@media (min-width: 64rem) {
  .g-wide { grid-template-columns: 3fr 2fr; }
  .g-wide.sow-example { grid-template-columns: 3fr 2fr; }
}

/* 4 visits: short numbered headings, no separate "Visit n" label */

/* People with "Not for you if" beside them */
#people .people { grid-template-columns: 1fr; gap: 1.25rem; }
#people .person { align-items: flex-start; }
#people .portrait { width: 5.5rem; height: 5.5rem; }
#people .not-for { align-self: start; }

/* FAQ: objections first, the rest under "More questions" */
.faq-more > summary { font-weight: bold; }
.faq details.faq-more > div.faq-more-list { padding: 0; max-width: none; }
.faq-more-list details:last-child { border-bottom: 0; }
.faq details:not([open]) > summary::after { content: "+"; }
.faq details[open] > summary::after { content: "\2212"; }

/* Round 2, pass 2: phones read a little tighter */
@media (max-width: 40rem) {
  main { line-height: 1.55; }
  section { padding: 2.25rem 0; }

  
  .price-box, .founding { padding: 1.25rem; }
  .start-here { padding: 1rem 1.1rem; }
  .loss-card { padding: 1.15rem; }
  .losses { margin: 1.25rem 0 0; gap: 1rem; }
  .visits { margin: 1.25rem 0 1rem; gap: 0.9rem; }
  .visit { padding: 1rem; }
  form { padding: 1rem; }
  .g-wide .sow-pages, .g-wide .pack-pages { grid-template-columns: 1.4fr 1fr 1fr; gap: 0.5rem; }
  .sow-pages .sow-snippet, .pack-pages .pack-main { grid-column: auto; }
  .g-ba .pair img { height: 14rem; }

  .timeline { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .tl-step { padding: 0.85rem 1rem; }
  .tl-step.stage { grid-column: 1 / -1; }

}
.g-thumbs { display: grid; gap: 0.5rem; }
.g-thumbs .g-thumb[hidden] { display: none; }
@media (max-width: 40rem) {
  footer { padding: 1.75rem 0; line-height: 1.5; }
  footer .wrap > div:last-child { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  footer .wrap > div:last-child p:last-child { grid-column: 1 / -1; }

}
@media (max-width: 40rem) {
  .hero-visual { max-width: 82%; }
  .g-ba .pair img { height: 12.5rem; }
  .g-card { padding: 0.9rem; }
  .gallery { gap: 0.85rem; }
  .process-band { padding: 2.5rem 0; }
  .cta-row { margin-top: 1.25rem; }
}
@media (max-width: 40rem) {
  .calc-delay .field { margin-bottom: 0.75rem; }
  .calc-delay input[type=text] { min-height: 2.9rem; padding: 0.6rem 0.8rem; }
  .calc.calc-delay { gap: 1.1rem; }
  .calc-example { margin-bottom: 0.9rem; }
  .visits-after p { margin-bottom: 0.75rem; }
  .loss-card p { margin-bottom: 0.75rem; }
  .works-for li { padding: 0.45rem 0; }
}
@media (max-width: 40rem) {

  .anchor-stack { margin-bottom: 1rem; }
  .faq summary { padding: 0.8rem 0; }
  .consent { padding: 0.75rem; }

  .works-for ul { margin-bottom: 0.9rem; }
}
@media (max-width: 40rem) {
  section { padding: 2rem 0; }

}
@media (max-width: 40rem) {
  /* RC7 item 6: the hero's phone line now shows on phones too (top block = button, Tahirah's line, phone line) */
  .tl-note { margin-top: 0.9rem; }
  .all-parts { margin-top: 1rem; }
}

/* /thanks/: the hidden payment version uses an H2 styled as the page heading (one H1 per page) */
.hero h2.paid-head { color: var(--white); letter-spacing: -0.01em; }

/* Full project management page, round 2: comparison, media, grouped parts */
.pm-adam { margin: 0 0 1rem; }
.pm-adam .pm-proof { margin: 0; }
.pm-adam .pm-proof b { font-weight: normal; color: var(--white); }
.pm-compare { display: grid; gap: 1rem; margin: 1.5rem 0; }
@media (min-width: 48rem) { .pm-compare { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.pm-compare article { background: var(--light-grey); border-top: 4px solid var(--silver); padding: 1.25rem 1.5rem; }
.pm-compare article.pm-us { background: var(--ivory); border-top-color: var(--charcoal); }
.pm-compare h3 { margin-bottom: 0.75rem; }
.pm-compare p:last-child { margin-bottom: 0; }
.pm-pain-wrap { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 56rem) { .pm-pain-wrap { grid-template-columns: 1.2fr 1fr; gap: 2.5rem; } }
.pm-pain-wrap .media-pair { margin: 0; }
.pm-groups { margin-top: 1.25rem; }
@media (min-width: 64rem) { .pm-groups { grid-template-columns: repeat(3, 1fr); } }
.pm-groups article { padding: 1.1rem 1.25rem; }
.pm-groups h3 { margin-bottom: 0.3rem; }
.pm-line { margin: 0 0 0.5rem; }
.pm-more > summary { cursor: pointer; font-weight: bold; color: var(--charcoal); padding: 0.35rem 0; }
.pm-more[open] > summary { margin-bottom: 0.5rem; }
.pm-more ul { margin: 0; }
@media (min-width: 48rem) { .g-thumbs { grid-template-columns: 1fr 1fr; } }

/* Round 3 */
.tl-price { margin: 0.1rem 0 0.25rem !important; color: var(--charcoal); }
.pm-price { margin: -0.25rem 0 0.75rem; color: var(--charcoal); }
.calc-holding-hint { margin: -0.75rem 0 1rem; }
.hero .with-face.hero-face { margin: 0.75rem 0 0.25rem; }
.hero .with-face.hero-face .face { width: 2.25rem; height: 2.25rem; }
.hero .with-face.hero-face .hero-covers { margin: 0; }
@media (max-width: 40rem) {
  .g-card { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.75rem; }
  .g-wide, .g-pair { grid-template-columns: minmax(0, 1fr); }
  .g-card p { line-height: 1.5; }
}
@media (max-width: 40rem) {
  main p { margin-bottom: 0.85em; }
  .tl-step, .tl-step.stage { padding: 0.8rem 1rem; }
}
@media (max-width: 40rem) {
  .loss-card p, .visit p, .price-box p, .founding p, .start-here p, .tl-step p { line-height: 1.5; }
}

/* Psych round 3: before/after stacked full width on small phones; outline call link in the start-here box */
@media (max-width: 30rem) { .g-ba .pair { grid-template-columns: minmax(0, 1fr); } .g-ba .pair img { height: auto; max-height: 19rem; width: 100%; object-fit: contain; } }
.start-here .btn-outline { display: inline-block; background: transparent; color: var(--charcoal); border: 2px solid var(--charcoal); padding: 0.6rem 1rem; text-decoration: none; }

/* RC4, 8 Oct: product heroes in two columns from 64rem with the page's film on the right (B20),
   credentials under each film (A19), the Tahirah line under the button on phones (A18) */
.hero-split { display: grid; gap: 1.75rem; }
@media (min-width: 64rem) {
  .hero-split { grid-template-columns: minmax(0, 1fr) 20rem; gap: 3rem; align-items: start; }
  .hero-split.hero-split-pair { grid-template-columns: minmax(0, 1fr) 26rem; }
  .hero-split.hero-split-wide { grid-template-columns: minmax(0, 1fr) 26rem; }
  .hero-split .hero-media { margin-top: 2.25rem; }
}
.hero-media { max-width: 20rem; }
.hero-media.hero-media-pair, .hero-media.hero-media-wide { max-width: 26rem; }
.hero-media .film-pair { max-width: none; }
.hero .vid-fig figcaption { color: var(--light-grey); }
.film-cred { color: var(--note); margin: 0.6rem 0 0; line-height: 1.45; }
.hero .film-cred { color: var(--light-grey); }
.film-cred abbr, .hero-visual abbr { text-decoration: underline dotted; cursor: help; }
.hero .hero-covers + .hero-note { margin-top: 0.25rem; }
.hero-small { color: var(--light-grey); margin: 0.4rem 0 1.25rem; }
.hero .badge { margin-top: 0; }
@media (max-width: 40rem) {
  .hero-media { max-width: 16rem; }
  .hero-media.hero-media-pair { max-width: none; }
  .hero-media.hero-media-wide { max-width: 18rem; }
  .desk-only { display: none; }
}
/* PM page */
.media-solo { max-width: 20rem; }
.pm-not-for { margin-top: 1rem; }
/* Layout page: phone crop of the room-areas table, with a link to the full record (A21) */
.tap-full { display: none; }
@media (max-width: 40rem) {
  .deliv-crop img { height: auto; object-fit: contain; }
  .tap-full { display: block; }
  .tap-full a { font-weight: bold; display: inline-block; padding: 0.4rem 0; }
}
.close-note { margin: 0.9rem 0 0; color: var(--light-grey); }
/* Build Ready: images beside their items (B16) */
.br-imgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 13rem)); gap: 0.75rem; margin: 0.75rem 0 0.25rem; }
.br-img { margin: 0; }
.br-img a { display: block; }
.br-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top left; border: 1px solid var(--mid-grey); background: var(--white); }
.br-img figcaption { color: var(--note); margin-top: 0.3rem; line-height: 1.35; }
.tail-addon { max-width: 52rem; margin: 0 0 1rem; }
/* Pieces: tag, thumbnails per stage, price rows as cards on phones (A27, B13, B18) */
.tag { display: inline-block; margin-left: 0.35rem; padding: 0.1rem 0.45rem; font-weight: bold; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; background: var(--charcoal); color: var(--white); vertical-align: middle; }
.stage-thumb { margin: 0 0 0.75rem; }
.stage-thumb a { display: block; }
.stage-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top left; border: 1px solid var(--mid-grey); background: var(--white); }
@media (max-width: 40rem) {
  .stack.cards tbody { display: grid; gap: 0.6rem; }
  .stack.cards tr { background: var(--white); border: 1px solid var(--mid-grey); padding: 0.7rem 0.25rem; }
  .stack.cards tr.pkg { background: var(--ivory); border-color: var(--charcoal); border-width: 2px; }
}

/* ---- RC4.2 (8 Oct 2026) ---- */
/* Credentials: on narrow screens the line wraps after the second "·" (item N1) */
.cred-gdv { display: inline-block; }

/* Home: credentials full card width under each clip pair (item 3) */
.film-cred.film-cred-pair { margin: 0 0 1rem; }
.g-pair .film-cred.film-cred-pair { margin: 0.75rem 0 0; }
/* PM hero: insurance line under the price (N13 / A1) */
.hero-insure { color: var(--light-grey); margin: -1rem 0 1.25rem; }
/* PM hero on phones: Adam's photo and credentials below the Tahirah line (item 4) */
@media (max-width: 40rem) {
  .pm-hero-copy { display: flex; flex-direction: column; }
  .pm-hero-copy > * { margin-top: 0; }
  /* RC4.3 item 1: price, buttons, Tahirah line, delay link, insurance, then Adam */
  .pm-hero-copy > .hero-price { order: 1; }
  .pm-hero-copy > .actions { order: 2; }
  .pm-hero-copy > .hero-check { order: 3; }
  .pm-hero-copy > .hero-covers { order: 4; margin-bottom: 1rem; }
  .pm-hero-copy > .pm-compare-line { order: 5; margin: 0 0 0.75rem; }
  .pm-hero-copy > .hero-insure { order: 6; margin: 0 0 0.75rem; }
  .pm-hero-copy > .pm-adam { order: 7; margin: 0.25rem 0 0; }
}
/* Who you'll speak to: Adam's on-site photo, 4:5 (A4) */
#people .portrait.portrait-photo { width: 6.5rem; height: auto; aspect-ratio: 4 / 5; border-radius: 4px; object-position: 50% 30%; }
#people .person picture { flex: none; }
#people .person picture img { display: block; }
/* RC4.3 item 12: Site Checks 'Already on site?' line straight under the hero button */
.hero-onsite { color: var(--light-grey); max-width: 60ch; margin: 0.25rem 0 0.75rem; }
/* RC5: real CC documents only. Single layout image in the gallery, full drawings shown whole, document figures */
.g-layout .g-thumb img { aspect-ratio: auto; height: auto; object-fit: contain; }
.deliv-full img { height: auto; object-fit: contain; }
.doc-fig { margin: 1.25rem 0 0.5rem; max-width: 16rem; }
.doc-fig.doc-fig-wide { max-width: 40rem; }
.doc-fig a { display: block; }
.doc-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--mid-grey); background: var(--white); cursor: zoom-in; }
.doc-fig figcaption, .stage-thumb figcaption { color: var(--note); margin-top: 0.4rem; line-height: 1.4; }
/* RC5b (marketing's 52 + Control addendum) */
.check-sub { display: block; font-weight: normal; line-height: 1.4; opacity: 0.85; }
.hero-check .check-sub, .cta-check .check-sub, .close-check .check-sub { margin-top: -0.25rem; }
.enquire .actions .check-sub { flex-basis: 100%; }
.loss-card .loss-result { margin: 0.75rem 0 0; }
.loss-card .loss-result b { color: var(--charcoal); }
.gallery-cta { margin-top: 2rem; }
.cta-after { margin: 0.6rem 0 0; color: var(--note); }
.enquire .cta-after, .hero .cta-after { color: var(--light-grey); }

.table-note { margin: 0.75rem 0 0; }
.table-note + .actions { margin-top: 1.25rem; }
.phone-only { display: none; }
@media (max-width: 40rem) { .phone-only { display: block; } .floors-link a { font-weight: bold; display: inline-block; padding: 0.4rem 0; } }
.pm-included .doc-fig { max-width: 12rem; }

/* ==== RC6 type system (data/rc6/RC6_PLAUD_REVIEW_BRIEF.md section 0) ====
   One body family and one body size for ALL running text. One heading family with a fixed H1/H2/H3 scale
   (H4 uses the H3 size). Buttons use --size-btn. There is no other size: the calculator total uses the H2 size (RC6.1).
   No other rule in this file sets a font-size or font-family; tests/typography.test.mjs enforces it in the browser. */
@media (max-width: 40rem) {
  :root { --size-body: 1rem; --size-h1: 1.875rem; --size-h2: 1.5rem; --size-h3: 1.1875rem; }
}
button, input, select, textarea, small, sup, sub, code, kbd { font-family: inherit; font-size: inherit; }
h1, h2, h3, h4, .paid-head, .anchor-big, .big, .process-n, .visit-n,
.faq details:not(.faq-more) > summary, .calc-total output, .quote-big { font-family: var(--font-head); }
h1, .hero h2.paid-head { font-size: var(--size-h1); }
h2, .anchor-big, .big, .process-n, .visit-n { font-size: var(--size-h2); }
h3, h4, .faq details:not(.faq-more) > summary, .quote-big { font-size: var(--size-h3); }
.btn, button, .cookie-btn, .sticky-cta, .sticky-bar a, .all-parts > summary { font-family: var(--font-body); font-size: var(--size-btn); }
.calc-delay .calc-total output { font-size: var(--size-h2); }
/* Orphans: balanced headings, "pretty" running text (no lone last word) */
h1, h2, h3, h4, summary { text-wrap: balance; }
p, li, dd, dt, figcaption, label, blockquote { text-wrap: pretty; }
/* Note text: may stay muted, never smaller */
.note, .help, .cta-under, .cta-after { font-style: normal; }

/* RC6 0.3: no big white gaps in the four losses cards (cards take their own height; no line pushed to the bottom) */
.losses { align-items: start; }
.loss-card .stopped { margin-top: 0; padding-top: 0; border-top: 0; }

/* RC6 0.4: the price section runs across two columns, so ONE box goes round all of it and there are no lines inside */
#price .cols-2 { border: 2px solid var(--charcoal); padding: 0; gap: 0; }
#price .price-box { padding: 2rem; }
#price .price-side { padding: 2rem; gap: 1.5rem; }
#price .founding { margin: 0; }
#price .start-here { border: 0; padding: 0; background: transparent; }
.anchor-stack { border-top: 0; border-bottom: 0; padding: 0; }
.price-pm { border-top: 0; padding-top: 0; }
.price-box .start-here { border-top: 0; border-bottom: 0; }
@media (max-width: 40rem) { #price .price-box, #price .price-side { padding: 1.25rem; } #price .cols-2 { margin: 0 1rem; } }
/* RC6 0.4: no divider lines inside a single box */
.stage ol li, .stage ul li { border-top: 0; }
.works-for li { border-top: 0; }
.calc-delay .calc-human { border-top: 0; padding-top: 0; }
.first-step { border-top: 0; padding-top: 0; }
/* RC6 0.5: gallery cards read text first, image after, on every width (one column on phones) */
.gallery { align-items: start; }
.g-card { align-content: start; }
@media (max-width: 40rem) {
  .g-card { grid-template-columns: minmax(0, 1fr); }
  .g-thumb img { aspect-ratio: 16 / 10; }
  .g-layout .g-thumb img { aspect-ratio: auto; }
}
/* RC6: the holding-costs toggle reads as one line of text, with the +/- on the right */
.calc-holding > summary { display: block; position: relative; padding-right: 2rem; }
.calc-holding > summary::after { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
/* RC6: the eyebrow is body size now, so less tracking keeps it on one line on phones */
.eyebrow { letter-spacing: 0.08em; }
@media (max-width: 40rem) { .eyebrow, .hero .eyebrow { letter-spacing: 0.03em; } }

/* ==== RC6 sections 1-13 (data/rc6/RC6_PLAUD_REVIEW_BRIEF.md + final_words.md). Colours and spacing only: no new sizes or families. ==== */
/* 1.1 / 1.6: the 2-minute check sits directly under the film, then the summary of what the film covers */
.film-after { max-width: 48rem; margin: 0.75rem auto 0; }
.film-summary { margin: 1rem 0 0; }
@media (min-width: 40rem) { .film-summary { columns: 2; column-gap: 2rem; } .film-summary li { break-inside: avoid; } }
/* 1.5: one call-to-action component with its own background, the same wherever the two actions sit together */
.cta-block { background: var(--ivory); color: var(--charcoal); padding: 1rem 1.25rem; margin: 1.5rem 0 0; max-width: 40rem; }
.cta-block p { color: var(--charcoal); margin: 0; }
.cta-block .actions { margin: 0 0 0.5rem; }
.cta-block .cta-lead { margin: 0 0 0.75rem; }
.cta-block .cta-check { margin: 0; }
.cta-block .cta-phone, .cta-block .cta-alt { margin: 0.5rem 0 0; }
.cta-block a:not(.btn), .price-box .cta-block a:not(.btn), .hero .cta-block a:not(.btn), .enquire .cta-block a:not(.btn), .final-cta .cta-block a:not(.btn), .band-dark .cta-block a:not(.btn) { color: var(--charcoal); }
.cta-block .cta-alt a { font-weight: bold; }
.film-after .cta-block { margin-top: 0; }
.price-box .cta-block { margin: 1.25rem 0; }
.founding .cta-block { background: var(--white); }
.enquire .cta-block { margin-left: auto; margin-right: auto; text-align: left; }
.final-cta .cta-block { text-align: left; } /* RC7 marketing home P2: the final CTA is left-aligned, not centred */
/* 5.8: one promise component, high contrast, thin navy border */
.promise-card { background: var(--white); color: var(--charcoal); border: 2px solid var(--charcoal); padding: 0.9rem 1.1rem; margin: 0.75rem 0 1rem; }
.promise-card h4 { margin: 0 0 0.35rem; color: var(--charcoal); font-weight: normal; }
.promise-card p { margin: 0 0 0.4rem; color: var(--charcoal); }
.promise-card p:last-child { margin-bottom: 0; }
.promise-card a { color: var(--charcoal); font-weight: bold; }
/* RC7: the promise card in the dark price box is white, so its heading and link stay charcoal */
.price-box .promise-card h3 { margin: 0 0 0.35rem; color: var(--charcoal); font-weight: normal; }
.price-box .promise-card a:not(.btn) { color: var(--charcoal); }
/* RC7 thanks/a: the same white promise card inside "What happens next" on the dark hero */
.next-steps .promise-card h3 { margin: 0 0 0.35rem; color: var(--charcoal); font-weight: normal; }
.next-steps .promise-card a:not(.btn) { color: var(--charcoal); }
/* 5.6: How it works as a numbered strip */
.hiw-strip { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 0.75rem; counter-reset: none; }
@media (min-width: 40rem) { .hiw-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .hiw-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hiw-strip li { background: var(--white); border-top: 4px solid var(--charcoal); padding: 0.9rem 1rem; }
.hiw-strip .process-n { color: var(--charcoal); margin-bottom: 0.35rem; }
.hiw-strip p { margin: 0; }
.hiw-strip b { color: var(--charcoal); }
.where-we-work { max-width: 46rem; margin: 0; }
/* 5.1: the package, 13 parts in three stages */
.pkg-slogan { color: var(--charcoal); }
.pkg-stages { display: grid; gap: 1rem; margin-top: 1rem; }
@media (min-width: 56rem) { .pkg-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.pkg-stage { box-shadow: 0 1px 4px rgba(27,27,36,0.08); }
.pkg-stage-head { margin: 0 0 0.5rem; }
.pkg-stage-head b { color: var(--charcoal); }
.pkg-more { margin: 0.75rem 0 0; }
/* 5.9 inside the dark price box */
.price-box h3 { color: var(--white); }
.price-pm { margin-top: 1.5rem; }
/* 6.2: first 10 vs client 11 */
.founding h2 { margin-bottom: 0.5rem; }
/* RC7.2 (Adam, 9 Oct): a clean table inside the cream box when there's room (40/30/30, headers on one line,
   padded, rows centred, ticks centred); a card per row when the box is narrow (phones, and narrow columns). */
.founding { container-type: inline-size; }
.first10 { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 1rem 0 1.25rem; background: var(--white); }
.first10 .f10-what { width: 40%; }
.first10 .f10-col { width: 30%; }
.first10 th, .first10 td { text-align: left; vertical-align: middle; padding: 0.75rem 0.9rem; border-bottom: 1px solid #d9d2c1; font-weight: normal; overflow-wrap: break-word; }
.first10 thead th { background: var(--charcoal); font-weight: bold; white-space: nowrap; border-bottom: 0; }
.first10 tbody th { color: var(--charcoal); font-weight: bold; }
.first10 .f10-sub { display: block; font-weight: normal; }
.first10 .f10-yes { text-align: center; }
.first10 .tick { color: var(--charcoal); font-weight: bold; }
/* Medium box (the desktop price column is about 26rem inside): each row's label runs across the top,
   then the two answers sit side by side under one-line column headers. */
@container (max-width: 40rem) and (min-width: 22rem) {
  .first10 colgroup { display: none; }
  .first10, .first10 thead, .first10 tbody { display: block; }
  .first10 tr { display: grid; grid-template-columns: 1fr 1fr; }
  .first10 thead th:first-child { display: none; }
  .first10 th, .first10 td { padding-left: 0.75rem; padding-right: 0.75rem; }
  .first10 tbody th { grid-column: 1 / -1; border-bottom: 0; padding-bottom: 0.25rem; }
  .first10 tbody td { padding-top: 0.25rem; }
}
/* The box itself: a little less padding where the price column is narrow, so the table has the room */
@media (min-width: 48rem) { #price .founding { padding: 1.5rem; } }
@media (min-width: 48rem) and (max-width: 64rem) { #price .price-side { padding: 1.25rem; } #price .founding { padding: 1.25rem; } }
/* Narrow box (phones): one card per row */
@container (max-width: 22rem) {
  .first10 thead, .first10 colgroup { display: none; }
  .first10, .first10 tbody, .first10 tr, .first10 th, .first10 td { display: block; width: auto; }
  .first10 { background: none; }
  .first10 tr { background: var(--white); border: 1px solid #d9d2c1; padding: 0.9rem 1rem; margin-bottom: 0.75rem; }
  .first10 th, .first10 td, .first10 .f10-yes { border: 0; padding: 0.15rem 0; text-align: left; }
  .first10 tbody th { margin-bottom: 0.35rem; }
  .first10 td::before { content: attr(data-label) ": "; font-weight: bold; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* 3.9: Adam's quote in the short-room card */
.loss-quote-text { margin: 0; }
.loss-quote-text .quote-big { color: var(--charcoal); line-height: 1.3; margin: 0 0 0.35rem; }
.loss-quote-text .quote-by { color: var(--note); margin: 0; }
/* 4.4: bills on an empty house, always shown, every default sourced */
.calc-bills { border: 1px solid var(--mid-grey); background: var(--white); padding: 1rem; margin: 0; min-width: 0; }
.calc-bills legend { color: var(--charcoal); font-weight: bold; padding: 0 0.25rem; }
.calc-bills .field .help { display: block; margin-top: 0.35rem; }
.calc-estimate { margin: 0 0 0.75rem; }
.calc-insurance-note[hidden] { display: none; }
/* 8.1: the page-by-page gallery uses the same navy treatment as the package block */
#what-you-get.band-dark { background: var(--charcoal); color: var(--light-grey); }
#what-you-get.band-dark > .wrap > h2 { color: var(--white); }
#what-you-get.band-dark > .wrap > .lede, #what-you-get.band-dark .cta-after { color: var(--light-grey); }
#what-you-get.band-dark .g-card { color: var(--text); }
/* 11.2: short credentials line with a link to About */
.proof-line a { white-space: nowrap; }
/* Site-check visit cards take their own height (no white space at the bottom of short ones) */
.visits { align-items: start; }
/* 11.1 About us page */
.about-person { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 40rem) { .about-person { grid-template-columns: 14rem minmax(0, 1fr); } }
.about-photo { width: 100%; max-width: 14rem; height: auto; border-radius: 4px; }
.about-photo-round { border-radius: 50%; max-width: 11rem; }
.about-cred { color: var(--charcoal); }
/* 8.9: show the whole dimension check (no thumbnail crop) */
.g-dimcard { grid-template-columns: minmax(0, 1fr); }
.g-dim img, .g-thumb.g-dim img { aspect-ratio: auto; object-fit: contain; width: 100%; height: auto; }

/* RC6.1: one style of running text. Nothing italic. */
i, em, cite, dfn, var, address { font-style: normal; }

/* RC7 marketing product pages (items 22-25) */
/* 22: the promise caveat sits directly under the Loan Ready H1 */
.hero .hero-terms { color: var(--light-grey); max-width: 56ch; margin: 0 0 1rem; }
.hero .hero-terms a { font-weight: bold; }
/* 24: Build Ready's nine parts as one summary line, on phones only (the full list follows) */
.br-summary { display: none; }
@media (max-width: 40rem) { .br-summary { display: block; margin: 0 0 1rem; } }
/* 25: PM payment line under the price; on phones it keeps its place straight after the price (same order, source order wins) */
@media (max-width: 40rem) { .pm-hero-copy > .pm-pay-line { order: 1; margin: 0 0 0.75rem; } }

/* RC7 marketing home (items 7, 8, 10, 11) */
/* 7: first-10 table header on its dark header cells; "Full terms" in the price-box promise card underlined */
.first10 thead th { color: var(--light-grey); }
.price-box .promise-card a:not(.btn) { text-decoration: underline; }
/* 8: portfolio and insurance lines under the credentials, then the six-tick summary */
.proof .proof-more { margin-top: 0.5rem; }
.proof .film-summary { margin: 0.75rem 0 0; }
/* 10: the v8c film is the hero visual on every screen, with the check block directly under it */
.hero-visual.hero-film { background: transparent; padding: 0; max-width: none; min-width: 0; }
.hero-film .cta-block { margin: 0.75rem 0 0; }
/* 11: the line from the deleted process band, under the package slogan */
.pkg-line { color: var(--charcoal); }

/* RC7 marketing home P2 */
/* Build Ready parts 1-9 and Site Checks 10-13 folded into <details> in the package stage cards */
.pkg-stage .all-parts { margin: 0.75rem 0 1rem; }
.pkg-stage .all-parts[open] > summary { margin-bottom: 0.75rem; }
/* "Who you'll speak to" is one column now the "Good to know" box is gone: the two people side by side on wider screens */
@media (min-width: 48rem) { #people .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Phones: the 4-visit cards are titles only, then one link to the Site Checks page */
.visits-more { display: none; }
@media (max-width: 40rem) {
  .visits .visit p { display: none; }
  .visits .visit h3 { margin-bottom: 0; }
  .visits-more { display: block; margin: 0 0 1rem; }
}

/* RC7 marketing form P2: fields flagged only after the visitor has interacted, and never hidden under the sticky header */
.enquire form input:user-invalid { border: 2px solid #B02A2A; }
.enquire form select:user-invalid { border: 2px solid #B02A2A; }
.enquire .consent input:user-invalid { outline: 2px solid #B02A2A; outline-offset: 2px; }
#check, .enquire form input, .enquire form select { scroll-margin-top: 6rem; }
/* The line under "Call me back", in the form's body colour on white */
.enquire form .form-after { color: var(--text); margin: 0.6rem 0 0; }

/* RC7 marketing thank-you P2: prep line under step 1, the "started" line, and the "While you wait" films (ruling 6) */
.next-steps .prep-line { margin: 0.35rem 0 0; }
.next-steps .started-line { color: var(--white); margin: 0 0 0.5rem; }
.wait-films { margin: 1.5rem 0; }
.wait-films h2 { color: var(--white); margin-bottom: 0.75rem; }

/* RC7 marketing mobile P2: 44 px tap targets on standalone links, by padding and min-height only (no font-size change) */
footer a { display: inline-flex; align-items: center; min-height: 44px; }
.cta-check a { display: inline-flex; align-items: center; min-height: 44px; }
summary { min-height: 44px; }
.pm-more > summary { padding: 0.6rem 0; }

/* RC7.7 (Adam, 9 Oct): a calm first screen on phones. Readability beats the fold: the header's Book a call stays on
   screen (sticky), and the sticky call bar takes over once the hero button scrolls away. Same words, same type sizes. */
@media (max-width: 30rem) {
  .hero { padding-top: 1.75rem; }
  .hero .eyebrow { line-height: 1.45; letter-spacing: 0.02em; margin-bottom: 0.85rem; }
  .hero h1 { line-height: 1.15; margin-bottom: 1.25rem; }
  .hero .hero-grid .promise { line-height: 1.55; margin: 0 0 1.25rem; border-left: 0; padding-left: 0; }
  .hero .promise .promise-a, .hero .promise .promise-b { display: block; }
  .hero .promise .promise-b { margin-top: 1em; }
  .hero .hero-price { line-height: 1.5; margin-bottom: 1.5rem; }
}

/* RC7.8 (marketing's top 5 phone improvements, 9 Oct). Phones only, up to 600 px; desktop unchanged; no new words.
   2, 4, 5: on phones the hero reads eyebrow, H1, the iceberg paragraph, the Book button and the phone line, the trust
   strip, the film (with the free 2-minute check under it), then the what-we-do paragraph, the price and Tahirah's line. */
.hero-trust { display: none; }
@media (max-width: 37.5rem) {
  .hero .hero-grid { display: flex; flex-direction: column; gap: 0; }
  .hero .hero-copy, .hero .hero-grid .promise { display: contents; }
  .hero .promise .promise-a, .hero .promise .promise-b { display: block; color: var(--ivory); line-height: 1.55; }
  .hero .promise .promise-a { order: 1; margin: 0 0 1.25rem; }
  .hero .hero-copy > .actions { order: 2; margin: 0 0 0.75rem; }
  .hero .hero-copy > .hero-note { order: 3; margin: 0 0 0.75rem; }
  .hero .hero-trust { order: 4; display: block; color: var(--light-grey); margin: 0 0 1.5rem; }
  .hero .hero-visual { order: 5; margin: 0 0 1.5rem; }
  .hero .promise .promise-b { order: 6; margin: 0 0 1.25rem; }
  .hero .hero-copy > .hero-price { order: 7; }
  .hero .hero-copy > .hero-face { order: 8; }
  .hero .hero-copy > .hero-decision { order: 9; }
  /* 1: two equal thumb-zone buttons, each at least 48 px tall */
  .sticky-bar a { min-height: 48px; }
  /* 3: a tighter cookie banner: same words, body size, buttons side by side */
  .cookie-banner { padding: 0.4rem 0; }
  .cookie-banner p { line-height: 1.2; }
  .cookie-banner .wrap { gap: 0.4rem; }
  .cookie-actions { flex-wrap: nowrap; }
  .cookie-btn { min-height: 44px; padding: 0.4rem 0.75rem; }
  /* 4: the square phone poster has the 16:9 frame letterboxed in it; crop the empty bands so the film sits tight under the trust strip */
  .hero .film-main .vid img { aspect-ratio: 16 / 9; object-fit: cover; }
}