/*!
  * Milligram v1.4.1
  * https://milligram.io
  *
  * Copyright (c) 2020 CJ Patoilo
  * Licensed under the MIT license
 */

*,
*:after,
*:before {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

body {
  color: #606c76;
  font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-size: 1.6em;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.6;
}

blockquote {
  border-left: 0.3rem solid #d1d1d1;
  margin-left: 0;
  margin-right: 0;
  padding: 1rem 1.5rem;
}

blockquote *:last-child {
  margin-bottom: 0;
}

.button,
button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
  background-color: #9b4dca;
  border: 0.1rem solid #9b4dca;
  border-radius: .4rem;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 700;
  height: 3.8rem;
  letter-spacing: .1rem;
  line-height: 3.8rem;
  padding: 0 3.0rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.button:focus, .button:hover,
button:focus,
button:hover,
input[type='button']:focus,
input[type='button']:hover,
input[type='reset']:focus,
input[type='reset']:hover,
input[type='submit']:focus,
input[type='submit']:hover {
  background-color: #606c76;
  border-color: #606c76;
  color: #fff;
  outline: 0;
}

.button[disabled],
button[disabled],
input[type='button'][disabled],
input[type='reset'][disabled],
input[type='submit'][disabled] {
  cursor: default;
  opacity: .5;
}

.button[disabled]:focus, .button[disabled]:hover,
button[disabled]:focus,
button[disabled]:hover,
input[type='button'][disabled]:focus,
input[type='button'][disabled]:hover,
input[type='reset'][disabled]:focus,
input[type='reset'][disabled]:hover,
input[type='submit'][disabled]:focus,
input[type='submit'][disabled]:hover {
  background-color: #9b4dca;
  border-color: #9b4dca;
}

.button.button-outline,
button.button-outline,
input[type='button'].button-outline,
input[type='reset'].button-outline,
input[type='submit'].button-outline {
  background-color: transparent;
  color: #9b4dca;
}

.button.button-outline:focus, .button.button-outline:hover,
button.button-outline:focus,
button.button-outline:hover,
input[type='button'].button-outline:focus,
input[type='button'].button-outline:hover,
input[type='reset'].button-outline:focus,
input[type='reset'].button-outline:hover,
input[type='submit'].button-outline:focus,
input[type='submit'].button-outline:hover {
  background-color: transparent;
  border-color: #606c76;
  color: #606c76;
}

.button.button-outline[disabled]:focus, .button.button-outline[disabled]:hover,
button.button-outline[disabled]:focus,
button.button-outline[disabled]:hover,
input[type='button'].button-outline[disabled]:focus,
input[type='button'].button-outline[disabled]:hover,
input[type='reset'].button-outline[disabled]:focus,
input[type='reset'].button-outline[disabled]:hover,
input[type='submit'].button-outline[disabled]:focus,
input[type='submit'].button-outline[disabled]:hover {
  border-color: inherit;
  color: #9b4dca;
}

.button.button-clear,
button.button-clear,
input[type='button'].button-clear,
input[type='reset'].button-clear,
input[type='submit'].button-clear {
  background-color: transparent;
  border-color: transparent;
  color: #9b4dca;
}

.button.button-clear:focus, .button.button-clear:hover,
button.button-clear:focus,
button.button-clear:hover,
input[type='button'].button-clear:focus,
input[type='button'].button-clear:hover,
input[type='reset'].button-clear:focus,
input[type='reset'].button-clear:hover,
input[type='submit'].button-clear:focus,
input[type='submit'].button-clear:hover {
  background-color: transparent;
  border-color: transparent;
  color: #606c76;
}

.button.button-clear[disabled]:focus, .button.button-clear[disabled]:hover,
button.button-clear[disabled]:focus,
button.button-clear[disabled]:hover,
input[type='button'].button-clear[disabled]:focus,
input[type='button'].button-clear[disabled]:hover,
input[type='reset'].button-clear[disabled]:focus,
input[type='reset'].button-clear[disabled]:hover,
input[type='submit'].button-clear[disabled]:focus,
input[type='submit'].button-clear[disabled]:hover {
  color: #9b4dca;
}

code {
  background: #f4f5f6;
  border-radius: .4rem;
  font-size: 86%;
  margin: 0 .2rem;
  padding: .2rem .5rem;
  white-space: nowrap;
}

pre {
  background: #f4f5f6;
  border-left: 0.3rem solid #9b4dca;
  overflow-y: hidden;
}

pre > code {
  border-radius: 0;
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre;
}

hr {
  border: 0;
  border-top: 0.1rem solid #f4f5f6;
  margin: 3.0rem 0;
}

input[type='color'],
input[type='date'],
input[type='datetime'],
input[type='datetime-local'],
input[type='email'],
input[type='month'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='url'],
input[type='week'],
input:not([type]),
textarea,
select {
  -webkit-appearance: none;
  background-color: transparent;
  border: 0.1rem solid #d1d1d1;
  border-radius: .4rem;
  box-shadow: none;
  box-sizing: inherit;
  height: 3.8rem;
  padding: .6rem 1.0rem .7rem;
  width: 100%;
}

input[type='color']:focus,
input[type='date']:focus,
input[type='datetime']:focus,
input[type='datetime-local']:focus,
input[type='email']:focus,
input[type='month']:focus,
input[type='number']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='tel']:focus,
input[type='text']:focus,
input[type='url']:focus,
input[type='week']:focus,
input:not([type]):focus,
textarea:focus,
select:focus {
  border-color: #9b4dca;
  outline: 0;
}

select {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%23d1d1d1" d="M0,0l6,8l6-8"/></svg>') center right no-repeat;
  padding-right: 3.0rem;
}

select:focus {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%239b4dca" d="M0,0l6,8l6-8"/></svg>');
}

select[multiple] {
  background: none;
  height: auto;
}

textarea {
  min-height: 6.5rem;
}

label,
legend {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: .5rem;
}

fieldset {
  border-width: 0;
  padding: 0;
}

input[type='checkbox'],
input[type='radio'] {
  display: inline;
}

.label-inline {
  display: inline-block;
  font-weight: normal;
  margin-left: .5rem;
}

.container {
  margin: 0 auto;
  max-width: 129.0rem;
  padding: 0 2.0rem;
  position: relative;
  width: 100%;
}

.row {
  display: flex;
  flex-direction: column;
  padding: 0;
  width: 100%;
}

.row.row-no-padding {
  padding: 0;
}

.row.row-no-padding > .column {
  padding: 0;
}

.row.row-wrap {
  flex-wrap: wrap;
}

