/* =============================================================
   Sticky — Hero Video Background
   Sequence: load → play clean → reveal overlay → replay

   Design tokens are read from the Sticky theme where available
   (--color-primary, --body-font-family, --btn-radius …) and fall
   back to the brand values, so this matches the LP in both places.

   1 Reset  2 Tokens  3 Section  4 Media  5 Scrim  6 Loader
   7 Content  8 Buttons  9 Controls  10 Sequence  11 Responsive
   ============================================================= */

/* ---------- 1. SCOPED RESET ---------------------------------- */
.sh,
.sh :where(*:not(.button):not(.button__text):not(.button__arrow):not(.button__icon)),
.sh :where(*:not(.button):not(.button__text):not(.button__arrow):not(.button__icon))::before,
.sh :where(*:not(.button):not(.button__text):not(.button__arrow):not(.button__icon))::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
  text-decoration: none;
  text-shadow: none;
  color: inherit;
  list-style: none;
  vertical-align: baseline;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sh img,
.sh iframe { display: block; max-width: none; }
.sh button { cursor: pointer; -webkit-appearance: none; appearance: none; }

/* ---------- 2. TOKENS ---------------------------------------- */
@property --sh-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 105deg;
}

@keyframes sh-rotate { to { --sh-angle: 465deg; } }

