:root{--wrap:1760px}

.approach-layout { width:calc(100% - 80px); max-width:1760px; margin:40px auto 0; }
.approach-layout h2 { margin:0 0 28px; color:#842320; font:400 44px/1.12 Forum,serif; }
.approach-layout__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.approach-layout .approach-video,.approach-layout video,.approach-layout .video-overlay { border-radius:20px!important; }
.approach-layout video { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.approach-layout .video-overlay { background:transparent!important; z-index:1; }
.approach-layout .approach-notes { font-size:clamp(14px,1.2vw,20px); }
.approach-layout .approach-note__line { stroke-width:1.3; }
@media(max-width:1250px){.approach-layout{width:calc(100% - 64px)}}
@media(max-width:1023px) and (orientation:portrait), (max-width:850px) {
 .approach-layout { margin-top:48px; }
 .approach-layout__grid { grid-template-columns:minmax(0,1fr); gap:0; }
 .approach-layout h2 { font-size:40px; margin-bottom:24px; }
 .approach-layout .approach-video--laptop,.approach-layout .approach-video--laptop video,.approach-layout .approach-video--laptop .video-overlay { border-radius:20px 20px 0 0!important; }
 .approach-layout .approach-video--room,.approach-layout .approach-video--room video,.approach-layout .approach-video--room .video-overlay { border-radius:0 0 20px 20px!important; }
 .approach-layout .approach-notes { font-size:17px; }
}
@media(max-width:540px) {
 .approach-layout { width:calc(100% - 32px); margin-top:36px; }
 .approach-layout h2 { font-size:32px; margin-bottom:22px; }
 .approach-layout .approach-notes { font-size:11px; }
}
@media(max-width:359px){.approach-layout .approach-notes{font-size:10px}}

/* One black canvas joins the two clips, including their shared central seam. */
.approach-layout__grid { gap:40px; padding:18px; border-radius:24px; background:#080808; overflow:hidden; }
.approach-layout .approach-video,.approach-layout video,.approach-layout .video-overlay { border-radius:0!important; }
.approach-layout__grid { position:relative; }
.approach-layout__grid::after { content:""; position:absolute; top:18px; bottom:18px; left:50%; width:1px; transform:translateX(-50%); background:rgba(255,255,255,.22); z-index:3; pointer-events:none; }
@media(max-width:1023px) and (orientation:portrait), (max-width:850px) {
 .approach-layout__grid { gap:0; padding:0; border-radius:20px; }
 .approach-layout__grid::after { display:none; }
 .approach-layout .approach-video,.approach-layout video,.approach-layout .video-overlay { border-radius:0!important; }
}

/* Optical centring is applied only to the horizontal layout. */
@media(min-width:1024px), (min-width:851px) and (orientation:landscape) {
 .approach-layout .approach-video--laptop { background:#000; }
 .approach-layout .approach-video--laptop video { transform:translateX(-4%); }
}

/* Round the room picture only when the clips sit side by side. */
.approach-layout .approach-video--room { background:#080808; }
@media(min-width:1024px), (min-width:851px) and (orientation:landscape) {
 .approach-layout .approach-video--room video { clip-path:inset(17.4% 0 0 0 round 18px); }
}

.approach-layout .approach-video{position:relative;overflow:hidden}
.approach-layout .video-overlay{position:absolute;inset:0;pointer-events:none}

@media(min-width:1024px), (min-width:851px) and (orientation:landscape) {
 .approach-layout .approach-video--laptop .approach-notes { transform:translateX(-2%); }
}

.approach-play{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:56px;height:56px;padding:12px;border:1px solid #fffdf866;border-radius:50%;background:#2e2c2a;color:#fffdf8;cursor:pointer}
.approach-play[hidden]{display:none!important}.approach-play svg{width:26px;height:26px}.approach-play:focus-visible{outline:2px solid #fffdf8;outline-offset:4px}