/* Mobile-first hero: title -> responsive artwork -> 1:1 -> copy and primary CTA.
   Desktop artwork retains its original containing block through display:contents. */
.hero-art{display:contents}
@media(max-width:767px){
  /* Fill the visible first screen; the artwork row takes the available space.
     Auto height still lets content grow when zoom or longer copy needs it. */
  .hero-sequence{height:auto;min-height:calc(var(--page-svh,1svh)*100)}
  .hero-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(110px,1fr) auto auto;height:auto;min-height:calc(var(--page-svh,1svh)*100);gap:clamp(10px,calc(calc(var(--page-svh,1svh)*7) - 37px),24px);padding:calc(var(--nav-height) + 20px) 5% max(24px,env(safe-area-inset-bottom));--hero-art-height:clamp(110px,calc(calc(var(--page-svh,1svh)*100) - 445px),430px)}
  .hero-mentorship-title{position:relative;grid-row:1;top:auto;left:auto;width:100%;margin:0;align-self:start}
  .hero-art{display:block;position:relative;grid-row:2;width:100%;max-width:620px;height:100%;min-height:110px;justify-self:center;isolation:isolate}
  .hero-art .hero-portrait{left:35%;top:4%;width:62%;height:92%;transform:rotate(-5deg)!important}
  .hero-art .float-one{left:2%;right:auto;top:2%;bottom:auto;width:max(44px,min(25%,calc(var(--hero-art-height)*.4)));padding:4px;transform:rotate(-10deg)!important}
  .hero-art .float-two{left:8%;right:auto;top:45%;bottom:auto;width:max(44px,min(24%,calc(var(--hero-art-height)*.36)));padding:4px;transform:rotate(8deg)!important}
  .hero-art .flower-scene{left:auto;right:-3%;top:-4%;bottom:auto;width:clamp(82px,25vw,150px);transform:none!important}
  .hero-art .flower-fallback{font-size:clamp(82px,25vw,150px)}
  .hero-one{position:relative;grid-row:3;top:auto;left:auto;width:auto;align-self:start;line-height:1;transform:none!important}
  .hero-one strong{font-size:clamp(24px,calc(calc(var(--page-svh,1svh)*2) + 11px),30px);line-height:1;letter-spacing:-.04em}
  .hero-one p{display:none}
  .hero-offer{position:relative;grid-row:4;top:auto;left:auto;width:100%;max-width:540px;margin:0;transform:none!important}
  .hero-offer>p.hero-explanation{max-width:100%;font-size:clamp(20px,4.7vw,24px);line-height:1.35;margin:0}
  .hero-offer>p.hero-detail{max-width:100%;font-size:14px;line-height:1.6;margin:clamp(12px,calc(var(--page-svh,1svh)*1.7),16px) 0 clamp(16px,calc(var(--page-svh,1svh)*2.4),22px)}
  .hero-track-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hero-track-actions .button{width:100%;min-width:0;min-height:54px;padding:14px 10px;font-size:clamp(12px,2.9vw,13px);gap:8px}
  .hero-track-actions .button span{font-size:17px}
  .hero-sequence + .about{margin-top:0}
}
/* A short phone viewport gives space to the main actions by lifting the title. */
@media(max-width:767px) and (max-height:660px){.hero-stage{padding-top:calc(var(--nav-height) + 12px)}}

/* Offer clarity: audience, duration and the next step stay visible together. */
.hero-duration{display:block;margin-top:12px;font-size:14px;line-height:1.4;font-weight:600;letter-spacing:0}
.hero-track-actions .button .hero-track-copy{display:grid;gap:5px;text-align:left;font-size:inherit;line-height:1.35}
.hero-track-copy small{font-size:11px;font-weight:500}
.hero-track-copy b{font-size:inherit;font-weight:700}
@media(max-width:767px){
 .hero-one{display:flex;align-items:center;gap:14px}
 .hero-duration{margin:0;font-size:13px}
 .hero-track-actions .button{padding:12px 10px;gap:6px}
 .hero-track-actions .button .hero-track-copy{font-size:clamp(12px,2.9vw,13px)}
 .hero-track-copy small{font-size:10px}
}
@media(max-width:360px){
 .hero-track-actions .button>span[aria-hidden]{display:none}
 .hero-track-copy small{white-space:nowrap}
}

/* Vector arrows keep both direction cards consistent on iOS and desktop. */
.hero-track-actions .hero-track-arrow{flex:none;width:20px;height:20px;line-height:0}
.hero-track-arrow svg{display:block;width:100%;height:100%}


/* Match the catalog's case-opening cue without moving the opening artwork. */
.hero-art .floating-post{cursor:pointer;scale:1;transition:scale 340ms cubic-bezier(.22,1,.36,1),box-shadow 300ms}
.hero-art .floating-post > .hero-case-hint{
 position:absolute;display:block;left:50%;right:auto;bottom:clamp(22px,2.1vw,32px);
 width:max-content;max-width:calc(100% - 10px);padding:6px 8px;
 border-radius:99px;background:var(--ink);color:var(--white);
 font-size:clamp(8px,.78vw,11px);font-weight:600;line-height:1.4;text-align:center;
 white-space:normal;opacity:0;transform:translate(-50%,5px);pointer-events:none;
 transition:opacity 200ms,transform 300ms cubic-bezier(.22,1,.36,1);
}
.hero-art .floating-post:focus-visible{z-index:7}
.hero-art .floating-post:focus-visible > .hero-case-hint{opacity:1;transform:translate(-50%,0)}
@media(hover:hover) and (pointer:fine){
 .hero-art .floating-post:hover{z-index:7}
 .hero-art .floating-post:hover > .hero-case-hint{opacity:1;transform:translate(-50%,0)}
}

/* Hover scale is independent of the cards' original rotation and scroll state. */
@media(prefers-reduced-motion:no-preference){
 html:not(.reduce-motion) .hero-art .floating-post:focus-visible{scale:1.08}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 html:not(.reduce-motion) .hero-art .floating-post:hover{scale:1.08}
}

/* Persistent action caption: readable without hover on touch screens. */
#intro .hero-art .floating-post>.hero-case-action{display:flex;align-items:center;gap:4px;font-size:clamp(10px,.85vw,13px);line-height:1.3;white-space:nowrap}
#intro .hero-case-action svg{width:1em;height:1em;flex:none}
@media(max-width:767px){
 #intro .hero-art .floating-post>.hero-case-action{font-size:10px;gap:3px;padding:5px 1px 2px}
}
@media(max-width:767px) and (max-height:660px){
 #intro .hero-art .floating-post>.hero-case-action{font-size:9px;gap:2px;padding-inline:0}
}

/* Keep both case captions exposed when the phone layout expands to tablet. */
@media(min-width:640px) and (max-width:767px){
 #intro .hero-art{container-type:size}
 #intro .hero-art .float-one{width:min(30%,32cqh)}
 #intro .hero-art .float-two{top:auto;bottom:0;width:min(28%,30cqh)}
}

/* Fit the supplied portrait inside the existing rotated frame. */
#intro .hero-portrait>img{width:112%;height:112%;left:-6%;top:-5%;object-fit:cover;object-position:50% 42%}