/* Supplied photograph, responsive sources and bounded hero-only motion. */
.hero-studio{--portrait-x:0px;--portrait-y:0px;--ui-x:0px;--ui-y:0px;height:100svh;min-height:680px;background:#f7f7f7}
.hero-studio .portrait-move{inset:0;transform-origin:50% 50%}
.hero-studio picture{display:block;width:100%;height:100%}
.hero-studio .hero-portrait.hero-banner{inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%;transform:none;clip-path:none;mask-image:none;filter:none;mix-blend-mode:normal;translate:var(--portrait-x) var(--portrait-y)}
.hero-studio .hero-intro{left:4%;top:22%;right:auto;width:25%;max-width:420px;text-align:left;translate:var(--ui-x) var(--ui-y)}
.hero-studio .hero-intro h1{font-size:clamp(29px,2.25vw,40px);line-height:1.12;margin:0;letter-spacing:-.045em;text-wrap:balance}
.hero-mobile-cta{display:none!important}
.mobile-found{display:none}
.hero-studio .scroll-note{translate:var(--ui-x) var(--ui-y);bottom:35px;font-size:10px;color:#fff;text-shadow:0 1px 4px #0009}
.hero-studio .scroll-note b{animation:heroScrollCue 2.8s cubic-bezier(.45,0,.55,1) infinite}
@keyframes heroScrollCue{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@media(min-width:1024px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .header .contact-pill:hover{translate:0 -1px;box-shadow:0 3px 9px #0000000b}
 .header .contact-pill{transition:background-color .3s cubic-bezier(.2,.75,.2,1),color .3s cubic-bezier(.2,.75,.2,1),border-color .3s,translate .3s,box-shadow .3s}
}
@media(min-width:901px) and (max-width:1100px){
 .hero-studio .hero-intro{top:20%;width:21%;max-width:235px}
 .hero-studio .hero-intro h1{font-size:26px}
}
@media(max-width:900px){
 .hero-studio{min-height:890px;height:100svh}
 .hero-studio .portrait-move{top:310px;bottom:0;height:auto;mask-image:linear-gradient(transparent,#000 10%)}
 .hero-studio .hero-portrait.hero-banner{object-position:50% 25%;translate:none}
 .hero-studio .hero-intro{top:120px;left:6%;right:6%;width:auto;max-width:none;text-align:center;translate:none}
 .hero-studio .hero-intro h1{font-size:clamp(28px,4.5vw,38px);line-height:1.1}
 .hero-studio .hero-mobile-cta{display:inline-flex!important;margin-top:20px;min-height:52px;padding:14px 20px;font-size:11px;gap:28px}
 .hero-studio .scroll-note{left:auto;right:22px;bottom:30px;width:165px;transform:none;translate:none;font-size:8px;letter-spacing:.12em;text-align:center}
}
@media(max-width:500px){
 .hero-studio{height:100svh;min-height:840px}
 .hero-studio .portrait-move{top:305px}
 .hero-studio .hero-intro{top:115px;left:20px;right:20px}
 .hero-studio .hero-intro h1{font-size:clamp(27px,7vw,32px)}
 .hero-studio .scroll-note{right:18px;width:145px;font-size:7px}
}
@media(max-width:1023px){
 .mobile-found{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:38px;height:65svh;min-height:380px;max-height:650px;padding:50px 6vw;background:var(--ink);color:var(--paper);overflow:hidden}
 .mobile-found-kicker{font-size:9px;letter-spacing:.13em;text-align:center}
 .mobile-found-title{font-size:clamp(90px,27vw,235px);font-weight:500;line-height:.82;letter-spacing:-.065em;text-align:center}
 .mobile-found-title>span{display:block}
}
@media(min-width:901px) and (max-aspect-ratio:5/4){
 .hero-studio .hero-intro{top:120px;left:6%;right:6%;width:auto;max-width:none;text-align:center}
 .hero-studio .hero-intro h1{font-size:32px;max-width:680px;margin:auto}
 .hero-studio .portrait-move{top:265px}
}
@media(max-width:360px){.hero-studio .scroll-note{width:120px;right:14px}.hero-studio .hero-intro h1{font-size:25px}}
@media(max-width:1023px),(hover:none),(pointer:coarse){
 .hero-studio .hero-portrait.hero-banner,.hero-studio .hero-intro,.hero-studio .scroll-note{translate:none}
}
@media(prefers-reduced-motion:reduce){
 .hero-studio .hero-portrait.hero-banner,.hero-studio .hero-intro,.hero-studio .scroll-note{translate:none!important}
 .hero-studio .scroll-note b{animation:none}.header .contact-pill{transition:none}
}

/* Mobile only: first-viewport composition and the desktop circle reveal. */
@media(max-width:900px){
 .hero-studio{height:100svh;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px;padding-top:clamp(98px,12svh,138px)}
 .hero-studio .hero-intro{grid-row:1;position:relative;inset:auto;width:auto;max-width:680px;margin:0 auto;padding:0 6vw;text-align:center}
 .hero-studio .hero-intro h1{font-size:clamp(27px,7vw,38px);line-height:1.1;margin:0}
 .hero-studio .hero-mobile-cta{display:none!important}
 .hero-studio .portrait-move{grid-row:2;position:relative;inset:auto;min-height:0;width:100%;height:calc(100% + clamp(30px,6svh,56px));margin-top:calc(-1 * clamp(30px,6svh,56px));mask-image:linear-gradient(transparent,#000 6%)}
 .hero-studio .hero-portrait.hero-banner{object-fit:cover;object-position:50% 40%;width:100%;height:100%;translate:none}
 .hero-studio .scroll-note{left:50%;right:auto;bottom:22px;transform:translateX(-50%);font-size:8px;width:180px}
 .hero-studio .hero-wipe{padding:24px 5vw}
 .hero-studio .wipe-title{font-size:29vw;line-height:.82;letter-spacing:-.065em}
 .hero-studio .wipe-kicker{font-size:9px;letter-spacing:.13em;margin-bottom:36px;text-align:center}
 .mobile-found{display:none}
 :root .header .contact-pill{min-height:46px;padding:12px 14px;font-size:9px;gap:14px}
 .header{padding:20px 5vw}
}
@media(max-width:900px) and (max-height:650px){
 .hero-studio{padding-top:88px;gap:8px}
 .hero-studio .hero-intro h1{font-size:clamp(26px,6.9vw,34px)}
 .hero-studio .scroll-note{bottom:14px;gap:5px}
}
@media(max-width:900px) and (prefers-reduced-motion:reduce){
 .mobile-found{display:flex;height:auto;min-height:0;padding:52px 6vw;gap:30px}
}