/* khhero.20261009sh1.css  Kindra Hire split hero TEST (Zee's design, Michael approved a test 9 Oct 2026; Beacon).
   Opt-in: only a hero element carrying class "kh-sh" changes. Format only: no text, link or image changes.
   Desktop/tablet (>= 860px): copy left, the page's existing hero picture/film right, fading into navy on its left edge.
   Phone (< 860px): copy first, then the picture. The hero hugs its content: header clearance + a small gap, no min-height, no 100vh.
   Film play mode (.playing) is left to the page's own CSS (every rule here is :not(.playing)).
   Specificity: S = :is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh) counts as two IDs, so it beats the pages' #top.heroclip and
   .page[data-page] rules without touching them; !important beats their !important rules. No element uses those ids. */
:root{--khsh-hdr:65px;--khsh-gap:clamp(16px,2.2vw,28px);--khsh-ink:#0A1628}

/* ---------- all widths ---------- */
:is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing){
  display:grid!important;position:relative!important;isolation:isolate;overflow:hidden!important;
  height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;
  padding:var(--khsh-hdr) 0 0 0!important;margin:0!important;
  background-color:var(--khsh-ink)!important;background-size:0 0!important;background-repeat:no-repeat!important;
  align-items:center!important;justify-items:stretch!important;
  border-bottom:1px solid rgba(232,244,242,.10);
}
/* the copy block */
:is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing) > .inner,
:is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing) > .over,
:is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing) > .wrap{
  grid-column:1!important;grid-row:1!important;align-self:center!important;
  position:relative!important;inset:auto!important;z-index:3!important;transform:none!important;
  width:auto!important;max-width:none!important;margin:0!important;background:none!important;pointer-events:auto!important;
}
:is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing) > .over > .inner{max-width:none!important;margin:0!important;width:auto!important}
:is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing) :is(.d,h1,.lead,p){text-shadow:none!important}
:is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing) h1{max-width:none!important;color:var(--ice)!important;-webkit-text-fill-color:currentColor!important}
:is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing) .lead{max-width:56ch!important}
:is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing) .chip:not(.solid){background:transparent!important}
:is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing) .chip.m{color:#EC3A9A!important;border-color:#EC3A9A!important}
/* the picture column: the existing background image (inherited by ::after), poster, picture and loop/bg film */
:is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing)::after{
  content:""!important;display:block!important;grid-column:2;grid-row:1;position:absolute!important;inset:0!important;z-index:0!important;
  background-image:inherit!important;background-size:cover!important;background-repeat:no-repeat!important;
  background-position:var(--khsh-pos,50% 30%)!important;background-color:#050B14!important;opacity:1!important;
}
/* heroclip heroes whose still lives on the film (data-poster/poster): the same URL is passed in --khsh-img */
:is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing)[style*="--khsh-img"]::after{background-image:var(--khsh-img)!important}
:is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing) > :is(video.bg,video.loop,picture,img.poster,img:not(.buddy)){
  grid-column:2;grid-row:1;position:absolute!important;inset:0!important;left:0!important;right:0!important;top:0!important;bottom:0!important;
  width:100%!important;height:100%!important;max-width:none!important;margin:0!important;object-fit:cover!important;
  object-position:var(--khsh-pos,50% 30%)!important;z-index:1!important;transform:none!important;
}
:is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing) > picture > img{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;
  object-position:var(--khsh-pos,50% 30%)!important;transform:none!important;z-index:auto!important;
}
/* hand-built heroes (round 2): no masks, no push/rise animation transforms on the picture */
:is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing) > img,:is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing) > picture,:is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing) > picture > img{-webkit-mask-image:none!important;mask-image:none!important;animation:none!important;filter:none}
/* /print/: the Buddy cut-out stands in the picture column, feet on the bottom edge, in front of the desk plate and the fade */
:is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing) > img.buddy{
  grid-column:2;grid-row:1;position:absolute!important;inset:auto!important;left:auto!important;top:auto!important;right:clamp(8px,4%,48px)!important;bottom:0!important;
  height:94%!important;width:auto!important;max-width:92%!important;object-fit:contain!important;object-position:50% 100%!important;
  z-index:3!important;margin:0!important;transform:none!important;filter:drop-shadow(0 24px 32px rgba(0,0,0,.45))!important;justify-self:end;align-self:end;
}
/* intro moved up into the hero (round 2): its own inline margin-top:0 gets a small gap under the H1 */
:is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing) > .over .lead{margin-top:14px!important}
:is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing) > .over .row{margin-top:20px!important}
/* soft fade into navy on the picture's inner edge */
:is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing)::before{
  content:""!important;display:block!important;grid-column:2;grid-row:1;position:absolute!important;inset:0!important;z-index:2!important;
  pointer-events:none;opacity:1!important;
  background:linear-gradient(90deg,var(--khsh-ink) 0%,rgba(10,22,40,.72) 9%,rgba(10,22,40,0) 34%)!important;
}
/* tap-for-sound pill sits on the picture */
:is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing) > .snd{
  grid-column:2;grid-row:1;position:absolute!important;top:auto!important;left:auto!important;right:16px!important;bottom:16px!important;
  z-index:4!important;transform:none!important;margin:0!important;
}

/* ---------- desktop and tablet ---------- */
@media (min-width:860px){
  :is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing){grid-template-columns:minmax(0,56fr) minmax(0,44fr)!important;grid-template-rows:auto!important}
  :is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing) > .inner,
  :is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing) > .over,
  :is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing) > .wrap{
    padding:var(--khsh-gap) clamp(24px,3.4vw,56px) clamp(28px,3.6vw,52px) max(var(--gut,24px),calc((100vw - 1120px) / 2))!important;
  }
  :is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing) h1{font-size:clamp(2.6rem,5.4vw,5.4rem)!important;line-height:.88!important}
}
/* ---------- phone: copy first, then the picture ---------- */
@media (max-width:859.98px){
  :is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing){grid-template-columns:100%!important;grid-template-rows:auto clamp(200px,60vw,440px)!important}
  :is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing) > .inner,
  :is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing) > .over,
  :is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing) > .wrap{padding:var(--khsh-gap) var(--gut,18px) 22px!important}
  :is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing)::after,
  :is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing)::before,
  :is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing) > :is(video.bg,video.loop,picture,img.poster,img:not(.buddy)),
  :is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing) > img.buddy,
  :is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing) > .snd{grid-column:1;grid-row:2}
  :is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing)::before{background:linear-gradient(180deg,var(--khsh-ink) 0%,rgba(10,22,40,0) 22%)!important}
  :is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing) h1{font-size:clamp(2.4rem,11.5vw,4rem)!important;line-height:.88!important}
}
/* /guardrails/ and /coach/ (round 2): their phone picture is a portrait crop (picture <source> up to 699px/599px), so the phone picture row is taller
   and framed on the faces at the top, as on live */
@media (max-width:859.98px){
  :is(#khsh-a,.kh-sh):is(#khsh-b,.kh-sh):not(.playing):is(section[aria-labelledby="h-hero"],section[aria-labelledby="h1"]){grid-template-rows:auto clamp(300px,96vw,560px)!important;--khsh-pos:50% 10%}
}