/* Requested responsive composition only. Load after migration-changes.css.
   The approved presentation from 1200px and all four panoramic heroes are
   unchanged. The shared opaque hero surface below uses the same screen for
   the image and surrounding paper, with live copy above it. */

@media (min-width:701px) and (max-width:1199px){
 body.restored-home #main,
 body.subpage:not(.migration-pano) #main{padding-top:81px!important}

 /* Keep the portrait openings beside their copy through tablet widths. */
 body.subpage:not(.migration-pano) #main>.page-hero[data-hero-subject]{
  display:grid!important;
  grid-template-columns:minmax(0,55fr) minmax(0,45fr);
  align-items:stretch;
  position:relative;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  min-height:480px!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden;
 }
 body.subpage:not(.migration-pano) #main>.page-hero[data-hero-subject] .hero-subject-space{display:none!important}
 body.subpage:not(.migration-pano) #main>.page-hero[data-hero-subject] .page-hero__copy{
  display:block!important;
  grid-column:1 / 2!important;
  grid-row:1!important;
  order:initial!important;
  position:relative;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  min-height:0!important;
  margin:0!important;
  padding:38px 24px 40px var(--gutter)!important;
  box-sizing:border-box;
 }
 body.subpage:not(.migration-pano) #main>.page-hero[data-hero-subject] h1{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  font-size:clamp(38px,5.2vw,52px)!important;
  line-height:1.06!important;
  text-wrap:pretty!important;
 }
 body.subpage:not(.migration-pano) #main>.page-hero[data-hero-subject] .page-hero__copy>p{
  width:100%!important;
  max-width:none!important;
  margin:24px 0 0!important;
  font-size:20px!important;
  line-height:1.45!important;
 }
 body.subpage:not(.migration-pano) #main>.page-hero[data-hero-subject] .page-hero__art{
  grid-column:2 / 3!important;
  grid-row:1!important;
  order:initial!important;
  position:relative!important;
  inset:auto!important;
  left:auto!important;
  right:auto!important;
  align-self:stretch!important;
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  min-height:480px!important;
  margin:0!important;
  aspect-ratio:auto!important;
 }
 body.subpage:not(.migration-pano) #main>.page-hero[data-hero-subject] .page-hero__art img{
  object-fit:cover!important;
  object-position:right center!important;
 }

 /* Home already has the approved tablet split; keep it out of the older
    image-first flex rules while retaining that same copy/art balance. */
 body.restored-home #main .hero-scene:has(.art-v2-sword-hand) .hero{
  display:grid!important;
  grid-template-columns:minmax(0,55fr) minmax(0,45fr);
  align-items:stretch;
  min-height:480px!important;
 }
 body.restored-home #main .hero-scene:has(.art-v2-sword-hand) .hero-copy{
  grid-column:1 / 2!important;
  grid-row:1!important;
  order:initial!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:36px 20px 40px var(--gutter)!important;
  box-sizing:border-box;
 }
 body.restored-home #main .hero-scene:has(.art-v2-sword-hand) .hero-copy h1{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  font-size:clamp(42px,4.9vw,58px)!important;
  line-height:1.06!important;
 }
 body.restored-home #main .hero-scene:has(.art-v2-sword-hand) .hero-description{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
 }
 body.restored-home #main .hero-scene:has(.art-v2-sword-hand) .hero-copy .hero-description p{
  width:100%!important;
  max-width:none!important;
  font-size:20px;
  line-height:1.45;
 }
 body.restored-home #main .hero-scene:has(.art-v2-sword-hand) .hero-art{
  grid-column:2 / 3!important;
  grid-row:1!important;
  order:initial!important;
  position:relative!important;
  inset:auto!important;
  left:auto!important;
  right:auto!important;
  align-self:stretch!important;
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  min-height:480px!important;
  margin:0!important;
  aspect-ratio:auto!important;
 }
 body.restored-home #main .hero-scene:has(.art-v2-sword-hand) .hero-art img{
  object-fit:cover!important;
  object-position:80% center!important;
 }
}

