*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:#f7f4ed}
body{display:flex;justify-content:center;align-items:flex-start;overflow-x:hidden}
.page{position:relative;width:100vw;max-width:1536px;aspect-ratio:1536/1024;background:#f7f4ed}
.approved-design{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}

.hotspot{position:absolute;z-index:10;display:block;overflow:hidden}
.email{left:9.05%;top:65.85%;width:18.95%;height:7.05%;border-radius:999px;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,filter .28s ease}
.email:hover{transform:translateY(-3px) scale(1.012);box-shadow:0 12px 28px rgba(18,63,53,.22);filter:brightness(1.045)}
.email:active{transform:translateY(-1px) scale(1.005)}
.sheen{position:absolute;top:-35%;left:-42%;width:28%;height:170%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.20),transparent);opacity:0}
.email:hover .sheen{animation:sweep .72s ease-out}
@keyframes sweep{0%{left:-42%;opacity:0}18%{opacity:1}100%{left:118%;opacity:0}}
.arrow{position:absolute;right:9%;top:50%;transform:translateY(-50%);color:#fff;font:600 0/1 Arial;opacity:0}
.email:hover .arrow{animation:arrowNudge .48s ease}
@keyframes arrowNudge{0%,100%{transform:translate(0,-50%)}50%{transform:translate(4px,-50%)}}

.linkedin{left:31%;top:66%;width:20%;height:6.7%;border-radius:6px;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),background-color .25s ease}
.linkedin:hover{transform:translateY(-2px);background:rgba(18,63,53,.025)}
.underline{position:absolute;left:13%;right:10%;bottom:13%;height:1.5px;background:#e36e35;
  transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.linkedin:hover .underline{transform:scaleX(1)}
.li-arrow{position:absolute;right:8%;top:50%;color:#315247;font:600 0/1 Arial;opacity:0}
.linkedin:hover .li-arrow{animation:liNudge .48s ease}
@keyframes liNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}

.hotspot:focus-visible{outline:3px solid #ef6c2c;outline-offset:3px}
.accessible-copy{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}
@media(prefers-reduced-motion:reduce){.hotspot,.underline{transition:none}.email:hover .sheen,.email:hover .arrow,.linkedin:hover .li-arrow{animation:none}}