/* Stage hero: the headline over the live car scene, composed as the old live hero was and on the September blue ground with
   the new car. The copy sits left, vertically centred in a 640px column at a 48px gutter, over a soft ellipse of the ground
   that melts into the scene (revamp.js sizes the ellipse from the copy's box, as the old hero's #cap::before did). The car is
   framed to the right (f1-original.js viewShift); the joystick, mode rail and caption sit bottom right and a "More" cue
   bottom left (f1-stage.css lays the scene's controls out). The scene fills the hero and renders transparently, so the blue
   gradient and dots show round the mat. The copy, its backing and the cue fade out while someone drives or turns the car
   (.is-busy, set by revamp.js from the scene's own busy flag) and return a second after they stop.
   Phones stack the copy over the car, as the old hero did. Loaded on the homepage only. */
.home-hero.hero-stage{--stage-gut:48px;--stage-tier:wide;display:flex;align-items:center;gap:0;position:relative;max-width:none;margin:0;padding:0;overflow:hidden;
  min-height:max(640px,calc(100svh - var(--stage-top,86px)));
  background:radial-gradient(circle,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/24px 24px,var(--diary-ground,linear-gradient(100deg,#1489c9,#1f6fa2 48%,#3d4a58))}
.hero-stage .hero-scene{position:absolute;inset:0;z-index:0;margin:0;padding:0;min-width:0;place-self:stretch}
.hero-stage .original-f1-scene{position:absolute;inset:0;place-self:stretch;width:100%;height:100%;margin:0;border:0;border-radius:0;box-shadow:none;background:transparent}
.hero-stage .scene-help{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* The ground again behind the copy: solid over the text, fading into the scene to its right, never a hard edge */
.hero-stage .hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:inherit;
  -webkit-mask-image:radial-gradient(ellipse var(--scrim-rx,600px) var(--scrim-ry,640px) at var(--scrim-cx,240px) var(--scrim-cy,50%),#000 0,#000 48%,rgba(0,0,0,.7) 62%,transparent 84%);
  mask-image:radial-gradient(ellipse var(--scrim-rx,600px) var(--scrim-ry,640px) at var(--scrim-cx,240px) var(--scrim-cy,50%),#000 0,#000 48%,rgba(0,0,0,.7) 62%,transparent 84%)}

/* The copy block. Drags on the text reach the car underneath; only the links take the pointer */
.hero-stage .hero-copy{position:relative;z-index:2;flex:0 0 auto;align-self:center;width:min(640px,52vw);margin:0 0 0 var(--stage-gut);padding:0 0 6vh;pointer-events:none}
.hero-stage .hero-copy a,.hero-stage .hero-copy button{pointer-events:auto}
.hero-stage .hero-copy .eyebrow{font-size:12.5px;letter-spacing:.18em;color:rgba(255,255,255,.86);max-width:none;margin:0}
.hero-stage .hero-copy .eyebrow::after{width:72px;margin:10px 0 20px}
.hero-stage .hero-copy h1{font-size:clamp(32px,4.9vw,68px);line-height:1.12;letter-spacing:-.015em;margin:0 0 16px;max-width:none}   /* two lines: "Lead the change." fits the column at every width */
.hero-stage .hero-copy .headline-outline{border-radius:.24em;padding:0 .28em .23em;margin:0 .02em;line-height:1.1}   /* the g's tail ends .21em below the baseline: this leaves it the same room as the caps have above */
.hero-stage .hero-copy .hero-lede{font-size:clamp(13.5px,1.35vw,19px);line-height:1.55;max-width:48ch;margin:0 0 22px;color:rgba(255,255,255,.92);text-wrap:pretty}
.hero-stage .hero-copy .actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin:0 0 18px}   /* the gold action, then the two links on a line */
.hero-stage .hero-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px}
.hero-stage .hero-copy .actions .button{width:auto;max-width:100%;align-self:flex-start;justify-content:flex-start;min-height:44px;padding:11px 18px;gap:12px;font-size:13px;letter-spacing:.02em;border-radius:8px}   /* its own width at every size, as the old hero's action was */
.hero-stage .hero-copy .actions .text-link{min-height:0;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;line-height:1.4;color:#fff;gap:8px;padding:0 0 3px;border:0;border-bottom:1.5px solid #f2b257;border-radius:0;background:none;white-space:nowrap;transition:color .15s}
.hero-stage .hero-copy .actions .text-link:hover{color:#f2b257!important}   /* over the page's white !important hover */
.hero-stage .hero-author{margin:0;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.5;color:rgba(255,255,255,.86)}

/* The copy rises in as the page opens (the scene follows once it has loaded); nothing moves under reduced motion */
@keyframes stage-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero-stage .hero-copy>*{animation:stage-rise .7s ease both}
.hero-stage .hero-copy>h1{animation-delay:.08s}
.hero-stage .hero-copy>.hero-lede{animation-delay:.22s}
.hero-stage .hero-copy>.actions{animation-delay:.42s}
.hero-stage .hero-copy>.hero-author{animation-delay:.56s}

/* "More": bottom left in the gutter on landscape desktops, as on the old hero; it hides once the page has scrolled */
.hero-stage .stage-more{position:absolute;left:var(--stage-gut);bottom:24px;z-index:3;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(42,58,77,.18);background:#fff;color:#2a3a4d;font-family:inherit;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;line-height:1;cursor:pointer;box-shadow:0 2px 14px rgba(10,10,10,.08);transition:color .15s,border-color .15s,opacity .4s ease}
.hero-stage .stage-more span:last-child{font-size:16px;font-weight:400;margin-top:-2px}
.hero-stage .stage-more:hover{color:#f2b257;border-color:#f2b257}
.hero-stage .stage-more:focus-visible{outline:2px solid #f2b257;outline-offset:3px}
.hero-stage .stage-more.hide,.hero-stage.is-busy .stage-more{opacity:0;visibility:hidden;pointer-events:none;transition:color .15s,border-color .15s,opacity .4s ease,visibility 0s linear .4s}
@media(max-width:899px){.hero-stage .stage-more{display:none}}

/* Step aside while the car is in use; stay if a keyboard user is on one of the links */
.hero-stage .hero-copy,.hero-stage .hero-scrim{transition:opacity .4s ease}
.hero-stage.is-busy .hero-copy:not(:focus-within),.hero-stage.is-busy .hero-scrim{opacity:0}
.hero-stage.is-busy .hero-copy:not(:focus-within) a{pointer-events:none}
@media(prefers-reduced-motion:reduce){.hero-stage .hero-copy,.hero-stage .hero-scrim,.hero-stage .stage-more{transition:none}.hero-stage .hero-copy>*{animation:none}}

/* 900 to 1199px wide: a narrower column, so the car keeps a strip of its own to the right */
@media(min-width:900px) and (max-width:1199px){.hero-stage .hero-copy{width:min(560px,44vw)}}
/* 1280 by 720 and other short desktops: a narrower column and a smaller headline, as on the old hero */
@media(min-width:900px) and (max-height:760px){
 .hero-stage .hero-copy{width:min(560px,50vw)}
 .hero-stage .hero-copy .eyebrow::after{margin-bottom:14px}
 .hero-stage .hero-copy h1{font-size:clamp(30px,4vw,50px);margin-bottom:12px}
 .hero-stage .hero-copy .hero-lede{margin-bottom:16px}
}
/* Phones held sideways, and any wide screen under 500px tall: the wide composition fitted to the screen, as the old hero did at
   874 by 402: the hero is the screen below the masthead, the copy starts at the top in a narrow column, everything smaller */
@media(min-width:600px) and (max-width:899px) and (orientation:landscape),(min-width:900px) and (max-height:500px){
 .home-hero.hero-stage{min-height:calc(100svh - var(--stage-top,86px));align-items:flex-start}
 .hero-stage .hero-copy{align-self:flex-start;width:min(480px,44vw);padding:12px 0 0}
 .hero-stage .hero-copy .eyebrow{font-size:10px}
 .hero-stage .hero-copy .eyebrow::after{margin:6px 0 8px;width:48px}
 .hero-stage .hero-copy h1{font-size:clamp(24px,4.2vw,32px);margin-bottom:8px}
 .hero-stage .hero-copy .hero-lede{font-size:12.5px;line-height:1.45;margin-bottom:8px}
 .hero-stage .hero-copy .actions{gap:8px;margin-bottom:0}
 .hero-stage .hero-copy .actions .button{min-height:36px;padding:8px 14px;font-size:12px}
 .hero-stage .hero-copy .actions .text-link{font-size:9.5px}
 .hero-stage .hero-author{display:none}
}

/* Phones and portrait tablets: the copy over the top of the scene, the car in the strip below it, the controls along the bottom.
   The scene reads --stage-tier (f1-stage-flag.js) to lay its controls out and frame the car to match. */
@media(max-width:899px) and (orientation:portrait),(max-width:599px){
 /* the screen below the masthead (--stage-top, measured by revamp.js), so the caption, joystick and rail are in the first view,
    as on the old hero; only if the copy is taller than that (landscape phones) does the hero grow to keep them clear of it */
 .home-hero.hero-stage{--stage-gut:22px;--stage-tier:stack;align-items:flex-start;min-height:max(calc(100svh - var(--stage-top,78px)),calc(var(--stage-copy-bottom,560px) + 150px))}
 .hero-stage .hero-scrim{
  /* the old hero's fade: solid over the headline, easing out over the last lines and 11vh below them, so the car rises up behind the copy */
  -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.94) calc((var(--stage-copy-bottom,560px) + 11vh) * .6),rgba(0,0,0,.6) calc((var(--stage-copy-bottom,560px) + 11vh) * .8),transparent calc(var(--stage-copy-bottom,560px) + 11vh));
  mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.94) calc((var(--stage-copy-bottom,560px) + 11vh) * .6),rgba(0,0,0,.6) calc((var(--stage-copy-bottom,560px) + 11vh) * .8),transparent calc(var(--stage-copy-bottom,560px) + 11vh))}
 .hero-stage .hero-copy{flex:1 1 100%;align-self:flex-start;width:100%;min-width:0;margin:0;padding:32px var(--stage-gut) 0}
 .hero-stage .hero-copy .eyebrow{font-size:11px;letter-spacing:.14em}
 .hero-stage .hero-copy .eyebrow::after{width:56px;margin:8px 0 14px}
 .hero-stage .hero-copy h1{font-size:clamp(30px,9.8vw,72px);line-height:1.1;margin:0 0 14px}   /* "Lead the change." stays on one line down to 320px */
 .hero-stage .hero-copy .headline-outline{padding:0 .24em .23em}
 .hero-stage .hero-copy .hero-lede{font-size:15px;line-height:1.55;max-width:none;margin-bottom:18px}
 .hero-stage .hero-copy .actions{gap:12px;margin-bottom:14px}
 .hero-stage .hero-links{gap:8px 18px}
 .hero-stage .hero-copy .actions .button{min-height:48px;padding:12px 20px;font-size:14px}
 .hero-stage .hero-author{font-size:10px}
}
/* phones: the gold action, then the course and consultancy links one under the other, as the old hero set its link */
@media(max-width:599px){
 .hero-stage .hero-links{flex-direction:column;align-items:flex-start;gap:8px}
 .hero-stage .hero-copy .actions .text-link{font-size:10.5px;gap:6px}
}
/* the narrowest phones: the gold action's label on one line */
@media(max-width:359px){.hero-stage .hero-copy .actions .button{font-size:12px;padding-left:14px;padding-right:14px}}
/* Phones with a short visible screen (Safari with its toolbars shows about 560-680px of hero): a compact block, like the old
   hero's card at these heights, so the car has a clear strip between the text and the controls (the scene frames it there) */
@media(max-width:599px) and (max-height:760px){
 .hero-stage .hero-copy{padding-top:14px}
 .hero-stage .hero-copy .eyebrow{font-size:9.5px;line-height:14px}
 .hero-stage .hero-copy .eyebrow::after{margin:7px 0 10px;width:56px}
 .hero-stage .hero-copy h1{font-size:clamp(28px,8vw,34px);margin-bottom:8px}
 .hero-stage .hero-copy .hero-lede{font-size:13.5px;line-height:1.45;margin-bottom:12px}
 .hero-stage .hero-copy .actions{margin-bottom:10px;gap:8px}
 .hero-stage .hero-copy .actions .button{min-height:42px;padding-top:9px;padding-bottom:9px;font-size:13px}
 /* the two links share a line here, smaller, so the car keeps its strip */
 .hero-stage .hero-links{flex-direction:row;flex-wrap:wrap;gap:4px 16px}
 .hero-stage .hero-copy .actions .text-link{font-size:9.5px;letter-spacing:.06em;padding-bottom:2px}
}
@media(max-width:899px) and (orientation:portrait) and (max-height:700px),(max-width:599px) and (max-height:700px){.hero-stage .hero-author{display:none}}
@media(max-width:599px) and (max-height:620px){
 .hero-stage .hero-copy h1{font-size:clamp(26px,7.4vw,30px)}
 .hero-stage .hero-copy .hero-lede{font-size:13px;line-height:1.4}
}