/* Service walkthroughs: editorial layouts using the existing HNRX palette. */
.service-hero-links { display:flex; align-items:center; flex-wrap:wrap; gap:1.5rem 2rem; margin-top:2rem; }
.service-explainer { padding:clamp(3rem,6vw,6rem) 0; background:#071c1a; color:#f1ede3; }
.service-heading { max-width:860px; margin-bottom:2.5rem; }
.service-heading h2 { margin:.8rem 0 1rem; font-size:clamp(2.7rem,5.5vw,5rem); line-height:1.06; }
.service-heading > p { max-width:60ch; color:#bdc8c3; line-height:1.7; font-size:1.06rem; }
.proof-explorer { background:#f1ede3; color:#071c1a; border:1px solid #46534d; }
.proof-selector { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-bottom:1px solid #b8c1b6; padding:.6rem; gap:.5rem; }
.proof-selector[hidden], .proof-panel[hidden] { display:none!important; }
.proof-selector button { appearance:none; background:transparent; color:#071c1a; border:1px solid transparent; padding:1rem 1.3rem; min-height:60px; font:400 .8rem/1.5 var(--font-mono,monospace); cursor:pointer; display:flex; align-items:center; gap:1rem; text-align:left; }
.proof-selector button span { color:#6e343a; font-size:.7rem; }
.proof-selector button[aria-pressed="true"] { color:#f1ede3; background:#071c1a; }
.proof-selector button[aria-pressed="true"] span { color:#c1cec2; }
.proof-selector button:hover { border-color:#6e343a; }
.proof-explorer :is(a,button,video):focus-visible { outline:3px solid #923b42; outline-offset:3px; }
.proof-panel { display:grid; grid-template-columns:minmax(0,1.07fr) minmax(0,1fr); align-items:stretch; border-bottom:1px solid #b8c1b6; }
.proof-explorer.is-enhanced .proof-panel { border-bottom:0; animation:proof-arrive .36s ease-out both; }
.proof-visual { margin:0; position:relative; min-width:0; height:560px; background:#102a28; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.proof-visual > img, .proof-visual > video { display:block; width:100%; height:100%; object-fit:contain; }
.proof-visual figcaption { position:absolute; left:0; bottom:0; right:0; padding:1rem 1.25rem; color:#f1ede3; background:#071c1aeF; font:400 .64rem/1.6 var(--font-mono,monospace); letter-spacing:.02em; }
.proof-visual--source { display:grid; grid-template-rows:minmax(0,1fr) auto; padding:1rem 1rem 0; }
.proof-visual--source figcaption { position:static; margin:1rem -1rem 0; }
.proof-visual--detail { background:#dddcd5; }
.proof-visual--detail > img { width:100%; height:100%; object-fit:cover; transform:scale(1.7); transform-origin:50% 57%; }
.proof-visual--film { padding:1rem 1rem 3rem; }
.proof-visual--film video { max-width:100%; }
.proof-copy { padding:clamp(2rem,4vw,4rem); align-self:center; min-width:0; }
.proof-copy .meta { color:#6e343a; font-size:.65rem; line-height:1.65; letter-spacing:.06em; }
.proof-copy h3 { color:#071c1a; font-size:clamp(2.5rem,4vw,3.7rem); line-height:1.07; margin:1rem 0 1.3rem; }
.proof-copy > p, .proof-takeaway p { color:#314742; font-size:1rem; line-height:1.7; }
.proof-takeaway { border-top:1px solid #b8c1b6; margin-top:1.8rem; padding-top:1.3rem; }
.proof-takeaway p { margin-top:.5rem; font-size:.93rem; }
.proof-copy > a { display:inline-block; color:#071c1a; margin-top:1.4rem; font-size:.93rem; }
.proof-status { margin:0; padding:0; }
.proof-status:not(:empty) { padding:.65rem 1.2rem; color:#46534d; border-top:1px solid #b8c1b6; font:400 .6rem/1.5 var(--font-mono,monospace); }
.proof-sequence { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; gap:.65rem; padding:1.4rem; background:#102a28; min-height:560px; }
.proof-sequence .proof-visual { height:auto; aspect-ratio:9/16; overflow:visible; }
.proof-sequence .proof-visual:nth-child(2) { transform:translateY(-2rem); }
.proof-sequence .proof-visual:nth-child(3) { transform:translateY(2rem); }
.proof-sequence figcaption { position:static; padding:.6rem .2rem; font-size:.55rem; background:none; }
.proof-sequence .proof-visual { display:block; }
.proof-sequence img { aspect-ratio:9/16; height:auto; }
.proof-formats { position:relative; min-height:560px; perspective:1000px; overflow:hidden; background:#d7dbd2; }
.proof-format { position:absolute; margin:0; box-shadow:0 18px 38px #071c1a28; background:#f7f4ec; padding:.65rem; border:1px solid #c0c6bb; }
.proof-format img { width:100%; height:calc(100% - 1.6rem); object-fit:cover; display:block; }
.proof-format figcaption { font:400 .6rem/1.5 var(--font-mono,monospace); color:#071c1a; padding-top:.4rem; }
.proof-format--portrait { width:43%; height:62%; left:10%; top:8%; transform:rotateY(12deg) rotateZ(-7deg); }
.proof-format--wide { width:min(76%,430px); height:auto; right:3.5%; bottom:5.5rem; transform:rotateY(-10deg) rotateZ(5deg); }
.proof-format--wide > a { display:block; line-height:0; }
.proof-format--wide img { height:auto; aspect-ratio:16/9; object-fit:contain; object-position:center; }
.proof-formats > p { position:absolute; bottom:1.2rem; margin:0 1.4rem; font-size:.7rem; line-height:1.5; color:#314742; max-width:48ch; }
.service-brief { padding:clamp(3rem,6vw,6rem) 0; background:#102a28; color:#f1ede3; border-block:1px solid #344b45; }
.service-brief__grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,6vw,6rem); }
.service-brief h2 { font-size:clamp(2.4rem,4.4vw,4rem); line-height:1.08; margin:1rem 0 2rem; }
.service-brief dl { margin:0; }
.service-brief dl > div { display:grid; grid-template-columns:120px minmax(0,1fr); gap:1.5rem; padding:1.3rem 0; border-top:1px solid #52635c; }
.service-brief dt { font:400 .67rem/1.6 var(--font-mono,monospace); color:#c5d0c6; }
.service-brief dd { margin:0; color:#f1ede3; font-size:1rem; line-height:1.65; }
#starter-pack, #film-library, #film-walkthrough, #product-walkthrough, #muse-walkthrough { scroll-margin-top:100px; }
@keyframes proof-arrive { from { opacity:.65; transform:translateY(7px); } to { opacity:1; transform:none; } }
@media(max-width:850px) {
 .proof-panel { grid-template-columns:1fr; }
 .proof-visual { height:490px; }
 .proof-copy { padding:2rem; }
 .proof-sequence, .proof-formats { min-height:460px; }
 .service-brief__grid { grid-template-columns:1fr; }
}
@media(max-width:540px) {
 .service-hero-links { align-items:flex-start; flex-direction:column; }
 .service-heading h2 { font-size:2.7rem; }
 .proof-selector { padding:.35rem; gap:.2rem; }
 .proof-selector button { padding:.7rem .5rem; font-size:.62rem; gap:.15rem; flex-direction:column; align-items:flex-start; min-height:64px; }
 .proof-copy { padding:1.5rem; }
 .proof-copy h3 { font-size:2.5rem; }
 .proof-visual { height:420px; }
 .proof-sequence { min-height:350px; padding:.8rem; gap:.4rem; }
 .proof-formats { min-height:390px; }
 .proof-format--wide { bottom:5.1rem; }
 .proof-format figcaption { font-size:.5rem; }
 .proof-formats > p { bottom:.8rem; margin-inline:1rem; font-size:.65rem; }
 .service-brief dl > div { grid-template-columns:1fr; gap:.5rem; }
}
@media(prefers-reduced-motion:reduce) {
 .proof-explorer.is-enhanced .proof-panel { animation:none; }
 .proof-sequence .proof-visual, .proof-format { transform:none; }
}

/* The ensemble reference retains every character and name in each layout. */
.proof-panel--roster { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); }
.proof-panel--roster .proof-visual--roster { height:auto; display:flex; flex-direction:column; background:#898989; }
.proof-visual--roster > a { display:grid; place-items:center; width:100%; flex:1; }
.proof-visual--roster picture, .proof-visual--roster img { display:block; width:100%; height:auto; }
.proof-visual--roster figcaption { position:static; width:100%; }
#muse-walkthrough .proof-visual--film video { aspect-ratio:9/16; object-fit:contain; }
#carnival { scroll-margin-top:100px; }
#carnival .case-film--landscape { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); }
#carnival .case-film__player--landscape { width:100%; }
#carnival .case-film__player--landscape video { object-fit:contain; }
@media(max-width:850px) {
 .proof-panel--roster, #carnival .case-film--landscape { grid-template-columns:1fr; }
 #muse-walkthrough .proof-visual--film { height:auto; }
 #muse-walkthrough .proof-visual--film video { height:auto; max-height:70svh; }
}