.row.row-top {
  align-items: flex-start;
}

.row.row-bottom {
  align-items: flex-end;
}

.row.row-center {
  align-items: center;
}

.row.row-stretch {
  align-items: stretch;
}

.row.row-baseline {
  align-items: baseline;
}

.row .column {
  display: block;
  flex: 1 1 auto;
  margin-left: 0;
  max-width: 100%;
  width: 100%;
}

.row .column.column-offset-10 {
  margin-left: 10%;
}

.row .column.column-offset-20 {
  margin-left: 20%;
}

.row .column.column-offset-25 {
  margin-left: 25%;
}

.row .column.column-offset-33, .row .column.column-offset-34 {
  margin-left: 33.3333%;
}

.row .column.column-offset-40 {
  margin-left: 40%;
}

.row .column.column-offset-50 {
  margin-left: 50%;
}

.row .column.column-offset-60 {
  margin-left: 60%;
}

.row .column.column-offset-66, .row .column.column-offset-67 {
  margin-left: 66.6666%;
}

.row .column.column-offset-75 {
  margin-left: 75%;
}

.row .column.column-offset-80 {
  margin-left: 80%;
}

.row .column.column-offset-90 {
  margin-left: 90%;
}

.row .column.column-10 {
  flex: 0 0 10%;
  max-width: 10%;
}

.row .column.column-20 {
  flex: 0 0 20%;
  max-width: 20%;
}

.row .column.column-25 {
  flex: 0 0 25%;
  max-width: 25%;
}

.row .column.column-33, .row .column.column-34 {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
}

.row .column.column-40 {
  flex: 0 0 40%;
  max-width: 40%;
}

.row .column.column-50 {
  flex: 0 0 50%;
  max-width: 50%;
}

.row .column.column-60 {
  flex: 0 0 60%;
  max-width: 60%;
}

.row .column.column-66, .row .column.column-67 {
  flex: 0 0 66.6666%;
  max-width: 66.6666%;
}

.row .column.column-75 {
  flex: 0 0 75%;
  max-width: 75%;
}

.row .column.column-80 {
  flex: 0 0 80%;
  max-width: 80%;
}

.row .column.column-90 {
  flex: 0 0 90%;
  max-width: 90%;
}

.row .column .column-top {
  align-self: flex-start;
}

.row .column .column-bottom {
  align-self: flex-end;
}

.row .column .column-center {
  align-self: center;
}

@media (min-width: 40rem) {
  .row {
    flex-direction: row;
    margin-left: -1.0rem;
    width: calc(100% + 2.0rem);
  }
  .row .column {
    margin-bottom: inherit;
    padding: 0 1.0rem;
  }
}

a {
  color: #9b4dca;
  text-decoration: none;
}

a:focus, a:hover {
  color: #606c76;
}

dl,
ol,
ul {
  list-style: none;
  margin-top: 0;
  padding-left: 0;
}

dl dl,
dl ol,
dl ul,
ol dl,
ol ol,
ol ul,
ul dl,
ul ol,
ul ul {
  font-size: 90%;
  margin: 1.5rem 0 1.5rem 3.0rem;
}

ol {
  list-style: decimal inside;
}

ul {
  list-style: circle inside;
}

.button,
button,
dd,
dt,
li {
  margin-bottom: 1.0rem;
}

fieldset,
input,
select,
textarea {
  margin-bottom: 1.5rem;
}

blockquote,
dl,
figure,
form,
ol,
p,
pre,
table,
ul {
  margin-bottom: 2.5rem;
}

table {
  border-spacing: 0;
  display: block;
  overflow-x: auto;
  text-align: left;
  width: 100%;
}

td,
th {
  border-bottom: 0.1rem solid #e1e1e1;
  padding: 1.2rem 1.5rem;
}

td:first-child,
th:first-child {
  padding-left: 0;
}

td:last-child,
th:last-child {
  padding-right: 0;
}

@media (min-width: 40rem) {
  table {
    display: table;
    overflow-x: initial;
  }
}

b,
strong {
  font-weight: bold;
}

p {
  margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 300;
  letter-spacing: -.1rem;
  margin-bottom: 2.0rem;
  margin-top: 0;
}

h1 {
  font-size: 4.6rem;
  line-height: 1.2;
}

h2 {
  font-size: 3.6rem;
  line-height: 1.25;
}

h3 {
  font-size: 2.8rem;
  line-height: 1.3;
}

h4 {
  font-size: 2.2rem;
  letter-spacing: -.08rem;
  line-height: 1.35;
}

h5 {
  font-size: 1.8rem;
  letter-spacing: -.05rem;
  line-height: 1.5;
}

h6 {
  font-size: 1.6rem;
  letter-spacing: 0;
  line-height: 1.4;
}

img {
  max-width: 100%;
}

.clearfix:after {
  clear: both;
  content: ' ';
  display: table;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

/*# sourceMappingURL=milligram.css.map */

/* ============================================================ */
/* Investigating Myeloma — landing page styles                  */
/* ============================================================ */

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}

a[href],
button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
.button {
  cursor: pointer;
}

/* Smooth transitions for hover/focus state changes on interactive elements.
   Disabled for users with prefers-reduced-motion via the @media block at the
   end of this file. */
a,
button,
.button,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"] {
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    outline-color 180ms ease,
    opacity 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease,
    text-decoration-color 180ms ease;
}

/* Visible focus ring. The plain `:focus` rule is the fallback for
   browsers without `:focus-visible`; the `:focus:not(:focus-visible)`
   suppressor below cancels the ring for pointer-driven focus. */
:focus {
  outline: 3px solid #24415B;
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

.hero :focus,
.quote-section :focus,
.video-modal :focus {
  outline-color: #B9C762;
}

[tabindex="-1"]:focus {
  outline: none;
}

.anchor-target {
  display: block;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  visibility: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  background: #24415B;
  color: #fff;
  font-family: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.05rem;
  text-decoration: none;
  padding: 1.2rem 2rem;
  border-radius: 0.6rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  z-index: 10000;
  opacity: 0;
  transform: translateY(calc(-100% - 1.2rem));
  transition: transform 180ms ease, opacity 180ms ease;
}

.skip-link:focus {
  opacity: 1;
  transform: translateY(0);
  outline: 3px solid #B9C762;
  outline-offset: 2px;
  color: #fff;
  background: #24415B;
}

.us-banner {
  background-color: #24415B;
  color: #fff;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  width: 100%;
  margin: 0;
}

.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 680 / 380;
  background-color: #24415B;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Still-image fallback: shown immediately for JS-off users (no video
   plays); JS toggles .is-video-fallback on player error or after a
   load timeout so JS-on users don't see a flash of the still before
   the video starts painting. */
