/* ==========================================================================
   page-home.css — rules for index.html only (client content pack, 28 Aug 2026)
   Loaded after css/styles.css. Nothing here may be relied on by other pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   02 Hero — 7fr / 5fr, headline left, client card carousel right
   -------------------------------------------------------------------------- */
.nicholii-hero2.is-home {
  padding-top: clamp(140px, 16vw, 220px);
  padding-bottom: clamp(72px, 9vw, 132px);
}
.nicholii-hero2_master.is-home {
  display: grid;
  grid-template-columns: 7fr 5fr;
  align-items: end;
  gap: clamp(40px, 5vw, 88px);
  margin-bottom: 0;
}
.nicholii-hero2_master.is-home .nicholii-hero2_left { gap: 32px; }
.nicholii-hero2_master.is-home .nicholii-hero2_h1 { max-width: 14ch; }
.nicholii-hero2_master.is-home .nicholii-hero2_right {
  max-width: none;
  width: 100%;
  align-items: stretch;
  gap: 20px;
}

.nicholii-hcar { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.nicholii-hcar_stage { display: grid; width: 100%; }
.nicholii-hcar_card {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 24px;
  align-items: start;
  padding: 24px;
  border-radius: var(--radius-general-default);
  background-color: rgba(247, 247, 245, 0.07);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .6s ease;
}
.nicholii-hcar_card.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.nicholii-hcar_media {
  width: 148px;
  border-radius: 12px;
  overflow: clip;
}
.nicholii-hcar_photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.nicholii-hcar_media .nicholii-ph { padding: .75rem; }
.nicholii-hcar_media .nicholii-ph_label { font-size: 11px; }
.nicholii-hcar_text { display: flex; flex-direction: column; gap: 6px; }
.nicholii-hcar_name {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-base-base-light-100);
}
.nicholii-hcar_role {
  font-family: var(--typography-font-label);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(247, 247, 245, 0.76);
  margin-bottom: 10px;
}
.nicholii-hcar_lead {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-base-base-light-100);
}
.nicholii-hcar_line {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(247, 247, 245, 0.78);
}
.nicholii-hcar_dots { display: flex; align-items: center; gap: 10px; }
.nicholii-hcar_dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(247, 247, 245, 0.28);
  cursor: pointer;
  transition: background-color .25s ease, transform .25s ease;
}
.nicholii-hcar_dot:hover { background-color: rgba(247, 247, 245, 0.7); }
.nicholii-hcar_dot.is-active {
  background-color: var(--color-base-accent-primary);
  transform: scale(1.25);
}

@media screen and (max-width: 991px) {
  .nicholii-hero2_master.is-home { grid-template-columns: 1fr; align-items: start; }
  .nicholii-hero2_master.is-home .nicholii-hero2_h1 { max-width: none; }
}
@media screen and (max-width: 560px) {
  .nicholii-hero2_master.is-home .nicholii-hero2_h1 { font-size: 48px; }
  .nicholii-hcar_card { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
  .nicholii-hcar_media { width: 120px; }
  .nicholii-hcar_lead { font-size: 18px; }
}

/* --------------------------------------------------------------------------
   03 Customer logos — ReWild placeholder sits inline in the marquee
   -------------------------------------------------------------------------- */
.section_logos-marquee {
  border-bottom: 0;
  padding-bottom: var(--spacing--48);
}
.logos-marquee_single .nicholii-ph.is-logo {
  flex: none;
  align-self: center;
  gap: .25rem;
  padding: .375rem .625rem;
}

/* --------------------------------------------------------------------------
   05 Display marquee — brand mark between repeats, same tone as the type
   -------------------------------------------------------------------------- */
.nicholii-marq-star {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(32px, 3.6vw, 68px);
  height: clamp(32px, 3.6vw, 68px);
  color: currentColor;
}
.nicholii-marq-star svg { width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   07 The platform — six capability cards with static product-UI mock panels
   -------------------------------------------------------------------------- */
.nicholii-caps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: var(--spacing--80);
}
.nicholii-cap {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border-radius: var(--radius-general-default);
  /* The mock inside is a light surface now, so a light card left the two
     sitting on top of each other with only a hairline between. Charcoal
     gives it a ground to sit on, and matches the same component on the
     product page rather than inventing a second treatment. */
  background-color: var(--color-base-lift-dark);
  overflow: hidden;
  min-height: 0;
}
.nicholii-cap_mock {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}
.nicholii-cap_mock > * {
  flex: 1 1 0;
  width: 100%;
  min-height: 0;
  height: 100%;
}
.nicholii-cap_mock .nicholii-ph { justify-content: center; }
.nicholii-cap_body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  background-color: var(--color-base-lift-dark);
}
.nicholii-cap_head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nicholii-cap_chip {
  font-family: var(--typography-font-label);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background-color: var(--color-base-forest);
  color: var(--color-base-base-light-100);
}
.nicholii-cap_lead { font-size: 17px; font-weight: 600; line-height: 1.35; }
.nicholii-cap_desc { font-size: 16px; line-height: 1.5; color: rgba(37, 37, 37, 0.78); }

