/* =========================================================
   MEZZO PREMIUM HOME HERO - ISOLATED DESIGN TEST
   ---------------------------------------------------------
   This file controls only the new premium home banner.
   It does not use the legacy .hero class and does not touch
   the header template or global hero CSS.

   Font family and base font-size are inherited from style.css:
   --font-heading, --font-body, html { font-size: 62.5%; }
   ========================================================= */

:root {
  --mz-premium-hero-bg: #fffdf9;
  --mz-premium-hero-bg-soft: #f8f1e8;
  --mz-premium-hero-text: #24201d;
  --mz-premium-hero-muted: #5f5751;
  --mz-premium-hero-subtle: #8b7d72;
  --mz-premium-hero-accent: #9f542f;
  --mz-premium-hero-accent-dark: #7a3a20;
  --mz-premium-hero-eyebrow: #9f542f;
  --mz-premium-hero-accent-soft: rgba(160, 82, 45, 0.14);
  --mz-premium-hero-line: rgba(160, 82, 45, 0.22);
  --mz-premium-hero-card: rgba(255, 255, 255, 0.82);
  --mz-premium-hero-shadow: 0 2.4rem 6.4rem rgba(74, 42, 24, 0.12);
  --mz-premium-hero-shadow-soft: 0 1.2rem 3rem rgba(74, 42, 24, 0.08);
  --mz-premium-hero-radius: 3.2rem;
  --mz-premium-hero-image-radius: 7rem 0 0 7rem;
  --mz-premium-hero-max-width: 134rem;
  --mz-premium-hero-side-padding: clamp(2rem, 5vw, 7rem);
  --mz-premium-hero-top-padding: clamp(3.2rem, 4vw, 5.2rem);
  --mz-premium-hero-bottom-padding: clamp(5.8rem, 6vw, 8.2rem);
}

.mz-premium-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(82rem, calc(100svh - 0rem));
  display: flex;
  align-items: flex-start;
  color: var(--mz-premium-hero-text);
  background:
    radial-gradient(circle at 5% 14%, rgba(201, 154, 94, 0.08), transparent 25rem),
    radial-gradient(circle at 92% 8%, rgba(160, 82, 45, 0.06), transparent 30rem),
    linear-gradient(135deg, #ffffff 0%, var(--mz-premium-hero-bg) 55%, var(--mz-premium-hero-bg-soft) 100%);
  padding: var(--mz-premium-hero-top-padding) var(--mz-premium-hero-side-padding) var(--mz-premium-hero-bottom-padding);
}

.mz-premium-hero::before {
  content: "";
  position: absolute;
  left: -6vw;
  right: -6vw;
  bottom: -5.4rem;
  height: clamp(15rem, 15vw, 23rem);
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(120% 80% at 12% 10%, rgba(255, 255, 255, 0.92) 0 34%, transparent 35%),
    radial-gradient(80% 70% at 52% 0%, rgba(250, 244, 237, 0.92) 0 42%, transparent 43%),
    radial-gradient(90% 90% at 92% 14%, rgba(239, 224, 207, 0.74) 0 36%, transparent 37%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(242, 230, 216, 0.9) 68%, rgba(230, 211, 190, 0.62) 100%),
    repeating-linear-gradient(112deg, rgba(160, 82, 45, 0.055) 0 0.1rem, transparent 0.1rem 2.2rem);
  border-top: 0.1rem solid rgba(160, 82, 45, 0.08);
  clip-path: polygon(0 38%, 9% 47%, 19% 35%, 30% 46%, 42% 33%, 54% 44%, 66% 34%, 78% 43%, 90% 34%, 100% 42%, 100% 100%, 0 100%);
  filter: blur(0.1px);
}

.mz-premium-hero::after {
  content: "";
  position: absolute;
  left: -2vw;
  right: -2vw;
  bottom: clamp(7.5rem, 8vw, 11.5rem);
  height: 0.1rem;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(90deg, transparent 0%, rgba(160,82,45,0.13) 18%, rgba(160,82,45,0.34) 48%, rgba(160,82,45,0.12) 74%, transparent 100%);
  transform: rotate(-4deg);
  transform-origin: left center;
}

.mz-premium-hero__shell {
  width: min(var(--mz-premium-hero-max-width), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(34rem, 0.86fr) minmax(42rem, 1.14fr);
  grid-template-areas:
    "copy media"
    "info media";
  align-items: center;
  column-gap: clamp(3.2rem, 5vw, 7rem);
  row-gap: clamp(1.2rem, 1.8vw, 2.4rem);
}

.mz-premium-hero__content {
  grid-area: copy;
  max-width: 58rem;
  position: relative;
  z-index: 2;
}

.mz-premium-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  margin: 0 0 clamp(1.4rem, 1.7vw, 2.2rem);
  max-width: 100%;
}

