:root {
  /* --decorate-bg: #FF4290; */
  /* --decorate-bg: #FFDDEB; */
  --decorate-bg: #FF61A3;
  --decorate-text: #101010;
  --decorate-accent: #FFF302;
  --heading-pop: var(--decorate-accent);   /* the eyebrow text (problem, research…) */
  --heading-quiet: var(--decorate-text);   /* the big story headings: calm, like the body text (a bright accent felt like too much on long headings) */
  --media-gap: calc(var(--space-xl) * 2);
}

body {
  background: var(--decorate-bg);
}

header {
  background: var(--decorate-bg);
  color: var(--decorate-text);
}

.case-layout {
  display: grid;
  grid-template-columns: 1fr minmax(0, 75rem) 1fr;
  align-items: start;
}

.case-sidebar {
  position: fixed;
  inset-block-end: calc(var(--space-lg) + var(--space-xs));
  inset-inline-start: var(--space-lg);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.025rem;
}

.sidebar-box {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-block: var(--space-sm);
  padding-inline-start: var(--space-lg);
  padding-inline-end: var(--space-md);
  background: var(--decorate-bg);
  max-inline-size: 12rem;
  position: relative;
  overflow: hidden;
  max-block-size: 0;
  padding-block: 0;
  opacity: 0;
  transition: max-block-size 0.35s ease, opacity 0.3s ease, padding-block 0.3s ease;
}

.sidebar-box::before {
  content: '';
  position: absolute;
  inset-inline-start: var(--space-sm);
  inset-block-start: var(--space-sm);
  inset-block-end: var(--space-sm);
  inline-size: 2px;
  background: var(--decorate-accent);
  pointer-events: none;
}

.case-sidebar.open .sidebar-box {
  max-block-size: 20rem;
  padding-block: var(--space-sm);
  opacity: 1;
}

.sidebar-close {
  position: absolute;
  inset-block-start: var(--space-sm);
  inset-inline-end: var(--space-sm);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--decorate-text);
  line-height: 1;
}

.sidebar-item {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--space-xs);
  position: relative;
}

.sidebar-label {
  font-size: var(--text-sm);
  color: var(--decorate-accent);
  line-height: 1.2;
}

.sidebar-value {
  font-size: var(--text-sm);
  color: var(--decorate-text);
  line-height: 1.2;
}


.case-study {
  grid-column: 2;
  padding-inline: var(--space-xl);
}

.cs-section {
  padding-block: calc(var(--space-xl)*2);
  padding-inline: 8%;
}

.cs-subheading {
  font-size: clamp(1.75rem, 3.5vw, 3.5rem);
  font-weight: 500;
  font-family: 'Instrument Sans', sans-serif;
  letter-spacing: -0.05em;
  color: var(--heading-quiet);
  margin-block-end: var(--space-lg);
}
/* the section name (problem, research, design, solution) as an eyebrow above the story heading – small caps, in the accent colour */
.cs-subsubheading {
  font-size: 1.03rem;
  font-weight: 500;
  font-family: 'Instrument Sans', sans-serif;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--heading-quiet);
  margin-block-end: var(--space-xl);
}

.cs-eyebrow {
  margin-block-end: var(--space-xs);
  color: var(--heading-pop);
}

.cs-eyebrow + .cs-subheading {
  margin-block-start: 0;
}

/* an eyebrow that starts a new part in the middle of a section gets a big break above it */
.cs-eyebrow:not(:first-child) {
  margin-block-start: calc(var(--space-xl) * 2);
}

/* big headings stay on one line on desktop; js/heading-fit.js sets --fit (1 = full size) when one would be too wide */
@media (min-width: 701px) {
  .cs-subheading {
    white-space: nowrap;
    font-size: calc(clamp(1.75rem, 3.5vw, 3.5rem) * var(--fit, 1));
  }
}


.highlight {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(255, 243, 2, 0.7);
  text-underline-offset: 0.3em;
}

.cs-body {
  font-size: 1.03rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  margin-block-end: var(--space-xl);
}


