/* DK Residential section density system.
   Applies the approved Bathroom page rhythm to page body sections only. */
:root {
  --dk-density-feature-desktop: 76px;
  --dk-density-standard-desktop: 58px;
  --dk-density-compact-desktop: 54px;

  --dk-density-feature-tablet: 70px;
  --dk-density-standard-tablet: 62px;
  --dk-density-compact-tablet: 50px;

  --dk-density-feature-mobile: 54px;
  --dk-density-standard-mobile: 48px;
  --dk-density-compact-mobile: 40px;

  --dk-section-head-gap-desktop: 34px;
  --dk-section-head-gap-tablet: 32px;
  --dk-section-head-gap-mobile: 28px;

  --dk-panel-gap-desktop: 24px;
  --dk-panel-gap-tablet: 22px;
  --dk-panel-gap-mobile: 20px;

  --dk-surface-white: #ffffff;
  --dk-surface-renovations-soft: #f7efe4;
  --dk-surface-granny-flats-soft: #f0f7f1;
  --dk-surface-new-builds-soft: #f5fafc;
}

/* Business-family surface rhythm.
   These selectors are intentionally semantic rather than positional so adding
   a section later cannot silently reverse the page's background sequence. */
body[data-business="renovations"] {
  --dk-business-section-soft: var(--dk-surface-renovations-soft);
}

body[data-business="granny-flats"] {
  --dk-business-section-soft: var(--dk-surface-granny-flats-soft);
  --cream: var(--dk-business-section-soft);
  --od-warm: var(--dk-business-section-soft);
  --w60-warm: var(--dk-business-section-soft);
  --ft-warm: var(--dk-business-section-soft);
  --cd-warm: var(--dk-business-section-soft);
  --dc-warm: var(--dk-business-section-soft);
  --ac-warm: var(--dk-business-section-soft);
  --ac-cream: var(--dk-business-section-soft);
  --op-soft: var(--dk-business-section-soft);
}

body[data-business="new-builds"] {
  --dk-business-section-soft: var(--dk-surface-new-builds-soft);
  --dk-warm-white: var(--dk-surface-white);
  --new-builds-warm: var(--dk-surface-white);
  --kdr-paper: var(--dk-surface-white);
  --kdr-soft: var(--dk-business-section-soft);
}

/* First-level brand pages use the Renovations warm neutral, not a separate
   page theme. Project cards and library panels remain white. */
