/* =========================================================
   LHS UNIFIED HERO SCALE — July 18, 2026
   - Main homepage hero reduced by 35%
   - Top-of-page hero/banner height unified across the site
   - Hero artwork is fitted in full (no image-content cropping)
   ========================================================= */
:root{
  --lhs-unified-hero-h:clamp(338px,27.7604vw,533px);
  --lhs-unified-hero-h-mobile:475px;
  --lhs-unified-hero-h-small:462px;
}

/* ---------- Homepage hero: exact 35% reduction ---------- */
.lhs-home-hero{
  height:var(--lhs-unified-hero-h)!important;
  min-height:var(--lhs-unified-hero-h)!important;
  max-height:var(--lhs-unified-hero-h)!important;
  background:#eee1d0!important;
}
.lhs-home-hero .lhs-home-hero-slide,
.lhs-home-hero .lhs-home-hero-slide.active,
.lhs-home-hero .model-area,
.lhs-home-hero .hero-image-link{
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
}
.lhs-home-hero .model-area img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:#eee1d0!important;
  transform:none!important;
}
.lhs-home-hero .lhs-home-hero-copy{
  width:min(38vw,570px)!important;
}
.lhs-home-hero .lhs-home-hero-copy .typewriter-script{
  margin-bottom:10px!important;
  font-size:11px!important;
}
.lhs-home-hero .lhs-home-hero-copy .typewriter-title{
  margin-bottom:12px!important;
  font-size:clamp(32px,3.15vw,54px)!important;
  line-height:1.01!important;
}
.lhs-home-hero .lhs-home-hero-copy .typewriter-body{
  max-width:500px!important;
  margin-bottom:16px!important;
  font-size:clamp(13px,.9vw,16px)!important;
  line-height:1.45!important;
}
.lhs-home-hero .lhs-home-hero-copy .typewriter-cta{
  min-width:190px!important;
  min-height:45px!important;
  padding-inline:24px!important;
  font-size:10px!important;
}
.lhs-home-hero .slider-dots{bottom:10px!important;}
.lhs-home-hero .slider-dots button{width:54px!important;height:4px!important;}
.lhs-home-hero .slider-dots button.active{width:82px!important;}

/* ---------- One shared top-banner height across site pages ---------- */
.system-hero,
.content-hero,
.partner-hero,
.lhs-checkout-hero,
.ring-hero,
.lhs-co-hero,
.lhs-lace-live-hero,
.lhs-signature-hero,
.lhs-kc-hero,
.lhs-kc-compare-hero,
.lhs-hcg-hero,
.lhs-hdg-hero,
.density-hero,
.guide-hero,
.mold-guide-hero,
.lhs-lab-hero,
.lhs-bsm-hero,
.lhs-hlg-hero,
.lhs-msg-hero,
.lhs-arg-hero,
.lhs-f48-hero{
  box-sizing:border-box!important;
  height:var(--lhs-unified-hero-h)!important;
  min-height:var(--lhs-unified-hero-h)!important;
  max-height:var(--lhs-unified-hero-h)!important;
  overflow:hidden!important;
}

/* Full artwork remains visible: no cover-cropping in top heroes. */
.system-hero>img,
.lhs-lace-live-hero>img,
.lhs-signature-hero-media img,
.lhs-co-hero-media img,
.lhs-lab-hero-media img,
.ring-hero img,
.density-hero img,
.guide-hero img,
.mold-guide-hero img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}
.system-hero,
.lhs-lace-live-hero,
.lhs-signature-hero,
.lhs-co-hero,
.lhs-lab-hero{
  background:#eadfce!important;
}