@media screen and (max-width: 991px) {
  .nicholii-caps { grid-template-columns: 1fr; }
  /* Cap the implied-UI slot so stacked cards do not grow endlessly on mobile. */
  .nicholii-cap {
    padding: 18px;
    gap: 14px;
  }
  .nicholii-cap_mock {
    flex: 0 0 auto;
    height: min(52vh, 22rem);
    max-height: 22rem;
  }
  .nicholii-cap_lead { font-size: 15px; }
  .nicholii-cap_desc { font-size: 14px; line-height: 1.4; }
}
@media screen and (max-width: 479px) {
  .nicholii-cap { padding: 14px; gap: 12px; }
  .nicholii-cap_mock {
    height: min(48vh, 19rem);
    max-height: 19rem;
  }
  .nicholii-mock { padding: 10px; min-height: 0; }
  .nicholii-mock_pane { padding: 10px; }
  .nicholii-mock_row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .nicholii-mock_val { text-align: left; }
  .nicholii-cap_lead { font-size: 14px; }
  .nicholii-cap_desc { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   08 Proof strip — four points on a divided row, caption above the value
   -------------------------------------------------------------------------- */
.stats_list.nicholii-proof {
  flex-flow: row;
  align-items: stretch;
  gap: 0;
}
.stats_list.nicholii-proof .stats_list_single {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing--16);
  padding: var(--spacing--32) var(--spacing--24);
  border-top: 1px solid var(--color-tokens-borders-soft);
}
.stats_list.nicholii-proof .heading-style-h2 {
  font-size: clamp(2.25rem, 4vw, 4rem);
  line-height: 1;
}
.stats_list.nicholii-proof .stats_list_single + .stats_list_single {
  border-left: 1px solid var(--color-tokens-borders-soft);
}
.stats_list.nicholii-proof .stats_list_single:first-child { padding-left: 0; }
.stats_list.nicholii-proof .stats_list_single:last-child { padding-right: 0; }
@media screen and (max-width: 767px) {
  .stats_list.nicholii-proof { flex-flow: row wrap; }
  .stats_list.nicholii-proof .stats_list_single { flex: 1 1 45%; }
  .stats_list.nicholii-proof .stats_list_single:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stats_list.nicholii-proof .stats_list_single:nth-child(even) { padding-right: 0; }
}

/* --------------------------------------------------------------------------
   09 What we believe — two team photographs, staggered pair
   -------------------------------------------------------------------------- */
.section_gallery .gallery_left { display: block; }
.section_gallery .gallery_images-wrap {
  display: flex;
  flex-flow: row;
  align-items: flex-end;
  gap: 24px;
  width: 100%;
}
.section_gallery .gallery_image-one { max-width: none; flex: 1; height: 22rem; }
.section_gallery .gallery_image-two { max-width: none; flex: 1; height: 28rem; }
@media screen and (max-width: 767px) {
  .section_gallery .gallery_image-one { height: 16rem; }
  .section_gallery .gallery_image-two { height: 20rem; }
}
@media screen and (max-width: 479px) {
  .section_gallery .gallery_images-wrap { display: flex; gap: 12px; }
  .section_gallery .gallery_image-one { height: 11rem; }
  .section_gallery .gallery_image-two { height: 13.5rem; }
}

/* --------------------------------------------------------------------------
   10 Testimonial — anonymous, so the tile carries the mark, not a face
   -------------------------------------------------------------------------- */
.person-video_tile.nicholii-attrib {
  justify-content: space-between;
  gap: var(--spacing--32);
  min-height: 12rem;
}
.nicholii-attrib_mark { width: 40px; height: 40px; color: var(--color-base-accent-primary); }
.nicholii-attrib_mark svg { width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   12 Recognised — compact credibility strip above the closing CTA
   -------------------------------------------------------------------------- */
.section_recognised {
  padding-top: var(--spacing--48);
  padding-bottom: var(--section-padding--medium);
}
.nicholii-recog { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing--32); }
.nicholii-recog_row { width: 100%; }
.nicholii-recog_row { display: flex; flex-wrap: wrap; gap: var(--spacing--32); }
.nicholii-recog_item {
  flex: 1 1 20rem;
  display: flex;
  align-items: center;
  gap: var(--spacing--24);
}
.nicholii-recog_item .award_card { flex: none; padding: var(--spacing--16); }
.nicholii-recog_item .award_logo { height: 4rem; }
.nicholii-recog_text { display: flex; flex-direction: column; gap: 4px; }
@media screen and (max-width: 479px) {
  .nicholii-recog_item { flex: 1 1 100%; }
  .nicholii-recog_item .award_logo { height: 3rem; }
}

/* The client card sits at the bottom right of the hero, with the dots
   tucked under it rather than floating in the middle of the column. */
.nicholii-hero2_master.is-home .nicholii-hero2_right {
  justify-content: flex-end;
  align-self: end;
}
.nicholii-hcar { margin-left: auto; }
.nicholii-hcar_dots { justify-content: flex-end; }
@media screen and (max-width: 991px) {
  .nicholii-hcar { margin-left: 0; }
  .nicholii-hcar_dots { justify-content: flex-start; }
}


/* ==========================================================================
   Hero: dark rounded card on the cream field. Top bar, then an 8fr/4fr grid -
   headline, body, CTA and the wordmark at billboard scale on the left; the
   rotating client cards fill the image column on the right.
   ========================================================================== */
.nicholii-hero3 { padding-top: 6.5rem; background-color: var(--color-base-cream); }
.nicholii-hero3_container { width: 100%; max-width: 1920px; margin: 0 auto; padding: 0 1.5rem; }
.nicholii-hero3_card {
  padding: 3rem;
  border-radius: 1.5rem;
  background-color: var(--color-base-base-dark-100);
  color: var(--color-base-base-light-100);
}
.nicholii-hero3_top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 11.25rem; }
.nicholii-hero3_mark { display: block; width: 32px; height: 32px; color: var(--color-base-accent-primary); }
.nicholii-hero3_grid { display: grid; grid-template-columns: 8fr 4fr; gap: 8.25rem; align-items: end; }
.nicholii-hero3_left { display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; width: 95%; }
.nicholii-hero3_h1 {
  margin: 0; max-width: 20ch;
  font-size: clamp(3rem, 4.4vw, 4.25rem); line-height: 1.02; font-weight: 500; letter-spacing: -0.035em;
  color: var(--color-base-base-light-100);
}
.nicholii-hero3_body {
  margin: 0; max-width: 48ch;
  font-size: 1rem; line-height: 1.5; color: rgba(247, 247, 245, 0.72);
}
.nicholii-hero3_buttons { display: flex; gap: .75rem; }
.nicholii-hero3_cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.nicholii-hero3_watch {
  font-size: .9375rem;
  line-height: 1.4;
  color: rgba(247, 247, 245, 0.64);
  text-decoration: none;
  transition: color .2s ease;
}
.nicholii-hero3_watch:hover {
  color: var(--color-base-base-light-100);
}
.nicholii-hero3_wordmark { width: 100%; height: auto; display: block; margin-top: 1rem; }