@media (max-width:700px){
 body.restored-home #main,
 body.subpage:not(.migration-pano) #main{padding-top:73px!important}

 /* One hero, with a full-width headline at its upper left. The lower copy
    stays on the source artwork's quiet left side, beside the subject. */
 body.subpage:not(.migration-pano) #main>.page-hero[data-hero-subject]{
  --responsive-hero-height:560px;
  --responsive-art-width:130%;
  --responsive-art-left:-15%;
  display:block!important;
  position:relative;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  min-height:var(--responsive-hero-height)!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden;
 }
 body.subpage.subpage-company #main>.page-hero[data-hero-subject]{--responsive-hero-height:600px}
 body.subpage.subpage-solutions #main>.page-hero[data-hero-subject]{--responsive-hero-height:620px}
 body.subpage:not(.migration-pano) #main>.page-hero[data-hero-subject="portrait"]{--responsive-art-left:-25%}
 body.subpage:not(.migration-pano) #main>.page-hero[data-hero-subject] .hero-subject-space{display:none!important}
 body.subpage:not(.migration-pano) #main>.page-hero[data-hero-subject] .page-hero__copy{
  display:block!important;
  position:relative;
  order:initial!important;
  width:100%!important;
  max-width:none!important;
  min-height:var(--responsive-hero-height)!important;
  height:auto!important;
  margin:0!important;
  padding:28px var(--gutter) 36px!important;
  box-sizing:border-box;
 }
 body.subpage:not(.migration-pano) #main>.page-hero[data-hero-subject] h1{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  font-size:clamp(36px,9.4vw,44px)!important;
  line-height:1.06!important;
  letter-spacing:-.045em!important;
  text-wrap:pretty!important;
 }
 body.subpage:not(.migration-pano) #main>.page-hero[data-hero-subject] .page-hero__copy>p{
  width:54%!important;
  max-width:none!important;
  margin:26px 0 0!important;
  font-size:17px!important;
  line-height:1.45!important;
  text-wrap:pretty;
 }
 body.subpage:not(.migration-pano) #main>.page-hero[data-hero-subject] .hero-link,
 body.subpage:not(.migration-pano) #main>.page-hero[data-hero-subject] .hero-film-button{
  max-width:54%!important;
  font-size:16px!important;
  line-height:1.4!important;
 }
 body.subpage:not(.migration-pano) #main>.page-hero[data-hero-subject] .hero-link{margin-top:24px!important}
 body.subpage:not(.migration-pano) #main>.page-hero[data-hero-subject] .page-hero__art{
  display:block!important;
  position:absolute!important;
  inset:0 auto 0 var(--responsive-art-left)!important;
  left:var(--responsive-art-left)!important;
  right:auto!important;
  top:0!important;
  bottom:0!important;
  order:initial!important;
  align-self:auto!important;
  width:var(--responsive-art-width)!important;
  max-width:none!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  aspect-ratio:auto!important;
 }
 body.subpage:not(.migration-pano) #main>.page-hero[data-hero-subject] .page-hero__art img{
  object-fit:contain!important;
  object-position:center bottom!important;
 }

 /* Training and Conversation use the source subject's actual outline rather
    than a fixed-width paragraph. The polygon begins at the float's rightmost
    edge, leaving the title and opening lines wide; its exclusion grows only
    as the portrait/arcade enters the copy's vertical range. */
 body.subpage:not(.migration-pano) #main>.page-hero[data-hero-subject="portrait"]{
  --responsive-hero-height:520px;
  --responsive-art-width:min(130%,560px);
  --responsive-art-left:calc(100% - min(130%,560px) + min(5vw,20px));
  --responsive-subject-shape:polygon(100% 0,100% 100%,0 100%,0 74%,18% 60%,30% 46%,42% 34%,55% 24%,100% 21%);
 }
 body.subpage:not(.migration-pano) #main>.page-hero[data-hero-subject="arcade"]{
  --responsive-hero-height:540px;
  --responsive-art-width:min(130%,560px);
  --responsive-art-left:calc(100% - min(130%,560px) + min(25vw,110px));
  /* The image ends 90px above the minimum hero bottom; the float begins at the
     copy's 28px top inset. Its lower 45% contains a full-width horizon. */
  --responsive-copy-image-end:calc(var(--responsive-hero-height) - 118px);
  --responsive-horizon-start:calc(var(--responsive-copy-image-end) - 32.923vw);
  --responsive-subject-shape:polygon(100% 0,100% var(--responsive-copy-image-end),0 var(--responsive-copy-image-end),0 var(--responsive-horizon-start),44% var(--responsive-horizon-start),48% 43%,54% 32%,67% 25%,100% 22%);
 }
 body.subpage:not(.migration-pano) #main>.page-hero:is([data-hero-subject="portrait"],[data-hero-subject="arcade"]) .hero-subject-space{
  display:block!important;
  float:right;
  width:68%;
  height:calc(var(--responsive-hero-height) - 64px);
  margin:0 calc(-1 * var(--gutter)) 0 0;
  shape-outside:var(--responsive-subject-shape);
  shape-margin:10px;
  pointer-events:none;
 }
 body.subpage:not(.migration-pano) #main>.page-hero:is([data-hero-subject="portrait"],[data-hero-subject="arcade"]) .page-hero__copy>p{
  width:100%!important;
  max-width:none!important;
 }
 body.subpage:not(.migration-pano) #main>.page-hero:is([data-hero-subject="portrait"],[data-hero-subject="arcade"]) .page-hero__art{
  inset:-90px auto auto var(--responsive-art-left)!important;
  top:-90px!important;
  bottom:auto!important;
 }
 /* Keep all Briefing text clear of the entire lower landscape. The subject
    stage stays fixed while any remaining copy continues below its image;
    otherwise growing copy would also move that image down into the text. */
 body.subpage:not(.migration-pano) #main>.page-hero[data-hero-subject="arcade"] .hero-subject-space{
  width:calc(100% + var(--gutter));
 }
 body.subpage:not(.migration-pano) #main>.page-hero[data-hero-subject="arcade"] .page-hero__art{
  height:var(--responsive-hero-height)!important;
 }

 body.restored-home #main .hero-scene:has(.art-v2-sword-hand) .hero{
  display:block!important;
  position:relative;
  width:100%;
  height:auto!important;
  min-height:530px!important;
  padding:0!important;
  overflow:hidden;
 }
 body.restored-home #main .hero-scene:has(.art-v2-sword-hand) .hero-copy{
  display:block;
  position:relative;
  width:100%!important;
  max-width:none!important;
  min-height:530px;
  margin:0!important;
  padding:28px var(--gutter) 36px!important;
  box-sizing:border-box;
 }
 body.restored-home #main .hero-scene:has(.art-v2-sword-hand) .hero-copy h1{
  width:100%!important;
  max-width:none!important;
  font-size:clamp(36px,9.4vw,44px)!important;
  line-height:1.06!important;
 }
 body.restored-home #main .hero-scene:has(.art-v2-sword-hand) .hero-wrap-shape{display:none!important}
 body.restored-home #main .hero-scene:has(.art-v2-sword-hand) .hero-description{
  display:block;
  width:54%!important;
  max-width:none;
  margin-top:26px;
 }
 body.restored-home #main .hero-scene:has(.art-v2-sword-hand) .hero-copy .hero-description p{
  width:100%!important;
  font-size:18px;
  line-height:1.45;
 }
 body.restored-home #main .hero-scene:has(.art-v2-sword-hand) .hero-art{
  display:block!important;
  position:absolute!important;
  inset:0 auto 0 -20%!important;
  left:-20%!important;
  right:auto!important;
  top:0!important;
  bottom:0!important;
  width:140%!important;
  max-width:none!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  aspect-ratio:auto!important;
 }
 body.restored-home #main .hero-scene:has(.art-v2-sword-hand) .hero-art img{
  object-fit:contain!important;
  object-position:center bottom!important;
 }
}

/* One opaque drawing surface owns the paper and hero ink. Keep it below live
   text and the image fallback, with no CSS multiply or parent stage mask. */
#main .site-hero-field.site-hero-composite{z-index:0!important;opacity:1!important;mix-blend-mode:normal!important}
#main .hero-copy,#main .page-hero__copy{position:relative;z-index:3!important}
#main [data-site-art="hero"]{z-index:1!important}