.no-js .hero,
.hero.is-video-fallback {
  background-image: url('../images/loop-thumbnail.jpg');
}

.hero__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 540px;
  background: linear-gradient(180deg, rgba(36, 65, 91, 0) 0%, rgba(36, 65, 91, 0.499999) 25%, #000000 100%);
  pointer-events: none;
  z-index: 1;
}

/* The looping silent video sits at z-index 0 on top of .hero. The
   still-image fallback on .hero is gated by .is-video-fallback
   (added by JS on player error / load timeout) and by .no-js for
   JS-off users, so the still doesn't flash before the video paints. */
.hero__bg-video {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Stay transparent until the player paints frames, so the still
     image underneath shows through during the load window and any
     failure state. */
  background: transparent;
  /* Fade in once the player fires `playing` (JS adds .is-video-ready
     on .hero) so the video doesn't pop in over the solid color. */
  opacity: 0;
  transition: opacity 200ms ease;
}

.hero.is-video-ready .hero__bg-video {
  opacity: 1;
}

/* The Brightcove player wraps the underlying <video> in a few divs.
   Force the inner <video> to cover the hero area and stay
   transparent so the .hero still-image fallback shows through if
   the source never paints. */
.hero__bg-video video,
.hero__bg-video .vjs-tech {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  background: transparent !important;
}

/* Hide every player UI element so the video reads as a silent
   ambient background — including caption / subtitle rendering, which
   Brightcove can paint in a few different containers depending on the
   plugin config. The script in scripts/hero-bg-video.js also disables
   the text tracks at the player level so captions never enter the DOM
   in the first place. */
.hero__bg-video .vjs-big-play-button,
.hero__bg-video .vjs-control-bar,
.hero__bg-video .vjs-loading-spinner,
.hero__bg-video .vjs-poster,
.hero__bg-video .vjs-modal-dialog,
.hero__bg-video .vjs-error-display,
.hero__bg-video .vjs-text-track-display,
.hero__bg-video .vjs-text-track,
.hero__bg-video .vjs-captions-display,
.hero__bg-video .vjs-subtitles-display,
.hero__bg-video [class*="text-track"],
.hero__bg-video [class*="caption"] {
  display: none !important;
}

.hero__bg-video video::cue {
  display: none !important;
}

.hero__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero__logo {
  position: absolute;
  top: 34px;
  left: 2rem;
  z-index: 3;
}

.hero__logo img {
  display: block;
  width: 220px;
  height: auto;
}

.hero__content {
  padding-bottom: 48px;
  max-width: 700px;
  color: #fff;
}

.hero__eyebrow {
  font-weight: 700;
  font-style: normal;
  font-size: 2.2rem;
  line-height: 130%;
  letter-spacing: 0.05rem;
  margin: 0 0 16px;
  padding-bottom: 4px;
  border-bottom: 2px solid #fff;
  display: inline-block;
}

.hero__title {
  font-family: 'DM Serif Display', 'Times New Roman', Times, serif;
  font-weight: 400;
  font-style: normal;
  font-size: 4.3rem;
  line-height: 120%;
  letter-spacing: 0.05rem;
  color: #fff;
  margin: 0 0 32px;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.2);
  border: 3px solid #fff;
  border-radius: 33px;
  height: 86px;
  padding: 0 28px 0 20px;
  margin: 0;
  color: #fff;
  font-family: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.9rem;
  line-height: 150%;
  letter-spacing: 0.05rem;
  text-decoration: none;
  text-transform: none;
  white-space: normal;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.hero__cta:hover,
.hero__cta:focus {
  background: rgba(255, 255, 255, 0.3);
  border-color: #fff;
  color: #fff;
}

.hero__cta-icon {
  width: 4.95rem;
  height: 4.95rem;
  border-radius: 50%;
  background: #fff;
  color: #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero__cta-icon svg {
  width: 14px;
  height: 14px;
}

/* "View Transcript" trigger. Opens the same hero modal as the main CTA
   but with the .is-no-transcript class removed so the transcript pane
   is shown. Hidden in the .no-js path (the JS-off fallback dialog
   already exposes the transcript on its own). */
.hero__transcript-trigger {
  position: absolute;
  bottom: 60px;
  /* Sit 30px from the viewport's right edge. The button is inside
     .hero__inner (a centered max-1290px container), so on viewports
     wider than that we extend rightward by the gutter to land at the
     same absolute position regardless of how wide the screen is. */
  right: calc(30px - max(0px, (100vw - 129rem) / 2));
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  color: #fff;
  cursor: pointer;
  font-family: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.9rem;
  line-height: 150%;
  letter-spacing: 0.05rem;
  text-transform: none;
  -webkit-appearance: none;
  appearance: none;
}

.hero__transcript-trigger:hover,
.hero__transcript-trigger:focus {
  background: transparent;
  color: #fff;
  text-decoration: underline;
}

.hero__transcript-trigger-icon {
  width: 25px;
  height: 30px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.hero__transcript-trigger-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.no-js .hero__transcript-trigger {
  display: none;
}

/* JS-on / JS-off fallback toggle.
   <html> starts with .no-js; scripts/no-js-flip.js swaps it to .js
   synchronously in <head>. CSS picks which Watch CTA renders based on
   that class, so JS-on users never see the fallback paint and JS-off
   users get a real working pure-CSS dialog. Both DOM nodes are always
   in the document — only the visible one changes. */
.js .hero__cta--fallback {
  display: none;
}
.no-js .hero__cta--js {
  display: none;
}

.js-fallback-dialog {
  display: none;
}

/* Defensive: with JS enabled the dialog should NEVER appear, even if the
   page is loaded with the matching hash already in the URL (deep link,
   browser cache, history navigation). */
.js .js-fallback-dialog:target {
  display: none;
}

.js-fallback-dialog:target {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 1100;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.js-fallback-dialog__backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: rgba(36, 65, 91, 0.85);
  text-decoration: none;
}

.js-fallback-dialog__panel {
  position: relative;
  background: #fff;
  color: #24415B;
  max-width: 640px;
  width: 100%;
  max-height: calc(100vh - 4.8rem);
  padding: 4rem 3.2rem 3.2rem;
  border-radius: 28px;
  box-shadow: 0 0 10px 6px rgba(0, 0, 0, 0.25);
  text-align: center;
  display: flex;
  flex-direction: column;
}

.js-fallback-dialog__title {
  font-family: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 130%;
  letter-spacing: 0.05rem;
  color: #24415B;
  margin: 0 0 1.2rem;
}

.js-fallback-dialog__body {
  font-family: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 150%;
  letter-spacing: 0.05rem;
  color: #24415B;
  margin: 0 0 2.4rem;
}

.js-fallback-dialog__transcript-label {
  font-family: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 130%;
  letter-spacing: 0.05rem;
  color: #24415B;
  margin: 0 auto 1.2rem 0;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid #24415B;
  display: inline-block;
  align-self: flex-start;
}

.js-fallback-dialog__transcript {
  flex: 1 1 auto;
  min-height: 0;
  background: #E9ECEF;
  border-radius: 1.2rem;
  padding: 1.6rem 0;
  margin: 0 0 2rem;
  text-align: left;
  /* Native scroll (no JS available to drive simple-scrollbar) with the
     scrollbar styled to mirror the JS-on transcript treatment. */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #24415B rgba(36, 65, 91, 0.25);
}

.js-fallback-dialog__transcript::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 10px;
}