/* client cards fill the image column, the detail sits on a glass tile */
.nicholii-hero3_right { position: relative; }
.nicholii-hero3_right .nicholii-hcar { gap: 0; }
.nicholii-hero3_right .nicholii-hcar_stage {
  position: relative;
  height: 55vh; min-height: 26rem; max-height: 41rem;
  border-radius: 1rem; overflow: hidden;
}
.nicholii-hero3_right .nicholii-hcar_card {
  position: absolute; inset: 0;
  display: block; padding: 0; background: none; border: 0;
}
.nicholii-hero3_right .nicholii-hcar_media { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.nicholii-hero3_right .nicholii-hcar_photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.nicholii-hero3_right .nicholii-hcar_text {
  position: absolute; right: 1.5rem; bottom: 1.5rem; left: 1.5rem;
  padding: .875rem 1rem; border-radius: .5rem;
  background-color: rgba(37, 37, 37, 0.52);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: flex; flex-direction: column; gap: .25rem;
}
.nicholii-hero3_right .nicholii-hcar_name { font-size: .875rem; font-weight: 500; color: var(--color-base-base-light-100); }
.nicholii-hero3_right .nicholii-hcar_role {
  font-family: var(--typography-font-label);
  font-size: .625rem; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(247, 247, 245, 0.72);
}
.nicholii-hero3_right .nicholii-hcar_lead { margin-top: .35rem; font-size: .9375rem; font-weight: 500; line-height: 1.3; }
.nicholii-hero3_right .nicholii-hcar_line { margin: 0; font-size: .8125rem; line-height: 1.45; color: rgba(247, 247, 245, 0.72); }
.nicholii-hero3_right .nicholii-hcar_dots { justify-content: flex-end; margin-top: 1rem; }

@media screen and (max-width: 991px) {
  .nicholii-hero3_grid { grid-template-columns: 1fr; gap: 4rem; }
  .nicholii-hero3_left { width: 100%; }
  .nicholii-hero3_top { margin-bottom: 10rem; }
  .nicholii-hero3_right .nicholii-hcar_stage { height: 70vw; max-height: 29rem; }
}
@media screen and (max-width: 767px) {
  .nicholii-hero3 { padding-top: 5.5rem; }
  .nicholii-hero3_card { padding: 2rem; }
  .nicholii-hero3_top { margin-bottom: 6.5rem; }
  .nicholii-hero3_h1 { font-size: 2.5rem; letter-spacing: -0.025em; }
  .nicholii-hero3_grid { gap: 3rem; }
  .nicholii-hero3_right .nicholii-hcar_stage { height: 110vw; max-height: 34rem; }
  .nicholii-hero3_right .nicholii-hcar_text { right: 1rem; bottom: 1rem; left: 1rem; }
}

/* Capability grid: rows stack, each scrolling over the one before it, and the
   app demo carries a keyline so it reads as distinct from the card's caption. */
.nicholii-caps { display: block; }
.nicholii-caps_row {
  position: sticky;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}
.nicholii-caps_row:nth-child(1) { top: 92px; }
.nicholii-caps_row:nth-child(2) { top: 112px; }
.nicholii-caps_row:nth-child(3) { top: 132px; }
.nicholii-cap_mock > * {
  /* The mock is a light surface now, so a light keyline is invisible. */
  border: 1px solid rgba(37, 37, 37, 0.14);
  border-radius: calc(var(--radius-general-default) - 6px);
  overflow: hidden;
}
@media screen and (max-width: 991px) {
  .nicholii-caps_row { grid-template-columns: 1fr; position: static; }
}
/* Capability stack (Ben, 3 Sep) -------------------------------------------
   Two problems, both only visible once the cards start stacking.

   The rows were 634, 640 and 665px tall. A sticky row pinning over a shorter
   one behind it makes the one behind look shoved out of place, which is what
   read as the third card pushing the first. They share a height now, so the
   pile sits square. Sized to the tallest natural card (Create studio after
   the denser preview type) with a little room, not to empty grey on shorter
   modules.

   And the cards carried no keyline at all, sitting at rgb(226,227,226) on a
   rgb(238,239,237) section, so a card lying over another was hard to read as a
   separate surface. A hairline gives each one its own edge. */
.nicholii-caps_row {
  /* The rows pin at 92, 112 and 132px from the top of the viewport, so a row
     needs its own height PLUS that offset to sit fully in frame. At a flat
     780px the third row wanted 912px of viewport, and any laptop shorter than
     that cut the bottom of the card off. The bottom of the card is where the
     name and the sub-line live, which is what was reported cut off on a
     1440x778 window. Sizing to the viewport keeps the whole card visible on a
     laptop and still gives a tall display the full 780. */
  height: clamp(520px, calc(100vh - 156px), 780px);
}
.nicholii-caps_row .nicholii-cap {
  height: 100%;
  min-height: 0;
  align-self: stretch;
}
/* Every mock in the stack fills the shared mock slot, regardless of content. */
.nicholii-caps_row .nicholii-mock {
  height: 100%;
  min-height: 0;
}
.nicholii-cap { border: 1px solid rgba(37, 37, 37, 0.16); }

@media screen and (max-width: 991px) {
  /* Below the stacking breakpoint the rows are a plain list again. */
  .nicholii-caps_row { height: auto; }
  .nicholii-caps_row .nicholii-cap { height: auto; }
}

/* On a short window the pin offsets eat the room the cards need, and procure is
   the first to be cut because it briefly shows two stages at once while one
   cross-fades into the next. Tightening the stagger gives back 40px, which is
   enough to keep every card whole. The stacked edges still read at 12px. */
@media screen and (min-width: 992px) and (max-height: 860px) {
  .nicholii-caps_row:nth-child(1) { top: 76px; }
  .nicholii-caps_row:nth-child(2) { top: 88px; }
  .nicholii-caps_row:nth-child(3) { top: 100px; }
  .nicholii-caps_row { height: clamp(520px, calc(100vh - 116px), 780px); }
}

/* 520px of card plus the 132px pin needs 652px of viewport. Anything shorter
   cannot show a whole card however it is sized, so it gets the plain list
   instead, the same escape the product page uses. */
@media screen and (max-height: 651px) {
  .nicholii-caps_row { position: static; height: auto; }
  .nicholii-caps_row .nicholii-cap { height: auto; }
}

/* Procure is the one mock that shows two stages stacked rather than swapping
   them in place, so the shared mobile slot clipped its options list and its
   thinking state. Its height is identical at every point of the animation, so
   sizing it to its content costs nothing and never shifts the page. */
@media screen and (max-width: 991px) {
  .nicholii-cap_mock:has(> .nicholii-mock[data-nm="procure"]) {
    height: auto;
    max-height: none;
  }
  /* The slot's children are flex: 1 1 0 with height 100% so they fill a fixed
     slot. Once the slot is content-sized those two rules collapse the mock to
     nothing, so this one opts back out of both. */
  .nicholii-cap_mock > .nicholii-mock[data-nm="procure"] {
    flex: 0 0 auto;
    height: auto;
  }
}

/* --------------------------------------------------------------------------
   Launch film — sits between logo strip and home intro
   -------------------------------------------------------------------------- */
.section_launch-film {
  padding-top: var(--spacing--48);
  padding-bottom: var(--spacing--32);
  background-color: var(--color-base-cream);
}
.section_home-a-intro {
  padding-top: var(--spacing--48);
}
.nicholii-launch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 4vw, 3.25rem);
}
.nicholii-launch_copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  max-width: 40rem;
}
.nicholii-launch_copy .heading-style-h3 {
  color: var(--color-base-base-dark-100);
}
.nicholii-launch_body {
  margin: 0;
  max-width: 36rem;
  color: var(--color-tokens-tone-medium);
}
.nicholii-launch_player {
  position: relative;
  width: 100%;
  max-width: 85%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-general-default);
  overflow: hidden;
  background-color: var(--color-base-lift-dark);
}
.nicholii-launch_start {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: transparent;
  color: inherit;
}
.nicholii-launch_thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.nicholii-launch_play {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 5.25rem;
  height: 5.25rem;
  border-radius: 50%;
  background-color: var(--color-base-accent-primary);
  color: var(--color-base-base-dark-100);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
  transition: transform .2s ease, box-shadow .2s ease;
}
.nicholii-launch_play svg {
  display: block;
  margin-left: .2rem;
}
.nicholii-launch_start:hover .nicholii-launch_play,
.nicholii-launch_start:focus-visible .nicholii-launch_play {
  transform: scale(1.05);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28);
}
.nicholii-launch_start:focus-visible {
  outline: 2px solid var(--color-base-forest);
  outline-offset: 4px;
}
.nicholii-launch_frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background-color: #000;
}
.nicholii-launch_player.is-playing .nicholii-launch_start {
  display: none;
}

