/* DK secondary-page Hero visual treatment. Geometry follows the live Kitchen reference. */
:root {
  --dk-service-hero-main-height: 763px;
  --dk-service-hero-rail-height: 87px;
}

[data-dk-hero] {
  --dk-hero-image-x: 68%;
  --dk-hero-image-y: 50%;
  --dk-hero-light-bg: rgba(250, 248, 245, 0.98);
  --dk-hero-light-scrim: none;
  --dk-hero-dark-scrim: none;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

[data-dk-hero] img,
[data-dk-hero] .hero-media {
  image-rendering: auto;
  transform: none !important;
  filter: none !important;
}

/* Custom Design: existing host background, sharper focal point and editorial fade. */
.cd-hero[data-dk-hero="light"] {
  --dk-hero-image-x: 74%;
  --dk-hero-image-y: 46%;
  --dk-hero-light-scrim: none;
  min-height: var(--dk-service-hero-main-height) !important;
  background-position: var(--dk-hero-image-x) var(--dk-hero-image-y) !important;
  background-size: cover !important;
}

.cd-hero[data-dk-hero="light"]::before {
  background: var(--dk-hero-light-scrim) !important;
}

.cd-hero[data-dk-hero="light"] .cd-hero__inner {
  min-height: var(--dk-service-hero-main-height) !important;
}

html body .cd-hero[data-dk-hero="light"] .cd-hero__copy h1,
html body .cd-hero[data-dk-hero="light"] .cd-hero__copy > p:not(.cd-eyebrow) {
  color: #123047 !important;
}

html body.cd-page main > #custom-design-hero.cd-hero[data-dk-hero="light"] h1,
html body.cd-page main > #custom-design-hero.cd-hero[data-dk-hero="light"] .cd-hero__copy > p:not(.cd-eyebrow) {
  color: #123047 !important;
}

html body .cd-hero[data-dk-hero="light"] .cd-hero__copy .cd-eyebrow {
  color: var(--business-accent, #3f816c) !important;
}

html body.cd-page main > #custom-design-hero.cd-hero[data-dk-hero="light"] .cd-hero__copy > p.cd-eyebrow {
  color: var(--business-accent, #3f816c) !important;
}

html body .cd-hero[data-dk-hero="light"] .cd-btn--secondary {
  border-color: rgba(18, 48, 71, 0.48) !important;
  background: rgba(255, 255, 255, 0.42) !important;
  color: #123047 !important;
}

html body.cd-page main > #custom-design-hero.cd-hero[data-dk-hero="light"] .cd-btn--secondary {
  border-color: rgba(18, 48, 71, 0.48) !important;
  background: rgba(255, 255, 255, 0.42) !important;
  color: #123047 !important;
}

/* Granny Flats landing: image and content remain in the approved DOM structure. */
.hero[data-dk-hero="light"] {
  --dk-hero-image-x: 72%;
  --dk-hero-image-y: 50%;
  --dk-hero-light-scrim: linear-gradient(
    90deg,
    rgba(250, 248, 245, 0.98) 0%,
    rgba(250, 248, 245, 0.92) 42%,
    rgba(250, 248, 245, 0.48) 62%,
    rgba(250, 248, 245, 0) 78%
  );
  min-height: var(--dk-service-hero-main-height) !important;
  background: #faf8f5;
}

html body .hero[data-dk-hero="light"] .hero-media {
  background-position: var(--dk-hero-image-x) var(--dk-hero-image-y) !important;
  filter: none !important;
}

.hero[data-dk-hero="light"] .hero-shade {
  background: var(--dk-hero-light-scrim) !important;
}

.hero[data-dk-hero="light"] .hero-copy,
.hero[data-dk-hero="light"] .hero-copy h1,
.hero[data-dk-hero="light"] .hero-copy > p:not(.eyebrow) {
  color: #123047 !important;
}

