/* Padding lives here, not inline: the runtime drops the side padding from an inline shorthand containing clamp(). */
#sohero{padding:clamp(130px,16vh,180px) var(--gut,24px) clamp(56px,6vw,88px);font-family:'Bricolage Grotesque',system-ui,sans-serif;scroll-margin-top:88px}
/* site.css zeroes section side padding at <=560px for sections gutted by an inner .sec-pad; this one has no inner gutter. */
@media(max-width:560px){#sohero{padding-left:var(--gut,20px) !important;padding-right:var(--gut,20px) !important}}
#sohero a{color:#FCFBF9}#sohero a:hover{color:rgba(252,251,249,.72)}
@property --shbtna{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes shbtnring{to{--shbtna:360deg}}
#sohero .shbtn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:999px;transition:transform .26s cubic-bezier(.2,.8,.3,1),background .22s}
#sohero .shbtn::before{content:"";position:absolute;inset:0;border-radius:999px;background:inherit;z-index:-1;pointer-events:none}
#sohero .shbtn::after{content:"";position:absolute;inset:-7px;border-radius:999px;z-index:-2;background:conic-gradient(from var(--shbtna),#FFB24D,#F0793C,#D9605A,#B06AD9,#6AA6E8,#B06AD9,#F0793C,#FFB24D);filter:blur(11px) saturate(1.35);opacity:0;transform:scale(.86);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);pointer-events:none;will-change:transform,opacity}
#sohero .shbtn:hover::after{opacity:.6;transform:scale(1.04);animation:shbtnring 3s linear infinite}
#sohero .shbtn:hover{transform:translateY(-2px)}
#sohero a.shbtn-w,#sohero a.shbtn-w:hover{color:#141414}
#sohero h1.shh{font-size:clamp(46px,7.6vw,96px);white-space:nowrap}
@media(max-width:700px){
 #sohero h1.shh{font-size:clamp(40px,12vw,56px);white-space:normal;line-height:.96}
 #sohero .shstmt{font-size:17px !important}
 #sohero .shcv{height:260px !important}
}
@media(prefers-reduced-motion:reduce){#sohero .shbtn:hover::after{animation:none}}