.site-header {
  position: fixed;
  z-index: 1000;
  top: var(--gap-small);
  right: 0;
  left: 0;
  width: 100%;
  padding: 0;
  pointer-events: none;
}

.site-header__inner {
  display: flex;
  min-height: var(--header-height);
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--background-default) 80%, transparent);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(12px);
  pointer-events: auto;
}

.site-brand {
  font-size: var(--font-size-navigation);
  font-weight: var(--font-weight-regular);
  text-decoration: none;
}

.site-nav__list {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.site-nav__list a,
.site-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-3);
  border: 0;
  border-radius: var(--radius-container);
  color: var(--text-default);
  background: transparent;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}

.site-nav__list a:hover,
.site-nav__list a:focus-visible,
.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a,
.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--text-inverse);
  background: var(--action-primary);
}

.site-nav-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.7rem;
  border: 0;
  border-radius: 50%;
  color: currentColor;
  background: transparent;
}

.site-nav-toggle span[aria-hidden] {
  display: block;
  width: 100%;
  height: 1px;
  margin: 0.35rem 0;
  background: currentColor;
  transition: transform var(--duration-fast) ease;
}

.section-heading {
  display: grid;
  gap: var(--space-2);
  max-width: 62.5rem;
}

.section-heading__eyebrow,
.statement__eyebrow,
.feature-card__eyebrow {
  margin: 0;
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-label);
  line-height: var(--line-height-label);
  letter-spacing: var(--letter-spacing-default);
  text-transform: uppercase;
}

.section-heading__title,
.statement__title {
  margin: 0;
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-section);
  letter-spacing: var(--letter-spacing-default);
}

.section-heading__body > :last-child,
.section-heading__paragraph > :last-child,
.statement__body > :last-child {
  margin-bottom: 0;
}

.section-heading__subtitle {
  font-size: var(--font-size-subtitle);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-section);
}

.section-heading__paragraph {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
}

.section-heading--center { margin-inline: auto; text-align: center; }
.section-heading--right { margin-left: auto; text-align: right; }

/* Base content block — Figma node 69:8789. */
.content-section {
  padding: var(--section-padding) var(--page-gutter);
  color: var(--text-default);
  background: var(--content-section-background, var(--background-subtle));
  overflow: hidden;
}

.content-section--background-default { --content-section-background: var(--background-default); }
.content-section--background-subtle { --content-section-background: var(--background-subtle); }
.content-section--background-inverse { --content-section-background: var(--background-inverse); }
.content-section--background-box-primary { --content-section-background: var(--boxes-primary); }
.content-section--background-box-secondary { --content-section-background: var(--boxes-secondary); }
.content-section--background-box-tertiary { --content-section-background: var(--boxes-tertiary); }

.content-section__inner {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--block-stack-gap, var(--gap-medium));
  align-items: center;
}

/* The content-to-components rhythm stays medium. Only the distance between
   repeatable additional blocks follows the block's selected stack gap. */
.content-section--extra-after .content-section__inner > .wp-block-bytjda-content-section-content + * {
  margin-top: calc(var(--gap-medium) - var(--block-stack-gap, var(--gap-medium)));
}

.content-section--extra-before .content-section__inner > .wp-block-bytjda-content-section-content {
  margin-top: calc(var(--gap-medium) - var(--block-stack-gap, var(--gap-medium)));
}

.content-section__content-area {
  display: grid;
  width: min(100%, var(--content-default));
  gap: var(--gap-small);
  margin-inline: auto;
}

/* Shared vertical collection used by every Gutenberg zone that accepts
   multiple child blocks. */
.block-stack {
  display: flex;
  flex-direction: column;
  gap: var(--block-stack-gap, var(--gap-medium));
}

.block-stack--gap-none { --block-stack-gap: 0px; }
.block-stack--gap-small { --block-stack-gap: var(--gap-small); }
.block-stack--gap-medium { --block-stack-gap: var(--gap-medium); }
.block-stack--gap-large { --block-stack-gap: var(--gap-large); }

/* The parent control is intentionally authoritative because the protected
   Content area is not always directly selectable in Gutenberg. */
.content-section--content-none .content-section__content-area { width: 100%; margin-inline: 0; }
.content-section--content-narrow .content-section__content-area { width: min(100%, var(--content-narrow)); }
.content-section--content-default .content-section__content-area { width: min(100%, var(--content-default)); }
.content-section--content-wide .content-section__content-area { width: min(100%, var(--content-wide)); }

.content-section__content-area > :where(p, .wp-block-paragraph) {
  margin: 0 auto;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
}

.content-section__content-area > * {
  width: 100%;
  max-width: none;
}

.content-section--extra-before .content-section__inner > .wp-block-bytjda-content-section-content { order: 2; }
.content-section--extra-before .content-section__inner > :not(.wp-block-bytjda-content-section-content) { order: 1; }
.content-section--extra-after .content-section__inner > .wp-block-bytjda-content-section-content { order: 1; }
.content-section--extra-after .content-section__inner > :not(.wp-block-bytjda-content-section-content) { order: 2; }

/* Gutenberg block rhythm: a Header Group followed by a component keeps the
   medium Figma gap unless a composed section defines a larger one. */
.wp-block-bytjda-header-group + :where(
  .wp-block-bytjda-list-of-cards,
  .wp-block-bytjda-side-by-side,
  .wp-block-bytjda-stats-and-content
) {
  margin-top: var(--gap-medium);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.tags--spacious {
  gap: var(--space-2);
}

.tag {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-2);
  border: var(--border-width-default) solid currentColor;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-small);
  line-height: var(--line-height-card);
}

.tag--large {
  min-height: 4rem;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-body);
}

.tag--white {
  color: var(--color-ink);
  background: var(--color-white);
  border-color: var(--color-ink);
}

/* Figma `Tags group`: medium and big, wrapping without an item limit. */
.tags-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.tags-content > .section-heading,
.tags-content > .tags-list {
  width: 100%;
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 0;
  margin: 0;
  list-style: none;
}

.tags-list--medium { gap: var(--space-2); }
.tags-list--big { gap: var(--gap-small); }

.tags-list--medium .tag {
  min-height: 2.5rem;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-card);
}

.tags-list--big .tag {
  min-height: 4.25rem;
  padding: var(--space-2) var(--gap-small);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-card);
}

/* Case study hero — Figma block 74:10629. */
.case-study-hero {
  display: grid;
  gap: var(--gap-large);
  padding: var(--section-padding) var(--page-gutter);
  padding-top: calc(var(--section-padding) + var(--gap-large));
  overflow: hidden;
  color: var(--text-default);
  background: var(--background-subtle);
}

.case-study-hero--background-light { background: var(--color-neutral-0); }
.case-study-hero--background-muted { background: var(--color-neutral-50); }
.case-study-hero--background-dark { background: var(--color-neutral-900); }
.case-study-hero--background-box-primary { background: var(--boxes-primary); }
.case-study-hero--background-box-secondary { background: var(--boxes-secondary); }
.case-study-hero--background-box-tertiary { background: var(--boxes-tertiary); }

.case-study-hero__content {
  display: grid;
  gap: var(--gap-small);
  width: min(100%, var(--content-wide));
  margin-inline: auto;
}

.case-study-hero__heading,
.case-study-hero .section-heading--hero {
  display: grid;
  gap: var(--space-2);
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  text-align: center;
}

.case-study-hero__eyebrow,
.case-study-hero .section-heading--hero .section-heading__eyebrow,
.case-study-hero__title,
.case-study-hero .section-heading--hero .section-heading__title,
.case-study-hero__subtitle,
.case-study-hero .section-heading--hero .section-heading__subtitle,
.case-study-hero__detail h2,
.case-study-hero__detail p,
.case-study-hero__tools p {
  margin: 0;
}

