/* Shared heading alignment, loaded after each page's composition and theme. */
body :is(h1,h2,h3,h4,h5,h6){text-align:center;text-transform:none;text-wrap:balance}
/* Natural case, slightly fuller strokes and less compressed spacing. */
body:is(.family-home,[data-product]) main :is(.family-intro,.home-section-heading,.product-heading,.product-hero-copy,.hero-copy,.intro-heading,.scene-heading,.scroll-copy,.hero-outro,.stability-copy,.design-intro,.control-heading,.contact-visual,.design-heading,.creative-heading,.moves-intro,.closing) :is(h1,h2){font-weight:450;letter-spacing:-.025em}
body:is(.family-home,[data-product]) main :is(.detail-frame,.design-focus,.design-fact,.chapter-copy,.move-tile) h3{font-weight:450;letter-spacing:-.015em}

/* Section headings use the full content width, independent of nearby controls. */
.family-home .home-section-heading,
body[data-product] .scene-heading{display:block;text-align:center}
.family-home .home-stories>.home-section-heading,
body[data-product=three] .design-heading{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}
.family-home .home-stories>.home-section-heading>h2,
body[data-product=three] .design-heading>div{grid-column:2;grid-row:1}
.family-home .scene-strip-controls,
body[data-product=three] .design-heading>.text-button{grid-column:3;grid-row:1;justify-self:end}
body[data-product] .moves-intro{display:block;max-width:none;text-align:center}
body[data-product] .moves-intro>p:not(.eyebrow){margin:12px auto 0;max-width:none}
body[data-product=two] .intro.section-wrap{flex-direction:column;gap:24px;text-align:center}
body[data-product=two] .intro-heading{width:100%}
body[data-product=two] .intro .capabilities{justify-content:center}
body[data-product=two] .stability-copy h2{grid-column:1/-1}
body[data-product=two] .stability-copy .text-link{grid-row:2}
body[data-product=two] .design-intro h2,
body[data-product=three] .creative-heading h2{max-width:none;width:100%}
body[data-product=three] .closing{flex-direction:column;text-align:center}

/* Keep the existing split product compositions, centering within each copy area. */
.family-home .family-intro{display:block;right:auto;width:min(440px,40vw);text-align:left}
.family-home .family-intro h1{font-size:clamp(2rem,3.5vw,4rem);text-align:left}
.family-home .family-intro .intro-aside{margin-top:16px}
body[data-product] .product-intro :is(.product-hero-copy,.hero-copy){text-align:center}
body[data-product] .product-intro :is(.product-hero-actions,.hero-actions){justify-content:center}
body[data-product=two] .scroll-copy{text-align:center}
body[data-product=two] .scroll-copy .eyebrow{justify-content:center}
body[data-product=two] #hero-description{margin-inline:auto}
body[data-product=three] .chapter-copy{text-align:center}
body[data-product=three] .chapter-copy>p{margin-inline:auto}

/* Titles sit on the centreline of their own image or card. */
.family-home .product-heading{right:28px;text-align:center}
.family-home .detail-frame figcaption{right:28px}
body[data-product] .move-tile figcaption>div{display:block;width:100%}
body[data-product] .location-spread figcaption{display:block;text-align:center}
body[data-product] .location-spread figcaption>span{position:absolute;right:0;bottom:0}
body[data-product] .location-spread figcaption :is(strong,h2){display:block;max-width:none;margin-inline:auto}
body[data-product] .location-spread figcaption strong,
body[data-product] .scene-card figcaption{text-align:center;text-transform:none;text-wrap:balance}
body[data-product=two] .design-fact{text-align:center}
body[data-product=two] .control-row>span,
body[data-product=three] .creative-copy dt{text-align:center;text-transform:none;text-wrap:balance}
body[data-product] :is(.dialog-heading,.dialog-header,.move-dialog-header){display:grid;grid-template-columns:44px minmax(0,1fr) 44px}
body[data-product] :is(.dialog-heading,.dialog-header,.move-dialog-header)>h2{grid-column:2}
body[data-product] :is(.dialog-heading,.dialog-header,.move-dialog-header)>button{grid-column:3}

@media(max-width:1100px){
 .family-home .home-stories>.home-section-heading{grid-template-columns:minmax(0,1fr);justify-items:center;gap:16px}
 .family-home .home-stories>.home-section-heading>h2{grid-column:1}
 .family-home .scene-strip-controls{grid-column:1;grid-row:2;justify-self:center}
}
@media(max-width:760px){
 /* A separate caption area gives the narrow video its full, unobstructed frame. */
 .family-home .opening-scene{--opening-video-height:100svh;height:auto;min-height:0;max-height:none;padding-top:var(--opening-video-height);background:var(--theme-page,#080909)}
 .family-home .opening-scene>.field-poster,
 .family-home .opening-scene>video{inset:0 0 auto;height:var(--opening-video-height);border-radius:0 0 var(--radius-media) var(--radius-media)}
 .family-home .opening-scene:after{inset:0 0 auto;height:var(--opening-video-height)}
 .family-home .family-intro{position:relative;inset:auto;width:auto;padding:28px var(--page-gutter) 32px;text-align:center}
 .family-home .family-intro h1{font-size:clamp(1.75rem,7.5vw,2.5rem);text-align:center}
 .family-home .family-intro .intro-aside{margin-top:8px;padding:0}
 .family-home .family-intro .home-link{font-size:.875rem;margin-top:0;justify-content:center}
 .family-home .opening-scene .field-play{top:calc(var(--opening-video-height) - 60px);bottom:auto}
 .family-home .opening-scene figcaption{top:calc(var(--opening-video-height) - 46px);bottom:auto;left:24px;right:auto}
 html[data-theme=light] .family-home .family-intro h1{color:var(--copy-title);text-shadow:none}
 html[data-theme=light] .family-home .family-intro h1 span{color:var(--theme-accent)}
 html[data-theme=light] .family-home .intro-aside .home-link{color:var(--copy-title);border-color:var(--theme-line);text-shadow:none}
 .family-home .product-heading{left:0;right:0}
 .family-home .product-three .product-heading{right:56%}
 .family-home .detail-frame figcaption{left:14px;right:14px}
 body[data-product=three] .design-heading{grid-template-columns:minmax(0,1fr)}
 body[data-product=three] .design-heading>div{grid-column:1}
 body[data-product=two] .stability-copy{text-align:center}
 body[data-product=two] .stability-copy .text-link{justify-self:center}
 body[data-product=two] .scroll-copy h2 span{white-space:normal}
 body[data-product] .product-intro h1{font-size:clamp(2rem,8.3vw,3.4rem)}
}
