/* =========================================================
   MEZZO GLOBAL HERO CONTROL
   ---------------------------------------------------------
   This file is loaded AFTER the main child theme CSS and
   old inline patches, so it becomes the single final control
   for all hero banners.

   To change every template hero next time, edit the variables
   below only. Home, Projects, Services, Curtain Cleaning,
   About Us, Contact, Curtains, Blinds, Wallpaper, Legal pages,
   project archive and single project hero banners will follow.
   ========================================================= */

:root {
  /* Background / colour - matches the Home hero design */
  --home-hero-bg-standard:
    radial-gradient(circle at 12% 18%, rgba(201,154,94,0.26), transparent 25%),
    radial-gradient(circle at 84% 22%, rgba(160,82,45,0.22), transparent 26%),
    linear-gradient(135deg, #180b06 0%, #241209 42%, #4b2114 100%);
  --home-hero-grid-line: rgba(255,255,255,0.025);
  --home-hero-heading-color: var(--text-white, #ffffff);
  --home-hero-subheading-color: var(--text-light, rgba(255,248,241,0.72));
  --home-hero-eyebrow-color: var(--text-light, rgba(255,248,241,0.72));
  --home-hero-emphasis-color: var(--c-primary-lt, #D28A61);

  /* Desktop hero spacing */
  --home-hero-padding-x-desktop: 5vw;
  --home-hero-padding-top-desktop: clamp(6.4rem, 5.6vw, 8.4rem);
  --home-hero-padding-bottom-desktop: clamp(5rem, 5vw, 7rem);
  --home-hero-inner-min-height-desktop: clamp(32rem, 34vw, 44rem);
  --home-hero-grid-gap-desktop: clamp(3rem, 5vw, 7rem);

  /* Hero typography */
  --home-hero-eyebrow-font-size: var(--fs-eyebrow, 1.15rem);
  --home-hero-eyebrow-line-height: 1.4;
  --home-hero-eyebrow-letter-spacing: 0.28rem;
  --home-hero-eyebrow-margin-bottom: 2rem;
  --home-hero-eyebrow-line-width: 4rem;

  --home-hero-title-size-desktop: var(--fs-hero-title-desktop, 6.2rem);
  --home-hero-title-size-tablet: var(--fs-hero-title-tablet, 5.5rem);
  --home-hero-title-size-mobile: var(--fs-hero-title-mobile, 4.6rem);
  --home-hero-title-line-height-desktop: 0.95;
  --home-hero-title-line-height-tablet: 0.98;
  --home-hero-title-line-height-mobile: 1.04;
  --home-hero-title-letter-spacing: -0.06rem;
  --home-hero-title-margin-bottom: 2.4rem;

  --home-hero-subheading-size: clamp(1.62rem, 1.35vw, 1.86rem);
  --home-hero-subheading-size-mobile: 1.58rem;
  --home-hero-subheading-line-height: 1.8;
  --home-hero-subheading-line-height-mobile: 1.75;
  --home-hero-subheading-margin-bottom: 3rem;

  /* Home hero benefit / stat / button spacing */
  --home-hero-benefits-margin-top: -1rem;
  --home-hero-benefits-gap: 1rem;
  --home-hero-benefits-to-stats-gap-desktop: 5.6rem;
  --home-hero-benefits-to-stats-gap-tablet: 5.8rem;
  --home-hero-benefits-to-stats-gap-mobile: 6rem;
  --home-hero-stats-to-button-gap-desktop: 3.6rem;
  --home-hero-stats-to-button-gap-tablet: 3.8rem;
  --home-hero-stats-to-button-gap-mobile: 4rem;

  /* Inner hero button */
  --home-hero-button-margin-top: 3rem;
  --home-hero-button-min-height: 5.2rem;
  --home-hero-button-padding-y: 1.35rem;
  --home-hero-button-padding-x: 2.8rem;
  --home-hero-button-bg: var(--c-wa, #25D366);
  --home-hero-button-bg-hover: #1da851;

  /* Tablet / mobile hero spacing */
  --home-hero-padding-top-tablet: 5.2rem;
  --home-hero-padding-bottom-tablet: 6.4rem;
  --home-hero-inner-min-height-tablet: clamp(31rem, 42vw, 42rem);

  --home-hero-padding-top-mobile: 4.2rem;
  --home-hero-padding-bottom-mobile: 6rem;
  --home-hero-inner-min-height-mobile: clamp(30rem, 70vw, 38rem);
  --home-hero-mobile-side-padding: 1.8rem;
}

/* Reset older hero spacing patches so every hero follows the global variables above. */
html body .hero-content,
html body .hero-banner .hero-content,
html body .mezzo-hero .hero-content,
html body .home-hero .hero-content,
html body .mz-archive-hero-inner,
html body .mz-project-hero-inner {
  transform: none !important;
}

/* Shared hero shell */
html body .hero,
html body .inner-page-hero,
html body .product-page-hero,
html body .contact-hero,
html body .legal-hero.inner-page-hero,
html body .mz-archive-hero,
html body .mz-project-hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  color: var(--home-hero-heading-color) !important;
  background: var(--home-hero-bg-standard) !important;
  padding-top: var(--home-hero-padding-top-desktop) !important;
  padding-right: var(--home-hero-padding-x-desktop) !important;
  padding-bottom: var(--home-hero-padding-bottom-desktop) !important;
  padding-left: var(--home-hero-padding-x-desktop) !important;
  display: flex !important;
  align-items: center !important;
}

html body .hero {
  min-height: 100svh !important;
}

html body .inner-page-hero,
html body .product-page-hero,
html body .contact-hero,
html body .legal-hero.inner-page-hero,
html body .mz-archive-hero,
html body .mz-project-hero {
  min-height: var(--home-hero-inner-min-height-desktop) !important;
  text-align: center !important;
}

html body .hero::before,
html body .inner-page-hero::before,
html body .product-page-hero::before,
html body .contact-hero::before,
html body .legal-hero.inner-page-hero::before,
html body .mz-archive-hero::before,
html body .mz-project-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 7rem,
      var(--home-hero-grid-line) 7rem,
      var(--home-hero-grid-line) 7.15rem
    ) !important;
  pointer-events: none !important;
  z-index: -2 !important;
}

html body .hero::after,
html body .inner-page-hero::after,
html body .product-page-hero::after,
html body .contact-hero::after,
html body .legal-hero.inner-page-hero::after,
html body .mz-archive-hero::after,
html body .mz-project-hero::after {
  content: "" !important;
  position: absolute !important;
  width: 64rem !important;
  height: 64rem !important;
  right: -18rem !important;
  bottom: -20rem !important;
  border-radius: 50% !important;
  background: rgba(201,154,94,0.16) !important;
  filter: blur(1px) !important;
  pointer-events: none !important;
  z-index: -2 !important;
}

/* Shared hero containers */
html body .hero .hero-grid {
  width: min(118rem, 100%) !important;
  margin: 0 auto !important;
  gap: var(--home-hero-grid-gap-desktop) !important;
  align-items: center !important;
}

html body .inner-page-hero .container,
html body .product-page-hero .container,
html body .contact-hero .container,
html body .legal-hero.inner-page-hero .container,
html body .mz-archive-hero-inner,
html body .mz-project-hero-inner {
  width: min(88rem, 100%) !important;
  max-width: 88rem !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 1 !important;
  text-align: center !important;
}

/* Shared hero eyebrow */
html body .hero .eyebrow,
html body .inner-page-hero .container > span:not(.emphasis-wavy),
html body .product-page-hero .container > span:not(.emphasis-wavy),
html body .contact-hero .container > span:not(.emphasis-wavy),
html body .legal-hero.inner-page-hero .container > span:not(.emphasis-wavy),
html body .mz-archive-eyebrow,
html body .mz-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1rem !important;
  color: var(--home-hero-eyebrow-color) !important;
  -webkit-text-fill-color: var(--home-hero-eyebrow-color) !important;
  font-family: var(--font-body, Raleway, sans-serif) !important;
  font-size: var(--home-hero-eyebrow-font-size) !important;
  line-height: var(--home-hero-eyebrow-line-height) !important;
  font-weight: 800 !important;
  letter-spacing: var(--home-hero-eyebrow-letter-spacing) !important;
  text-transform: uppercase !important;
  margin: 0 auto var(--home-hero-eyebrow-margin-bottom) !important;
}