.cs-bwicf-text {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 2.8rem;
  letter-spacing: -0.05em;
  color: #101010;
  line-height: 1;
  margin-block-start: var(--media-gap);
  margin-block-end: 0;
  text-align: center;
  -webkit-mask-image: radial-gradient(circle, #000 70%, transparent 71%);
  -webkit-mask-size: 3.5px 3.5px;
  mask-image: radial-gradient(circle, #000 70%, transparent 71%);
  mask-size: 3.5px 3.5px;
  animation: bwicf-jitter 0.7s steps(1) infinite;
}

@keyframes bwicf-jitter {
  0%   { transform: translate(0px, 0px); }
  20%  { transform: translate(2px, -1px); }
  40%  { transform: translate(-1px, 2px); }
  60%  { transform: translate(1px, 1px); }
  80%  { transform: translate(-2px, -1px); }
  100% { transform: translate(0px, 0px); }
}

.cs-jewelry-row-wrap {
  position: relative;
  margin-block-start: var(--media-gap);
  margin-block-end: var(--media-gap);
}

.cs-jewelry-star {
  position: absolute;
  width: 5rem;
  z-index: 1;
}

.cs-jewelry-star--tr {
  top: -2rem;
  right: -2rem;
  transform: rotate(25deg);
}

.cs-jewelry-star--bl {
  bottom: calc(var(--space-lg) + 2rem);
  left: -2rem;
}

.cs-jewelry-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}


.cs-jewelry-item {
  display: flex;
  flex-direction: column;
}

.cs-jewelry-row img {
  width: 100%;
  display: block;
}

.cs-jewelry-caption {
  font-size: var(--text-sm);
  color: #B8306B;
  line-height: 1.4;
  margin-block-start: var(--space-lg);
  margin-block-end: 0;
  max-inline-size: 85%;
}

.cs-jewelry-caption--indented {
  padding-inline-start: 2rem;
}

.cs-sticker-wrap {
  position: relative;
  width: calc(33.333% - var(--space-md));
  margin-block-start: var(--media-gap);
  margin-inline: auto;
}

.cs-full-video {
  width: 100%;
  display: block;
}

.cs-tw-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem;
  background: rgba(0,0,0,0.7);
  cursor: default;
  overflow: hidden;
  text-align: center;
}

.cs-tw-overlay span {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 2.5rem;
  letter-spacing: -0.05em;
  color: #FFDDEB;
  line-height: 1;
  display: block;
  width: 100%;
  white-space: nowrap;
  animation: tw-flash 0.6s step-end infinite;
}

.cs-tw-hover {
  color: var(--decorate-accent) !important;
}

.cs-tw-overlay.hidden {
  display: none;
}

@keyframes tw-flash {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

.cs-sticker {
  position: absolute;
  width: 14rem;
  height: 14rem;
  object-fit: contain;
  opacity: 1;
  transition: transform 0.6s ease;
}

.cs-sticker.spin {
  animation: sticker-spin 0.6s ease;
}

@keyframes sticker-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.cs-sticker--1 {
  left: -20rem;
  top: 15%;
  width: 17rem;
  height: 17rem;
  /* animation: sticker-1 1.2s step-end infinite; */
}

.cs-sticker--2 {
  right: -20rem;
  top: -10%;
  /* animation: sticker-2 1.2s step-end infinite; */
}

.cs-sticker--3 {
  right: -22rem;
  bottom: 0%;
  width: 22rem;
  height: 22rem;
  /* animation: sticker-3 1.2s step-end infinite; */
}


@keyframes sticker-1 {
  0%    { opacity: 1; }
  67%   { opacity: 0; }
  100%  { opacity: 0; }
}

@keyframes sticker-2 {
  0%    { opacity: 0; }
  17%   { opacity: 1; }
  67%   { opacity: 0; }
  100%  { opacity: 0; }
}

@keyframes sticker-3 {
  0%    { opacity: 0; }
  33%   { opacity: 1; }
  67%   { opacity: 0; }
  100%  { opacity: 0; }
}


.cs-speakers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.cs-speaker-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
}