.case-study-hero__eyebrow,
.case-study-hero .section-heading--hero .section-heading__eyebrow {
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-label);
  line-height: var(--line-height-label);
  letter-spacing: var(--letter-spacing-default);
  text-transform: uppercase;
}

.case-study-hero__title,
.case-study-hero .section-heading--hero .section-heading__title {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-default);
}

.case-study-hero__subtitle,
.case-study-hero .section-heading--hero .section-heading__subtitle {
  max-width: var(--content-wide);
  font-size: var(--font-size-subtitle);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-section);
  letter-spacing: var(--letter-spacing-default);
}

.case-study-hero__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  width: 100%;
  min-width: 0;
}

.case-study-hero__summary-trigger {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  list-style: none;
}

.case-study-hero__summary-trigger::-webkit-details-marker { display: none; }
.case-study-hero__tags { justify-content: center; }

.case-study-hero__toggle {
  position: relative;
  flex: 0 0 4.25rem;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 50%;
  color: var(--text-inverse);
  background: var(--action-primary);
  transition: transform var(--duration-medium) var(--ease-out);
}

.case-study-hero__toggle::before,
.case-study-hero__toggle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.25rem;
  height: 0.25rem;
  border-radius: var(--radius-pill);
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%);
}

.case-study-hero__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.case-study-hero__summary[open] .case-study-hero__toggle { transform: rotate(45deg); }

.case-study-hero__details {
  --case-details-width: min(calc(100vw - (2 * var(--page-gutter))), var(--media-width));

  width: var(--case-details-width);
  max-width: none;
  min-width: 0;
  margin-block: 0;
  margin-inline: calc((100% - var(--case-details-width)) / 2);
  justify-self: stretch;
  contain: inline-size;
  border: var(--border-width-default) solid var(--border-default);
  border-radius: var(--radius-container);
  overflow: hidden;
  text-align: left;
}

.case-study-hero__detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.case-study-hero__detail {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3);
}

.case-study-hero__detail + .case-study-hero__detail { border-left: var(--border-width-default) solid var(--border-default); }
.case-study-hero__detail h2 { font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); line-height: var(--line-height-body); }
.case-study-hero__detail p { font-size: var(--font-size-small); line-height: var(--line-height-body); }

.case-study-hero__tools {
  display: grid;
  grid-template-columns: 9.3125rem 1fr;
  gap: var(--gap-medium);
  padding: var(--space-3) var(--space-5);
  border-top: var(--border-width-default) solid var(--border-default);
}

.case-study-hero__tools-label,
.case-study-hero__tools-list { font-size: var(--font-size-small); line-height: var(--line-height-body); }

.case-study-hero__media {
  display: block;
  width: min(100%, var(--media-width));
  aspect-ratio: 12 / 7;
  padding: var(--space-3);
  margin: 0 auto;
  border: var(--border-width-default) solid transparent;
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, var(--border-subtle), color-mix(in srgb, var(--border-subtle) 78%, var(--text-subtle)));
  box-shadow: none;
}

