/* The shared hero: big centred photo, lowercase name behind it, a thin black base,
   and two quiet lines of small text. Photo and name rise in together on load. */
.ahero{position:relative;height:100svh;min-height:640px;max-height:1000px;overflow:hidden}
.ahero .name{position:absolute;left:0;right:0;top:27%;margin:0;display:flex;justify-content:center;white-space:nowrap;font:800 13vw/.8 "Onest",system-ui,sans-serif;letter-spacing:-.065em;color:#0C0F0D;z-index:1;pointer-events:none;visibility:hidden}
.ahero .name .w{display:inline-block;padding:.08em .02em .1em}
.ahero .name .b{margin-left:.12em}
.ahero .name em{font-style:normal;color:#0F7A52}
.ahero .name.ready{visibility:visible;animation:hero-up 1.4s cubic-bezier(.2,.75,.2,1) both}
@keyframes hero-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.ahero .ahero-me{position:absolute;z-index:2;left:50%;bottom:0;transform:translateX(-50%);height:min(84%,820px);width:auto;max-width:none;opacity:0}
.hero-go .ahero .ahero-me{animation:hero-lift 1.4s cubic-bezier(.2,.75,.2,1) both}
@keyframes hero-lift{from{opacity:0;transform:translate(-50%,24px)}to{opacity:1;transform:translate(-50%,0)}}
.ahero:after{content:"";position:absolute;z-index:3;left:0;right:0;bottom:0;height:44px;pointer-events:none;background:linear-gradient(to top,#0C0F0D 0,#0C0F0D 24px,rgba(12,15,13,.5) 34px,rgba(12,15,13,0) 44px)}
/* small text */
.hx{position:absolute;z-index:4;bottom:62px;display:flex;align-items:center;gap:18px;font:400 11px/1.4 "Geist Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#646B66;opacity:0}
.hx-l{left:40px;flex-direction:column;align-items:flex-start;gap:8px}.hx-l span{display:flex;align-items:center;gap:10px}.hx-r{right:40px}
.hx i{width:5px;height:5px;border-radius:50%;background:#0F7A52;flex:none}
.hx a{color:#0C0F0D;text-decoration:none;display:inline-flex;align-items:center;gap:6px;padding-bottom:2px;background:linear-gradient(#0F7A52,#0F7A52) 0 100%/0 1px no-repeat;transition:background-size .4s,color .3s}
.hx a:hover{color:#0F7A52;background-size:100% 1px}
.hero-go .hx{animation:hero-fade 1s ease .9s both}
@keyframes hero-fade{from{opacity:0}to{opacity:1}}
.hxm{display:none}
@media(max-width:899px){
  .ahero{height:auto;min-height:0;max-height:none;aspect-ratio:390/560}
  .ahero .name{top:96px}
  .ahero .ahero-me{height:auto;width:min(118vw,620px)}
  .hx{display:none}
  .hxm{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 18px;padding:16px 16px 0;font:400 11px/1.4 "Geist Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#646B66}
  .hxm a{color:#0C0F0D;text-decoration:none;margin-left:14px}
}
@media(prefers-reduced-motion:reduce){.ahero .name,.ahero .ahero-me,.hx{animation:none!important;opacity:1!important}}
/* LinkedIn sits in the header next to Email */
.hdr-r{display:flex;align-items:center;gap:18px}
.hdr-li{font:500 14px/1 "Geist",system-ui,sans-serif;text-decoration:none;color:inherit;opacity:.8;transition:opacity .3s}
.hdr-li:hover{opacity:1}
/* the Ah mark in the header */
.brand .mark{display:block;height:28px;width:auto}
@media(max-width:899px){.brand .mark{height:24px}}
/* right-hand note: availability */
.hx-r{flex-direction:column;align-items:flex-end;gap:8px;text-align:right}
.hx-r span{display:flex;align-items:center;gap:10px}
.hx .live,.hxm .live{position:relative;display:inline-block;width:6px;height:6px;border-radius:50%;background:#0F7A52;flex:none}
.hx .live:after,.hxm .live:after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid #0F7A52;animation:hx-ping 2.2s ease-out infinite}
@keyframes hx-ping{from{transform:scale(.4);opacity:.8}to{transform:scale(1.6);opacity:0}}
@media(max-width:899px){.hxm{flex-direction:column;gap:8px}.hxm span{display:flex;align-items:center;gap:8px}}
@media(prefers-reduced-motion:reduce){.hx .live:after,.hxm .live:after{animation:none}}
/* location pin */
.hx .pin,.hxm .pin{width:12px;height:12px;flex:none;display:block}
@media(max-width:899px){.hxm{flex-direction:row;justify-content:space-between;align-items:center}}
/* the pin sends out pin-shaped rings */
.pin{overflow:visible}
.pin .pp{fill:none;stroke:#0F7A52;stroke-width:1.4;transform-box:fill-box;transform-origin:50% 45%;animation:pin-pulse 2.2s ease-out infinite}
.pin .pp2{animation-delay:1.1s}
@keyframes pin-pulse{from{transform:scale(1);opacity:.9}to{transform:scale(2.3);opacity:0}}
@media(prefers-reduced-motion:reduce){.pin .pp{animation:none;opacity:0}}