.cs-bubble {
  width: 75%;
  display: block;
}

.cs-speaker-head {
  width: 6rem;
  height: 6rem;
  object-fit: cover;
  animation: speaker-shake1 0.8s ease infinite;
}

.cs-speaker-col:nth-child(1) .cs-speaker-head {
  margin-inline-end: auto;
  margin-inline-start: 10%;
}

.cs-speaker-col:nth-child(2) .cs-speaker-head {
  animation-name: speaker-shake2;
  animation-delay: 0.2s;
  margin-inline-start: auto;
  margin-inline-end: 10%;
}

@keyframes speaker-shake1 {
  0%, 100% { transform: rotate(0deg); }
  15%      { transform: rotate(-5deg); }
  30%      { transform: rotate(5deg); }
  45%      { transform: rotate(-4deg); }
  60%      { transform: rotate(4deg); }
  75%      { transform: rotate(-2deg); }
  90%      { transform: rotate(2deg); }
}
@keyframes speaker-shake2 {
  0%, 100% { transform: rotate(0deg); }
  15%      { transform: rotate(4deg); }
  30%      { transform: rotate(-4deg); }
  45%      { transform: rotate(4deg); }
  60%      { transform: rotate(-3deg); }
  75%      { transform: rotate(2deg); }
  90%      { transform: rotate(-2deg); }
}

.cs-sublabel {
  display: inline-block;
  background: #101010;
  color: #fff;
  font-family: 'DM Mono', monospace;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-block: 0.3em;
  padding-inline: 0.75em;
  transform: rotate(-3deg);
  margin-block-start: var(--space-xl);
  margin-block-end: var(--space-xl);
}

.cs-sublabel--alt {
  transform: rotate(3deg);
  margin-block-start: var(--space-xl);
}

.ca-wrap {
  position: relative;
  margin-block-start: var(--media-gap);
}

.ca-base {
  width: 100%;
  display: block;
}

.ca-layer {
  position: absolute;
  opacity: 0;
  animation-duration: 5s;
  animation-timing-function: step-end;
  animation-iteration-count: infinite;
}

/* commentary stickers: individually positioned */
.ca-sticker1 {
  width: 50%;
  top: 10%;
  left: 0%;
  animation: ca-show-sticker1 5s step-end infinite, ca-shake1 5s ease infinite;
}
.ca-sticker2 {
  width: 30%;
  top: 52%;
  left: 62%;
  animation: ca-show-sticker2 5s step-end infinite, ca-shake2 5s ease infinite;
}

/* 5s loop: base 0-1s (0-20%), stickers at 20%, tapes from 2.3s (46%), reset at 80% (4s), 1s base */
@keyframes ca-show-sticker1 {
  0%, 19.9%  { opacity: 0; }
  20%, 79.9% { opacity: 1; }
  80%, 100%  { opacity: 0; }
}
@keyframes ca-show-sticker2 {
  0%, 19.9%  { opacity: 0; }
  20%, 79.9% { opacity: 1; }
  80%, 100%  { opacity: 0; }
}

/* shake starts at 15% (0.7s) so stickers appear mid-shake at 21% (1s) */
@keyframes ca-shake1 {
  0%, 15%   { transform: rotate(0deg); }
  17%       { transform: rotate(-5deg); }
  19%       { transform: rotate(5deg); }
  21%       { transform: rotate(-4deg); }
  23%       { transform: rotate(4deg); }
  25%       { transform: rotate(-2deg); }
  27%       { transform: rotate(2deg); }
  29%, 100% { transform: rotate(0deg); }
}
@keyframes ca-shake2 {
  0%, 15%   { transform: rotate(0deg); }
  17%       { transform: rotate(4deg); }
  19%       { transform: rotate(-4deg); }
  21%       { transform: rotate(4deg); }
  23%       { transform: rotate(-3deg); }
  25%       { transform: rotate(2deg); }
  27%, 100% { transform: rotate(0deg); }
}