body[data-page="home"] :is(.planning-gateway, .testimonials-section),
body[data-page="about"] :is(.about-story-section, .trust-section),
body[data-page="areas"] :is(#all-areas, .areas-service-nav),
body[data-page="blog"] .blog-faq-section,
body[data-page="contact"] :is(.contact-methods, .service-area),
body[data-page="resources"] :is(.guides-section, #downloads) {
  background-color: var(--dk-surface-renovations-soft) !important;
}

body[data-page="contact"] .enquiry-section,
body[data-page="projects"] .project-section,
body[data-page="resources"] .faq-library-section {
  background-color: var(--dk-surface-white) !important;
}

/* About uses the shared dark Why DK module, not the generic warm brand-page
   surface applied to its other narrative sections. */
html body[data-page="about"] main > section.trust-section {
  background-color: var(--dk-rhythm-navy, #071f2f) !important;
}

html body[data-page="about"] main > section.trust-section .about-section-heading {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body[data-page="about"] main > section.trust-section .about-section-heading .dk-why-heading__accent {
  color: var(--dk-gold, #c4933f) !important;
  -webkit-text-fill-color: var(--dk-gold, #c4933f) !important;
}

html body[data-page="about"] main > section.trust-section .about-section-subheading {
  color: rgba(255, 255, 255, .82) !important;
}

/* Granny Flats: white and pale sage alternate through ordinary content.
   Heroes, credential rails, dark proof sections and final CTAs retain their
   approved component backgrounds. */
:where(body[data-business="granny-flats"] main > section:not([class*="hero"]):not([class*="credential"]):not([class*="final"]):not([class*="trust-strip"]):not(.gf-why-dk-section):not(.cd-inspiration):not(.ac-guide)) {
  background-color: var(--dk-surface-white) !important;
}

body[data-business="granny-flats"] :is(
  .intro,
  .designs-section,
  .property,
  .process,
  .od-paths,
  .od-support,
  .od-guides,
  .w60-floor-plan,
  .w60-inclusions,
  .w60-faq,
  .w60-site-suitability,
  .ft-definition,
  .ft-pathways,
  .ft-inclusions,
  .ft-faq,
  .cd-why,
  .cd-compare,
  .dc-catalogue,
  .dc-feature--reverse,
  .dc-process,
  .od-catalog.ft-catalog,
  .od-faq.ft-faq,
  .op-introduction,
  .op-assurance,
  .op-faq,
  .ac-property,
  .ac-budget,
  .ac-fast-track
) {
  background-color: var(--dk-surface-granny-flats-soft) !important;
}

/* Remove legacy Renovations cream from Granny Flats base sections. These
   sections are the white half of the approved white / pale-sage rhythm. */
html body.granny-page[data-business="granny-flats"] main > :is(
  .path-section,
  .why-build,
  .costs,
  .fast-track-section,
  .gf-featured-project,
  .faq-section,
  .od-catalog,
  .od-faq,
  .w60-layout,
  .ft-process,
  .ft-designs,
  .ft-guide,
  .cd-customisable,
  .cd-process,
  .cd-faq,
  .dc-feature--warm,
  .dc-brochure,
  .dc-faq,
  .od-support.ft-support,
  .od-guides.ft-guides,
  .op-journey,
  .op-next-step,
  .ac-intro,
  .ac-approval,
  .ac-faq
) {
  background-color: var(--dk-surface-white) !important;
}

/* Every current and future design detail page inherits the Granny Flats sage
   surface. Explicit classes keep its long-form sequence stable. */
body[data-business="granny-flats"].design-detail-page :is(
  .w60-floor-plan,
  .w60-inclusions,
  .w60-faq
) {
  background-color: var(--dk-surface-granny-flats-soft) !important;
}

body[data-business="granny-flats"].design-detail-page :is(
  .w60-layout
) {
  background-color: var(--dk-surface-white) !important;
}

/* Design Detail pages use a deliberate white / pale-sage sequence rather
   than inheriting consecutive warm panels from the original Willow layout. */
html body[data-business="granny-flats"].design-detail-page main > :is(
  section.w60-floor-plan,
  section.w60-site-suitability,
  section.w60-explore
) {
  background-color: var(--dk-surface-granny-flats-soft) !important;
}

html body[data-business="granny-flats"].design-detail-page main > :is(
  section.w60-inclusions-section,
  section.w60-stand-out
) {
  background-color: var(--dk-surface-white) !important;
}

html body[data-business="granny-flats"] main > section.approvals {
  background-color: var(--dk-surface-granny-flats-soft) !important;
}

html body[data-business="granny-flats"] main > section.gf-featured-project {
  background-color: var(--dk-surface-white) !important;
}

html body.granny-page[data-business="granny-flats"] main > section.ft-faq {
  background-color: var(--dk-surface-granny-flats-soft) !important;
}

/* New Builds: ordinary content is white; only the named planning/support
   sections receive the pale blueprint-blue surface. */
:where(body[data-business="new-builds"] main > section:not([class*="hero"]):not([class*="trust"]):not([class*="final"]):not([class*="dark"]):not([class*="navy"]):not(.custom-home-cost-clarity):not(.duplex-feasibility)) {
  background-color: var(--dk-surface-white) !important;
}

body[data-business="new-builds"] :is(
  .new-builds-feasibility,
  .new-builds-process,
  .custom-home-start,
  .custom-home-why,
  .duplex-pathways,
  .duplex-process,
  .duplex-difference,
  .section-blue,
  .kdr-section--soft
) {
  background-color: var(--dk-surface-new-builds-soft) !important;
}

html body[data-business="new-builds"] main > :is(
  .new-builds-section--white,
  .new-builds-life,
  .new-builds-projects,
  .new-builds-faq,
  .custom-home-intro,
  .custom-home-pillars,
  .custom-home-decisions,
  .custom-home-process,
  .custom-home-faq,
  .duplex-introduction,
  .duplex-ownership,
  .duplex-value,
  .duplex-inspiration
) {
  background-color: var(--dk-surface-white) !important;
}

html body[data-business="new-builds"] main > :is(
  .new-builds-feasibility,
  .new-builds-why,
  .new-builds-process,
  .custom-home-start,
  .custom-home-featured,
  .custom-home-why,
  .custom-home-pathways,
  .duplex-pathways,
  .duplex-process,
  .duplex-difference,
  .duplex-faq,
  .section-blue,
  .kdr-section--soft
) {
  background-color: var(--dk-surface-new-builds-soft) !important;
}

@media (min-width: 1025px) {
  body main > section.section:not(.hero):not(.final-cta):not([class*="final-cta"]),
  body main > section.dk-coverage,
  body main > section.projects-section,
  body main > section.services-section,
  body main > section.areas-section,
  body main > section.about-section,
  body main > section.blog-section,
  body main > section.resource-section,
  body main > section.contact-section,
  body main > section.contact-methods,
  body main > section.enquiry-section,
  body main > section.service-area,
  body main > section.blog-faq-section,
  body main > section.resources-section {
    padding-block: var(--dk-density-standard-desktop) !important;
  }

  body main > section[class*="intro"]:not(.hero),
  body main > section[class*="project"]:not([class*="hero"]):not([class*="header"]):not([class*="cta"]),
  body main > section[class*="story"]:not([class*="hero"]):not([class*="cta"]),
  body main > section[class*="coverage"],
  body main > section[class*="feature"]:not([class*="hero"]):not([class*="cta"]) {
    padding-block: var(--dk-density-feature-desktop) !important;
  }

  body main > section[class*="faq"],
  body main > section[class*="process"],
  body main > section[class*="why"] {
    padding-block: var(--dk-density-standard-desktop) !important;
  }

  body main .section-head,
  body main .section-header,
  body main .service-section-header,
  body main .bathroom-section-header,
  body main .about-section-header,
  body main .areas-title-v11,
  body main .benefits-intro,
  body main .projects-section-header,
  body main .resource-section-header,
  body main .blog-section-header,
  body main .section-heading,
  body main .faq-library-head {
    margin-bottom: var(--dk-section-head-gap-desktop) !important;
  }

  body main .options-grid,
  body main .services-grid,
  body main .why-grid,
  body main .guides-grid,
  body main .project-grid,
  body main .projects-grid,
  body main .resource-grid,
  body main .blog-grid,
  body main .cards-grid,
  body main .faq-wrap,
  body main .faq-grid,
  body main .faq-library-panel,
  body main .process-row,
  body main .process-list,
  body main .features-grid,
  body main .areas-grid {
    gap: var(--dk-panel-gap-desktop) !important;
  }

  body main .bathroom-project-switcher,
  body main .project-switcher,
  body main .tab-switcher,
  body main .filter-panel,
  body main .filter-strip {
    margin-bottom: 16px !important;
  }

  body main .bathroom-pricing-note,
  body main .pricing-note,
  body main .section-note {
    margin-top: 18px !important;
  }

  body main .bathroom-cost-factors,
  body main .cost-factors,
  body main .cost-card,
  body main .quote-clarity {
    margin-top: 24px !important;
  }
}

@media (max-width: 1024px) {
  body main > section.section:not(.hero):not(.final-cta):not([class*="final-cta"]),
  body main > section.dk-coverage,
  body main > section.projects-section,
  body main > section.services-section,
  body main > section.areas-section,
  body main > section.about-section,
  body main > section.blog-section,
  body main > section.resource-section,
  body main > section.contact-section,
  body main > section.contact-methods,
  body main > section.enquiry-section,
  body main > section.service-area,
  body main > section.blog-faq-section,
  body main > section.resources-section {
    padding-block: var(--dk-density-standard-tablet) !important;
  }

  body main > section[class*="intro"]:not(.hero),
  body main > section[class*="project"]:not([class*="hero"]):not([class*="header"]):not([class*="cta"]),
  body main > section[class*="story"]:not([class*="hero"]):not([class*="cta"]),
  body main > section[class*="coverage"],
  body main > section[class*="feature"]:not([class*="hero"]):not([class*="cta"]) {
    padding-block: var(--dk-density-feature-tablet) !important;
  }

  body main .section-head,
  body main .section-header,
  body main .service-section-header,
  body main .bathroom-section-header,
  body main .about-section-header,
  body main .areas-title-v11,
  body main .benefits-intro,
  body main .projects-section-header,
  body main .resource-section-header,
  body main .blog-section-header,
  body main .section-heading,
  body main .faq-library-head {
    margin-bottom: var(--dk-section-head-gap-tablet) !important;
  }

  body main .options-grid,
  body main .services-grid,
  body main .why-grid,
  body main .guides-grid,
  body main .project-grid,
  body main .projects-grid,
  body main .resource-grid,
  body main .blog-grid,
  body main .cards-grid,
  body main .faq-wrap,
  body main .faq-grid,
  body main .faq-library-panel,
  body main .process-row,
  body main .process-list,
  body main .features-grid,
  body main .areas-grid {
    gap: var(--dk-panel-gap-tablet) !important;
  }
}

@media (max-width: 768px) {
  body main > section.section:not(.hero):not(.final-cta):not([class*="final-cta"]),
  body main > section.dk-coverage,
  body main > section.projects-section,
  body main > section.services-section,
  body main > section.areas-section,
  body main > section.about-section,
  body main > section.blog-section,
  body main > section.resource-section,
  body main > section.contact-section,
  body main > section.contact-methods,
  body main > section.enquiry-section,
  body main > section.service-area,
  body main > section.blog-faq-section,
  body main > section.resources-section {
    padding-block: var(--dk-density-standard-mobile) !important;
  }

  body main > section[class*="intro"]:not(.hero),
  body main > section[class*="project"]:not([class*="hero"]):not([class*="header"]):not([class*="cta"]),
  body main > section[class*="story"]:not([class*="hero"]):not([class*="cta"]),
  body main > section[class*="coverage"],
  body main > section[class*="feature"]:not([class*="hero"]):not([class*="cta"]) {
    padding-block: var(--dk-density-feature-mobile) !important;
  }

  body main .section-head,
  body main .section-header,
  body main .service-section-header,
  body main .bathroom-section-header,
  body main .about-section-header,
  body main .areas-title-v11,
  body main .benefits-intro,
  body main .projects-section-header,
  body main .resource-section-header,
  body main .blog-section-header,
  body main .section-heading,
  body main .faq-library-head {
    margin-bottom: var(--dk-section-head-gap-mobile) !important;
  }

  body main .options-grid,
  body main .services-grid,
  body main .why-grid,
  body main .guides-grid,
  body main .project-grid,
  body main .projects-grid,
  body main .resource-grid,
  body main .blog-grid,
  body main .cards-grid,
  body main .faq-wrap,
  body main .faq-grid,
  body main .faq-library-panel,
  body main .process-row,
  body main .process-list,
  body main .features-grid,
  body main .areas-grid {
    gap: var(--dk-panel-gap-mobile) !important;
  }
}

@media (max-width: 640px) {
  body main > section[class*="faq"],
  body main > section[class*="process"],
  body main > section[class*="why"],
  body main > section[class*="options"],
  body main > section[class*="package"],
  body main > section[class*="pricing"] {
    padding-block: var(--dk-density-compact-mobile) !important;
  }
}
/* Shared FAQ library CTA used at the end of ordinary page FAQ sections. */
.dk-faq-all {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 32px;
  padding-inline: 24px;
}

html body main .dk-faq-all > .dk-faq-all__link {
  min-width: 193px;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #123047 !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(13, 27, 42, 0.12);
  font-family: "Manrope", "Noto Sans SC", sans-serif;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 750;
  text-align: center;
  text-decoration: none;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

html body[data-business="renovations"] main .dk-faq-all > .dk-faq-all__link {
  background: #d8a13f !important;
  color: #fff !important;
}

html body[data-business="granny-flats"] main .dk-faq-all > .dk-faq-all__link {
  background: #5e986b !important;
  color: #fff !important;
}

html body[data-business="new-builds"] main .dk-faq-all > .dk-faq-all__link {
  background: #8bc7ee !important;
  color: #123047 !important;
}

html body main .dk-faq-all > .dk-faq-all__link:hover,
html body main .dk-faq-all > .dk-faq-all__link:focus-visible {
  border-color: var(--dk-navy, #123047);
  background: #123047 !important;
  color: #fff !important;
  box-shadow: 0 16px 30px rgba(13, 27, 42, 0.2);
  transform: translateY(-2px);
}

.dk-faq-all__link:focus-visible {
  outline: 3px solid rgba(216, 161, 63, 0.42);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .dk-faq-all {
    margin-top: 28px;
    padding-inline: 16px;
  }

  .dk-faq-all__link {
    min-height: 50px;
    padding-inline: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dk-faq-all__link {
    transition: none;
  }
}