.sh {
  /* Brand palette — inherited from the theme when present */
  --sh-primary-rgb:   var(--color-primary,   0, 116, 255);
  --sh-tertiary-rgb:  var(--color-tertiary,  148, 205, 255);
  --sh-lime-rgb:      var(--color-secondary, 193, 226, 51);
  --sh-ink-rgb:       var(--color-black,     0, 24, 43);
  --sh-deep-rgb:      var(--color-dark,      17, 66, 97);
  --sh-light-rgb:     var(--color-light,     232, 246, 255);

  /* Type — DM Sans via the theme's own variables */
  --sh-font:      var(--body-font-family, "DM Sans"), sans-serif;
  --sh-head-font: var(--jumbo-font-family, var(--h1-font-family, "DM Sans")), sans-serif;
  --sh-btn-font:  var(--btn-font-family, "DM Sans"), sans-serif;

  /* Radii — theme values, brand defaults */
  --sh-media-radius: var(--media-radius, 30px);
  --sh-card-radius:  var(--card-radius, 25px);

  /* Instance settings (overwritten inline by the module fields) */
  --sh-h: 85;
  --sh-h-min: 600px;
  --sh-h-max: 900px;
  --sh-maxw: 1280px;
  --sh-pad-y: 88px;
  --sh-gap: 72px;
  --sh-split: 52;
  --sh-colmin: 560px;
  --sh-panel-w: 1120px;

  /* Aspect ratio of the source video as a number. Written inline from
     the field, then corrected at runtime from the Vimeo API when the
     field is set to Auto — so a 4:3, square or vertical cut sizes
     correctly without anyone remembering to change a setting. */
  --sh-ar: 1.7778;

  /* The module writes --sh-gap / --sh-pad-y inline from the fields, and
     inline styles beat media queries — so those variables can never be
     stepped down responsively. Derive fluid values from them instead:
     the field is the ceiling, viewport units take over below it. */
  --sh-gap-e: min(var(--sh-gap), 7vw);
  --sh-pad-e: min(var(--sh-pad-y), 9vw);
  --sh-scrim: 0, 24, 43;
  --sh-scrim-2: 17, 66, 97;
  --sh-scrim-a: 0.88;
  --sh-scrim-dir: to top;
  --sh-text: #ffffff;
  --sh-accent: #0074ff;
  --sh-eyebrow: #94cdff;
  --sh-h1: 72px;
  --sh-eyebrow-transform: none;
  --sh-radius: var(--btn-radius, 100px);

  --sh-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 3. SECTION --------------------------------------- */
.sh {
  position: relative;
  display: flex;
  width: 100%;
  height: calc(var(--sh-h) * 1vh);
  min-height: var(--sh-h-min);
  max-height: var(--sh-h-max);
  color: var(--sh-text);
  font-family: var(--sh-font);
  line-height: 1.8;
  background-color: rgb(var(--sh-ink-rgb));
}

@supports (height: 1svh) {
  .sh { height: calc(var(--sh-h) * 1svh); }
}

/* ---- Sizing modes -------------------------------------------
   viewport : height driven by the vh field (default)
   fill     : the hero takes its height from the PARENT section, so
              the HubSpot row controls the hold. min-height is kept
              as a floor in case the parent has no intrinsic height.
   aspect   : height follows the video's own 16:9, nothing is cropped
   ------------------------------------------------------------- */
.sh--size-fill {
  height: 100%;
  align-self: stretch;
  max-height: none;
}

/* Ratio-driven height, but never taller than the screen or the max
   height field — otherwise a vertical or 4:3 cut would produce a hero
   thousands of pixels tall. When the cap bites, "show the whole frame"
   letterboxes rather than cropping. */
.sh--size-aspect {
  height: auto;
  min-height: 0;
  aspect-ratio: var(--sh-ar);
  max-height: min(100vh, var(--sh-h-max));
}

@supports (height: 1svh) {
  .sh--size-aspect { max-height: min(100svh, var(--sh-h-max)); }
}

/* Break the video out to full browser width when the module sits in a
   padded or width-limited parent row. */
.sh--bleed {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.sh .sh__stage {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  background-color: rgb(var(--sh-ink-rgb));
}

/* Framed variant — the theme's .media-border treatment */
.sh--framed {
  padding: clamp(12px, 2vw, 28px);
  background-color: rgb(var(--sh-light-rgb));
}

.sh--framed .sh__stage {
  border: 0.8rem solid transparent;
  border-radius: var(--sh-media-radius);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image:
    linear-gradient(rgb(var(--sh-ink-rgb)), rgb(var(--sh-ink-rgb))),
    linear-gradient(145deg,
      #002b77 4.44%,
      rgb(var(--sh-primary-rgb)) 34.56%,
      rgb(var(--sh-tertiary-rgb)) 82.98%);
}

.sh--framed .sh__media { border-radius: calc(var(--sh-media-radius) * 0.75); }

.sh .sh__inner {
  position: relative;
  z-index: 4;
  display: flex;
  width: 100%;
  padding: var(--sh-pad-e) clamp(20px, 5vw, 72px);
}

.sh .sh__panel { width: 100%; max-width: var(--sh-maxw); }

.sh .sh__grid {
  display: grid;
  width: 100%;
  column-gap: var(--sh-gap-e);
  row-gap: min(var(--sh-gap-e), 34px);
}

.sh--stacked .sh__grid { grid-template-columns: minmax(0, 1fr); }

/* Split collapses on intrinsic width, not a fixed breakpoint: the copy
   column drops below the headline the moment it can no longer hold
   --sh-colmin. That keeps the ratio field honest — widen the left
   column and the collapse point moves with it — and stops the CTAs
   ever being squeezed into a column too narrow for them. */
.sh--split .sh__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.sh--split .sh__col { min-width: 0; }

/* Column A shrinks to the headline rather than claiming a fixed share.
   Locking it to 52% left a dead gutter between the headline and the
   copy — the headline needs ~460px and was being given 692. */
.sh--split .sh__col--a {
  flex: 0 1 auto;
  max-width: min(100%, calc(var(--sh-split) * 1%));
}

.sh--split .sh__col--b {
  flex: 1 1 var(--sh-colmin);
  min-width: min(100%, var(--sh-colmin));
  max-width: 560px;
}

.sh--align-left   .sh__inner { justify-content: flex-start; }
.sh--align-center .sh__inner { justify-content: center; }
.sh--align-right  .sh__inner { justify-content: flex-end; }
.sh--align-center .sh__panel { margin-inline: auto; }

/* Glass plate — the theme's .border-glass treatment, used to give the
   revealed copy a defined edge instead of letting it float over the
   footage. It also solves the "headline hard against the container
   edge" problem: the plate's own padding insets the text.

   Its blur does the contrast work locally, so the scrim over the rest
   of the video can be lighter and more of the footage stays visible. */
.sh.sh--panel .sh__panel {
  width: fit-content;
  max-width: min(var(--sh-panel-w), 100%);
  margin-inline: auto;
  padding: clamp(22px, 2.2vw, 36px) clamp(24px, 2.6vw, 44px);
  border: 0.5rem solid transparent;
  border-radius: var(--sh-card-radius);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image:
    linear-gradient(rgba(var(--sh-ink-rgb), 0.46), rgba(var(--sh-ink-rgb), 0.46)),
    linear-gradient(145deg,
      rgba(var(--sh-light-rgb), 0.22) 4.44%,
      rgba(var(--sh-primary-rgb), 0.22) 34.56%,
      rgba(var(--sh-tertiary-rgb), 0.22) 82.98%);
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.3),
              0 0 2px hsla(0, 0%, 100%, 0.2),
              0 30px 70px -30px rgba(0, 0, 0, 0.7);
}

/* Contained: content lines up with the site container (logo / nav),
   while the video stays full-bleed. Uses the theme's own tokens. */
.sh.sh--contained .sh__inner {
  justify-content: center;
  padding-inline: var(--site-gutter, 20px);
}

.sh.sh--contained .sh__panel {
  width: 100%;
  max-width: var(--sh-maxw);
  margin-inline: auto;
}

/* column-gap wants the full field value; row-gap is the space between
   the headline and the copy once they wrap, which needs far less. */


.sh--stacked.sh--align-center .sh__col { text-align: center; }
.sh--stacked.sh--align-right  .sh__col { text-align: right; }

.sh--valign-top    .sh__inner { align-items: flex-start; }
.sh--valign-middle .sh__inner { align-items: center; }
.sh--valign-bottom .sh__inner { align-items: flex-end; }

/* ---------- 4. MEDIA ----------------------------------------- */
.sh .sh__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  container-type: size;
  background-color: rgb(var(--sh-ink-rgb));
}

.sh .sh__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  opacity: 1;
  transition: opacity 900ms var(--sh-ease);
}

/* Cover-crop a 16:9 iframe inside any container shape */
.sh .sh__frame {
  position: absolute;
  top: var(--sh-focus-y, 50%);
  left: var(--sh-focus-x, 50%);
  transform: translate(-50%, -50%);
  z-index: 0;
  border: 0;
  pointer-events: none;
  width: 100cqw;
  height: calc(100cqw / var(--sh-ar));
  min-width: calc(100cqh * var(--sh-ar));
  min-height: 100cqh;
  opacity: 0;
  transition: opacity 900ms var(--sh-ease);
}

@supports not (container-type: size) {
  .sh .sh__frame {
    width: 100vw;
    height: calc(100vw / var(--sh-ar));
    min-width: calc(100vh * var(--sh-ar));
    min-height: 100vh;
  }
}

/* ---- Fit: contain --------------------------------------------
   Cover fills the box and crops whatever doesn't fit — top and bottom
   whenever the section is wider than 16:9, which a 85vh full-width
   hero always is. Contain fits the whole frame inside instead and
   lets the ink background show as bars.

   With "From the video's 16:9 ratio" sizing the box IS 16:9, so cover
   and contain are identical and there are no bars at all. That's the
   combination to use for screen-recording footage.
   ------------------------------------------------------------- */