.case-study-hero__media--frame-grey {
  border-color: var(--color-neutral-100);
  background: linear-gradient(120deg, var(--color-neutral-100) 2%, #d0d0d0 100%);
}

.case-study-hero__media--frame-black {
  border-color: var(--color-neutral-900);
  background: linear-gradient(120deg, #1e1e1e 2%, var(--color-neutral-900) 98%);
}

.case-study-hero__media--frame-red {
  border-color: #a81017;
  background: linear-gradient(121.5deg, #d51f27 3%, #a81017 98%);
}

.case-study-hero__viewport {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-container);
  overflow: hidden;
  background: var(--background-default);
  box-shadow: var(--shadow-raised);
}

.case-study-hero__viewport img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-study-hero__viewport video,
.case-study-hero__viewport iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.case-study-hero__media--hug {
  width: fit-content;
  max-width: min(100%, var(--media-width));
  height: auto;
  aspect-ratio: auto;
}

.case-study-hero__media--hug .case-study-hero__viewport {
  width: fit-content;
  max-width: 100%;
  height: auto;
}

.case-study-hero__media--hug .case-study-hero__viewport :is(img, video) {
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.case-study-hero__media--hug .case-study-hero__viewport iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.case-study-hero__media--custom {
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  padding: 0;
  overflow: visible;
  background: transparent;
}

.case-study-hero__media--custom .case-study-hero__viewport {
  height: auto;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.case-study-hero__custom-blocks,
.case-study-hero__custom-blocks > .block-editor-inner-blocks,
.case-study-hero__custom-blocks > .block-editor-inner-blocks > .block-editor-block-list__layout {
  width: 100%;
}

.case-study-hero__media-placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: var(--text-subtle);
  background: var(--background-default);
}

/* Alternative immersive hero — Figma Pages 115:5520. */
.case-study-hero-cover {
  --hero-cover-end: var(--color-neutral-900);
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 100svh;
  align-items: flex-end;
  padding: var(--hero-cover-content-space, 40rem) var(--page-gutter) var(--section-padding);
  overflow: hidden;
  color: var(--color-white);
  background: var(--hero-cover-end);
}
.case-study-hero-cover[data-color-mode="light"] { --hero-cover-end: var(--color-white); color: var(--color-neutral-900); }
.case-study-hero-cover__media,
.case-study-hero-cover__gradient { position: absolute; top: 0; right: 0; left: 0; }
.case-study-hero-cover__media { z-index: -2; height: 100svh; }
.case-study-hero-cover__media :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-study-hero-cover__gradient { z-index: -1; bottom: 0; background: linear-gradient(to bottom, transparent 22svh, color-mix(in srgb, var(--hero-cover-end) 18%, transparent) 48svh, var(--hero-cover-end) 78svh, var(--hero-cover-end) 100%); pointer-events: none; }
.case-study-hero-cover__placeholder { width: 100%; height: 100%; background: var(--background-inverse); }
.case-study-hero-cover__content { display: grid; gap: var(--gap-large); width: min(100%, var(--content-wide)); margin-inline: auto; }
.case-study-hero-cover__content > .wp-block-bytjda-header-group { width: 100%; }
.case-study-hero-cover .section-heading--hero { color: inherit; }
.case-study-hero-cover .case-study-hero__details { background: color-mix(in srgb, var(--hero-cover-end) 82%, transparent); backdrop-filter: blur(1.5rem); }

.case-study-hero__summary:not([open]) > .case-study-hero__details { display: none; }
.case-study-hero__summary.is-editor-open > .case-study-hero__details { display: block; }

/* Case study opening: a custom composition when supplied, otherwise a quiet title reveal. */
.has-js .case-study-hero[data-case-opening]:not(.is-opening-ready):not(.is-opening-complete) > *,
.has-js [data-case-opening-overlay]:not(.is-opening-ready):not(.is-opening-complete) {
  visibility: hidden;
}

.case-study-hero--opening-default.is-opening-ready .section-heading--hero > *,
.case-study-hero--opening-default.is-opening-ready .case-study-hero__heading > *,
.case-study-hero--opening-default.is-opening-ready .case-study-hero__summary,
.case-study-hero--opening-default.is-opening-ready .case-study-hero__media {
  opacity: 0;
  transform: translateY(var(--space-3));
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
  transition-delay: calc(var(--case-opening-index, 0) * 100ms);
}

.case-study-hero--opening-default.is-opening-visible .section-heading--hero > *,
.case-study-hero--opening-default.is-opening-visible .case-study-hero__heading > *,
.case-study-hero--opening-default.is-opening-visible .case-study-hero__summary,
.case-study-hero--opening-default.is-opening-visible .case-study-hero__media {
  opacity: 1;
  transform: translateY(0);
}

/* Biovolts opening: ported from the original case-study hero. */
.case-study-hero--opening-biovolts { overflow: visible; }

.case-study-hero--opening-biovolts.is-opening-ready :is(.section-heading__eyebrow, .section-heading__subtitle, .case-study-hero__summary, .case-study-hero__media),
.case-study-hero--opening-biovolts.is-opening-ready .section-heading__title > span > span {
  will-change: opacity, transform;
  transition: none;
}

.case-study-hero--opening-biovolts.is-opening-ready .section-heading__eyebrow {
  opacity: 0;
  transform: translateY(12px);
}

.case-study-hero--opening-biovolts .section-heading__title > span {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-start;
  white-space: nowrap;
}

.case-study-hero--opening-biovolts.is-opening-ready .section-heading__title > span > span {
  display: inline-block;
  opacity: 0;
  transform: translateX(calc(var(--i) * .32em)) translateY(10px);
  transform-origin: center;
  backface-visibility: hidden;
}

.case-study-hero--opening-biovolts.is-opening-ready :is(.section-heading__subtitle, .case-study-hero__summary) {
  opacity: 0;
  transform: translateY(20px);
}

.case-study-hero--opening-biovolts.is-opening-ready .case-study-hero__media {
  opacity: 0;
  transform: translateY(64px);
}

.case-study-hero--opening-biovolts.is-opening-visible .section-heading__eyebrow {
  animation: biovolts-fade-up 500ms linear forwards;
}

.case-study-hero--opening-biovolts.is-opening-visible .section-heading__title > span > span {
  animation: biovolts-letter-join 920ms cubic-bezier(.22, 1, .36, 1) 300ms forwards;
}

.case-study-hero--opening-biovolts.is-opening-visible .section-heading__subtitle {
  animation: biovolts-fade-up 850ms cubic-bezier(.22, 1, .36, 1) 900ms forwards;
}

.case-study-hero--opening-biovolts.is-opening-visible .case-study-hero__media {
  animation: biovolts-image-up 1050ms cubic-bezier(.22, 1, .36, 1) 1020ms forwards;
}

.case-study-hero--opening-biovolts.is-opening-visible .case-study-hero__summary {
  animation: biovolts-fade-up 900ms cubic-bezier(.22, 1, .36, 1) 1020ms forwards;
}

@keyframes biovolts-letter-join {
  0% { opacity: 0; transform: translateX(calc(var(--i) * .32em)) translateY(10px); }
  16% { opacity: 1; }
  100% { opacity: 1; transform: translateX(0) translateY(0); }
}

@keyframes biovolts-fade-up {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes biovolts-image-up {
  0% { opacity: 0; transform: translateY(64px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes biovolts-letter-join-mobile {
  0% { opacity: 0; transform: translateX(calc(var(--i) * .18em)) translateY(8px); }
  16% { opacity: 1; }
  100% { opacity: 1; transform: translateX(0) translateY(0); }
}

@media (max-width: 48.875rem) {
  .case-study-hero--opening-biovolts.is-opening-ready .section-heading__title > span > span {
    transform: translateX(calc(var(--i) * .18em)) translateY(8px);
  }

  .case-study-hero--opening-biovolts.is-opening-visible .section-heading__title > span > span {
    animation-name: biovolts-letter-join-mobile;
  }

  .case-study-hero--opening-biovolts.is-opening-ready .case-study-hero__media {
    transform: translateY(42px);
  }
}

.case-study-hero--opening-framework .framework-the {
  position: relative;
  display: inline-block;
  color: transparent !important;
  -webkit-text-stroke: 2px var(--text-default);
}

.case-study-hero--opening-framework .framework-the { font-size: .55em; }

.case-study-hero--opening-framework .framework-word {
  position: relative;
  display: inline-block;
  color: var(--text-default) !important;
}

/* Preserve the timing and hierarchy of the original theFramework opening. */
.case-study-hero--opening-framework.is-opening-ready :is(.section-heading--hero, .case-study-hero__heading) > *,
.case-study-hero--opening-framework.is-opening-ready :is(.case-study-hero__summary, .case-study-hero__media) {
  transition: none;
}

.case-study-hero--opening-framework.is-opening-ready :is(.section-heading--hero, .case-study-hero__heading) > .section-heading__eyebrow {
  opacity: 0;
  transform: none;
  letter-spacing: .04em;
}

.case-study-hero--opening-framework .framework-eyebrow {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  letter-spacing: .04em;
}

.case-study-hero--opening-framework .framework-eyebrow > span {
  display: inline-block;
  opacity: 0;
  letter-spacing: .04em;
}

.case-study-hero--opening-framework .framework-eyebrow__left { transform: translateX(34px); }
.case-study-hero--opening-framework .framework-eyebrow__dot { transform: scale(.5); }
.case-study-hero--opening-framework .framework-eyebrow__right { transform: translateX(-34px); }

.case-study-hero--opening-framework.is-opening-ready :is(.section-heading--hero, .case-study-hero__heading) > .section-heading__title {
  opacity: 0;
  transform: translateY(18px);
}

.case-study-hero--opening-framework.is-opening-ready :is(.section-heading--hero, .case-study-hero__heading) > :is(.section-heading__subtitle, .section-heading__body),
.case-study-hero--opening-framework.is-opening-ready .case-study-hero__summary {
  opacity: 0;
  transform: translateY(18px);
}

.case-study-hero--opening-framework.is-opening-ready .case-study-hero__media {
  opacity: 0;
  transform: translateY(120px);
}

.case-study-hero--opening-framework.is-opening-visible :is(.section-heading--hero, .case-study-hero__heading) > .section-heading__eyebrow {
  animation:
    framework-fade 220ms linear forwards,
    framework-eyebrow-tracking 620ms linear 40ms forwards;
}

.case-study-hero--opening-framework.is-opening-visible .framework-eyebrow__left {
  animation: framework-eyebrow-left 620ms linear 40ms forwards;
}

.case-study-hero--opening-framework.is-opening-visible .framework-eyebrow__dot {
  animation: framework-eyebrow-dot 340ms linear 160ms forwards;
}

.case-study-hero--opening-framework.is-opening-visible .framework-eyebrow__right {
  animation: framework-eyebrow-right 620ms linear 40ms forwards;
}

.case-study-hero--opening-framework.is-opening-visible :is(.section-heading--hero, .case-study-hero__heading) > .section-heading__title {
  animation: framework-rise 420ms linear 580ms forwards;
}

.case-study-hero--opening-framework.is-opening-visible :is(.section-heading--hero, .case-study-hero__heading) > :is(.section-heading__subtitle, .section-heading__body),
.case-study-hero--opening-framework.is-opening-visible .case-study-hero__summary {
  animation: framework-rise 620ms cubic-bezier(.2, .8, .2, 1) 1420ms forwards;
}

.case-study-hero--opening-framework.is-opening-visible .case-study-hero__media {
  animation: framework-image-rise 800ms cubic-bezier(.2, .8, .2, 1) 1420ms forwards;
}

.case-study-hero--opening-framework .framework-word::after {
  position: absolute;
  inset: 0;
  color: #d71920;
  content: attr(data-text);
  clip-path: inset(0 100% 0 0);
  -webkit-text-stroke: 2px var(--text-default);
  pointer-events: none;
  white-space: nowrap;
}

.case-study-hero--opening-framework.is-opening-visible .framework-word::after {
  animation: framework-outline-sweep 1050ms linear 720ms forwards;
}

@keyframes framework-fade {
  to { opacity: 1; }
}

@keyframes framework-eyebrow-tracking {
  from { letter-spacing: .04em; }
  to { letter-spacing: .28em; }
}

@keyframes framework-rise {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes framework-image-rise {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes framework-eyebrow-left {
  from { opacity: 0; transform: translateX(34px); letter-spacing: .04em; }
  to { opacity: 1; transform: translateX(0); letter-spacing: .28em; }
}

@keyframes framework-eyebrow-right {
  from { opacity: 0; transform: translateX(-34px); letter-spacing: .04em; }
  to { opacity: 1; transform: translateX(0); letter-spacing: .28em; }
}

@keyframes framework-eyebrow-dot {
  from { opacity: 0; transform: scale(.5); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes framework-outline-sweep {
  0% { clip-path: inset(0 100% 0 0); }
  35% { clip-path: inset(0 58% 0 0); }
  52% { clip-path: inset(0 0 0 42%); }
  78% { clip-path: inset(0 0 0 78%); }
  100% { clip-path: inset(0 0 0 100%); }
}

.case-study-opening {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  padding: var(--page-gutter);
  place-items: center;
  overflow: hidden;
  color: var(--text-default);
  background: var(--background-default);
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duration-reveal) var(--ease-out), visibility 0s linear var(--duration-reveal);
}

.case-study-opening__content {
  width: min(100%, var(--content-wide));
  text-align: center;
}

.case-study-opening.is-opening-ready .case-study-opening__content > * {
  opacity: 0;
  transform: translateY(var(--space-3));
  transition: opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out);
}

.case-study-opening.is-opening-visible .case-study-opening__content > * {
  opacity: 1;
  transform: translateY(0);
}

.case-study-opening.is-opening-visible .case-study-opening__content > *:nth-child(2) { transition-delay: 100ms; }
.case-study-opening.is-opening-visible .case-study-opening__content > *:nth-child(3) { transition-delay: 200ms; }
.case-study-opening.is-opening-visible .case-study-opening__content > *:nth-child(n+4) { transition-delay: 300ms; }
.case-study-opening.is-opening-complete { opacity: 0; visibility: hidden; pointer-events: none; }
.has-case-study-opening { overflow: hidden; }

.datapoint-results__text {
  width: min(100%, var(--content-width));
  padding: 0;
  margin: 0 auto;
  overflow-wrap: anywhere;
  color: var(--text-default);
  background: transparent;
  font: inherit;
  white-space: pre-wrap;
}

@media (prefers-reduced-motion: reduce) {
  .case-study-hero--opening-default.is-opening-ready .section-heading--hero > *,
  .case-study-hero--opening-default.is-opening-ready .case-study-hero__heading > *,
  .case-study-hero--opening-default.is-opening-ready .case-study-hero__summary,
  .case-study-hero--opening-default.is-opening-ready .case-study-hero__media,
  .case-study-hero--opening-framework .framework-eyebrow > span,
  .case-study-hero--opening-biovolts :is(.section-heading__eyebrow, .section-heading__subtitle, .case-study-hero__summary, .case-study-hero__media),
  .case-study-hero--opening-biovolts .section-heading__title > span > span,
  .case-study-opening.is-opening-ready .case-study-opening__content > * {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }

  .case-study-opening { transition: none; }

  .case-study-hero--opening-framework .framework-word::after { display: none; }
}

@media (max-width: 35rem) {
  .case-study-hero {
    gap: var(--gap-large);
    padding-block: var(--section-padding);
    padding-top: calc(var(--section-padding) + var(--gap-large));
    padding-inline: var(--page-gutter);
  }

  .case-study-hero__content { gap: var(--gap-small); }

  .case-study-hero--opening-framework .framework-eyebrow { gap: var(--space-1); }
  .case-study-hero--opening-framework :is(.framework-eyebrow__left, .framework-eyebrow__right) { letter-spacing: .16em; }
  .case-study-hero--opening-framework.is-opening-ready .case-study-hero__media { transform: translateY(70px); }

  .case-study-hero__summary-trigger {
    flex-direction: column;
    gap: var(--space-2);
  }

  .case-study-hero__tags { gap: var(--space-2); }
  .case-study-hero__tags .tag--large {
    min-height: 2.5rem;
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-card-body);
  }

  .case-study-hero__toggle {
    flex-basis: 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
  }

  .case-study-hero__toggle::before,
  .case-study-hero__toggle::after { width: 0.875rem; height: 0.1875rem; }

  .case-study-hero__detail-grid { grid-template-columns: 1fr; }
  .case-study-hero__detail + .case-study-hero__detail { border-top: var(--border-width-default) solid var(--border-default); border-left: 0; }
  .case-study-hero__tools { grid-template-columns: 1fr; gap: var(--space-2); padding: var(--space-3); }
  .case-study-hero__media { padding: var(--space-2); border-radius: var(--radius-container); }
  .case-study-hero__viewport { border-radius: var(--radius-small); }
}

.case-summary,
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1px;
  border: var(--border-width-default) solid var(--border-default);
  border-radius: var(--radius-small);
  overflow: hidden;
}

.case-summary__item,
.metric {
  min-width: 0;
  padding: var(--space-3);
  outline: var(--border-width-default) solid var(--border-default);
}

.case-summary__label,
.metric__label {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-small);
  text-transform: uppercase;
}

.metric__value {
  margin: 0;
  font-size: var(--font-size-metric);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-metric);
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--card-padding);
  border: var(--border-width-default) solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--background-default);
  box-shadow: var(--shadow-card);
}

.feature-card__title {
  margin: 0;
  font-size: var(--font-size-card-title);
}

.feature-card__description {
  margin: 0;
}

.card-list { display: flex; gap: var(--gap-small); width: 100%; }
.card-list--column { flex-direction: column; }
.card-list--column .card-list__card { flex: 0 0 auto; }
.card-list__card {
  position: relative;
  display: flex;
  box-sizing: border-box;
  min-width: 0;
  flex: 0 0 auto;
  flex-direction: column;
  overflow: hidden;
  color: var(--text-default);
  background: var(--card-list-card-background, var(--background-default));
  text-decoration: none;
}
.card-list--row > .card-list__card { flex: 1 1 0; }
.card-list > a.card-list__card {
  display: flex;
  color: var(--text-default);
  text-decoration: none;
}
.card-list--column > a.card-list__card {
  width: 100%;
  flex: 0 0 auto;
}
.card-list--individual .card-list__card { border: var(--border-width-default) solid var(--border-default); border-radius: var(--radius-card); box-shadow: var(--elevation-sm); }
.card-list--together { gap: var(--border-width-default); overflow: hidden; border: var(--border-width-default) solid var(--text-subtle); border-radius: var(--radius-media); background: var(--text-subtle); }
.card-list--together .card-list__card { border-radius: 0; }
.card-list__card--round { border-radius: var(--radius-media); }
.card-list__card.is-inverted { color: var(--text-default); background: var(--background-default); }
.card-list__media { position: relative; aspect-ratio: 452 / 620; min-height: 0; overflow: hidden; }
.card-list__media::after { position: absolute; inset: 40% 0 0; content: ""; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--color-neutral-900) 48%, transparent)); }
.card-list--thumbnail .card-list__media::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  background: color-mix(in srgb, var(--color-neutral-900) 40%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-medium) var(--ease-out);
}
.card-list--thumbnail .card-list__card::after {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 6.25rem;
  height: 6.25rem;
  border: var(--border-width-default) solid var(--color-ink);
  border-radius: var(--radius-full);
  content: "";
  background: var(--color-white) url("../icons/card-arrow-diagonal.svg") center / 2rem 2rem no-repeat;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.8);
  transition: opacity var(--duration-medium) var(--ease-out), transform var(--duration-medium) var(--ease-out);
}
.card-list--thumbnail .card-list__card--horizontal::after { left: 25%; }
.card-list--thumbnail .card-list__card:is(:hover, :focus-visible, :focus-within) .card-list__media::before,
.card-list--thumbnail .card-list__card:is(:hover, :focus-visible, :focus-within)::after { opacity: 1; }
.card-list--thumbnail .card-list__card:is(:hover, :focus-visible, :focus-within)::after { transform: translate(-50%, -50%) scale(1); }
.card-list--thumbnail .card-list__card.is-inverted .card-list__media::before,
.card-list--thumbnail .card-list__card.is-inverted::after { opacity: 1; }
.card-list--thumbnail .card-list__card.is-inverted::after { transform: translate(-50%, -50%) scale(1); }
.card-list--thumbnail .card-list__card.is-inverted:is(:hover, :focus-visible, :focus-within) .card-list__media::before,
.card-list--thumbnail .card-list__card.is-inverted:is(:hover, :focus-visible, :focus-within)::after { opacity: 0; }
.card-list--thumbnail .card-list__card.is-inverted:is(:hover, :focus-visible, :focus-within)::after { transform: translate(-50%, -50%) scale(.8); }
.card-list__media img { width: 100%; height: 100%; object-fit: cover; }
.card-list__card--horizontal { flex-direction: row; }
.card-list__card--horizontal .card-list__media { width: 50%; aspect-ratio: 1; }
.card-list__content { z-index: 1; display: flex; flex-direction: column; gap: var(--gap-small); padding: var(--gap-medium); }
.card-list--thumbnail .card-list__card--vertical .card-list__content { margin-top: auto; }
.card-list--thumbnail .card-list__card--vertical .card-list__media + .card-list__content { position: absolute; inset: auto 0 0; color: var(--text-inverse); }
.card-list--thumbnail.card-list--column .card-list__card--horizontal { min-height: 38.75rem; }
.card-list--thumbnail .card-list__card--horizontal .card-list__media { flex: 1 1 50%; align-self: stretch; aspect-ratio: auto; }
.card-list--thumbnail .card-list__card--horizontal .card-list__media::after { display: none; }
.card-list--thumbnail .card-list__card--horizontal .card-list__content { flex: 1 1 50%; justify-content: center; }
.card-list--thumbnail.card-list--individual .card-list__card--horizontal { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.card-list--thumbnail.card-list--individual .card-list__card--horizontal .card-list__media { overflow: hidden; border: var(--border-width-default) solid var(--border-default); border-radius: var(--radius-card); box-shadow: var(--elevation-sm); }
.card-list__action { align-self: flex-start; margin-top: var(--gap-small); }
.card-list__eyebrow { margin: 0; font-size: var(--font-size-caption); text-transform: uppercase; }
.card-list__title { margin: 0; font-size: var(--font-size-subtitle); }
.card-list__description { margin: 0; font-size: var(--font-size-body); }
.card-list--thumbnail .card-list__tags {
  max-height: calc((2 * 2.5rem) + var(--space-1));
  overflow: hidden;
}
.card-list--text .card-list__card { min-height: 20rem; }
.card-list--text .card-list__content { height: 100%; }
.card-list--text .card-list__tags { margin-top: auto; }
.card-list__card--background-default { --card-list-card-background: var(--background-default); }
.card-list__card--background-subtle { --card-list-card-background: var(--background-subtle); }
.card-list__card--background-inverse { --card-list-card-background: var(--background-inverse); }
.card-list__card--background-box-primary { --card-list-card-background: var(--boxes-primary); }
.card-list__card--background-box-secondary { --card-list-card-background: var(--boxes-secondary); }
.card-list__card--background-box-tertiary { --card-list-card-background: var(--boxes-tertiary); }

/* Figma card components: `Thumbnaill card` and `Text card`. */
.thumbnaill-card,
.text-card {
  position: relative;
  display: flex;
  min-width: 0;
  overflow: hidden;
  color: var(--text-default);
  background: var(--background-default);
  text-decoration: none;
}

.thumbnaill-card {
  min-height: 38.75rem;
  flex-direction: column;
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-sm);
}

