/* home.css: the home page's own placing and sizing. Components and tokens come from design\ (components.css, system.css). */

/* ---------- 1. the hero ---------- */
.hero { position: relative; overflow: hidden; background: radial-gradient(90% 70% at 0% 0%, #1b1511 0%, var(--c-night) 60%); }
.hero__in { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero__copy { display: grid; gap: 18px; align-content: center; padding: 28px var(--gutter) 36px; }
.hero__title { font-size: var(--fs-display); line-height: 0.98; letter-spacing: -0.028em; max-width: 12.5em; text-wrap: balance; }
.hero__line { font-size: var(--fs-lede); line-height: 1.45; color: var(--c-on-night-soft); max-width: 33rem; }
.hero .book { margin-top: 4px; }
.hero__note { margin-top: -4px; font-size: var(--fs-small); color: var(--c-on-night-soft); }
.hero__proof { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; }
.hero__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--c-night-3); }
.hero__slides { position: absolute; inset: 0; }
@media (min-width: 1100px) {
  .hero__in { grid-template-columns: max(var(--gutter), calc((100% - var(--max-w)) / 2)) minmax(0, 600px) minmax(0, 1fr); min-height: calc(100svh - var(--header-h)); }
  .hero__copy { grid-column: 2; gap: 16px; padding: clamp(16px, 3vh, 48px) 44px clamp(16px, 3vh, 48px) 0; }
  .hero__title { font-size: min(var(--fs-display), 7.9vh); }
  .hero__line { font-size: 1.15rem; max-width: 34rem; }
  .hero__media { grid-column: 3; aspect-ratio: auto; min-height: 620px; clip-path: polygon(72px 0, 100% 0, 100% 100%, 0 100%); }
}

/* the kit's header that changes its picture (kit.md: keep as it is) */
[data-kit-scene="rotate"] [data-kit-slide] { position: absolute; inset: 0; margin: 0; visibility: hidden; overflow: hidden; }
[data-kit-scene="rotate"] [data-kit-slide][data-kit-on] { visibility: visible; z-index: 2; opacity: var(--kit-move, 1); transform: translateX(calc((1 - var(--kit-move, 1)) * 4%)); }
[data-kit-scene="rotate"]:not(:has([data-kit-slide][data-prev])) [data-kit-slide][data-kit-on] { transform: none; opacity: 1; }
[data-kit-scene="rotate"] [data-kit-slide][data-prev] { visibility: visible; z-index: 1; }
[data-kit-scene="rotate"] [data-kit-slide] video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-kit-scene="rotate"]:not(:has([data-kit-slide][data-kit-on])) [data-kit-slide]:not([data-kit-slide] ~ [data-kit-slide]) { visibility: visible; }
[data-kit-scene="rotate"] [data-kit-slide] video { inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); }

/* our grade and crop over each clip: a night wash at the foot (where the cards sit) and on the slanted edge */
.hero__slide video, .hero__slide .kit-first { object-position: var(--pos, 50% 50%); filter: saturate(1.04) contrast(1.04) brightness(0.92); }
.hero__slide--1 { --pos: 50% 50%; }
.hero__slide--2 { --pos: 50% 50%; }
.hero__slide--3 { --pos: 40% 50%; }
.hero__slide::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(13, 13, 15, 0) 42%, rgba(13, 13, 15, 0.62) 100%), linear-gradient(90deg, rgba(13, 13, 15, 0.45) 0%, rgba(13, 13, 15, 0) 22%); }

