/* John Morley Video: a portrait film card beside the copy and its stages, on slate */
.jm.vid { --vid-w: 420px; padding: clamp(72px, 8vw, 120px) 0; background: var(--slate); color: #fff; overflow: hidden; }
.jm .vid__in { display: grid; grid-template-columns: var(--vid-w) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); align-items: center; }

/* the film card */
.jm .vid__frame { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 10px; background: #0E1214; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08); }
.jm .vid__frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0E1214; }
.jm .vid__play { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: #fff; cursor: pointer; }
.jm .vid__play:hover, .jm .vid__play:focus { background: none; }
.jm .vid__play i { display: grid; place-items: center; width: 92px; height: 92px; margin-top: -18%; border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 0 rgba(242, 107, 29, .55); transition: transform .3s var(--ease), background-color .2s; animation: jm-vid-pulse 2.4s var(--ease) infinite; }
.jm .vid__play i svg { width: 38px; height: 38px; margin-left: 5px; fill: #fff; }
.jm .vid__play:hover i, .jm .vid__play:focus-visible i { transform: scale(1.08); background: var(--clay-d); }
.jm .vid__play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.jm .vid__dur { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(14, 18, 20, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 700 14px/1 var(--body); font-variant-numeric: tabular-nums; }
.jm .vid__dur svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
@keyframes jm-vid-pulse { 0% { box-shadow: 0 0 0 0 rgba(242, 107, 29, .55); } 70%, 100% { box-shadow: 0 0 0 26px rgba(242, 107, 29, 0); } }
/* playing: the overlay goes, the native controls take over, a thin progress line under the card */
.jm.vid.is-playing .vid__play, .jm.vid.is-started .vid__play { display: none; }
.jm .vid__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .15); opacity: 0; transition: opacity .3s; pointer-events: none; }
.jm .vid__bar span { display: block; width: 100%; height: 100%; background: var(--clay); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.jm.vid.is-started .vid__bar { opacity: 1; }

/* copy */
.jm .vid__copy { max-width: 600px; }
.jm .vid__h { color: #fff; }
.jm .vid__lead { margin-top: 22px; color: rgba(255, 255, 255, .78); }
.jm .vid__sl { margin: 36px 0 12px; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lead-l); }

/* stages: each jumps the film; the one playing fills as it runs */
.jm .vid__stages { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .16); }
.jm .vid__stages li { margin: 0; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.jm .vid__stage { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 52px; margin: 0; padding: 12px 0; border: 0; border-radius: 0; background: none; color: rgba(255, 255, 255, .82); font: 600 17px/1.3 var(--body); text-align: left; text-transform: none; letter-spacing: 0; cursor: pointer; transition: color .2s; }
.jm .vid__stage:hover, .jm .vid__stage:focus { background: none; color: #fff; }
.jm .vid__stage time { font: 800 20px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--lead-l); transition: color .2s; }
.jm .vid__stage b { width: 10px; height: 10px; border: 2px solid rgba(255, 255, 255, .4); border-radius: 50%; transition: background-color .2s, border-color .2s; }
.jm .vid__stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--clay); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.jm .vid__stage:hover time, .jm .vid__stage.is-on time { color: #FFB27A; }
.jm .vid__stage.is-on { color: #fff; }
.jm .vid__stage.is-on b { border-color: var(--clay); background: var(--clay); }
.jm .vid__stage:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.jm .vid__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 36px; }
.jm .vid__tel { font-weight: 700; color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .4); }
.jm .vid__tel:hover { color: #FFB27A; }

@media (prefers-reduced-motion: reduce) {
	.jm .vid__play i { animation: none; }
}
@media (max-width: 1024px) {
	.jm.vid { --vid-w: 340px; }
	.jm .vid__in { gap: 40px; }
}
@media (max-width: 760px) {
	/* phones: heading and text, then the film, then its stages */
	.jm .vid__in { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
	.jm .vid__copy { display: contents; }
	.jm .vid__copy > * { order: 1; }
	.jm .vid__frame { order: 2; width: min(100%, 400px); margin: 32px auto 0; }
	.jm .vid__copy > .vid__sl, .jm .vid__copy > .vid__stages, .jm .vid__copy > .vid__cta { order: 3; }
	.jm .vid__sl { margin-top: 32px; }
	.jm .vid__play i { width: 76px; height: 76px; }
	.jm .vid__play i svg { width: 32px; height: 32px; }
}