/* Keep text-led heroes vertically centered inside the same height. */
.content-hero,
.partner-hero,
.lhs-checkout-hero,
.ring-hero,
.lhs-hcg-hero,
.lhs-hdg-hero,
.density-hero,
.guide-hero,
.mold-guide-hero,
.lhs-kc-compare-hero{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  padding-top:28px!important;
  padding-bottom:28px!important;
}
.content-hero h1,
.partner-hero h1,
.lhs-checkout-hero h1,
.ring-hero h1,
.lhs-hcg-hero h1,
.lhs-hdg-hero h1,
.density-hero h1,
.guide-hero h1,
.mold-guide-hero h1,
.lhs-kc-compare-hero h1{
  font-size:clamp(34px,4.2vw,62px)!important;
  line-height:1!important;
  margin-top:10px!important;
  margin-bottom:14px!important;
}

/* Image-led category and product heroes. */
.system-hero-copy,
.lhs-lace-live-content,
.lhs-signature-hero-content,
.lhs-co-hero-copy,
.lhs-lab-hero-copy{
  max-height:calc(var(--lhs-unified-hero-h) - 44px)!important;
}
.system-hero-copy h1,
.lhs-lace-live-title,
.lhs-signature-hero-content h1,
.lhs-co-hero h1,
.lhs-lab-hero h1{
  font-size:clamp(34px,4.5vw,64px)!important;
  line-height:1!important;
}
.lhs-signature-hero-content,
.lhs-co-hero,
.lhs-lab-hero{
  padding-top:34px!important;
  padding-bottom:34px!important;
}
.lhs-signature-hero-content>p:not(.lhs-signature-eyebrow),
.lhs-co-hero-copy>p:not(.lhs-co-eyebrow),
.lhs-lab-hero-copy>p:not(.lhs-lab-eyebrow){
  font-size:14px!important;
  line-height:1.5!important;
  margin-top:14px!important;
}
.lhs-co-hero-actions,
.lhs-lab-hero-actions{margin-top:18px!important;}
.lhs-co-hero-points{bottom:14px!important;}
.lhs-co-hero-points span{padding:9px 13px!important;}
.lhs-lab-trust-row{margin-top:16px!important;}

/* Knowledge / interactive guide heroes: same frame, compact internals. */
.lhs-kc-hero,
.lhs-bsm-hero,
.lhs-hlg-hero,
.lhs-msg-hero,
.lhs-arg-hero,
.lhs-f48-hero{
  padding:22px 28px!important;
}
.lhs-kc-hero>.lhs-kc-shell,
.lhs-bsm-hero>.lhs-kc-shell,
.lhs-hlg-hero>.lhs-kc-shell,
.lhs-msg-hero>.lhs-kc-shell,
.lhs-arg-hero>.lhs-kc-shell,
.lhs-f48-hero>.lhs-kc-shell{
  height:100%!important;
  min-height:0!important;
}
.lhs-kc-hero-grid,
.lhs-bsm-hero-grid,
.lhs-hlg-hero-grid,
.lhs-msg-hero-grid,
.lhs-arg-hero-grid,
.lhs-f48-hero-grid{
  height:calc(100% - 28px)!important;
  min-height:0!important;
  gap:clamp(24px,4vw,58px)!important;
  align-items:center!important;
}
.lhs-kc-hero h1,
.lhs-bsm-hero h1,
.lhs-hlg-hero h1,
.lhs-msg-hero h1,
.lhs-arg-hero h1,
.lhs-f48-hero h1{
  font-size:clamp(34px,4.4vw,64px)!important;
  line-height:.98!important;
  margin-top:10px!important;
  margin-bottom:12px!important;
}
.lhs-kc-hero-copy>p:not(.lhs-kc-eyebrow),
.lhs-bsm-hero p:not(.lhs-kc-kicker),
.lhs-hlg-hero p:not(.lhs-kc-kicker),
.lhs-msg-hero p:not(.lhs-kc-kicker),
.lhs-arg-hero p:not(.lhs-kc-kicker),
.lhs-f48-hero p:not(.lhs-kc-kicker){
  font-size:13px!important;
  line-height:1.48!important;
  margin-top:10px!important;
}
.lhs-kc-hero-actions,
.lhs-bsm-hero-actions,
.lhs-hlg-hero-actions,
.lhs-msg-actions,
.lhs-arg-actions,
.lhs-f48-actions{
  margin-top:16px!important;
  gap:8px!important;
}
.lhs-kc-hero-actions a,
.lhs-bsm-hero-actions a,
.lhs-hlg-hero-actions a,
.lhs-msg-actions a,
.lhs-arg-actions a,
.lhs-f48-actions a{
  min-height:42px!important;
  padding:9px 17px!important;
  font-size:9px!important;
}
.lhs-kc-hero-visual,
.lhs-bsm-hero-visual,
.lhs-hlg-hero-visual,
.lhs-msg-hero-visual,
.lhs-arg-hero-visual,
.lhs-f48-clock{
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
}
.lhs-kc-base-orbit{width:min(250px,64%);height:min(250px,64%);}
.lhs-bsm-head-outline{max-height:82%!important;}
.lhs-hlg-hero-visual svg{height:92%!important;width:auto!important;max-width:100%!important;}
.lhs-msg-orbit{transform:scale(.78);}
.lhs-arg-hero-visual{transform:scale(.82);}
.lhs-f48-clock{transform:scale(.76);}