/* tapes: individually positioned to match Figma layout */
.ca-maria {
  width: 50%;
  top: 5%;
  left: 0%;
  animation-name: ca-show-maria;
}
.ca-wildlike {
  width: 50%;
  top: 40%;
  left: 20%;
  animation-name: ca-show-wildlike;
}
.ca-sogold {
  width: 50%;
  top: 10%;
  left: 45%;
  animation-name: ca-show-sogold;
}
.ca-iris {
  width: 55%;
  top: 20%;
  left: 50%;
  animation-name: ca-show-iris;
}

@keyframes ca-show-maria {
  0%, 45.9%  { opacity: 0; }
  46%, 79.9% { opacity: 1; }
  80%, 100%  { opacity: 0; }
}
@keyframes ca-show-wildlike {
  0%, 53.9%  { opacity: 0; }
  54%, 79.9% { opacity: 1; }
  80%, 100%  { opacity: 0; }
}
@keyframes ca-show-sogold {
  0%, 61.9%  { opacity: 0; }
  62%, 79.9% { opacity: 1; }
  80%, 100%  { opacity: 0; }
}
@keyframes ca-show-iris {
  0%, 69.9%  { opacity: 0; }
  70%, 79.9% { opacity: 1; }
  80%, 100%  { opacity: 0; }
}

.cs-media-placeholder {
  background: rgba(0,0,0,0.08);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
}

.dc-proto-wrap {
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.dc-proto-video {
  inline-size: 130%;
  display: block;
  transform: translate(-19.2%, -17.5%);
}

.dc-overview-wrap {
  overflow: hidden;
  margin-block-start: calc(var(--space-xl) * 2);
}

.dc-overview-video {
  inline-size: 100%;
  display: block;
  margin-block-end: -0.8rem;
}

.cs-media-text-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--media-gap);
  align-items: start;
  margin-block-start: var(--media-gap);
  margin-block-end: 0;
}

.cs-media-text-row--wide-right {
  grid-template-columns: 1fr 2fr;
}

.cs-media-text-row--wide-media {
  grid-template-columns: 2fr 1fr;
}

.tldr {
  padding-block: var(--space-xl);
  padding-inline: 8%;
  text-align: center;
}

.tldr p {
  font-size: 1.03rem;
  color: var(--decorate-accent);
  line-height: 1.5;
  font-weight: 500;
  font-family: var(--font);
  letter-spacing: -0.01em;
}

.reel-wrap {
  position: relative;
  margin-block-start: var(--space-xl);
  inline-size: 100vw;
  margin-inline-start: calc(50% - 50vw);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reel-wrap video {
  inline-size: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--decorate-bg);
}

#soundToggle,
#fullscreenToggle {
  position: absolute;
  inset-block-start: var(--space-md);
  background: var(--decorate-bg);
  border: none;
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--decorate-text);
  cursor: pointer;
  padding-block: var(--space-xs);
  padding-inline: var(--space-md);
  border-radius: 0;
}

#soundToggle {
  inset-inline-end: var(--space-md);
}

#fullscreenToggle {
  inset-inline-end: calc(var(--space-md) + 6rem);
}

.decorate-nav {
  position: fixed;
  inset-block-end: var(--space-lg);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-xs);
  background: var(--decorate-bg);
  padding-block: var(--space-xs);
  padding-inline: var(--space-sm);
}

.decorate-nav-btn {
  background: none;
  border: none;
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--decorate-text);
  cursor: pointer;
  padding-block: var(--space-xs);
  padding-inline: var(--space-md);
}

.decorate-nav-btn.active {
  color: var(--decorate-accent);
}

.decorate-nav-next {
  color: #000;
  background: #FFF302;
  border: 1px solid #FFF302;
  white-space: nowrap;
}

.decorate-nav-btn.sidebar-toggle {
  color: var(--decorate-text);
  padding-inline-start: 0;
}

.case-sidebar.open .sidebar-toggle {
  color: var(--decorate-accent);
}

.tools-panel.open .tools-btn {
  color: var(--decorate-accent);
}