.mz-premium-hero__eyebrow span {
  display: block;
  font-family: var(--font-body, Raleway, sans-serif);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.24rem;
  text-transform: uppercase;
  color: var(--c-primary, var(--mz-premium-hero-eyebrow));
  margin-bottom: 1rem;
  white-space: nowrap;
}

.mz-premium-hero__eyebrow::after {
  content: "";
  flex: 0 1 clamp(3rem, 5vw, 8rem);
  min-width: 3rem;
  width: clamp(3rem, 5vw, 8rem);
  height: 0.1rem;
  background: var(--mz-premium-hero-line);
}

.mz-premium-hero--zh .mz-premium-hero__eyebrow span,
html[lang^="zh"] .mz-premium-hero__eyebrow span,
html[lang="zh-Hans"] .mz-premium-hero__eyebrow span,
html[lang="zh-CN"] .mz-premium-hero__eyebrow span,
body:lang(zh) .mz-premium-hero__eyebrow span {
  color: var(--c-primary, var(--mz-premium-hero-eyebrow));
  letter-spacing: 0.24rem;
  white-space: nowrap;
}

.mz-premium-hero__title {
  margin: 0;
  max-width: 62rem;
  color: var(--mz-premium-hero-text);
  font-family: var(--font-heading, "Cormorant Garamond", serif);
  font-size: clamp(5.8rem, 5.4vw, 8.8rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.06em;
  text-wrap: balance;
}

.mz-premium-hero--zh .mz-premium-hero__title,
html[lang^="zh"] .mz-premium-hero__title,
html[lang="zh-Hans"] .mz-premium-hero__title,
html[lang="zh-CN"] .mz-premium-hero__title,
body:lang(zh) .mz-premium-hero__title {
  font-size: clamp(4.6rem, 4.25vw, 6.8rem);
  line-height: 1.14;
  letter-spacing: -0.025em;
  font-weight: 600;
  max-width: 100%;
  text-wrap: auto;
  word-break: normal;
  overflow-wrap: normal;
}

.mz-premium-hero__text {
  max-width: 51rem;
  margin: clamp(2.2rem, 2.1vw, 3rem) 0 0;
  color: var(--mz-premium-hero-muted);
  font-family: var(--font-body, Raleway, sans-serif);
  font-size: clamp(1.62rem, 1.2vw, 1.9rem);
  font-weight: 500;
  line-height: 1.75;
}

.mz-premium-hero__media {
  grid-area: media;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.mz-premium-hero__media::before {
  content: "";
  position: absolute;
  inset: -2.4rem 2rem 2.4rem -2.4rem;
  border: 0.1rem solid rgba(201, 154, 94, 0.18);
  border-radius: var(--mz-premium-hero-image-radius);
  z-index: -1;
}

.mz-premium-hero__image-card {
  overflow: hidden;
  min-height: clamp(38rem, 39vw, 56rem);
  border-radius: var(--mz-premium-hero-image-radius);
  box-shadow: var(--mz-premium-hero-shadow);
  background: var(--mz-premium-hero-bg-soft);
}

.mz-premium-hero__image-card img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1.01);
}

.mz-premium-hero__info {
  grid-area: info;
  max-width: 62rem;
  position: relative;
  z-index: 2;
}

.mz-premium-hero__benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 0;
  margin: 0 0 clamp(1.6rem, 2vw, 2.6rem);
  border-radius: 2.4rem;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: var(--mz-premium-hero-shadow-soft);
  backdrop-filter: blur(1.4rem);
}

.mz-premium-hero__benefit {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1.2rem;
  padding: clamp(1.4rem, 1.4vw, 1.8rem) clamp(1.1rem, 1.4vw, 1.8rem);
  color: var(--mz-premium-hero-muted);
  font-family: var(--font-body, Raleway, sans-serif);
  font-size: clamp(1.22rem, 1vw, 1.45rem);
  font-weight: 500;
  line-height: 1.45;
}

.mz-premium-hero__benefit:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 22%;
  right: 0;
  bottom: 22%;
  width: 0.1rem;
  background: rgba(160, 82, 45, 0.16);
}