.js-fallback-dialog__transcript::-webkit-scrollbar-track {
  background: rgba(36, 65, 91, 0.25);
  border-radius: 5px;
  margin: 1.6rem 0;
}

.js-fallback-dialog__transcript::-webkit-scrollbar-thumb {
  background: #24415B;
  border-radius: 5px;
}

.js-fallback-dialog__transcript .video-modal__transcript-list {
  list-style: none;
  margin: 0;
  padding: 0 1.6rem;
}

.js-fallback-dialog__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 4.4rem;
  padding: 1rem 2.8rem;
  background: #B9C762;
  border: 2px solid #24415B;
  border-radius: 20px;
  color: #24415B;
  font-family: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.05rem;
  text-decoration: none;
  align-self: center;
}

.js-fallback-dialog__close:hover,
.js-fallback-dialog__close:focus {
  background: #a8b656;
  color: #24415B;
}

.hero__fineprint {
  position: absolute;
  right: 24px;
  bottom: 24px;
  color: #fff;
  font-weight: 400;
  font-style: normal;
  font-size: 1.4rem;
  line-height: 150%;
  letter-spacing: 0.05rem;
  text-align: right;
  z-index: 2;
  margin: 0;
}

.page-nav {
  background-color: #B9C762;
  color: #324D66;
  font-family: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-size: 2rem;
  font-weight: 400;
  font-style: normal;
  line-height: 130%;
  letter-spacing: 0.05rem;
  width: 100%;
}

.page-nav__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 18px 20px;
}

.page-nav__label {
  margin: 0;
  flex-shrink: 0;
}

.page-nav__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.page-nav__list li {
  margin: 0;
  display: flex;
  align-items: center;
}

.page-nav__list li + li {
  border-left: 1px solid #324D66;
}

.page-nav__list a {
  font-family: 'DM Serif Display', 'Times New Roman', Times, serif;
  font-size: 2.2rem;
  font-weight: 400;
  font-style: normal;
  line-height: 130%;
  letter-spacing: 0.05rem;
  color: #324D66;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  padding: 0 28px;
  display: inline-block;
}

.page-nav__list a:hover,
.page-nav__list a:focus {
  text-decoration-color: currentColor;
}

.page-nav__list li:first-child {
  border-left: 1px solid #324D66;
}

.page-nav__list li:last-child {
  border-right: 1px solid #324D66;
}

.story {
  background: #fff;
  padding: 96px 0;
}

.story__inner {
  display: flex;
  align-items: center;
  gap: clamp(40px, 9vw, 112px);
}

.story__media {
  flex: 0 0 auto;
  width: clamp(320px, 40vw, 503px);
  max-width: 503px;
}

.story__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

.story__content {
  flex: 1 1 auto;
  color: #324D66;
  font-family: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-size: 1.8rem;
  line-height: 1.6;
  padding-right: 24px;
}

.story__content p {
  margin: 0 0 24px;
}

.story__content p:last-child {
  margin-bottom: 0;
}

.quote-section {
  background-color: #324D66;
  color: #fff;
  padding: 96px 0;
}

.quote-section__inner {
  display: flex;
  align-items: center;
  gap: clamp(32px, 7vw, 80px);
}

