/* The whole-home reference uses a large, bold Ming-style title. */
:root { --k-main-title: clamp(44px, 3.7vw, 54px); }

body.k-design .k-hero h1,
body.k-design .k-heading h2,
body.k-design .k-equipment .k-mobile-composition > .k-heading h2,
body.k-design .k-belief-image h2,
body.k-design .m-belief-image h2,
body.k-design .k-faq-title h2,
body.k-design .k-booking .request-intro h2,
body.k-design .k-ending h2 {
  font-family: var(--k-serif);
  font-size: var(--k-main-title);
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: .025em;
}
body.k-design .k-faq-title h2 span { font-size: 1em; letter-spacing: inherit; }

@media (min-width: 601px) {
  /* Give the large type the same open width as the supplied reference. */
  .k-invisible { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 4%; }
  .k-daily { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 4%; }
  .k-booking { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5%; }
  .k-booking .request-intro { max-width: 600px; }

  /* Keep the supplied comparison plate, with its main title set as live text. */
  .k-comparison-desktop {
    display: grid;
    grid-template-columns: 25.4% 74.6%;
    align-items: stretch;
    background: #faf8f4;
  }
  .k-comparison-desktop .k-heading { align-self: center; padding: 4% 6% 4% 10%; }
  .k-comparison-desktop .k-heading h2 { margin: 0 0 26px; }
  .k-comparison-desktop .k-heading .k-lead { font-size: clamp(14px, 1.2vw, 19px); line-height: 1.95; }
  .k-comparison-desktop .k-comparison-art { width: 100%; height: 100%; aspect-ratio: 1143 / 1026; }

  /* The original desktop plates contain differently styled raster titles.
     Use their existing text and photo content with a live heading instead. */
  .k-equipment > .k-desktop-composition,
  .k-tech-panel > .k-desktop-composition,
  .k-after > .k-desktop-composition { display: none; }
  .k-equipment > .k-mobile-composition,
  .k-tech-panel > .k-mobile-composition,
  .k-after > .k-mobile-composition { display: block; }

  .k-equipment > .k-mobile-composition {
    position: relative;
    min-height: 720px;
    overflow: hidden;
    background: linear-gradient(120deg, #faf7f2, #eee8df);
    border-radius: 18px;
  }
  .k-equipment .k-mobile-composition > .k-heading { position: relative; z-index: 3; width: 58%; padding: 55px 0 0 6%; }
  .k-equipment .m-equipment-layout { position: relative; min-height: 570px; isolation: isolate; }
  .k-equipment .m-equipment-copy { position: relative; z-index: 2; width: 48%; display: grid; gap: 24px; padding: 25px 0 65px 6%; }
  .k-equipment .m-equipment-copy h3 { color: var(--k-blue); font-size: 19px; line-height: 1.6; padding-bottom: 8px; border-bottom: 1px solid #8eaac9; }
  .k-equipment .m-equipment-copy p { font-size: 15px; line-height: 1.8; }
  .k-equipment .m-equipment-machines { position: absolute; top: -120px; right: -1%; width: 61%; height: 680px; mask-image: linear-gradient(90deg, transparent, #000 19%); }
  .k-equipment .m-equipment-formula { position: absolute; bottom: 5px; right: 12%; width: 19%; height: 155px; }

  .k-tech-panel > .k-mobile-composition {
    display: grid;
    grid-template-columns: minmax(0, 55%) minmax(0, 45%);
    grid-template-rows: auto 1fr;
    min-height: 570px;
    overflow: hidden;
    background: #f4eee5;
  }
  .k-tech-panel .k-mobile-composition > .k-heading { grid-column: 1; grid-row: 1; padding: 65px 7% 15px 10%; }
  .k-tech-panel .k-heading .k-lead { font-size: 16px; line-height: 1.9; margin: 0; }
  .k-tech-panel .m-water-visual,
  .k-tech-panel .m-extraction-photo,
  .k-tech-panel .m-formula-photo { grid-column: 2; grid-row: 1 / 3; width: 100%; height: 100%; min-height: 570px; }
  .k-tech-panel .m-water-visual { position: relative; overflow: hidden; }
  .k-tech-panel .m-water-visual > .k-crop { width: 100%; height: 100%; position: absolute; inset: 0; }
  .k-tech-panel .m-water-features { display: none; }
  .k-tech-panel .m-feature-details { grid-column: 1; grid-row: 2; list-style: none; margin: 0; padding: 5px 10% 55px; }
  .k-tech-panel .m-feature-details li { font-size: 15px; line-height: 1.7; padding: 7px 0; }
  .k-tech-panel .m-feature-details strong { color: var(--k-blue); }
  .k-tech-panel .m-feature-details p { font-size: 14px; line-height: 1.75; }
  #panel-extraction > .k-mobile-composition { grid-template-columns: minmax(0, 45%) minmax(0, 55%); }
  #panel-extraction .m-extraction-photo { grid-column: 1; }
  #panel-extraction .k-heading,
  #panel-extraction .m-feature-details { grid-column: 2; }

  .k-after > .k-mobile-composition { display: grid; grid-template-columns: minmax(0, 55%) minmax(0, 45%); min-height: 580px; background: #f8f4ed; }
  .k-after .k-mobile-composition > .k-heading { align-self: center; padding: 50px 6%; }
  .k-after .m-after-photo { width: 100%; height: 100%; min-height: 580px; }
}

@media (min-width: 601px) and (max-width: 1200px) {
  .k-equipment .k-mobile-composition > .k-heading { width: 62%; padding-top: 38px; }
  .k-equipment .m-equipment-machines { top: -65px; height: 580px; }
  .k-equipment .m-equipment-copy { gap: 12px; }
  .k-tech-panel .k-mobile-composition > .k-heading { padding-top: 40px; }
}

@media (min-width: 601px) and (max-width: 900px) {
  .k-invisible, .k-daily { display: block; }
  .k-invisible .k-heading, .k-daily .k-heading { display: block; }
  .k-hidden-items, .k-daily-grid { margin-top: 32px; }
  .r-scope-heading, .r-package-heading { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
  .k-comparison-desktop { grid-template-columns: 35% 65%; }
  .k-equipment .k-mobile-composition > .k-heading { width: 100%; }
  .k-tech-panel > .k-mobile-composition,
  #panel-extraction > .k-mobile-composition,
  .k-after > .k-mobile-composition { grid-template-columns: minmax(0, 1fr); }
  .k-tech-panel .k-mobile-composition > .k-heading,
  #panel-extraction .k-heading { grid-column: 1; grid-row: 1; padding: 38px 7% 20px; }
  .k-tech-panel .m-water-visual,
  .k-tech-panel .m-extraction-photo,
  .k-tech-panel .m-formula-photo,
  #panel-extraction .m-extraction-photo { grid-column: 1; grid-row: 2; min-height: 350px; max-height: 430px; }
  .k-tech-panel .m-feature-details,
  #panel-extraction .m-feature-details { grid-column: 1; grid-row: 3; padding: 25px 7% 40px; }
  .k-after .k-mobile-composition > .k-heading { padding: 38px 7%; }
  .k-after .m-after-photo { min-height: 350px; }
  .k-booking { display: block; }
  .k-booking .request-intro { max-width: none; }
}

@media (min-width: 601px) and (max-width: 750px) {
  .r-purification-hero { display: block; }
  .r-purification-art { width: 78%; margin-left: auto; }
}

@media (max-width: 600px) {
  :root { --k-main-title: clamp(29px, 8.2vw, 34px); }
}