/* Legacy guide page with link pills must also stay inside the unified frame. */
.guide-hero .guide-shell{
  width:min(1120px,calc(100% - 44px))!important;
  margin:auto!important;
}
.guide-hero h2{margin:16px 0 10px!important;font-size:23px!important;}
.guide-hero .guide-links-grid{gap:10px!important;}
.guide-hero .guide-link-pill{min-height:38px!important;padding:8px 14px!important;}

/* ---------- Mobile: same shared frame, content-preserving layout ---------- */
@media(max-width:700px){
  .lhs-home-hero,
  .system-hero,
  .content-hero,
  .partner-hero,
  .lhs-checkout-hero,
  .ring-hero,
  .lhs-co-hero,
  .lhs-lace-live-hero,
  .lhs-signature-hero,
  .lhs-kc-hero,
  .lhs-kc-compare-hero,
  .lhs-hcg-hero,
  .lhs-hdg-hero,
  .density-hero,
  .guide-hero,
  .mold-guide-hero,
  .lhs-lab-hero,
  .lhs-bsm-hero,
  .lhs-hlg-hero,
  .lhs-msg-hero,
  .lhs-arg-hero,
  .lhs-f48-hero{
    height:var(--lhs-unified-hero-h-mobile)!important;
    min-height:var(--lhs-unified-hero-h-mobile)!important;
    max-height:var(--lhs-unified-hero-h-mobile)!important;
  }

  /* Homepage uses a compact full-artwork row + live-copy row. */
  .lhs-home-hero .lhs-home-hero-slide.active{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:215px 260px!important;
  }
  .lhs-home-hero .model-area{
    position:relative!important;
    inset:auto!important;
    grid-row:1!important;
    height:215px!important;
    min-height:215px!important;
    max-height:215px!important;
  }
  .lhs-home-hero .model-area img{
    object-fit:contain!important;
  }
  .lhs-home-hero .lhs-home-hero-copy-left .lhs-home-hero-copy,
  .lhs-home-hero .lhs-home-hero-copy-right .lhs-home-hero-copy{
    position:relative!important;
    inset:auto!important;
    grid-row:2!important;
    width:100%!important;
    max-width:100%!important;
    height:260px!important;
    padding:18px 20px 34px!important;
    transform:none!important;
    justify-content:center!important;
    overflow:hidden!important;
  }
  .lhs-home-hero .lhs-home-hero-copy .typewriter-script{font-size:9px!important;margin-bottom:7px!important;}
  .lhs-home-hero .lhs-home-hero-copy .typewriter-title{font-size:clamp(25px,7.4vw,32px)!important;margin-bottom:8px!important;}
  .lhs-home-hero .lhs-home-hero-copy .typewriter-body{font-size:12px!important;line-height:1.38!important;margin-bottom:11px!important;}
  .lhs-home-hero .lhs-home-hero-copy .typewriter-cta{min-height:42px!important;font-size:9px!important;}

  /* Compact page hero copy. */
  .system-hero-copy{padding:20px!important;}
  .system-hero-copy h1,
  .lhs-lace-live-title,
  .lhs-signature-hero-content h1,
  .lhs-co-hero h1,
  .lhs-lab-hero h1{font-size:clamp(30px,9vw,42px)!important;}
  .lhs-signature-hero-content,
  .lhs-co-hero,
  .lhs-lab-hero{padding:24px 18px!important;}
  .lhs-signature-hero-content>p:not(.lhs-signature-eyebrow),
  .lhs-co-hero-copy>p:not(.lhs-co-eyebrow),
  .lhs-lab-hero-copy>p:not(.lhs-lab-eyebrow){font-size:12px!important;line-height:1.42!important;}
  .lhs-co-hero-points{left:12px!important;right:12px!important;bottom:10px!important;gap:6px!important;}
  .lhs-co-hero-points span{padding:7px 9px!important;}
  .lhs-co-hero-points small{font-size:8px!important;}
  .lhs-lab-trust-row{display:none!important;}

  /* Text-only heroes remain centered and readable. */
  .content-hero,
  .partner-hero,
  .lhs-checkout-hero,
  .ring-hero,
  .lhs-hcg-hero,
  .lhs-hdg-hero,
  .density-hero,
  .guide-hero,
  .mold-guide-hero,
  .lhs-kc-compare-hero{
    padding:24px 18px!important;
  }
  .content-hero h1,
  .partner-hero h1,
  .lhs-checkout-hero h1,
  .ring-hero h1,
  .lhs-hcg-hero h1,
  .lhs-hdg-hero h1,
  .density-hero h1,
  .guide-hero h1,
  .mold-guide-hero h1,
  .lhs-kc-compare-hero h1{
    font-size:clamp(30px,10vw,42px)!important;
  }

  /* Interactive guide heroes keep their complete copy; decorative art is
     removed only on narrow screens so nothing textual is clipped. */
  .lhs-kc-hero,
  .lhs-bsm-hero,
  .lhs-hlg-hero,
  .lhs-msg-hero,
  .lhs-arg-hero,
  .lhs-f48-hero{padding:18px!important;}
  .lhs-kc-hero-grid,
  .lhs-bsm-hero-grid,
  .lhs-hlg-hero-grid,
  .lhs-msg-hero-grid,
  .lhs-arg-hero-grid,
  .lhs-f48-hero-grid{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    height:calc(100% - 26px)!important;
    gap:8px!important;
  }
  .lhs-kc-hero-visual,
  .lhs-bsm-hero-visual,
  .lhs-hlg-hero-visual,
  .lhs-msg-hero-visual,
  .lhs-arg-hero-visual,
  .lhs-f48-clock{display:none!important;}
  .lhs-kc-hero h1,
  .lhs-bsm-hero h1,
  .lhs-hlg-hero h1,
  .lhs-msg-hero h1,
  .lhs-arg-hero h1,
  .lhs-f48-hero h1{
    font-size:clamp(31px,9.5vw,42px)!important;
  }
  .lhs-kc-hero-copy>p:not(.lhs-kc-eyebrow),
  .lhs-bsm-hero p:not(.lhs-kc-kicker),
  .lhs-hlg-hero p:not(.lhs-kc-kicker),
  .lhs-msg-hero p:not(.lhs-kc-kicker),
  .lhs-arg-hero p:not(.lhs-kc-kicker),
  .lhs-f48-hero p:not(.lhs-kc-kicker){font-size:12px!important;line-height:1.42!important;}
  .lhs-kc-hero-actions,
  .lhs-bsm-hero-actions,
  .lhs-hlg-hero-actions,
  .lhs-msg-actions,
  .lhs-arg-actions,
  .lhs-f48-actions{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;
  }
  .lhs-kc-hero-actions a,
  .lhs-bsm-hero-actions a,
  .lhs-hlg-hero-actions a,
  .lhs-msg-actions a,
  .lhs-arg-actions a,
  .lhs-f48-actions a{
    width:auto!important;
    min-height:39px!important;
    padding:8px 12px!important;
  }

  .guide-hero .guide-links-grid{grid-template-columns:1fr 1fr!important;}
  .guide-hero .guide-link-pill{font-size:10px!important;}
}