.quote-section__quote {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.quote-section__mark {
  display: block;
  flex: 0 0 auto;
  font-family: 'DM Serif Display', 'Times New Roman', Times, serif;
  font-weight: 400;
  font-style: normal;
  font-size: 19.8rem;
  line-height: 0.6;
  letter-spacing: 0.05rem;
  color: #B9C762;
  align-self: flex-start;
}

.quote-section__text {
  flex: 1 1 auto;
  font-family: 'DM Serif Text', 'Times New Roman', Times, serif;
  font-weight: 400;
  font-style: normal;
  font-size: 3rem;
  line-height: 140%;
  letter-spacing: 0.05rem;
  color: #fff;
  margin: 0;
}

.quote-section__accent {
  color: #B9C762;
}

.quote-section__media {
  flex: 0 0 auto;
  width: clamp(320px, 40vw, 497px);
  max-width: 497px;
}

.quote-section__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

@media (max-width: 900px) {
  .story__inner,
  .quote-section__inner {
    flex-direction: column;
    gap: 40px;
  }

  .story__content {
    padding-right: 0;
  }

  .story__media,
  .quote-section__media {
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
  }

  .quote-section__inner {
    flex-direction: column-reverse;
  }

  .quote-section__quote {
    gap: 12px;
  }

  .quote-section__mark {
    font-family: 'DM Serif Display', 'Times New Roman', Times, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 11rem;
    line-height: 0.7;
    letter-spacing: 0.05rem;
    margin-top: -4px;
  }

  .quote-section__text {
    font-family: 'DM Serif Text', 'Times New Roman', Times, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.2rem;
    line-height: 140%;
    letter-spacing: 0.05rem;
  }
}

/* Tablet/narrow-desktop band: scale the on-page nav fluidly from the
   desktop spec (at 1149px) down to a tighter set that fits at 769px,
   keeping the longest item ("Uncovering CELMoD Research") on a single
   line throughout. Each clamp() uses a linear calc() interpolation so
   the value moves continuously instead of snapping at the boundary. */
@media (max-width: 1149px) and (min-width: 769px) {
  .page-nav {
    /* 14px @ 769  →  20px @ 1149 */
    font-size: clamp(1.4rem, calc(1.58vw + 0.185rem), 2rem);
  }

  .page-nav__inner {
    /* 10px @ 769  →  24px @ 1149 */
    gap: clamp(1rem, calc(3.68vw - 1.83rem), 2.4rem);
  }

  .page-nav__list a {
    /* 15px @ 769  →  22px @ 1149 */
    font-size: clamp(1.5rem, calc(1.84vw + 0.085rem), 2.2rem);
    /* 10px @ 769  →  28px @ 1149 (each side) */
    padding: 0 clamp(1rem, calc(4.74vw - 2.645rem), 2.8rem);
  }

  .quote-section__text {
    /* 22px @ 769  →  30px @ 1149 */
    font-size: clamp(2.2rem, calc(2.105vw + 0.581rem), 3rem);
  }
}

/* Tablet / narrow-desktop band: the 680:380 aspect-ratio collapses the
   hero below ~620px once the viewport drops past 1100px, leaving the
   hero text crammed against the bottom. Lock a minimum height so the
   composition keeps breathing room until the mobile portrait crop kicks
   in at 768px. */
@media (max-width: 1100px) and (min-width: 769px) {
  .hero {
    min-height: 70rem;
  }
}

@media (max-width: 768px) {
  .hero {
    aspect-ratio: 1608 / 3574;
    max-height: 83rem;
  }

  .hero__logo {
    top: 35px;
    left: 35px;
  }

  .hero__logo img {
    width: 190px;
  }

  .hero__content {
    max-width: 400px;
  }

  .hero__fineprint {
    left: 0;
    right: 0;
    bottom: 12px;
    padding-top: 5px;
    padding-bottom: 10px;
    text-align: center;
  }

  .hero__title {
    font-family: 'DM Serif Display', 'Times New Roman', Times, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3.3rem;
    line-height: 120%;
    letter-spacing: 0.05rem;
  }

  /* Let the title wrap naturally on mobile instead of forcing a break
     after "Multiple Myeloma" — narrow widths handle the line breaks
     better when the browser decides. */
  .hero__title br {
    display: none;
  }

  .hero__cta {
    margin-bottom: 10px;
  }

  /* On mobile the trigger sits inline beneath the main CTA, centered
     within the hero. display: flex + width: fit-content makes it a
     block-level box that's still sized to its content so margin: auto
     can horizontally center it. The bottom margin pushes the
     padding-bottom of .hero__content further down, opening room above
     the absolutely-positioned disclaimer. */
  .hero__transcript-trigger {
    position: static;
    display: flex;
    width: fit-content;
    margin: 16px auto 12px;
  }

  .external-link-modal {
    padding: 22px;
  }

  .external-link-modal__panel {
    max-width: none;
  }

  .page-nav__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 28px 20px;
    text-align: center;
  }

  .page-nav__label {
    padding-bottom: 20px;
    border-bottom: 1px solid #324D66;
  }

  .page-nav__list {
    flex-direction: column;
    align-items: stretch;
  }

  .page-nav__list li,
  .page-nav__list li + li,
  .page-nav__list li:first-child,
  .page-nav__list li:last-child {
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 1px solid #324D66;
    display: block;
  }

  .page-nav__list a {
    display: block;
    padding: 24px 0;
    text-align: center;
  }
}

@media (max-width: 430px) {
  .hero {
    aspect-ratio: 1600 / 3500;
    max-height: none;
  }
}

.video-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 200ms ease;
}

.video-modal[hidden] {
  display: none;
}

.video-modal.is-open {
  opacity: 1;
}

.video-modal__backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: rgba(36, 65, 91, 0.85);
}

.video-modal__panel {
  position: relative;
  width: 100%;
  max-width: 1480px;
  max-height: 95vh;
  display: flex;
  flex-direction: column;
}

