/* The doctor is the primary right-hand subject. The anatomical illustration
   fills that visual field as a quiet, cropped background on every viewport. */
.portrait img,.portrait video{transition:opacity .18s ease}

@media(min-width:761px){
  .hero-track.has-real-portrait .portrait{
    left:40%;top:calc(-16% + clamp(10px,1.8vh,20px));bottom:auto;width:57%;height:124%;
  }
  .hero-track.has-real-portrait .portrait img,
  .hero-track.has-real-portrait .portrait video{
    transform:scale(1.12);
    transform-origin:center top;
    object-position:center top;
  }
  .hero-track.has-real-portrait .hero-anatomy{
    z-index:1;inset:0;width:100%;height:100%;max-width:none;
    object-fit:cover;object-position:center 52%;opacity:.075;
    transform:scale(1.035);transform-origin:center;
    filter:saturate(.62) contrast(.86);
    mask-image:linear-gradient(90deg,rgba(0,0,0,.52) 0%,#000 18%,#000 82%,rgba(0,0,0,.52) 100%);
    -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.52) 0%,#000 18%,#000 82%,rgba(0,0,0,.52) 100%);
  }
  [data-theme=dark] .hero-track.has-real-portrait .hero-anatomy{opacity:.12;filter:sepia(.12) saturate(.58) hue-rotate(110deg)}
}

@media(min-width:761px) and (max-width:1100px){
  .hero-track.has-real-portrait .portrait{left:37%;top:calc(-15% + clamp(10px,1.5vh,16px));bottom:auto;width:63%;height:119%}
  .hero-track.has-real-portrait .hero-anatomy{inset:0;width:100%;height:100%;opacity:.065}
  [data-theme=dark] .hero-track.has-real-portrait .hero-anatomy{opacity:.105}
}

@media(max-width:760px){
  .hero-track .hero-stage{
    display:grid;grid-template-columns:minmax(0,1fr);align-items:start;
    padding:28px var(--gutter) 0;
  }
  .hero-track .hero-copy{display:contents}
  .hero-track .hero-eyebrow,
  .hero-track .hero-copy h1,
  .hero-track .hero-subtitle,
  .hero-track .hero-intro{
    grid-column:1;width:min(100%,430px);justify-self:center;text-align:center;
    margin-left:0;margin-right:0;
  }
  .hero-track .hero-eyebrow{grid-row:1;margin-bottom:14px;font-size:10px}
  .hero-track .hero-copy h1{grid-row:2}
  .hero-track .hero-subtitle{grid-row:3;margin-top:14px;font-size:15px;font-weight:520;line-height:1.45}
  .hero-track .hero-intro{grid-row:4;margin-top:14px}
  .hero-track .hero-actions{
    grid-column:1;grid-row:6;justify-self:center;width:min(calc(100% - 36px),320px);
    margin:8px 0 0;gap:9px;z-index:3;
  }
  .hero-track .hero-actions .button,
  .hero-track .hero-actions .hero-secondary{display:grid;width:100%;gap:8px}
  .hero-track.has-real-portrait .hero-anatomy{
    display:block;z-index:1;top:24%;right:auto;bottom:auto;left:50%;
    width:160vw;height:auto;max-width:none;
    object-fit:contain;object-position:center;opacity:.17;
    transform:translateX(-50%);transform-origin:center;
    filter:saturate(.68) contrast(.9);
    mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 90%,transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 90%,transparent 100%);
  }
  [data-theme=dark] .hero-track.has-real-portrait .hero-anatomy{opacity:.19;filter:sepia(.12) saturate(.62) hue-rotate(110deg)}
  .hero-track.has-real-portrait .portrait{
    position:relative;grid-column:1;grid-row:5;justify-self:center;
    left:auto;bottom:auto;width:min(105.6vw,418px);
    height:clamp(264px,calc(100svh - 452px),407px);margin:2px 0 0;
  }
  .hero-track.has-real-portrait .portrait img,
  .hero-track.has-real-portrait .portrait video{
    transform:scale(1.12);
    transform-origin:center bottom;
  }
  .hero-track.is-motion .portrait{height:clamp(264px,calc(100svh - 452px),407px);min-height:0;margin-top:2px}
  .hero-track .hero-footer,
  .hero-track:not(.is-motion) .hero-footer{
    position:relative;grid-column:1;grid-row:7;left:auto;right:auto;bottom:auto;
    display:grid;grid-template-columns:minmax(0,1fr);align-items:end;gap:0;
    width:100%;margin:18px 0 22px;
  }
  .hero-track .hero-principles{
    display:grid;grid-template-columns:1fr;justify-items:center;gap:7px;
    grid-column:1;width:100%;max-width:360px;flex:none;margin:0 auto;
    font-size:12px;line-height:1.45;text-align:center;
  }
  .hero-track .hero-principles li{justify-content:center;white-space:normal}
  .hero-track .hero-principles li+li::before{
    width:3px;height:3px;margin:0 9px 0 0;border-radius:50%;
  }
}

@media(max-width:380px){
  .hero-track .hero-stage{padding-top:24px}
  .hero-track.has-real-portrait .portrait,
  .hero-track.is-motion .portrait{height:clamp(264px,calc(100svh - 452px),363px);margin-top:2px}
  .hero-track .hero-principles{font-size:11px}
}

@media(max-width:760px) and (max-height:720px){
  .hero-track.has-real-portrait .portrait,
  .hero-track.is-motion .portrait{height:264px;margin-top:0}
  .hero-track .hero-actions{margin-top:8px}
  .hero-track .hero-footer,
  .hero-track:not(.is-motion) .hero-footer{margin-top:10px;margin-bottom:16px;transform:translateY(-8px)}
}