.mz-premium-hero__benefit-icon {
  width: clamp(4.2rem, 3.5vw, 5rem);
  height: clamp(4.2rem, 3.5vw, 5rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 999rem;
  color: var(--mz-premium-hero-accent);
  background: var(--mz-premium-hero-accent-soft);
}

.mz-premium-hero__benefit-icon svg {
  width: 2.3rem;
  height: 2.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mz-premium-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem;
}

.mz-premium-hero__btn {
  min-height: 5.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  border-radius: 1.2rem;
  padding: 1.55rem 2.8rem;
  font-family: var(--font-body, Raleway, sans-serif);
  font-size: var(--fs-button, 1.35rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.mz-premium-hero__btn:hover,
.mz-premium-hero__btn:focus-visible {
  transform: translateY(-0.2rem);
}

.mz-premium-hero__btn--primary {
  min-width: 22rem;
  color: #fff;
  background: linear-gradient(135deg, var(--mz-premium-hero-accent) 0%, var(--mz-premium-hero-accent-dark) 100%);
  border: 0.1rem solid transparent;
  box-shadow: 0 1rem 2.4rem rgba(111, 52, 27, 0.22);
}

.mz-premium-hero__btn--primary:hover,
.mz-premium-hero__btn--primary:focus-visible {
  box-shadow: 0 1.4rem 3rem rgba(111, 52, 27, 0.28);
}

.mz-premium-hero__btn--secondary {
  min-width: 18rem;
  color: var(--mz-premium-hero-accent-dark);
  background: rgba(255,255,255,0.58);
  border: 0.1rem solid rgba(160, 82, 45, 0.28);
}

.mz-premium-hero__btn--secondary:hover,
.mz-premium-hero__btn--secondary:focus-visible {
  border-color: rgba(160, 82, 45, 0.5);
  box-shadow: 0 1rem 2.4rem rgba(111, 52, 27, 0.1);
}

@media (max-width: 1180px) {
  .mz-premium-hero {
    --mz-premium-hero-side-padding: clamp(2rem, 4vw, 4.8rem);
  }

  .mz-premium-hero__shell {
    grid-template-columns: minmax(32rem, 0.9fr) minmax(36rem, 1.1fr);
    column-gap: clamp(2.4rem, 4vw, 5rem);
  }

  .mz-premium-hero__title {
    font-size: clamp(5.2rem, 5.8vw, 7.2rem);
  }

  .mz-premium-hero--zh .mz-premium-hero__title,
  html[lang^="zh"] .mz-premium-hero__title,
  html[lang="zh-Hans"] .mz-premium-hero__title,
  html[lang="zh-CN"] .mz-premium-hero__title,
  body:lang(zh) .mz-premium-hero__title {
    font-size: clamp(4.2rem, 4.8vw, 6.2rem);
    line-height: 1.16;
  }

  .mz-premium-hero__benefit {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

@media (max-width: 940px) {
  :root {
    --mz-premium-hero-image-radius: 3.2rem;
  }

  .mz-premium-hero {
    min-height: auto;
    padding-top: clamp(3.2rem, 5.5vw, 4.8rem);
    padding-bottom: clamp(5.8rem, 8vw, 7.8rem);
  }

  .mz-premium-hero__shell {
    max-width: 72rem;
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "media"
      "info";
    row-gap: 2rem;
  }

  .mz-premium-hero__content,
  .mz-premium-hero__info {
    max-width: none;
  }

  .mz-premium-hero__title {
    max-width: 68rem;
    font-size: clamp(5rem, 9.5vw, 7.2rem);
  }

  /* Tablet only: avoid large empty space beside English hero title.
     The desktop <br> breaks are useful on large screens, but on tablet
     they force a short left block and leave a big blank area on the right. */
  .mz-premium-hero:not(.mz-premium-hero--zh) .mz-premium-hero__title {
    max-width: 100%;
    text-wrap: auto;
  }

  .mz-premium-hero:not(.mz-premium-hero--zh) .mz-premium-hero__title br {
    display: none;
  }

  .mz-premium-hero--zh .mz-premium-hero__title,
  html[lang^="zh"] .mz-premium-hero__title,
  html[lang="zh-Hans"] .mz-premium-hero__title,
  html[lang="zh-CN"] .mz-premium-hero__title,
  body:lang(zh) .mz-premium-hero__title {
    font-size: clamp(4rem, 7.6vw, 5.8rem);
    line-height: 1.16;
  }

  .mz-premium-hero__text {
    max-width: 58rem;
  }

  .mz-premium-hero__image-card {
    min-height: clamp(30rem, 48vw, 42rem);
  }

  .mz-premium-hero__media::before {
    inset: -1.4rem 1rem 1.4rem -1.4rem;
  }
}

@media (max-width: 640px) {
  .mz-premium-hero {
    --mz-premium-hero-side-padding: clamp(1.6rem, 5.4vw, 2.4rem);
    padding-top: clamp(2.4rem, 7vw, 3.6rem);
    padding-bottom: 5.8rem;
    background:
      radial-gradient(circle at 0% 0%, rgba(201, 154, 94, 0.1), transparent 20rem),
      linear-gradient(180deg, #fff 0%, #fffdf9 54%, #f8f1e8 100%);
  }

  .mz-premium-hero::before {
    left: -12vw;
    right: -12vw;
    bottom: -3.8rem;
    width: auto;
    height: 15.5rem;
  }

  .mz-premium-hero::after {
    left: -8vw;
    right: -8vw;
    bottom: 7.2rem;
    transform: rotate(-5deg);
  }

  .mz-premium-hero__shell {
    row-gap: 1.6rem;
  }

  .mz-premium-hero__eyebrow {
    gap: 1rem;
    margin-bottom: 1.2rem;
  }

  .mz-premium-hero__eyebrow span {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.24rem;
    color: var(--c-primary, var(--mz-premium-hero-eyebrow));
    margin-bottom: 1rem;
    white-space: nowrap;
  }

  .mz-premium-hero__eyebrow::after {
    flex-basis: 3.8rem;
    min-width: 3.2rem;
    width: 3.8rem;
  }

  .mz-premium-hero--zh .mz-premium-hero__eyebrow span,
  html[lang^="zh"] .mz-premium-hero__eyebrow span,
  html[lang="zh-Hans"] .mz-premium-hero__eyebrow span,
  html[lang="zh-CN"] .mz-premium-hero__eyebrow span,
  body:lang(zh) .mz-premium-hero__eyebrow span {
    font-size: 1.15rem;
    letter-spacing: 0.24rem;
    white-space: nowrap;
  }

  .mz-premium-hero__title {
    font-size: clamp(4.7rem, 14vw, 6.4rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
  }

  .mz-premium-hero:not(.mz-premium-hero--zh) .mz-premium-hero__title br {
    display: initial;
  }

  .mz-premium-hero--zh .mz-premium-hero__title,
  html[lang^="zh"] .mz-premium-hero__title,
  html[lang="zh-Hans"] .mz-premium-hero__title,
  html[lang="zh-CN"] .mz-premium-hero__title,
  body:lang(zh) .mz-premium-hero__title {
    font-size: clamp(3.25rem, 8.35vw, 4.25rem);
    line-height: 1.18;
    letter-spacing: -0.012em;
    max-width: 100%;
    text-wrap: auto;
    word-break: normal;
    overflow-wrap: normal;
  }

  .mz-premium-hero__text {
    margin-top: 2rem;
    font-size: 1.58rem;
    line-height: 1.72;
  }

  .mz-premium-hero__image-card {
    min-height: clamp(22rem, 60vw, 32rem);
    border-radius: 2.8rem;
  }

  .mz-premium-hero__media::before {
    display: none;
  }

  .mz-premium-hero__benefits {
    margin-top: -0.4rem;
    margin-bottom: 1.4rem;
    border-radius: 2.4rem;
  }

  .mz-premium-hero__benefit {
    padding: 1.6rem 1rem;
    font-size: 1.22rem;
  }

  .mz-premium-hero__benefit-icon {
    width: 4.4rem;
    height: 4.4rem;
  }

  .mz-premium-hero__benefit-icon svg {
    width: 2.1rem;
    height: 2.1rem;
  }

  .mz-premium-hero__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .mz-premium-hero__btn {
    width: 100%;
    min-height: 5.2rem;
    border-radius: 1.2rem;
    font-size: 1.48rem;
  }
}

@media (max-width: 430px) {
  .mz-premium-hero__eyebrow {
    gap: 0.75rem;
  }

  .mz-premium-hero__eyebrow span {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.24rem;
    margin-bottom: 1rem;
  }

  .mz-premium-hero--zh .mz-premium-hero__eyebrow span,
  html[lang^="zh"] .mz-premium-hero__eyebrow span,
  html[lang="zh-Hans"] .mz-premium-hero__eyebrow span,
  html[lang="zh-CN"] .mz-premium-hero__eyebrow span,
  body:lang(zh) .mz-premium-hero__eyebrow span {
    font-size: 1.15rem;
    letter-spacing: 0.24rem;
    white-space: nowrap;
  }

  .mz-premium-hero__eyebrow::after {
    flex-basis: 2.8rem;
    min-width: 2.4rem;
    width: 2.8rem;
  }

  .mz-premium-hero__title {
    font-size: clamp(4.2rem, 13.4vw, 5.3rem);
  }

  .mz-premium-hero--zh .mz-premium-hero__title,
  html[lang^="zh"] .mz-premium-hero__title,
  html[lang="zh-Hans"] .mz-premium-hero__title,
  html[lang="zh-CN"] .mz-premium-hero__title,
  body:lang(zh) .mz-premium-hero__title {
    font-size: clamp(2.85rem, 8.1vw, 3.6rem);
    line-height: 1.2;
    max-width: 100%;
    text-wrap: auto;
    word-break: normal;
    overflow-wrap: normal;
  }

  .mz-premium-hero__text {
    font-size: 1.48rem;
  }

  .mz-premium-hero__benefit {
    font-size: 1.1rem;
    line-height: 1.35;
    padding: 1.45rem 0.65rem;
  }

  .mz-premium-hero__benefit-icon {
    width: 3.9rem;
    height: 3.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mz-premium-hero__btn {
    transition: none;
  }

  .mz-premium-hero__btn:hover,
  .mz-premium-hero__btn:focus-visible {
    transform: none;
  }
}

/* =========================================================
   V17 PATCH: premium hero top clearance for fixed header
   ---------------------------------------------------------
   The home hero uses .mz-premium-hero, not the legacy .hero class.
   Keep the eyebrow text "Curtain Specialist for 20 Years" below the
   fixed translucent header on desktop, tablet and mobile.
   ========================================================= */
body.home .mz-premium-hero,
body.front-page .mz-premium-hero,
html body.home .mz-premium-hero,
html body.front-page .mz-premium-hero {
  padding-top: max(var(--mz-premium-hero-top-padding), 13.2rem) !important;
}

body.home .mz-premium-hero__eyebrow,
body.front-page .mz-premium-hero__eyebrow,
html body.home .mz-premium-hero__eyebrow,
html body.front-page .mz-premium-hero__eyebrow {
  position: relative;
  z-index: 3;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (max-width: 1180px) {
  body.home .mz-premium-hero,
  body.front-page .mz-premium-hero,
  html body.home .mz-premium-hero,
  html body.front-page .mz-premium-hero {
    padding-top: 12.2rem !important;
  }
}

@media (max-width: 940px) {
  body.home .mz-premium-hero,
  body.front-page .mz-premium-hero,
  html body.home .mz-premium-hero,
  html body.front-page .mz-premium-hero {
    padding-top: 10.8rem !important;
  }
}

@media (max-width: 640px) {
  body.home .mz-premium-hero,
  body.front-page .mz-premium-hero,
  html body.home .mz-premium-hero,
  html body.front-page .mz-premium-hero {
    padding-top: 9.8rem !important;
  }
}

@media (max-width: 420px) {
  body.home .mz-premium-hero,
  body.front-page .mz-premium-hero,
  html body.home .mz-premium-hero,
  html body.front-page .mz-premium-hero {
    padding-top: 9.4rem !important;
  }
}

/* =========================================================
   V24 PATCH: stronger premium hero top clearance
   ---------------------------------------------------------
   Keeps the eyebrow label below the fixed transparent header
   on desktop, tablet, mobile and small mobile. This patch is
   applied directly to .mz-premium-hero so it also works when
   WordPress body classes differ in local/XAMPP testing.
   ========================================================= */
html body .mz-premium-hero {
  padding-top: max(var(--mz-premium-hero-top-padding), 14rem) !important;
}

html body .mz-premium-hero__eyebrow,
html body .mz-premium-hero__eyebrow span {
  position: relative;
  z-index: 5;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (max-width: 1180px) {
  html body .mz-premium-hero {
    padding-top: 13.6rem !important;
  }
}

@media (max-width: 940px) {
  html body .mz-premium-hero {
    padding-top: 13.2rem !important;
  }
}

@media (max-width: 640px) {
  html body .mz-premium-hero {
    padding-top: 12.8rem !important;
  }
}

@media (max-width: 430px) {
  html body .mz-premium-hero {
    padding-top: 13.4rem !important;
  }
}

@media (max-width: 360px) {
  html body .mz-premium-hero {
    padding-top: 13.8rem !important;
  }
}