/* Keiser NZ showroom TV
   A fixed 1920x1080 stage, scaled to the screen.
   Grid: 96 px side margins (5%), content from y 200 to y 1008, sources on y 1016.
   Type: Anton for the hero line only, Archivo for everything else, Instrument Serif italic as a rare accent.
   Written for Chromium 76 and later: no inset, no flex gap, no clamp/min/max,
   no aspect-ratio, no :is/:where/:has, no individual transform properties. */

@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; src: url('../fonts/anton.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; src: url('../fonts/instrument-serif-italic.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 300 700; src: url('../fonts/archivo-variable.woff2') format('woff2'); font-display: block; }

:root {
  --raven: #0C0B0B;
  --panel: #151212;
  --bone: #F2EFED;
  --bone-2: rgba(242, 239, 237, 0.78);
  --muted: #948D8B;
  --line: #262121;
  --red: #D10A2C;
  --studio: #EDEAE7;
  --display: 'Anton', 'Arial Narrow', sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Fixed and clipped, so the 1920 px stage can never widen a phone's layout viewport: on a phone the page
   is just the 16:9 stage, scaled and centred on black, like a preview of the TV. */
body { position: fixed; left: 0; top: 0; right: 0; bottom: 0; }
body { color: var(--bone); font-family: var(--sans); -webkit-font-smoothing: antialiased; cursor: none; }
/* The serif accent never changes the line box, so every line in a block keeps the same rhythm. */
em { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 0; }
img { display: block; }
.w { white-space: nowrap; }

/* ——— stage ——— */
#stage {
  position: absolute; left: 0; top: 0;
  width: 1920px; height: 1080px;
  overflow: hidden;
  background: var(--raven);
  transform-origin: 0 0;
}
.fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#air { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 1; opacity: 0; }
#videoLayer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5; visibility: hidden; opacity: 0; background: #000; overflow: hidden; }
#videoLayer img, #videoLayer video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
#videoLayer video { opacity: 0; }
#scenes { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; }
.scene { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; visibility: hidden; opacity: 0; overflow: hidden; }
.scene.is-on { visibility: visible; }

/* ——— persistent chrome: a small logo and the time ——— */
#chrome { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none; }
#chrome .logo { position: absolute; left: 96px; top: 66px; width: 150px; height: auto; }
#chrome .time {
  position: absolute; right: 96px; top: 60px; line-height: 36px;
  font-size: 27px; font-weight: 450; color: var(--bone-2); font-variant-numeric: tabular-nums;
}
#chrome .logo, #chrome .time { -webkit-transition: opacity 0.8s ease, color 0.8s ease; transition: opacity 0.8s ease, color 0.8s ease; }
#stage.is-bare #chrome .logo, #stage.is-bare #chrome .time { opacity: 0; }
#stage.is-light #chrome .time { color: #4A4341; }
.pending-tag {
  position: absolute; right: 96px; bottom: 56px; display: none;
  font-size: 20px; font-weight: 500; line-height: 24px; color: var(--muted);
}
.pending-tag::before { content: ''; display: inline-block; width: 8px; height: 8px; margin: 0 12px 2px 0; border-radius: 50%; background: var(--red); }
#stage.is-pending .pending-tag { display: block; }

/* ——— shared type ———
   A mask clips one line while it rises into place. Its padding is the bleed (enough for Anton's
   descenders and the serif's ascenders, descenders and italic overhang); the matching negative
   margin keeps the layout exactly where it would be without the mask. */
.mask { display: block; overflow: hidden; padding: 0.22em 0.2em 0.28em; margin: -0.22em -0.2em -0.28em; }
.mask > span { display: block; white-space: nowrap; }
.display { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: 0.96; letter-spacing: 0.004em; color: var(--bone); }
.display em { font-size: 1.1em; letter-spacing: -0.005em; }
.support { font-size: 36px; line-height: 1.34; font-weight: 400; color: var(--bone-2); }
.support em { font-size: 1.12em; color: var(--bone); }
.source { position: absolute; left: 96px; bottom: 44px; max-width: 1400px; font-size: 20px; line-height: 28px; color: var(--muted); }

