/* The supplied landscape photograph stays intact. Crop only at the viewport. */
.hero:has(.portrait-stage img[src]){background:#eef2f5;min-height:740px;max-height:980px;border-radius:0;isolation:isolate}
.hero .portrait-stage{left:auto;right:0;top:9%;bottom:auto;width:58%;height:70%;transform:none;z-index:1;overflow:hidden;background:#386674}
.hero .portrait-stage img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.hero .hero-identity{top:7%;z-index:5}
.hero .hero-typeset{top:32%;left:var(--gutter);right:auto;display:flex;flex-direction:column;gap:8px;font-size:clamp(80px,7.7vw,120px);line-height:.95;z-index:3}
.hero .hero-typeset span:last-child{margin-left:70px;color:#284d6c}
.hero .hero-intro{left:var(--gutter);right:auto;bottom:12%;width:330px}
.hero .hero-intro>p{font-size:24px;line-height:1.65}
.hero .hero-intro>span{font-size:13px;margin-top:16px;max-width:290px}
.hero .floating-field{z-index:4}
.hero .floating{font-size:clamp(25px,2.5vw,39px);color:#24465e}
.hero .floating small{font-size:11px;color:#3e5a70}
.hero .floating-growth{top:auto;bottom:9%;left:48%;right:auto}
.hero .floating-views{top:auto;bottom:9%;right:7%}
.hero .floating-cpa{left:27%;bottom:auto;top:15%;font-size:28px}
.hero .floating-content{top:4%;left:45%;font-size:12px}
.hero .floating-ai{top:4%;right:7%;font-size:12px}
.hero .floating-market{display:none}
.hero .hero-foot{bottom:22px}
@media(min-width:761px) and (max-width:1100px){
 .hero:has(.portrait-stage img[src]){min-height:740px;height:780px;max-height:820px}
 .hero .portrait-stage{width:55%;height:60%;top:13%}
 .hero .hero-typeset{font-size:9vw;top:34%}
 .hero .hero-typeset span:last-child{margin-left:35px}
 .hero .hero-intro{width:290px;bottom:12%}
 .hero .floating-cpa{left:28%;top:20%}
 .hero .floating-growth{left:48%;bottom:10%;font-size:27px}
 .hero .floating-views{right:5%;bottom:10%;font-size:27px}
}
@media(max-width:760px){
 .hero:has(.portrait-stage img[src]){height:auto;min-height:820px;max-height:none;padding:0}
 .hero .hero-identity{top:25px;left:24px}
 .hero .hero-identity h1{font-size:36px}
 .hero .hero-identity p{font-size:13px;margin-top:7px}
 .hero .portrait-stage{left:24px;right:24px;top:125px;width:auto;height:295px;bottom:auto;transform:none}
 .hero .portrait-stage img{object-position:50% 42%}
 .hero .hero-typeset{left:24px;right:24px;top:427px;flex-direction:row;justify-content:space-between;gap:8px;font-size:12.4vw;line-height:1.15}
 .hero .hero-typeset span:last-child{margin-left:0;align-self:auto}
 .hero .hero-intro{left:24px;right:24px;top:520px;bottom:auto;width:auto}
 .hero .hero-intro>p{font-size:23px;line-height:1.6}
 .hero .hero-intro>span{display:none}
 .hero .hero-intro .text-link{margin-top:15px}
 .hero .floating-growth{top:682px;bottom:auto;left:24px;right:auto;font-size:28px}
 .hero .floating-views{top:682px;bottom:auto;right:24px;font-size:28px}
 .hero .floating small{font-size:11px;max-width:none;margin-top:7px}
 .hero .floating-cpa,.hero .floating-content,.hero .floating-ai{display:none}
 .hero .hero-foot{left:24px;right:24px;bottom:18px}
}
@media(max-width:360px){
 .hero:has(.portrait-stage img[src]){min-height:775px}
 .hero .portrait-stage{height:250px}
 .hero .hero-typeset{top:387px}
 .hero .hero-intro{top:475px}
 .hero .hero-intro>p{font-size:21px}
 .hero .floating-growth,.hero .floating-views{top:635px;font-size:25px}
 .hero .hero-foot>span{max-width:145px}
}
@media(prefers-reduced-motion:no-preference){
 .hero .portrait-stage img{animation:portrait-arrive 1.2s cubic-bezier(.16,1,.3,1) both}
 .hero .hero-typeset{animation:portrait-type .9s .15s cubic-bezier(.16,1,.3,1) backwards}
 @keyframes portrait-arrive{from{opacity:.5;clip-path:inset(0 0 8% 0)}to{opacity:1;clip-path:inset(0)}}
 @keyframes portrait-type{from{opacity:.2}to{opacity:1}}
}

/* Gerald Zhang: keep the name inside the left editorial column. */
.hero .hero-typeset{right:calc(58% + 32px);width:auto;align-items:flex-start;font-size:clamp(64px,7.2vw,112px);translate:none}
.hero .hero-typeset span{display:block;white-space:nowrap}
.hero .hero-typeset span:last-child{margin-left:clamp(24px,3vw,48px)}
@media(min-width:761px) and (max-width:1100px){
 .hero .hero-typeset{right:calc(55% + 28px);font-size:7.2vw}
 .hero .hero-typeset span:last-child{margin-left:24px}
}
@media(max-width:760px){
 .hero .hero-typeset{right:24px;font-size:12.4vw;align-items:baseline}
 .hero .hero-typeset span:last-child{margin-left:0}
}