/* V9: reference-traced hero geometry.
   SVG = only mask + gold arc. Home media remains a real HTML5 video.
   Product/service media remains a real IMG. Media framing is independent of the SVG. */

:root{--v9-gold:#d1a04a}

/* ================================================================
   HOME HERO — media wrapper and independent live video
   ================================================================ */
.home-page .reference-home-hero{
  position:relative!important;display:block!important;isolation:isolate!important;overflow:hidden!important;
  padding:0!important;background:linear-gradient(108deg,#fff 0%,#fbfcfe 46%,#edf3f9 100%)!important;
}
.home-page .reference-home-hero .hero-copy{position:absolute!important;z-index:8!important}
.home-page .reference-home-hero .hero-media{
  position:absolute!important;z-index:2!important;overflow:visible!important;margin:0!important;
  border-radius:0!important;box-shadow:none!important;filter:none!important;background:transparent!important;
}
.home-page .reference-home-hero .hero-media:before{display:none!important}
.home-page .hero-video-clip{
  position:absolute!important;inset:0!important;z-index:1!important;overflow:hidden!important;
  -webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important;
  -webkit-mask-position:0 0!important;mask-position:0 0!important;
  -webkit-mask-size:100% 100%!important;mask-size:100% 100%!important;
}
.home-page .hero-video-clip video,
.home-page .reference-home-hero .hero-media video{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  object-fit:cover!important;border-radius:0!important;z-index:1!important;
  -webkit-mask-image:none!important;mask-image:none!important;
  -webkit-clip-path:none!important;clip-path:none!important;
  will-change:transform!important;
}
.home-page .hero-gold-arc{
  position:absolute!important;inset:0!important;z-index:5!important;display:block!important;
  width:100%!important;height:100%!important;pointer-events:none!important;
  background-repeat:no-repeat!important;background-position:0 0!important;background-size:100% 100%!important;
}
.home-page .reference-home-hero .blueprint{z-index:1!important}
.home-page .reference-home-hero .stock-cards{z-index:9!important}
.home-page .reference-home-hero .video-toggle{z-index:10!important}

@media (min-width:981px){
  .home-page .reference-home-hero{height:clamp(570px,42vw,650px)!important;min-height:570px!important}
  .home-page .reference-home-hero .blueprint{
    left:1.4%!important;top:52px!important;width:36%!important;height:calc(100% - 70px)!important;opacity:.13!important;
    background-position:left center!important;background-size:contain!important;
  }
  .home-page .reference-home-hero .hero-copy{
    left:clamp(38px,3.4vw,62px)!important;top:clamp(120px,15vh,150px)!important;width:31.5%!important;
    padding:0!important;
  }
  .home-page .reference-home-hero h1{font-size:clamp(40px,3.45vw,56px)!important;line-height:1.045!important;max-width:510px!important}
  .home-page .reference-home-hero .hero-copy>p:not(.eyebrow){max-width:390px!important}

  /* Reference: media starts exactly at the 35% text boundary. No negative margin. */
  .home-page .reference-home-hero .hero-media{top:0!important;right:0!important;width:65%!important;height:100%!important;left:auto!important}
  .home-page .hero-video-clip{
    -webkit-mask-image:url('../media/home-v9-desktop-mask.svg')!important;
    mask-image:url('../media/home-v9-desktop-mask.svg')!important;
  }
  /* The reference video is more zoomed and its chain sits farther right than V8. */
  .home-page .hero-video-clip video{
    object-position:center 47%!important;transform:scale(1.22)!important;transform-origin:left center!important;
  }
  .home-page .hero-gold-arc{background-image:url('../media/home-v9-desktop-arc.svg')!important}
  .home-page .reference-home-hero .stock-cards{left:12%!important;right:auto!important;bottom:24px!important;gap:18px!important}
  .home-page .reference-home-hero .stock-cards>div{width:205px!important;min-width:205px!important;height:72px!important}
  .home-page .reference-home-hero .video-toggle{left:16%!important;bottom:111px!important}
}

@media (min-width:601px) and (max-width:980px){
  .home-page .reference-home-hero{height:520px!important;min-height:520px!important;padding:0!important}
  .home-page .reference-home-hero .blueprint{
    left:0!important;top:58px!important;width:36%!important;height:350px!important;opacity:.15!important;
    background-position:left top!important;background-size:contain!important;
  }
  .home-page .reference-home-hero .hero-copy{
    left:15px!important;top:96px!important;width:29%!important;padding:0!important;z-index:8!important;
  }
  .home-page .reference-home-hero h1{font-size:clamp(24px,4.4vw,34px)!important;line-height:1.035!important;min-height:0!important;margin:6px 0 9px!important}
  .home-page .reference-home-hero .hero-copy>p:not(.eyebrow){font-size:10px!important;line-height:1.38!important}
  .home-page .reference-home-hero .actions{display:none!important}

  /* Tablet reference is a full-width leaf shape behind the floating header. */
  .home-page .reference-home-hero .hero-media{top:0!important;left:0!important;right:0!important;width:100%!important;height:100%!important}
  .home-page .hero-video-clip{
    -webkit-mask-image:url('../media/home-v9-tablet-mask.svg')!important;
    mask-image:url('../media/home-v9-tablet-mask.svg')!important;
  }
  .home-page .hero-video-clip video{
    object-position:center 48%!important;transform:scale(1.30)!important;transform-origin:left center!important;
  }
  .home-page .hero-gold-arc{background-image:url('../media/home-v9-tablet-arc.svg')!important}
  .home-page .reference-home-hero .stock-cards{left:3.5%!important;right:32%!important;bottom:22px!important;gap:9px!important}
  .home-page .reference-home-hero .stock-cards>div{min-width:0!important;flex:1!important;height:61px!important;padding:6px 5px!important}
  .home-page .reference-home-hero .stock-cards strong{font-size:18px!important}
  .home-page .reference-home-hero .stock-cards span{font-size:9px!important}
  .home-page .reference-home-hero .video-toggle{left:38%!important;bottom:89px!important}
}

@media (max-width:600px){
  .home-page .reference-home-hero{height:390px!important;min-height:390px!important;padding:0!important;background:#f9fbfd!important}
  .home-page .reference-home-hero .blueprint{
    display:block!important;left:-1%!important;top:60px!important;width:39%!important;height:255px!important;opacity:.18!important;
    background-position:left top!important;background-size:contain!important;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 84%,transparent 100%)!important;
    mask-image:linear-gradient(90deg,#000 0,#000 84%,transparent 100%)!important;
  }
  .home-page .reference-home-hero .hero-copy{
    left:12px!important;top:93px!important;width:29%!important;padding:0!important;z-index:8!important;isolation:isolate!important;
  }
  .home-page .reference-home-hero .hero-copy:before{
    content:""!important;position:absolute!important;z-index:-1!important;inset:-8px -9px -10px -7px!important;border-radius:9px!important;
    background:linear-gradient(90deg,rgba(255,255,255,.88),rgba(255,255,255,.68) 72%,rgba(255,255,255,.10))!important;
    -webkit-backdrop-filter:blur(4px)!important;backdrop-filter:blur(4px)!important;pointer-events:none!important;
  }
  .home-page .reference-home-hero .hero-copy .eyebrow{font-size:7px!important;margin:0 0 5px!important}
  .home-page .reference-home-hero h1{font-size:clamp(16px,4.8vw,21px)!important;line-height:1.025!important;min-height:0!important;margin:4px 0 7px!important}
  .home-page .reference-home-hero .hero-copy>p:not(.eyebrow){font-size:7.5px!important;line-height:1.32!important;margin:0!important}
  .home-page .reference-home-hero .actions{display:none!important}

  /* Mobile reference: video starts behind the header and forms the asymmetric leaf. */
  .home-page .reference-home-hero .hero-media{top:0!important;left:0!important;right:0!important;width:100%!important;height:100%!important}
  .home-page .hero-video-clip{
    -webkit-mask-image:url('../media/home-v9-mobile-mask.svg')!important;
    mask-image:url('../media/home-v9-mobile-mask.svg')!important;
  }
  .home-page .hero-video-clip video{
    object-position:center 47%!important;transform:scale(1.34)!important;transform-origin:left center!important;
  }
  .home-page .hero-gold-arc{background-image:url('../media/home-v9-mobile-arc.svg')!important}
  .home-page .reference-home-hero .stock-cards{left:2.8%!important;right:7.5%!important;bottom:10px!important;gap:7px!important}
  .home-page .reference-home-hero .stock-cards>div{min-width:0!important;flex:1!important;height:57px!important;padding:5px 4px!important}
  .home-page .reference-home-hero .stock-cards strong{font-size:14px!important;line-height:1.02!important}
  .home-page .reference-home-hero .stock-cards span{font-size:7px!important;line-height:1.1!important}
  .home-page .reference-home-hero .video-toggle{left:24%!important;bottom:83px!important;width:29px!important;height:29px!important}
  .home-page .quick{margin:0 auto 9px!important}
}

/* ================================================================
   PRODUCT / SERVICE DETAIL HERO — independent IMG inside SVG clip
   ================================================================ */
.detail-page .reference-detail-hero{position:relative!important;overflow:hidden!important;isolation:isolate!important;padding:0!important}
.detail-page .detail-hero-media{position:absolute!important;inset:0!important;z-index:2!important;width:100%!important;height:100%!important;overflow:visible!important}
.detail-page .detail-image-clip{
  position:absolute!important;inset:0!important;z-index:1!important;overflow:hidden!important;
  -webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important;
  -webkit-mask-position:0 0!important;mask-position:0 0!important;
  -webkit-mask-size:100% 100%!important;mask-size:100% 100%!important;
}
.detail-page .detail-image-clip img,
.detail-page .detail-hero-media>img{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;
  -webkit-mask-image:none!important;mask-image:none!important;-webkit-clip-path:none!important;clip-path:none!important;
}
.detail-page .detail-gold-arc{z-index:4!important;background-size:100% 100%!important}
.detail-page .reference-detail-hero .detail-hero-copy{z-index:6!important}

@media (min-width:981px){
  .detail-page .reference-detail-hero{height:360px!important;min-height:360px!important}
  .detail-page .detail-image-clip{
    -webkit-mask-image:url('../media/detail-v9-desktop-mask.svg')!important;
    mask-image:url('../media/detail-v9-desktop-mask.svg')!important;
  }
  .detail-page .detail-image-clip img{object-position:center center!important;transform:scale(1.035)!important;transform-origin:center!important}
  .detail-page .detail-gold-arc{background-image:url('../media/detail-v9-desktop-arc.svg')!important}
  .detail-page .reference-detail-hero .detail-hero-copy{width:39%!important;padding-top:112px!important}
  .detail-page .reference-detail-hero .detail-hero-copy.has-technical-background:before{opacity:.14!important;background-size:96% auto!important}
}

@media (min-width:601px) and (max-width:980px){
  .detail-page .reference-detail-hero{height:330px!important;min-height:330px!important}
  .detail-page .detail-image-clip{
    -webkit-mask-image:url('../media/detail-v9-tablet-mask.svg')!important;
    mask-image:url('../media/detail-v9-tablet-mask.svg')!important;
  }
  .detail-page .detail-image-clip img{object-position:center center!important;transform:scale(1.04)!important;transform-origin:center!important}
  .detail-page .detail-gold-arc{background-image:url('../media/detail-v9-tablet-arc.svg')!important}
  .detail-page .reference-detail-hero .detail-hero-copy{width:38%!important;padding-top:82px!important}
  .detail-page .reference-detail-hero .detail-hero-copy.has-technical-background:before{opacity:.14!important}
}

@media (max-width:600px){
  .detail-page .reference-detail-hero{height:300px!important;min-height:300px!important;background:#f9fbfd!important}
  .detail-page .detail-image-clip{
    -webkit-mask-image:url('../media/detail-v9-mobile-mask.svg')!important;
    mask-image:url('../media/detail-v9-mobile-mask.svg')!important;
  }
  .detail-page .detail-image-clip img{object-position:center center!important;transform:scale(1.04)!important;transform-origin:center!important}
  .detail-page .detail-gold-arc{background-image:url('../media/detail-v9-mobile-arc.svg')!important}
  .detail-page .reference-detail-hero .detail-hero-copy{left:12px!important;top:104px!important;width:39%!important;padding:6px 2px 8px 0!important}
  .detail-page .reference-detail-hero .detail-hero-copy:after{
    inset:-8px -12px -10px -8px!important;background:linear-gradient(90deg,rgba(255,255,255,.90),rgba(255,255,255,.68) 74%,rgba(255,255,255,.08))!important;
    -webkit-backdrop-filter:blur(4px)!important;backdrop-filter:blur(4px)!important;
  }
  .detail-page .reference-detail-hero .detail-hero-copy.has-technical-background:before{opacity:.18!important;background-size:165% auto!important}
}