/* ——— ident (the website's home hero) ——— */
.s-ident { background: #000; }
.s-ident .particles { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; opacity: 0; }
.s-ident .particles b { position: absolute; bottom: -8px; }
.s-ident .particles i { display: block; border-radius: 50%; background: rgba(242, 239, 237, 0.55); opacity: 0; }
.s-ident .particles i.r { background: rgba(209, 10, 44, 0.85); }
@-webkit-keyframes rise1 { 0% { -webkit-transform: translate3d(0, 0, 0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { -webkit-transform: translate3d(-60px, -1180px, 0); opacity: 0; } }
@keyframes rise1 { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translate3d(-60px, -1180px, 0); opacity: 0; } }
@-webkit-keyframes rise2 { 0% { -webkit-transform: translate3d(0, 0, 0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { -webkit-transform: translate3d(-20px, -1180px, 0); opacity: 0; } }
@keyframes rise2 { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translate3d(-20px, -1180px, 0); opacity: 0; } }
@-webkit-keyframes rise3 { 0% { -webkit-transform: translate3d(0, 0, 0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { -webkit-transform: translate3d(25px, -1180px, 0); opacity: 0; } }
@keyframes rise3 { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translate3d(25px, -1180px, 0); opacity: 0; } }
@-webkit-keyframes rise4 { 0% { -webkit-transform: translate3d(0, 0, 0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { -webkit-transform: translate3d(65px, -1180px, 0); opacity: 0; } }
@keyframes rise4 { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translate3d(65px, -1180px, 0); opacity: 0; } }
.s-ident .cluster { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.s-ident .lockup-big { position: absolute; left: 510px; top: 262px; width: 900px; }
.s-ident .markwrap { position: relative; width: 900px; height: 146px; }
.s-ident .bloom {
  position: absolute; left: 50%; top: 50%; width: 1400px; height: 1400px; margin: -700px 0 0 -700px;
  border-radius: 50%; background: radial-gradient(circle, rgba(209, 10, 44, 0.22), rgba(209, 10, 44, 0) 64%);
}
.s-ident .ring {
  position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px;
  border: 1.5px solid rgba(209, 10, 44, 0.7); border-radius: 50%;
}
.s-ident .mark { position: relative; z-index: 1; width: 900px; height: auto; }
.s-ident .msweep {
  position: absolute; z-index: 2; left: 0; top: -20px; bottom: -20px; width: 0;
  border-right: 3px solid var(--red); box-shadow: 8px 0 30px rgba(209, 10, 44, 0.55);
}
.s-ident .statement {
  margin-top: 44px; text-align: center; white-space: nowrap;
  font-size: 34px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; line-height: 1;
}
.s-ident .statement .wm { display: inline-block; overflow: hidden; vertical-align: top; margin: 0 0.4em; padding: 0.2em 0.1em 0.25em; }
.s-ident .statement .wm span { display: inline-block; }
.s-ident .markets { position: absolute; left: 160px; top: 650px; width: 1600px; height: 204px; }
.s-ident .markets .ln { position: absolute; left: 0; width: 100%; height: 1px; background: rgba(242, 239, 237, 0.12); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; }
.s-ident .markets .ln.t { top: 0; }
.s-ident .markets .ln.b { bottom: 0; }
.s-ident .mk { position: absolute; top: 0; height: 204px; text-align: center; color: rgba(242, 239, 237, 0.62); }
.s-ident .mk::before { content: ''; position: absolute; left: 0; top: 49px; width: 1px; height: 81px; background: rgba(242, 239, 237, 0.12); }
.s-ident .mk:first-of-type::before { display: none; }
.s-ident .mk svg { display: block; width: 42px; height: 42px; margin: 30px auto 18px; color: var(--red); }
.s-ident .mk b { display: block; font-size: 21px; font-weight: 450; line-height: 1.34; }
/* underline sits on the row's bottom rule */
.s-ident .mk .u { position: absolute; left: 40px; right: 40px; bottom: -1px; height: 3px; background: var(--red); -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; }
.s-ident .mk.on { color: #fff; }
.s-ident .markets .ln.all { bottom: -1px; height: 3px; background: var(--red); opacity: 0; -webkit-transform: scaleX(0); transform: scaleX(0); }
.s-ident .zoomic { position: absolute; left: 0; top: 0; width: 1008px; height: 1008px; color: var(--red); opacity: 0; pointer-events: none; }
.s-ident .zoomic svg { display: block; width: 1008px; height: 1008px; stroke-width: 1.3; }

/* ——— words: big type on black ——— */
.s-words .wrap { position: absolute; left: 96px; top: 200px; width: 1728px; height: 720px; display: -webkit-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; -webkit-box-pack: center; justify-content: center; }
.s-words .display { font-size: 180px; }
/* The operators are punctuation, not words: light sans, half size, on the capital's centre line. */
.s-words .display .op { font-family: var(--sans); font-weight: 300; font-size: 0.5em; vertical-align: 0.5em; margin-right: 0.08em; color: var(--muted); }
.s-words .support { margin-top: 60px; width: 1100px; }

/* ——— photo: full bleed, slow push, one line ——— */
.s-photo .pic { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }
.s-photo .pic img { width: 100%; height: 100%; object-fit: cover; }
.s-photo .shade {
  background:
    linear-gradient(0deg, rgba(12, 11, 11, 0.92) 0%, rgba(12, 11, 11, 0.6) 26%, rgba(12, 11, 11, 0) 58%),
    linear-gradient(90deg, rgba(12, 11, 11, 0.62) 0%, rgba(12, 11, 11, 0.25) 40%, rgba(12, 11, 11, 0) 62%),
    linear-gradient(180deg, rgba(12, 11, 11, 0.55) 0%, rgba(12, 11, 11, 0) 16%);
}
.s-photo.right .shade {
  background:
    linear-gradient(0deg, rgba(12, 11, 11, 0.92) 0%, rgba(12, 11, 11, 0.6) 26%, rgba(12, 11, 11, 0) 58%),
    linear-gradient(270deg, rgba(12, 11, 11, 0.62) 0%, rgba(12, 11, 11, 0.25) 40%, rgba(12, 11, 11, 0) 62%),
    linear-gradient(180deg, rgba(12, 11, 11, 0.55) 0%, rgba(12, 11, 11, 0) 16%);
}
.s-photo .copy, .s-video .copy { position: absolute; left: 96px; bottom: 96px; width: 1100px; }
.s-video .copy { width: 1400px; }
.s-photo.right .copy { left: auto; right: 96px; text-align: right; }
.s-photo .display, .s-video .display { font-size: 150px; }
.s-photo .support { margin-top: 40px; max-width: 900px; }
.s-photo.right .support { margin-left: auto; }

/* ——— video with a caption ——— */
.s-video .shade {
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.42) 26%, rgba(0, 0, 0, 0) 50%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 16%);
}
.s-video.clean .shade { background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 16%); }
.s-video.clean .copy { display: none; }
.s-video.bare .shade { display: none; }

/* ——— render: a clip, the Keiser logo and one line, in the clip's empty space ——— */
#videoLayer.framed { background: #0C0B0B; }
#videoLayer.feather-top img, #videoLayer.feather-top video {
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 7%), linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 4%, #000 96%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
#videoLayer.feather-right img, #videoLayer.feather-right video { -webkit-mask-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #000 16%); }
#videoLayer.feather-edges img, #videoLayer.feather-edges video { -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 52%, rgba(0, 0, 0, 0) 71%); }
.s-render .blk { position: absolute; }
.s-render .logo { display: block; width: 230px; height: auto; }
.s-render .display { font-size: 124px; margin-top: 64px; }
.s-render .note { margin-top: 36px; font-size: 30px; line-height: 1.4; color: var(--muted); max-width: 600px; }
.s-render.sp-left .blk, .s-render.sp-right .blk { top: 0; height: 1080px; width: 760px; display: -webkit-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; -webkit-box-pack: center; justify-content: center; }
.s-render.sp-left .blk { left: 96px; }
.s-render.sp-right .blk { right: 96px; -webkit-box-align: end; align-items: flex-end; text-align: right; }
.s-render.sp-bottom .blk { left: 96px; right: 96px; bottom: 84px; display: -webkit-box; display: flex; -webkit-box-align: end; align-items: flex-end; -webkit-box-pack: justify; justify-content: space-between; }
.s-render.sp-bottom .lg { margin-bottom: 0; }
.s-render.sp-bottom .logo { width: 200px; margin-bottom: 16px; }
.s-render.sp-bottom .display { margin-top: 0; font-size: 92px; text-align: right; }
.s-render.sp-bottom .note { display: none; }
.s-render .tags { display: none; }
.s-render .tags span { position: absolute; top: 64px; font-size: 26px; font-weight: 450; line-height: 36px; color: var(--muted); }
.s-render.has-tags .tags { display: block; }

/* ——— stat: the number is the hero ——— */
.s-stat .copy { position: absolute; left: 96px; top: 0; width: 820px; height: 1080px; display: -webkit-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; -webkit-box-pack: center; justify-content: center; }
.s-stat .num { font-family: var(--display); font-size: 340px; line-height: 1; color: var(--red); white-space: nowrap; letter-spacing: -0.004em; }
.s-stat .num > .mask > span { white-space: nowrap; }
.s-stat .label { margin-top: 44px; font-size: 48px; line-height: 1.24; font-weight: 450; color: var(--bone); max-width: 760px; }
.s-stat .pic { position: absolute; left: 920px; top: 0; width: 1000px; height: 1080px; overflow: hidden; }
.s-stat .pic img { width: 100%; height: 100%; object-fit: cover; }
.s-stat .pic::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #0C0B0B 0%, rgba(12, 11, 11, 0.55) 16%, rgba(12, 11, 11, 0) 42%), linear-gradient(180deg, rgba(12, 11, 11, 0.5) 0%, rgba(12, 11, 11, 0) 16%); }
.s-stat.solo .copy { width: 1728px; }
.s-stat.solo .label { max-width: 1100px; }

/* ——— chart: drawn to scale, few labels ——— */
.s-chart .copy { position: absolute; left: 96px; top: 0; width: 720px; height: 1080px; display: -webkit-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; -webkit-box-pack: center; justify-content: center; }
.s-chart .display { font-size: 112px; }
.s-chart .support { margin-top: 44px; font-size: 34px; max-width: 640px; }
.s-chart .plot { position: absolute; left: 904px; top: 220px; width: 920px; height: 680px; }
.s-chart svg { overflow: visible; display: block; }
.s-chart svg text { font-family: var(--sans); fill: var(--muted); font-size: 28px; font-weight: 450; }
.s-chart svg .v { font-family: var(--display); font-size: 72px; fill: var(--bone); font-weight: 400; }
.s-chart svg .v.red { fill: var(--red); }
.s-chart svg .k { fill: var(--bone); }
.s-chart svg .k.red { fill: var(--bone); }
.s-chart svg .axis { stroke: rgba(242, 239, 237, 0.22); stroke-width: 2; fill: none; }
.s-chart svg .grid { stroke: rgba(242, 239, 237, 0.08); stroke-width: 2; fill: none; }
.s-chart svg .ln { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.s-chart svg .ln.grey { stroke: #6E6664; stroke-width: 5; }
.s-chart svg .ln.red { stroke: var(--red); stroke-width: 7; }
.s-chart svg .bar.grey { fill: #3A3232; }
.s-chart svg .bar.red { fill: var(--red); }
.s-chart svg .dot.grey { fill: #6E6664; }
.s-chart svg .dot.red { fill: var(--red); }
.s-chart svg .tick { stroke: var(--red); stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.s-chart svg .sn { font-family: var(--sans); font-size: 28px; fill: var(--muted); }
.s-chart .five { position: absolute; left: 0; top: 30px; width: 920px; }
.s-chart .five .row { position: relative; height: 112px; font-size: 48px; line-height: 64px; font-weight: 450; color: var(--bone); }
.s-chart .five .tk { display: inline-block; width: 40px; height: 40px; margin: 0 32px 0 0; vertical-align: -5px; fill: none; stroke: var(--red); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.s-chart .five.cmp .row { width: 920px; }
.s-chart .five .hd { position: absolute; right: 0; top: -64px; width: 300px; font-size: 26px; line-height: 32px; color: var(--muted); }
.s-chart .five .hd span { display: inline-block; width: 150px; text-align: center; }
.s-chart .five .c2 { position: absolute; right: 0; top: 12px; width: 150px; height: 40px; text-align: center; }
.s-chart .five .c2 .tk { margin: 0; stroke: var(--muted); }
.s-chart .five .c2 b { display: inline-block; width: 28px; height: 3px; margin-top: 18px; background: #4A4341; }
.s-chart .five.cmp .row .mask > span { width: 600px; }

/* ——— trivia ——— */
.s-trivia .q { position: absolute; left: 96px; top: 196px; width: 1480px; font-size: 72px; line-height: 1.14; font-weight: 560; letter-spacing: -0.005em; color: var(--bone); }
.s-trivia .timer { position: absolute; right: 96px; top: 210px; width: 64px; height: 64px; }
.s-trivia .timer svg { width: 64px; height: 64px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }
.s-trivia .timer circle { fill: none; stroke-width: 3; }
.s-trivia .timer .bg { stroke: rgba(242, 239, 237, 0.14); }
.s-trivia .timer .fg { stroke: var(--bone); stroke-linecap: round; }
.s-trivia .timer b { position: absolute; left: 0; top: 0; width: 64px; line-height: 64px; text-align: center; font-size: 24px; font-weight: 500; color: var(--bone-2); font-variant-numeric: tabular-nums; }
.s-trivia .opts { position: absolute; left: 96px; top: 548px; width: 1728px; }
.s-trivia .opt { position: absolute; width: 820px; height: 68px; }
.s-trivia .opt .c { position: absolute; left: 0; top: 15px; width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(242, 239, 237, 0.34); }
.s-trivia .opt .c i { position: absolute; left: -2px; top: -2px; width: 38px; height: 38px; border-radius: 50%; background: var(--red); opacity: 0; }
.s-trivia .opt .c svg { position: absolute; left: 8px; top: 8px; width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.s-trivia .opt .t { position: absolute; left: 70px; top: 0; right: 0; font-size: 48px; line-height: 68px; font-weight: 450; color: var(--bone); }
.s-trivia .fact { position: absolute; left: 96px; top: 860px; width: 1480px; font-size: 46px; line-height: 1.3; font-weight: 450; color: var(--bone); }
.s-trivia .fact em { font-size: 1.12em; }

/* ——— myth / fact ——— */
.s-myth .wrap { position: absolute; left: 96px; top: 0; width: 1560px; height: 1080px; display: -webkit-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; -webkit-box-pack: center; justify-content: center; }
.s-myth .myth { position: relative; font-family: var(--serif); font-style: italic; font-size: 76px; line-height: 1.12; color: rgba(242, 239, 237, 0.62); }
.s-myth .myth .mask > span { position: relative; display: inline-block; vertical-align: top; }
.s-myth .strike { position: absolute; left: -6px; right: -6px; top: 54%; height: 5px; background: var(--red); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transform: scaleX(0); transform: scaleX(0); }
.s-myth .fact { margin-top: 72px; font-size: 100px; }

/* ——— quote / statement ——— */
.s-quote .wrap { position: absolute; left: 96px; top: 150px; width: 1728px; height: 800px; display: -webkit-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; -webkit-box-pack: center; justify-content: center; }
.s-quote .display { font-size: 168px; }
.s-quote .by { margin-top: 56px; font-size: 32px; line-height: 1.3; color: var(--muted); }

/* ——— timeline (origin story) ——— */
.s-timeline .head { position: absolute; left: 96px; top: 200px; width: 1728px; }
.s-timeline .display { font-size: 136px; }
.s-timeline .node { position: absolute; top: 640px; }
.s-timeline .node .yr { font-size: 96px; }
.s-timeline .node .tx { margin-top: 26px; font-size: 32px; line-height: 1.36; color: var(--bone-2); }

/* ——— product on a light studio backdrop ——— */
.s-product { background: radial-gradient(ellipse at 70% 62%, #F6F4F2 0%, #ECE8E5 46%, #DAD4D0 100%); }
.s-product .floor { position: absolute; left: 900px; top: 900px; width: 920px; height: 70px; border-radius: 50%; background: radial-gradient(ellipse, rgba(12, 11, 11, 0.24), rgba(12, 11, 11, 0) 68%); }
.s-product .machine { position: absolute; left: 900px; top: 150px; width: 920px; height: 790px; }
.s-product .machine img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.s-product .copy { position: absolute; left: 96px; top: 0; width: 760px; height: 1080px; display: -webkit-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; -webkit-box-pack: center; justify-content: center; }
.s-product .display { font-size: 150px; color: var(--raven); }
.s-product.accent .display em { color: var(--red); }
.s-product .support { margin-top: 40px; color: #3B3534; max-width: 680px; }
.s-product .specs { margin-top: 64px; overflow: hidden; }
.s-product .spec { float: left; width: 300px; margin-right: 40px; }
.s-product .spec .sv { font-size: 72px; line-height: 1; color: var(--raven); }
.s-product .spec .sl { margin-top: 16px; font-size: 26px; line-height: 1.3; color: #5E5654; }

/* ——— closing card ——— */
.s-close .wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.s-close .lk { position: absolute; left: 0; right: 0; top: 440px; text-align: center; }
.s-close .lk .mask { display: inline-block; }
.s-close .lk img { width: 440px; }
.s-close .nz { margin-top: 36px; font-size: 32px; line-height: 1.3; font-weight: 450; color: var(--muted); }
.s-close .nz .mask { display: inline-block; }
.s-close .wp { position: absolute; left: 50%; bottom: 72px; width: 120px; margin-left: -60px; opacity: 0.45; }

/* ——— logo and clock ——— */
.s-clock .wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; }
.s-clock .mk { position: absolute; left: 50%; top: 250px; width: 300px; margin-left: -150px; }
.s-clock .time { position: absolute; left: 0; right: 0; top: 360px; font-family: var(--display); font-size: 300px; line-height: 1; color: var(--bone); font-variant-numeric: tabular-nums; }
.s-clock .time small { font-family: var(--sans); font-size: 56px; font-weight: 450; margin-left: 28px; color: var(--muted); }
.s-clock .date { position: absolute; left: 0; right: 0; top: 720px; font-size: 40px; font-weight: 450; color: var(--muted); }
.s-clock .wp { position: absolute; left: 50%; bottom: 72px; width: 120px; margin-left: -60px; opacity: 0.45; }

/* failsafe (no JS animation library) */
.failsafe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 90; background: var(--raven); display: none; text-align: center; }
.failsafe img { position: absolute; left: 50%; top: 300px; width: 440px; margin-left: -220px; }
.failsafe p { position: absolute; left: 0; right: 0; top: 440px; font-family: var(--display); font-size: 260px; line-height: 1; color: var(--bone); }