/* PORTED (31 Oct 2026) from sonoxr.media's XR Showcase page: only the rules the ported sections use, scoped to .sxr-port: the home hero (owner 31 Oct 2026: "make current HERO our new Showcase HERO") */
.sxr-port{--space-black:#0a0a0a;--deep-orbit:#101214;--orbital-graphite:#16191d;--chrome-primary:#ffffff;--chrome-secondary:#a9b2bc;--liquid-chrome:#a9b2bc;--silver:#cbd2d9;--silver-soft:#eef2f6;--silver-deep:#4b5762;--accent:var(--silver);--accent-rgb:203,210,217;--accent-soft-rgb:238,242,246;--accent-soft:var(--silver-soft);--accent-deep:var(--silver-deep);--champagne:var(--silver);--champagne-soft:var(--silver-soft);--champagne-deep:var(--silver-deep);--bronze-primary:var(--accent);--bronze-light:var(--accent-soft);--signal-live:var(--accent);--ink:var(--space-black);--ink-soft:var(--deep-orbit);--panel:var(--orbital-graphite);--line:rgba(232, 237, 244, 0.14);--line-strong:rgba(232, 237, 244, 0.3);--paper:var(--chrome-primary);--muted:var(--chrome-secondary);--gold:var(--bronze-primary);--gold-soft:var(--bronze-light);--cyan:var(--signal-live);--display:"SXR Space Grotesk", "Helvetica Neue", Arial, sans-serif;--tech:"SXR Space Grotesk", "Helvetica Neue", Arial, sans-serif;--mono:"SXR Space Grotesk", "Helvetica Neue", Arial, sans-serif;--material-silver:linear-gradient(135deg,#f0f3f6 0%,#c5cdd5 52%,#929da8 100%);--material-bronze:var(--material-silver);--material-champagne:var(--material-bronze);--material-chrome:linear-gradient(115deg, #65707a 0%, #ffffff 22%, #a9b2bc 47%, #f4f7f8 70%, #626c75 100%);--material-platinum-field:radial-gradient(ellipse at 17% -9%, rgba(255,255,255,.96), transparent 38%),
    radial-gradient(circle at 84% 18%, rgba(171,180,186,.55), transparent 37%),
    radial-gradient(circle at 48% 112%, rgba(109,119,127,.2), transparent 43%),
    linear-gradient(rgba(14,21,28,.026) 1px, transparent 1px) 0 0 / 96px 96px,
    linear-gradient(90deg, rgba(14,21,28,.026) 1px, transparent 1px) 0 0 / 96px 96px,
    linear-gradient(132deg, #c8cdd0 0%, #f0f3f6 29%, #d4d8da 54%, #edf1f5 77%, #bfc5c8 100%);--material-platinum-field-alt:radial-gradient(ellipse at 82% 0%, rgba(255,255,255,.9), transparent 35%),
    radial-gradient(circle at 9% 70%, rgba(144,153,159,.29), transparent 34%),
    radial-gradient(circle at 84% 82%, rgba(var(--accent-rgb),.1), transparent 28%),
    linear-gradient(rgba(14,21,28,.026) 1px, transparent 1px) 0 0 / 112px 112px,
    linear-gradient(90deg, rgba(14,21,28,.026) 1px, transparent 1px) 0 0 / 112px 112px,
    linear-gradient(140deg, #d1d5d7 0%, #f1f4f7 38%, #c7cccf 68%, #e5eaee 100%);--material-silver-field:radial-gradient(ellipse at 18% 0%, rgba(255,255,255,.75), transparent 38%),
    radial-gradient(circle at 88% 58%, rgba(105,116,124,.2), transparent 35%),
    linear-gradient(rgba(14,21,28,.035) 1px, transparent 1px) 0 0 / 108px 108px,
    linear-gradient(90deg, rgba(14,21,28,.035) 1px, transparent 1px) 0 0 / 108px 108px,
    linear-gradient(135deg, #b7bec2 0%, #dce2e7 38%, #c0c6c9 67%, #e2e8ed 100%);--sxr-ease:cubic-bezier(.22,1,.36,1);--sxr-notch:none;--sxr-depth-x:0px;--sxr-depth-y:0px;--sxr-gutter:20px;--sxr-gutter:clamp(48px, 4.2vw, 60px)}


.sxr-port .hero-sequence { --hero-scale: 1.45; --hero-copy-opacity: 1; --hero-title-opacity: 1; --hero-support-opacity: 1; --hero-support-shift: 0px; --hero-signal-scale: 1; --hero-people-opacity: 1; --hero-people-shift: 0px; --hero-team-opacity: 1; --hero-team-shift: 0px; --hero-path-scale: 1; --hero-chrome-opacity: 0; --hero-field-opacity: 0; position: relative; z-index: 2; height: 265svh; background: #cbd0d2; }
.sxr-port .hero-sticky { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; overflow: hidden; background: var(--material-platinum-field); }
.sxr-port .hero-device { position: relative; z-index: 2; width: min(1120px,82vw); height: min(700px,76svh); display: grid; grid-template-rows: minmax(0,1fr) 18px; transform: scale(var(--hero-scale)); transform-origin: center; will-change: transform; }
.sxr-port .hero-device-bezel { position: relative; min-height: 0; padding: 16px 16px 18px; overflow: hidden; border: 1px solid rgba(4,9,14,.72); border-radius: 24px 24px 15px 15px; background: linear-gradient(145deg,#121922,#05090e 62%); box-shadow: 0 48px 105px rgba(28,34,38,.34), inset 0 1px rgba(255,255,255,.12); }
.sxr-port .hero-console-viewport { position: relative; height: 100%; display: flex; align-items: center; overflow: hidden; border-radius: 10px; background: #05080f; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.sxr-port .hero-media, .sxr-port .hero-poster { position: absolute; inset: -1%; width: 102%; height: 102%; max-width: none; object-fit: cover; filter: saturate(.72) contrast(1.05); transform: scale(1.035) translate3d(var(--sxr-depth-x),var(--sxr-depth-y),0); transition: transform .5s var(--sxr-ease); will-change: transform; }
.sxr-port .hero-poster { display: none; }
.sxr-port .hero-shade { position: absolute; inset: 0; background: radial-gradient(circle at 50% 35%,rgba(var(--accent-rgb),.07),transparent 30%),linear-gradient(90deg, rgba(5,8,15,.72) 0%, rgba(5,8,15,.36) 50%, rgba(5,8,15,.36) 100%), linear-gradient(0deg, rgba(5,8,15,.85), transparent 48%); }
.sxr-port .hero-sequence h1 { margin: 0 auto; max-width: 850px; font-family: var(--tech); font-size: clamp(34px,3.05vw,48px); line-height: .98; letter-spacing: -.005em; font-weight: 600; font-variant-numeric: tabular-nums; text-transform: uppercase; text-wrap: balance; opacity: var(--hero-title-opacity); transition: opacity .1s linear; }
@media (min-width: 821px) and (max-width: 1100px) and (orientation: portrait) {
  .sxr-port .hero-sequence { --hero-scale: 1; --hero-title-opacity: 1; --hero-support-opacity: 1; --hero-support-shift: 0px; --hero-signal-scale: 1; --hero-people-opacity: 1; --hero-people-shift: 0px; --hero-team-opacity: 1; --hero-team-shift: 0px; --hero-path-scale: 1; --hero-chrome-opacity: .82; --hero-field-opacity: 1; height: auto; background: #05080f; }
  .sxr-port .hero-sticky { position: relative; height: auto; min-height: 100svh; background: #05080f; }
  .sxr-port .hero-device { width: 100%; height: 100svh; min-height: 760px; display: block; transform: none !important; }
  .sxr-port .hero-device-bezel { height: 100%; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
  .sxr-port .hero-console-viewport { min-height: 0; border-radius: 0; }
  .sxr-port .hero-sequence h1 { font-size: clamp(34px,5.2vw,48px); }
}
@media (max-width: 820px) {
  .sxr-port .hero-sequence { --hero-title-opacity: 1; --hero-support-opacity: 1; --hero-support-shift: 0px; --hero-signal-scale: 1; --hero-people-opacity: 1; --hero-people-shift: 0px; --hero-team-opacity: 1; --hero-team-shift: 0px; --hero-path-scale: 1; height: auto; }
  .sxr-port .hero-sticky { position: relative; height: auto; min-height: 100svh; background: #05080f; }
  .sxr-port .hero-device { width: 100%; height: 100svh; min-height: 720px; display: block; transform: none !important; }
  .sxr-port .hero-device-bezel { height: 100%; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
  .sxr-port .hero-console-viewport { min-height: 0; border-radius: 0; }
  .sxr-port .hero-sequence h1 { max-width: 680px; font-size: clamp(34px,6vw,48px); }
}
@media (max-width: 720px) {
  .sxr-port .hero-sequence h1 { font-size: clamp(28px,8vw,38px); }
}
@media (max-width: 540px) {
  .sxr-port .hero-device { min-height: 760px; }
}
@media (prefers-reduced-motion: reduce) {
  .sxr-port .hero-media { display: none; }
  .sxr-port .hero-poster { display: block; }
  .sxr-port .hero-sequence { --hero-title-opacity: 1; --hero-support-opacity: 1; --hero-support-shift: 0px; --hero-signal-scale: 1; --hero-people-opacity: 1; --hero-people-shift: 0px; --hero-team-opacity: 1; --hero-team-shift: 0px; --hero-path-scale: 1; height: auto; }
  .sxr-port .hero-sticky { position: relative; min-height: 100svh; }
  .sxr-port .hero-device { transform: none !important; }
}
@media (max-width: 600px) {
  .sxr-port .hero-sequence h1:not(.hero-discovery-title, .story-hero-title) {
    max-width: 100%;
    font-size: clamp(21px,5.8vw,25px) !important;
  }
}
.sxr-port .hd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sxr-port .hb { position: relative; display: flex; align-items: center; width: 100%; height: 44px; }
.sxr-port .hb::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-block: 1px solid rgba(215, 223, 229, .18);
  background: linear-gradient(180deg, rgba(215, 223, 229, .08), rgba(215, 223, 229, .015) 60%), rgba(10, 12, 13, .5);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);   /* over the video since the cards went (27 Oct): frost, like the Showcase header's */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.sxr-port .hb-view {
  position: absolute;
  inset: 0 46px 0 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.sxr-port .hb-view::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(rgba(255, 255, 255, .05) .8px, transparent 1.2px) 0 0 / 4px 4px; }
.sxr-port .hb-track { position: absolute; top: 0; bottom: 0; left: 0; display: flex; align-items: center; white-space: nowrap; animation: hb-run var(--hb-dur, 45s) linear infinite; will-change: transform; }
.sxr-port .hb-half { display: contents; }
.sxr-port .hb:hover .hb-track, .sxr-port .hb:focus-within .hb-track { animation-play-state: paused; }
.sxr-port .hb-item { display: block; padding: 0 26px; color: #e3e9ef; font: 700 18px/1 "Doto", var(--mono); letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 0 6px rgba(215, 223, 229, .45); }
.sxr-port .hb-item b { color: #fff; font-weight: 900; text-shadow: 0 0 9px rgba(255, 255, 255, .75); }
.sxr-port .hb-plus { position: relative; flex: none; width: 13px; height: 13px; filter: drop-shadow(0 0 4px rgba(238, 242, 246, .3)); }
.sxr-port .hb-plus::before, .sxr-port .hb-plus::after { content: ""; position: absolute; border-radius: 2px; background: linear-gradient(135deg, #f7f9fb, #c3cbd3 45%, #8e98a2 62%, #e9edf1); }
.sxr-port .hb-plus::before { left: 5px; top: 0; width: 3px; height: 13px; }
.sxr-port .hb-plus::after { top: 5px; left: 0; width: 13px; height: 3px; }
.sxr-port .hb-pause { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: none; color: rgba(255, 255, 255, .62); cursor: pointer; transition: color .2s cubic-bezier(.16, 1, .3, 1); }
.sxr-port .hb-pause:hover { color: #fff; }
.sxr-port .hb-pause svg { width: 14px; height: 14px; }
.sxr-port .hb-pause:focus-visible { outline: 2px solid #d7dfe5; outline-offset: -2px; }
@media (max-width: 600px) {
  .sxr-port .hb { height: 40px; }
  .sxr-port .hb-item { padding: 0 16px; font-size: 13px; }
  .sxr-port .hb-plus { width: 10px; height: 10px; }
  .sxr-port .hb-plus::before { left: 4px; width: 2px; height: 10px; }
  .sxr-port .hb-plus::after { top: 4px; width: 10px; height: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .sxr-port .hb-view { right: 0; -webkit-mask-image: none; mask-image: none; }
  .sxr-port .hb-track { right: 0; justify-content: center; animation: none; }
  .sxr-port .hb-track .is-repeat { display: none; }
  .sxr-port .hb-pause { display: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 600px) {
  .sxr-port .hb-item { padding: 0 6px; font-size: 10px; letter-spacing: .02em; }
}
.sxr-port .hero-discovery {
  position: absolute;
  z-index: 3;
  inset: auto max(28px,5vw) 110px;
  display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(0,1.25fr);
  align-items: end;
  gap: clamp(28px,4vw,72px);
  color: var(--paper);
}
.sxr-port .hero-discovery-copy { max-width: 760px; container-type:inline-size; }
.sxr-port .hero-video-opening .hero-discovery h1 {
  margin: 0;
  max-width: none;
  color: #f0f3f6;
  font: 600 clamp(38px,3.8vw,72px)/1.05 var(--display);
  font-size: min(clamp(38px,3.8vw,72px),6.9cqw);
  white-space: normal;
  text-wrap: balance;
  letter-spacing: -.035em;
  text-transform: none;
  text-shadow: 0 3px 28px rgba(0,0,0,.3);
  animation: hero-title-arrive 1.8s var(--sxr-ease) both;
}
.sxr-port .hero-discovery h1 > span { color: var(--accent); font-style: normal; white-space: nowrap; }
@supports (background-clip:text) or (-webkit-background-clip:text) {
  .sxr-port .hero-discovery h1 > span {
    display: inline-block;
    padding-inline: .12em;
    margin-inline: -.12em;
    color: transparent;
    background: linear-gradient(110deg,var(--accent) 38%,var(--accent-soft) 50%,var(--accent) 62%) 100% 0 / 250% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: hero-title-light 3.2s ease-in-out .4s both;
  }
}
@media (max-width:1100px) {
  .sxr-port .hero-discovery { grid-template-columns: 1fr; gap: 30px; }
  .sxr-port .hero-video-opening .hero-discovery h1 { font-size: min(clamp(38px,5.8vw,64px),6.9cqw); }
}
@media (max-width:600px) {
  .sxr-port .hero-discovery { inset-inline: 20px; bottom: 108px; gap: 24px; }
  .sxr-port .hero-video-opening .hero-discovery h1 { font-size: min(clamp(28px,8.3vw,48px),6.9cqw); }
}
@media (max-height:650px) {
  .sxr-port .hero-discovery { bottom: 92px; gap: 20px; }
}
@media (max-height:650px) and (max-width:1100px) and (min-width:601px) {
  .sxr-port .hero-discovery { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); }
  .sxr-port .hero-video-opening .hero-discovery h1 { font-size: min(clamp(28px,3.6vw,40px),6.9cqw); }
}
@media (prefers-reduced-motion:reduce) {
  .sxr-port .hero-video-opening .hero-discovery h1 { animation: none; }
  .sxr-port .hero-discovery h1 > span { animation: none; background: none; color: var(--accent); }
}
.sxr-port .hero-video-opening { height: 100svh; }
.sxr-port .hero-video-opening .hero-sticky { position: relative; height: 100%; min-height: 0; }
.sxr-port .hero-video-opening .hero-device { width: 100%; height: 100%; min-height: 0; display: block; transform: none; will-change: auto; }
.sxr-port .hero-video-opening .hero-device-bezel { height: 100%; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.sxr-port .hero-video-opening .hero-console-viewport { border-radius: 0; }
.sxr-port .hero-video-opening .hero-media,.sxr-port .hero-video-opening .hero-poster { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: none; transition: none; }
.sxr-port .hero-video-opening .hero-shade { background: linear-gradient(180deg,rgba(5,8,15,.3),transparent 24%,rgba(5,8,15,.12) 46%,rgba(5,8,15,.86)); pointer-events: none; }
.sxr-port .hero-lab {
  display: contents;
  /* the wordmark is raster (1800 px): never wider than 900 CSS px (sharp at 2×), 80% of the screen on phones, and a little
     smaller on short laptop screens so the tagline and cards still fit */
  --mark-w: min(80vw, 900px, max(calc(150svh - 450px), 280px));
}
.sxr-port .hero-lab[data-intro="play"] :is(.pg-head, .hero-discovery) { pointer-events: none; }
.sxr-port .hero-lab[data-variant="b"][data-intro="play"] .hero-video-opening .hero-sticky { background: #000; }
.sxr-port .hero-lab[data-variant="b"][data-intro="play"] .hero-discovery { animation: hero-reveal-end 4.05s linear both; }
.sxr-port .hero-lab[data-variant="b"][data-intro="play"] .hero-device { animation: hero-reveal-video 1.2s var(--sxr-ease) 2.75s both; }
.sxr-port .hero-lab[data-variant="b"][data-intro="play"] .hero-discovery-copy { animation: hero-reveal-rise .7s var(--sxr-ease) 3s both; }
.sxr-port .hero-lab[data-variant="b"][data-intro="play"] :is(.sono-site-guide, .sxr-spatial-readout) { animation: hero-reveal-in .5s cubic-bezier(0, 0, .58, 1) 3.5s both; }
.sxr-port .hero-lab[data-variant="b"][data-mark="story"][data-intro="play"] .hero-discovery { animation: hero-reveal-end 1.9s linear both; }
.sxr-port .hero-lab[data-variant="b"][data-mark="story"][data-intro="play"] .hero-device { animation-delay: .1s; }
.sxr-port .hero-lab[data-variant="b"][data-mark="story"][data-intro="play"] .story-hero-title { animation: hero-reveal-rise .8s var(--sxr-ease) .3s both; }
.sxr-port .hero-lab[data-variant="b"][data-mark="story"][data-intro="play"] .hero-discovery-copy { animation-delay: .85s; }
.sxr-port .hero-lab[data-variant="b"][data-mark="story"][data-intro="play"] :is(.sono-site-guide, .sxr-spatial-readout) { animation-delay: 1.1s; }
.sxr-port .hero-lab[data-variant="a"][data-intro="play"] .hero-discovery { animation: hero-reveal-end-a 4.6s linear both; }
.sxr-port .hero-lab[data-variant="a"][data-intro="play"] .hero-discovery-copy { animation: hero-reveal-rise .7s var(--sxr-ease) 3.7s both; }
.sxr-port .hero-lab[data-variant="a"][data-intro="play"] :is(.sono-site-guide, .sxr-spatial-readout) { animation: hero-reveal-in .5s cubic-bezier(0, 0, .58, 1) 4s both; }
.sxr-port .hero-lab[data-variant="b"] {
  --head-h: 88px;
  --stack-h: 182px;               /* preserve the approved wordmark sizing */
  --copy-stack-h: 180px;          /* platform label + larger two-line headline */
  --clear: 32px;                  /* headline → card band, at least */
  --row-h: 112px;                 /* the card row: one row of four */
  --band-pad-t: 24px;
  --band-pad-b: 28px;
  --band-h: calc(var(--band-pad-t) + var(--row-h) + var(--band-pad-b));
  --below: 0px;                   /* band on the first screen (0) or right under it (= --band-h) */
  --area-h: calc(100svh - var(--band-h) + var(--below));   /* the hero area above the band */
  --lift: calc(var(--area-h) * .02);                      /* SONO's centre sits just above the area's centre */
  /* the widest wordmark whose halves fit the area: the text and a clear gap under it, the header above it
     (box height = width × 0.2111) */
  --mark-fit: calc(min(var(--area-h) + 2 * var(--lift) - 2 * (var(--stack-h) + var(--clear)), var(--area-h) - 2 * var(--lift) - 2 * (var(--head-h) + 10px)) / var(--mark-ratio));
  --mark-w: min(80vw, 900px, max(var(--mark-fit), var(--mark-min)));
  --mark-min: 360px;
  --grow-dy: 0px;                 /* it grows in place: no rise, no jump */
  --mark-ratio: .21112;           /* the mark's box height ÷ width (the 1800 × 380 wordmark) */
}
@media (min-width: 601px) and (max-height: 760px) {
  .sxr-port .hero-lab[data-variant="b"] { --stack-h: 152px; --copy-stack-h: 150px; --clear: 28px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .sxr-port .hero-lab[data-variant="b"] { --row-h: calc(2 * 112px + 14px); }
}
@media (max-width: 820px) { .sxr-port .hero-lab[data-variant="b"] { --head-h: 72px; } }
@media (max-width: 600px) {
  .sxr-port .hero-lab[data-variant="b"] { --mark-w: 80vw; --copy-stack-h: 140px; --clear: 24px; --band-pad-t: 16px; --band-pad-b: 20px; --row-h: calc(2 * 56px + 8px); }
}
.sxr-port .hero-lab[data-variant="b"][data-mark="story"] { --strip-h: 44px; --band-pad-t: var(--strip-h); --row-h: 0px; --band-pad-b: 28px; --below: 0px; }
@media (max-width: 600px) {
  .sxr-port .hero-lab[data-variant="b"][data-mark="story"] { --strip-h: 40px; --band-pad-b: 20px; }
}
@media (max-width: 600px) and (max-height: 640px) {
  .sxr-port .hero-lab[data-variant="b"] { --below: var(--band-h); }
}
@media (max-width: 540px) { .sxr-port .hero-lab[data-variant="b"] { --head-h: 64px; } }
.sxr-port .hero-lab[data-variant="b"] .hero-video-opening { height: auto; min-height: 100svh; }
.sxr-port .hero-lab[data-variant="b"] .hero-video-opening .hero-sticky { display: block; place-items: normal; height: auto; min-height: 100svh; }
.sxr-port .hero-lab[data-variant="b"] .hero-video-opening .hero-device { position: absolute; inset: 0; height: auto; }
.sxr-port .hero-lab[data-variant="b"] .hero-video-opening .hero-shade {
  background:
    radial-gradient(ellipse 62% 42% at 50% 50%, rgba(4, 6, 10, .64), rgba(4, 6, 10, .2) 72%, transparent),
    linear-gradient(180deg, rgba(5, 8, 15, .5), rgba(5, 8, 15, .3) 30%, rgba(5, 8, 15, .38) 55%, rgba(5, 8, 15, .9));
}
.sxr-port .hero-lab[data-variant="b"] .hero-discovery {
  position: relative;
  inset: auto;
  box-sizing: border-box;
  width: 100%;
  /* the first screen (band included), or the first screen plus the band when it sits below the fold */
  min-height: calc(100svh + var(--below));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  /* Keep the lockup centred; move it up only as needed to clear the card band. */
  padding: max(calc(var(--head-h) + 10px), min(calc(var(--area-h) / 2 - var(--lift) - var(--mark-w) * var(--mark-ratio) / 2), calc(var(--area-h) - var(--mark-w) * var(--mark-ratio) - var(--copy-stack-h) - var(--clear)))) max(28px, 5vw) var(--band-pad-b);
}
.sxr-port .hero-lab[data-variant="b"][data-mark="story"] .hero-discovery { padding: calc(var(--head-h) + 16px) max(16px, 4vw) var(--band-pad-b); }
.sxr-port .hero-lab[data-variant="b"][data-mark="story"] .hero-discovery-copy { width: 100%; margin: 0 auto; }
.sxr-port .story-hero { display: flex; flex-direction: column; align-items: center; width: 100%; margin: auto 0; padding-block: 16px clamp(24px, 4svh, 48px); text-align: center; }
.sxr-port .hero-lab[data-variant="b"][data-mark="story"] .hero-video-opening .hero-discovery .story-hero-title {
  --story-size: 144px;
  max-width: 1020px;
  margin: 0 auto;
  color: #f7f9fb;
  font: 400 min(var(--story-size), 14svh)/1 "Anton", Impact, "Arial Narrow", sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 2px 34px rgba(0, 0, 0, .38);
}
@media (max-width: 1023px) { .sxr-port .hero-lab[data-variant="b"][data-mark="story"] .hero-video-opening .hero-discovery .story-hero-title { --story-size: 96px; } }
@media (max-width: 767px) { .sxr-port .hero-lab[data-variant="b"][data-mark="story"] .hero-video-opening .hero-discovery .story-hero-title { --story-size: 80px; } }
@media (max-width: 539px) { .sxr-port .hero-lab[data-variant="b"][data-mark="story"] .hero-video-opening .hero-discovery .story-hero-title { --story-size: 56px; } }
.sxr-port .hero-lab[data-variant="b"] .hero-discovery-copy {
  width: min(780px, 100%);
  max-width: none;
  margin: clamp(14px, 2.6svh, 28px) auto calc(var(--clear) + var(--band-pad-t));
  text-align: center;
}
.sxr-port .hero-lab[data-variant="b"] .hero-video-opening .hero-discovery h1 {
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 1.12;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .55);
}
@media (min-width: 601px) and (max-height: 760px) {
  .sxr-port .hero-lab[data-variant="b"] .hero-video-opening .hero-discovery h1 { font-size: min(clamp(30px, 3.8vw, 48px), 8.6cqw); }
}
@media (max-width: 600px) {
  .sxr-port .hero-lab[data-variant="b"] .hero-discovery { padding-inline: 20px; }
  .sxr-port .hero-lab[data-variant="b"] .hero-discovery-copy { margin-top: 18px; }
  .sxr-port .hero-lab[data-variant="b"] .hero-video-opening .hero-discovery h1 { font-size: min(clamp(24px, 6.8vw, 32px), 7cqw); }
}
@media (max-width: 600px) and (max-height: 640px) {
  .sxr-port .hero-lab[data-variant="b"] .hero-discovery-copy { margin-top: 14px; }
}
@keyframes hb-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes hero-title-arrive {
  from { transform: translateY(14px); }
  to { transform: translateY(0); }
}
@keyframes hero-title-light {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
@keyframes hero-reveal-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-reveal-video { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes hero-reveal-rise { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
@keyframes hero-reveal-end { 0%, 77% { pointer-events: none; } 78%, 100% { pointer-events: auto; } }
@keyframes hero-reveal-end-a { 0%, 82% { pointer-events: none; } 83%, 100% { pointer-events: auto; } }