.sh--fit-contain .sh__frame {
  width: min(100cqw, calc(100cqh * var(--sh-ar)));
  height: min(calc(100cqw / var(--sh-ar)), 100cqh);
  min-width: 0;
  min-height: 0;
}

@supports not (container-type: size) {
  .sh--fit-contain .sh__frame {
    width: min(100vw, calc(100vh * var(--sh-ar)));
    height: min(calc(100vw / var(--sh-ar)), 100vh);
    min-width: 0;
    min-height: 0;
  }
}

.sh.is-playing .sh__frame  { opacity: 1; }
.sh.is-playing .sh__poster { opacity: 0; }

/* Autoplay blocked: use the poster if there is one, otherwise leave
   the paused first frame visible rather than showing black. */
.sh.is-fallback.sh--has-poster .sh__frame  { opacity: 0; }
.sh.is-fallback.sh--has-poster .sh__poster { opacity: 1; }
.sh.is-fallback:not(.sh--has-poster) .sh__frame { opacity: 1; }

/* ---------- 5. SCRIM ----------------------------------------- */
.sh .sh__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.sh--scrim-flat .sh__scrim {
  background: rgba(var(--sh-scrim), var(--sh-scrim-a));
}

/* Near-solid by design: the gradient only shifts ink -> deep blue and
   lifts slightly at the far edge, so the video reads as a texture
   behind the copy rather than competing with it. Drop the opacity
   field if you want more of the footage to show through. */
.sh--scrim-grad .sh__scrim {
  background:
    linear-gradient(
      var(--sh-scrim-dir),
      rgba(var(--sh-scrim), calc(var(--sh-scrim-a) * 1.08)) 0%,
      rgba(var(--sh-scrim-2), var(--sh-scrim-a)) 55%,
      rgba(var(--sh-scrim-2), calc(var(--sh-scrim-a) * 0.82)) 100%
    ),
    radial-gradient(
      130% 100% at 50% 55%,
      rgba(var(--sh-scrim), 0) 45%,
      rgba(var(--sh-scrim), calc(var(--sh-scrim-a) * 0.45)) 100%
    );
}

/* Letterbox blending. Showing the whole frame inside a box that isn't
   the video's shape leaves ink bars at the sides. Rather than pretend
   they aren't there, fade the overlay to solid ink across the outer
   fifth so the bar and the scrim become one surface and the edge of
   the video stops being a visible seam. Costs nothing — no second
   player, no extra bandwidth. */
.sh--fit-contain .sh__scrim::after,
.sh--m-contain .sh__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgb(var(--sh-scrim)) 0%,
    rgba(var(--sh-scrim), 0) 19%,
    rgba(var(--sh-scrim), 0) 81%,
    rgb(var(--sh-scrim)) 100%
  );
}

/* Ratio-driven sizing has no bars to hide, so leave the edges alone. */
.sh--size-aspect.sh--fit-contain .sh__scrim::after { display: none; }

.sh .sh__grain {
  position: absolute;
  inset: -100%;
  z-index: 3;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 6. LOADER ---------------------------------------- */
.sh .sh__loader {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 6;
  place-items: center;
  background: rgb(var(--sh-ink-rgb));
  transition: opacity 700ms var(--sh-ease), visibility 0s linear 700ms;
}

.sh--seq .sh__loader { display: grid; }

.sh--seq:not(.is-loading) .sh__loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.sh .sh__loader-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Indeterminate ring */
.sh .sh__ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(var(--sh-primary-rgb), 0) 0%,
    rgba(var(--sh-primary-rgb), 1) 55%,
    #5bc9ff 80%,
    #9ddfff 100%
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  animation: sh-spin 900ms linear infinite;
}

@keyframes sh-spin { to { transform: rotate(360deg); } }

/* Buffer bar */
.sh .sh__bar {
  position: relative;
  width: min(240px, 46vw);
  height: 3px;
  border-radius: 100px;
  overflow: hidden;
  background: rgba(var(--sh-tertiary-rgb), 0.22);
}

.sh .sh__bar i {
  display: block;
  height: 100%;
  width: calc(var(--sh-progress, 0) * 1%);
  border-radius: 100px;
  background: linear-gradient(90deg, rgb(var(--sh-primary-rgb)), #5bc9ff, #9ddfff);
  transition: width 350ms var(--sh-ease);
}

.sh .sh__bar.is-indeterminate i {
  width: 38%;
  animation: sh-slide 1.25s var(--sh-ease) infinite;
}

@keyframes sh-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(365%); }
}

.sh .sh__loader-label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--sh-tertiary-rgb));
  opacity: 0.85;
}

.sh--loader-ring .sh__bar  { display: none; }
.sh--loader-bar  .sh__ring { display: none; }

/* ---------- 7. CONTENT --------------------------------------- */
.sh .sh__eyebrow {
  display: block;
  margin: 0 0 18px;
  font-size: clamp(15px, 1.05vw, 18px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.03em;
  text-transform: var(--sh-eyebrow-transform);
  color: var(--sh-eyebrow);
}

.sh .sh__headline {
  margin: 0;
  font-family: var(--sh-head-font);
  font-size: clamp(44px, 26px + 4.7vw, var(--sh-h1));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--sh-text);
  text-wrap: balance;
}

.sh--stacked .sh__headline { margin-bottom: 24px; }