.hero[data-dk-hero="light"] .hero-copy h1 span {
  color: var(--business-accent, #3f816c) !important;
}

.hero[data-dk-hero="light"] .hero-copy .btn-outline {
  border-color: rgba(18, 48, 71, 0.48) !important;
  background: rgba(255, 255, 255, 0.42) !important;
  color: #123047 !important;
}

/* Bathroom: keep the dark editorial mode but reveal natural image colour to the right. */
.hero.hero--with-trust-rail[data-dk-hero="dark"] {
  --dk-hero-image-x: 66%;
  --dk-hero-image-y: 50%;
}

.hero.hero--with-trust-rail[data-dk-hero="dark"]::before {
  bottom: var(--dk-service-hero-rail-height) !important;
  background-position: var(--dk-hero-image-x) var(--dk-hero-image-y) !important;
  filter: none !important;
}

.hero.hero--with-trust-rail[data-dk-hero="dark"]::after {
  bottom: var(--dk-service-hero-rail-height) !important;
  background: var(--dk-hero-dark-scrim) !important;
}

/* New Builds: convert the approved split DOM into one full, sharp editorial image. */
.new-builds-hero[data-dk-hero="light"] {
  --dk-hero-image-x: 66%;
  --dk-hero-image-y: 48%;
  --dk-hero-light-scrim: none;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: var(--dk-service-hero-main-height) var(--dk-service-hero-rail-height) !important;
  min-height: calc(var(--dk-service-hero-main-height) + var(--dk-service-hero-rail-height)) !important;
  background: #faf8f5 !important;
}

.new-builds-hero[data-dk-hero="light"]::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 0 var(--dk-service-hero-rail-height);
  pointer-events: none;
  background: var(--dk-hero-light-scrim);
}

html:root body.new-builds-page #new-builds-hero.new-builds-hero[data-dk-hero="light"] .new-builds-hero__image-panel {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 0 var(--dk-service-hero-rail-height) !important;
  min-height: 0 !important;
  background: #faf8f5 !important;
}

html:root body.new-builds-page #new-builds-hero.new-builds-hero[data-dk-hero="light"] .new-builds-hero__image-panel::before {
  content: none !important;
}

html:root body.new-builds-page #new-builds-hero.new-builds-hero[data-dk-hero="light"] .new-builds-hero__image-panel img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: var(--dk-hero-image-x) var(--dk-hero-image-y) !important;
  filter: none !important;
}

html:root body.new-builds-page #new-builds-hero.new-builds-hero[data-dk-hero="light"] .new-builds-hero__copy-panel {
  position: relative !important;
  z-index: 2 !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-height: var(--dk-service-hero-main-height) !important;
  background: transparent !important;
}

html:root body.new-builds-page #new-builds-hero.new-builds-hero[data-dk-hero="light"] .new-builds-hero__copy {
  width: min(620px, calc(100% - 88px)) !important;
  max-width: 46% !important;
  margin-inline: max(44px, calc((100vw - 1400px) / 2)) auto !important;
}

.new-builds-hero[data-dk-hero="light"] .new-builds-hero__copy,
.new-builds-hero[data-dk-hero="light"] .new-builds-hero__copy h1,
.new-builds-hero[data-dk-hero="light"] .new-builds-hero__copy > p:not(.new-builds-hero__eyebrow) {
  color: #123047 !important;
}

.new-builds-hero[data-dk-hero="light"] .new-builds-hero__copy h1 span {
  color: var(--business-accent, #679dbb) !important;
}

.new-builds-hero[data-dk-hero="light"] .new-builds-button--outline {
  border-color: rgba(18, 48, 71, 0.48) !important;
  background: rgba(255, 255, 255, 0.42) !important;
  color: #123047 !important;
}

.new-builds-hero[data-dk-hero="light"] .new-builds-trust-rail {
  position: relative !important;
  z-index: 3 !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
}

@media (max-width: 1024px) {
  html:root body.new-builds-page #new-builds-hero.new-builds-hero[data-dk-hero="light"] .new-builds-hero__copy {
    width: min(560px, calc(100% - 64px)) !important;
    max-width: 52% !important;
    margin-left: 32px !important;
  }
}