.tools-panel {
  position: fixed;
  inset-block-end: calc(var(--space-lg) + var(--space-xs));
  inset-inline-end: var(--space-lg);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.025rem;
}

.tools-box {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-block: var(--space-sm);
  padding-inline-start: var(--space-md);
  padding-inline-end: var(--space-lg);
  background: var(--decorate-bg);
  inline-size: 12rem;
  position: relative;
  overflow: hidden;
  max-block-size: 0;
  padding-block: 0;
  opacity: 0;
  transition: max-block-size 0.35s ease, opacity 0.3s ease, padding-block 0.3s ease;
}

.tools-box::before {
  content: '';
  position: absolute;
  inset-inline-end: var(--space-sm);
  inset-block-start: var(--space-sm);
  inset-block-end: var(--space-sm);
  inline-size: 2px;
  background: var(--decorate-accent, #fff);
  pointer-events: none;
}

.tools-box .sidebar-close {
  inset-inline-end: auto;
  inset-inline-start: var(--space-xs);
}

.tools-box .sidebar-item {
  display: block;
  text-align: right;
}

.tools-panel.open .tools-box {
  max-block-size: 20rem;
  padding-block: var(--space-sm);
  opacity: 1;
}

.tools-btn { padding-inline-end: 0; }
.tools-panel.open .tools-btn { color: var(--decorate-accent); }

/* ── question stickers ── */
.cs-body--no-end  { margin-block-end: 0; }
.cs-body--no-start { margin-block-start: 0; }

.cs-stat-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-lg);
  align-items: start;
  margin-block-start: var(--media-gap);
}

.cs-sublabel + .cs-media-text-row {
  margin-block-start: 0;
}

.cs-sublabel + .cs-stat-row {
  margin-block-start: var(--space-xl);
}

#solution .cs-sublabel {
  margin-block-start: calc(var(--media-gap) * 1.5);
  margin-block-end: calc(var(--space-xl) * 2);
}

#solution .cs-sublabel:first-of-type {
  margin-block-start: var(--media-gap);
}

.cs-stat-row .cs-body--media-gap {
  margin-block-start: 0;
  margin-block-end: 0;
}

.cs-stat-row .cs-figure {
  margin-block-start: 0;
}

.cs-question-block {
  margin-block: var(--media-gap);
  position: relative;
  z-index: 0;
}

.cs-question-stickers {
  position: relative;
  block-size: 12rem;
}

.qs {
  position: absolute;
  display: block;
}

.qs-1 { inline-size: 34%; inset-inline-start: -2%;  transform: rotate(-5deg); z-index: 2; }
.qs-2 { inline-size: 26%; inset-inline-start: 25%;  transform: rotate(5deg); inset-block-start: 0%; z-index: 3; }
.qs-3 { inline-size: 24%; inset-inline-start: 48%;  transform: rotate(-5deg); inset-block-start: 0%; z-index: 4; }
.qs-4 { inline-size: 26%; inset-inline-start: 70%;  transform: rotate(5deg); inset-block-start: 0%; z-index: 3; }

/* ── lo-fi prototype horizontal scroll ── */
.lofi-grid {
  display: flex;
  flex-direction: row;
  gap: var(--space-md);
  overflow-x: auto;
  overflow-y: visible;
  padding-block-end: var(--space-md);
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}

.lofi-grid::-webkit-scrollbar { display: none; }
.lofi-grid:active { cursor: grabbing; }

.lofi-screen {
  flex: 0 0 auto;
  block-size: 32.5rem;
  inline-size: auto;
  display: block;
}

/* ── figure helpers ── */
.cs-figure {
  margin-block-start: var(--media-gap);
}

.cs-figure--no-end {
  margin-block-end: 0;
}

.cs-figure--centered {
  text-align: center;
}

.cs-figure--centered figcaption {
  text-align: start;
}

.cs-figure--prd figcaption {
  padding-inline-start: 6rem;
  margin-block-start: -1rem;
}

.cs-img-full {
  inline-size: 100%;
  display: block;
}

.cs-img-stats {
  inline-size: 70%;
  display: inline-block;
}

