/* Apex Media V35: accurate client-approved reference recreation.
   Desktop uses two slices of the supplied design, not a rough substitute;
   hotspots preserve working category navigation. Mobile gets a readable responsive rebuild. */
.em35-reference-hero{width:100%;position:relative;display:block!important;overflow:hidden!important;isolation:isolate;background:#080909!important;color:#f5efe7!important;padding:0!important;margin:0!important;max-width:none!important;min-height:0!important;border:0!important;border-bottom:1px solid rgba(218,177,115,.35)!important;line-height:normal!important;box-sizing:border-box!important}
.em35-reference-hero *, .em35-reference-hero *:before,.em35-reference-hero *:after{box-sizing:border-box}
.portfolio-hero.em35-reference-hero:before,.portfolio-hero.em35-reference-hero:after{content:none!important;display:none!important}
.em35-desktop-art{display:block;position:relative;width:100%;line-height:0;}
.em35-desktop-art>img{display:block!important;width:100%!important;max-width:none!important;height:auto!important;object-fit:contain!important;object-position:50% 50%!important;margin:0!important;border:0!important;filter:none!important;transform:none!important;aspect-ratio:2048 / 334;}
.em35-portfolio .em35-desktop-art>img{aspect-ratio:2048 / 348}
.em35-clickmap{position:absolute;inset:0;z-index:2;pointer-events:none}
.em35-hotspot{display:block;position:absolute;pointer-events:auto;text-decoration:none!important;border:1px solid transparent!important;border-radius:2px;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;outline:none}
.em35-hotspot:is(:hover,:focus-visible){border-color:rgba(242,192,124,.85)!important;box-shadow:inset 0 0 0 1px rgba(245,211,153,.2),0 0 20px rgba(223,163,80,.24);background:rgba(208,152,70,.05)}
.em35-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
/* Click areas are proportional to the actual pixel locations in 2048px-wide reference. */
.em35-work-cta{left:5.3%;top:77%;width:12%;height:12%}
.em35-work-one{left:41.5%;top:76%;width:16.8%;height:18%}
.em35-work-two{left:59.6%;top:76%;width:15.3%;height:18%}
.em35-work-three{left:75.8%;top:76%;width:22.5%;height:18%}
.em35-port-cta{left:5.5%;top:79.5%;width:11.6%;height:12.6%}
.em35-port-one{left:47.5%;top:7%;width:18.1%;height:83%}
.em35-port-two{left:61.3%;top:6%;width:21.4%;height:88%}
.em35-port-three{left:80.7%;top:5%;width:16.5%;height:89%}
.em35-mobile{display:none}
@media(max-width:1120px){
 .em35-desktop-art{display:none!important}
 .em35-reference-hero{min-height:0!important;padding:0!important}
 .em35-mobile{display:block!important;position:relative;isolation:isolate;padding:0 0 34px;background:radial-gradient(ellipse at 65% 0%,rgba(100,68,37,.13),transparent 70%),#080a0a;}
 .em35-m-copy{position:relative;z-index:2;padding:clamp(36px,6.5vw,70px) clamp(22px,5vw,58px) 23px;max-width:740px}
 .em35-m-eyebrow{font:700 11px/1.6 Arial,Helvetica,sans-serif!important;color:#e1bb83!important;letter-spacing:.2em!important;margin:0 0 26px!important}
 .em35-m-eyebrow span{margin:0 8px;color:#afa18c}
 .em35-m-copy h1,.em35-m-copy h2{font:400 clamp(44px,7.3vw,78px)/1.08 Georgia,'Times New Roman',serif!important;letter-spacing:-.037em!important;color:#f5efe6!important;margin:0 0 24px!important;text-transform:none!important}
 .em35-m-copy h1 em,.em35-m-copy h2 em{font-weight:400!important;color:#ddad73!important}
 .em35-m-description{font:400 clamp(14px,1.7vw,17px)/1.7 Arial,Helvetica,sans-serif!important;color:#d8d0c2!important;max-width:540px;margin:0 0 24px!important}
 .em35-m-button{display:inline-flex!important;align-items:center!important;gap:15px;min-height:46px;padding:11px 17px;border:1px solid #cea267!important;color:#efc48b!important;background:rgba(0,0,0,.3)!important;font:700 11px/1.4 Arial,Helvetica,sans-serif!important;letter-spacing:.13em!important;text-decoration:none!important;max-width:100%;white-space:normal}
 .em35-m-button svg{width:17px;height:17px;flex:none}
 .em35-m-picture{position:relative;margin:14px 20px 0;border-top:2px solid #d5a36b;overflow:hidden;box-shadow:0 15px 30px rgba(0,0,0,.35)}
 .em35-m-picture img{display:block!important;width:100%!important;height:clamp(190px,32vw,290px)!important;object-fit:cover!important;object-position:center!important;transform:none!important;border:0!important;filter:none!important}
 .em35-m-nav{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));padding:0;margin:0 20px;border:1px solid rgba(219,174,112,.48);background:#0c0d0d}
 .em35-m-nav a{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;text-align:center;padding:17px 9px;text-decoration:none!important;color:#f0e9df!important;font:700 10px/1.4 Arial,Helvetica,sans-serif!important;letter-spacing:.08em!important}
 .em35-m-nav a:not(:last-child){border-right:1px solid rgba(219,174,112,.42)}
 .em35-m-nav svg{width:15px;height:15px;flex:none;color:#dda968}
 .em35-m-lens{position:absolute;top:12px;right:0;width:47%;height:320px;opacity:.31;z-index:1;pointer-events:none;background:url('assets/hero/portfolio-lens-mobile.webp') center center/contain no-repeat;mask-image:linear-gradient(90deg,transparent,black 45%,black 80%,transparent)}
 .em35-m-portfolio-cards{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:10px clamp(22px,5vw,58px) 0;position:relative;z-index:2;}
 .em35-m-portfolio-cards a{display:flex!important;flex-direction:column!important;min-width:0!important;background:#0b0d0d;border:1px solid rgba(219,167,98,.65);text-decoration:none!important;color:#f0e9db!important;overflow:hidden!important;box-shadow:0 10px 20px rgba(0,0,0,.42)}
 .em35-m-portfolio-cards img{display:block!important;width:100%!important;height:clamp(115px,21vw,240px)!important;object-fit:contain!important;background:#141614!important;filter:none!important;transform:none!important;padding:4px!important;min-height:0}
 .em35-m-portfolio-cards span{display:flex;align-items:center;justify-content:space-between;gap:3px;border-top:1px solid rgba(219,167,98,.4);padding:12px 10px;font:700 10px/1.35 Arial,Helvetica,sans-serif;letter-spacing:.08em;color:#f2e5d1;min-height:49px}
 .em35-m-portfolio-cards svg{width:14px;height:14px;flex:none;color:#deb07d}
}
@media(max-width:560px){
 .em35-m-copy{padding:42px 20px 18px}
 .em35-m-copy h1,.em35-m-copy h2{font-size:clamp(42px,10vw,57px)!important;margin-bottom:18px!important}
 .em35-m-eyebrow{font-size:10px!important;letter-spacing:.14em!important;margin-bottom:20px!important}
 .em35-m-description{font-size:14px!important}
 .em35-m-nav{grid-template-columns:1fr!important}
 .em35-m-nav a{justify-content:space-between;padding:15px 17px}
 .em35-m-nav a:not(:last-child){border-right:0;border-bottom:1px solid rgba(219,174,112,.35)}
 .em35-m-picture{margin:8px 14px 0}.em35-m-nav{margin:0 14px}
 .em35-m-portfolio-cards{grid-template-columns:1fr!important;gap:12px;margin:10px 20px 0}
 .em35-m-portfolio-cards a{display:grid!important;grid-template-columns:44% 56%!important;min-height:139px}
 .em35-m-portfolio-cards img{height:100%!important;min-height:139px!important;max-height:170px!important;object-fit:contain!important}
 .em35-m-portfolio-cards span{min-height:139px;align-items:center;border-top:0!important;border-left:1px solid rgba(219,167,98,.4);padding:10px 14px;font-size:11px}
 .em35-m-lens{top:26px;right:0;width:77%;height:290px;opacity:.15}
}
@media(prefers-reduced-motion:reduce){.em35-hotspot{transition:none}}

/* V36 FIX: old inner-page layers must not cover the approved hero artwork.
   Keep image and its live navigation links in a stable foreground stacking context. */
.em35-reference-hero { isolation:isolate!important; }
@media (min-width:1121px) {
  .em35-reference-hero .em35-desktop-art { position:relative!important;z-index:5!important;display:block!important;isolation:isolate!important; }
  .em35-reference-hero .em35-desktop-art > img {position:relative!important;z-index:1!important;display:block!important;opacity:1!important;visibility:visible!important;}
  .em35-reference-hero .em35-clickmap {z-index:3!important;}
}
@media (max-width:1120px) {
  .em35-reference-hero .em35-desktop-art {display:none!important;}
  .em35-reference-hero .em35-mobile {z-index:5!important;display:block!important;}
}

/* V37: The site has a global `nav` background/backdrop-filter.
   Hero navigation overlays must be visually transparent or they'll obscure artwork. */
.em35-reference-hero .em35-clickmap{background:transparent!important;box-shadow:none!important;border:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;filter:none!important;}
.em35-reference-hero .em35-hotspot{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
.em35-reference-hero .em35-hotspot:is(:hover,:focus-visible){background:rgba(208,152,70,.07)!important;}