.thumbnaill-card__picture { position: relative; width: 100%; height: 100%; min-height: inherit; overflow: hidden; border: var(--border-width-default) solid var(--border-default); border-radius: inherit; }
.thumbnaill-card__picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumbnaill-card__picture::before,
.thumbnaill-card__picture::after {
  position: absolute;
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-medium) var(--ease-out), transform var(--duration-medium) var(--ease-out);
}
.thumbnaill-card__picture::before {
  z-index: 1;
  inset: 0;
  background: color-mix(in srgb, var(--color-neutral-900) 40%, transparent);
}
.thumbnaill-card__picture::after {
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 6.25rem;
  height: 6.25rem;
  border: var(--border-width-default) solid var(--color-ink);
  border-radius: var(--radius-full);
  background: var(--color-white) url("../icons/card-arrow-diagonal.svg") center / 2rem 2rem no-repeat;
  transform: translate(-50%, -50%) scale(.8);
}
.thumbnaill-card:is(:hover, :focus-visible, :focus-within) .thumbnaill-card__picture::before,
.thumbnaill-card:is(:hover, :focus-visible, :focus-within) .thumbnaill-card__picture::after { opacity: 1; }
.thumbnaill-card:is(:hover, :focus-visible, :focus-within) .thumbnaill-card__picture::after { transform: translate(-50%, -50%) scale(1); }
.thumbnaill-card.is-inverted .thumbnaill-card__picture::before,
.thumbnaill-card.is-inverted .thumbnaill-card__picture::after { opacity: 1; }
.thumbnaill-card.is-inverted .thumbnaill-card__picture::after { transform: translate(-50%, -50%) scale(1); }
.thumbnaill-card.is-inverted:is(:hover, :focus-visible, :focus-within) .thumbnaill-card__picture::before,
.thumbnaill-card.is-inverted:is(:hover, :focus-visible, :focus-within) .thumbnaill-card__picture::after { opacity: 0; }
.thumbnaill-card.is-inverted:is(:hover, :focus-visible, :focus-within) .thumbnaill-card__picture::after { transform: translate(-50%, -50%) scale(.8); }
.thumbnaill-card__blur { position: absolute; z-index: 2; inset: 0; display: flex; align-items: flex-end; background: linear-gradient(to bottom, transparent 42%, color-mix(in srgb, var(--color-neutral-900) 48%, transparent)); backdrop-filter: blur(0); }
.thumbnaill-card__information { display: grid; width: 100%; gap: var(--gap-small); padding: var(--gap-medium); color: var(--text-inverse); }
.thumbnaill-card__title { margin: 0; font-size: var(--font-size-subtitle); font-weight: var(--font-weight-heading); line-height: var(--line-height-section); }
.thumbnaill-card__tags {
  max-height: calc((2 * 2.5rem) + var(--space-2));
  overflow: hidden;
}
.thumbnaill-card__placeholder { display: grid; min-height: inherit; place-items: center; color: var(--text-subtle); }
.thumbnaill-card--horizontal { min-height: 25rem; }
.thumbnaill-card--horizontal .thumbnaill-card__picture { aspect-ratio: 2 / 1; }
.thumbnaill-card.is-inverted { color: var(--text-default); background: var(--background-default); }