.video-modal__close {
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  z-index: 3;
  background: #fff;
  border: 0;
  border-radius: 50%;
  color: #24415B;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 4rem;
  height: 4rem;
  margin: 0;
  letter-spacing: 0;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.video-modal__close svg {
  width: 2rem;
  height: 2rem;
}

.video-modal__close:hover,
.video-modal__close:focus {
  background: #fff;
  border-color: transparent;
  color: #24415B;
}

.video-modal__layout {
  display: flex;
  flex-direction: row-reverse;
  align-items: stretch;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.video-modal__video {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.video-modal__video iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Video-only mode — applied when the main "Watch Mariska's Story" CTA
   opens the modal (vs the "View Transcript" trigger which keeps the
   transcript visible). Hides the transcript aside so the video fills
   the panel; the panel reflows to the video's 16:9 height. */
.video-modal.is-no-transcript .video-modal__transcript {
  display: none;
}

.video-modal__transcript {
  flex: 0 0 38%;
  max-width: 480px;
  background: #fff;
  position: relative;
  /* The aside itself contributes 0 to the layout's intrinsic block size
     because its content is absolutely positioned — that lets the video's
     16:9 aspect-ratio drive the row height, and the transcript stretches
     to match via align-items: stretch (default). */
  min-height: 0;
}

.video-modal__transcript-inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  padding: 3.2rem 2.4rem 2.4rem;
  display: flex;
  flex-direction: column;
}

.video-modal__title {
  font-family: 'DM Serif Display', 'Times New Roman', Times, serif;
  font-weight: 400;
  font-style: normal;
  font-size: 2.6rem;
  line-height: 130%;
  letter-spacing: 0.05rem;
  color: #24415B;
  margin: 0 0 1.6rem;
}

.video-modal__transcript-label {
  font-family: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.6rem;
  line-height: 130%;
  letter-spacing: 0.05rem;
  color: #24415B;
  margin: 0 0 1.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid #24415B;
  display: inline-block;
  align-self: flex-start;
}

.video-modal__transcript-scroll {
  flex: 1 1 auto;
  min-height: 0;
  background: #E9ECEF;
  border-radius: 8px;
  /* Vertical padding on the gray panel; the inner scrollarea is 100% of
     this padded container, so simple-scrollbar's bar (positioned within
     the scrollarea) is naturally inset top + bottom from the gray box. */
  padding: 1.6rem 0;
  overflow: hidden;
  position: relative; /* anchor for the scrollbar track pseudo-element */
}

.video-modal__transcript-scrollarea {
  height: 100%;
  position: relative; /* anchor for the absolute-positioned ss-scroll */
}

/* Override the .video-modal lime focus color back to navy here —
   transcript sits on a light background where lime is hard to see. */
.video-modal__transcript-scrollarea:focus {
  outline: 3px solid #24415B;
  outline-offset: 2px;
}

.video-modal__transcript-list {
  list-style: none;
  margin: 0;
  padding: 0 4.4rem 0 1.6rem; /* extra right padding so text clears the bar */
}

.video-modal__transcript-item {
  display: flex;
  gap: 1.6rem;
  align-items: flex-start;
  margin: 0 0 2rem;
  font-family: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-size: 1.5rem;
  line-height: 140%;
  letter-spacing: 0.05rem;
  color: #24415B;
}

.video-modal__transcript-item:last-child {
  margin-bottom: 0;
}

.video-modal__transcript-item time {
  flex: 0 0 4.4rem;
  font-weight: 700;
  color: #24415B;
}

.video-modal__transcript-item span {
  flex: 1 1 auto;
}

/* Active line during playback. JS adds .is-active when the player's
   currentTime crosses the line's timestamp. Lime accent bar sits in
   the transcript-list's left padding (decorative — text stays navy
   for WCAG AA contrast on the light-gray panel). */
.video-modal__transcript-item.is-active {
  position: relative;
}

.video-modal__transcript-item.is-active::before {
  content: '';
  position: absolute;
  top: 0.3em;
  bottom: 0.3em;
  left: -1rem;
  width: 3px;
  background: #B9C762;
  border-radius: 2px;
}

.video-modal__transcript-item.is-active span {
  font-weight: 600;
}

/* Override simple-scrollbar so the bar (a) is always visible (the
   library's default fades in on hover only) and (b) sits inside the
   gray transcript panel. The library positions the bar with a
   relative offset that pushes it right up against the target's right
   edge; switching to position: absolute with an explicit right inset
   lets the bar live cleanly inside the panel's right padding. */
/* Track that sits behind the navy thumb. simple-scrollbar doesn't ship
   a track element, so we paint one with a pseudo-element on the gray
   panel (NOT the inner scrollarea) so the track can extend slightly
   above and below the thumb's vertical range — that gives padding
   inside the track at top and bottom. */
.video-modal__transcript-scroll::after {
  content: '';
  position: absolute;
  /* Track inset 4px past the thumb's range at each end so the rounded
     ends peek out above and below the thumb. */
  top: 1.2rem;
  bottom: 1.2rem;
  right: 1.2rem;
  width: 14px;
  background: rgba(36, 65, 91, 0.25);
  border-radius: 7px;
  pointer-events: none;
  z-index: 1;
}

.video-modal__transcript-scrollarea.ss-container .ss-scroll {
  position: absolute !important;
  /* Centers the 8px thumb inside the 14px track. */
  right: 1.5rem !important;
  opacity: 1;
  background: #24415B;
  width: 8px;
  border-radius: 4px;
  z-index: 2;
}

/* Keep the touch gesture pinned to this element: overscroll-behavior
   stops iOS rubber-band from chaining up to the body, touch-action
   declares the vertical pan so a parent gesture handler can't claim it. */
.video-modal__transcript-scrollarea .ss-content {
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* Stack the video modal vertically once the viewport (and therefore
   the modal panel) drops to ~960px or below. Two-column layout
   (transcript on the left, video on the right) only works comfortably
   above that — at narrower widths the transcript column gets cramped.
   The flex chain (panel → layout → transcript → transcript-scroll) lets
   the transcript absorb whatever vertical space is left between the
   video (locked at 16:9) and the panel's 95vh cap. */
@media (max-width: 960px) {
  /* Explicit height (not just max-height) so the flex chain inside
     has a definite main-axis size — without it the transcript-scroll
     grows to its full content and .ss-content has no overflow. dvh
     accounts for the iOS URL bar. */
  .video-modal__panel {
    height: 95vh;
    height: 95dvh;
  }

  /* In video-only mode the transcript is hidden, so the panel can
     shrink to the video's natural 16:9 height instead of taking up
     the full viewport. */
  .video-modal.is-no-transcript .video-modal__panel {
    height: auto;
  }

  .video-modal__layout {
    flex-direction: column;
  }

  .video-modal__video {
    flex: 0 0 auto;
  }

  .video-modal__transcript {
    flex: 1 1 auto;
    max-width: none;
    width: 100%;
    min-height: 0;
    position: static;
  }

  .video-modal__transcript-inner {
    position: static;
    padding: 2rem 1.6rem;
    height: 100%;
  }

  .video-modal__title {
    font-size: 2.2rem;
  }
}

.external-link-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
}

.external-link-modal[hidden] {
  display: none;
}

.external-link-modal.is-open {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .external-link-modal {
    transition: opacity 200ms ease;
  }
}

.external-link-modal__backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: rgba(36, 65, 91, 0.85);
}

.external-link-modal__panel {
  position: relative;
  background: #fff;
  color: #24415B;
  max-width: 519px;
  width: 100%;
  padding: 40px 40px 32px;
  border-radius: 28px;
  box-shadow: 0px 0px 10px 6px #00000040;
  text-align: center;
  box-sizing: border-box;
}

.external-link-modal__close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  background: transparent;
  border: 0;
  color: #24415B;
  line-height: 1;
  cursor: pointer;
  padding: 0.4rem;
  width: 4rem;
  height: 4rem;
  margin: 0;
  letter-spacing: 0;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.external-link-modal__close svg {
  width: 2rem;
  height: 2rem;
}

.external-link-modal__close:hover,
.external-link-modal__close:focus {
  background: transparent;
  border-color: transparent;
  color: #24415B;
}

.external-link-modal__title {
  font-family: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.8rem;
  line-height: 150%;
  letter-spacing: 0.05rem;
  margin: 0 0 16px;
  color: #24415B;
  text-align: center;
  text-wrap: balance;
}

.external-link-modal__body {
  font-family: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.8rem;
  line-height: 150%;
  letter-spacing: 0.05rem;
  margin: 0 0 28px;
  color: #24415B;
  text-align: center;
}

.external-link-modal__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.external-link-modal__btn {
  font-family: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: 0.05rem;
  text-transform: none;
  cursor: pointer;
  margin: 0;
  box-sizing: border-box;
}

.external-link-modal__btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 71px;
  min-width: 200px;
  padding: 0 40px;
  background: #B9C762;
  border: 2px solid #24415B;
  border-radius: 20px;
  color: #24415B;
}

.external-link-modal__btn--primary:hover,
.external-link-modal__btn--primary:focus {
  background: #a8b656;
  border-color: #24415B;
  color: #24415B;
}

.external-link-modal__btn--secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 71px;
  min-width: 200px;
  padding: 0 40px;
  background: transparent;
  border: 2px solid #24415B;
  border-radius: 20px;
  color: #24415B;
}

.external-link-modal__btn--secondary:hover,
.external-link-modal__btn--secondary:focus {
  background: #24415B;
  border-color: #24415B;
  color: #fff;
}