@media(max-width:430px){
  .lhs-home-hero,
  .system-hero,
  .content-hero,
  .partner-hero,
  .lhs-checkout-hero,
  .ring-hero,
  .lhs-co-hero,
  .lhs-lace-live-hero,
  .lhs-signature-hero,
  .lhs-kc-hero,
  .lhs-kc-compare-hero,
  .lhs-hcg-hero,
  .lhs-hdg-hero,
  .density-hero,
  .guide-hero,
  .mold-guide-hero,
  .lhs-lab-hero,
  .lhs-bsm-hero,
  .lhs-hlg-hero,
  .lhs-msg-hero,
  .lhs-arg-hero,
  .lhs-f48-hero{
    height:var(--lhs-unified-hero-h-small)!important;
    min-height:var(--lhs-unified-hero-h-small)!important;
    max-height:var(--lhs-unified-hero-h-small)!important;
  }
  .lhs-home-hero .lhs-home-hero-slide.active{grid-template-rows:195px 267px!important;}
  .lhs-home-hero .model-area{height:195px!important;min-height:195px!important;max-height:195px!important;}
  .lhs-home-hero .lhs-home-hero-copy-left .lhs-home-hero-copy,
  .lhs-home-hero .lhs-home-hero-copy-right .lhs-home-hero-copy{height:267px!important;padding:16px 17px 32px!important;}
  .lhs-kc-hero-actions a,
  .lhs-bsm-hero-actions a,
  .lhs-hlg-hero-actions a,
  .lhs-msg-actions a,
  .lhs-arg-actions a,
  .lhs-f48-actions a{font-size:8px!important;padding-inline:10px!important;}
  .guide-hero .guide-links-grid{grid-template-columns:1fr!important;}
  .guide-hero .guide-link-stack{gap:6px!important;}
}