.text-card { flex-direction: column; gap: var(--gap-small); padding: var(--gap-medium); color: var(--text-default); background: var(--text-card-background, var(--background-default)); }
.text-card__main { display: grid; width: 100%; gap: var(--space-2); }
.text-card__pre-title { margin: 0; font-size: var(--font-size-caption); font-weight: var(--font-weight-body); line-height: var(--line-height-label); text-transform: uppercase; }
.text-card__title { margin: 0; font-size: var(--font-size-card-title); font-weight: var(--font-weight-heading-strong); line-height: var(--line-height-card); }
.text-card__description { margin: 0; font-size: var(--font-size-body); font-weight: var(--font-weight-body); line-height: var(--line-height-body); }
.text-card--round { min-height: 21.125rem; justify-content: space-between; border: var(--border-width-default) solid var(--border-subtle); border-radius: var(--radius-card); box-shadow: var(--elevation-sm); }
.text-card--round .text-card__main { gap: var(--space-2); }
.text-card--straight-line .text-card__title { font-size: var(--font-size-section-title); line-height: var(--line-height-section); }
.text-card--straight-line .text-card__tags { margin-top: auto; }
.text-card--background-default { --text-card-background: var(--background-default); }
.text-card--background-subtle { --text-card-background: var(--background-subtle); }
.text-card--background-inverse { --text-card-background: var(--background-inverse); }
.text-card--background-box-primary { --text-card-background: var(--boxes-primary); }
.text-card--background-box-secondary { --text-card-background: var(--boxes-secondary); }
.text-card--background-box-tertiary { --text-card-background: var(--boxes-tertiary); }