@media (max-width: 768px) {
  [data-dk-hero] {
    --dk-hero-light-scrim: none;
    --dk-hero-dark-scrim: none;
  }

  .cd-hero[data-dk-hero="light"],
  .cd-hero[data-dk-hero="light"] .cd-hero__inner,
  .hero[data-dk-hero="light"] {
    min-height: 0 !important;
  }

  .hero[data-dk-hero="light"] {
    --dk-hero-light-scrim: linear-gradient(
      180deg,
      rgba(250, 248, 245, 0.97) 0%,
      rgba(250, 248, 245, 0.94) 54%,
      rgba(250, 248, 245, 0.76) 72%,
      rgba(250, 248, 245, 0.16) 100%
    );
  }

  .cd-hero[data-dk-hero="light"] {
    background-position: var(--dk-hero-image-x) top !important;
  }

  .hero[data-dk-hero="light"] .hero-media {
    background-position: var(--dk-hero-image-x) top !important;
  }

  .hero.hero--with-trust-rail[data-dk-hero="dark"]::before,
  .hero.hero--with-trust-rail[data-dk-hero="dark"]::after {
    bottom: 0 !important;
  }

  .new-builds-hero[data-dk-hero="light"] {
    display: grid !important;
    grid-template-rows: minmax(640px, auto) auto !important;
    min-height: 0 !important;
  }

  html body.new-builds-page.new-builds-family #main-content > #new-builds-hero.new-builds-hero[data-dk-hero="light"] {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(640px, auto) auto !important;
    min-height: 0 !important;
  }

  .new-builds-hero[data-dk-hero="light"]::before,
  html:root body.new-builds-page #new-builds-hero.new-builds-hero[data-dk-hero="light"] .new-builds-hero__image-panel {
    inset: 0 0 auto !important;
    height: 640px !important;
  }

  html body.new-builds-page.new-builds-family #main-content > #new-builds-hero.new-builds-hero[data-dk-hero="light"] .new-builds-hero__image-panel {
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 640px !important;
  }

  html:root body.new-builds-page #new-builds-hero.new-builds-hero[data-dk-hero="light"] .new-builds-hero__copy-panel {
    min-height: 640px !important;
    align-items: end !important;
  }

  html body.new-builds-page.new-builds-family #main-content > #new-builds-hero.new-builds-hero[data-dk-hero="light"] .new-builds-hero__copy-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: 640px !important;
  }

  html:root body.new-builds-page #new-builds-hero.new-builds-hero[data-dk-hero="light"] .new-builds-hero__copy {
    width: calc(100% - 40px) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 210px 0 42px !important;
  }

  .new-builds-hero[data-dk-hero="light"] .new-builds-trust-rail {
    grid-row: 2 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-dk-hero],
  [data-dk-hero] * {
    scroll-behavior: auto;
  }
}

/* Final New Builds pilot lock: the Hero image is the full visual field, not a split side panel. */
@media (min-width: 769px) {
  html:root:root:root:root:root:root:root:root body.new-builds-page.new-builds-family[data-business="new-builds"] #main-content > #new-builds-hero.new-builds-hero[data-dk-hero="light"] {
    position: relative !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: var(--dk-service-hero-main-height) var(--dk-service-hero-rail-height) !important;
    min-height: calc(var(--dk-service-hero-main-height) + var(--dk-service-hero-rail-height)) !important;
    background: var(--business-accent-soft, #eef6fb) !important;
  }

  html:root:root:root:root:root:root:root:root body.new-builds-page.new-builds-family[data-business="new-builds"] #main-content > #new-builds-hero.new-builds-hero[data-dk-hero="light"] .new-builds-hero__image-panel {
    position: absolute !important;
    inset: 0 0 var(--dk-service-hero-rail-height) 0 !important;
    z-index: 0 !important;
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: var(--dk-service-hero-main-height) !important;
    min-width: 0 !important;
    min-height: var(--dk-service-hero-main-height) !important;
    max-height: var(--dk-service-hero-main-height) !important;
    overflow: hidden !important;
    background: var(--business-accent-soft, #eef6fb) !important;
  }

  html:root:root:root:root:root:root:root:root body.new-builds-page.new-builds-family[data-business="new-builds"] #main-content > #new-builds-hero.new-builds-hero[data-dk-hero="light"] .new-builds-hero__image-panel img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: 64% 50% !important;
    filter: none !important;
  }

  html:root:root:root:root:root:root:root:root body.new-builds-page.new-builds-family[data-business="new-builds"] #main-content > #new-builds-hero.new-builds-hero[data-dk-hero="light"] .new-builds-hero__copy-panel {
    position: relative !important;
    z-index: 2 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-height: var(--dk-service-hero-main-height) !important;
    background: transparent !important;
  }

  html:root:root:root:root:root:root:root:root body.new-builds-page.new-builds-family[data-business="new-builds"] #main-content > #new-builds-hero.new-builds-hero[data-dk-hero="light"] .new-builds-hero__copy {
    width: min(610px, calc(100% - 88px)) !important;
    max-width: 46% !important;
    margin-inline: max(44px, calc((100vw - 1400px) / 2)) auto !important;
    padding: 34px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 26px 70px rgba(18, 48, 71, 0.16) !important;
  }
}