/*
 * DK global typography readability system.
 * Scope is intentionally limited to page content. Header, footer, controls,
 * utility labels and display heroes retain their approved page-level styling.
 */
:root {
  --dk-type-h1: clamp(54px, 5.25vw, 76px);
  --dk-type-h2: clamp(38px, 3.3vw, 48px);
  --dk-type-h3: 24px;
  --dk-type-final-cta: clamp(32.3px, 2.805vw, 40.8px);
  --dk-type-supporting: 18px;
  --dk-type-body: 16.5px;
  --dk-type-body-small: 15.5px;
  --dk-type-label: 12px;
  --dk-weight-heading: 700;
  --dk-weight-supporting: 600;
  --dk-weight-body: 500;
  --dk-weight-label: 700;
  --dk-line-heading: 1.14;
  --dk-line-supporting: 1.65;
  --dk-line-body: 1.65;
  --dk-text-primary: #123047;
  --dk-text-body: #354e5e;
  --dk-text-muted-readable: #536978;
  --dk-text-on-dark: #ffffff;
  --dk-text-on-dark-muted: rgba(255, 255, 255, 0.84);
}

/* Shared Section Heading Hierarchy.
   Extracted from the approved Bathroom Renovations heading trial. */
html:root:root:root:root body main :is(.section-header, .bathroom-section-header, .service-section-header).section-header--two-level,
html:root:root:root:root body main :is(.section-header, .bathroom-section-header, .service-section-header).section-header--three-level {
  width: 100%;
  margin-top: 0 !important;
}

html:root:root:root:root body main :is(.section-header, .bathroom-section-header, .service-section-header).section-header--two-level {
  max-width: 760px !important;
  margin-bottom: 34px !important;
}

html:root:root:root:root body main :is(.section-header, .bathroom-section-header, .service-section-header).section-header--three-level {
  max-width: 780px !important;
  margin-bottom: 40px !important;
}