/* Figma pattern `Device control`, composed from `iFrame Device` and buttons. */
.device-control { display: flex; width: min(100%, var(--media-width)); flex-direction: column; gap: var(--gap-small); margin-inline: auto; }
.device-list { --device-list-gap: var(--gap-small); display: flex; width: 100%; gap: var(--device-list-gap); }
.device-list--width-narrow { width: min(100%, var(--content-narrow)); margin-inline: auto; }
.device-list--width-default { width: min(100%, var(--content-default)); margin-inline: auto; }
.device-list--width-medium { width: min(100%, var(--side-content-max)); margin-inline: auto; }
.device-list--width-wide { width: min(100%, var(--content-wide)); margin-inline: auto; }
.device-list--width-full { width: 100%; max-width: none; }
.device-list--column { flex-direction: column; align-items: flex-start; }
.device-list--gap-none { --device-list-gap: 0px; }
.device-list--gap-medium { --device-list-gap: var(--gap-medium); }
.device-list--gap-large { --device-list-gap: var(--gap-large); }
.device-list__device { position: relative; width: fit-content; max-width: 100%; height: fit-content; margin: 0; padding: var(--space-1); overflow: hidden; border-radius: var(--radius-container); background: linear-gradient(99deg, var(--color-neutral-100) 2%, var(--color-neutral-300) 100%); box-shadow: var(--elevation-sm); }
.device-list--row .device-list__device { min-width: 0; flex: 0 1 auto; }
.device-list__device img { display: block; width: auto; max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.device-list__placeholder { display: grid; width: min(26.125rem, 100%); min-height: 32rem; place-items: center; padding: var(--gap-small); border-radius: var(--radius-sm); color: var(--text-subtle); background: var(--background-default); text-align: center; }
.device-list__caption { position: absolute; right: var(--space-2); bottom: var(--space-2); left: var(--space-2); padding: var(--space-2) var(--gap-small); border-radius: var(--radius-sm); opacity: 0; color: var(--color-white); background: color-mix(in srgb, var(--color-neutral-900) 80%, transparent); font-size: var(--font-size-caption); font-weight: var(--font-weight-light); line-height: var(--line-height-body); text-align: center; transform: translateY(var(--space-2)); transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .device-list__device:is(:hover, :focus-visible) .device-list__caption { opacity: 1; transform: translateY(0); }
}
@media (hover: none), (pointer: coarse) {
  .device-list__device:active .device-list__caption { opacity: 1; transform: translateY(0); }
}

.spring-card-reveal { width: 100%; overflow: hidden; border-radius: var(--radius-container); background: var(--color-neutral-900); }
.spring-card-reveal__stage { position: relative; width: 100%; aspect-ratio: 1918 / 1024; min-height: 28rem; overflow: hidden; perspective: 100rem; container-type: inline-size; }
.spring-card-reveal__floor { position: absolute; right: 4%; bottom: 4%; left: 4%; height: 44%; opacity: var(--spring-floor-opacity, 0); background: radial-gradient(ellipse at center, color-mix(in srgb, var(--brand-tertiary) 22%, transparent), transparent 68%); filter: blur(1.75rem); transform: rotateX(70deg); transform-origin: center bottom; }
.spring-card-reveal__card { position: absolute; z-index: 1; top: 47%; left: 50%; width: 40.8%; aspect-ratio: 782 / 587; margin: 0; overflow: hidden; border: max(1px, var(--border-width-default)) solid var(--brand-tertiary); border-radius: clamp(var(--radius-sm), 1.55vw, var(--radius-container)); background: var(--color-neutral-900); box-shadow: 0 2rem 3rem rgba(0, 0, 0, .32); transform: translate(-50%, -50%) translate3d(var(--spring-x, 0px), var(--spring-y, 0px), 0) rotate(var(--spring-rotate, 0deg)) skewX(var(--spring-skew, 0deg)); transform-origin: center; will-change: transform; }
.spring-card-reveal__card--1 { z-index: 1; }
.spring-card-reveal__card--2 { z-index: 2; }
.spring-card-reveal__card--3 { z-index: 3; }
.spring-card-reveal__card img,
.spring-card-reveal__placeholder { display: block; width: 100%; height: 100%; object-fit: cover; }
.spring-card-reveal__placeholder { display: grid; place-items: center; color: var(--text-inverse); background: var(--background-inverse); }
.spring-card-reveal__blur { position: absolute; inset: 0; background: color-mix(in srgb, var(--brand-tertiary) 10%, transparent); backdrop-filter: blur(.75rem); }
.spring-card-reveal__tag { position: absolute; z-index: 2; bottom: var(--space-3); left: var(--space-3); opacity: var(--spring-tag-opacity, 0); color: var(--color-white); border-color: currentColor; background: color-mix(in srgb, var(--color-neutral-900) 30%, transparent); backdrop-filter: blur(1rem); }
.spring-card-reveal.is-spring-complete { --spring-floor-opacity: 1; --spring-tag-opacity: 1; }
.spring-card-reveal.is-spring-complete .spring-card-reveal__card--1 { --spring-x: -28.3cqw; --spring-rotate: -4.33deg; --spring-skew: -4deg; }
.spring-card-reveal.is-spring-complete .spring-card-reveal__card--2 { --spring-x: 0px; --spring-rotate: -5.5deg; --spring-skew: -5deg; }
.spring-card-reveal.is-spring-complete .spring-card-reveal__card--3 { --spring-x: 28.3cqw; --spring-rotate: -5.5deg; --spring-skew: -5.5deg; }
.buttons-groups { display: flex; max-width: 100%; gap: var(--space-2); align-items: center; overflow-x: auto; scrollbar-width: thin; }
.button { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; padding: var(--space-1) var(--space-3); border: var(--border-width-default) solid var(--border-default); border-radius: var(--radius-container); font: inherit; font-size: var(--font-size-small); font-weight: var(--font-weight-body); line-height: var(--line-height-body); cursor: pointer; }
.button--primary { color: var(--text-inverse); background: var(--action-primary); }
.button--secondary { color: var(--text-default); background: var(--action-secondary); }
.button--primary:hover,
.button--secondary:hover { color: var(--text-inverse); background: var(--action-primary-hover); }
.button:disabled { color: var(--text-subtle); border-color: var(--border-subtle); background: var(--action-disabled); cursor: not-allowed; }

.iframe-device { display: flex; width: 100%; height: var(--iframe-device-height, 43.75rem); min-height: 0; flex-direction: column; padding: var(--gap-small); overflow: hidden; border-radius: var(--radius-card); box-shadow: var(--elevation-md); }
.iframe-device--grey { background: linear-gradient(120deg, var(--color-neutral-100) 2%, #d0d0d0 100%); }
.iframe-device--black { background: linear-gradient(120deg, #1e1e1e 2%, var(--color-neutral-900) 98%); }
.iframe-device--red { background: linear-gradient(121.5deg, #d51f27 3%, #a81017 98%); }
.iframe-device__browser { display: flex; min-height: 0; flex: 1; flex-direction: column; overflow: hidden; border-radius: var(--radius-container); background: var(--background-default); box-shadow: var(--elevation-sm); }
.iframe-device__browser-tab { display: flex; min-height: 3.5rem; flex: 0 0 auto; gap: 1.9375rem; align-items: center; padding-inline: var(--gap-small); border-bottom: var(--border-width-default) solid var(--border-subtle); color: var(--text-subtle); background: var(--background-subtle); }
.iframe-device__browser-decorative { position: relative; display: block; width: 3.8125rem; height: 0.9375rem; flex: 0 0 3.8125rem; background: url("../images/browser-decorative.svg") center / contain no-repeat; }
.iframe-device__page-name { font-size: var(--font-size-caption); font-weight: var(--font-weight-heading-strong); line-height: var(--line-height-body); white-space: nowrap; }
.iframe-device__viewport { position: relative; display: flex; min-height: 0; flex: 1; overflow: hidden; background: var(--background-default); }
.iframe-device__viewport iframe,
.iframe-device__viewport video { width: 100%; height: 100%; border: 0; background: var(--background-default); }
.iframe-device__viewport iframe { display: block; min-width: 0; max-width: 100%; flex: 1 1 auto; overflow-y: auto; }
.iframe-device__viewport:has(> .iframe-device__image) { align-items: flex-start; overflow-x: hidden; overflow-y: auto; }
.iframe-device__image { display: block; width: 100%; max-width: 100%; height: auto; flex: 0 0 auto; object-fit: contain; }
.iframe-device__viewport video { object-fit: cover; }
.iframe-device__placeholder { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--gap-small); color: var(--text-subtle); background: var(--background-default); text-align: center; pointer-events: none; }
.iframe-device__scroll-zone { position: absolute; z-index: 3; top: 0; right: 0; bottom: 0; display: flex; width: 0.5rem; justify-content: center; padding-block: var(--space-1); background: var(--background-subtle); pointer-events: none; }
.iframe-device__scroll-thumb { width: 0.3125rem; height: 9.1875rem; border-radius: var(--radius-full); background: var(--color-neutral-500); }
.iframe-device--mobile { width: min(100%, 26.125rem); height: min(var(--iframe-device-height, 54.625rem), 85vh); padding: var(--space-1); border-radius: var(--radius-container); box-shadow: var(--elevation-sm); }
.iframe-device--mobile .iframe-device__browser { border-radius: var(--radius-sm); }
.iframe-device--mobile .iframe-device__browser-tab { min-height: 3rem; padding-inline: var(--space-2); }
.iframe-device--mobile .iframe-device__browser-decorative { display: none; }
.iframe-device--mobile .iframe-device__scroll-zone { display: none; }
.iframe-device--no-scroll:has(.iframe-device__image) {
  width: fit-content;
  max-width: 100%;
  height: auto;
  min-height: 0;
}
.iframe-device--no-scroll:has(.iframe-device__image) .iframe-device__browser,
.iframe-device--no-scroll:has(.iframe-device__image) .iframe-device__viewport {
  width: fit-content;
  max-width: 100%;
  height: auto;
  min-height: 0;
  flex: 0 0 auto;
}
.iframe-device--no-scroll:has(.iframe-device__image) .iframe-device__viewport {
  overflow: hidden;
}
.iframe-device--no-scroll .iframe-device__image {
  width: auto;
  max-width: 100%;
  height: auto;
}
.iframe-device--no-scroll .iframe-device__scroll-zone { display: none; }

.stats-content__inner { display: grid; gap: var(--space-6); }
.stats-content__top { display: grid; grid-template-columns: minmax(0, 900fr) minmax(25rem, 732fr); gap: var(--gap-large); align-items: center; }
.stats-content__copy { z-index: 1; max-width: 56.25rem; transition: opacity var(--duration-medium) var(--ease-out); }
.stats-content__media { z-index: 2; display: flex; width: 100%; min-height: 31.25rem; align-items: center; justify-content: flex-end; isolation: isolate; }
.stats-content__media figure { position: relative; overflow: hidden; border: var(--border-width-default) solid var(--border-default); border-radius: var(--radius-media); }
.stats-content--media-stack .stats-content__media figure { flex: 0 0 min(49.73%, 22.75rem); height: 31.25rem; margin-right: -11rem; }
.stats-content--media-stack .stats-content__media figure:first-child { z-index: 3; }
.stats-content--media-stack .stats-content__media figure:nth-child(2) { z-index: 2; height: 28.125rem; }
.stats-content--media-stack .stats-content__media figure:nth-child(3) { z-index: 1; height: 25rem; margin-right: 0; }
.stats-content--media-stack .stats-content__media figure:nth-child(2) img { filter: brightness(.84) blur(1px); }
.stats-content--media-stack .stats-content__media figure:nth-child(3) img { filter: brightness(.76) blur(1px); }
.stats-content--media-single .stats-content__media figure { width: 100%; height: 31.25rem; }
.stats-content--media-none .stats-content__top { grid-template-columns: minmax(0, 56.25rem); justify-content: start; }
.stats-content__media img { width: 100%; height: 100%; object-fit: cover; }
.stats-content__media-tags { position: absolute; z-index: 2; right: var(--gap-small); bottom: var(--gap-small); left: var(--gap-small); display: flex; justify-content: center; overflow: hidden; flex-wrap: wrap; gap: var(--space-1); transition: opacity var(--duration-fast) var(--ease-out), visibility var(--duration-fast) var(--ease-out); }
.stats-content__media-tags .tag { flex: 0 0 auto; }
.stats-content__media-control { display: flex; flex-direction: column; gap: var(--gap-small); padding-block: var(--gap-small); border-bottom: var(--border-width-default) solid var(--border-default); }

/* Figma Media/Evolution hover: expand over (not around) the copy. This is
   deliberately limited to devices with a real hover pointer. */
@media (hover: hover) and (pointer: fine) {
  .stats-content--media-stack .stats-content__media-tags {
    visibility: hidden;
    opacity: 0;
  }

  .stats-content--media-stack .stats-content__media:hover .stats-content__media-tags {
    visibility: visible;
    opacity: 1;
  }

  .stats-content--media-stack .stats-content__media {
    justify-self: end;
    transition: width var(--duration-medium) var(--ease-out);
  }

  .stats-content--media-stack .stats-content__media figure {
    transition:
      flex-basis var(--duration-medium) var(--ease-out),
      width var(--duration-medium) var(--ease-out),
      height var(--duration-medium) var(--ease-out),
      margin var(--duration-medium) var(--ease-out);
  }

  .stats-content--media-stack .stats-content__media figure img {
    transition: filter var(--duration-medium) var(--ease-out);
  }

  .stats-content--media-stack .stats-content__top:has(.stats-content__media:hover) .stats-content__copy {
    opacity: .4;
  }

  .stats-content--media-stack .stats-content__media:hover {
    width: min(70vw, 70.75rem);
  }

  .stats-content--media-stack .stats-content__media:hover figure {
    flex: 0 0 22.75rem;
    width: 22.75rem;
    height: 31.25rem;
    margin-right: var(--gap-small);
  }

  .stats-content--media-stack .stats-content__media:hover figure img { filter: none; }

  .stats-content--media-stack .stats-content__media:hover figure:nth-child(3) {
    flex-basis: 22.25rem;
    width: 22.25rem;
    height: 31.25rem;
    margin-right: 0;
  }
}

.media-frame {
  overflow: hidden;
  border: var(--border-width-default) solid var(--border-default);
  border-radius: var(--radius-media);
  box-shadow: var(--shadow-card);
}

.media-frame__viewport {
  overflow: hidden;
}

.media-frame__viewport > :is(img, video, picture),
.media-frame__viewport picture > img {
  width: 100%;
  height: auto;
}

.media-frame__caption {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-small);
}

/* Native WordPress image lightbox thumbnail. */
figure.wp-lightbox-container,
.wp-block-gallery .blocks-gallery-item > figure:has(> img) {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 400 / 266;
  padding: 0;
  overflow: hidden;
  border: var(--border-width-strong) solid var(--color-border);
  border-radius: var(--radius-container);
}

figure.wp-lightbox-container > img,
.wp-block-gallery .blocks-gallery-item > figure:has(> img) > img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--radius-container) - var(--border-width-strong));
  cursor: zoom-in;
  object-fit: cover;
}

figure.wp-lightbox-container > .lightbox-trigger {
  top: 50% !important;
  right: auto !important;
  left: 50% !important;
  display: grid;
  width: 4rem;
  height: 4rem;
  padding: var(--space-2);
  border: var(--border-width-default) solid var(--color-ink);
  border-radius: var(--radius-full);
  place-items: center;
  color: var(--color-ink);
  background: var(--color-white);
  box-shadow: var(--elevation-sm);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.85);
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

figure.wp-lightbox-container > .lightbox-trigger svg {
  display: none;
}

figure.wp-lightbox-container > .lightbox-trigger::before {
  width: 1rem;
  height: 1rem;
  border: 0.15rem solid currentColor;
  border-radius: var(--radius-full);
  content: "";
}

figure.wp-lightbox-container > .lightbox-trigger::after {
  position: absolute;
  width: 0.65rem;
  height: 0.15rem;
  border-radius: var(--radius-full);
  content: "";
  background: currentColor;
  transform: translate(0.58rem, 0.58rem) rotate(45deg);
  transform-origin: left center;
}

figure.wp-lightbox-container > figcaption,
figure.wp-lightbox-container > .wp-element-caption,
.wp-block-gallery .blocks-gallery-item > figure:has(> img) > figcaption,
.wp-block-gallery.filebird-block-filebird-gallery > .blocks-gallery-item > figure:has(> img) > .blocks-gallery-item__caption {
  position: absolute;
  z-index: 3;
  right: var(--space-1);
  bottom: var(--space-1);
  left: var(--space-1);
  display: flex;
  width: auto;
  max-width: none;
  min-height: 3.375rem;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--gap-small);
  margin: 0;
  border-radius: var(--radius-sm);
  color: var(--color-white);
  background: color-mix(in srgb, var(--color-ink) 80%, transparent);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  text-align: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out), visibility var(--duration-fast);
}