.celmod-research {
  background: #E9ECEF;
  padding: 96px 0;
}

.celmod-research__inner {
  text-align: center;
}

.celmod-research__heading {
  font-family: 'DM Serif Display', 'Times New Roman', Times, serif;
  font-weight: 400;
  font-style: normal;
  font-size: 4.2rem;
  line-height: 145%;
  letter-spacing: 0.05rem;
  text-align: center;
  color: #24415B;
  margin: 0 auto 24px;
}

.celmod-research__intro {
  font-family: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 150%;
  letter-spacing: 0.05rem;
  color: #324D66;
  text-align: center;
  margin: 0 auto 56px;
  max-width: 880px;
}

.celmod-research__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
}

.celmod-research__video iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Fallback shown only when the Brightcove player JS fails to upgrade
   the <video-js> element (e.g. JavaScript disabled, CSP block). When
   the player initializes, video.js removes any <p> children. */
.celmod-research__video .video-fallback {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  margin: 0;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.5;
}

.celmod-research__video .video-fallback a {
  color: #B9C762;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 768px) {
  .celmod-research {
    padding: 56px 0;
  }

  .celmod-research__heading {
    font-family: 'DM Serif Display', 'Times New Roman', Times, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3.1rem;
    line-height: 130%;
    letter-spacing: 0.05rem;
    text-align: center;
  }

  .celmod-research__intro {
    font-size: 1.6rem;
    margin-bottom: 32px;
  }
}

.myeloma-info {
  background: #fff;
  padding: 96px 0;
}

.myeloma-info__inner {
  display: flex;
  align-items: center;
  gap: clamp(40px, 8vw, 96px);
}

.myeloma-info__media {
  flex: 0 0 auto;
  width: clamp(360px, 45vw, 566px);
  max-width: 566px;
}

.myeloma-info__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
}

.myeloma-info__content {
  flex: 1 1 auto;
}

.myeloma-info__eyebrow {
  font-family: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.8rem;
  line-height: 130%;
  letter-spacing: 0.05rem;
  color: #24415B;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #24415B;
  display: inline-block;
}

.myeloma-info__heading {
  font-family: 'DM Serif Display', 'Times New Roman', Times, serif;
  font-weight: 400;
  font-style: normal;
  font-size: 4.2rem;
  line-height: 120%;
  letter-spacing: 0.05rem;
  color: #24415B;
  margin: 0 0 24px;
}

.myeloma-info__body {
  font-family: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.8rem;
  line-height: 150%;
  letter-spacing: 0.05rem;
  color: #324D66;
  margin: 0 0 20px;
}

.myeloma-info__body + .myeloma-info__button {
  margin-top: 12px;
}

.myeloma-info__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #E9ECEF;
  border: 2px solid #24415B;
  border-radius: 26px;
  color: #24415B;
  font-family: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.8rem;
  line-height: 130%;
  letter-spacing: 0.05rem;
  text-decoration: none;
  padding: 14px 28px;
  max-width: 280px;
  cursor: pointer;
  margin: 0;
  box-sizing: border-box;
}

.myeloma-info__button:hover,
.myeloma-info__button:focus {
  background: #d8dfe5;
  border-color: #24415B;
  color: #24415B;
}

@media (max-width: 900px) {
  .myeloma-info__inner {
    flex-direction: column;
    gap: 40px;
  }

  .myeloma-info__media {
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
  }

  .myeloma-info__heading {
    font-size: 3.2rem;
  }
}

.community {
  background: #24415B;
  padding: 96px 0;
  color: #fff;
}

.community__heading {
  font-family: 'DM Serif Display', 'Times New Roman', Times, serif;
  font-weight: 400;
  font-style: normal;
  font-size: 3.5rem;
  line-height: 150%;
  letter-spacing: 0.05rem;
  text-align: center;
  color: #fff;
  margin: 0 auto 64px;
  max-width: 1100px;
}

.community__grid {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 80px;
}

.community__card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 480px;
}

.community__icon {
  display: block;
  height: 70px;
  width: auto;
  margin: 0 auto 24px;
}

.community__text {
  font-family: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 2.5rem;
  line-height: 150%;
  letter-spacing: 0.05rem;
  text-align: center;
  text-wrap: balance;
  color: #fff;
  margin: 0 0 32px;
  max-width: 480px;
  box-sizing: border-box;
}

.community__card:nth-of-type(2) .community__text {
  padding: 0 60px;
}

.community__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid #B9C762;
  border-radius: 20px;
  color: #fff;
  font-family: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.8rem;
  line-height: 130%;
  letter-spacing: 0.05rem;
  text-decoration: none;
  padding: 14px 40px;
  cursor: pointer;
  margin: 0;
  box-sizing: border-box;
}

.community__button:hover,
.community__button:focus {
  background: rgba(255, 255, 255, 0.2);
  border-color: #B9C762;
  color: #fff;
}

.community :focus {
  outline-color: #B9C762;
}

@media (max-width: 768px) {
  .community {
    padding: 56px 0;
  }

  .community__heading {
    font-size: 2.8rem;
    margin-bottom: 40px;
  }

  .community__grid {
    flex-direction: column;
    align-items: center;
    gap: 48px;
  }

  .community__card:nth-of-type(2) .community__text {
    padding: 0;
  }
}

.hcp-cta {
  background: #E9ECEF;
  padding: 55px 0 80px;
  text-align: center;
}

.hcp-cta__icon {
  display: block;
  height: 94px;
  width: auto;
  margin: 0 auto 20px;
}

.hcp-cta__heading {
  font-family: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 2.6rem;
  line-height: 150%;
  letter-spacing: 0.05rem;
  text-align: center;
  color: #24415B;
  margin: 0 auto 32px;
  max-width: 880px;
}

.hcp-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 75px;
  padding: 0 40px;
  background: #B9C762;
  border: 2px solid #24415B;
  border-radius: 20px;
  color: #24415B;
  font-family: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.9rem;
  line-height: 120%;
  letter-spacing: 0.05rem;
  text-decoration: none;
  cursor: pointer;
  margin: 0;
  box-sizing: border-box;
}

.hcp-cta__button:hover,
.hcp-cta__button:focus {
  background: #a8b656;
  color: #24415B;
}

.site-footer {
  background: #fff;
  padding: 64px 0 64px;
  position: relative;
  font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}

.site-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}

.site-footer__main {
  flex: 1 1 auto;
  min-width: 0;
}

.site-footer__logo-link {
  display: inline-block;
  margin: 0 0 48px;
  text-decoration: none;
  border: 0;
}

