/* A full-width atmosphere that fades into the portfolio's black canvas. */
.hero{position:relative;isolation:isolate;width:calc(100% - 88px);max-width:1120px;grid-template-columns:.85fr 1.15fr;gap:54px;align-items:center;padding-top:154px;padding-bottom:48px;min-height:640px}
.hero::before{inset:auto;top:0;bottom:-90px;left:50%;width:100vw;transform:translateX(-50%);background:radial-gradient(ellipse 58% 72% at 17% 33%,#233c762e,transparent 80%),radial-gradient(ellipse 52% 78% at 79% 32%,#65377e30,transparent 80%),linear-gradient(#07070d,#030305 70%,#000);mask-image:linear-gradient(#000 65%,transparent);animation:none}
.hero-copy{min-width:0}
.hero-art{height:350px;margin-top:15px}
.hero-card{width:365px;height:270px;border-radius:16px}
[lang=en] .hero h1{font-size:74px;line-height:1.01;letter-spacing:-.035em;text-wrap:balance}
.hero-specialism{font-size:37px;line-height:1.2;margin-top:17px;letter-spacing:-.02em}
.hero-eyebrow{font-size:12px;letter-spacing:.17em;margin-bottom:23px}
.hero .hero-description{max-width:560px;font-size:17px;line-height:1.7;color:#e3dfe9;margin-top:27px}
.hero-disciplines{font-size:13px;line-height:1.75;max-width:540px;color:#bbb2ca;margin-top:20px}
.hero-actions{margin-top:30px;max-width:560px}
.hero-actions>a,.hero-actions .hero-primary,.hero-actions .hero-project{font-size:14px}
.hero-actions .hero-cv,.hero-actions .hero-hiring{font-size:13px}

/* Bring supporting copy up to a comfortable reading size. */
.offers-intro,.websites-intro{font-size:15px;line-height:1.7}
.project-caption p{font-size:13px;line-height:1.6}
.view-project{font-size:12px}
.website-caption p{font-size:14px;line-height:1.6}
.hiring-heading>p:not(.section-eyebrow){font-size:17px;line-height:1.75}
.hiring-heading>p.hiring-location{font-size:13px}
.leadership-work>p{font-size:15px;line-height:1.7}
.offer-copy>p,.marketing-offer .offer-copy>p{font-size:14px;line-height:1.65}
.timeline-item p{font-size:14px;line-height:1.75}
.case-narrative dd{font-size:15px;line-height:1.75}
.faq-item summary{font-size:15px;line-height:1.5}
.faq-answer{font-size:15px;line-height:1.75}
.contact-card>p{font-size:14px;line-height:1.65}
.contact-intents p{font-size:14px;line-height:1.7}
[dir=rtl] .hero h1{font-size:64px;line-height:1.22;letter-spacing:0}
[dir=rtl] .hero-specialism{font-size:34px;line-height:1.5;letter-spacing:0}
[dir=rtl] .hero .hero-description{font-size:20px;line-height:1.7}
[dir=rtl] .hero-disciplines{font-size:16px;line-height:1.75}
[dir=rtl] .hero-eyebrow{font-size:15px;letter-spacing:0}
[dir=rtl] .hero-actions>a{font-size:16px}
[dir=rtl] .offer-copy>p,[dir=rtl] .marketing-offer .offer-copy>p,[dir=rtl] .timeline-item p,[dir=rtl] .faq-answer,[dir=rtl] .contact-card>p{font-size:17px;line-height:1.65}

@media(min-width:651px) and (max-width:1100px){
 .hero{gap:32px;padding-top:150px;grid-template-columns:.75fr 1.25fr;min-height:600px}
 .hero-art{height:290px}.hero-card{width:285px;height:225px}
 [lang=en] .hero h1{font-size:62px}.hero-specialism{font-size:32px}
 .hero .hero-description{font-size:16px}.hero-disciplines{font-size:12px}
}
@media(max-width:650px){
 .hero{display:block;width:calc(100% - 40px);max-width:480px;padding-top:137px;padding-bottom:24px;min-height:0}
 .hero::before{top:0;bottom:-70px;background:radial-gradient(ellipse 90% 70% at 85% 24%,#57327532,transparent 88%),radial-gradient(ellipse at 10% 30%,#243b702b,transparent 80%),linear-gradient(#07070d,#000);mask-image:linear-gradient(#000 65%,transparent)}
 .hero-art{display:none}
 [lang=en] .hero h1{font-size:54px;line-height:1.02;letter-spacing:-.035em}
 .hero-specialism{font-size:31px;line-height:1.22;margin-top:15px}
 .hero-eyebrow{font-size:11px;margin-bottom:20px}
 .hero .hero-description{font-size:16px;line-height:1.7;margin-top:24px}
 .hero-disciplines{font-size:12px;line-height:1.8;margin-top:17px}
 .hero-actions{margin-top:26px}
 .hero-actions>a,.hero-actions .hero-primary,.hero-actions .hero-project,.hero-actions .hero-cv,.hero-actions .hero-hiring{font-size:12px;min-height:57px}
 .offers-intro,.websites-intro,.project-caption p,.website-caption p,.offer-copy>p,.marketing-offer .offer-copy>p,.timeline-item p{font-size:14px;line-height:1.65}
 .view-project{font-size:11px}
 .hiring-heading>p:not(.section-eyebrow),.faq-answer,.faq-item summary,.contact-card>p,.leadership-work>p{font-size:14px;line-height:1.65}
 [dir=rtl] .hero h1{font-size:47px;line-height:1.3}
 [dir=rtl] .hero-specialism{font-size:29px;line-height:1.5}
 [dir=rtl] .hero .hero-description{font-size:18px;line-height:1.7}
 [dir=rtl] .hero-disciplines{font-size:15px;line-height:1.7}
 [dir=rtl] .hero-actions>a{font-size:14px}
}