/* Desktop hero polish. Below the desktop breakpoint the original mobile flow remains. */
.hero-copy{display:contents}
@media(min-width:1101px){
 :root{--nav-height:96px}
 .site-header{gap:clamp(24px,2vw,36px)}
 .site-header .wordmark{font-size:24px;letter-spacing:-1.2px}
 .desktop-nav{gap:clamp(22px,1.8vw,32px)}
 .desktop-nav a{font-size:17px;line-height:1.35}
 .site-header .header-cta{min-height:52px;padding:14px 24px;font-size:16px;gap:22px}
 #intro .hero-stage{
  display:flex;align-items:center;height:auto;min-height:min(calc(var(--page-svh,1svh)*100),1120px);
  padding:calc(var(--nav-height) + clamp(32px,calc(var(--page-svh,1svh)*5),64px)) var(--gutter) clamp(44px,calc(var(--page-svh,1svh)*5),64px);
  --hero-case-width:min(11.5%,max(104px,calc((min(calc(var(--page-svh,1svh)*100),1120px) - var(--nav-height))*.22)));
 }
 #intro .hero-copy{position:relative;z-index:5;display:flex;flex-direction:column;gap:clamp(28px,calc(var(--page-svh,1svh)*3.5),44px);width:44%;max-width:656px;flex:none}
 #intro #hero-title{position:static;width:100%;margin:0;font-size:clamp(50px,4.6vw,78px);line-height:1.06;letter-spacing:-.05em;white-space:normal}
 #intro #hero-title .hero-heading-line{white-space:normal;overflow-wrap:break-word}
 #intro .hero-offer{position:static;width:100%;max-width:none;margin:0}
 #intro .hero-offer>.hero-explanation{font-size:clamp(28px,2.25vw,36px);line-height:1.25;font-weight:500;letter-spacing:-.04em;max-width:none;margin:0}
 #intro .hero-offer>.hero-detail{font-size:clamp(19px,1.5vw,24px);line-height:1.55;letter-spacing:-.01em;text-wrap:balance;max-width:560px;margin:22px 0 28px}
 #intro .hero-track-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
 #intro .hero-track-actions .button{width:100%;min-width:0;min-height:82px;padding:20px 22px;font-size:clamp(14px,1.03vw,17px);gap:14px;line-height:1.35}
 #intro .hero-track-actions .hero-track-copy{font-size:inherit;gap:7px}
 #intro .hero-track-copy small{font-size:clamp(12px,.9vw,14px);line-height:1.35}
 #intro .hero-track-arrow{width:24px;height:24px}
 #intro .hero-portrait{left:62%;top:20%;width:34%;height:76%}
 #intro .flower-scene{left:auto;right:2%;top:12%;bottom:auto;width:min(16vw,calc((min(calc(var(--page-svh,1svh)*100),1120px) - var(--nav-height))*.32),240px)}
 #intro .hero-art .floating-post{width:var(--hero-case-width)}
 #intro .hero-art .float-one{top:max(calc(var(--nav-height) + 20px),16%);right:auto;left:49%;transform:rotate(-10deg)}
 #intro .hero-art .float-two{top:auto;bottom:5%;right:auto;left:50%;transform:rotate(8deg)}
 #intro .hero-one{top:47%;left:49%;right:auto;width:13%}
 #intro .hero-duration{font-size:18px;line-height:1.4}
 #intro .hero-one p{font-size:clamp(14px,1vw,16px);line-height:1.45;margin-top:14px}
}
@media(min-width:1101px) and (max-height:760px){
 :root{--nav-height:80px}
 #intro .hero-stage{padding-top:calc(var(--nav-height) + 24px);padding-bottom:32px;--hero-case-width:min(11.5%,max(104px,calc((min(calc(var(--page-svh,1svh)*100),1120px) - var(--nav-height))*.19)))}
 #intro .hero-copy{gap:24px}
 #intro #hero-title{font-size:clamp(44px,4.1vw,64px)}
 #intro .hero-offer>.hero-explanation{font-size:28px}
 #intro .hero-offer>.hero-detail{font-size:18px;line-height:1.5;margin:16px 0 22px}
 #intro .hero-track-actions .button{min-height:70px;padding:16px 18px;font-size:14px}
 #intro .hero-track-copy small{font-size:12px}
 #intro .hero-one strong{font-size:64px}
 #intro .hero-duration{font-size:14px}
 #intro .hero-one p{display:none}
 #intro .hero-art .floating-post>span:not(.hero-case-hint){font-size:10px}
}
@media(min-width:1101px) and (max-height:640px){
 #intro .hero-stage{padding-top:calc(var(--nav-height) + 20px);padding-bottom:24px}
 #intro .hero-copy{gap:20px}
 #intro .hero-offer>.hero-detail{font-size:16.5px;margin:14px 0 20px}
 #intro .hero-track-actions .button{min-height:64px;padding:14px 16px}
}
@media(min-width:1101px) and (min-height:761px) and (max-height:880px){
 #intro .hero-one strong{font-size:72px}
 #intro .hero-duration{font-size:16px}
 #intro .hero-one p{display:none}
}

/* One clear next step from the opening offer to the work format. */
#intro .hero-track-actions{grid-template-columns:minmax(0,1fr);max-width:360px;margin-top:24px}
#intro .hero-track-actions .hero-format-cta{min-height:60px;font-size:16px;padding:18px 24px;gap:16px}
#intro .hero-format-cta>span:first-child{font-size:inherit;line-height:1.4}
@media(max-width:767px){
 #intro .hero-track-actions{max-width:none;margin-top:20px}
 #intro .hero-track-actions .hero-format-cta{min-height:54px;padding:14px 20px}
 #intro .hero-format-cta>.hero-track-arrow{display:block}
}