.site-footer__logo {
  display: block;
  width: 304px;
  max-width: 100%;
  height: auto;
  margin: 0;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 56px;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.site-footer__links li {
  margin: 0;
}

.site-footer__links a,
.site-footer__links button {
  font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.8rem;
  line-height: 120%;
  letter-spacing: 0.05rem;
  color: #1a1a1a;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  background: transparent;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 0;
  margin: 0;
  text-transform: none;
  cursor: pointer;
}

.privacy-choices-icon {
  display: inline-block;
  width: 30px;
  height: 14px;
  flex-shrink: 0;
  vertical-align: middle;
}

.site-footer__links a:hover,
.site-footer__links a:focus,
.site-footer__links button:hover,
.site-footer__links button:focus {
  text-decoration-color: currentColor;
  background: transparent;
  border-color: transparent;
  color: #1a1a1a;
}

.site-footer__copy {
  font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.6rem;
  line-height: 120%;
  letter-spacing: 0.05rem;
  color: #646464;
  margin: 0 0 12px;
}

.site-footer__copy:last-child {
  margin-bottom: 0;
}

.site-footer__copy span {
  white-space: nowrap;
}

.back-to-top,
.back-to-top * {
  cursor: pointer;
}

.back-to-top {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  padding: 0;
}

.back-to-top__circle {
  width: 39px;
  height: 39px;
  border-radius: 50%;
  background: #24415B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.back-to-top__circle img {
  display: block;
  width: 13px;
  height: auto;
}

.back-to-top__label {
  font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.4rem;
  line-height: 120%;
  letter-spacing: 0.05rem;
  color: #24415B;
  text-align: center;
  text-transform: uppercase;
  max-width: 70px;
}

@media (max-width: 768px) {
  .site-footer {
    padding: 48px 0;
    margin-bottom: 20px;
  }

  .site-footer__links {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 52px;
  }

  .site-footer__logo-link {
    margin-bottom: 16px;
  }

  .site-footer__logo {
    margin-bottom: 0;
  }

  .site-footer__inner {
    align-items: flex-end;
    gap: 24px;
  }
}

/* Honor user motion preferences */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .video-modal {
    transition: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Fallbacks for Safari < 15, which lacks both `aspect-ratio` and flex
   `gap`. Modern browsers skip this whole block. */
@supports not (aspect-ratio: 1) {
  /* ---- aspect-ratio: hero shape ---- */
  .hero {
    min-height: 55.88vw; /* mirrors 680/380 */
  }

  @media (max-width: 768px) {
    .hero {
      min-height: 222.26vw; /* mirrors 1608/3574 */
    }
  }

  /* ---- aspect-ratio: video wrappers ---- */
  .video-modal__video::before,
  .celmod-research__video::before {
    content: "";
    display: block;
    padding-bottom: 56.25%; /* mirrors 16/9 */
  }

  /* ---- flex gap: hero CTA (icon + label) ---- */
  .hero__cta > *:not(:last-child) {
    margin-right: 12px;
  }

  /* ---- flex gap: page nav ---- */
  .page-nav__inner > *:not(:last-child) {
    margin-right: 24px;
  }
  @media (max-width: 1149px) and (min-width: 769px) {
    .page-nav__inner > *:not(:last-child) {
      margin-right: clamp(1rem, calc(3.68vw - 1.83rem), 2.4rem);
    }
  }
  @media (max-width: 768px) {
    .page-nav__inner > *:not(:last-child) {
      margin-right: 0;
    }
  }

  /* ---- flex gap: story row (media + content) ---- */
  .story__inner > *:not(:last-child) {
    margin-right: clamp(40px, 9vw, 112px);
  }
  @media (max-width: 900px) {
    .story__inner > *:not(:last-child) {
      margin-right: 0;
      margin-bottom: 40px;
    }
  }

  /* ---- flex gap: quote section ---- */
  .quote-section__inner > *:not(:last-child) {
    margin-right: clamp(32px, 7vw, 80px);
  }
  .quote-section__quote > *:not(:last-child) {
    margin-right: 24px;
  }
  @media (max-width: 900px) {
    .quote-section__inner > *:not(:last-child) {
      margin-right: 0;
      margin-bottom: 40px;
    }
    .quote-section__quote > *:not(:last-child) {
      margin-right: 12px;
    }
  }

  /* ---- flex gap: transcript line (time + text) ---- */
  .video-modal__transcript-item > *:not(:last-child) {
    margin-right: 1.6rem;
  }

  /* ---- flex gap: external-link modal actions ---- */
  .external-link-modal__actions > *:not(:last-child) {
    margin-right: 12px;
  }

  /* ---- flex gap: myeloma-info row ---- */
  .myeloma-info__inner > *:not(:last-child) {
    margin-right: clamp(40px, 8vw, 96px);
  }
  @media (max-width: 900px) {
    .myeloma-info__inner > *:not(:last-child) {
      margin-right: 0;
      margin-bottom: 40px;
    }
  }

  /* ---- flex gap: community card grid ---- */
  .community__grid > *:not(:last-child) {
    margin-right: 80px;
  }
  @media (max-width: 768px) {
    .community__grid > *:not(:last-child) {
      margin-right: 0;
      margin-bottom: 48px;
    }
  }

  /* ---- flex gap: site footer row ---- */
  .site-footer__inner > *:not(:last-child) {
    margin-right: 40px;
  }
  @media (max-width: 768px) {
    .site-footer__inner > *:not(:last-child) {
      margin-right: 0;
      margin-bottom: 24px;
    }
  }

  /* ---- flex gap: site footer links (wrap; needs negative-margin trick
         to get both row and column spacing on wrapped lines) ---- */
  .site-footer__links {
    margin-top: -6px;
    margin-right: -28px;
    margin-left: -28px;
    margin-bottom: 18px; /* 24px existing bottom margin - 6px outset */
  }
  .site-footer__links > * {
    margin: 6px 28px;
  }
  @media (max-width: 768px) {
    .site-footer__links {
      margin: -2px 0 50px; /* 52px existing - 2px outset */
    }
    .site-footer__links > * {
      margin: 2px 0;
    }
  }

  /* ---- flex gap: footer link inner (icon + label) ---- */
  .site-footer__links a > *:not(:last-child),
  .site-footer__links button > *:not(:last-child) {
    margin-right: 8px;
  }

  /* ---- flex gap: back-to-top (stacked icon + label) ---- */
  .back-to-top > *:not(:last-child) {
    margin-bottom: 10px;
  }
}