@media screen and (max-width: 991px) {
  .nicholii-launch_player { max-width: 92%; }
  .nicholii-launch_play { width: 4.5rem; height: 4.5rem; }
}
@media screen and (max-width: 767px) {
  .section_launch-film {
    padding-top: var(--spacing--24);
    padding-bottom: var(--spacing--24);
  }
  .section_home-a-intro {
    padding-top: var(--spacing--32);
  }
  .nicholii-launch_player { max-width: 100%; }
  .nicholii-launch_play { width: 4rem; height: 4rem; }
  .nicholii-launch_play svg { width: 22px; height: 22px; }
}

#launch-film {
  scroll-margin-top: 6rem;
}

/* The card is charcoal now, so its own copy inverts with it. The mock inside
   keeps its light treatment and is unaffected. */
.nicholii-cap { color: rgba(247, 247, 245, 0.88); border-color: rgba(247, 247, 245, 0.18); }
.nicholii-cap .nicholii-cap_head,
.nicholii-cap .nicholii-cap_head h3 { color: var(--color-base-base-light-100); }
.nicholii-cap .nicholii-cap_lead { color: var(--color-base-base-light-100); }
.nicholii-cap .nicholii-cap_desc { color: rgba(247, 247, 245, 0.74); }
.nicholii-cap .nicholii-cap_chip {
  border-color: rgba(247, 247, 245, 0.32);
  color: rgba(247, 247, 245, 0.78);
}