.sh .sh__subhead {
  margin: 0 0 34px;
  font-size: clamp(17px, 1.2vw, 20px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--sh-text);
  opacity: 0.9;
  max-width: 52ch;
  text-wrap: pretty;
}

.sh--stacked.sh--align-center .sh__subhead  { margin-inline: auto; }
.sh--stacked.sh--align-center .sh__footnote { margin-inline: auto; }
.sh--stacked.sh--align-right  .sh__subhead  { margin-left: auto; }

.sh .sh__subhead p { margin: 0 0 14px; }
.sh .sh__subhead p:last-child { margin-bottom: 0; }
.sh .sh__subhead strong { font-weight: 700; }
.sh .sh__subhead a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sh .sh__footnote {
  margin: 26px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--sh-text);
  opacity: 0.75;
  max-width: 52ch;
}

/* Light scheme — dark text over a pale wash */
.sh--theme-light .sh__subhead  { opacity: 0.86; }
.sh--theme-light .sh__footnote { opacity: 0.68; }

/* ---- Density: compact --------------------------------------
   The comfortable scale was built for a hero that filled the width
   at 85vh. Ratio-driven sizing makes the box taller, which leaves the
   copy floating in a lot of air. Compact tightens the type and the
   rhythm so the block reads as one tidy unit rather than five loosely
   related lines — it doesn't just shrink everything by a percentage.
   ------------------------------------------------------------- */
.sh--density-compact .sh__eyebrow {
  margin-bottom: 10px;
  font-size: clamp(14px, 0.95vw, 16px);
  letter-spacing: 0.04em;
}

.sh--density-compact .sh__headline {
  font-size: clamp(36px, 20px + 3.2vw, var(--sh-h1));
  line-height: 1.02;
  letter-spacing: -0.032em;
}

/* Break the headline where it reads best rather than wherever the
   column happens to end. ~18ch gives two balanced lines. */
.sh--split.sh--density-compact .sh__headline { max-width: 18ch; }

.sh--density-compact.sh--stacked .sh__headline { margin-bottom: 16px; }

.sh--density-compact .sh__subhead {
  margin-bottom: 24px;
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.55;
  max-width: 44ch;
}

.sh--density-compact .sh__actions { gap: 12px; }

.sh--density-compact .sh__footnote {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.5;
  max-width: 44ch;
}

.sh--density-compact .sh__grid { column-gap: min(var(--sh-gap-e), 56px); }

.sh--density-compact.sh--split .sh__col--b { padding-top: 3px; }



/* ---- Plate overrides ---------------------------------------
   Declared last on purpose. Two things had to be beaten:
   1. .sh--contained .sh__panel, which pins the panel to the full
      container width — same specificity, so order decides.
   2. --sh-colmin is written inline from the field, and min-width
      always wins over max-width, so capping the copy column needed
      its min-width set explicitly rather than via the variable.
   ------------------------------------------------------------- */
.sh.sh--panel .sh__panel,
.sh.sh--panel.sh--contained .sh__panel {
  width: 100%;
  max-width: min(var(--sh-panel-w), 100%);
  margin-inline: auto;
}

.sh.sh--panel.sh--split .sh__col--b {
  min-width: min(100%, 400px);
  max-width: 460px;
}

.sh.sh--panel.sh--split.sh--density-compact .sh__headline { max-width: 17ch; }

/* The column already caps the measure — a second ch cap on top of it
   just forced extra line breaks and made the plate taller. */
.sh.sh--panel .sh__subhead,
.sh.sh--panel .sh__footnote { max-width: none; }

/* Tighter internal rhythm inside the plate. */
.sh.sh--panel.sh--density-compact .sh__eyebrow  { margin-bottom: 8px; }
.sh.sh--panel.sh--density-compact .sh__subhead  { margin-bottom: 20px; }
.sh.sh--panel.sh--density-compact .sh__footnote { margin-top: 14px; }
.sh.sh--panel.sh--density-compact .sh__actions  { gap: 10px; }
.sh.sh--panel.sh--density-compact .sh__grid     { column-gap: 48px; }

/* ---- Video thumbnail / replay -------------------------------
   Fills the right of the plate at every width and gives Replay a
   real home instead of a pill floating over the footage. The frame
   takes the video's own aspect ratio (--sh-ar), so it stays correct
   for a 16:9, square or vertical cut without being told.
   ------------------------------------------------------------- */
/* Anchor the thumbnail to the right edge of the plate. Any slack then
   reads as a gutter between two blocks rather than a void hanging off
   the end of the copy. */
.sh--has-thumb.sh--split .sh__grid { justify-content: space-between; }

/* Even halves. The thumbnail is the second-most important thing in the
   plate after the headline, so it gets the same room as the copy rather
   than a sliver. The min-width is a floor, not a share: if the plate is
   too narrow for the headline to sit on two lines the copy takes what it
   needs and the tile gives up the difference. */
.sh--has-thumb.sh--split .sh__col--a {
  flex: 1 1 0;
  min-width: min(100%, 430px);
  max-width: none;
}

/* Headline and copy now share a column, so the headline needs the
   bottom margin it previously got from the column gap. */
.sh--has-thumb .sh__headline { margin-bottom: 22px; }
.sh--has-thumb .sh__eyebrow  { margin-bottom: 12px; }

.sh--has-thumb.sh--split .sh__col--thumb {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: 560px;
  align-self: center;
}

.sh .sh__thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
}

