/* V8 reference alignment: exact separation of technical SVG artwork, gold SVG curve and live media. */

:root{--reference-gold:#c99a42;--reference-navy:#062f69}

/* ---------------- HOME HERO ----------------
   IMPORTANT: the SVG is NOT the video. The SVG files only define the clipping shape
   and the matching gold arc. The HTML5 video remains a separate live element. */
.home-page .reference-home-hero{
  position:relative!important;isolation:isolate!important;overflow:hidden!important;
  background:linear-gradient(108deg,#fff 0%,#fbfcfe 43%,#edf3f9 100%)!important;
}
.home-page .reference-home-hero .blueprint{
  display:block!important;position:absolute!important;z-index:1!important;
  background:var(--home-blueprint) center/contain no-repeat!important;
  opacity:.12!important;filter:none!important;pointer-events:none!important;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 77%,transparent 100%)!important;
  mask-image:linear-gradient(90deg,#000 0,#000 77%,transparent 100%)!important;
}
.home-page .reference-home-hero .blueprint:before,
.home-page .reference-home-hero .blueprint:after,
.home-page .reference-home-hero .blueprint>span{display:none!important}
.home-page .reference-home-hero .hero-copy{position:relative!important;z-index:6!important}
.home-page .reference-home-hero .hero-media{
  position:relative!important;z-index:2!important;overflow:visible!important;
  border-radius:0!important;box-shadow:none!important;filter:none!important;
  -webkit-clip-path:none!important;clip-path:none!important;background:transparent!important;
}
.home-page .reference-home-hero .hero-media:before{display:none!important}
.home-page .reference-home-hero .hero-media video{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  object-fit:cover!important;z-index:1!important;border-radius:0!important;
  -webkit-clip-path:none!important;clip-path:none!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-gold-arc{
  position:absolute!important;inset:0!important;z-index:3!important;width:100%!important;height:100%!important;
  display:block!important;pointer-events:none!important;background-position:0 0!important;
  background-repeat:no-repeat!important;background-size:100% 100%!important;
}
.home-page .video-toggle{z-index:7!important}
.home-page .stock-cards{z-index:8!important;align-items:stretch!important}
.home-page .stock-cards>div{
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  border:1px solid #bb8530!important;border-radius:10px!important;color:#2a251d!important;
  background:linear-gradient(118deg,rgba(250,238,211,.96),rgba(223,188,129,.95) 56%,rgba(205,159,84,.95))!important;
  box-shadow:0 8px 24px rgba(72,48,13,.16),inset 0 1px rgba(255,255,255,.8)!important;
  -webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important;
}

@media (min-width:981px){
  .home-page .top{position:fixed!important;top:18px!important;left:3.2%!important;right:3.2%!important;z-index:80!important}
  .home-page .reference-home-hero{min-height:650px!important;display:grid!important;grid-template-columns:35% 65%!important;padding:0 0 72px!important}
  .home-page .reference-home-hero .blueprint{left:1.5%!important;top:54px!important;width:39%!important;height:575px!important;opacity:.12!important}
  .home-page .reference-home-hero .hero-copy{padding:112px 12px 30px clamp(42px,3.7vw,66px)!important;align-self:center!important}
  .home-page .reference-home-hero h1{max-width:500px!important;font-size:clamp(39px,3.35vw,55px)!important;line-height:1.055!important}
  .home-page .reference-home-hero .hero-copy>p:not(.eyebrow){max-width:395px!important;line-height:1.52!important}
  .home-page .reference-home-hero .hero-media{height:640px!important;margin-left:-11%!important;width:111%!important;align-self:start!important}
  .home-page .reference-home-hero .hero-media video{
    object-position:52% center!important;
    -webkit-mask-image:url('../media/home-mask-desktop.svg')!important;
    mask-image:url('../media/home-mask-desktop.svg')!important;
  }
  .home-page .hero-gold-arc{background-image:url('../media/home-arc-desktop.svg')!important}
  .home-page .reference-home-hero .stock-cards{left:18%!important;bottom:37px!important;gap:22px!important}
  .home-page .reference-home-hero .stock-cards>div{width:205px!important;min-width:205px!important;height:72px!important;padding:10px 14px!important}
  .home-page .reference-home-hero .stock-cards strong{font-size:23px!important;line-height:1.04!important}
  .home-page .reference-home-hero .stock-cards span{font-size:12px!important;line-height:1.15!important}
  .home-page .reference-home-hero .video-toggle{left:20%!important;bottom:121px!important}
}

@media (min-width:601px) and (max-width:980px){
  .home-page .top{position:fixed!important;top:10px!important;left:14px!important;right:14px!important;z-index:80!important}
  .home-page .reference-home-hero{min-height:555px!important;display:grid!important;grid-template-columns:36% 64%!important;padding:68px 0 68px!important}
  .home-page .reference-home-hero .blueprint{left:0!important;top:67px!important;width:45%!important;height:410px!important;opacity:.115!important}
  .home-page .reference-home-hero .hero-copy{padding:39px 8px 16px 18px!important;align-self:center!important}
  .home-page .reference-home-hero h1{font-size:clamp(27px,4.8vw,38px)!important;line-height:1.05!important;min-height:0!important}
  .home-page .reference-home-hero .hero-copy>p:not(.eyebrow){font-size:12px!important;line-height:1.42!important}
  .home-page .reference-home-hero .actions{gap:8px!important;margin-top:15px!important}
  .home-page .reference-home-hero .actions .btn{padding:9px 11px!important;font-size:10px!important}
  .home-page .reference-home-hero .hero-media{height:430px!important;margin-left:-14%!important;width:114%!important}
  .home-page .reference-home-hero .hero-media video{
    object-position:57% center!important;
    -webkit-mask-image:url('../media/home-mask-tablet.svg')!important;
    mask-image:url('../media/home-mask-tablet.svg')!important;
  }
  .home-page .hero-gold-arc{background-image:url('../media/home-arc-tablet.svg')!important}
  .home-page .reference-home-hero .stock-cards{left:14%!important;right:4%!important;bottom:16px!important;gap:8px!important}
  .home-page .reference-home-hero .stock-cards>div{min-width:0!important;flex:1!important;height:61px!important;padding:6px 4px!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:18%!important;bottom:84px!important}
}

@media (max-width:600px){
  .home-page .top{position:fixed!important;top:7px!important;left:8px!important;right:8px!important;z-index:80!important}
  .home-page .reference-home-hero{display:block!important;min-height:420px!important;padding:62px 0 0!important;background:linear-gradient(105deg,#fff 0,#f9fbfd 61%,#eef4fa 100%)!important}
  .home-page .reference-home-hero .blueprint{
    display:block!important;left:-3%!important;top:63px!important;width:57%!important;height:246px!important;
    opacity:.14!important;background-position:left top!important;background-size:contain!important;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 82%,transparent 100%)!important;
    mask-image:linear-gradient(90deg,#000 0,#000 82%,transparent 100%)!important;
  }
  .home-page .reference-home-hero .hero-copy{
    position:absolute!important;left:12px!important;top:91px!important;width:34%!important;padding:5px 4px 7px 0!important;z-index:7!important;
    isolation:isolate!important;
  }
  .home-page .reference-home-hero .hero-copy:before{
    content:"";position:absolute;z-index:-1;inset:-7px -13px -9px -7px;border-radius:10px;
    background:linear-gradient(90deg,rgba(255,255,255,.70),rgba(255,255,255,.42) 70%,rgba(255,255,255,.04));
    -webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);pointer-events:none;
  }
  .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(17px,5.2vw,23px)!important;line-height:1.03!important;min-height:0!important;margin:4px 0 7px!important}
  .home-page .reference-home-hero .hero-copy>p:not(.eyebrow){font-size:8px!important;line-height:1.32!important;margin:0!important}
  .home-page .reference-home-hero .actions{display:none!important}
  .home-page .reference-home-hero .hero-media{position:absolute!important;left:0!important;right:0!important;top:62px!important;height:300px!important;width:100%!important;margin:0!important;z-index:3!important}
  .home-page .reference-home-hero .hero-media video{
    object-position:63% center!important;
    -webkit-mask-image:url('../media/home-mask-mobile.svg')!important;
    mask-image:url('../media/home-mask-mobile.svg')!important;
  }
  .home-page .hero-gold-arc{background-image:url('../media/home-arc-mobile.svg')!important}
  .home-page .reference-home-hero .stock-cards{left:12px!important;right:12px!important;bottom:-48px!important;gap:7px!important}
  .home-page .reference-home-hero .stock-cards>div{min-width:0!important;flex:1!important;height:56px!important;padding:5px 3px!important}
  .home-page .reference-home-hero .stock-cards strong{font-size:14px!important;line-height:1.03!important}
  .home-page .reference-home-hero .stock-cards span{font-size:7px!important;line-height:1.12!important}
  .home-page .reference-home-hero .video-toggle{left:31%!important;bottom:21px!important;width:29px!important;height:29px!important}
  .home-page .quick{margin:-6px auto 9px!important}
}

/* ---------------- PRODUCT / SERVICE DETAIL HERO ----------------
   These pages use a still HERO IMAGE, never the Home video. The technical SVG/PNG
   background remains behind the left text, while the hero image is clipped by its
   own responsive SVG mask and bordered by the identical gold SVG arc. */
.detail-page .reference-detail-hero{
  position:relative!important;isolation:isolate!important;overflow:hidden!important;padding:0!important;
  display:block!important;background:linear-gradient(102deg,#fff 0,#f9fbfd 53%,#edf4fa 100%)!important;border-radius:0!important;
}
.detail-page .reference-detail-hero:after{display:none!important}
.detail-page .reference-detail-hero .detail-hero-copy{
  position:absolute!important;z-index:5!important;isolation:isolate!important;overflow:visible!important;
  border-radius:0!important;background:transparent!important;
}
.detail-page .reference-detail-hero .detail-hero-copy.has-technical-background:before{
  content:"";position:absolute;z-index:-2;pointer-events:none;
  background:var(--technical-bg) left center/contain no-repeat!important;opacity:.12!important;
  mix-blend-mode:multiply;filter:saturate(.55) contrast(.92);
}
.detail-page .reference-detail-hero .detail-hero-copy.has-technical-background:after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.90),rgba(255,255,255,.62) 72%,rgba(255,255,255,0));
}
.detail-page .detail-hero-media{
  position:absolute!important;inset:0!important;z-index:2!important;width:100%!important;height:100%!important;overflow:visible!important;background:transparent!important;
}
.detail-page .detail-hero-media img{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;
  -webkit-clip-path:none!important;clip-path:none!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-gold-arc{
  position:absolute!important;inset:0!important;z-index:3!important;width:100%!important;height:100%!important;
  display:block!important;pointer-events:none!important;background-repeat:no-repeat!important;background-position:0 0!important;background-size:100% 100%!important;
}
.detail-page .vertical-category{display:none!important}

@media (min-width:981px){
  .detail-page .reference-detail-hero{height:350px!important;min-height:350px!important}
  .detail-page .reference-detail-hero .detail-hero-copy{left:0!important;top:0!important;width:42%!important;height:100%!important;padding:108px 20px 30px clamp(42px,4vw,64px)!important}
  .detail-page .reference-detail-hero .detail-hero-copy.has-technical-background:before{inset:12% -2% 2% -8%!important;background-size:92% auto!important;background-position:left center!important}
  .detail-page .reference-detail-hero .detail-hero-copy.has-technical-background:after{inset:0 -5% 0 0!important}
  .detail-page .reference-detail-hero .crumb{font-size:11px!important;margin:0 0 9px!important}
  .detail-page .reference-detail-hero h1{font-size:clamp(30px,2.6vw,43px)!important;line-height:1.06!important;max-width:520px!important;margin:7px 0 10px!important}
  .detail-page .reference-detail-hero .detail-hero-copy>p:last-child{font-size:13px!important;line-height:1.48!important;max-width:435px!important}
  .detail-page .detail-hero-media img{
    object-position:64% center!important;
    -webkit-mask-image:url('../media/detail-mask-desktop.svg')!important;
    mask-image:url('../media/detail-mask-desktop.svg')!important;
  }
  .detail-page .detail-gold-arc{background-image:url('../media/detail-arc-desktop.svg')!important}
}

@media (min-width:601px) and (max-width:980px){
  .detail-page .reference-detail-hero{height:315px!important;min-height:315px!important}
  .detail-page .reference-detail-hero .detail-hero-copy{left:0!important;top:0!important;width:45%!important;height:100%!important;padding:78px 15px 22px 22px!important}
  .detail-page .reference-detail-hero .detail-hero-copy.has-technical-background:before{inset:8% -4% 0 -8%!important;background-size:94% auto!important;background-position:left center!important;opacity:.115!important}
  .detail-page .reference-detail-hero .detail-hero-copy.has-technical-background:after{inset:0 -4% 0 0!important}
  .detail-page .reference-detail-hero .crumb{font-size:8px!important;margin:0 0 7px!important}
  .detail-page .reference-detail-hero h1{font-size:clamp(24px,4vw,32px)!important;line-height:1.05!important;margin:6px 0 8px!important}
  .detail-page .reference-detail-hero .detail-hero-copy>p:last-child{font-size:10px!important;line-height:1.42!important}
  .detail-page .detail-hero-media img{
    object-position:68% center!important;
    -webkit-mask-image:url('../media/detail-mask-tablet.svg')!important;
    mask-image:url('../media/detail-mask-tablet.svg')!important;
  }
  .detail-page .detail-gold-arc{background-image:url('../media/detail-arc-tablet.svg')!important}
  .detail-page .detail-tabs{top:72px!important}
}

@media (max-width:600px){
  .detail-page .reference-detail-hero{height:292px!important;min-height:292px!important;background:linear-gradient(106deg,#fff 0,#fafcfe 61%,#eef4fa 100%)!important}
  .detail-page .reference-detail-hero .detail-hero-copy{
    left:13px!important;top:105px!important;width:46%!important;height:auto!important;padding:7px 4px 9px 0!important;z-index:5!important;
  }
  .detail-page .reference-detail-hero .detail-hero-copy:after{
    inset:-8px -16px -10px -8px!important;border-radius:10px!important;
    background:linear-gradient(90deg,rgba(255,255,255,.76),rgba(255,255,255,.45) 72%,rgba(255,255,255,.03))!important;
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  }
  .detail-page .reference-detail-hero .detail-hero-copy.has-technical-background:before{
    inset:-22px -24px -20px -10px!important;background-size:155% auto!important;background-position:left center!important;opacity:.14!important;
  }
  .detail-page .reference-detail-hero .crumb{font-size:7px!important;margin:0 0 4px!important}
  .detail-page .reference-detail-hero h1{font-size:clamp(17px,5.1vw,22px)!important;line-height:1.04!important;margin:4px 0 5px!important}
  .detail-page .reference-detail-hero .detail-hero-copy>p:last-child{font-size:8px!important;line-height:1.34!important;max-width:100%!important;margin:0!important}
  .detail-page .detail-hero-media img{
    object-position:73% center!important;
    -webkit-mask-image:url('../media/detail-mask-mobile.svg')!important;
    mask-image:url('../media/detail-mask-mobile.svg')!important;
  }
  .detail-page .detail-gold-arc{background-image:url('../media/detail-arc-mobile.svg')!important}
  .detail-page .detail-tabs{top:62px!important}
}

/* ---------------- CONTACT POPUP: CONTENT ALWAYS EXPANDED ---------------- */
.support-contact.support-contact-open{
  display:block;margin:8px 0;padding:11px 12px;border:1px solid #dfe7f0;border-radius:10px;background:#fff;box-shadow:0 5px 18px rgba(6,43,92,.06)
}
.support-contact-open .support-contact-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px}
.support-contact-open .support-contact-head span{display:flex;flex-direction:column}
.support-contact-open .support-contact-head b{font-size:13px;color:#092d63;line-height:1.25}
.support-contact-open .support-contact-head small{margin-top:2px;font-size:10px;font-weight:400;color:#5e6c80;line-height:1.3}
.support-contact-open .contact-actions{display:flex!important;align-items:center;gap:14px;padding:0!important;border:0!important}
.support-contact-open .contact-actions a{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:#0a3d7b}
.support-contact-open .contact-actions .icon{width:14px;height:14px}
.support-contact-open .contact-actions .contact-wa{color:#078c4d}
.support-modal .modal-card{overscroll-behavior:contain}

@media (max-width:600px){
  .support-contact.support-contact-open{padding:9px 10px;margin:6px 0}
  .support-contact-open .support-contact-head{margin-bottom:6px}
  .support-contact-open .support-contact-head b{font-size:11px}
  .support-contact-open .support-contact-head small{font-size:8px}
  .support-contact-open .contact-actions{gap:12px;flex-wrap:wrap}
  .support-contact-open .contact-actions a{font-size:9px}
  .support-modal .modal-card{max-height:78vh!important;overflow:auto!important}
}

/* Detail-page header follows the approved reference: floating logo/nav/quote over the hero. */
@media (min-width:981px){
  body.detail-page{padding-top:0!important}
  .detail-page .top{
    position:fixed!important;top:18px!important;left:3.2%!important;right:3.2%!important;width:auto!important;height:66px!important;
    display:grid!important;grid-template-columns:220px minmax(0,1fr) 130px!important;align-items:center!important;gap:18px!important;
    padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;z-index:80!important
  }
  .detail-page .brand{position:static!important;width:220px!important;margin:0!important;justify-self:start!important}
  .detail-page .top nav{
    width:max-content!important;min-height:48px!important;margin:0!important;justify-self:center!important;padding:4px 25px!important;
    gap:clamp(12px,1.7vw,27px)!important;border:1px solid rgba(255,255,255,.72)!important;border-radius:11px!important;
    background:rgba(255,255,255,.80)!important;box-shadow:0 9px 28px rgba(6,41,93,.07)!important;backdrop-filter:blur(18px)!important
  }
  .detail-page .top>.gold{position:static!important;margin:0!important;justify-self:end!important;background:rgba(255,255,255,.78)!important;color:#8a5a13!important;border:1px solid #c99a42!important}
}
@media (min-width:601px) and (max-width:980px){
  body.detail-page{padding-top:0!important}
  .detail-page .top{position:fixed!important;top:10px!important;left:12px!important;right:12px!important;width:auto!important;height:56px!important;padding:6px 10px!important;border:1px solid rgba(255,255,255,.72)!important;border-radius:10px!important;background:rgba(255,255,255,.82)!important;box-shadow:0 8px 22px rgba(6,41,93,.07)!important;z-index:80!important}
  .detail-page .brand{width:168px!important;margin-right:auto!important}
}
@media (max-width:600px){
  body.detail-page{padding-top:0!important}
  .detail-page .top{position:fixed!important;top:7px!important;left:8px!important;right:8px!important;width:auto!important;height:54px!important;padding:5px 8px!important;border:0!important;border-radius:10px!important;background:rgba(255,255,255,.74)!important;box-shadow:0 7px 20px rgba(6,41,93,.06)!important;backdrop-filter:blur(13px)!important;z-index:80!important}
  .detail-page .brand{width:135px!important;margin-right:auto!important}
}