html:root:root:root:root body main :is(.section-header, .bathroom-section-header, .service-section-header).section-header--center {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

html:root:root:root:root body main :is(.section-header, .bathroom-section-header, .service-section-header).section-header--left {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

html:root:root:root:root body main :is(.section-header, .bathroom-section-header, .service-section-header).section-header--center :is(h2, p, .section-heading, .section-supporting, .section-title, .section-copy, .service-section-heading, .service-section-supporting, .service-section-description, .bathroom-section-heading, .bathroom-section-subheading, .bathroom-section-subtitle) {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

html:root:root:root:root body main :is(.section-header, .bathroom-section-header, .service-section-header).section-header--left :is(h2, p, .section-heading, .section-supporting, .section-title, .section-copy, .service-section-heading, .service-section-supporting, .service-section-description, .bathroom-section-heading, .bathroom-section-subheading, .bathroom-section-subtitle, .bathroom-intro-lead, .dk-coverage__title, .dk-coverage__copy) {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

html:root:root:root:root body main :is(.section-eyebrow, .bathroom-section-eyebrow, .dk-coverage__label) {
  margin: 0 0 11px !important;
  color: var(--dk-line-gold, #A8732B) !important;
  font-family: "Manrope", "Noto Sans SC", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

html:root:root:root:root body main :is(.section-header, .bathroom-section-header, .service-section-header).section-header--two-level :is(h2, .section-heading, .section-title, .service-section-heading, .bathroom-section-heading),
html:root:root:root:root body main :is(.section-header, .bathroom-section-header, .service-section-header).section-header--three-level :is(h2, .section-heading, .section-title, .service-section-heading, .bathroom-section-heading, .dk-coverage__title) {
  margin-top: 0 !important;
}

html:root:root:root:root body main :is(.section-header, .bathroom-section-header, .service-section-header).section-header--two-level > p:not(.section-eyebrow):not(.bathroom-section-eyebrow):not(.dk-coverage__label),
html:root:root:root:root body main :is(.section-header, .bathroom-section-header, .service-section-header).section-header--two-level :is(.section-supporting, .section-copy, .service-section-supporting, .service-section-description, .bathroom-section-subheading, .bathroom-section-subtitle) {
  max-width: 700px !important;
  margin-top: 14px !important;
}

html:root:root:root:root body main :is(.section-header, .bathroom-section-header, .service-section-header).section-header--three-level > p:not(.section-eyebrow):not(.bathroom-section-eyebrow):not(.dk-coverage__label),
html:root:root:root:root body main :is(.section-header, .bathroom-section-header, .service-section-header).section-header--three-level :is(.section-supporting, .section-copy, .service-section-supporting, .service-section-description, .bathroom-section-subheading, .bathroom-section-subtitle, .bathroom-intro-lead, .dk-coverage__copy) {
  max-width: 720px !important;
  margin-top: 15px !important;
}

html:root:root:root:root body main :is(.section-header, .bathroom-section-header, .service-section-header).section-header--on-dark :is(h2, .section-heading, .section-title, .service-section-heading, .bathroom-section-heading) {
  color: rgba(255, 255, 255, .96) !important;
}

html:root:root:root:root body main :is(.section-header, .bathroom-section-header, .service-section-header).section-header--on-dark > p:not(.section-eyebrow):not(.bathroom-section-eyebrow):not(.dk-coverage__label),
html:root:root:root:root body main :is(.section-header, .bathroom-section-header, .service-section-header).section-header--on-dark :is(.section-supporting, .section-copy, .service-section-supporting, .service-section-description, .bathroom-section-subheading, .bathroom-section-subtitle) {
  color: rgba(255, 255, 255, .82) !important;
}

html:root:root:root:root body main :is(.section-header, .bathroom-section-header, .service-section-header).section-header--on-dark :is(h2, .section-heading, .section-title, .service-section-heading, .bathroom-section-heading) span {
  color: var(--dk-gold, var(--gold, #C4933F)) !important;
}

html:root:root:root:root body main .renovation-process-standard :is(.section-header, .bathroom-section-header, .service-section-header).section-header--two-level {
  margin-bottom: 0 !important;
}

html:root:root:root:root body main .renovation-process-standard .process-row {
  margin-top: 34px !important;
}

@media (max-width: 1024px) {
  html:root:root:root:root body main :is(.section-header, .bathroom-section-header, .service-section-header).section-header--two-level {
    margin-bottom: 30px !important;
  }

  html:root:root:root:root body main :is(.section-header, .bathroom-section-header, .service-section-header).section-header--three-level {
    margin-bottom: 36px !important;
  }

  html:root:root:root:root body main .renovation-process-standard .process-row {
    margin-top: 30px !important;
  }
}

@media (max-width: 768px) {
  html:root:root:root:root body main :is(.section-header, .bathroom-section-header, .service-section-header).section-header--two-level,
  html:root:root:root:root body main :is(.section-header, .bathroom-section-header, .service-section-header).section-header--three-level {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 28px !important;
    text-align: left !important;
  }

  html:root:root:root:root body main :is(.section-header, .bathroom-section-header, .service-section-header).section-header--two-level :is(h2, p, .section-heading, .section-supporting, .section-title, .section-copy, .service-section-heading, .service-section-supporting, .service-section-description, .bathroom-section-heading, .bathroom-section-subheading, .bathroom-section-subtitle),
  html:root:root:root:root body main :is(.section-header, .bathroom-section-header, .service-section-header).section-header--three-level :is(h2, p, .section-heading, .section-supporting, .section-title, .section-copy, .service-section-heading, .service-section-supporting, .service-section-description, .bathroom-section-heading, .bathroom-section-subheading, .bathroom-section-subtitle, .bathroom-intro-lead, .dk-coverage__title, .dk-coverage__copy) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  html:root:root:root:root body main .renovation-process-standard .process-row {
    margin-top: 28px !important;
  }
}

/* Functional section headings. Editorial/display headings keep page styling. */
html:root:root:root:root :is(body main, body[data-page="home"]) :is(
  .section-title,
  .service-section-heading,
  .bathroom-section-heading,
  .about-section-heading,
  .areas-title,
  .planning-gateway__title,
  .renovation-delivery__title,
  .why-dk-title,
  .home-areas__title,
  .article-content h2,
  .contact-page .section-heading h2,
  .contact-page .service-area h2,
  .faq-library-head h2,
  .blog-faq-section .section-title,
  .resources-section-head h2,
  .project-results-toolbar h2
) {
  font-family: "Manrope", "Noto Sans SC", sans-serif !important;
  font-size: var(--dk-type-h2) !important;
  line-height: var(--dk-line-heading) !important;
  font-weight: var(--dk-weight-heading) !important;
  letter-spacing: -0.025em !important;
  color: var(--dk-text-primary) !important;
}

/* Shared section supporting text. Alignment remains owned by each page. */
html:root:root:root:root :is(body main, body[data-page="home"]) :is(
  .section-subtitle,
  .section-copy,
  .service-section-supporting,
  .service-section-description,
  .bathroom-section-subtitle,
  .bathroom-section-subheading,
  .bathroom-options-subtitle,
  .about-section-subheading,
  .story-support,
  .areas-subtitle,
  .benefits-intro > p,
  .planning-gateway__subtitle,
  .home-areas__supporting,
  .renovation-delivery__supporting,
  .projects-hero-intro,
  .article-intro,
  .blog-hero-copy > p:not(.eyebrow),
  .resources-hero-copy > p:not(.eyebrow),
  .resources-section-head p,
  .contact-page .section-heading > p:last-child,
  .contact-page .service-area__copy > p:not(.eyebrow),
  .faq-library-head p,
  .faq-tools .faq-result-count
) {
  max-width: 720px;
  font-size: var(--dk-type-supporting) !important;
  line-height: var(--dk-line-supporting) !important;
  font-weight: var(--dk-weight-supporting) !important;
  color: var(--dk-text-muted-readable) !important;
}

/* Hero descriptions gain clarity without changing display titles or spacing. */
html:root:root:root:root body :is(.hero-copy, .hero-copy-v6, .hero-subtitle-brand) {
  font-weight: var(--dk-weight-body) !important;
}

html:root:root:root:root body :is(.hero, .projects-hero) :is(.hero-copy, .hero-copy-v6, .hero-subtitle-brand, .projects-hero-intro) {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Long-form section copy. Labels, metadata and compact utility text are excluded. */
html:root:root:root:root :is(body main, body[data-page="home"]) :where(section:not(.hero)) :where(p:not([class*="eyebrow"]):not([class*="kicker"]):not([class*="label"]):not([class*="meta"]):not([class*="price"]):not([class*="indicator"]):not([class*="keywords"]):not(.privacy):not(.project-results-count):not(.pricing-panel__service)) {
  font-size: var(--dk-type-body) !important;
  line-height: var(--dk-line-body) !important;
  font-weight: var(--dk-weight-body) !important;
  color: var(--dk-text-body) !important;
}

/* Card and process descriptions stay compact while remaining readable. */
html:root:root:root:root :is(body main, body[data-page="home"]) :where(
  article:not(.article-content),
  [class$="-card"],
  [class*="-card "],
  .process-step,
  .team-step,
  .panel
) > :where(p:not([class*="label"]):not([class*="meta"]):not([class*="price"])),
html:root:root:root:root :is(body main, body[data-page="home"]) :where(
  article:not(.article-content),
  [class$="-card"],
  [class*="-card "],
  .process-step,
  .team-step,
  .panel
) > div > :where(p:not([class*="label"]):not([class*="meta"]):not([class*="price"])) {
  font-size: var(--dk-type-body-small) !important;
  line-height: 1.6 !important;
  font-weight: var(--dk-weight-body) !important;
  color: var(--dk-text-body) !important;
}

html:root:root:root:root :is(body main, body[data-page="home"]) :is(
  .project-summary,
  .project-card-description,
  .project-scope,
  .project-outcome,
  .project-card p,
  .project-body p,
  .project-filter-item,
  .project-filter-focus-item,
  .guide-summary,
  .resource-guide-body > p:not(.resource-guide-category),
  .faq-answer p,
  .faq-item p,
  .contact-card__body small,
  .renovation-project-card__summary,
  .bathroom-project-card__text,
  .kitchen-transform-solution
) {
  font-size: var(--dk-type-body-small) !important;
  line-height: 1.6 !important;
  font-weight: var(--dk-weight-body) !important;
  color: var(--dk-text-body) !important;
}

html:root:root:root:root body[data-page="home"] #projects .project-summary {
  font-size: var(--dk-type-body-small) !important;
  line-height: 1.6 !important;
  font-weight: var(--dk-weight-body) !important;
  color: var(--dk-text-body) !important;
}

/* Filtered homepage project cards use the same readable compact-copy treatment. */
html:root:root:root:root body[data-page="home"] #projects .project-card-v6 .proj-info :is(
  .project-scope,
  .project-outcome
) {
  font-size: var(--dk-type-body-small) !important;
  line-height: 1.6 !important;
  font-weight: var(--dk-weight-body) !important;
  color: var(--dk-text-body) !important;
}

html:root:root:root:root body[data-page="home"] #projects .project-card-v6 .proj-info :is(
  .project-scope,
  .project-outcome
) strong {
  color: var(--dk-text-primary) !important;
  font-weight: var(--dk-weight-heading) !important;
}

html:root:root:root:root :is(body main, body[data-page="home"]) details p {
  font-size: var(--dk-type-body) !important;
  line-height: var(--dk-line-body) !important;
  font-weight: var(--dk-weight-body) !important;
  color: var(--dk-text-body) !important;
}

/* Shared FAQ module typography for FAQ libraries and service page accordions. */
html:root:root:root:root :is(body main, body[data-page="home"]) :is(
  .faq-item h3,
  .faq-item button,
  details summary
) {
  font-family: "Manrope", "Noto Sans SC", sans-serif !important;
  font-size: 16.5px !important;
  line-height: 1.35 !important;
  font-weight: var(--dk-weight-heading) !important;
  letter-spacing: -0.015em !important;
  color: var(--dk-text-primary) !important;
}

html:root:root:root:root :is(body main, body[data-page="home"]) :is(
  .faq-answer p,
  .faq-item .faq-answer p,
  details p
) {
  font-size: var(--dk-type-body) !important;
  line-height: 1.6 !important;
  font-weight: var(--dk-weight-body) !important;
  color: var(--dk-text-body) !important;
}

/* Shared FAQ typography lock. FAQ copy stays page-specific; only the approved
   hierarchy, reading size and accordion typography are standardised. */
html:root:root:root:root body main :is(
  section[id*="faq" i],
  section[class*="faq" i]
) h2 {
  font-family: "Manrope", "Noto Sans SC", Arial, sans-serif !important;
  font-size: 47.52px !important;
  line-height: 1.14 !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}

html:root:root:root:root body main :is(
  section[id*="faq" i],
  section[class*="faq" i]
) :is(header, aside) > p:last-child {
  max-width: 720px !important;
  font-family: "Manrope", "Noto Sans SC", Arial, sans-serif !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
  font-weight: 600 !important;
}

html:root:root:root:root body main :is(
  section[id*="faq" i],
  section[class*="faq" i]
) :is(
  summary,
  [data-faq-button],
  .faq-question,
  .faq-q,
  button[aria-controls]:not([data-faq-filter]):not([data-faq-load-more]):not([data-faq-clear])
) {
  font-family: "Manrope", "Noto Sans SC", Arial, sans-serif !important;
  font-size: 17px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
}

html:root:root:root:root body main :is(
  section[id*="faq" i],
  section[class*="faq" i]
) :is(
  details > p,
  .faq-answer p,
  [data-faq-answer] p,
  article > div[role="region"] p,
  article > div[id*="answer" i] p
) {
  font-family: "Manrope", "Noto Sans SC", Arial, sans-serif !important;
  font-size: 16.5px !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
}

@media (max-width: 1024px) {
  html:root:root:root:root body main :is(
    section[id*="faq" i],
    section[class*="faq" i]
  ) h2 {
    font-size: 36px !important;
  }

  html:root:root:root:root body main :is(
    section[id*="faq" i],
    section[class*="faq" i]
  ) :is(header, aside) > p:last-child {
    font-size: 17px !important;
  }
}

@media (max-width: 640px) {
  html:root:root:root:root body main :is(
    section[id*="faq" i],
    section[class*="faq" i]
  ) h2 {
    font-size: 31px !important;
  }

  html:root:root:root:root body main :is(
    section[id*="faq" i],
    section[class*="faq" i]
  ) :is(header, aside) > p:last-child {
    font-size: 16px !important;
  }

  html:root:root:root:root body main :is(
    section[id*="faq" i],
    section[class*="faq" i]
  ) :is(
    summary,
    [data-faq-button],
    .faq-question,
    .faq-q,
    button[aria-controls]:not([data-faq-filter]):not([data-faq-load-more]):not([data-faq-clear])
  ) {
    font-size: 16px !important;
  }

  html:root:root:root:root body main :is(
    section[id*="faq" i],
    section[class*="faq" i]
  ) :is(
    details > p,
    .faq-answer p,
    [data-faq-answer] p,
    article > div[role="region"] p,
    article > div[id*="answer" i] p
  ) {
    font-size: 16px !important;
  }
}

/* Nested light cards must keep dark readable copy even when their parent
   section uses the dark Why DK palette. */
html:root:root:root:root:root body[data-business="home-modifications"] main .hm-why-section .why-card h3 {
  color: var(--dk-ink-blue, #123047) !important;
  -webkit-text-fill-color: var(--dk-ink-blue, #123047) !important;
}

html:root:root:root:root:root body[data-business="home-modifications"] main .hm-why-section .why-card p {
  color: var(--dk-text-body, #354e5e) !important;
  -webkit-text-fill-color: var(--dk-text-body, #354e5e) !important;
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
}

/* This outcome panel is white inside a pale-blue feature section. The
   section-level accent rule must not turn its list copy white. */
html:root:root:root:root:root body.duplex-page main .duplex-feasibility .feasibility-outcome li {
  color: var(--duplex-muted, #536978) !important;
  -webkit-text-fill-color: var(--duplex-muted, #536978) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
}

/* Dark content bands must stay readable after the shared light-surface body
   rules are loaded. These selectors preserve approved section content and
   change typography colour only. */
html:root:root:root:root body main .inline-cta :is(h2, h3) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html:root:root:root:root body main .inline-cta > p,
html:root:root:root:root body main .inline-cta > div > p {
  color: rgba(255, 255, 255, 0.84) !important;
}

html:root:root:root:root body main .team-section .about-section-heading {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html:root:root:root:root body main .team-section :is(
  .about-section-subheading,
  .section-copy
) {
  color: rgba(255, 255, 255, 0.84) !important;
}

/* Project-detail narrative metadata is part of the homeowner decision story,
   so it follows the 15px readability floor rather than compact UI metadata. */
html:root:root:root:root body[data-page="projects"] main .project-decision__palette {
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
}

html:root:root:root:root body[data-page="projects"] main .project-journey__activity {
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
}

/* Final specificity layer: several legacy/new page templates declare local
   important rules after the shared stylesheet. These component-role locks are
   intentionally narrow so they cannot recolour ordinary light sections. */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root body main .inline-cta :is(h2, h3),
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root body main .team-section .about-section-heading,
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root body main .trust-section .about-section-heading {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root body main :is(
  .inline-cta,
  .team-section,
  .fast-track-panel,
  .gf-why-dk-section,
  .op-quote,
  .enquiry-media__callout
) :is(p, li, dd) {
  color: rgba(255, 255, 255, 0.84) !important;
}

html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root body main .trust-section .about-section-subheading {
  color: rgba(255, 255, 255, 0.84) !important;
}

html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root body[data-page="projects"] main .project-decision__palette {
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
}

html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root body[data-business="renovations"] main .bathroom-quote-clarity__heading p {
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
}

html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root body[data-business="renovations"] main .laundry-trust-points li {
  font-size: 15px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}

/* Approved readability floor for repeated long-form component copy. These
   selectors intentionally outrank legacy page-local !important declarations. */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root body[data-business="renovations"] main .renovation-process-standard .process-more p {
  color: #354e5e !important;
  font-size: 15.5px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
}

html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root body[data-business="renovations"] main .bathroom-quote-clarity-list li,
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root body[data-business="renovations"] main .full-home-delivery-section li {
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
}

html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root body[data-business="renovations"] main .bathroom-quote-clarity-card > p {
  font-size: 15.5px !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
}

html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.bathroom-page #bathroom-process-section .bathroom-process__copy {
  color: #354e5e !important;
  font-size: 15.5px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
}

/* Repeated content modules may load page-local CSS after this shared layer.
   Lock descriptive copy to the approved readable scale without changing
   labels, buttons, forms, trust rails, metadata or decorative captions. */
html:root:root:root:root body main :is(
  .bathroom-projects-section,
  .bathroom-package-section,
  .bathroom-pricing-section,
  .bathroom-process-section,
  .laundry-featured-projects-section,
  .outdoor-featured-section,
  .renovation-budget,
  .renovation-process-standard,
  .full-home-process-section,
  .full-home-featured-projects-section
) :is(li, dd, td) {
  font-family: "Manrope", "Noto Sans SC", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
}

html:root:root:root:root body main :is(
  .bathroom-process-section,
  .renovation-process-standard,
  .full-home-process-section
) :is(.bathroom-process__copy, .process-copy, .process-step p, .dk-process-system__summary) {
  font-family: "Manrope", "Noto Sans SC", Arial, sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
}

/* Late page-local styles still set some repeated explanatory modules below
   the approved narrative floor. These selectors exclude labels and controls. */
html:root:root:root:root:root body main :is(
  .bathroom-process-section,
  .renovation-process-standard,
  .full-home-process-section
) :is(
  .process-step p,
  .bathroom-process__copy,
  .dk-process-system__summary,
  .process-more p
) {
  color: var(--dk-text-body, #354e5e) !important;
  font-family: "Manrope", "Noto Sans SC", Arial, sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
}

html:root:root:root:root:root body main .bathroom-package-section :is(
  .bathroom-quote-clarity__heading p,
  .bathroom-quote-clarity-list li,
  .bathroom-package-card p,
  .bathroom-cost-factor p
) {
  color: var(--dk-text-body, #354e5e) !important;
  font-family: "Manrope", "Noto Sans SC", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
}

html:root:root:root:root:root body main .extension-approvals .extension-approval-row li,
html:root:root:root:root:root body main .ss-decision figcaption {
  font-family: "Manrope", "Noto Sans SC", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
}

/* Generated project pages define this copy in late inline CSS. Keep the
   conversion message readable without altering project-specific layout. */
html:root:root:root:root:root:root:root body[data-page="projects"] main .final-cta.bathroom-final-cta .bathroom-final-cta__conversion .bathroom-final-cta__conversion-inner > p {
  color: rgba(255, 255, 255, .84) !important;
  font-family: "Manrope", "Noto Sans SC", Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

/* Full-sentence figure descriptions remain semantic captions but use the
   approved readable body weight. */
html:root:root:root:root body main :is(
  .property figcaption,
  .fast-track-section figcaption,
  .ac-property figcaption,
  .study-hero figcaption,
  .study-site figcaption,
  .study-gallery figcaption
) {
  font-weight: 500 !important;
}

/* Article prose, comparison tables and checklists use the same body floor.
   Article metadata and interface controls retain the smaller label scale. */
html:root:root:root:root body main .article-content :is(p, li, td, dd) {
  font-family: "Manrope", "Noto Sans SC", Arial, sans-serif !important;
  font-size: var(--dk-type-body, 16.5px) !important;
  font-weight: var(--dk-weight-body, 500) !important;
  line-height: var(--dk-line-body, 1.65) !important;
}

@media (max-width: 768px) {
  html:root:root:root:root body main :is(
    .bathroom-projects-section,
    .bathroom-package-section,
    .bathroom-pricing-section,
    .bathroom-process-section,
    .laundry-featured-projects-section,
    .outdoor-featured-section,
    .renovation-budget,
    .renovation-process-standard,
    .full-home-process-section,
    .full-home-featured-projects-section
  ) :is(li, dd, td),
  html:root:root:root:root body main .article-content :is(p, li, td, dd) {
    font-size: 15px !important;
  }
}

/* First-level page hero normalisation. Homepage and service heroes remain page-owned. */
html:root:root:root:root body:not([data-page="home"]) :is(
  .projects-page-header,
  .about-hero,
  .areas-hero,
  .blog-hero,
  .resources-hero,
  .contact-hero
) :is(h1, .projects-hero-title) {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  line-height: 1.02 !important;
  letter-spacing: -0.03em !important;
  font-weight: 500 !important;
}

html:root:root:root:root body:not([data-page="home"]) :is(
  .projects-page-header,
  .about-hero,
  .areas-hero,
  .blog-hero,
  .resources-hero,
  .contact-hero
) :is(.projects-hero-intro, .about-hero-copy p:not(.eyebrow), .areas-hero p:not(.eyebrow), .blog-hero-copy > p:not(.eyebrow), .resources-hero-copy > p:not(.eyebrow), .contact-hero__intro) {
  font-size: var(--dk-type-supporting) !important;
  line-height: var(--dk-line-supporting) !important;
  font-weight: var(--dk-weight-supporting) !important;
}

html:root:root:root:root :is(body main, body[data-page="home"]) :is(
  [class$="-card"],
  [class*="-card "],
  .panel
) h3 {
  font-family: "Manrope", "Noto Sans SC", sans-serif !important;
  line-height: 1.25 !important;
  font-weight: var(--dk-weight-heading) !important;
  letter-spacing: -0.02em !important;
}

html:root:root:root:root :is(body main, body[data-page="home"]) .article-content h3 {
  font-family: "Manrope", "Noto Sans SC", sans-serif !important;
  font-size: var(--dk-type-h3) !important;
  line-height: 1.25 !important;
  font-weight: var(--dk-weight-heading) !important;
  letter-spacing: -0.02em !important;
  color: var(--dk-text-primary) !important;
}

html:root:root:root:root :is(body main, body[data-page="home"]) .article-content li {
  font-size: var(--dk-type-body) !important;
  line-height: var(--dk-line-body) !important;
  font-weight: var(--dk-weight-body) !important;
  color: var(--dk-text-body) !important;
}

html:root:root:root:root :is(body main, body[data-page="home"]) .article-content p {
  font-size: var(--dk-type-body) !important;
  line-height: var(--dk-line-body) !important;
  font-weight: var(--dk-weight-body) !important;
  color: var(--dk-text-body) !important;
}

html:root:root:root:root :is(body main, body[data-page="home"]) .bathroom-option-card h3 {
  font-size: 20px !important;
}

html:root:root:root:root :is(body main, body[data-page="home"]) :is(.process-step, .team-step) h3,
html:root:root:root:root :is(body main, body[data-page="home"]) details summary {
  font-weight: var(--dk-weight-heading) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
}

html:root:root:root:root :is(body main, body[data-page="home"]) section:not(.hero) li:not([class*="nav"]):not([class*="menu"]) {
  font-weight: var(--dk-weight-body) !important;
  line-height: 1.55 !important;
}

html:root:root:root:root :is(body main, body[data-page="home"]) :is(.section-label, .section-kicker) {
  font-size: var(--dk-type-label) !important;
  font-weight: var(--dk-weight-label) !important;
  letter-spacing: 0.12em !important;
}

/* Dark content sections use the same contrast standard without recolouring cards. */
html:root:root:root:root :is(body main, body[data-page="home"]) :is(
  .navy,
  .dark,
  .bathroom-why-section,
  .why-section-upgraded,
  .why-dk-section,
  .start-here,
  .final-cta,
  .resources-final-cta,
  .areas-final
) :is(
  .section-title,
  .service-section-heading,
  .bathroom-section-heading,
  .about-section-heading,
  .why-dk-title
) {
  color: var(--dk-text-on-dark) !important;
}

/* Keep shared pre-footer CTA headings white. The repeated component selector
   intentionally outranks the generic light-section heading hierarchy above. */
html:root:root:root:root body main .final-cta.final-cta :is(
  .section-title,
  .service-section-heading,
  .bathroom-section-heading,
  .about-section-heading,
  .why-dk-title,
  h2
) {
  color: var(--dk-text-on-dark) !important;
}

html:root:root:root:root :is(body main, body[data-page="home"]) :is(
  .navy,
  .dark,
  .bathroom-why-section,
  .why-section-upgraded,
  .why-dk-section,
  .start-here,
  .final-cta,
  .resources-final-cta,
  .areas-final
) :is(
  .section-subtitle,
  .section-copy,
  .service-section-supporting,
  .service-section-description,
  .bathroom-section-subtitle,
  .bathroom-section-subheading,
  .about-section-subheading,
  .why-card p,
  .start-item p,
  .resources-final-cta p,
  .final-cta .final-cta-inner > p,
  .areas-final p,
  .final-copy > p
) {
  color: var(--dk-text-on-dark-muted) !important;
}

/* Restore the approved muted-light body copy on the homepage Welcome panel. */
html:root:root:root:root body[data-page="home"] .welcome-premium-v14 .welcome-copy-v14 p:not(.welcome-eyebrow-v14) {
  color: rgba(255, 252, 244, 0.82) !important;
}

/* Final CTA headings retain their approved hierarchy at a calmer scale. */
html:root:root:root:root body :is(
  .final-cta-v6 .final-cta-inner-v6 > h2,
  .about-final .final-copy h2,
  .areas-section.areas-final h2,
  .final-section.final-section-full .final-copy h2,
  .final-cta .final-cta-inner > h2,
  .resources-final-cta h2,
  main > .final-cta .final-copy h2,
  main > .final-cta .service-section-heading,
  .project-cta h2,
  .blog-final-cta .blog-final-cta-copy h2,
  .final-contact .final-contact__inner h2
) {
  font-family: "Manrope", "Noto Sans SC", sans-serif !important;
  font-size: var(--dk-type-final-cta) !important;
  line-height: var(--dk-line-heading) !important;
  font-weight: var(--dk-weight-heading) !important;
}

/* Final CTA supporting copy is a shared dark-surface role. Keep it above the
   generic long-form paragraph rule on every current CTA markup variant. */
html:root:root:root:root body main :is(
  .final-cta-v6 .final-cta-inner-v6 > p,
  .about-final .final-copy > p,
  .areas-section.areas-final > .areas-container > p,
  .project-cta .project-cta-inner > p,
  .blog-final-cta .blog-final-cta-copy > p:not(.eyebrow),
  .resources-final-cta .resources-final-inner p,
  .final-contact .final-contact__inner > div:first-child > p,
  .final-cta .final-cta-inner > p,
  .final-cta .final-copy > p,
  .final-cta .service-section-header > p
) {
  max-width: none !important;
  margin-top: 16px !important;
  color: var(--dk-text-on-dark-muted) !important;
  font-size: 17px !important;
  line-height: 1.5 !important;
  font-weight: var(--dk-weight-supporting) !important;
}

/* Final CTA phone number: 1.2x the approved 15px control copy. */
html:root:root:root:root body .final-cta-phone__number {
  font-size: 18px !important;
  line-height: 1.2 !important;
}

/* Frozen Why DK title treatment: the heading remains white on navy and only
   the word "Choose" carries the restrained business-family accent. */
html:root:root:root:root body main .dk-why-heading.dk-why-heading.dk-why-heading {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html:root:root:root:root body main :is(
  .outdoor-why-section,
  .hm-why-section
) .service-section-heading.service-section-heading {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html:root:root:root:root body main .dk-why-heading__accent.dk-why-heading__accent.dk-why-heading__accent {
  color: var(--business-accent-on-dark, #d8b36a) !important;
  -webkit-text-fill-color: var(--business-accent-on-dark, #d8b36a) !important;
}

html:root:root:root:root body main :is(
  .outdoor-why-section,
  .hm-why-section
) .service-section-heading.service-section-heading > span {
  color: var(--business-accent-on-dark, #d8b36a) !important;
  -webkit-text-fill-color: var(--business-accent-on-dark, #d8b36a) !important;
}

html:root:root:root:root body[data-business="granny-flats"] main .dk-why-heading__accent.dk-why-heading__accent.dk-why-heading__accent {
  color: var(--accent-granny-flats-on-dark, #b9d8bc) !important;
  -webkit-text-fill-color: var(--accent-granny-flats-on-dark, #b9d8bc) !important;
}

html:root:root:root:root body[data-business="new-builds"] main .dk-why-heading__accent.dk-why-heading__accent.dk-why-heading__accent {
  color: var(--accent-new-builds-on-dark, #8bc7ee) !important;
  -webkit-text-fill-color: var(--accent-new-builds-on-dark, #8bc7ee) !important;
}

@media (max-width: 1024px) {
  :root {
    --dk-type-h2: 36px;
    --dk-type-final-cta: 30.6px;
    --dk-type-supporting: 17px;
    --dk-type-body: 16px;
  }
}

@media (max-width: 768px) {
  :root {
    --dk-type-h2: 31px;
    --dk-type-final-cta: 26.35px;
    --dk-type-supporting: 16px;
    --dk-type-body: 16px;
    --dk-type-body-small: 15px;
  }

  html:root:root:root:root body main :is(
    .final-cta-v6 .final-cta-inner-v6 > p,
    .about-final .final-copy > p,
    .areas-section.areas-final > .areas-container > p,
    .project-cta .project-cta-inner > p,
    .blog-final-cta .blog-final-cta-copy > p:not(.eyebrow),
    .resources-final-cta .resources-final-inner p,
    .final-contact .final-contact__inner > div:first-child > p,
    .final-cta .final-cta-inner > p,
    .final-cta .final-copy > p,
    .final-cta .service-section-header > p
  ) {
    font-size: 16px !important;
  }
}

/* Projects Hub filter hierarchy: page-scoped override for shared readability rules. */
html:root:root:root:root body[data-page="projects"] main .project-filter-panel .project-filter-title {
  color: #17344a !important;
  font-weight: 650 !important;
}

html:root:root:root:root body[data-page="projects"] main .project-filter-panel .projects-filter-column-label {
  color: #96a0a8 !important;
  font-weight: 650 !important;
}

html:root:root:root:root body[data-page="projects"] main .project-filter-panel .project-filter-item {
  color: #334b5d !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 560 !important;
  letter-spacing: -0.01em !important;
}

html:root:root:root:root body[data-page="projects"] main .project-filter-panel .project-filter-item.is-active {
  color: #17344a !important;
  font-weight: 650 !important;
}

html:root:root:root:root body[data-page="projects"] main .project-filter-panel :is(
  .project-filter-focus-item,
  .project-location-item
) {
  color: #566978 !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

html:root:root:root:root body[data-page="projects"] main .project-filter-panel :is(
  .project-filter-focus-item.is-active,
  .project-location-item.is-active
) {
  color: #1b3448 !important;
  font-weight: 650 !important;
}

html:root:root:root:root body[data-page="projects"] main .project-filter-panel :is(
  .project-filter-item,
  .project-filter-focus-item,
  .project-location-item
) > span {
  color: #60717e !important;
  font-weight: 550 !important;
}

html:root:root:root:root body[data-page="projects"] main .project-filter-panel :is(
  .project-filter-item,
  .project-filter-focus-item,
  .project-location-item
) > span.is-zero {
  color: #98a2aa !important;
  font-weight: 450 !important;
}

html:root:root:root:root body[data-page="projects"] main .project-filter-panel :is(
  .project-filter-item.is-active,
  .project-filter-focus-item.is-active,
  .project-location-item.is-active
) > span,
html:root:root:root:root body[data-page="projects"] main .project-filter-panel :is(
  .project-filter-item.is-active,
  .project-filter-focus-item.is-active,
  .project-location-item.is-active
) > span.is-zero {
  color: currentColor !important;
  font-weight: 650 !important;
}

/* New Builds legacy FAQ components carry unusually specific page selectors.
   Keep their content and layout, but lock them to the shared readable FAQ
   hierarchy. */
html:root:root:root:root body:is(.new-builds-page, .custom-home-page, .house-land-page) main :is(
  #new-builds-faq,
  #hl-faq,
  .custom-home-faq
) h2 {
  font-family: "Manrope", "Noto Sans SC", Arial, sans-serif !important;
  font-size: 47.52px !important;
  line-height: 1.14 !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}

html:root:root:root:root body:is(.new-builds-page, .custom-home-page, .house-land-page) main :is(
  #new-builds-faq,
  #hl-faq,
  .custom-home-faq
) :is([data-faq-button], .faq-question, .new-builds-faq__question, button[aria-expanded]) {
  font-family: "Manrope", "Noto Sans SC", Arial, sans-serif !important;
  font-size: 17px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
}

html:root:root:root:root body:is(.new-builds-page, .custom-home-page, .house-land-page) main :is(
  #new-builds-faq,
  #hl-faq,
  .custom-home-faq
) :is(.faq-answer, .new-builds-faq__answer, [data-faq-answer]) p {
  font-family: "Manrope", "Noto Sans SC", Arial, sans-serif !important;
  font-size: 16.5px !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
}

@media (max-width: 1024px) {
  html:root:root:root:root body:is(.new-builds-page, .custom-home-page, .house-land-page) main :is(
    #new-builds-faq,
    #hl-faq,
    .custom-home-faq
  ) h2 {
    font-size: 36px !important;
  }
}

@media (max-width: 640px) {
  html:root:root:root:root body.dc-page main .dc-feature h2 {
    font-size: 31px !important;
  }

  html:root:root:root:root body:is(.new-builds-page, .custom-home-page, .house-land-page) main :is(
    #new-builds-faq,
    #hl-faq,
    .custom-home-faq
  ) h2 {
    font-size: 31px !important;
  }

  html:root:root:root:root body:is(.new-builds-page, .custom-home-page, .house-land-page) main :is(
    #new-builds-faq,
    #hl-faq,
    .custom-home-faq
  ) :is([data-faq-button], .faq-question, .new-builds-faq__question, button[aria-expanded]) {
    font-size: 16px !important;
  }

  html:root:root:root:root body:is(.new-builds-page, .custom-home-page, .house-land-page) main :is(
    #new-builds-faq,
    #hl-faq,
    .custom-home-faq
  ) :is(.faq-answer, .new-builds-faq__answer, [data-faq-answer]) p {
    font-size: 16px !important;
  }
}