/* the glass card of each slide: it rises with the picture (--kit-in), then turns booked */
.hcard { position: absolute; z-index: 3; left: var(--cx, 24px); bottom: var(--cy, 128px); display: flex; align-items: center; gap: 12px; width: 276px; padding: 12px 16px 12px 12px; opacity: var(--kit-in, 0); transform: translateY(calc((1 - var(--kit-in, 0)) * 18px)); }
.hero__slide--2 .hcard { --cx: 108px; }
.hero__slide--3 .hcard { --cx: 196px; }
.hcard__mark { position: relative; flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--c-paper); }
.hcard__ring { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--c-brand); box-shadow: 0 0 0 0 rgba(241, 128, 46, 0.55); }
.hcard__x { position: absolute; inset: 0; width: 38px; height: 38px; border-radius: 10px; opacity: 0; transform: scale(0.4); }
.hcard__x.x--tick::after { left: 14px; top: 8px; width: 8px; height: 15px; border-width: 0 3px 3px 0; }
.hcard__text { position: relative; flex: 1; min-width: 0; height: 40px; overflow: hidden; }
.hcard__a, .hcard__b { position: absolute; inset: 0; display: grid; align-content: center; gap: 2px; }
.hcard__b { opacity: 0; transform: translateY(100%); }
.hcard b { font: 700 var(--scene-fs-l)/1.15 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcard small { font: 500 var(--scene-fs-s)/1.2 var(--font-ui); color: var(--c-ink-soft); white-space: nowrap; }
.hero__slide:is([data-kit-on], [data-prev]) .hcard__ring { animation: hc-ring 1.2s var(--ease-out) 1s 2 both; }
.hero__slide:is([data-kit-on], [data-prev]) .hcard__a { animation: hc-out 0.45s var(--ease-in-out) 2.6s both; }
.hero__slide:is([data-kit-on], [data-prev]) .hcard__b { animation: hc-in 0.55s var(--ease-spring) 2.68s both; }
.hero__slide:is([data-kit-on], [data-prev]) .hcard__x { animation: hc-pop 0.5s var(--ease-spring) 2.7s both; }
.hero__slide:is([data-kit-on], [data-prev]) .hcard { animation: hc-glow 1.1s var(--ease-out) 2.6s both; }
@keyframes hc-ring { 0% { box-shadow: 0 0 0 0 rgba(241, 128, 46, 0.55); } 100% { box-shadow: 0 0 0 14px rgba(241, 128, 46, 0); } }
@keyframes hc-out { to { opacity: 0; transform: translateY(-100%); } }
@keyframes hc-in { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
@keyframes hc-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
@keyframes hc-glow { 0% { box-shadow: var(--shadow-night); } 30% { box-shadow: var(--shadow-night), 0 0 0 2px var(--c-accent), 0 0 34px rgba(241, 128, 46, 0.55); } 100% { box-shadow: var(--shadow-night); } }

/* the week strip, the tickets that fly into it, and its count */
.hweek, .hticket { display: none; }
@media (min-width: 1100px) {
  .hweek { position: absolute; z-index: 4; left: 24px; bottom: 24px; display: grid; grid-template-columns: 84px 1fr 84px; align-items: center; gap: 0; width: 456px; height: 78px; box-sizing: border-box; padding: 0 14px; border-radius: var(--radius-l); }
  .hweek__title { font: 700 var(--scene-fs)/1.2 var(--font-ui); color: #fff; }
  .hweek__days { display: grid; grid-template-columns: repeat(6, 44px); margin: 0; padding: 0; list-style: none; }
  .hweek__days li { display: grid; justify-items: center; gap: 5px; }
  .hweek__days span { font: 600 var(--scene-fs-s)/1 var(--font-ui); color: var(--c-on-night-soft); margin-bottom: 1px; }
  .hweek__slot { width: 28px; height: 12px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.22); }
  .hweek__slot.b { background: rgba(247, 161, 34, 0.42); box-shadow: none; }
  .hweek__count { display: grid; justify-items: end; gap: 3px; margin: 0; text-align: right; }
  .hweek__roll { display: grid; height: 1.1em; overflow: hidden; font: 800 1.75rem/1.1 var(--font-display); font-stretch: 108%; color: #fff; }
  .hweek__roll b { display: block; height: 1.1em; transform: translateY(var(--roll, 0)); }
  .hweek__count small { font: 600 var(--scene-fs-s)/1.15 var(--font-ui); color: var(--c-on-night-soft); }
  .hticket { position: absolute; z-index: 5; display: block; width: 28px; height: 12px; border-radius: 4px; background: var(--grad-x); box-shadow: 0 0 14px rgba(247, 161, 34, 0.75); bottom: 59px; opacity: 0; pointer-events: none; }
  .hticket--1 { left: 134px; --fx: 120px; --fy: -86px; }
  .hticket--2 { left: 266px; --fx: 70px; --fy: -86px; }
  .hticket--3 { left: 354px; --fx: 62px; --fy: -86px; }
  .hero:has(.hero__slide--1[data-kit-on]) .hticket--1,
  .hero:has(.hero__slide--2[data-kit-on]) .hticket--2,
  .hero:has(.hero__slide--3[data-kit-on]) .hticket--3 { animation: hc-fly 0.6s var(--ease-in-out) 3s both; }
  .hero:has(.hero__slide--2[data-kit-on]) .hticket--1,
  .hero:has(.hero__slide--3[data-kit-on]) :is(.hticket--1, .hticket--2) { opacity: 1; }
  .hero:has(.hero__slide--1[data-kit-on]) .hweek__roll b { animation: hc-roll1 0.5s var(--ease-spring) 3.4s both; }
  .hero:has(.hero__slide--2[data-kit-on]) .hweek__roll b { animation: hc-roll2 0.5s var(--ease-spring) 3.4s both; }
  .hero:has(.hero__slide--3[data-kit-on]) .hweek__roll b { animation: hc-roll3 0.5s var(--ease-spring) 3.4s both; }
  .hero:not(:has([data-kit-slide][data-kit-on])) .hticket--1 { opacity: 1; }
  .hero:not(:has([data-kit-slide][data-kit-on])) .hweek__roll b { --roll: -1.1em; }
  /* the week starts again with slide 1: the strip and its tickets fade out at the end of slide 3 and come back fresh,
     so the reset never shows under slide 3's card */
  .hero:has(.hero__slide--3[data-kit-on]) :is(.hweek, .hticket--1, .hticket--2) { animation: hw-out 0.4s var(--ease-in-out) 4.3s forwards; }
  .hero:has(.hero__slide--3[data-kit-on]) .hticket--3 { animation: hc-fly 0.6s var(--ease-in-out) 3s both, hw-out 0.4s var(--ease-in-out) 4.3s forwards; }
  .hero:has(.hero__slide--1[data-kit-on]) .hweek { animation: hw-in 0.5s var(--ease-out) 1.2s both; }
}
@keyframes hc-fly {
  0% { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(0.5); }
  12% { opacity: 1; transform: translate(var(--fx), var(--fy)) scale(1); }
  50% { transform: translate(calc(var(--fx) * 0.45), calc(var(--fy) - 26px)) scale(1.1); }
  100% { opacity: 1; transform: none; }
}
@keyframes hw-out { to { opacity: 0; } }
@keyframes hw-in { from { opacity: 0; } }
@keyframes hc-roll1 { from { transform: translateY(0); } to { transform: translateY(-1.1em); } }
@keyframes hc-roll2 { from { transform: translateY(-1.1em); } to { transform: translateY(-2.2em); } }
@keyframes hc-roll3 { from { transform: translateY(-2.2em); } to { transform: translateY(-3.3em); } }

/* the header's stop icon sits at the top right of the footage */
.hero__media .stop { top: 16px; bottom: auto; right: 16px; }

@media (max-width: 1099px) {
  .hero__media { margin: 0 var(--gutter) 8px; border-radius: var(--radius-xl); max-height: 640px; aspect-ratio: 4 / 5; }
  .hcard, .hero__slide--2 .hcard, .hero__slide--3 .hcard { --cx: 16px; --cy: 16px; width: auto; right: 16px; }
}
@media (min-width: 700px) and (max-width: 1099px) { .hero__media { aspect-ratio: 16 / 10; } }

/* ---------- 2. the proof row ---------- */
.proofband { padding: 26px 0 24px; background: var(--c-paper); color: var(--c-ink); }
.proof__badge { height: 46px; width: auto; }
.proof__bbb { display: block; flex: none; }
.proof__bbb img { height: 44px; width: auto; border-radius: 6px; box-shadow: 0 0 0 1px var(--c-line); }
.proof__badge--round { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.proof__rating > span { display: grid; gap: 4px; }
.proofband .proof { gap: 18px 24px; flex-wrap: nowrap; }
.proofband .proof__press b { font-size: var(--fs-small); }
@media (max-width: 1099px) {
  .proofband .proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .proof__item { flex-direction: column; align-items: flex-start; gap: 8px; }
  .proof__item:nth-child(4) { grid-column: 1 / -1; order: 5; }
  .proof__bbb img { height: 36px; }
  .proof__badge--round { width: 46px; height: 46px; }
}
@media (min-width: 700px) and (max-width: 1099px) { .proofband .proof { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- 3. left on read ---------- */
.ghost { padding-top: clamp(48px, 5vw, 72px); }
.ghost .head { margin-bottom: 28px; }
.ghost .compare { box-shadow: var(--shadow-l); }
@media (min-width: 1000px) { .ghost .compare { aspect-ratio: 2.2 / 1; } }
.compare__side--old video { object-position: 80% 40%; }
.compare__side--new video { object-position: 62% 40%; }
.compare__scene { position: absolute; inset: 0; z-index: 3; }
.compare .stop { top: 60px; bottom: auto; right: 18px; }
.ghost__quotes { display: grid; gap: 22px 40px; margin-top: 30px; }
@media (min-width: 760px) { .ghost__quotes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 759px) { .compare { aspect-ratio: 4 / 5; } .compare__side--old video { object-position: 82% 40%; } .compare__side--new video { object-position: 64% 40%; } }

/* ---------- 4. services ---------- */
#svc-maps .svc__media, #svc-ads .svc__media { --media-h: 470px; }
#svc-calls .svc__media, #svc-social .svc__media { --media-h: 560px; }
#svc-brand .svc__media, #svc-software .svc__media { --media-h: 360px; }
.svc__media > .svc__scene { position: absolute; z-index: 2; }
.svc__media > .svc__scene--found { right: 16px; top: 18px; width: min(360px, calc(100% - 32px)); }
.svc__media > :is(.svc__scene--funnel, .svc__scene--calls, .svc__scene--posts) { inset: 0; height: auto; }
.svc__wash--dark { background: linear-gradient(180deg, rgba(13, 13, 15, 0.5) 0%, rgba(13, 13, 15, 0.3) 50%, rgba(22, 22, 26, 0.95) 100%); }
.svc__wash--right { background: linear-gradient(270deg, rgba(13, 13, 15, 0.55) 0%, rgba(13, 13, 15, 0) 52%), linear-gradient(180deg, rgba(22, 22, 26, 0) 62%, rgba(22, 22, 26, 0.92) 100%); }
.svc__wash--left { background: linear-gradient(90deg, rgba(22, 22, 26, 0.75) 0%, rgba(22, 22, 26, 0) 22%); z-index: 1; }
.svc > .stop, .svc__media .stop { top: 14px; bottom: auto; right: 14px; }
#svc-maps .svc__media .stop, #svc-calls .svc__media .stop { left: 14px; right: auto; }
/* the searcher sits left of the results card: her face at about 195 px of 612, the card from 236 px; on the phone her face is out of the frame */
#svc-maps .svc__fill { object-position: 100% 50%; }
.svc__photo { position: absolute; margin: 0; aspect-ratio: 2560 / 1428; }
.svc__media--laptop .svc__photo { width: 138%; left: -14%; top: 50%; translate: 0 -50%; }
.svc__media--desk .svc__photo { width: 150%; left: -3%; top: 50%; translate: 0 -50%; }
.svc__media--tablet .svc__photo { width: 132%; left: -32%; top: 50%; translate: 0 -54%; }
@media (max-width: 1099px) { .svc__media--tablet .svc__photo { width: 232%; left: -113%; translate: 0 -50%; } }
@media (max-width: 999px) { .svc--wide .svc__media { --media-h: 380px; } }
@media (max-width: 759px) {
  #svc-maps .svc__media { --media-h: 500px; }
  .svc__media > .svc__scene--found { top: auto; bottom: 16px; }
  .svc__media--laptop .svc__photo { width: 175%; left: -26%; }
  .svc__media--desk .svc__photo { width: 190%; left: -10%; }
}

/* ---------- 5. the calculator ---------- */
.calc__set { margin: 0; padding: 0; border: 0; min-width: 0; }
.calc__set legend { padding: 0; margin-bottom: 12px; }
.calc__hint { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.calc__scale { margin: -8px 0 0; font-size: var(--fs-micro); color: var(--c-ink-soft); }
.calc__grid i { opacity: 0; transform: scale(0.6); }
.calc.is-built .calc__grid i { opacity: 1; transform: scale(1); transition-delay: calc(var(--d, 0) * 1ms); }
.calc.is-built .calc__grid i.a { transform: scale(0.86); }
.worth .cta-row { margin-top: 2px; }

/* ---------- 6. the free growth plan ---------- */
.plan__in { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .plan__in { grid-template-columns: minmax(0, 4.3fr) minmax(0, 7.7fr); gap: 56px; } }
.plan__copy { display: grid; gap: 20px; align-content: center; }
.plan__stage { height: clamp(520px, 44vw, 600px); }
/* softened, not smeared; the owner sits left of the deck (his face about 195 px in on a 760 stage), out of frame on a phone */
.plan__stage .stage__media :is(video, img) { filter: blur(1px) saturate(0.9) brightness(0.7); transform: scale(1.03); object-position: 100% 50%; }
.plan__stage .stage__wash { background: radial-gradient(90% 80% at 75% 30%, rgba(247, 161, 34, 0.22), rgba(247, 161, 34, 0) 60%), radial-gradient(80% 70% at 15% 90%, rgba(236, 99, 56, 0.2), rgba(236, 99, 56, 0) 60%); }
.plan__stage .stop { top: 14px; bottom: auto; }
@media (max-width: 759px) { .plan__stage { height: 560px; } }

/* ---------- 7. reviews and Sean ---------- */
.reviews__in { display: grid; gap: 24px; align-items: center; }
@media (min-width: 1000px) { .reviews__in { grid-template-columns: auto minmax(0, 1fr) auto; gap: 40px; } }
.reviews__sean { display: flex; align-items: center; gap: 16px; }
.reviews__photo { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--c-paper), 0 0 0 6px var(--c-brand); }
.reviews__who { display: grid; gap: 2px; }
.reviews__who b { font: 800 1.125rem/1.2 var(--font-display); font-stretch: 105%; }
.reviews__who span { font-size: var(--fs-small); color: var(--c-ink-soft); }
.reviews__head { margin-bottom: 0; }
.reviews__rating { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: var(--radius-l); background: var(--c-card); box-shadow: var(--shadow-m); }
.reviews__rating b { font: 800 2.75rem/1 var(--font-display); font-stretch: 105%; }
.reviews__rating > span { display: grid; gap: 4px; }
.reviews__rating small { font-size: var(--fs-small); color: var(--c-ink-soft); }
/* three real reviews at a time, each group rising in place of the last (8 s each), so no card is ever cut at an edge */
.reviews__rail { position: relative; margin-top: 44px; }
.reviews__track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 18px; width: min(var(--max-w), calc(100% - 2 * var(--gutter))); margin: 0 auto; padding: 8px 0 30px; }
.reviews__track .review { grid-row: 1; visibility: hidden; animation: rv-turn 24s linear infinite; }
.reviews__track .review:nth-child(3n+1) { grid-column: 1; }
.reviews__track .review:nth-child(3n+2) { grid-column: 2; }
.reviews__track .review:nth-child(3n) { grid-column: 3; }
.reviews__track .review:nth-child(n+4):nth-child(-n+6) { animation-delay: -16s; }
.reviews__track .review:nth-child(n+7) { animation-delay: -8s; }
.reviews__track .review[aria-hidden="true"] { display: none; }
.reviews__rail:hover .review, .reviews__rail:focus-within .review, .reviews__rail:has([data-stop][aria-pressed="true"]) .review, .reviews__rail.is-off .review { animation-play-state: paused; }
@keyframes rv-turn {
  0% { opacity: 0; visibility: visible; transform: translateY(12px); }
  2% { opacity: 1; transform: none; }
  31.3% { opacity: 1; transform: none; }
  33.3% { opacity: 0; visibility: visible; transform: translateY(-6px); }
  33.34%, 100% { opacity: 0; visibility: hidden; }
}
.reviews__rail .stop { z-index: 3; right: max(var(--gutter), calc((100% - var(--max-w)) / 2)); bottom: 2px; }
@media (prefers-reduced-motion: reduce) { .reviews__track .review { animation: none; } .reviews__track .review:nth-child(-n+3) { visibility: visible; } }
@media (max-width: 599px) {
  .reviews__photo { width: 96px; height: 96px; }
  /* on the phone the first three stand still, one under another */
  .reviews__track { grid-template-columns: minmax(0, 1fr); }
  .reviews__track .review { grid-row: auto; grid-column: 1; visibility: visible; animation: none; }
  .reviews__track .review:nth-child(n+4), .reviews__rail .stop { display: none; }
}

/* ---------- 8. who we help ---------- */
.who__grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* the home services photo has both faces in its top fifth: its toast sits lower, between the faces and the name */
.who__grid .tile:first-child .tile__toast { top: auto; bottom: 112px; }
.tile--x { grid-column: 1 / -1; min-height: 200px; }
@media (min-width: 700px) { .who__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tile--x { grid-column: span 3; } }
@media (min-width: 1100px) { .who__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tile--x { grid-column: span 2; } }
.tile .tile__toast { opacity: 0; transform: translateY(12px); }
.who__grid.is-in .tile__toast { animation: tile-toast 0.6s var(--ease-spring) calc(0.3s + var(--i, 0) * 0.35s) both; }
@keyframes tile-toast { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.tile__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font: 700 var(--fs-ui)/1 var(--font-ui); }
@media (prefers-reduced-motion: reduce) { .tile .tile__toast { opacity: 1; transform: none; } }

/* ---------- 9. FAQ ---------- */
.faqband__in { display: grid; gap: 28px; }
@media (min-width: 1000px) { .faqband__in { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: start; } .faqband__head { position: sticky; top: calc(var(--header-h) + 28px); } }
.faqband__head .head__line a { color: var(--c-brand-text); font-weight: 700; white-space: nowrap; }

/* ---------- 10. the close ---------- */
.close__media video { object-position: 62% 40%; }
.close .stop { right: 18px; bottom: 18px; }
/* on the phone the footage is a band above the words, so the headline and the box never sit on her face */
@media (max-width: 759px) {
  .close { padding-top: 0; }
  .close__media { position: relative; inset: auto; z-index: 0; height: 300px; margin-bottom: 28px; }
  .close__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 13, 15, 0) 55%, var(--c-night) 100%); }
  .close__media video { object-position: 54% 30%; }
  .close::before { display: none; }
  .close .stop { top: 16px; right: 16px; bottom: auto; }
}