.sh .sh__thumb-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--sh-ar);
  overflow: hidden;
  border: 0.25rem solid transparent;
  border-radius: calc(var(--sh-card-radius) * 0.7);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image:
    linear-gradient(rgb(var(--sh-ink-rgb)), rgb(var(--sh-ink-rgb))),
    linear-gradient(145deg,
      #002b77 4.44%,
      rgb(var(--sh-primary-rgb)) 34.56%,
      rgb(var(--sh-tertiary-rgb)) 82.98%);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.75);
  transition: transform 260ms var(--sh-ease), box-shadow 260ms var(--sh-ease);
}

.sh .sh__thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 500ms var(--sh-ease);
}

.sh .sh__thumb-img.is-loaded { opacity: 1; }

/* Evergreen fallback: no provider thumbnail and no poster still reads
   as a deliberate play affordance rather than an empty box. */
.sh .sh__thumb-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 120% at 30% 20%,
      rgba(var(--sh-primary-rgb), 0.45) 0%,
      rgba(var(--sh-ink-rgb), 0) 60%),
    linear-gradient(150deg, rgb(var(--sh-deep-rgb)), rgb(var(--sh-ink-rgb)));
}

.sh .sh__thumb-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(180deg, #10243c 0%, #050d18 100%);
  box-shadow: 0 0 0 2px rgba(var(--sh-tertiary-rgb), 0.55),
              0 0 1.6rem rgba(89, 216, 255, 0.55);
  transition: transform 260ms var(--sh-ease), box-shadow 260ms var(--sh-ease);
}

.sh .sh__thumb-label {
  display: flex;
  align-items: center;
  /* Centred so it reads as a caption for the tile. Left-aligned under a
     half-width tile it just looked stranded at one corner. */
  justify-content: center;
  gap: 7px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--sh-text);
  opacity: 0.82;
  transition: opacity 200ms var(--sh-ease);
}

.sh .sh__thumb:hover .sh__thumb-media,
.sh .sh__thumb:focus-visible .sh__thumb-media {
  transform: translateY(-3px);
  box-shadow: 0 26px 52px -20px rgba(0, 0, 0, 0.85);
}

.sh .sh__thumb:hover .sh__thumb-play,
.sh .sh__thumb:focus-visible .sh__thumb-play {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 0 0 2px rgba(var(--sh-tertiary-rgb), 0.9),
              0 0 2rem rgba(89, 216, 255, 0.85);
}

.sh .sh__thumb:hover .sh__thumb-label,
.sh .sh__thumb:focus-visible .sh__thumb-label { opacity: 1; }

.sh .sh__thumb:focus-visible {
  outline: 3px solid rgb(var(--sh-tertiary-rgb));
  outline-offset: 6px;
  border-radius: 6px;
}

/* ---------- 8. BUTTONS -------------------------------------- */
/* Layout of the button row (module-owned).                       */
.sh .sh__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--buttons-gap-y, 0.5rem) var(--buttons-gap-x, 1rem);
  align-items: center;
}

.sh--stacked.sh--align-center .sh__actions { justify-content: center; }
.sh--stacked.sh--align-right  .sh__actions { justify-content: flex-end; }

/* -------------------------------------------------------------
   Sticky theme button system, ported verbatim from
   template_styles.min.css + template_child.min.css.

   Wrapped in :where() so it carries ZERO specificity: on sticky.io
   the theme's own .button rules always win and this never fights
   them. Off-site (preview, another theme) it renders identically.
   ------------------------------------------------------------- */
@property --sh-gradient-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 105deg;
}

@keyframes sh-rotation {
  0%  { --sh-gradient-angle: 105deg; }
  to  { --sh-gradient-angle: 465deg; }
}