/* =========================================================
   LHS HERO ART DIRECTION — edge anchored without cropping
   - Preserve the complete 1920x820 artwork with contain
   - Anchor the visual subject to its designed outer edge
   - Leave any ratio compensation space toward the live-copy area
   ========================================================= */

/* Homepage campaign: copy-left artwork stays against the right edge. */
.lhs-home-hero .lhs-home-hero-combined .model-area img,
.lhs-home-hero .lhs-home-hero-men .model-area img,
.lhs-home-hero .lhs-home-hero-custom .model-area img{
  object-position:right center!important;
}

/* Women campaign: model-led artwork stays against the left edge. */
.lhs-home-hero .lhs-home-hero-women .model-area img{
  object-position:left center!important;
}

/* Category banners place the visual collection away from the left copy. */
.system-page .system-hero>img,
.lhs-lace-live-hero>.lhs-lace-live-bg,
.lhs-co-hero-media img{
  object-position:right center!important;
}

/* Keep page-specific art direction for System Finder and product detail
   heroes. Their own CSS / inline focal points now remain effective because
   the shared height layer no longer forces a centered focal point. */

@media(max-width:700px){
  .lhs-home-hero .lhs-home-hero-combined .model-area img,
  .lhs-home-hero .lhs-home-hero-men .model-area img,
  .lhs-home-hero .lhs-home-hero-custom .model-area img{
    object-position:right center!important;
  }

  .lhs-home-hero .lhs-home-hero-women .model-area img{
    object-position:left center!important;
  }
}