figure.wp-lightbox-container:is(:hover, :focus-within) > .lightbox-trigger {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

figure.wp-lightbox-container:is(:hover, :focus-within) > :is(figcaption, .wp-element-caption),
.wp-block-gallery .blocks-gallery-item > figure:has(> img):hover > figcaption,
.wp-block-gallery.filebird-block-filebird-gallery > .blocks-gallery-item > figure:has(> img):hover > .blocks-gallery-item__caption {
  visibility: visible;
  opacity: 1;
}

.statement {
  display: grid;
  gap: var(--space-2);
  max-width: 70rem;
}

.explorer__tabs {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
}

.explorer__tab,
[data-tab-button] {
  padding: var(--space-1) var(--space-2);
  border: var(--border-width-default) solid currentColor;
  border-radius: var(--radius-pill);
  color: inherit;
  background: transparent;
  white-space: nowrap;
  cursor: pointer;
}

.explorer__tab[aria-selected="true"],
[data-tab-button][aria-selected="true"] {
  color: var(--text-inverse);
  background: var(--background-inverse);
}

[data-tab-panel][hidden],
[data-step-panel][hidden] {
  display: none;
}

[data-reveal].is-reveal-ready,
.reveal.is-reveal-ready {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-visible,
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.site-footer__card {
  display: grid;
  grid-template-columns: minmax(20rem, 2fr) repeat(4, minmax(8rem, 1fr));
  gap: var(--gap-medium);
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-card);
  background: var(--background-default);
  box-shadow: var(--shadow-card);
}

.site-footer__about,
.site-footer__group {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer :is(h2, p) {
  margin: 0;
}

.site-footer h2 {
  margin-bottom: var(--space-1);
  font-size: var(--font-size-subtitle);
  font-weight: var(--font-weight-heading-strong);
}

.site-footer :is(p, a) {
  font-size: var(--font-size-small);
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
  list-style: none;
}

.site-footer__meta { color: var(--text-subtle); }

/* Existing editor component compatibility. */
.tablet1 {
  overflow: hidden;
  border: 8px solid var(--background-default);
  border-radius: var(--radius-media);
  box-shadow: 0 30px 90px color-mix(in srgb, var(--color-neutral-900) 12%, transparent);
}

.tsummary summary {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  list-style: none;
}

.tsummary summary::-webkit-details-marker { display: none; }
.tdetails { padding: var(--space-3); border-radius: var(--radius-container); background: var(--background-default); }

/* Semantic Text Styles from Figma Foundations/Typography. */
.text-style--body-default { font-size: var(--font-size-body); font-weight: var(--font-weight-light); line-height: var(--line-height-body); text-transform: none; }
.text-style--body-default-bold { font-size: var(--font-size-body); font-weight: var(--font-weight-semibold); line-height: var(--line-height-body); text-transform: none; }
.text-style--body-sm { font-size: var(--font-size-small); font-weight: var(--font-weight-light); line-height: var(--line-height-body); text-transform: none; }
.text-style--body-sm-bold { font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); line-height: var(--line-height-body); text-transform: none; }
.text-style--heading-casestudy { font-size: var(--font-size-casestudy-title); font-weight: var(--font-weight-light); line-height: var(--line-height-display); text-transform: none; }
.text-style--heading-casestudy-bold { font-size: var(--font-size-casestudy-title); font-weight: var(--font-weight-bold); line-height: var(--line-height-display); text-transform: none; }
.text-style--heading-section { font-size: var(--font-size-section-title); font-weight: var(--font-weight-light); line-height: var(--line-height-section); text-transform: none; }
.text-style--heading-section-bold { font-size: var(--font-size-section-title); font-weight: var(--font-weight-semibold); line-height: var(--line-height-section); text-transform: none; }
.text-style--heading-card { font-size: var(--font-size-card-title); font-weight: var(--font-weight-light); line-height: var(--line-height-card); text-transform: none; }
.text-style--heading-card-bold { font-size: var(--font-size-card-title); font-weight: var(--font-weight-semibold); line-height: var(--line-height-card); text-transform: none; }
.text-style--subtitle-default { font-size: var(--font-size-subtitle); font-weight: var(--font-weight-light); line-height: var(--line-height-section); text-transform: none; }
.text-style--subtitle-default-bold { font-size: var(--font-size-subtitle); font-weight: var(--font-weight-semibold); line-height: var(--line-height-section); text-transform: none; }
.text-style--label-pre { font-size: var(--font-size-caption); font-weight: var(--font-weight-light); line-height: var(--line-height-label); text-transform: uppercase; }
.text-style--label-default { font-size: var(--font-size-caption); font-weight: var(--font-weight-light); line-height: var(--line-height-body); text-transform: none; }
.text-style--label-default-bold { font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); line-height: var(--line-height-body); text-transform: none; }
.text-style--metric-default { font-size: var(--font-size-metric); font-weight: var(--font-weight-regular); line-height: var(--line-height-metric); text-transform: none; }
.text-style--metric-default-bold { font-size: var(--font-size-metric); font-weight: var(--font-weight-bold); line-height: var(--line-height-metric); text-transform: none; }
/* Keep animated, letter-by-letter headings centred as a complete word. */
.case-content .biovolts-title {
	display: flex;
	width: 100%;
	margin-inline: auto;
	justify-content: center;
	text-align: center;
}

.case-content .biovolts-title > span {
	justify-content: center;
}