/* ── spacing modifiers ── */
.cs-body--media-gap          { margin-block-start: var(--media-gap); }
.cs-jewelry-caption--after-media { margin-block-start: var(--space-lg); }
.cs-jewelry-caption--speakers { margin-block-start: var(--space-xl); }

/* ── speakers + lofi spacing ── */
.cs-speakers { margin-block-start: var(--media-gap); }
.lofi-grid   { margin-block-start: var(--media-gap); }
.lofi-grid + .cs-jewelry-caption { margin-block-start: 0; }

/* ── svg filters element ── */
.svg-filters {
  position: absolute;
}

.cs-list {
  font-size: 1rem;
  line-height: 1.4;
  padding-inline-start: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-block-end: var(--space-xl);
}

/* ── moodboard animation ── */
.dc-moodboard-wrap {
  position: relative;
  margin-block-start: var(--media-gap);
  aspect-ratio: 16 / 9;
  background: var(--decorate-bg);
  overflow: hidden;
}

.dc-mb-item {
  position: absolute;
  inset-inline-start: var(--x);
  inset-block-start: var(--y);
  inline-size: 27%;
  opacity: 0;
  animation: dc-mb-loop var(--dur) steps(1) infinite;
  animation-delay: var(--delay);
}

.dc-mb-item img {
  inline-size: 100%;
  display: block;
}

@keyframes dc-mb-loop {
  0%, 18%   { opacity: 0; }
  19%, 65%  { opacity: 1; }
  66%, 100% { opacity: 0; }
}

.dc-mb-text {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(1.75rem, 3.5vw, 3.5rem);
  letter-spacing: -0.05em;
  color: #101010;
  -webkit-text-stroke: 0.06em #fff;
  paint-order: stroke fill;
  text-align: center;
  inline-size: 70%;
  line-height: 1;
}

.dc-logo-row .cs-figure {
  margin-block-start: 0;
}

.dc-logo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
  margin-block-start: var(--media-gap);
}

.dc-logo-row__img,
.dc-logo-row__video {
  inline-size: 100%;
  display: block;
}

.dc-logo-row__video {
  mix-blend-mode: darken;
}

.dc-logo-row__arrow {
  inline-size: 2rem;
  display: block;
}

.dc-flip-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--media-gap);
  align-items: start;
  margin-block-start: var(--media-gap);
}

.dc-flip-show {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.dc-flip-img--zoom {
  object-fit: cover;
  scale: 1.4;
}

.dc-flip-img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  will-change: opacity;
  animation: dc-flip 4s steps(1) infinite;
  animation-delay: calc(var(--i) * 1s - 4s);
}

@keyframes dc-flip {
  0%   { opacity: 1; }
  25%  { opacity: 0; }
  100% { opacity: 0; }
}

.dc-texture-wrap {
  margin-block-start: var(--media-gap);
  text-align: center;
}

.dc-texture-text {
  will-change: background-position;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(3rem, 12vw, 10rem);
  letter-spacing: -0.05em;
  line-height: 1;
  display: inline-block;
  background-image: url('../Assets/Decorate/images/texture 2.png?v=2');
  background-size: 120% 120%;
  background-position: 30% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: dc-texture-shift 1s steps(1) infinite;
}

@keyframes dc-texture-shift {
  0%   { background-position: 0% 0%; }
  14%  { background-position: 35% 20%; }
  28%  { background-position: -25% 45%; }
  42%  { background-position: 55% -30%; }
  57%  { background-position: -40% 60%; }
  71%  { background-position: 30% -50%; }
  85%  { background-position: -55% 25%; }
  100% { background-position: 0% 0%; }
}

.cs-bts-video {
  inline-size: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 60%;
}

.roughen {
  filter: url(#roughen);
}


/* a black strip label (User flow, Low fidelity, Branding) acts as the eyebrow of the big heading right under it:
   it sits close to it, instead of the big gap it has above body text */
.cs-sublabel:has(+ .cs-subheading) {
  margin-block-end: var(--space-xs);
}