html body .hero .eyebrow::before,
html body .inner-page-hero .container > span:not(.emphasis-wavy)::before,
html body .product-page-hero .container > span:not(.emphasis-wavy)::before,
html body .contact-hero .container > span:not(.emphasis-wavy)::before,
html body .legal-hero.inner-page-hero .container > span:not(.emphasis-wavy)::before,
html body .mz-archive-eyebrow::before,
html body .mz-eyebrow::before {
  content: "" !important;
  width: var(--home-hero-eyebrow-line-width) !important;
  height: 0.1rem !important;
  background: var(--c-gold, #C99A5E) !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
}

/* Shared hero heading */
html body .hero .hero-copy h1,
html body .hero h1.hero-animate,
html body .inner-page-hero h1,
html body .product-page-hero h1,
html body .contact-hero h1,
html body .legal-hero.inner-page-hero h1,
html body .mz-archive-hero h1,
html body .mz-project-hero h1 {
  width: min(88rem, 100%) !important;
  max-width: 88rem !important;
  margin: 0 auto var(--home-hero-title-margin-bottom) !important;
  color: var(--home-hero-heading-color) !important;
  -webkit-text-fill-color: var(--home-hero-heading-color) !important;
  font-family: var(--font-heading, "Cormorant Garamond", serif) !important;
  font-size: var(--home-hero-title-size-desktop) !important;
  line-height: var(--home-hero-title-line-height-desktop) !important;
  letter-spacing: var(--home-hero-title-letter-spacing) !important;
  font-weight: 700 !important;
}

html body .hero h1 em,
html body .inner-page-hero h1 em,
html body .product-page-hero h1 em,
html body .contact-hero h1 em,
html body .legal-hero.inner-page-hero h1 em,
html body .mz-archive-hero h1 em,
html body .mz-project-hero h1 em {
  color: var(--home-hero-emphasis-color) !important;
  -webkit-text-fill-color: var(--home-hero-emphasis-color) !important;
  font-style: italic !important;
}

/* Shared hero paragraph/subheading */
html body .hero .hero-copy p,
html body .inner-page-hero p,
html body .product-page-hero p,
html body .contact-hero p,
html body .legal-hero.inner-page-hero p,
html body .mz-archive-hero p,
html body .mz-project-hero p {
  max-width: 72rem !important;
  margin: 0 auto var(--home-hero-subheading-margin-bottom) !important;
  color: var(--home-hero-subheading-color) !important;
  -webkit-text-fill-color: var(--home-hero-subheading-color) !important;
  font-family: var(--font-body, Raleway, sans-serif) !important;
  font-size: var(--home-hero-subheading-size) !important;
  line-height: var(--home-hero-subheading-line-height) !important;
  font-weight: 500 !important;
}

/* Home hero checklist / stats spacing */
html body .hero .hero-benefits-wrap,
html body.home .hero .hero-benefits-wrap,
html body.front-page .hero .hero-benefits-wrap,
html body.page-template-template-home .hero .hero-benefits-wrap {
  display: block !important;
  margin-top: 0 !important;
  margin-bottom: var(--home-hero-benefits-to-stats-gap-desktop) !important;
  padding-bottom: 0 !important;
}

html body .hero .hero-benefits,
html body.home .hero .hero-benefits,
html body.front-page .hero .hero-benefits,
html body.page-template-template-home .hero .hero-benefits {
  gap: var(--home-hero-benefits-gap) !important;
  margin: var(--home-hero-benefits-margin-top) 0 0 !important;
}

html body .hero .hero-benefits li:last-child,
html body.home .hero .hero-benefits li:last-child,
html body.front-page .hero .hero-benefits li:last-child,
html body.page-template-template-home .hero .hero-benefits li:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

html body .hero .hero-trust,
html body.home .hero .hero-trust,
html body.front-page .hero .hero-trust,
html body.page-template-template-home .hero .hero-trust {
  margin-top: 0 !important;
  margin-bottom: var(--home-hero-stats-to-button-gap-desktop) !important;
}

html body .hero .hero-actions-after-trust,
html body.home .hero .hero-actions-after-trust,
html body.front-page .hero .hero-actions-after-trust,
html body.page-template-template-home .hero .hero-actions-after-trust {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Inner hero buttons follow Home CTA design */
html body .inner-page-hero .btn,
html body .product-page-hero .btn,
html body .contact-hero .btn,
html body .legal-hero.inner-page-hero .btn,
html body .mz-archive-hero .btn,
html body .mz-project-hero .btn,
html body .inner-hero-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: var(--home-hero-button-min-height) !important;
  padding: var(--home-hero-button-padding-y) var(--home-hero-button-padding-x) !important;
  margin-top: var(--home-hero-button-margin-top) !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: var(--home-hero-button-bg) !important;
  color: var(--text-white, #ffffff) !important;
  -webkit-text-fill-color: var(--text-white, #ffffff) !important;
  font-family: var(--font-body, Raleway, sans-serif) !important;
  font-size: var(--fs-button, 1.35rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0.06rem !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  box-shadow: 0 1.4rem 3rem rgba(37, 211, 102, 0.26) !important;
  transition: transform 0.24s ease, box-shadow 0.24s ease, background 0.24s ease !important;
}

html body .inner-page-hero .btn:hover,
html body .product-page-hero .btn:hover,
html body .contact-hero .btn:hover,
html body .legal-hero.inner-page-hero .btn:hover,
html body .mz-archive-hero .btn:hover,
html body .mz-project-hero .btn:hover,
html body .inner-hero-btn:hover,
html body .inner-page-hero .btn:focus-visible,
html body .product-page-hero .btn:focus-visible,
html body .contact-hero .btn:focus-visible,
html body .legal-hero.inner-page-hero .btn:focus-visible,
html body .mz-archive-hero .btn:focus-visible,
html body .mz-project-hero .btn:focus-visible,
html body .inner-hero-btn:focus-visible {
  background: var(--home-hero-button-bg-hover) !important;
  color: var(--text-white, #ffffff) !important;
  -webkit-text-fill-color: var(--text-white, #ffffff) !important;
  transform: translateY(-0.25rem) scale(1.02) !important;
  box-shadow: 0 1.8rem 3.8rem rgba(37, 211, 102, 0.34) !important;
  outline: none !important;
}

@media (max-width: 1080px) {
  html body .hero,
  html body .inner-page-hero,
  html body .product-page-hero,
  html body .contact-hero,
  html body .legal-hero.inner-page-hero,
  html body .mz-archive-hero,
  html body .mz-project-hero {
    padding-top: var(--home-hero-padding-top-tablet) !important;
    padding-right: 4vw !important;
    padding-bottom: var(--home-hero-padding-bottom-tablet) !important;
    padding-left: 4vw !important;
  }

  html body .inner-page-hero,
  html body .product-page-hero,
  html body .contact-hero,
  html body .legal-hero.inner-page-hero,
  html body .mz-archive-hero,
  html body .mz-project-hero {
    min-height: var(--home-hero-inner-min-height-tablet) !important;
  }

  html body .hero .hero-grid {
    gap: 3.6rem !important;
  }

  html body .hero .hero-copy h1,
  html body .hero h1.hero-animate,
  html body .inner-page-hero h1,
  html body .product-page-hero h1,
  html body .contact-hero h1,
  html body .legal-hero.inner-page-hero h1,
  html body .mz-archive-hero h1,
  html body .mz-project-hero h1 {
    font-size: var(--home-hero-title-size-tablet) !important;
    line-height: var(--home-hero-title-line-height-tablet) !important;
  }

  html body .hero .hero-benefits-wrap,
  html body.home .hero .hero-benefits-wrap,
  html body.front-page .hero .hero-benefits-wrap,
  html body.page-template-template-home .hero .hero-benefits-wrap {
    margin-bottom: var(--home-hero-benefits-to-stats-gap-tablet) !important;
  }

  html body .hero .hero-trust,
  html body.home .hero .hero-trust,
  html body.front-page .hero .hero-trust,
  html body.page-template-template-home .hero .hero-trust {
    margin-bottom: var(--home-hero-stats-to-button-gap-tablet) !important;
  }
}

@media (max-width: 767px) {
  html body .hero,
  html body .inner-page-hero,
  html body .product-page-hero,
  html body .contact-hero,
  html body .legal-hero.inner-page-hero,
  html body .mz-archive-hero,
  html body .mz-project-hero {
    padding-top: var(--home-hero-padding-top-mobile) !important;
    padding-right: var(--home-hero-mobile-side-padding) !important;
    padding-bottom: var(--home-hero-padding-bottom-mobile) !important;
    padding-left: var(--home-hero-mobile-side-padding) !important;
  }

  html body .inner-page-hero,
  html body .product-page-hero,
  html body .contact-hero,
  html body .legal-hero.inner-page-hero,
  html body .mz-archive-hero,
  html body .mz-project-hero {
    min-height: var(--home-hero-inner-min-height-mobile) !important;
  }

  html body .hero .hero-grid {
    gap: 2.8rem !important;
  }

  html body .hero .eyebrow,
  html body .inner-page-hero .container > span:not(.emphasis-wavy),
  html body .product-page-hero .container > span:not(.emphasis-wavy),
  html body .contact-hero .container > span:not(.emphasis-wavy),
  html body .legal-hero.inner-page-hero .container > span:not(.emphasis-wavy),
  html body .mz-archive-eyebrow,
  html body .mz-eyebrow {
    font-size: 1.08rem !important;
    letter-spacing: 0.22rem !important;
    gap: 0.8rem !important;
    margin-bottom: 1.6rem !important;
  }

  html body .hero .eyebrow::before,
  html body .inner-page-hero .container > span:not(.emphasis-wavy)::before,
  html body .product-page-hero .container > span:not(.emphasis-wavy)::before,
  html body .contact-hero .container > span:not(.emphasis-wavy)::before,
  html body .legal-hero.inner-page-hero .container > span:not(.emphasis-wavy)::before,
  html body .mz-archive-eyebrow::before,
  html body .mz-eyebrow::before {
    width: 3rem !important;
  }

  html body .hero .hero-copy h1,
  html body .hero h1.hero-animate,
  html body .inner-page-hero h1,
  html body .product-page-hero h1,
  html body .contact-hero h1,
  html body .legal-hero.inner-page-hero h1,
  html body .mz-archive-hero h1,
  html body .mz-project-hero h1 {
    font-size: var(--home-hero-title-size-mobile) !important;
    line-height: var(--home-hero-title-line-height-mobile) !important;
    letter-spacing: -0.03rem !important;
    margin-bottom: 1.8rem !important;
  }

  html body .hero .hero-copy p,
  html body .inner-page-hero p,
  html body .product-page-hero p,
  html body .contact-hero p,
  html body .legal-hero.inner-page-hero p,
  html body .mz-archive-hero p,
  html body .mz-project-hero p {
    max-width: 100% !important;
    font-size: var(--home-hero-subheading-size-mobile) !important;
    line-height: var(--home-hero-subheading-line-height-mobile) !important;
  }

  html body .hero .hero-benefits-wrap,
  html body.home .hero .hero-benefits-wrap,
  html body.front-page .hero .hero-benefits-wrap,
  html body.page-template-template-home .hero .hero-benefits-wrap {
    width: 100% !important;
    margin-bottom: var(--home-hero-benefits-to-stats-gap-mobile) !important;
  }

  html body .hero .hero-trust,
  html body.home .hero .hero-trust,
  html body.front-page .hero .hero-trust,
  html body.page-template-template-home .hero .hero-trust {
    margin-bottom: var(--home-hero-stats-to-button-gap-mobile) !important;
  }

  html body .inner-page-hero .btn,
  html body .product-page-hero .btn,
  html body .contact-hero .btn,
  html body .legal-hero.inner-page-hero .btn,
  html body .mz-archive-hero .btn,
  html body .mz-project-hero .btn,
  html body .inner-hero-btn {
    width: min(100%, 34rem) !important;
    min-height: 5rem !important;
    margin-top: 2.4rem !important;
    padding: 1.25rem 2rem !important;
    font-size: 1.28rem !important;
    white-space: normal !important;
    text-align: center !important;
  }
}

@media (max-width: 380px) {
  html body .hero .hero-copy h1,
  html body .hero h1.hero-animate,
  html body .inner-page-hero h1,
  html body .product-page-hero h1,
  html body .contact-hero h1,
  html body .legal-hero.inner-page-hero h1,
  html body .mz-archive-hero h1,
  html body .mz-project-hero h1 {
    font-size: 4.2rem !important;
  }
}

/* =========================================================
   FINAL PATCH — responsive Home hero alignment redesign
   Requested: mobile/tablet hero heading, subheading/body text,
   checklist, stats and buttons must align neatly with the
   same global hero control system.
   ========================================================= */
:root {
  --home-hero-responsive-copy-width: 72rem;
  --home-hero-responsive-text-align: center;
  --home-hero-responsive-checklist-width-tablet: 52rem;
  --home-hero-responsive-checklist-width-mobile: 35rem;
  --home-hero-responsive-actions-width-mobile: 35rem;
}

@media (max-width: 1080px) {
  html body.home .hero,
  html body.front-page .hero,
  html body.page-template-template-home .hero,
  html body .hero {
    min-height: auto !important;
    align-items: center !important;
    padding-top: clamp(5.2rem, 7vw, 7rem) !important;
    padding-bottom: clamp(6.4rem, 8vw, 8rem) !important;
  }

  html body.home .hero .hero-grid,
  html body.front-page .hero .hero-grid,
  html body.page-template-template-home .hero .hero-grid,
  html body .hero .hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    align-items: center !important;
    gap: clamp(3.2rem, 5vw, 5.2rem) !important;
    width: min(100%, 82rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: var(--home-hero-responsive-text-align) !important;
  }

  html body.home .hero .hero-copy,
  html body.front-page .hero .hero-copy,
  html body.page-template-template-home .hero .hero-copy,
  html body .hero .hero-copy {
    width: min(100%, var(--home-hero-responsive-copy-width)) !important;
    max-width: var(--home-hero-responsive-copy-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  html body.home .hero .hero-copy .eyebrow,
  html body.front-page .hero .hero-copy .eyebrow,
  html body.page-template-template-home .hero .hero-copy .eyebrow,
  html body .hero .hero-copy .eyebrow,
  html body .hero .eyebrow {
    align-self: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body.home .hero .hero-copy h1,
  html body.front-page .hero .hero-copy h1,
  html body.page-template-template-home .hero .hero-copy h1,
  html body .hero .hero-copy h1,
  html body .hero h1.hero-animate {
    width: min(100%, 70rem) !important;
    max-width: 70rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 2.4rem !important;
    text-align: center !important;
    font-size: clamp(4.4rem, 7vw, 5.6rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.04rem !important;
  }

  html body.home .hero .hero-copy p,
  html body.front-page .hero .hero-copy p,
  html body.page-template-template-home .hero .hero-copy p,
  html body .hero .hero-copy p {
    width: min(100%, 62rem) !important;
    max-width: 62rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  html body.home .hero .hero-benefits-wrap,
  html body.front-page .hero .hero-benefits-wrap,
  html body.page-template-template-home .hero .hero-benefits-wrap,
  html body .hero .hero-benefits-wrap {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: left !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body.home .hero .hero-benefits,
  html body.front-page .hero .hero-benefits,
  html body.page-template-template-home .hero .hero-benefits,
  html body .hero .hero-benefits,
  html body .hero .hero-benefits-wrap .hero-benefits {
    width: min(100%, var(--home-hero-responsive-checklist-width-tablet)) !important;
    max-width: var(--home-hero-responsive-checklist-width-tablet) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-items: stretch !important;
    text-align: left !important;
  }

  html body.home .hero .hero-benefits li,
  html body.front-page .hero .hero-benefits li,
  html body.page-template-template-home .hero .hero-benefits li,
  html body .hero .hero-benefits li {
    grid-template-columns: 2.8rem minmax(0, 1fr) !important;
    justify-content: start !important;
    align-items: start !important;
    gap: 1rem !important;
    color: rgba(255,248,241,0.92) !important;
    -webkit-text-fill-color: rgba(255,248,241,0.92) !important;
    text-align: left !important;
    font-size: clamp(1.55rem, 1.6vw, 1.72rem) !important;
    line-height: 1.55 !important;
  }

  html body.home .hero .hero-benefits li span:last-child,
  html body.front-page .hero .hero-benefits li span:last-child,
  html body.page-template-template-home .hero .hero-benefits li span:last-child,
  html body .hero .hero-benefits li span:last-child {
    display: block !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  html body.home .hero .hero-trust,
  html body.front-page .hero .hero-trust,
  html body.page-template-template-home .hero .hero-trust,
  html body .hero .hero-trust {
    width: min(100%, 68rem) !important;
    max-width: 68rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.2rem !important;
  }

  html body.home .hero .hero-actions,
  html body.front-page .hero .hero-actions,
  html body.page-template-template-home .hero .hero-actions,
  html body .hero .hero-actions {
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body.home .hero .hero-visual,
  html body.front-page .hero .hero-visual,
  html body.page-template-template-home .hero .hero-visual,
  html body .hero .hero-visual {
    width: min(100%, 58rem) !important;
    max-width: 58rem !important;
    min-height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 767px) {
  html body.home .hero,
  html body.front-page .hero,
  html body.page-template-template-home .hero,
  html body .hero {
    padding-top: clamp(3.6rem, 9vw, 4.8rem) !important;
    padding-bottom: clamp(5.6rem, 12vw, 7rem) !important;
    padding-left: 1.8rem !important;
    padding-right: 1.8rem !important;
  }

  html body.home .hero .hero-grid,
  html body.front-page .hero .hero-grid,
  html body.page-template-template-home .hero .hero-grid,
  html body .hero .hero-grid {
    width: 100% !important;
    gap: 3rem !important;
  }

  html body.home .hero .hero-copy,
  html body.front-page .hero .hero-copy,
  html body.page-template-template-home .hero .hero-copy,
  html body .hero .hero-copy {
    width: 100% !important;
    max-width: 42rem !important;
  }

  html body.home .hero .hero-copy .eyebrow,
  html body.front-page .hero .hero-copy .eyebrow,
  html body.page-template-template-home .hero .hero-copy .eyebrow,
  html body .hero .hero-copy .eyebrow,
  html body .hero .eyebrow {
    max-width: 100% !important;
    gap: 0.7rem !important;
    font-size: 1rem !important;
    line-height: 1.45 !important;
    letter-spacing: 0.18rem !important;
    white-space: normal !important;
    margin-bottom: 1.6rem !important;
  }

  html body.home .hero .hero-copy .eyebrow::before,
  html body.front-page .hero .hero-copy .eyebrow::before,
  html body.page-template-template-home .hero .hero-copy .eyebrow::before,
  html body .hero .hero-copy .eyebrow::before,
  html body .hero .eyebrow::before {
    width: 2.8rem !important;
    flex: 0 0 2.8rem !important;
  }

  html body.home .hero .hero-copy h1,
  html body.front-page .hero .hero-copy h1,
  html body.page-template-template-home .hero .hero-copy h1,
  html body .hero .hero-copy h1,
  html body .hero h1.hero-animate {
    width: 100% !important;
    max-width: 42rem !important;
    font-size: clamp(3.6rem, 10.8vw, 4.6rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025rem !important;
    margin-bottom: 2.2rem !important;
  }

  html body.home .hero .hero-copy p,
  html body.front-page .hero .hero-copy p,
  html body.page-template-template-home .hero .hero-copy p,
  html body .hero .hero-copy p {
    max-width: 36rem !important;
    font-size: 1.55rem !important;
    line-height: 1.72 !important;
    margin-bottom: 2.6rem !important;
  }

  html body.home .hero .hero-benefits,
  html body.front-page .hero .hero-benefits,
  html body.page-template-template-home .hero .hero-benefits,
  html body .hero .hero-benefits,
  html body .hero .hero-benefits-wrap .hero-benefits {
    width: min(100%, var(--home-hero-responsive-checklist-width-mobile)) !important;
    max-width: var(--home-hero-responsive-checklist-width-mobile) !important;
  }

  html body.home .hero .hero-benefits li,
  html body.front-page .hero .hero-benefits li,
  html body.page-template-template-home .hero .hero-benefits li,
  html body .hero .hero-benefits li {
    grid-template-columns: 2.5rem minmax(0, 1fr) !important;
    gap: 0.85rem !important;
    font-size: 1.5rem !important;
    line-height: 1.52 !important;
  }

  html body.home .hero .hero-benefits .benefit-icon,
  html body.front-page .hero .hero-benefits .benefit-icon,
  html body.page-template-template-home .hero .hero-benefits .benefit-icon,
  html body .hero .hero-benefits .benefit-icon {
    width: 2rem !important;
    height: 2rem !important;
    font-size: 1.08rem !important;
  }

  html body.home .hero .hero-trust,
  html body.front-page .hero .hero-trust,
  html body.page-template-template-home .hero .hero-trust,
  html body .hero .hero-trust {
    width: 100% !important;
    max-width: 42rem !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.8rem !important;
  }

  html body.home .hero .trust-pill,
  html body.front-page .hero .trust-pill,
  html body.page-template-template-home .hero .trust-pill,
  html body .hero .trust-pill {
    min-width: 0 !important;
    padding: 1.25rem 0.75rem !important;
    border-radius: 1.3rem !important;
    text-align: center !important;
  }

  html body.home .hero .trust-pill strong,
  html body.front-page .hero .trust-pill strong,
  html body.page-template-template-home .hero .trust-pill strong,
  html body .hero .trust-pill strong {
    font-size: 2.05rem !important;
    line-height: 1.05 !important;
  }

  html body.home .hero .trust-pill span,
  html body.front-page .hero .trust-pill span,
  html body.page-template-template-home .hero .trust-pill span,
  html body .hero .trust-pill span {
    font-size: 0.9rem !important;
    line-height: 1.25 !important;
    letter-spacing: 0.04rem !important;
  }

  html body.home .hero .hero-actions,
  html body.front-page .hero .hero-actions,
  html body.page-template-template-home .hero .hero-actions,
  html body .hero .hero-actions {
    width: min(100%, var(--home-hero-responsive-actions-width-mobile)) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.2rem !important;
  }

  html body.home .hero .hero-actions .btn,
  html body.front-page .hero .hero-actions .btn,
  html body.page-template-template-home .hero .hero-actions .btn,
  html body .hero .hero-actions .btn {
    width: 100% !important;
    min-height: 5.2rem !important;
    padding-left: 1.8rem !important;
    padding-right: 1.8rem !important;
    text-align: center !important;
  }
}

@media (max-width: 380px) {
  html body.home .hero .hero-copy h1,
  html body.front-page .hero .hero-copy h1,
  html body.page-template-template-home .hero .hero-copy h1,
  html body .hero .hero-copy h1,
  html body .hero h1.hero-animate {
    font-size: clamp(3.3rem, 10.6vw, 3.8rem) !important;
  }

  html body.home .hero .hero-trust,
  html body.front-page .hero .hero-trust,
  html body.page-template-template-home .hero .hero-trust,
  html body .hero .hero-trust {
    gap: 0.6rem !important;
  }

  html body.home .hero .trust-pill,
  html body.front-page .hero .trust-pill,
  html body.page-template-template-home .hero .trust-pill,
  html body .hero .trust-pill {
    padding: 1.1rem 0.55rem !important;
  }
}

/* =========================================================
   FINAL PATCH — Home hero checklist group centered
   Requested:
   - Put checklist group inside centered div on tablet/mobile
   - Keep inner checklist text left aligned
   - Add margin-top: -20px
   ========================================================= */
@media (max-width: 1080px) {
  html body.home .hero .hero-benefits-wrap,
  html body.front-page .hero .hero-benefits-wrap,
  html body.page-template-template-home .hero .hero-benefits-wrap,
  html body .hero .hero-benefits-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: -20px !important;
    margin-right: auto !important;
    margin-bottom: var(--home-hero-benefits-to-stats-gap-tablet, 5.8rem) !important;
    margin-left: auto !important;
    padding: 0 !important;
    text-align: left !important;
  }

  html body.home .hero .hero-benefits-wrap .hero-benefits,
  html body.front-page .hero .hero-benefits-wrap .hero-benefits,
  html body.page-template-template-home .hero .hero-benefits-wrap .hero-benefits,
  html body .hero .hero-benefits-wrap .hero-benefits,
  html body.home .hero .hero-benefits,
  html body.front-page .hero .hero-benefits,
  html body.page-template-template-home .hero .hero-benefits,
  html body .hero .hero-benefits {
    display: grid !important;
    width: max-content !important;
    max-width: min(calc(100vw - 5.6rem), 46rem) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 1rem !important;
    justify-items: start !important;
    text-align: left !important;
  }

  html body.home .hero .hero-benefits li,
  html body.front-page .hero .hero-benefits li,
  html body.page-template-template-home .hero .hero-benefits li,
  html body .hero .hero-benefits li {
    display: grid !important;
    grid-template-columns: 2.8rem minmax(0, 1fr) !important;
    justify-content: start !important;
    justify-items: start !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 1rem !important;
    text-align: left !important;
  }

  html body.home .hero .hero-benefits li span:last-child,
  html body.front-page .hero .hero-benefits li span:last-child,
  html body.page-template-template-home .hero .hero-benefits li span:last-child,
  html body .hero .hero-benefits li span:last-child {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 767px) {
  html body.home .hero .hero-benefits-wrap,
  html body.front-page .hero .hero-benefits-wrap,
  html body.page-template-template-home .hero .hero-benefits-wrap,
  html body .hero .hero-benefits-wrap {
    margin-top: -20px !important;
    margin-bottom: var(--home-hero-benefits-to-stats-gap-mobile, 6rem) !important;
  }

  html body.home .hero .hero-benefits-wrap .hero-benefits,
  html body.front-page .hero .hero-benefits-wrap .hero-benefits,
  html body.page-template-template-home .hero .hero-benefits-wrap .hero-benefits,
  html body .hero .hero-benefits-wrap .hero-benefits,
  html body.home .hero .hero-benefits,
  html body.front-page .hero .hero-benefits,
  html body.page-template-template-home .hero .hero-benefits,
  html body .hero .hero-benefits {
    width: max-content !important;
    max-width: min(calc(100vw - 4.8rem), 39rem) !important;
  }

  html body.home .hero .hero-benefits li,
  html body.front-page .hero .hero-benefits li,
  html body.page-template-template-home .hero .hero-benefits li,
  html body .hero .hero-benefits li {
    grid-template-columns: 2.5rem minmax(0, 1fr) !important;
    gap: 0.9rem !important;
  }
}

@media (max-width: 380px) {
  html body.home .hero .hero-benefits li span:last-child,
  html body.front-page .hero .hero-benefits li span:last-child,
  html body.page-template-template-home .hero .hero-benefits li span:last-child,
  html body .hero .hero-benefits li span:last-child {
    white-space: normal !important;
  }
}

/* =========================================================
   FINAL PATCH — Home hero heading-to-checklist breathing space
   Requested: add visible space between "Better Support" and
   "Free curtain consultation" on desktop, tablet and mobile.
   This is placed in the global hero control file so it wins over
   older mobile/tablet patches that used margin-top: -20px.
   ========================================================= */
:root {
  --home-hero-heading-to-checklist-gap-desktop: 3.4rem;
  --home-hero-heading-to-checklist-gap-tablet: 3.8rem;
  --home-hero-heading-to-checklist-gap-mobile: 4rem;
  --home-hero-checklist-extra-top-gap: 1rem;
}

html body.home .hero .hero-copy h1,
html body.front-page .hero .hero-copy h1,
html body.page-template-template-home .hero .hero-copy h1,
html body .hero .hero-copy h1,
html body .hero h1.hero-animate {
  margin-bottom: var(--home-hero-heading-to-checklist-gap-desktop) !important;
}

html body.home .hero .hero-benefits-wrap,
html body.front-page .hero .hero-benefits-wrap,
html body.page-template-template-home .hero .hero-benefits-wrap,
html body .hero .hero-benefits-wrap {
  margin-top: var(--home-hero-checklist-extra-top-gap) !important;
}

@media (max-width: 1080px) {
  html body.home .hero .hero-copy h1,
  html body.front-page .hero .hero-copy h1,
  html body.page-template-template-home .hero .hero-copy h1,
  html body .hero .hero-copy h1,
  html body .hero h1.hero-animate {
    margin-bottom: var(--home-hero-heading-to-checklist-gap-tablet) !important;
  }

  html body.home .hero .hero-benefits-wrap,
  html body.front-page .hero .hero-benefits-wrap,
  html body.page-template-template-home .hero .hero-benefits-wrap,
  html body .hero .hero-benefits-wrap {
    margin-top: var(--home-hero-checklist-extra-top-gap) !important;
  }
}

@media (max-width: 767px) {
  html body.home .hero .hero-copy h1,
  html body.front-page .hero .hero-copy h1,
  html body.page-template-template-home .hero .hero-copy h1,
  html body .hero .hero-copy h1,
  html body .hero h1.hero-animate {
    margin-bottom: var(--home-hero-heading-to-checklist-gap-mobile) !important;
  }

  html body.home .hero .hero-benefits-wrap,
  html body.front-page .hero .hero-benefits-wrap,
  html body.page-template-template-home .hero .hero-benefits-wrap,
  html body .hero .hero-benefits-wrap {
    margin-top: var(--home-hero-checklist-extra-top-gap) !important;
  }
}

/* =========================================================
   FINAL PATCH v19 — Mobile hero benefits full-width override
   Reason: older rules above used width:max-content, calc(100vw - 4.8rem)
   and white-space:nowrap; those reduced available mobile width and made
   English/Chinese checklist text look too small or clipped.
   ========================================================= */
@media (max-width: 767px) {
  html body.home .hero .hero-copy .hero-benefits-wrap,
  html body.front-page .hero .hero-copy .hero-benefits-wrap,
  html body.page-template-template-home .hero .hero-copy .hero-benefits-wrap,
  html body.page-template-template-home-zh .hero .hero-copy .hero-benefits-wrap,
  html body.mezzo-zh-template .hero .hero-copy .hero-benefits-wrap,
  html body .hero .hero-copy .hero-benefits-wrap,
  html body .template-home .hero-benefits-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-top: 1rem !important;
    margin-right: 0 !important;
    margin-bottom: 2.2rem !important;
    margin-left: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  html body.home .hero .hero-copy .hero-benefits-wrap .hero-benefits,
  html body.front-page .hero .hero-copy .hero-benefits-wrap .hero-benefits,
  html body.page-template-template-home .hero .hero-copy .hero-benefits-wrap .hero-benefits,
  html body.page-template-template-home-zh .hero .hero-copy .hero-benefits-wrap .hero-benefits,
  html body.mezzo-zh-template .hero .hero-copy .hero-benefits-wrap .hero-benefits,
  html body .hero .hero-copy .hero-benefits-wrap .hero-benefits,
  html body .template-home .hero-benefits-wrap .hero-benefits {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0.75rem !important;
    justify-items: stretch !important;
    justify-content: stretch !important;
    text-align: left !important;
  }

  html body.home .hero .hero-benefits li,
  html body.front-page .hero .hero-benefits li,
  html body.page-template-template-home .hero .hero-benefits li,
  html body.page-template-template-home-zh .hero .hero-benefits li,
  html body.mezzo-zh-template .hero .hero-benefits li,
  html body .hero .hero-benefits li,
  html body .template-home .hero-benefits li {
    display: grid !important;
    grid-template-columns: 2.2rem minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0.72rem !important;
    align-items: flex-start !important;
    justify-items: start !important;
    text-align: left !important;
    font-size: 1.58rem !important;
    line-height: 1.42 !important;
  }

  html body.home .hero .hero-benefits li > span:last-child,
  html body.front-page .hero .hero-benefits li > span:last-child,
  html body.page-template-template-home .hero .hero-benefits li > span:last-child,
  html body.page-template-template-home-zh .hero .hero-benefits li > span:last-child,
  html body.mezzo-zh-template .hero .hero-benefits li > span:last-child,
  html body .hero .hero-benefits li > span:last-child,
  html body .template-home .hero-benefits li > span:last-child {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    font-size: inherit !important;
    line-height: inherit !important;
  }

  html body.home .hero .hero-benefits .benefit-icon,
  html body.front-page .hero .hero-benefits .benefit-icon,
  html body.page-template-template-home .hero .hero-benefits .benefit-icon,
  html body.page-template-template-home-zh .hero .hero-benefits .benefit-icon,
  html body.mezzo-zh-template .hero .hero-benefits .benefit-icon,
  html body .hero .hero-benefits .benefit-icon,
  html body .template-home .hero-benefits .benefit-icon {
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
    margin-top: 0.12rem !important;
    font-size: 1.08rem !important;
  }

  html body.home .hero .hero-benefits .emphasis-wavy,
  html body.front-page .hero .hero-benefits .emphasis-wavy,
  html body.page-template-template-home .hero .hero-benefits .emphasis-wavy,
  html body.page-template-template-home-zh .hero .hero-benefits .emphasis-wavy,
  html body.mezzo-zh-template .hero .hero-benefits .emphasis-wavy,
  html body .hero .hero-benefits .emphasis-wavy {
    white-space: nowrap !important;
  }
}

@media (max-width: 390px) {
  html body.home .hero .hero-benefits li,
  html body.front-page .hero .hero-benefits li,
  html body.page-template-template-home .hero .hero-benefits li,
  html body.page-template-template-home-zh .hero .hero-benefits li,
  html body.mezzo-zh-template .hero .hero-benefits li,
  html body .hero .hero-benefits li,
  html body .template-home .hero-benefits li {
    grid-template-columns: 2rem minmax(0, 1fr) !important;
    gap: 0.62rem !important;
    font-size: 1.5rem !important;
    line-height: 1.38 !important;
  }

  html body.home .hero .hero-benefits .benefit-icon,
  html body.front-page .hero .hero-benefits .benefit-icon,
  html body.page-template-template-home .hero .hero-benefits .benefit-icon,
  html body.page-template-template-home-zh .hero .hero-benefits .benefit-icon,
  html body.mezzo-zh-template .hero .hero-benefits .benefit-icon,
  html body .hero .hero-benefits .benefit-icon,
  html body .template-home .hero-benefits .benefit-icon {
    width: 1.9rem !important;
    height: 1.9rem !important;
    min-width: 1.9rem !important;
    font-size: 1rem !important;
  }
}


/* =========================================================
   FINAL PATCH v20 — Attractive responsive home hero
   - Removed old hero sub-points/checklist
   - Stronger visual background, cleaner spacing and device-safe H1
   ========================================================= */
html body.home .hero,
html body.front-page .hero,
html body.page-template-template-home .hero,
html body.page-template-template-home-zh .hero {
  min-height: min(92rem, calc(100svh - 0px)) !important;
  padding-top: clamp(6.4rem, 6vw, 9.6rem) !important;
  padding-bottom: clamp(5.6rem, 6vw, 8.8rem) !important;
  background:
    radial-gradient(circle at 8% 12%, rgba(216, 161, 58, 0.28), transparent 26%),
    radial-gradient(circle at 78% 18%, rgba(11, 79, 74, 0.55), transparent 32%),
    radial-gradient(circle at 64% 82%, rgba(216, 161, 58, 0.20), transparent 34%),
    linear-gradient(135deg, #052d2a 0%, #083532 43%, #0b4f4a 100%) !important;
}

html body.home .hero::before,
html body.front-page .hero::before,
html body.page-template-template-home .hero::before,
html body.page-template-template-home-zh .hero::before {
  background:
    linear-gradient(115deg, rgba(255,255,255,0.08), transparent 28%),
    repeating-linear-gradient(90deg, transparent 0, transparent 7rem, rgba(255,255,255,0.035) 7rem, rgba(255,255,255,0.035) 7.12rem) !important;
}

html body.home .hero .hero-grid,
html body.front-page .hero .hero-grid,
html body.page-template-template-home .hero .hero-grid,
html body.page-template-template-home-zh .hero .hero-grid {
  grid-template-columns: minmax(0, 1.04fr) minmax(32rem, 0.96fr) !important;
  gap: clamp(3.2rem, 5.5vw, 7.6rem) !important;
}

html body.home .hero .hero-copy,
html body.front-page .hero .hero-copy,
html body.page-template-template-home .hero .hero-copy,
html body.page-template-template-home-zh .hero .hero-copy {
  max-width: 74rem !important;
}

html body.home .hero .eyebrow,
html body.front-page .hero .eyebrow,
html body.page-template-template-home .hero .eyebrow,
html body.page-template-template-home-zh .hero .eyebrow {
  padding: 0.9rem 1.35rem !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.09) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: rgba(255,248,241,0.92) !important;
  letter-spacing: 0.18rem !important;
}

html body.home .hero .eyebrow::before,
html body.front-page .hero .eyebrow::before,
html body.page-template-template-home .hero .eyebrow::before,
html body.page-template-template-home-zh .hero .eyebrow::before {
  width: 1rem !important;
  height: 1rem !important;
  border-radius: 999px !important;
  background: var(--accent, #D8A13A) !important;
  box-shadow: 0 0 0 0.55rem rgba(216,161,58,0.14) !important;
}

html body.home .hero .hero-copy h1,
html body.front-page .hero .hero-copy h1,
html body.page-template-template-home .hero .hero-copy h1,
html body.page-template-template-home-zh .hero .hero-copy h1,
html body .template-home .hero .hero-copy h1 {
  width: 100% !important;
  max-width: 11.2ch !important;
  margin: 0 0 clamp(1.8rem, 2.4vw, 2.8rem) !important;
  font-size: clamp(4.2rem, 7.4vw, 9.2rem) !important;
  line-height: 0.92 !important;
  letter-spacing: clamp(-0.18rem, -0.18vw, -0.06rem) !important;
  text-wrap: balance !important;
}

html body.home .hero .hero-copy h1 em,
html body.front-page .hero .hero-copy h1 em,
html body.page-template-template-home .hero .hero-copy h1 em,
html body.page-template-template-home-zh .hero .hero-copy h1 em {
  color: #f2c66b !important;
  text-shadow: 0 1rem 3rem rgba(216,161,58,0.25) !important;
}

html body.home .hero .hero-lead,
html body.front-page .hero .hero-lead,
html body.page-template-template-home .hero .hero-lead,
html body.page-template-template-home-zh .hero .hero-lead {
  max-width: 60rem !important;
  margin: 0 0 clamp(2.4rem, 3vw, 3.6rem) !important;
  color: rgba(255,248,241,0.86) !important;
  font-size: clamp(1.6rem, 1.55vw, 2rem) !important;
  line-height: 1.75 !important;
  font-weight: 600 !important;
}

html body.home .hero .hero-benefits-wrap,
html body.front-page .hero .hero-benefits-wrap,
html body.page-template-template-home .hero .hero-benefits-wrap,
html body.page-template-template-home-zh .hero .hero-benefits-wrap,
html body .template-home .hero-benefits-wrap,
html body.home .hero .hero-benefits,
html body.front-page .hero .hero-benefits,
html body.page-template-template-home .hero .hero-benefits,
html body.page-template-template-home-zh .hero .hero-benefits,
html body .template-home .hero-benefits {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html body.home .hero .hero-trust,
html body.front-page .hero .hero-trust,
html body.page-template-template-home .hero .hero-trust,
html body.page-template-template-home-zh .hero .hero-trust {
  margin: 0 0 clamp(2.2rem, 2.4vw, 3rem) !important;
  max-width: 58rem !important;
}

html body.home .hero .trust-pill,
html body.front-page .hero .trust-pill,
html body.page-template-template-home .hero .trust-pill,
html body.page-template-template-home-zh .hero .trust-pill {
  border-color: rgba(255,255,255,0.16) !important;
  background: rgba(255,255,255,0.10) !important;
  box-shadow: 0 1.6rem 4rem rgba(0,0,0,0.12) !important;
}

html body.home .hero .hero-actions-after-trust,
html body.front-page .hero .hero-actions-after-trust,
html body.page-template-template-home .hero .hero-actions-after-trust,
html body.page-template-template-home-zh .hero .hero-actions-after-trust {
  margin-top: 0 !important;
}

html body.home .hero .hero-media-image-card,
html body.front-page .hero .hero-media-image-card,
html body.page-template-template-home .hero .hero-media-image-card,
html body.page-template-template-home-zh .hero .hero-media-image-card {
  border-radius: clamp(2.4rem, 3vw, 4.2rem) !important;
  box-shadow: 0 3.6rem 8rem rgba(0,0,0,0.34), inset 0 0 0 1px rgba(255,255,255,0.16) !important;
}

@media (max-width: 1080px) {
  html body.home .hero,
  html body.front-page .hero,
  html body.page-template-template-home .hero,
  html body.page-template-template-home-zh .hero {
    min-height: auto !important;
    padding-top: 5.2rem !important;
    padding-bottom: 6.8rem !important;
  }

  html body.home .hero .hero-grid,
  html body.front-page .hero .hero-grid,
  html body.page-template-template-home .hero .hero-grid,
  html body.page-template-template-home-zh .hero .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 4rem !important;
  }

  html body.home .hero .hero-copy,
  html body.front-page .hero .hero-copy,
  html body.page-template-template-home .hero .hero-copy,
  html body.page-template-template-home-zh .hero .hero-copy {
    max-width: 76rem !important;
  }

  html body.home .hero .hero-copy h1,
  html body.front-page .hero .hero-copy h1,
  html body.page-template-template-home .hero .hero-copy h1,
  html body.page-template-template-home-zh .hero .hero-copy h1,
  html body .template-home .hero .hero-copy h1 {
    max-width: 10.8ch !important;
    margin-bottom: 2.2rem !important;
    font-size: clamp(4.4rem, 9.4vw, 7.4rem) !important;
    line-height: 0.95 !important;
  }
}

@media (max-width: 767px) {
  html body.home .hero,
  html body.front-page .hero,
  html body.page-template-template-home .hero,
  html body.page-template-template-home-zh .hero {
    padding: 4.6rem 5vw 5.8rem !important;
  }

  html body.home .hero .hero-copy,
  html body.front-page .hero .hero-copy,
  html body.page-template-template-home .hero .hero-copy,
  html body.page-template-template-home-zh .hero .hero-copy {
    text-align: left !important;
  }

  html body.home .hero .eyebrow,
  html body.front-page .hero .eyebrow,
  html body.page-template-template-home .hero .eyebrow,
  html body.page-template-template-home-zh .hero .eyebrow {
    max-width: 100% !important;
    font-size: 1.08rem !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }

  html body.home .hero .hero-copy h1,
  html body.front-page .hero .hero-copy h1,
  html body.page-template-template-home .hero .hero-copy h1,
  html body.page-template-template-home-zh .hero .hero-copy h1,
  html body .template-home .hero .hero-copy h1 {
    max-width: 9.4ch !important;
    font-size: clamp(3.7rem, 13vw, 5.6rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.08rem !important;
  }

  html body.home .hero .hero-lead,
  html body.front-page .hero .hero-lead,
  html body.page-template-template-home .hero .hero-lead,
  html body.page-template-template-home-zh .hero .hero-lead {
    max-width: 100% !important;
    font-size: 1.58rem !important;
    line-height: 1.68 !important;
  }

  html body.home .hero .hero-trust,
  html body.front-page .hero .hero-trust,
  html body.page-template-template-home .hero .hero-trust,
  html body.page-template-template-home-zh .hero .hero-trust {
    grid-template-columns: 1fr !important;
    gap: 0.9rem !important;
    margin-bottom: 2.4rem !important;
  }

  html body.home .hero .hero-actions,
  html body.front-page .hero .hero-actions,
  html body.page-template-template-home .hero .hero-actions,
  html body.page-template-template-home-zh .hero .hero-actions {
    width: 100% !important;
    gap: 1rem !important;
  }

  html body.home .hero .hero-actions .btn,
  html body.front-page .hero .hero-actions .btn,
  html body.page-template-template-home .hero .hero-actions .btn,
  html body.page-template-template-home-zh .hero .hero-actions .btn {
    width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
  }

  html body.home .hero .hero-visual,
  html body.front-page .hero .hero-visual,
  html body.page-template-template-home .hero .hero-visual,
  html body.page-template-template-home-zh .hero .hero-visual {
    min-height: clamp(34rem, 92vw, 46rem) !important;
  }
}

@media (max-width: 390px) {
  html body.home .hero .hero-copy h1,
  html body.front-page .hero .hero-copy h1,
  html body.page-template-template-home .hero .hero-copy h1,
  html body.page-template-template-home-zh .hero .hero-copy h1,
  html body .template-home .hero .hero-copy h1 {
    font-size: clamp(3.25rem, 12.4vw, 4.6rem) !important;
    max-width: 9.1ch !important;
  }
}

/* =========================================================
   FINAL PATCH v21 — Home hero background uses primary colour
   ========================================================= */
html body.home .hero,
html body.front-page .hero,
html body.page-template-template-home .hero,
html body.page-template-template-home-zh .hero {
  background: var(--c-primary, var(--primary-color, #A0522D)) !important;
  background-color: var(--c-primary, var(--primary-color, #A0522D)) !important;
}

html body.home .hero::before,
html body.front-page .hero::before,
html body.page-template-template-home .hero::before,
html body.page-template-template-home-zh .hero::before {
  background:
    radial-gradient(circle at 12% 14%, rgba(255,255,255,0.14), transparent 26%),
    radial-gradient(circle at 82% 18%, rgba(255,255,255,0.10), transparent 32%),
    linear-gradient(115deg, rgba(255,255,255,0.08), transparent 30%),
    repeating-linear-gradient(90deg, transparent 0, transparent 7rem, rgba(255,255,255,0.028) 7rem, rgba(255,255,255,0.028) 7.12rem) !important;
}

/* =========================================================
   FINAL PATCH v22 — Requested hero title / mobile image fixes
   - Highlight “room feels” with #a0522d
   - Remove hero description spacing
   - Desktop H1 fixed at 60px, responsive below desktop
   - Force mobile hero image card to render visibly
   ========================================================= */
html body.home .hero .hero-copy h1,
html body.front-page .hero .hero-copy h1,
html body.page-template-template-home .hero .hero-copy h1,
html body.page-template-template-home-zh .hero .hero-copy h1,
html body .template-home .hero .hero-copy h1 {
  font-size: 60px !important;
  line-height: 0.96 !important;
  letter-spacing: -0.04em !important;
  max-width: 11.5ch !important;
  margin-bottom: clamp(2.2rem, 2.8vw, 3.2rem) !important;
}

html body.home .hero .hero-copy h1 em,
html body.front-page .hero .hero-copy h1 em,
html body.page-template-template-home .hero .hero-copy h1 em,
html body.page-template-template-home-zh .hero .hero-copy h1 em {
  color: #a0522d !important;
  -webkit-text-fill-color: #a0522d !important;
  text-shadow: none !important;
}

html body.home .hero .hero-lead,
html body.front-page .hero .hero-lead,
html body.page-template-template-home .hero .hero-lead,
html body.page-template-template-home-zh .hero .hero-lead {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html body.home .hero .hero-visual,
html body.front-page .hero .hero-visual,
html body.page-template-template-home .hero .hero-visual,
html body.page-template-template-home-zh .hero .hero-visual,
html body.home .hero .polygon-wrap,
html body.front-page .hero .polygon-wrap,
html body.page-template-template-home .hero .polygon-wrap,
html body.page-template-template-home-zh .hero .polygon-wrap,
html body.home .hero .hero-media-image-card,
html body.front-page .hero .hero-media-image-card,
html body.page-template-template-home .hero .hero-media-image-card,
html body.page-template-template-home-zh .hero .hero-media-image-card,
html body.home .hero .hero-media-image-card img,
html body.front-page .hero .hero-media-image-card img,
html body.page-template-template-home .hero .hero-media-image-card img,
html body.page-template-template-home-zh .hero .hero-media-image-card img {
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 1080px) {
  html body.home .hero .hero-copy h1,
  html body.front-page .hero .hero-copy h1,
  html body.page-template-template-home .hero .hero-copy h1,
  html body.page-template-template-home-zh .hero .hero-copy h1,
  html body .template-home .hero .hero-copy h1 {
    font-size: clamp(4.6rem, 8vw, 5.8rem) !important;
    line-height: 1.02 !important;
    max-width: 10.8ch !important;
    letter-spacing: -0.035em !important;
  }
}

@media (max-width: 767px) {
  html body.home .hero,
  html body.front-page .hero,
  html body.page-template-template-home .hero,
  html body.page-template-template-home-zh .hero {
    padding-top: 4.4rem !important;
    padding-bottom: 5.8rem !important;
  }

  html body.home .hero .hero-copy,
  html body.front-page .hero .hero-copy,
  html body.page-template-template-home .hero .hero-copy,
  html body.page-template-template-home-zh .hero .hero-copy {
    text-align: left !important;
    align-items: flex-start !important;
  }

  html body.home .hero .hero-copy h1,
  html body.front-page .hero .hero-copy h1,
  html body.page-template-template-home .hero .hero-copy h1,
  html body.page-template-template-home-zh .hero .hero-copy h1,
  html body .template-home .hero .hero-copy h1 {
    width: 100% !important;
    max-width: 9.6ch !important;
    font-size: clamp(3.6rem, 11.6vw, 4.8rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 2.2rem !important;
  }

  html body.home .hero .hero-visual,
  html body.front-page .hero .hero-visual,
  html body.page-template-template-home .hero .hero-visual,
  html body.page-template-template-home-zh .hero .hero-visual {
    display: block !important;
    width: 100% !important;
    max-width: 46rem !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    position: relative !important;
  }

  html body.home .hero .polygon-wrap,
  html body.front-page .hero .polygon-wrap,
  html body.page-template-template-home .hero .polygon-wrap,
  html body.page-template-template-home-zh .hero .polygon-wrap {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 32rem !important;
    filter: drop-shadow(0 2rem 3rem rgba(0,0,0,0.28)) !important;
  }

  html body.home .hero .hero-media-image-card,
  html body.front-page .hero .hero-media-image-card,
  html body.page-template-template-home .hero .hero-media-image-card,
  html body.page-template-template-home-zh .hero .hero-media-image-card {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 32rem !important;
    aspect-ratio: 4 / 5 !important;
    border-radius: 2.4rem !important;
    clip-path: none !important;
    overflow: hidden !important;
  }

  html body.home .hero .hero-media-image-card img,
  html body.front-page .hero .hero-media-image-card img,
  html body.page-template-template-home .hero .hero-media-image-card img,
  html body.page-template-template-home-zh .hero .hero-media-image-card img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 32rem !important;
    object-fit: cover !important;
  }
}

@media (max-width: 390px) {
  html body.home .hero .hero-copy h1,
  html body.front-page .hero .hero-copy h1,
  html body.page-template-template-home .hero .hero-copy h1,
  html body.page-template-template-home-zh .hero .hero-copy h1,
  html body .template-home .hero .hero-copy h1 {
    font-size: clamp(3.25rem, 11vw, 4.1rem) !important;
    max-width: 9.4ch !important;
  }
}

/* V23 mirror override — Home hero editorial redesign */
html body main > section.hero.mezzo-home-editorial-hero {
  min-height: auto !important;
  display: block !important;
  align-items: initial !important;
  padding: clamp(1.6rem, 2vw, 2.4rem) 0 clamp(4.4rem, 5vw, 6.4rem) !important;
  background:
    radial-gradient(circle at 78% 0%, rgba(107,26,26,0.38), transparent 30%),
    radial-gradient(circle at 12% 10%, rgba(201,154,94,0.12), transparent 28%),
    linear-gradient(135deg, #2b170f 0%, #35190e 46%, #210f08 100%) !important;
}
html body .hero.mezzo-home-editorial-hero .hero-grid {
  width: min(132rem, calc(100% - clamp(3.2rem, 6vw, 9.6rem))) !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  align-items: stretch !important;
}
html body .hero.mezzo-home-editorial-hero .hero-visual { order: 1 !important; display:block !important; width:100% !important; }
html body .hero.mezzo-home-editorial-hero .polygon-wrap { height: clamp(30rem, 38vw, 48rem) !important; width:100% !important; display:block !important; transform:none !important; }
html body .hero.mezzo-home-editorial-hero .hero-media-image-card { display:block !important; width:100% !important; height:100% !important; border:0 !important; border-radius:0 !important; overflow:hidden !important; }
html body .hero.mezzo-home-editorial-hero .hero-media-image-card img { display:block !important; width:100% !important; height:100% !important; object-fit:cover !important; opacity:1 !important; visibility:visible !important; }
html body .hero.mezzo-home-editorial-hero .shape-outline,
html body .hero.mezzo-home-editorial-hero .gold-orb,
html body .hero.mezzo-home-editorial-hero .hero-media-image-caption { display:none !important; }
html body .hero.mezzo-home-editorial-hero .hero-copy { order:2 !important; max-width:none !important; width:100% !important; padding:clamp(3.2rem,4.8vw,6.4rem) 0 0 !important; text-align:left !important; }
html body .hero.mezzo-home-editorial-hero h1 { font-family:var(--font-heading) !important; font-size:60px !important; line-height:1.05 !important; color:rgba(255,248,241,.94) !important; margin:0 0 clamp(2.4rem,3vw,3.6rem) !important; }
html body .hero.mezzo-home-editorial-hero h1 em { color:#a0522d !important; font-style:normal !important; }
html body .hero.mezzo-home-editorial-hero .btn-main { background:#25D366 !important; color:#fff !important; border-radius:.4rem !important; min-height:5.6rem !important; padding:1.5rem 2.4rem !important; box-shadow:0 1.5rem 3.4rem rgba(37,211,102,.24) !important; }
html body .hero.mezzo-home-editorial-hero .hero-trust { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:clamp(1rem,2vw,2.8rem) !important; max-width:none !important; width:100% !important; }
@media (max-width:767px){
  html body main > section.hero.mezzo-home-editorial-hero{padding:0 0 3.2rem !important;}
  html body .hero.mezzo-home-editorial-hero .hero-grid{width:100% !important;}
  html body .hero.mezzo-home-editorial-hero .polygon-wrap{height:clamp(26rem,72vw,38rem) !important;}
  html body .hero.mezzo-home-editorial-hero .hero-copy{padding:clamp(2.6rem,7vw,3.6rem) clamp(1.8rem,5vw,2.4rem) 0 !important;}
  html body .hero.mezzo-home-editorial-hero h1{font-size:clamp(3.8rem,11.2vw,5.6rem) !important;line-height:1.08 !important;}
  html body .hero.mezzo-home-editorial-hero .btn-main{width:100% !important;min-width:0 !important;}
  html body .hero.mezzo-home-editorial-hero .hero-trust{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:.65rem !important;}
}

/* V24 refinement — desktop overlay hero + mobile 80vw/40vh text block */
html body main > section.hero.mezzo-home-editorial-hero {
  padding: clamp(1.4rem, 1.8vw, 2.2rem) 0 clamp(4rem, 4.8vw, 5.8rem) !important;
}

html body .hero.mezzo-home-editorial-hero .hero-grid {
  position: relative !important;
}

html body .hero.mezzo-home-editorial-hero .hero-visual {
  position: relative !important;
}

html body .hero.mezzo-home-editorial-hero .polygon-wrap {
  position: relative !important;
  overflow: hidden !important;
}

html body .hero.mezzo-home-editorial-hero .hero-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

html body .hero.mezzo-home-editorial-hero .hero-actions {
  margin: 0 0 clamp(2rem, 2.6vw, 3rem) !important;
}

html body .hero.mezzo-home-editorial-hero .hero-trust {
  margin-bottom: 0 !important;
}

@media (min-width: 768px) {
  html body .hero.mezzo-home-editorial-hero .hero-grid {
    width: min(132rem, calc(100% - clamp(3.2rem, 6vw, 9.6rem))) !important;
  }

  html body .hero.mezzo-home-editorial-hero .polygon-wrap {
    height: clamp(54rem, 68vh, 78rem) !important;
    border-radius: 0 !important;
  }

  html body .hero.mezzo-home-editorial-hero .polygon-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(180deg, rgba(18, 9, 5, 0.14) 0%, rgba(18, 9, 5, 0.12) 18%, rgba(18, 9, 5, 0.36) 48%, rgba(18, 9, 5, 0.82) 78%, rgba(18, 9, 5, 0.96) 100%),
      radial-gradient(circle at 78% 0%, rgba(107, 26, 26, 0.26), transparent 24%),
      radial-gradient(circle at 12% 10%, rgba(201, 154, 94, 0.08), transparent 24%);
    pointer-events: none;
  }

  html body .hero.mezzo-home-editorial-hero .hero-media-image-card,
  html body .hero.mezzo-home-editorial-hero .hero-media-image-card img {
    height: 100% !important;
  }

  html body .hero.mezzo-home-editorial-hero .hero-copy {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 3 !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 clamp(3.6rem, 4vw, 5.4rem) clamp(3.2rem, 4vw, 4.8rem) !important;
    text-align: left !important;
  }

  html body .hero.mezzo-home-editorial-hero .hero-copy .eyebrow,
  html body .hero.mezzo-home-editorial-hero .hero-copy h1,
  html body .hero.mezzo-home-editorial-hero .hero-copy .hero-actions,
  html body .hero.mezzo-home-editorial-hero .hero-copy .hero-trust {
    position: relative !important;
    z-index: 4 !important;
  }

  html body .hero.mezzo-home-editorial-hero .hero-copy .eyebrow {
    margin-bottom: 1.8rem !important;
  }

  html body .hero.mezzo-home-editorial-hero h1 {
    max-width: 10.5ch !important;
    margin: 0 0 clamp(2rem, 2.8vw, 3rem) !important;
    text-shadow: 0 0.6rem 2.6rem rgba(0, 0, 0, 0.24) !important;
  }

  html body .hero.mezzo-home-editorial-hero .hero-trust {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(1rem, 1.5vw, 2rem) !important;
  }
}

@media (max-width: 767px) {
  html body main > section.hero.mezzo-home-editorial-hero {
    padding: 0 0 3.2rem !important;
  }

  html body .hero.mezzo-home-editorial-hero .hero-grid {
    width: 100% !important;
  }

  html body .hero.mezzo-home-editorial-hero .polygon-wrap {
    height: clamp(28rem, 56vh, 40rem) !important;
  }

  html body .hero.mezzo-home-editorial-hero .hero-copy {
    order: 2 !important;
    position: relative !important;
    z-index: 3 !important;
    width: 80vw !important;
    min-height: 40vh !important;
    margin: -2.4rem auto 0 !important;
    padding: clamp(2.4rem, 6vw, 3.2rem) clamp(1.8rem, 5vw, 2.4rem) clamp(2.4rem, 6vw, 3rem) !important;
    background:
      radial-gradient(circle at 78% 0%, rgba(107,26,26,0.38), transparent 30%),
      radial-gradient(circle at 12% 10%, rgba(201,154,94,0.12), transparent 28%),
      linear-gradient(135deg, #2b170f 0%, #35190e 46%, #210f08 100%) !important;
    box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.22) !important;
  }

  html body .hero.mezzo-home-editorial-hero .hero-copy .eyebrow {
    margin-bottom: 1.4rem !important;
  }

  html body .hero.mezzo-home-editorial-hero h1 {
    font-size: clamp(3.5rem, 10.4vw, 4.8rem) !important;
    line-height: 1.08 !important;
    max-width: 9.2ch !important;
    margin: 0 0 2rem !important;
  }

  html body .hero.mezzo-home-editorial-hero .btn-main {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
  }

  html body .hero.mezzo-home-editorial-hero .hero-trust {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.65rem !important;
  }
}

/* V25 fix — allow home hero heading to display fully on desktop and mobile */
html body .hero.mezzo-home-editorial-hero .hero-copy,
html body.home .hero.mezzo-home-editorial-hero .hero-copy,
html body.front-page .hero.mezzo-home-editorial-hero .hero-copy,
html body.page-template-template-home .hero.mezzo-home-editorial-hero .hero-copy,
html body.page-template-template-home-zh .hero.mezzo-home-editorial-hero .hero-copy {
  overflow: visible !important;
}

html body .hero.mezzo-home-editorial-hero h1,
html body.home .hero.mezzo-home-editorial-hero h1,
html body.front-page .hero.mezzo-home-editorial-hero h1,
html body.page-template-template-home .hero.mezzo-home-editorial-hero h1,
html body.page-template-template-home-zh .hero.mezzo-home-editorial-hero h1,
html body .hero.mezzo-home-editorial-hero .hero-copy h1,
html body.home .hero.mezzo-home-editorial-hero .hero-copy h1,
html body.front-page .hero.mezzo-home-editorial-hero .hero-copy h1,
html body.page-template-template-home .hero.mezzo-home-editorial-hero .hero-copy h1,
html body.page-template-template-home-zh .hero.mezzo-home-editorial-hero .hero-copy h1 {
  width: 100% !important;
  max-width: 760px !important;
  overflow: visible !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  text-wrap: balance !important;
}

@media (min-width: 1024px) {
  html body .hero.mezzo-home-editorial-hero .hero-copy,
  html body.home .hero.mezzo-home-editorial-hero .hero-copy,
  html body.front-page .hero.mezzo-home-editorial-hero .hero-copy,
  html body.page-template-template-home .hero.mezzo-home-editorial-hero .hero-copy,
  html body.page-template-template-home-zh .hero.mezzo-home-editorial-hero .hero-copy {
    padding-left: clamp(4.8rem, 6vw, 8rem) !important;
    padding-right: clamp(4.8rem, 6vw, 8rem) !important;
  }

  html body .hero.mezzo-home-editorial-hero h1,
  html body.home .hero.mezzo-home-editorial-hero h1,
  html body.front-page .hero.mezzo-home-editorial-hero h1,
  html body.page-template-template-home .hero.mezzo-home-editorial-hero h1,
  html body.page-template-template-home-zh .hero.mezzo-home-editorial-hero h1,
  html body .hero.mezzo-home-editorial-hero .hero-copy h1,
  html body.home .hero.mezzo-home-editorial-hero .hero-copy h1,
  html body.front-page .hero.mezzo-home-editorial-hero .hero-copy h1,
  html body.page-template-template-home .hero.mezzo-home-editorial-hero .hero-copy h1,
  html body.page-template-template-home-zh .hero.mezzo-home-editorial-hero .hero-copy h1 {
    max-width: min(860px, 58vw) !important;
    font-size: 60px !important;
    line-height: 1.08 !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  html body .hero.mezzo-home-editorial-hero h1,
  html body.home .hero.mezzo-home-editorial-hero h1,
  html body.front-page .hero.mezzo-home-editorial-hero h1,
  html body.page-template-template-home .hero.mezzo-home-editorial-hero h1,
  html body.page-template-template-home-zh .hero.mezzo-home-editorial-hero h1,
  html body .hero.mezzo-home-editorial-hero .hero-copy h1,
  html body.home .hero.mezzo-home-editorial-hero .hero-copy h1,
  html body.front-page .hero.mezzo-home-editorial-hero .hero-copy h1,
  html body.page-template-template-home .hero.mezzo-home-editorial-hero .hero-copy h1,
  html body.page-template-template-home-zh .hero.mezzo-home-editorial-hero .hero-copy h1 {
    max-width: min(720px, 86vw) !important;
    font-size: clamp(4.8rem, 6vw, 5.8rem) !important;
    line-height: 1.08 !important;
  }
}

@media (max-width: 767px) {
  html body .hero.mezzo-home-editorial-hero .hero-copy,
  html body.home .hero.mezzo-home-editorial-hero .hero-copy,
  html body.front-page .hero.mezzo-home-editorial-hero .hero-copy,
  html body.page-template-template-home .hero.mezzo-home-editorial-hero .hero-copy,
  html body.page-template-template-home-zh .hero.mezzo-home-editorial-hero .hero-copy {
    width: 80vw !important;
    min-height: 40vh !important;
    max-width: 80vw !important;
    overflow: visible !important;
  }

  html body .hero.mezzo-home-editorial-hero h1,
  html body.home .hero.mezzo-home-editorial-hero h1,
  html body.front-page .hero.mezzo-home-editorial-hero h1,
  html body.page-template-template-home .hero.mezzo-home-editorial-hero h1,
  html body.page-template-template-home-zh .hero.mezzo-home-editorial-hero h1,
  html body .hero.mezzo-home-editorial-hero .hero-copy h1,
  html body.home .hero.mezzo-home-editorial-hero .hero-copy h1,
  html body.front-page .hero.mezzo-home-editorial-hero .hero-copy h1,
  html body.page-template-template-home .hero.mezzo-home-editorial-hero .hero-copy h1,
  html body.page-template-template-home-zh .hero.mezzo-home-editorial-hero .hero-copy h1 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(3.1rem, 8.6vw, 4.2rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02rem !important;
    margin-bottom: 2rem !important;
    text-wrap: auto !important;
  }
}

@media (max-width: 390px) {
  html body .hero.mezzo-home-editorial-hero h1,
  html body.home .hero.mezzo-home-editorial-hero h1,
  html body.front-page .hero.mezzo-home-editorial-hero h1,
  html body.page-template-template-home .hero.mezzo-home-editorial-hero h1,
  html body.page-template-template-home-zh .hero.mezzo-home-editorial-hero h1,
  html body .hero.mezzo-home-editorial-hero .hero-copy h1,
  html body.home .hero.mezzo-home-editorial-hero .hero-copy h1,
  html body.front-page .hero.mezzo-home-editorial-hero .hero-copy h1,
  html body.page-template-template-home .hero.mezzo-home-editorial-hero .hero-copy h1,
  html body.page-template-template-home-zh .hero.mezzo-home-editorial-hero .hero-copy h1 {
    font-size: clamp(2.8rem, 8.1vw, 3.5rem) !important;
    line-height: 1.15 !important;
  }
}


/* V26 refinement — centered hero copy for desktop and mobile */
html body .hero.mezzo-home-editorial-hero .hero-copy {
  text-align: center !important;
  align-items: center !important;
}
html body .hero.mezzo-home-editorial-hero .hero-copy .eyebrow,
html body .hero.mezzo-home-editorial-hero h1 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html body .hero.mezzo-home-editorial-hero .hero-actions {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}
html body .hero.mezzo-home-editorial-hero .btn-main {
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (min-width: 768px) {
  html body .hero.mezzo-home-editorial-hero .hero-copy {
    padding: 0 clamp(3.6rem, 4vw, 5.4rem) clamp(3.2rem, 4vw, 4.8rem) !important;
  }
  html body .hero.mezzo-home-editorial-hero h1 {
    max-width: 14ch !important;
  }
}
@media (max-width: 767px) {
  html body .hero.mezzo-home-editorial-hero .hero-copy {
    text-align: center !important;
    align-items: center !important;
  }
  html body .hero.mezzo-home-editorial-hero h1 {
    max-width: 100% !important;
  }
}




/* V29 mobile hero text lift — no header/sticky-header override */
@media (max-width: 767px) {
  html body .hero.mezzo-home-editorial-hero {
    overflow: visible !important;
  }

  html body .hero.mezzo-home-editorial-hero .hero-copy,
  html body.home .hero.mezzo-home-editorial-hero .hero-copy,
  html body.front-page .hero.mezzo-home-editorial-hero .hero-copy,
  html body.page-template-template-home .hero.mezzo-home-editorial-hero .hero-copy,
  html body.page-template-template-home-zh .hero.mezzo-home-editorial-hero .hero-copy {
    margin: 0 auto !important;
    margin-top: 0 !important;
    transform: translateY(-80px) !important;
    margin-bottom: -80px !important;
  }
}

/* V33 mobile hero scroll-up animation — move heading banner upward while scrolling */
@media (max-width: 767px) {
  html body .hero.mezzo-home-editorial-hero .hero-copy,
  html body.home .hero.mezzo-home-editorial-hero .hero-copy,
  html body.front-page .hero.mezzo-home-editorial-hero .hero-copy,
  html body.page-template-template-home .hero.mezzo-home-editorial-hero .hero-copy,
  html body.page-template-template-home-zh .hero.mezzo-home-editorial-hero .hero-copy {
    will-change: transform !important;
    transition: transform 0.18s ease-out !important;
  }
}

/* =========================================================
   MEZZO INCOGNITO HERO VISIBILITY PATCH v47
   Purpose: public/incognito visitors do not have the WordPress admin bar,
   while the site header is fixed. Keep every inner/banner hero label below
   the fixed header and make the eyebrow label readable on all templates.
   Affects: shop, projects archive, project details, curtains, blinds,
   wallpaper, blog, about us, contact us, legal and service templates.
   Search remark: MEZZO INCOGNITO HERO VISIBILITY PATCH v47
   ========================================================= */
html body:not(.home):not(.front-page) .inner-page-hero,
html body:not(.home):not(.front-page) .product-page-hero,
html body:not(.home):not(.front-page) .contact-hero,
html body:not(.home):not(.front-page) .legal-hero.inner-page-hero,
html body:not(.home):not(.front-page) .mz-archive-hero,
html body:not(.home):not(.front-page) .mz-project-hero,
html body.post-type-archive-project .mz-archive-hero,
html body.page-template-template-projects .mz-archive-hero,
html body.single-project .mz-project-hero,
html body.single-project .mz-single-project-hero {
  padding-top: clamp(12.8rem, 8.2vw, 15.2rem) !important;
  padding-bottom: clamp(5.8rem, 5.2vw, 7.6rem) !important;
  min-height: clamp(36rem, 36vw, 46rem) !important;
  align-items: center !important;
}

html body:not(.home):not(.front-page) .inner-page-hero .container,
html body:not(.home):not(.front-page) .product-page-hero .container,
html body:not(.home):not(.front-page) .contact-hero .container,
html body:not(.home):not(.front-page) .legal-hero.inner-page-hero .container,
html body:not(.home):not(.front-page) .mz-archive-hero-inner,
html body:not(.home):not(.front-page) .mz-project-hero-inner,
html body.single-project .mz-single-project-hero .mz-project-hero-inner {
  transform: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  max-width: min(88rem, calc(100vw - 3.2rem)) !important;
  overflow: visible !important;
}

html body:not(.home):not(.front-page) .inner-page-hero .container > span:not(.emphasis-wavy),
html body:not(.home):not(.front-page) .product-page-hero .container > span:not(.emphasis-wavy),
html body:not(.home):not(.front-page) .contact-hero .container > span:not(.emphasis-wavy),
html body:not(.home):not(.front-page) .legal-hero.inner-page-hero .container > span:not(.emphasis-wavy),
html body:not(.home):not(.front-page) .mz-archive-hero .mz-archive-eyebrow,
html body:not(.home):not(.front-page) .mz-project-hero .mz-eyebrow,
html body.single-project .mz-single-project-hero .mz-eyebrow {
  display: inline-flex !important;
  color: rgba(255, 248, 241, 0.96) !important;
  -webkit-text-fill-color: rgba(255, 248, 241, 0.96) !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: 0 0.35rem 1.2rem rgba(0,0,0,0.24) !important;
  margin-top: 0 !important;
  margin-bottom: 2rem !important;
  white-space: normal !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

html body:not(.home):not(.front-page) .inner-page-hero h1,
html body:not(.home):not(.front-page) .product-page-hero h1,
html body:not(.home):not(.front-page) .contact-hero h1,
html body:not(.home):not(.front-page) .legal-hero.inner-page-hero h1,
html body:not(.home):not(.front-page) .mz-archive-hero h1,
html body:not(.home):not(.front-page) .mz-project-hero h1,
html body.single-project .mz-single-project-hero h1 {
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphens: auto !important;
  max-width: min(88rem, 100%) !important;
}

html body:not(.home):not(.front-page) .inner-page-hero p,
html body:not(.home):not(.front-page) .product-page-hero p,
html body:not(.home):not(.front-page) .contact-hero p,
html body:not(.home):not(.front-page) .legal-hero.inner-page-hero p,
html body:not(.home):not(.front-page) .mz-archive-hero p,
html body:not(.home):not(.front-page) .mz-project-hero p,
html body.single-project .mz-single-project-hero p {
  color: rgba(255, 248, 241, 0.9) !important;
  -webkit-text-fill-color: rgba(255, 248, 241, 0.9) !important;
  opacity: 1 !important;
  max-width: min(76rem, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 1080px) {
  html body:not(.home):not(.front-page) .inner-page-hero,
  html body:not(.home):not(.front-page) .product-page-hero,
  html body:not(.home):not(.front-page) .contact-hero,
  html body:not(.home):not(.front-page) .legal-hero.inner-page-hero,
  html body:not(.home):not(.front-page) .mz-archive-hero,
  html body:not(.home):not(.front-page) .mz-project-hero,
  html body.post-type-archive-project .mz-archive-hero,
  html body.page-template-template-projects .mz-archive-hero,
  html body.single-project .mz-project-hero,
  html body.single-project .mz-single-project-hero {
    padding-top: 12.2rem !important;
    padding-bottom: 6.2rem !important;
    min-height: 36rem !important;
  }
}

@media (max-width: 767px) {
  html body:not(.home):not(.front-page) .inner-page-hero,
  html body:not(.home):not(.front-page) .product-page-hero,
  html body:not(.home):not(.front-page) .contact-hero,
  html body:not(.home):not(.front-page) .legal-hero.inner-page-hero,
  html body:not(.home):not(.front-page) .mz-archive-hero,
  html body:not(.home):not(.front-page) .mz-project-hero,
  html body.post-type-archive-project .mz-archive-hero,
  html body.page-template-template-projects .mz-archive-hero,
  html body.single-project .mz-project-hero,
  html body.single-project .mz-single-project-hero {
    padding-top: 11rem !important;
    padding-right: 1.8rem !important;
    padding-bottom: 5.6rem !important;
    padding-left: 1.8rem !important;
    min-height: 34rem !important;
  }

  html body:not(.home):not(.front-page) .inner-page-hero .container > span:not(.emphasis-wavy),
  html body:not(.home):not(.front-page) .product-page-hero .container > span:not(.emphasis-wavy),
  html body:not(.home):not(.front-page) .contact-hero .container > span:not(.emphasis-wavy),
  html body:not(.home):not(.front-page) .legal-hero.inner-page-hero .container > span:not(.emphasis-wavy),
  html body:not(.home):not(.front-page) .mz-archive-hero .mz-archive-eyebrow,
  html body:not(.home):not(.front-page) .mz-project-hero .mz-eyebrow,
  html body.single-project .mz-single-project-hero .mz-eyebrow {
    font-size: 1.02rem !important;
    letter-spacing: 0.18em !important;
    line-height: 1.45 !important;
    margin-bottom: 1.5rem !important;
  }

  html body:not(.home):not(.front-page) .inner-page-hero h1,
  html body:not(.home):not(.front-page) .product-page-hero h1,
  html body:not(.home):not(.front-page) .contact-hero h1,
  html body:not(.home):not(.front-page) .legal-hero.inner-page-hero h1,
  html body:not(.home):not(.front-page) .mz-archive-hero h1,
  html body:not(.home):not(.front-page) .mz-project-hero h1,
  html body.single-project .mz-single-project-hero h1 {
    font-size: clamp(3.4rem, 10.4vw, 4.8rem) !important;
    line-height: 1.06 !important;
  }
}

@media (max-width: 380px) {
  html body:not(.home):not(.front-page) .inner-page-hero,
  html body:not(.home):not(.front-page) .product-page-hero,
  html body:not(.home):not(.front-page) .contact-hero,
  html body:not(.home):not(.front-page) .legal-hero.inner-page-hero,
  html body:not(.home):not(.front-page) .mz-archive-hero,
  html body:not(.home):not(.front-page) .mz-project-hero,
  html body.post-type-archive-project .mz-archive-hero,
  html body.page-template-template-projects .mz-archive-hero,
  html body.single-project .mz-project-hero,
  html body.single-project .mz-single-project-hero {
    padding-top: 10.6rem !important;
    padding-right: 1.4rem !important;
    padding-left: 1.4rem !important;
    min-height: 33rem !important;
  }
}