/* Designer Collection page typography and Granny Flats colour alignment.
   Loaded after the shared systems so legacy page rules cannot reintroduce
   mismatched title sizes, CTA type or non-Granny accent colours. */

body.dc-page main > section:not(.dc-hero) .dc-eyebrow {
  font-family: Manrope, "Noto Sans SC", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.11em !important;
}

body.dc-page main :is(
  .dc-catalogue .dc-section-heading h2,
  .dc-feature h2,
  .dc-process .dk-process-system__header h2,
  .dc-faq h2
) {
  font-family: Manrope, "Noto Sans SC", Arial, sans-serif !important;
  font-size: clamp(38px, 3.3vw, 48px) !important;
  font-weight: 700 !important;
  line-height: 1.14 !important;
  letter-spacing: -0.025em !important;
}

body.dc-page main .dc-brochure h2 {
  font-family: Manrope, "Noto Sans SC", Arial, sans-serif !important;
  font-size: clamp(34px, 2.8vw, 42px) !important;
  font-weight: 700 !important;
  line-height: 1.14 !important;
  letter-spacing: -0.025em !important;
}

body.dc-page main .dc-brochure .dc-eyebrow {
  color: var(--business-accent-on-dark, #a8cfbf) !important;
}

html:root:root:root:root body.dc-page main > section.dc-feature button.dc-feature-cta,
html:root:root:root:root body.dc-page main > section.dc-brochure button.dc-btn {
  font-family: Manrope, "Noto Sans SC", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.03em !important;
}

html:root:root:root:root body.dc-page main > section#designer-collection-faq.dc-faq {
  background-color: var(--business-accent-soft, #eef6f2) !important;
  background-image: none !important;
}

/* Content-aware proof rail: long copy receives room without crowding the
   following icon, while compact items keep only the width they need. */
@media (min-width: 1400px) {
  html:root:root:root:root:root body.dc-page main > section.gf-credential-rail.dk-proof-rail > .dk-proof-rail__inner {
    grid-template-columns: 1.15fr 1.05fr 0.9fr 1.05fr 1.15fr !important;
  }

  html:root:root:root:root:root body.dc-page main > section.gf-credential-rail.dk-proof-rail .dk-proof-rail__item {
    gap: 9px !important;
    padding-inline: 10px !important;
  }

  html:root:root:root:root:root body.dc-page main > section.gf-credential-rail.dk-proof-rail .dk-proof-rail__icon {
    width: 26px !important;
    height: 26px !important;
    flex-basis: 26px !important;
  }

  html:root:root:root:root:root body.dc-page main > section.gf-credential-rail.dk-proof-rail .dk-proof-rail__copy {
    gap: 2px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root body.dc-page main > section.gf-credential-rail.dk-proof-rail .dk-proof-rail__copy > strong {
    font-size: 15px !important;
    line-height: 1.22 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root body.dc-page main > section.gf-credential-rail.dk-proof-rail .dk-proof-rail__copy > span {
    font-size: 13px !important;
    line-height: 1.28 !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 1181px) and (max-width: 1399px) {
  html:root:root:root:root:root body.dc-page main > section.gf-credential-rail.dk-proof-rail > .dk-proof-rail__inner {
    display: flex !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  html:root:root:root:root:root body.dc-page main > section.gf-credential-rail.dk-proof-rail > .dk-proof-rail__inner::-webkit-scrollbar {
    display: none;
  }

  html:root:root:root:root:root body.dc-page main > section.gf-credential-rail.dk-proof-rail .dk-proof-rail__item:nth-child(1) { flex: 0 0 310px !important; }
  html:root:root:root:root:root body.dc-page main > section.gf-credential-rail.dk-proof-rail .dk-proof-rail__item:nth-child(2) { flex: 0 0 270px !important; }
  html:root:root:root:root:root body.dc-page main > section.gf-credential-rail.dk-proof-rail .dk-proof-rail__item:nth-child(3) { flex: 0 0 250px !important; }
  html:root:root:root:root:root body.dc-page main > section.gf-credential-rail.dk-proof-rail .dk-proof-rail__item:nth-child(4) { flex: 0 0 280px !important; }
  html:root:root:root:root:root body.dc-page main > section.gf-credential-rail.dk-proof-rail .dk-proof-rail__item:nth-child(5) { flex: 0 0 300px !important; }

  html:root:root:root:root:root body.dc-page main > section.gf-credential-rail.dk-proof-rail .dk-proof-rail__copy > span {
    white-space: nowrap !important;
  }
}

@media (min-width: 769px) {
  html:root:root:root:root:root:root body.dc-page main section.dc-process.dk-process-system .dk-process-system__header {
    width: min(1050px, 100%) !important;
  }

  html:root:root:root:root:root:root body.dc-page main section.dc-process.dk-process-system .dk-process-system__header .dc-process__subtitle {
    width: min(1000px, 100%) !important;
    max-width: 1000px !important;
  }
}

@media (max-width: 768px) {
  body.dc-page main :is(
    .dc-catalogue .dc-section-heading h2,
    .dc-feature h2,
    .dc-process .dk-process-system__header h2,
    .dc-faq h2
  ) {
    font-size: clamp(31px, 9vw, 36px) !important;
  }

  body.dc-page main .dc-brochure h2 {
    font-size: clamp(30px, 8vw, 34px) !important;
  }
}

/* Final page-local fit lock: keep the proof rail as a true five-column row
   on tablet/desktop, and let each subtitle wrap inside its own cell. */
html:root:root:root:root:root:root:root:root:root:root:root:root:root body.dc-page main > section.dc-hero .dc-btn {
  font-size: 15px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.03em !important;
}

@media (min-width: 769px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root body.dc-page main > section.gf-credential-rail.dk-proof-rail > .dk-proof-rail__inner {
    display: grid !important;
    grid-template-columns: 1.18fr 1.05fr 0.92fr 1.08fr 1.17fr !important;
    overflow: visible !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root body.dc-page main > section.gf-credential-rail.dk-proof-rail .dk-proof-rail__item {
    min-width: 0 !important;
    gap: 9px !important;
    padding-inline: 10px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root body.dc-page main > section.gf-credential-rail.dk-proof-rail .dk-proof-rail__icon {
    width: 26px !important;
    height: 26px !important;
    flex-basis: 26px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root body.dc-page main > section.gf-credential-rail.dk-proof-rail .dk-proof-rail__copy {
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 2px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root body.dc-page main > section.gf-credential-rail.dk-proof-rail .dk-proof-rail__copy > strong {
    font-size: 15px !important;
    line-height: 1.22 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root body.dc-page main > section.gf-credential-rail.dk-proof-rail .dk-proof-rail__copy > span {
    max-width: 100% !important;
    font-size: 13px !important;
    line-height: 1.28 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
  }
}

@media (min-width: 1025px) and (max-width: 1399px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root body.dc-page main > section.gf-credential-rail.dk-proof-rail,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root body.dc-page main > section.gf-credential-rail.dk-proof-rail > .dk-proof-rail__inner,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root body.dc-page main > section.gf-credential-rail.dk-proof-rail .dk-proof-rail__item {
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root body.dc-page main > section.gf-credential-rail.dk-proof-rail,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root body.dc-page main > section.gf-credential-rail.dk-proof-rail > .dk-proof-rail__inner,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root body.dc-page main > section.gf-credential-rail.dk-proof-rail .dk-proof-rail__item {
    height: auto !important;
    min-height: 112px !important;
    max-height: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root body.dc-page main > section.gf-credential-rail.dk-proof-rail .dk-proof-rail__item {
    gap: 7px !important;
    padding: 12px 8px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root body.dc-page main > section.gf-credential-rail.dk-proof-rail .dk-proof-rail__icon {
    width: 24px !important;
    height: 24px !important;
    flex-basis: 24px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root body.dc-page main > section.gf-credential-rail.dk-proof-rail .dk-proof-rail__copy > strong {
    font-size: 13.5px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root body.dc-page main > section.gf-credential-rail.dk-proof-rail .dk-proof-rail__copy > span {
    font-size: 12px !important;
  }
}