:where(.sh .button) {
  --btn-accent-color: var(--color-accent, 0, 116, 255);
  --btn-accent-contrast-color: var(--color-accent-contrast, 255, 255, 255);
  --btn-accent: rgb(var(--btn-accent-color));
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: var(--btn-spacing-y, 17px) var(--btn-spacing-x, 41px);
  border-radius: var(--btn-radius, 100px);
  background: var(--btn-accent);
  border-color: rgb(var(--btn-accent-color));
  color: rgb(var(--btn-accent-contrast-color));
  outline-color: rgb(var(--btn-accent-color));
  box-shadow: var(--btn-shadow, 0 0 0 0 transparent);
  font: var(--btn-font, normal normal 16px/1 var(--btn-font-family, "DM Sans"));
  line-height: 1;
  letter-spacing: var(--btn-letter-spacing, 0em);
  text-align: center;
  text-decoration: var(--btn-text-decoration, none);
  text-transform: var(--btn-text-transform, none);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

:where(.sh .button:hover) {
  opacity: 1;
  outline: 2px solid rgb(var(--btn-accent-color), 0.5);
  outline-offset: 2px;
}

:where(.sh .button:focus) { text-decoration: none; }
:where(.sh .button:focus-visible) { outline-offset: 3px; }

/* Sizes */
:where(.sh .button--small) {
  --btn-spacing-x: var(--btn-sm-spacing-x, 30px);
  --btn-spacing-y: var(--btn-sm-spacing-y, 14px);
  font-size: var(--btn-sm-font-size, 14px);
}

:where(.sh .button--large) {
  --btn-spacing-x: var(--btn-lg-spacing-x, 50px);
  --btn-spacing-y: var(--btn-lg-spacing-y, 18px);
  font-size: var(--btn-lg-font-size, 18px);
}

:where(.sh .button--larger) {
  --btn-spacing-x: var(--btn-xl-spacing-x, 56px);
  --btn-spacing-y: var(--btn-xl-spacing-y, 20px);
  font-size: var(--btn-xl-font-size, 18px);
}

:where(.sh .button--full-width) { flex-grow: 1; width: 100%; }

/* Colour variants */
:where(.sh .button--primary) {
  --btn-accent-color: var(--color-primary, 0, 116, 255);
  --btn-accent-contrast-color: var(--color-primary-contrast, 255, 255, 255);
}

:where(.sh .button--secondary) {
  --btn-accent-color: var(--color-secondary, 193, 226, 51);
  --btn-accent-contrast-color: var(--color-secondary-contrast, 0, 24, 43);
}

:where(.sh .button--tertiary) {
  --btn-accent-color: var(--color-tertiary, 148, 205, 255);
  --btn-accent-contrast-color: var(--color-tertiary-contrast, 0, 24, 43);
}

:where(.sh .button--black) {
  --btn-accent-color: var(--color-black, 0, 24, 43);
  --btn-accent-contrast-color: var(--color-white, 255, 255, 255);
}

:where(.sh .button--dark) {
  --btn-accent-color: var(--color-dark, 17, 66, 97);
  --btn-accent-contrast-color: var(--color-white, 255, 255, 255);
}

:where(.sh .button--light) {
  --btn-accent-color: var(--color-light, 232, 246, 255);
  --btn-accent-contrast-color: var(--color-black, 0, 24, 43);
}

:where(.sh .button--white) {
  --btn-accent-color: var(--color-white, 255, 255, 255);
  --btn-accent-contrast-color: var(--color-black, 0, 24, 43);
}

:where(.sh .button--foreground) {
  --btn-accent-color: var(--color-foreground, 0, 24, 43);
  --btn-accent-contrast-color: var(--color-background, 232, 246, 255);
}

/* Outlined */
:where(.sh .button--outlined) {
  background: transparent;
  box-shadow: inset 0 0 0 var(--btn-border-width, 2px) rgb(var(--btn-accent-color)),
              var(--btn-shadow, 0 0 0 0 transparent);
  color: rgb(var(--btn-accent-color));
}

:where(.sh .button--outlined:hover),
:where(.sh .button--outlined:focus) {
  background: var(--btn-accent);
  color: rgb(var(--btn-accent-contrast-color));
}

/* Unstyled / text link */
:where(.sh .button--unstyled) {
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: rgb(var(--btn-accent-color));
}

:where(.sh .button--unstyled:hover) {
  outline: none;
  text-decoration: underline;
  color: rgb(var(--btn-accent-color), 0.85);
}

/* Primary glow — template_child.min.css .button--primary */
:where(.sh .button--primary:not(.button--unstyled)) {
  --btn-glow-width: 4px;
  --btn-accent-color: var(--color-black, 0, 24, 43);
  --btn-accent-contrast-color: var(--color-white, 255, 255, 255);
  position: relative;
  border: var(--btn-glow-width) solid transparent;
  padding-block: calc(var(--btn-spacing-y, 17px) - var(--btn-glow-width) / 2);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image:
    linear-gradient(rgb(var(--btn-accent-color)), rgb(var(--btn-accent-color))),
    conic-gradient(from var(--sh-gradient-angle),
      #0074ff, #5bc9ff, #9ddfff, #89d8ff, #0074ff);
  box-shadow: inset 0 10px 6px -5px rgba(137, 216, 255, 0.56),
              0 0 1rem rgba(89, 216, 255, 0);
  animation: sh-rotation 2.5s linear infinite paused;
  transition: all 0.2s ease-in-out;
}

:where(.sh .button--primary:not(.button--unstyled):hover),
:where(.sh .button--primary:not(.button--unstyled)[hovering]) {
  outline: none;
  animation-play-state: running;
  box-shadow: inset 0 10px 6px -5px rgba(137, 216, 255, 0.56),
              0 0 2rem rgba(89, 216, 255, 0.75);
}

:where(.sh .button--primary:not(.button--unstyled).button--outlined) {
  background-image:
    linear-gradient(rgb(var(--color-background, 232, 246, 255)),
                    rgb(var(--color-background, 232, 246, 255))),
    conic-gradient(from var(--sh-gradient-angle),
      #0074ff, #5bc9ff, #9ddfff, #89d8ff, #0074ff);
}

:where(.sh .button--primary:not(.button--unstyled).button--outlined:hover) {
  color: rgb(var(--btn-accent-color));
  box-shadow: 0 0 2rem rgba(89, 216, 255, 0.75);
}

/* Arrow */
:where(.sh .button--arrow) {
  --arrow-width: 1.3em;
  --arrow-thickness: 2px;
  --arrow-head-size: 8px;
  position: relative;
  padding-right: calc(var(--arrow-width) + var(--btn-spacing-x, 41px) + 1em);
}

:where(.sh .button--arrow .button__text) {
  display: block;
  position: relative;
  transition: transform 0.2s ease-in-out;
}

:where(.sh .button__arrow::before),
:where(.sh .button__arrow::after) {
  content: "";
  display: block;
  position: absolute;
  right: var(--btn-spacing-x, 41px);
  top: 50%;
  transition: transform 0.2s ease-in-out;
}

:where(.sh .button__arrow::before) {
  width: var(--arrow-width, 1.3em);
  height: var(--arrow-thickness);
  background-color: currentColor;
  transform: translateY(-50%);
  transform-origin: right center;
}

:where(.sh .button__arrow::after) {
  width: var(--arrow-head-size);
  height: var(--arrow-head-size);
  border: solid;
  border-width: var(--arrow-thickness) var(--arrow-thickness) 0 0;
  transform: translateY(-50%) rotate(45deg);
  transform-origin: center;
}

:where(.sh .button--arrow:hover .button__text) { transform: translateX(10px); }
:where(.sh .button--arrow:hover .button__arrow::before) { transform: translateY(-50%) scaleX(0.8); }

/* On a dark hero, flip the theme's foreground token the way a dark
   theme section does, so button--foreground reads as white.
   --color-background is deliberately NOT remapped: .button--primary
   .button--outlined fills with it, and the pale fill + ink text is
   exactly the pairing used in the sticky.io hero. */
.sh--theme-dark { --color-foreground: 255, 255, 255; }

/* ---------- 9. CONTROLS (skip / replay) ---------------------- */
.sh .sh__controls {
  position: absolute;
  z-index: 7;
  right: clamp(16px, 3vw, 40px);
  bottom: clamp(16px, 3vw, 34px);
  display: flex;
  gap: 10px;
}

.sh .sh__ctrl {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: 100px;
  font-family: var(--sh-btn-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
  background: rgba(var(--sh-ink-rgb), 0.5);
  box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, 0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 500ms var(--sh-ease),
              transform 500ms var(--sh-ease),
              background-color 200ms ease-in-out,
              box-shadow 200ms ease-in-out,
              visibility 0s linear 500ms;
}

.sh .sh__ctrl:hover,
.sh .sh__ctrl:focus-visible {
  background: rgba(var(--sh-ink-rgb), 0.78);
  box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, 0.6),
              0 0 1.4rem rgba(89, 216, 255, 0.5);
}

.sh .sh__ctrl:focus-visible { outline: 2px solid rgb(var(--sh-tertiary-rgb)); outline-offset: 3px; }
.sh .sh__ctrl svg { flex: 0 0 auto; }

/* Sound toggle — visible in every phase, not just one */
.sh .sh__ctrl--sound .sh__ico--on,
.sh .sh__ctrl--sound .sh__lbl--on { display: none; }

.sh.is-sound-on .sh__ctrl--sound .sh__ico--off,
.sh.is-sound-on .sh__ctrl--sound .sh__lbl--off { display: none; }

.sh.is-sound-on .sh__ctrl--sound .sh__ico--on,
.sh.is-sound-on .sh__ctrl--sound .sh__lbl--on { display: inline; }

.sh.is-sound-on .sh__ctrl--sound {
  color: rgb(var(--sh-tertiary-rgb));
  box-shadow: inset 0 0 0 1px rgba(var(--sh-tertiary-rgb), 0.75),
              0 0 1.2rem rgba(89, 216, 255, 0.45);
}

/* No sequencing (intro off) → the sound pill is still available */
.sh:not(.sh--seq) .sh__ctrl--sound,
.sh--seq.is-loading .sh__ctrl--sound,
.sh--seq.is-intro .sh__ctrl--sound,
.sh--seq.is-revealed .sh__ctrl--sound {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.sh--seq.is-loading .sh__ctrl--sound { opacity: 0; visibility: hidden; }

.sh--seq.is-intro .sh__ctrl--skip,
.sh--seq.is-revealed .sh__ctrl--reset {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s, 0s, 0s, 0s, 0s;
}

.sh--seq.is-revealed .sh__ctrl--reset { transition-delay: 700ms; }

/* When the overlay carries a thumbnail tile, that tile IS the replay
   affordance and the pill would be a second one saying the same thing.
   The tile is hidden in the mobile stack though (see 11), so the pill
   comes back there — otherwise a skipped intro leaves no way to replay. */
.sh--has-thumb .sh__ctrl--reset { display: none; }

/* ---------- 10. SEQUENCE ------------------------------------- */
/* No JS / intro disabled → everything is visible by default.    */
.sh--seq .sh__scrim {
  opacity: 0;
  transition: opacity 1000ms var(--sh-ease);
}

.sh--seq.is-revealed .sh__scrim { opacity: 1; }

.sh--seq .sh__inner {
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms var(--sh-ease);
}

.sh--seq.is-revealed .sh__inner { opacity: 1; pointer-events: auto; }

.sh--seq .sh__panel {
  opacity: 0;
  transform: translateY(30px) scale(0.985);
  transition: opacity 800ms var(--sh-ease), transform 900ms var(--sh-ease);
}

.sh--seq.is-revealed .sh__panel { opacity: 1; transform: none; }

.sh--seq .sh__col > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--sh-ease), transform 700ms var(--sh-ease);
}

.sh--seq.is-revealed .sh__col > * { opacity: 1; transform: none; }

/* Stagger */
.sh--seq.is-revealed .sh__col--a > *:nth-child(1) { transition-delay: 160ms; }
.sh--seq.is-revealed .sh__col--a > *:nth-child(2) { transition-delay: 260ms; }
.sh--seq.is-revealed .sh__col--a > *:nth-child(3) { transition-delay: 360ms; }
.sh--seq.is-revealed .sh__col--a > *:nth-child(4) { transition-delay: 460ms; }
.sh--seq.is-revealed .sh__col--a > *:nth-child(5) { transition-delay: 560ms; }
.sh--seq.is-revealed .sh__col--b > *:nth-child(1) { transition-delay: 320ms; }
.sh--seq.is-revealed .sh__col--b > *:nth-child(2) { transition-delay: 420ms; }
.sh--seq.is-revealed .sh__col--b > *:nth-child(3) { transition-delay: 520ms; }

/* Scroll cue only once the overlay has landed */
.sh .sh__cue {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  width: 26px;
  height: 42px;
  border-radius: 14px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.sh .sh__cue span {
  position: absolute;
  left: 50%;
  top: 9px;
  width: 3px;
  height: 8px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.9);
  animation: sh-cue 1.9s var(--sh-ease) infinite;
}

@keyframes sh-cue {
  0%   { transform: translateY(0);    opacity: 0; }
  25%  { opacity: 1; }
  75%  { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(14px); opacity: 0; }
}

.sh--seq .sh__cue { opacity: 0; transition: opacity 600ms var(--sh-ease); }
.sh--seq.is-revealed .sh__cue { opacity: 1; transition-delay: 900ms; }

/* ---------- 11. RESPONSIVE ----------------------------------- */
@media (max-width: 1200px) {
  /* Once the columns wrap the headline needs a little air under it.
     Not when a thumbnail is present — there the headline already sits
     directly above the copy and keeps its full margin. */
  .sh--split:not(.sh--has-thumb) .sh__headline { margin-bottom: 8px; }
}

@media (max-width: 767px) {
  .sh {
    min-height: 540px;
    max-height: none;
  }
  .sh .sh__headline { letter-spacing: -0.025em; }
  .sh .sh__subhead  { margin-bottom: 26px; }
  .sh .sh__actions  { gap: 12px; }
  .sh .sh__actions .button { flex: 1 1 100%; }
  .sh .sh__actions .button--unstyled { flex: 0 0 auto; }
  .sh .sh__cue      { display: none; }
  .sh .sh__controls { right: 14px; bottom: 14px; }
  .sh .sh__ctrl     { padding: 9px 15px; font-size: 13px; }
  .sh--panel .sh__panel { padding: 20px 18px; border-width: 0.4rem; }
}

/* ---------- NARROW SCREENS ----------------------------------
   A 16:9 frame cover-cropped into a tall box shows only its middle
   third. That's fine for atmospheric footage and ruinous for a screen
   recording, so below 1024px the module can change strategy entirely.

   stack   : video sits on top at its true 16:9, copy below on ink.
             Nothing is cropped and the copy is legible without a scrim.
   contain : video is letterboxed inside the hero, copy stays over it.
   cover   : crop to fill, as on desktop. Use the focal point fields
             to choose which part of the frame survives.

   Fixed at 1023px so portrait tablets are covered too — they crop just
   as badly as phones.
   ------------------------------------------------------------- */
@media (max-width: 1023px) {

  /* ---- stack ---- */
  .sh--m-stack {
    display: block;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .sh--m-stack .sh__stage { display: block; }

  .sh--m-stack .sh__media {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: var(--sh-ar);
  }

  .sh--m-stack .sh__frame {
    top: 50%;
    left: 50%;
    width: 100cqw;
    height: calc(100cqw / var(--sh-ar));
    min-width: 0;
    min-height: 0;
  }

  .sh--m-stack .sh__scrim,
  .sh--m-stack .sh__grain { display: none; }

  .sh--m-stack .sh__loader {
    inset: 0 0 auto 0;
    height: auto;
    aspect-ratio: var(--sh-ar);
  }

  .sh--m-stack.sh--panel .sh__panel {
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }

  .sh--m-stack .sh__inner {
    position: relative;
    padding: clamp(30px, 7vw, 46px) var(--site-gutter, 20px) clamp(38px, 9vw, 58px);
    background: rgb(var(--sh-scrim));
  }

  .sh--m-stack .sh__controls {
    top: calc(100vw / var(--sh-ar) - 58px);
    bottom: auto;
  }

  .sh--m-stack .sh__cue { display: none; }
  .sh--m-stack .sh__col--thumb { display: none; }
  /* Tile is gone here, so the pill is the only replay affordance. */
  .sh--m-stack.sh--has-thumb .sh__ctrl--reset { display: inline-flex; }

  /* No Skip here. The copy is already sitting in full view below the
     video rather than waiting behind it, so there is nothing to skip to
     — the button would only stop the video early for no gain. */
  .sh--m-stack .sh__ctrl--skip { display: none; }

  /* Replay is the one action, and it must not hold a slot before the
     video has finished. */
  .sh--m-stack.sh--seq:not(.is-revealed) .sh__ctrl--reset { display: none; }
  /* With the thumbnail hidden the copy is the only column — let it fill
     the plate instead of stopping at its desktop cap. */
  .sh--m-stack.sh--has-thumb .sh__col--a,
  .sh--m-stack.sh--split .sh__col--a { max-width: none; }

  /* The video is never covered here, so the copy has nothing to wait
     for — show it immediately. Better for LCP and for anyone who
     lands mid-scroll. */
  .sh--m-stack.sh--seq .sh__inner  { opacity: 1; pointer-events: auto; }
  .sh--m-stack.sh--seq .sh__panel  { opacity: 1; transform: none; }
  .sh--m-stack.sh--seq .sh__col > * { opacity: 1; transform: none; }

  /* ---- contain ---- */
  .sh--m-contain .sh__frame {
    width: min(100cqw, calc(100cqh * var(--sh-ar)));
    height: min(calc(100cqw / var(--sh-ar)), 100cqh);
    min-width: 0;
    min-height: 0;
  }

  /* ---- cover: re-assert, in case the global fit is contain ---- */
  .sh--m-cover .sh__frame {
    width: 100cqw;
    height: calc(100cqw / var(--sh-ar));
    min-width: calc(100cqh * var(--sh-ar));
    min-height: 100cqh;
  }
}

/* ---------- REDUCED MOTION ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sh *,
  .sh *::before,
  .sh *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  .sh .sh__cue span { animation: none; }
}

/* Keep HubSpot drag handles clickable above the video layer */
body.hs-inline-edit .sh .sh__frame { pointer-events: none; }
body.hs-inline-edit .sh .sh__loader { display: none !important; }