/* A single coherent scene; typography stays real HTML, never part of the image. */
.hero-cinematic{display:block;position:relative;padding:0;margin:0;width:100%;isolation:isolate;background:#eee6d8}
.cinematic-figure{margin:0}
.cinematic-scene{position:relative;aspect-ratio:16/9;overflow:hidden}
.cinematic-scene>img,.cinematic-scene>video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.cinematic-scene>video{position:absolute;inset:0;opacity:0}
.cinematic-scene>video[hidden]{display:none}
.cinematic-scene[data-playing=true]>video{opacity:1}
.hero-cinematic>.hero-copy{position:absolute;z-index:2;left:max(3.5%,calc((100% - 1500px)/2));top:10%;width:29%;max-width:450px}
.hero-cinematic h1{font-size:clamp(3.4rem,5.6vw,6.8rem);margin:20px 0 22px}
.hero-cinematic h1 br:nth-of-type(2){display:initial}
.hero-cinematic .intro{font-size:clamp(.95rem,1.25vw,1.15rem);max-width:350px;line-height:1.65}
.hero-cinematic .eyebrow{font-size:clamp(.625rem,.8vw,.75rem)}
.hero-cinematic .hero-detail{max-width:300px}
.hero-wall-copy{color:#332b24;mix-blend-mode:multiply}
.hero-wall-copy>.button{margin:20px 0 0;min-height:44px;padding:9px 0;background:transparent;color:#49372b;border:0;border-bottom:1px solid #806b5970;gap:14px;justify-content:flex-start;transition:color .2s,border-color .2s}
.hero-wall-copy>.button:hover{background:transparent;color:#793e2d;border-bottom-color:currentColor}
.hero-wall-copy>.button:focus-visible{outline:2px solid #49372b;outline-offset:4px}
.hero-wall-copy>.button span{flex-shrink:0;font-size:1.05em}
.hero-cinematic>.hero-copy>.intro{margin-top:24px}
.cinematic-caption{position:absolute;z-index:3;bottom:16px;right:80px;left:24px;display:flex;justify-content:flex-end;align-items:center;gap:16px;margin:0;padding:0;font-size:.68rem;letter-spacing:.03em;color:#3e342c}
.cinematic-caption>span{padding:5px 9px;background:#f5f1e9e6}
.cinematic-open{display:inline-flex;align-items:center;min-height:44px;border:0;border-bottom:1px solid #806b59;padding:6px 10px;background:#f5f1e9ed;font-size:.75rem}
.cinematic-open img[hidden]{display:none}
.cinematic-placeholder{aspect-ratio:16/9}
.cinematic-dialog{padding:0;border:0;max-width:none;width:min(1200px,calc(100vw - 24px),calc((100dvh - 24px)*16/9));max-height:calc(100dvh - 24px);background:#2f2923;overflow:hidden}
.cinematic-dialog .close{z-index:5;background:#f5f1e9ed;display:grid;place-items:center;padding:0}
.cinematic-dialog .cinematic-scene{width:100%;aspect-ratio:16/9}
#cinematic-toggle{position:absolute;z-index:4;bottom:16px;right:16px;display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:1px solid #806b5980;border-radius:50%;background:#f5f1e9db;color:var(--ink);backdrop-filter:blur(6px)}
#cinematic-toggle svg{display:block;width:18px;height:18px;fill:currentColor}
#cinematic-toggle .cinematic-play{display:none}
#cinematic-toggle[data-paused=true] .cinematic-play{display:block}
#cinematic-toggle[data-paused=true] .cinematic-pause{display:none}
#cinematic-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
#cinematic-toggle[hidden]{display:none}
#cinematic-toggle:hover{background:#fffaf1}
@media(min-width:901px) and (max-width:1100px){
 .hero-cinematic>.hero-copy{top:6%;left:3.5%;width:29%}
 .hero-cinematic h1{font-size:clamp(2.7rem,5.6vw,3.85rem);margin:12px 0 16px}
 .hero-cinematic .intro{font-size:.9rem;line-height:1.5}
 .hero-wall-copy>.button{margin-top:18px;font-size:.8rem}
 .hero-cinematic .hero-detail{font-size:.7rem;margin-top:14px}
}
@media(max-width:900px){
 /* Preserve the actual left wall, not a portrait crop or an invented extension.
    The headline lives on that wall; readable supporting copy follows the scene. */
 .hero-cinematic{display:flex;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);padding-bottom:26px}
 .hero-cinematic>.hero-copy{display:contents}
 .hero-wall-copy{position:absolute;z-index:2;left:3.5%;top:4vw;width:29%}
 .hero-cinematic h1{font-size:clamp(1.2rem,5.45vw,3.1rem);line-height:1.05;margin:12px 0 0}
 .hero-cinematic .eyebrow{font-size:clamp(.5rem,1vw,.65rem);line-height:1.5;letter-spacing:.1em}
 .hero-cinematic .intro{order:1;max-width:540px;font-size:1rem;margin:20px 24px 0}
 .hero-wall-copy>.button{width:fit-content;max-width:100%;margin:16px 0 0;font-size:clamp(.75rem,1.6vw,.95rem);line-height:1.4;min-height:44px;padding:7px 0;gap:6px}
 .hero-cinematic .hero-detail{order:3;align-self:flex-start;text-align:left;margin:12px 24px 0}
 .cinematic-figure{order:0;position:relative;min-width:0}
 .cinematic-scene{aspect-ratio:16/9}
 .cinematic-scene>img,.cinematic-scene>video{object-position:center}
 .cinematic-caption{position:static;padding:8px 24px;min-height:60px;background:var(--paper);flex-wrap:wrap;justify-content:space-between;gap:8px}
 .cinematic-caption>span{padding:0;background:none}
}
@media(max-width:600px){
 .hero-wall-copy{top:6vw}
 .hero-wall-copy .eyebrow{display:none}
 .hero-cinematic h1{margin:0;font-size:clamp(1.2rem,5.45vw,2.1rem)}
 .hero-cinematic .intro,.hero-cinematic .hero-detail{margin-inline:20px}
 .hero-wall-copy>.button{margin-top:12px}
 .cinematic-caption{padding-inline:20px;font-size:.625rem;gap:4px 10px}
 #cinematic-toggle{bottom:12px;right:12px}
}
.image-dialog.subject-framing{width:min(1100px,calc(100% - 32px),calc((100dvh - 110px)*1.2))}
/* The hero's left copy space is unnecessary in the expanded product view.
   Crop only that margin; preserve the tabletop, every leg and floor contact. */
.image-dialog.subject-framing #expanded-image{aspect-ratio:1.2;height:auto;max-height:none;object-fit:cover;object-position:right center}