/* Citi layout study. Every rule is scoped to the opt-in case, not the feed. */
.case-editorial {
  --case-canvas: radial-gradient(ellipse at 12% 8%, #edf7fc 0%, transparent 62%),
    linear-gradient(135deg, #d8ebf5 8%, #c3dced 60%, #b1cfe7 100%);
  --case-canvas-ink: #405363;
  --case-screen-shadow: 0 6px 12px -6px rgb(27 59 86 / 14%), 0 24px 36px -20px rgb(27 59 86 / 30%);
}

.case-editorial .case-editorial-shell {
  box-sizing: border-box;
  width: min(100%, 1480px);
  margin-inline: auto;
  padding: 0 clamp(24px, 5vw, 80px) 112px;
}

.case-editorial .case-editorial-intro {
  max-width: none;
  margin: 0;
  padding: 96px 0 48px;
  text-align: center;
}
.case-editorial .case-editorial-intro .portfolio-viewer-intro-copy {
  width: 100%;
}

.case-editorial .portfolio-viewer-summary {
  max-width: 680px;
  margin: 24px auto 0;
}
.case-editorial .portfolio-viewer-loading {
  color: var(--portfolio-copy);
  font-size: var(--type-detail);
  text-align: center;
  margin: 0;
}

.case-editorial .case-editorial-hero {
  align-items: center;
  background: var(--case-canvas);
  border-radius: var(--nd-radius-preview-canvas);
  display: flex;
  justify-content: center;
  gap: clamp(24px, 4vw, 64px);
  height: clamp(400px, 44vw, 600px);
  padding: 48px;
  box-sizing: border-box;
}

.case-editorial .case-editorial-hero-phone {
  flex: 0 1 auto;
  height: 100%;
  max-width: 27%;
  aspect-ratio: 589 / 1280;
}

.case-editorial .case-editorial-hero-phone img {
  border-radius: 8.2% / 3.8%;
  box-shadow: 0 8px 16px -8px rgb(20 35 55 / 16%), 0 24px 40px -20px rgb(20 35 55 / 24%);
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The source moves in depth. Reserve space around its largest frame, keeping
   the complete alpha canvas visible at every viewport width. */
.case-editorial .case-editorial-hero.citi-hero-stage {
  height: clamp(400px, 47vw, 680px);
  padding: clamp(32px, 4vw, 56px);
  overflow: hidden;
}
.case-editorial .citi-hero-video {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: contain;
  background: transparent;
}
.case-editorial .citi-hero-surface { position:relative; width:100%; height:100%; }
.case-editorial .citi-hero-surface > :is(.citi-hero-video,.citi-hero-poster) { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.case-editorial .citi-hero-surface > .citi-hero-video { opacity:0; }
.case-editorial .citi-hero-surface[data-frame-ready] > .citi-hero-video { opacity:1; }
.case-editorial .citi-hero-surface[data-frame-ready] > .citi-hero-poster { opacity:0; }
@media (max-width: 767px) {
  .case-editorial .case-editorial-hero.citi-hero-stage {
    height: auto;
    aspect-ratio: 1.25;
    padding: 24px 12px;
  }
}

.case-editorial .case-editorial-contribution,
.case-editorial .case-editorial-chapter,
.case-editorial .case-editorial-outcome {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.85fr);
  gap: clamp(40px, 6vw, 96px);
  width: 100%;
}

.case-editorial .case-editorial-contribution {
  margin: 56px 0 104px;
  align-items: start;
}
.case-editorial .case-editorial-contribution .case-editorial-label { margin: 0 0 16px; }
.case-editorial .case-editorial-contribution .cms-rich-text p { margin: 0; }
.case-editorial .case-editorial-contribution .cms-rich-text p + p { margin-top: 20px; }

/* Before/After has its own copy; the following size study has its own controls. */
.case-editorial-prototype-story { display:grid; gap:48px; }
.prototype-player-still {
  display: grid; place-items: center; aspect-ratio: 1; margin: 0;
  border-radius: 16px; background: var(--case-canvas); overflow: hidden;
}
.prototype-player-still > .preview-browser {
  --preview-browser-toolbar: clamp(20px, 3vw, 30px);
  width: 82%; box-sizing: border-box;
  padding: calc(var(--preview-browser-rim) + var(--preview-browser-toolbar)) var(--preview-browser-rim) var(--preview-browser-rim);
}
.prototype-player-still img { display: block; width: 100%; height: auto; border-radius: var(--preview-browser-inner-radius); }

.case-editorial .case-editorial-label,
.case-editorial .case-editorial-number {
  color: var(--heading);
  font-size: var(--type-detail);
  font-weight: 600;
  letter-spacing: .1em;
  line-height: var(--type-detail-leading);
  text-transform: uppercase;
  margin: 0 0 16px;
}

.case-editorial .case-editorial-number { display: block; }
.case-editorial .case-editorial-role {
  color: var(--portfolio-copy);
  font-size: var(--type-body);
  line-height: var(--type-body-leading);
  margin: 0;
}

.case-editorial .case-editorial-chapters {
  display: flex;
  gap: 112px;
  max-width: none;
  margin: 0;
  padding: 0;
}

.case-editorial .case-editorial-copy {
  align-self: start;
  position: sticky;
  top: min(48px, calc(100dvh - var(--case-copy-height, 0px) - 32px));
}

.case-editorial .case-editorial-copy h3,
.case-editorial .case-editorial-outcome h3 {
  margin: 0 0 24px;
}

.case-editorial .cms-rich-text p { color: var(--portfolio-copy); }
.case-editorial .cms-rich-text p + p { margin-top: 20px; }
.case-editorial .case-editorial-media { min-width: 0; }
.case-editorial .case-editorial-media-group {
  display: grid;
  gap: 40px;
}
.case-editorial .case-editorial-figure {
  width: 100%;
  min-width: 0;
  margin: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.case-editorial .case-editorial-board {
  align-items: center;
  justify-items: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  aspect-ratio: 1;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: clamp(24px, 2.5vw, 40px);
  gap: 24px;
  background: var(--case-canvas);
  border-radius: 16px;
}
.case-editorial .case-editorial-board-item {
  min-width: 0;
  width: 100%;
  margin: 0;
  overflow: visible;
  border-radius: 0;
}
.case-editorial .case-editorial-figure > figcaption {
  color: var(--portfolio-copy);
  font-size: var(--type-detail);
  line-height: var(--type-detail-leading);
  font-weight: 400;
  text-align: left;
  margin: 16px 0 0;
  display: block;
  background: transparent;
  padding: 0;
}
.case-editorial .case-editorial-screen {
  border-radius: 8px;
  box-shadow: var(--case-screen-shadow);
}
.case-editorial .case-editorial-screen img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  box-shadow: none;
}
.case-editorial .case-editorial-screen:focus-within {
  outline: 2px solid #164fa4;
  outline-offset: 5px;
}
.case-editorial .case-editorial-board--phones > .case-editorial-board-item {
  width: 38%;
  max-width: 264px;
}
.case-editorial .case-editorial-board--phones .case-editorial-screen { border-radius: 8.2% / 3.8%; }
.case-editorial .case-editorial-board--phones.case-editorial-board--group {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 24px);
}
.case-editorial .case-editorial-board--phones.case-editorial-board--group > .case-editorial-board-item { width: 100%; }
.case-editorial .case-editorial-board--components {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  align-items: center;
}
.case-editorial .case-editorial-board--components .case-editorial-board-item { grid-column: 1; width: 90%; }
.case-editorial .case-editorial-board--components .case-editorial-board-item:nth-child(4) {
  grid-column: 2;
  grid-row: 1 / span 3;
  width: 100%;
}
.case-editorial .case-editorial-board--components .case-editorial-screen {
  border-radius: 10px;
  overflow: hidden;
}
.case-editorial :is(.case-editorial-board--page, .case-editorial-board--web) {
  display: block;
  padding: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 44px) 0;
  overflow: hidden;
}
.case-editorial :is(.case-editorial-board--page, .case-editorial-board--web) .case-editorial-board-item,
.case-editorial :is(.case-editorial-board--page, .case-editorial-board--web) .case-editorial-screen { height: 100%; }
.case-editorial :is(.case-editorial-board--page, .case-editorial-board--web) .case-editorial-screen {
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}
.case-editorial :is(.case-editorial-board--page, .case-editorial-board--web) .cms-image-zoom { height: 100%; }
.case-editorial .case-editorial-board--page img {
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 0;
}
/* Keep the complete web width while its content continues below the canvas. */
.case-editorial .case-editorial-board--web { aspect-ratio: 7 / 5; }
.case-editorial .case-editorial-board--web img { border-radius: 0; }
.case-editorial .case-editorial-board--web .case-editorial-screen {
  outline: 1px solid rgb(27 59 86 / 16%);
  box-shadow: 0 8px 20px -8px rgb(27 59 86 / 18%), 0 24px 36px -16px rgb(27 59 86 / 26%);
}
.case-editorial .case-editorial-board--motion .case-editorial-screen {
  border-radius: 0;
  box-shadow: none;
}

.case-editorial .case-editorial-outcome {
  border-top: 1px solid var(--border);
  padding-top: 48px;
}
.case-editorial .case-prototype-entry--hero { flex-shrink:0; margin:0; padding:0; max-width:calc(100% - 48px); text-align:center; pointer-events:auto; }
.case-editorial .case-prototype-entry--hero .prototype-launch { max-width:100%; white-space:normal; }
@media (max-width: 767px) {
  .case-editorial .case-prototype-entry--hero .prototype-launch {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 12px;
    line-height: 20px;
  }
}
.case-editorial[data-case-slug="big-brother"] .case-editorial-outcome-copy .cms-rich-text p { margin-bottom: 0; }
@media (min-width: 992px) {
  .case-editorial[data-case-slug="big-brother"] :is(.case-editorial-outcome-copy, .case-editorial-outcome .case-editorial-scale) {
    display: flex;
    flex-direction: column;
  }
  .case-editorial[data-case-slug="big-brother"] .case-editorial-outcome .case-editorial-scale { height: 100%; }
  .case-editorial[data-case-slug="big-brother"] .case-editorial-outcome .case-editorial-label { margin-bottom: 0; }
  .case-editorial[data-case-slug="big-brother"] .case-editorial-outcome .cms-metrics-source { margin-top: auto; }
  .case-editorial[data-case-slug="big-brother"] .case-editorial-outcome-copy .case-prototype-entry {
    margin-top: auto;
    padding: 24px 0 0;
  }
}
.case-editorial .case-editorial-scale dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin: 28px 0 20px;
}
.case-editorial .case-editorial-scale dl > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.case-editorial .case-editorial-scale dt {
  color: var(--portfolio-copy);
  font-size: var(--type-detail);
  font-weight: 400;
  line-height: var(--type-detail-leading);
}
.case-editorial .case-editorial-scale dd {
  color: var(--heading);
  font-size: var(--type-heading);
  font-weight: 500;
  line-height: var(--type-heading-leading);
  margin: 0;
  order: -1;
}
.case-editorial .case-editorial-extra { display: grid; gap: 64px; width: 100%; }

@media (max-width: 991px) {
  .case-editorial .case-editorial-contribution,
  .case-editorial .case-editorial-chapter,
  .case-editorial .case-editorial-outcome {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .case-editorial .case-editorial-copy { position: static; }
  .case-editorial .case-editorial-copy-content { max-width: 620px; }
  .case-editorial .case-editorial-contribution { margin: 40px 0 72px; }
  .case-editorial .case-editorial-chapters { gap: 80px; }
}

@media (max-width: 767px) {
  .case-editorial .case-editorial-shell { padding: 0 20px 80px; }
  .case-editorial .case-editorial-intro { padding: 80px 0 32px; }
  .case-editorial .portfolio-viewer-summary { margin-top: 20px; }
  .case-editorial .case-editorial-hero {
    height: auto;
    aspect-ratio: 1.45;
    gap: 5%;
    padding: 7%;
    border-radius: var(--nd-radius-preview-canvas);
  }
  .case-editorial .case-editorial-hero-phone { width: 27%; height: auto; }
  .case-editorial .case-editorial-hero-phone img { height: auto; }
  .case-editorial .case-editorial-board { padding: 28px 20px; border-radius: 10px; }
  .case-editorial :is(.case-editorial-board--page, .case-editorial-board--web) { padding-bottom: 0; }
  .case-editorial .case-editorial-board--phones { aspect-ratio: auto; }
  .case-editorial .case-editorial-board--phones > .case-editorial-board-item,
  .case-editorial .case-editorial-board--phones.case-editorial-board--group > .case-editorial-board-item {
    width: 100%;
    max-width: 264px;
  }
  .case-editorial .case-editorial-board--phones.case-editorial-board--group,
  .case-editorial .case-editorial-board--components {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 36px;
  }
  .case-editorial .case-editorial-board--components .case-editorial-board-item,
  .case-editorial .case-editorial-board--components .case-editorial-board-item:nth-child(4) {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    max-width: 320px;
  }
  /* Stacked cards need their full content height, not the desktop square.
     Explicit normal flow also avoids Safari retaining the grid's square size. */
  .case-editorial .case-editorial-board--components {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    height: auto;
    max-height: none;
  }
  .case-editorial .case-editorial-board--components .case-editorial-board-item {
    flex: none;
  }
  .case-editorial .case-editorial-scale dl { gap: 24px; }
}

/* Swiftly compositions already contain their own presentation backgrounds. */
.case-editorial:is([data-case-slug="web-store-locator"], [data-case-slug="mobile-store-locator"]) .case-editorial-board--unframed {
  display: block;
  aspect-ratio: auto;
  height: auto;
  max-height: none;
  padding: 0;
  background: #e7e7e2;
  overflow: hidden;
}
.case-editorial:is([data-case-slug="web-store-locator"], [data-case-slug="mobile-store-locator"]) .case-editorial-board--unframed :is(.case-editorial-board-item, .case-editorial-screen, .cms-image-zoom, img) {
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
  outline: none;
}
.case-editorial:is([data-case-slug="web-store-locator"], [data-case-slug="mobile-store-locator"]) .case-editorial-board--unframed img {
  display: block;
  object-fit: contain;
}

/* Extend the first two Web chapters vertically at their original screen scale. */
.case-editorial[data-case-slug="web-store-locator"] .case-editorial-board--web-roomy {
  display: block;
  aspect-ratio: auto;
  height: auto;
  max-height: none;
  padding: 8% 0;
  background: #e6e6de;
  overflow: hidden;
}
.case-editorial[data-case-slug="web-store-locator"] .case-editorial-board--web-roomy :is(.case-editorial-board-item, .case-editorial-screen, .cms-image-zoom, img) {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
  outline: none;
}
.case-editorial[data-case-slug="web-store-locator"] .case-editorial-board--web-roomy img {
  object-fit: contain;
  /* Only backdrop pixels beyond the screens blend into the added canvas. */
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94.7%, transparent);
}
.case-editorial[data-case-slug="mobile-store-locator"] [data-section-key="store-locator-showcase"] .case-editorial-board {
  padding: 0;
  background: transparent;
}

/* Split the comparison poster into equally scaled, typography-free phone studies. */
.case-editorial[data-case-slug="mobile-store-locator"] .case-editorial-board--locator-comparison {
  aspect-ratio: 1;
  padding: 0;
  background: #e6e6de;
  overflow: hidden;
}
.case-editorial[data-case-slug="mobile-store-locator"] [data-section-key="s004-image"] > .case-editorial-figure:nth-child(2) .case-editorial-board--locator-comparison {
  background: #c1d4ce;
}
.case-editorial[data-case-slug="mobile-store-locator"] .case-editorial-board--locator-comparison :is(.case-editorial-screen, .cms-image-zoom, img) {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
}
.case-editorial[data-case-slug="mobile-store-locator"] .case-editorial-board--locator-comparison img {
  object-fit: contain;
}

/* Real platform screens, without the source presentation headings. */
.case-editorial[data-case-slug="mobile-store-locator"] .case-editorial-board--locator-phones {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  aspect-ratio: 1;
  padding: 8%;
  gap: 3%;
  background: #c1d4ce;
}
.case-editorial[data-case-slug="mobile-store-locator"] .case-editorial-cover .case-editorial-board--locator-phones {
  aspect-ratio: 16 / 9;
  padding: 5% 20%;
}
.case-editorial[data-case-slug="mobile-store-locator"] .case-editorial-board--locator-phones .case-editorial-screen {
  border-radius: 4.4% / 2.03%;
  box-shadow: 0 8px 12px -6px rgb(22 39 33 / 18%), 0 22px 30px -16px rgb(22 39 33 / 30%);
  overflow: hidden;
}
.case-editorial[data-case-slug="mobile-store-locator"] .case-editorial-board--locator-phones :is(.cms-image-zoom, img) {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: inherit;
}
.case-editorial[data-case-slug="mobile-store-locator"] .case-editorial-board--locator-phones img {
  object-fit: contain;
}
@media (max-width: 767px) {
  .case-editorial[data-case-slug="mobile-store-locator"] .case-editorial-cover .case-editorial-board--locator-phones {
    aspect-ratio: 4 / 3;
    padding: 8%;
  }
}

/* Keep option labels, but give the original shadows room to finish. */
.case-editorial[data-case-slug="mobile-store-locator"] .case-editorial-board--locator-options {
  display: block;
  aspect-ratio: auto;
  padding: 0 0 4%;
  background: #076530;
  overflow: hidden;
}
.case-editorial[data-case-slug="mobile-store-locator"] .case-editorial-board--locator-options :is(.case-editorial-screen, .cms-image-zoom, img) {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
}
.case-editorial[data-case-slug="mobile-store-locator"] .case-editorial-board--locator-options img {
  object-fit: contain;
  mask-image: linear-gradient(to bottom, #000 94%, transparent);
}
/* Original phone pixels, with one continuous green presentation behind them. */
.case-editorial[data-case-slug="mobile-store-locator"] .case-editorial-board--locator-option-phones {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  aspect-ratio: auto;
  padding: 8%;
  gap: 5%;
  background: #076530;
}
.case-editorial[data-case-slug="mobile-store-locator"] .case-editorial-board--locator-option-phones .case-editorial-comparison-label {
  margin: 0 0 16px;
  color: #fff;
  text-align: center;
}
.case-editorial[data-case-slug="mobile-store-locator"] .case-editorial-board--locator-option-phones .case-editorial-screen {
  border-radius: 8.533% / 3.941%;
  box-shadow: 0 12px 24px -8px rgb(0 0 0 / 28%);
}
.case-editorial[data-case-slug="mobile-store-locator"] .case-editorial-board--locator-option-phones :is(.cms-image-zoom, img) {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8.533% / 3.941%;
}

/* Shared editorial presentation for the remaining portfolio cases. */
.case-editorial--collection .case-editorial-board--art,
.case-editorial--collection .case-editorial-board--motion {
  aspect-ratio: auto;
  padding: clamp(20px, 2.5vw, 40px);
}
.case-editorial--collection .case-editorial-board--art .case-editorial-screen {
  box-shadow: none;
  overflow: hidden;
}
.case-editorial--collection .case-editorial-board--web {
  aspect-ratio: var(--case-web-aspect, 7 / 5);
  padding: 8% 6% 0;
}
.case-editorial--collection .case-editorial-board--widgets {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.case-editorial--collection .case-editorial-board--widgets .case-editorial-screen {
  border-radius: 5%;
  overflow: hidden;
}
.case-editorial--collection :is(.case-editorial-board--comparison, .case-editorial-board--comparison-art) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  aspect-ratio: auto;
  padding: clamp(20px, 2.5vw, 40px);
  gap: clamp(16px, 2vw, 32px);
}
.case-editorial--collection .case-editorial-comparison-label {
  color: #24211a;
  font-size: var(--type-detail);
  line-height: var(--type-detail-leading);
  font-weight: 600;
  margin: 0 0 16px;
}
.case-editorial--collection .case-editorial-board--comparison-art .case-editorial-screen {
  aspect-ratio: 1;
  box-shadow: none;
  overflow: hidden;
}
.case-editorial--collection .case-editorial-board--comparison-art .cms-image-zoom {
  display: flex;
  align-items: center;
  height: 100%;
}
.case-editorial--collection .case-editorial-board--comparison-art img {
  max-height: 100%;
  object-fit: contain;
}
.case-editorial[data-case-slug="speedster-branding"] .case-editorial-board--comparison-art {
  padding: clamp(24px, 3vw, 40px);
  padding-block: clamp(64px, 8vw, 112px);
  min-height: clamp(320px, 36vw, 460px);
  gap: 48px;
  align-items: center;
  position: relative;
}
.case-editorial[data-case-slug="speedster-branding"] .case-editorial-evolution-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  color: #747478;
  pointer-events: none;
}
.case-editorial[data-case-slug="speedster-branding"] .case-editorial-board--comparison-art .case-editorial-board-item {
  width: min(100%, 184px);
}
.case-editorial[data-case-slug="speedster-branding"] .cms-brand-palette {
  padding: clamp(16px, 3vw, 32px);
  border-radius: 16px;
  background: #f7f7f7;
  box-sizing: border-box;
}
.case-editorial[data-case-slug="speedster-branding"] .cms-brand-palette-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
}
.case-editorial[data-case-slug="speedster-branding"] .cms-brand-colour-name {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.case-editorial[data-case-slug="speedster-branding"] .cms-brand-colour-name h3 {
  min-height: 2lh;
  font-size: var(--type-detail);
  line-height: var(--type-detail-leading);
  font-weight: 600;
  color: #1c1917;
}
.case-editorial[data-case-slug="speedster-branding"] .cms-brand-colour-codes {
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  margin-top: 16px;
}
.case-editorial[data-case-slug="speedster-branding"] :is(.cms-brand-colour-codes, .cms-brand-colour-codes dt, .cms-brand-colour-codes dd, .cms-brand-palette-note) {
  font-size: var(--type-detail);
  line-height: var(--type-detail-leading);
  color: #525252;
}
.case-editorial[data-case-slug="speedster-branding"] .cms-brand-colour-codes dd { min-height: 2lh; }
.case-editorial[data-case-slug="speedster-branding"] .cms-brand-colour-codes dt:not(:first-child) { margin-top: 8px; }
/* Speedster pairs share a quiet canvas; cutouts have no individual card surface. */
.case-editorial[data-case-slug="speedster-branding"] .case-editorial-board--characters {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  aspect-ratio: auto;
  padding: clamp(24px, 4vw, 56px);
  gap: clamp(12px, 2vw, 28px);
  isolation: isolate;
}
.case-editorial[data-case-slug="speedster-branding"] .case-editorial-board--characters .case-editorial-board-item {
  width: min(100%, 280px);
}
.case-editorial[data-case-slug="speedster-branding"] .case-editorial-board--characters :is(.case-editorial-screen, img) {
  border-radius: 0;
  box-shadow: none;
}
/* Early source renders contain white, so blend only those two illustrations. */
.case-editorial[data-case-slug="speedster-branding"] [data-section-key="speedster-mascot-exploration"] .case-editorial-screen {
  mix-blend-mode: multiply;
}
.case-editorial[data-case-slug="speedster-branding"] [data-section-key="speedster-mascot-exploration"] .case-editorial-board-item:first-child img {
  transform: translateX(-6%);
}
.case-editorial[data-case-slug="speedster-branding"] [data-section-key="speedster-mascot-exploration"] .case-editorial-board-item:last-child img {
  transform: translateX(-3%);
}
.case-editorial[data-case-slug="speedster-branding"] :is(.case-editorial-cover, [data-section-key="speedster-mascot-poses"]) .case-editorial-board-item:nth-child(2) img {
  transform: translateX(2.5%) scale(1.085);
}
.case-editorial[data-case-slug="speedster-branding"] .case-editorial-cover .case-editorial-board-item:first-child img {
  transform: translateX(12%);
}
.case-editorial[data-case-slug="speedster-branding"] .case-editorial-cover .case-editorial-board-item:nth-child(3) img {
  transform: translateX(-3.5%) scale(.985);
}
.case-editorial[data-case-slug="speedster-branding"] .case-editorial-board--full-art {
  aspect-ratio: auto;
  padding: 0;
  overflow: hidden;
}
.case-editorial[data-case-slug="speedster-branding"] .case-editorial-board--full-art .case-editorial-screen {
  border-radius: 0;
  box-shadow: none;
}
.case-editorial[data-case-slug="speedster-branding"] .case-editorial-board--paired-ads {
  grid-template-columns: 1.55fr 1fr;
  aspect-ratio: auto;
  padding: 6%;
  gap: clamp(16px, 2vw, 28px);
}
.case-editorial[data-case-slug="speedster-branding"] [data-section-key="speedster-facebook-context"] .case-editorial-board-item {
  width: min(70%, 360px);
}
.case-editorial--collection .case-editorial-board--prototype .case-editorial-board-item {
  width: min(42%, 300px);
}
.case-editorial--collection .case-editorial-board--prototype .cms-widget-prototype {
  width: 100%;
  max-width: none;
  box-shadow: none;
}
.case-editorial--collection .case-editorial-board--prototype .cms-widget-prototype > .cms-image-zoom > img {
  width: 389.953271028%;
  height: auto;
  max-height: none;
}
.case-editorial--collection .case-editorial-cover .case-editorial-board {
  min-height: 0;
  max-height: 680px;
  aspect-ratio: 16 / 9;
}
.case-editorial--collection .case-editorial-cover .case-editorial-board--hero {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5%;
  padding: 4%;
  height: clamp(320px, 44vw, 680px);
}
.case-editorial--collection .case-editorial-cover .case-editorial-board--hero .case-editorial-board-item {
  flex: 1 1 0;
  height: 100%;
  min-width: 0;
}
.case-editorial--collection .case-editorial-cover .case-editorial-board--hero .case-editorial-board-item--portrait {
  flex: 0 1 25%;
}
.case-editorial--collection .case-editorial-cover .case-editorial-board--hero .case-editorial-screen,
.case-editorial--collection .case-editorial-cover .case-editorial-board--hero .cms-image-zoom {
  height: 100%;
  box-shadow: none;
}
.case-editorial--collection .case-editorial-cover .case-editorial-board--hero .cms-image-zoom {
  display: flex;
  align-items: center;
  justify-content: center;
}
.case-editorial--collection .case-editorial-cover .case-editorial-board--hero img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.case-editorial[data-case-slug="speedster-branding"] .case-editorial-cover .case-editorial-board--characters {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  aspect-ratio: 2.4;
  padding: 4% 6%;
  gap: 2%;
  background: #e7e3da;
}
.case-editorial[data-case-slug="speedster-branding"] .case-editorial-cover .case-editorial-board--characters .case-editorial-board-item {
  width: 100%;
}
.case-editorial--collection .case-editorial-cover .case-editorial-board--prototype .case-editorial-board-item {
  width: min(22%, 264px);
}
.case-editorial--collection .case-editorial-media > * {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  margin-inline: 0;
}
.case-editorial--collection .case-editorial-media {
  display: grid;
  align-content: start;
  gap: 40px;
}
.case-editorial--collection .case-editorial-copy .cms-rich-text > div + div { margin-top: 24px; }
.case-editorial--collection .case-editorial-copy .cms-rich-text > div > :last-child { margin-bottom: 0; }
.case-editorial--collection .case-editorial-board--video { aspect-ratio: auto; }
.case-editorial--collection .case-editorial-board .cms-video-frame { border-radius: 8px; isolation: isolate; }
.case-editorial--collection .case-editorial-board--portrait-video .cms-video-frame {
  width: min(100%, 300px);
}
.case-editorial--collection .case-editorial-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: none;
  gap: 32px 24px;
}
.case-editorial--collection .case-editorial-video-grid .case-editorial-board { padding: 20px; }
.case-editorial--collection .case-editorial-video-grid figcaption { font-size: var(--type-detail); }
.case-editorial--collection .cms-metrics-source {
  font-size: var(--type-detail);
  line-height: var(--type-detail-leading);
  color: var(--portfolio-copy);
}
.case-editorial--collection .cms-brand-palette-grid,
.case-editorial--collection .springbom-colour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-editorial--collection .case-editorial-outcome--text .cms-rich-text { grid-column: 2; }

@media (max-width: 991px) {
  .case-editorial--collection .case-editorial-outcome--text .cms-rich-text { grid-column: auto; }
}
@media (max-width: 767px) {
  .case-editorial--collection .case-editorial-board--comparison {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .case-editorial--collection .case-editorial-cover .case-editorial-board--hero {
    height: calc((100vw - 40px) * .75);
    aspect-ratio: 4 / 3;
    padding: 6%;
  }
  .case-editorial--collection .case-editorial-cover .case-editorial-board--hero .case-editorial-board-item { height: 100%; }
  .case-editorial--collection .case-editorial-cover .case-editorial-board--hero img { height: auto; }
  .case-editorial--collection .case-editorial-board--widgets { grid-template-columns: minmax(0, 1fr); aspect-ratio: auto; gap: 32px; }
  .case-editorial--collection .case-editorial-board--widgets .case-editorial-board-item { max-width: 264px; }
  .case-editorial--collection .case-editorial-board--prototype { aspect-ratio: auto; }
  .case-editorial--collection .case-editorial-board--prototype .case-editorial-board-item,
  .case-editorial--collection .case-editorial-cover .case-editorial-board--prototype .case-editorial-board-item { width: min(100%, 264px); }
  .case-editorial--collection .case-editorial-cover .case-editorial-board--prototype { aspect-ratio: auto; max-height: none; }
  .case-editorial--collection .case-editorial-video-grid { grid-template-columns: 1fr; gap: 32px; }
  .case-editorial--collection .case-editorial-media { gap: 32px; }
}

/* Players are complete interfaces, not cropped long website previews. */
.case-editorial--collection .case-editorial-board--player {
 aspect-ratio:auto; padding:6%; display:block;
}
.case-editorial--collection .case-editorial-board--player .case-editorial-screen,
.case-editorial--collection .case-editorial-board--player .cms-image-zoom {
 height:auto; border-radius:8px; overflow:visible;
}
.case-editorial--collection .case-editorial-board--player img {
 width:100%; height:auto; max-height:none; object-fit:contain;
}

/* Springbom Store: related products and print pieces share one quiet surface. */
.case-editorial[data-case-slug="springbom"] {
  --springbom-surface: #f1eff2;
  --springbom-surface-light: #f7f6f8;
}
.case-editorial[data-case-slug="springbom"] :is(.case-editorial-board--brand-items, .case-editorial-board--packaging) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  aspect-ratio: auto;
  padding: 8%;
  gap: 5%;
  background: var(--springbom-surface);
  isolation: isolate;
}
.case-editorial[data-case-slug="springbom"] :is(.case-editorial-board--brand-items, .case-editorial-board--packaging, .case-editorial-board--comparison-art) :is(.case-editorial-screen, .cms-image-zoom, img) {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
}
.case-editorial[data-case-slug="springbom"] [data-section-key="springbom-perfumes"] .case-editorial-board--brand-items {
  aspect-ratio: 16 / 9;
  padding: 4% 10%;
  gap: 0;
  align-items: center;
}
.case-editorial[data-case-slug="springbom"] [data-section-key="springbom-perfumes"] img {
  mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 94%, transparent);
  mask-composite: intersect;
}
.case-editorial[data-case-slug="springbom"] .case-editorial-board--comparison-art {
  padding: 9% 8%;
  gap: 10%;
  background: var(--springbom-surface);
}
.case-editorial[data-case-slug="springbom"] .case-editorial-comparison-label {
  text-align: center;
}
.case-editorial[data-case-slug="springbom"] [data-section-key="springbom-logos"] .case-editorial-comparison-label {
  margin-bottom: clamp(32px, 4vw, 56px);
}
.case-editorial[data-case-slug="springbom"] .case-editorial-board--comparison-art .case-editorial-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: auto;
  height: clamp(100px, 14vw, 180px);
  mix-blend-mode: multiply;
}
.case-editorial[data-case-slug="springbom"] .case-editorial-board--comparison-art :is(.cms-image-zoom, img) {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}
.case-editorial[data-case-slug="springbom"] [data-section-key="springbom-logos"] .cms-image-zoom {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
/* Match the monograms after removing each original's different white margins. */
.case-editorial[data-case-slug="springbom"] [data-section-key="springbom-logos"] .case-editorial-board-item:nth-child(2) img {
  height: 88%;
}
.case-editorial[data-case-slug="springbom"] [data-section-key="springbom-logos"] > figcaption {
  display: block;
}
.case-editorial[data-case-slug="springbom"] .case-editorial-board--packaging {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 24px;
}
.case-editorial[data-case-slug="springbom"] .case-editorial-board--packaging > .case-editorial-board-item {
  width: 82%;
}
.case-editorial[data-case-slug="springbom"] .case-editorial-board--packaging > .case-editorial-board-item:first-child img {
  border-radius: 8px;
}
.case-editorial[data-case-slug="springbom"] [data-section-key="springbom-perfume-evolution"] .case-editorial-screen {
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  overflow: hidden;
}
.case-editorial[data-case-slug="springbom"] [data-section-key="springbom-perfume-evolution"] .case-editorial-board-item:nth-child(2) .case-editorial-screen {
  background: #fff;
}
.case-editorial[data-case-slug="springbom"] [data-section-key="springbom-perfume-evolution"] :is(.cms-image-zoom, img) {
  height: 100%;
}
.case-editorial[data-case-slug="springbom"] .case-editorial-board--label-art {
  aspect-ratio: auto;
  padding: 8%;
  background: var(--springbom-surface);
}
.case-editorial[data-case-slug="springbom"] .case-editorial-board--label-art .case-editorial-board-item {
  width: min(100%, 520px);
}
.case-editorial[data-case-slug="springbom"] .case-editorial-board--label-art :is(.case-editorial-screen, img) {
  border-radius: 0;
  box-shadow: none;
}
.case-editorial[data-case-slug="springbom"] .case-editorial-board--product-photo {
  aspect-ratio: auto;
  padding: 7%;
  background: var(--springbom-surface);
}
.case-editorial[data-case-slug="springbom"] .case-editorial-board--product-photo .case-editorial-board-item {
  width: min(58%, 320px);
}
.case-editorial[data-case-slug="springbom"] .case-editorial-board--product-photo .case-editorial-screen {
  border-radius: 8px;
  overflow: hidden;
}
/* Equal square photographs: paired packshots, then colour-led campaigns. */
.case-editorial[data-case-slug="springbom"] :is([data-section-key="springbom-candle-packaging"], [data-section-key="springbom-candle-promotion"]) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(16px, 2vw, 24px);
}
.case-editorial[data-case-slug="springbom"] .case-editorial-board--candle-photo {
  aspect-ratio: 1;
  padding: 0;
  gap: 0;
  overflow: hidden;
  background: transparent;
}
.case-editorial[data-case-slug="springbom"] .case-editorial-board--candle-photo :is(.case-editorial-board-item, .case-editorial-screen, .cms-image-zoom) {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
}
.case-editorial[data-case-slug="springbom"] .case-editorial-board--candle-photo img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}
/* Match the subject scale of the portrait campaign photos in their square crops. */
.case-editorial[data-case-slug="springbom"] .case-editorial-board--candle-photo img[src*="sky-77-notes-1254x1254.jpg"] {
  transform: scale(1.12);
  transform-origin: 50% 60%;
}
@media (max-width: 599px) {
  .case-editorial[data-case-slug="springbom"] :is([data-section-key="springbom-candle-packaging"], [data-section-key="springbom-candle-promotion"]) {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}
.case-editorial[data-case-slug="springbom"] [data-section-key="springbom-round-labels"] .case-editorial-board-item { max-width: 140px; }
.case-editorial[data-case-slug="springbom"] [data-section-key="springbom-vessel-labels"] .case-editorial-board-item { max-width: 150px; }
.case-editorial[data-case-slug="springbom"] [data-section-key="springbom-round-labels"] img {
  border-radius: 50%;
}
.case-editorial[data-case-slug="springbom"] [data-section-key="springbom-flyers"] .case-editorial-board {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 6% 5%;
  gap: 5%;
  background: var(--springbom-surface);
}
.case-editorial[data-case-slug="springbom"] [data-section-key="springbom-flyers"] .case-editorial-board-item { max-width: 300px; }
/* Reuse the case-study elevation for paper and web surfaces. */
.case-editorial[data-case-slug="springbom"] :is([data-section-key="springbom-perfume-label"], [data-section-key="springbom-round-labels"], [data-section-key="springbom-vessel-labels"], [data-section-key="springbom-flyers"]) .case-editorial-screen {
  box-shadow: var(--case-screen-shadow);
}
.case-editorial[data-case-slug="springbom"] [data-section-key="springbom-round-labels"] .case-editorial-screen {
  border-radius: 50%;
}
.case-editorial[data-case-slug="springbom"] .springbom-colours {
  box-sizing: border-box;
  padding: clamp(20px, 3vw, 36px);
  border-radius: 16px;
  background: var(--springbom-surface);
  color: #45424a;
}
.case-editorial[data-case-slug="springbom"] .springbom-colours h2 { display: none; }
.case-editorial[data-case-slug="springbom"] .springbom-colour-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.case-editorial[data-case-slug="springbom"] .springbom-colour-chip {
  height: 68px;
  margin-bottom: 16px;
}
.case-editorial[data-case-slug="springbom"] .springbom-colour :is(h3, dt, dd, dl),
.case-editorial[data-case-slug="springbom"] .springbom-colour-note {
  font-size: var(--type-detail);
  line-height: var(--type-detail-leading);
  color: #45424a;
}
.case-editorial[data-case-slug="springbom"] .springbom-colour h3 { color: #17151a; font-weight: 600; margin-bottom: 16px; }
.case-editorial[data-case-slug="springbom"] .springbom-colour dt { margin-top: 10px; }
.case-editorial[data-case-slug="springbom"] .case-editorial-board--site-fragment {
  aspect-ratio: auto;
  padding: 7%;
  background: var(--springbom-surface-light);
}
.case-editorial[data-case-slug="springbom"] .case-editorial-board--site-fragment .case-editorial-screen {
  border-radius: 8px;
  overflow: hidden;
}
.case-editorial[data-case-slug="springbom"] .case-editorial-board--film-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  aspect-ratio: auto;
  padding: 4%;
  gap: 3%;
  background: var(--springbom-surface);
  max-width: none;
}
.case-editorial[data-case-slug="springbom"] [data-section-key="springbom-collection-film"] .case-editorial-board { padding: 0; background: transparent; }
.case-editorial[data-case-slug="springbom"] .cms-video-frame {
  background: transparent;
  clip-path: inset(0 round 8px);
}
.case-editorial[data-case-slug="springbom"] .cms-video-frame video {
  display: block;
}
.case-editorial[data-case-slug="springbom"] .case-editorial-cover--motion .cms-video-frame {
  border-radius: 16px;
  clip-path: inset(0 round 16px);
}
.case-editorial[data-case-slug="springbom"] .case-editorial-cover--motion figcaption { display: none; }
@media (max-width: 767px) {
  .case-editorial[data-case-slug="springbom"] [data-section-key="springbom-perfumes"] .case-editorial-board--brand-items {
    aspect-ratio: 4 / 3;
    padding: 8% 4%;
  }
  .case-editorial[data-case-slug="springbom"] .springbom-colour-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 12px; }
  .case-editorial[data-case-slug="springbom"] .springbom-colour-chip { height: 48px; }
  .case-editorial[data-case-slug="springbom"] .case-editorial-board--film-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .case-editorial[data-case-slug="springbom"] [data-section-key="springbom-flyers"] .case-editorial-board {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding: 8%;
  }
}

/* Pilates: complete homepage sections and compact offer artwork. */
.case-editorial[data-case-slug="springbom-pilates"] [data-section-key="pilates-website-walkthrough"] .case-editorial-board {
  padding: 0;
  background: #f7f5f3;
  overflow: hidden;
}
.case-editorial[data-case-slug="springbom-pilates"] [data-section-key="pilates-website-walkthrough"] .cms-video-frame {
  width: 100%;
  aspect-ratio: 1600 / 1050;
  border-radius: inherit;
}
.case-editorial[data-case-slug="springbom-pilates"] [data-section-key="pilates-website-walkthrough"] video {
  object-fit: contain;
}
.case-editorial[data-case-slug="springbom-pilates"] .case-editorial-cover .case-editorial-board--player {
  aspect-ratio: auto;
  height: clamp(320px, 42vw, 560px);
  max-height: none;
  padding: clamp(24px, 4vw, 56px) 8%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.case-editorial[data-case-slug="springbom-pilates"] .case-editorial-cover :is(.case-editorial-board-item, .case-editorial-screen, .cms-image-zoom) {
  height: 100%;
  width: auto;
  max-width: 100%;
}
.case-editorial[data-case-slug="springbom-pilates"] .case-editorial-cover img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.case-editorial[data-case-slug="springbom-pilates"] [data-section-key="pilates-identity"] > .case-editorial-figure:first-child .case-editorial-board {
  padding: 18%;
  background: #f7931d;
}
/* Pilates media stays clean; the source artwork supplies its own depth. */
.case-editorial[data-case-slug="springbom-pilates"] {
  --case-screen-shadow: none;
}
.case-editorial[data-case-slug="springbom-pilates"] :is(.case-editorial-screen, .cms-image-zoom, .cms-video-frame, img, video) {
  box-shadow: none;
}
.case-editorial[data-case-slug="springbom-pilates"] .case-editorial-board--unframed {
  aspect-ratio: auto;
  padding: 0;
  background: transparent;
}
.case-editorial[data-case-slug="springbom-pilates"] .case-editorial-board--unframed .case-editorial-screen {
  border-radius: 3% / 7%;
  overflow: hidden;
}
.case-editorial[data-case-slug="springbom-pilates"] [data-section-key="pilates-flyer-mockup"] .case-editorial-screen {
  border-radius: var(--nd-radius-preview-canvas);
}
.case-editorial[data-case-slug="springbom-pilates"] .case-editorial-board--unframed :is(.cms-image-zoom, img) {
  border-radius: 0;
}
.case-editorial[data-case-slug="springbom-pilates"] .case-editorial-board--mascot {
  aspect-ratio: auto;
  padding: 0;
  overflow: hidden;
  background: #fa901a;
}

.case-editorial[data-case-slug="springbom-pilates"] .case-editorial-board--mascot .case-editorial-board-item {
  width: 100%;
}
.case-editorial[data-case-slug="springbom-pilates"] .case-editorial-board--mascot :is(.case-editorial-screen, .cms-image-zoom, img) {
  border-radius: 0;
}
.case-editorial[data-case-slug="springbom-pilates"] .case-editorial-board--mascot img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
}
@media (max-width: 767px) {
  .case-editorial[data-case-slug="springbom-pilates"] [data-section-key="pilates-responsive-homepage"] figure {
    width: 100%;
    justify-self: stretch;
  }
  .case-editorial[data-case-slug="springbom-pilates"] [data-section-key="pilates-chupogi-print"] .case-editorial-board--mascot {
    width: 100%;
    aspect-ratio: 1;
    display: block;
  }
  .case-editorial[data-case-slug="springbom-pilates"] [data-section-key="pilates-chupogi-print"] :is(.case-editorial-board-item, .case-editorial-screen, .cms-image-zoom, img) {
    width: 100%;
    height: 100%;
  }
  .case-editorial[data-case-slug="springbom-pilates"] [data-section-key="pilates-chupogi-print"] img {
    object-fit: contain;
  }
}
.case-editorial[data-case-slug="springbom-pilates"] :is([data-section-key="pilates-studio-film"], [data-section-key="pilates-attendance-report"]) .case-editorial-board {
  aspect-ratio: auto;
  padding: 0;
  background: transparent;
}
.case-editorial[data-case-slug="springbom-pilates"] [data-section-key="pilates-studio-film"] .cms-video-frame {
  width: 100%;
  max-width: none;
}
.case-editorial--collection .case-editorial-board--pricing {
 aspect-ratio:auto; padding:32px; display:flex; justify-content:center;
}
.case-editorial--collection .case-editorial-board--pricing .case-editorial-board-item { width:min(65%,360px); }
.case-pricing-slides {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--nd-radius-preview-canvas);
  background: #f7931d;
}
.case-pricing-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
.case-pricing-slide.is-active { opacity: 1; }
.case-editorial .case-pricing-slide :is(.case-editorial-figure, .case-editorial-board, .case-editorial-board-item, .case-editorial-screen, .cms-image-zoom) {
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 0;
}
.case-editorial .case-pricing-slide .case-editorial-board { padding: 0; aspect-ratio: auto; }
.case-editorial .case-pricing-slide img { width: 100%; height: 100%; object-fit: contain; }
.case-editorial .case-pricing-slide .case-editorial-board--unframed img { object-fit: cover; }
.case-editorial .case-pricing-slide .case-editorial-board--pricing { padding: 7%; }
.case-pricing-caption {
  color: var(--portfolio-copy);
  font-size: var(--type-detail);
  line-height: var(--type-detail-leading);
  margin: 16px 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .case-pricing-slide { transition: none; }
}
.case-editorial--collection .case-editorial-board--stories,
.case-editorial--collection .case-editorial-board--paired-art {
 aspect-ratio:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; padding:8%;
}
.case-editorial--collection .case-editorial-board--stories img { width:100%; height:auto; }
/* Instagram exports keep their complete UI inside the existing black device style.
   Frame proportions match the mobile shell: 410 wide, 10 rim, 42/32 corners. */
.case-editorial[data-case-slug="springbom-pilates"] [data-section-key="pilates-instagram-stories"] .case-editorial-board {
  aspect-ratio: 1;
  align-items: center;
  justify-items: center;
}
.case-editorial[data-case-slug="springbom-pilates"] [data-section-key="pilates-instagram-stories"] .case-editorial-board-item,
.case-editorial[data-case-slug="springbom-pilates"] .case-studio-phone {
  width: min(100%, 300px);
  container-type: inline-size;
}
.case-editorial[data-case-slug="springbom-pilates"] [data-section-key="pilates-instagram-stories"] .case-editorial-screen,
.case-editorial[data-case-slug="springbom-pilates"] .case-studio-phone-shell {
  padding: 2.439cqw;
  border-radius: 10.244cqw;
  background: #191919;
  box-shadow: 0 18px 45px #09031e28, 0 0 0 1px #ffffff55;
}
.case-editorial[data-case-slug="springbom-pilates"] [data-section-key="pilates-instagram-stories"] :is(.cms-image-zoom, img) {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 7.805cqw;
  overflow: hidden;
  background: #000;
}
.case-editorial[data-case-slug="springbom-pilates"] [data-section-key="pilates-studio-interior"] .cms-video-frame {
  width: 100%;
  border-radius: 7.805cqw;
}
.case-studio-story{container-type:inline-size;overflow:hidden;border-radius:7.805cqw;background:#000;color:#fff;font-family:-apple-system,BlinkMacSystemFont,Arial,sans-serif;pointer-events:none}
.case-story-status{height:10.945cqw;padding:0 9.33cqw;display:flex;align-items:center;justify-content:space-between;font-size:3.731cqw;font-weight:600;line-height:1;color:#fff}
.case-story-signal{display:flex;align-items:center;gap:1.244cqw}
.case-story-signal svg{display:block;fill:currentColor;height:3.483cqw}
.case-story-cell{width:4.478cqw}.case-story-battery{width:6.965cqw}
.case-story-media{position:relative}
.case-editorial[data-case-slug="springbom-pilates"] [data-section-key="pilates-studio-interior"] .case-studio-story .cms-video-frame{border-radius:0;max-width:none}
.case-story-top{position:absolute;inset:0 0 auto;padding:1.866cqw 1.866cqw 9cqw;background:linear-gradient(#0006,transparent);pointer-events:none}
.case-story-progress{height:.498cqw;border-radius:1cqw;background:#ffffff70;overflow:hidden}
.case-story-progress i{display:block;width:100%;height:100%;background:#fff;transform:scaleX(0);transform-origin:left center}
.case-story-account{display:flex;align-items:center;gap:2.736cqw;margin-top:1.866cqw;font-size:3.234cqw;line-height:1.2;white-space:nowrap}
.case-story-account strong{font-weight:600;color:inherit}.case-story-age{margin-left:-.75cqw;opacity:.7}
.case-story-avatar{position:relative;flex:none;width:7.463cqw;height:7.463cqw;border-radius:50%;overflow:hidden;background:#ffa21c}
.case-story-avatar img{position:absolute;width:1340%;max-width:none;height:auto;left:-25%;top:-203.333%;pointer-events:none}
.case-story-more{margin-left:auto;letter-spacing:.4cqw;font-size:2.736cqw}
.case-story-close{width:5.472cqw;height:5.472cqw;flex:none;margin-left:1.492cqw;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.case-story-footer{height:28.607cqw;padding:7.214cqw 3.731cqw 0;display:flex;align-items:flex-start;gap:5.473cqw;background:#000}
.case-story-reply{height:10.199cqw;border:1px solid #929292;border-radius:20cqw;flex:1;min-width:0;display:flex;align-items:center;padding:0 5.472cqw;font-size:3.731cqw;line-height:1;white-space:nowrap}
.case-story-footer>svg{width:4.975cqw;height:4.975cqw;flex:none;margin-top:2.736cqw;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width: 767px) {
  .case-editorial[data-case-slug="springbom-pilates"] [data-section-key="pilates-instagram-stories"] .case-editorial-board {
    aspect-ratio: auto;
    grid-template-columns: minmax(0, 1fr);
    padding: 40px 8%;
    gap: 36px;
  }
}
.case-editorial--collection .case-editorial-board--mascot {
  aspect-ratio: auto;
  padding: clamp(32px, 4vw, 56px);
}
.case-editorial--collection .case-editorial-board--mascot .case-editorial-board-item {
  width: min(64%, 300px);
}
.case-editorial--collection .case-editorial-video-pairs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  max-width: none;
}
.case-editorial--collection .case-editorial-board--video-pair {
  aspect-ratio: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding: 32px;
}
.case-editorial--collection .case-editorial-board--video-pair .cms-video-frame {
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
}
@media (max-width: 767px) {
  .case-editorial--collection .case-editorial-video-pairs { gap: 32px; }
  .case-editorial--collection .case-editorial-board--video-pair { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 28px; }
}
@media(max-width:599px) {
 .case-editorial[data-case-slug="speedster-branding"] .case-editorial-board--characters { padding:20px 12px; gap:8px; }
 .case-editorial[data-case-slug="speedster-branding"] .case-editorial-cover .case-editorial-board--characters { aspect-ratio:1.6; padding:8% 3%; gap:0; }
 .case-editorial[data-case-slug="speedster-branding"] .case-editorial-board--paired-ads { grid-template-columns:minmax(0,1fr); padding:8%; gap:24px; }
 .case-editorial[data-case-slug="speedster-branding"] .case-editorial-board--paired-ads .case-editorial-board-item:last-child { width:75%; }
 .case-editorial[data-case-slug="springbom-pilates"] .case-editorial-cover .case-editorial-board--player { height:auto; padding:8%; }
 .case-editorial[data-case-slug="springbom-pilates"] .case-editorial-cover :is(.case-editorial-board-item, .case-editorial-screen, .cms-image-zoom) { height:auto; width:100%; }
 .case-editorial[data-case-slug="springbom-pilates"] .case-editorial-cover img { width:100%; height:auto; }
 .case-editorial--collection .case-editorial-board--pricing { padding:24px; }
 .case-editorial--collection .case-editorial-board--pricing .case-editorial-board-item { width:80%; }
 .case-editorial--collection .case-editorial-board--stories,
 .case-editorial--collection .case-editorial-board--paired-art { padding:6%; gap:12px; }
 .case-editorial--collection .case-editorial-board--mascot .case-editorial-board-item { width: 72%; }
}

/* Speedster: one complete web view in the cover, one clipping surface per screen. */
.case-editorial[data-case-slug="speedster-product-design"] {
  --case-phone-radius: clamp(8px, 1.2vw, 16px);
  --case-web-radius: 8px;
}
.case-editorial[data-case-slug="speedster-product-design"] .case-editorial-screen {
  border-radius: var(--case-web-radius);
  overflow: hidden;
}
.case-editorial[data-case-slug="speedster-product-design"] .case-editorial-screen :is(.cms-image-zoom, img) {
  border-radius: 0;
}
.case-editorial[data-case-slug="speedster-product-design"] .case-editorial-board--phones .case-editorial-screen {
  border-radius: var(--case-phone-radius);
}
.case-editorial[data-case-slug="speedster-product-design"] .case-editorial-board--web .case-editorial-screen {
  border-radius: var(--case-web-radius) var(--case-web-radius) 0 0;
}
.case-editorial[data-case-slug="speedster-product-design"] .case-editorial-cover .case-editorial-board--web-hero {
  aspect-ratio: auto;
  max-height: none;
  padding: clamp(24px, 4vw, 56px);
}
.case-editorial[data-case-slug="speedster-product-design"] .case-editorial-cover .case-editorial-board-item {
  width: min(100%, 760px);
}
.case-editorial[data-case-slug="speedster-product-design"] .case-editorial-cover .case-editorial-screen img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.case-editorial[data-case-slug="speedster-product-design"] .case-editorial-screen--extended .cms-image-zoom {
  position: relative;
}
.case-editorial[data-case-slug="speedster-product-design"] .case-editorial-source-original {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  /* Preserve every original UI pixel. Only remove its blank lower-right map margin. */
  clip-path: polygon(0 0, 100% 0, 100% 96.6701%, 50% 96.6701%, 50% 100%, 0 100%);
  pointer-events: none;
}

/* Dynamic widget: complete original cover, light neutral presentation canvases. */
.case-editorial[data-case-slug="dynamic-widget"] .case-editorial-cover .case-editorial-board--widget-cover,
.case-editorial[data-case-slug="dynamic-widget"] .case-editorial-board--widget-flow {
  display: block;
  aspect-ratio: auto;
  max-height: none;
  padding: 0;
  overflow: hidden;
  background: transparent;
}
.case-editorial[data-case-slug="dynamic-widget"] :is(.case-editorial-board--widget-cover, .case-editorial-board--widget-flow) :is(.case-editorial-screen, .cms-image-zoom, img) {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
}
.case-editorial[data-case-slug="dynamic-widget"] .case-editorial-board--widget-flow {
  padding: clamp(24px, 4vw, 64px);
  background: #f4f4f4;
  isolation: isolate;
}
.case-editorial[data-case-slug="dynamic-widget"] .case-editorial-board--widget-flow .case-editorial-board-item {
  mix-blend-mode: multiply;
}
.case-editorial[data-case-slug="dynamic-widget"] [data-section-key="s009-image"] .case-editorial-board {
  background: radial-gradient(ellipse at 12% 8%, #dedad4 0%, transparent 62%),
    linear-gradient(135deg, #dedad4 8%, #d1ccc5 65%, #aea8a0 100%);
}
.case-editorial[data-case-slug="dynamic-widget"] .case-editorial-board--widgets .case-editorial-screen {
  overflow: hidden;
  border-radius: 6.12% / 5.85%;
  box-shadow: 0 16px 30px -14px rgb(0 0 0 / 25%);
}
.case-editorial[data-case-slug="dynamic-widget"] .case-editorial-board--widgets .cms-image-zoom,
.case-editorial[data-case-slug="dynamic-widget"] .case-editorial-board--widgets img {
  border-radius: 0;
}
/* Full device window [1240,98,861,1725], verified across every original GIF frame.
   The mask follows the case and side buttons without changing the animated UI. */
.case-editorial[data-case-slug="dynamic-widget"] .cms-widget-prototype > .cms-image-zoom {
  aspect-ratio: 861 / 1725;
  border-radius: 0;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 861 1725'%3E%3Crect x='9' y='3' width='840' height='1719' rx='140' fill='white'/%3E%3Cpath d='M3 275h7v73H3zM3 413h7v142H3zM3 595h7v143H3zM848 461h10v227h-10z' fill='white'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}
.case-editorial[data-case-slug="dynamic-widget"] .cms-widget-prototype > .cms-image-zoom > img {
  width: 387.68873403%;
  left: -144.01858304%;
  top: -5.68115942%;
}

/* Paramount icons: one blue canvas for the original rounded icon tiles. */
.case-editorial[data-case-slug="icon-set-for-paramount"] .case-editorial-cover .case-editorial-board--icon-tiles {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: none;
  padding: 12% 16%;
  align-content: center;
  gap: clamp(12px, 4vw, 56px);
  background: linear-gradient(140deg, #0737c1, #075aff 78%);
}
.case-editorial[data-case-slug="icon-set-for-paramount"] .case-editorial-board--icon-tiles .case-editorial-screen {
  overflow: hidden;
  border-radius: 12%;
  background: #0264ff;
  box-shadow: 0 12px 24px -8px rgb(0 22 105 / 30%);
}
.case-editorial[data-case-slug="icon-set-for-paramount"] .case-editorial-board--icon-tiles .cms-image-zoom {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1;
  border-radius: inherit;
}
/* Both states share the same 56px canvas and placement, so no swap can jump. */
.case-editorial[data-case-slug="icon-set-for-paramount"] .case-editorial-board--icon-tiles img {
  display: block;
  position: absolute;
  width: 76%;
  max-width: none;
  height: 76%;
  left: 12%;
  top: 12%;
  object-fit: contain;
  border-radius: 0;
  transition: opacity 220ms ease-in-out;
}
.case-editorial-board--icon-tiles .paramount-hero-filled { opacity: 0; }
.case-editorial-board--icon-tiles .is-filled .paramount-hero-outline { opacity: 0; }
.case-editorial-board--icon-tiles .is-filled .paramount-hero-filled { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .case-editorial[data-case-slug="icon-set-for-paramount"] .case-editorial-board--icon-tiles img { transition: none; }
}
.case-editorial[data-case-slug="icon-set-for-paramount"] .case-editorial-board--paramount-player {
  display: block;
  aspect-ratio: auto;
  padding: 0;
  overflow: hidden;
  background: #000;
}
.case-editorial[data-case-slug="icon-set-for-paramount"] .case-editorial-board--paramount-player :is(.case-editorial-screen, .cms-image-zoom, img) {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}

/* Swiftly category icons: original art supplies the canvas, without a second frame. */
.case-editorial[data-case-slug="category-icons"] .case-editorial-cover .case-editorial-board--category-icons {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: none;
  padding: 0;
  overflow: hidden;
  background: #060606;
}
.case-editorial[data-case-slug="category-icons"] .case-editorial-board--category-icons .case-editorial-board-item {
  position: absolute;
  height: auto;
}
.case-editorial[data-case-slug="category-icons"] .case-editorial-board--category-icons :is(.case-editorial-screen, .cms-image-zoom, img) {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}
.case-editorial[data-case-slug="category-icons"] .case-editorial-board--category-icons .case-editorial-board-item:nth-child(1) { left: 7%; top: 9%; width: 20%; }
.case-editorial[data-case-slug="category-icons"] .case-editorial-board--category-icons .case-editorial-board-item:nth-child(2) { left: 73%; top: 8%; width: 21%; }
.case-editorial[data-case-slug="category-icons"] .case-editorial-board--category-icons .case-editorial-board-item:nth-child(3) { left: 37%; top: 30%; width: 24%; }
.case-editorial[data-case-slug="category-icons"] .case-editorial-board--category-icons .case-editorial-board-item:nth-child(4) { left: 12%; top: 60%; width: 18%; }
.case-editorial[data-case-slug="category-icons"] .case-editorial-board--category-icons .case-editorial-board-item:nth-child(5) { left: 71%; top: 59%; width: 20%; }
.case-editorial[data-case-slug="category-icons"] .case-editorial-board--category-icons .case-editorial-board-item:nth-child(6) { left: 41%; top: 8%; width: 8%; }
.case-editorial[data-case-slug="category-icons"] .case-editorial-board--category-icons .case-editorial-board-item:nth-child(7) { left: 4%; top: 47%; width: 8%; }
.case-editorial[data-case-slug="category-icons"] .case-editorial-board--category-icons .case-editorial-board-item:nth-child(8) { left: 54%; top: 77%; width: 8%; }
.case-editorial[data-case-slug="category-icons"] .case-editorial-board--category-panel {
  display: block;
  aspect-ratio: auto;
  padding: 0;
  overflow: hidden;
  background: transparent;
}
.case-editorial[data-case-slug="category-icons"] .case-editorial-board--category-panel :is(.case-editorial-screen, .cms-image-zoom, img) {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}
.case-editorial[data-case-slug="category-icons"] .case-editorial-board--icon-library {
  display: block;
  aspect-ratio: auto;
  padding: 2.5%;
  background: #fff;
  border: 1px solid #ececec;
  overflow: hidden;
}
.case-editorial[data-case-slug="category-icons"] .case-editorial-board--icon-library :is(.case-editorial-screen, .cms-image-zoom, img) {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}

/* POSIVIBEZ: preserve the source artwork and give related studies one surface. */
.case-editorial[data-case-slug="posivibez"] :is(.case-editorial-board--full-art, .case-editorial-board--unframed) {
  aspect-ratio: auto;
  padding: 0;
  background: transparent;
  overflow: hidden;
}
.case-editorial[data-case-slug="posivibez"] :is(.case-editorial-board--full-art, .case-editorial-board--unframed) .case-editorial-screen {
  border-radius: 0;
  box-shadow: none;
}
.case-editorial[data-case-slug="posivibez"] .case-editorial-board--brand-logo {
  aspect-ratio: 1.5;
  padding: 0;
  background: #103267;
  overflow: hidden;
}
.case-editorial[data-case-slug="posivibez"] .case-editorial-board--brand-logo .case-editorial-board-item {
  width: 60%;
}
.case-editorial[data-case-slug="posivibez"] .case-editorial-board--brand-logo .case-editorial-screen {
  border-radius: 0;
  box-shadow: none;
}
.case-editorial[data-case-slug="posivibez"] .case-editorial-board--brand-logo img {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  mask-composite: intersect;
}
.case-editorial[data-case-slug="posivibez"] .case-editorial-board--turnaround {
  aspect-ratio: 2.5;
  padding: 5% 4%;
  background: #e6dcf6;
}
.case-editorial[data-case-slug="posivibez"] .case-editorial-board--turnaround :is(.case-editorial-screen, img) {
  border-radius: 0;
  box-shadow: none;
}
.case-editorial[data-case-slug="posivibez"] .case-editorial-cover .case-editorial-board--ensemble {
  display: block;
  aspect-ratio: 2;
  max-height: none;
  padding: 0;
  background: #f4cddd;
  overflow: hidden;
}
.case-editorial[data-case-slug="posivibez"] .case-editorial-board--ensemble :is(.case-editorial-board-item, .case-editorial-screen, .cms-image-zoom) {
  width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}
.case-editorial[data-case-slug="posivibez"] .case-editorial-board--ensemble img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  object-fit: contain;
}
.case-editorial[data-case-slug="posivibez"] :is(.case-editorial-board--equipment, .case-editorial-board--cast) {
  --case-artwork-gap: clamp(6px, 1vw, 12px);
  aspect-ratio: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  padding: 0;
  gap: var(--case-artwork-gap);
  background: transparent;
}
.case-editorial[data-case-slug="posivibez"] :is(.case-editorial-board--equipment, .case-editorial-board--cast) .case-editorial-screen {
  border-radius: 8px;
  box-shadow: none;
  overflow: hidden;
}
.case-editorial[data-case-slug="posivibez"] .case-editorial-board--equipment {
  /* Balance 941:1672 at left against 1:1 + 1402:1122 and the gap at right. */
  grid-template-columns: minmax(0, calc(50.3278078533% - var(--case-artwork-gap) * .2237234565)) minmax(0, 1fr);
}
.case-editorial[data-case-slug="posivibez"] .case-editorial-board--equipment .case-editorial-board-item:first-child {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
}
.case-editorial[data-case-slug="posivibez"] .case-editorial-board--equipment .case-editorial-board-item:not(:first-child) {
  grid-column: 2;
}
.case-editorial[data-case-slug="posivibez"] .case-editorial-board--cast.case-editorial-board--count-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.case-editorial[data-case-slug="posivibez"] .case-editorial-board--cast.case-editorial-board--count-2 {
  align-items: stretch;
}
.case-editorial[data-case-slug="posivibez"] .case-editorial-board--cast.case-editorial-board--count-2 .case-editorial-screen {
  aspect-ratio: 2 / 3;
}
.case-editorial[data-case-slug="posivibez"] .case-editorial-board--cast.case-editorial-board--count-2 :is(.cms-image-zoom, img) {
  width: 100%;
  height: 100%;
}
.case-editorial[data-case-slug="posivibez"] .case-editorial-board--cast.case-editorial-board--count-2 img {
  object-fit: contain;
}
.case-editorial[data-case-slug="posivibez"] .case-editorial-board--mixed {
  aspect-ratio: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  padding: 6%;
  gap: clamp(12px, 2vw, 24px);
}
.case-editorial[data-case-slug="posivibez"] .case-editorial-board--mixed > .case-editorial-figure {
  width: 100%;
  min-width: 0;
  margin: 0;
}
.case-editorial[data-case-slug="posivibez"] .case-editorial-board--mixed :is(.case-editorial-board--unframed, .cms-video-frame) {
  border-radius: 8px;
  overflow: hidden;
}
.case-editorial[data-case-slug="posivibez"] [data-section-key="mina-loopy-motion"] .case-editorial-board--video {
  background: var(--case-canvas);
}
.case-editorial[data-case-slug="posivibez"] [data-section-key="character-motion-midjourney"] .case-editorial-board--video {
  aspect-ratio: auto;
  max-width: 624px;
  padding: 0;
  margin-inline: auto;
  background: #fdfbf7;
  overflow: hidden;
}
.case-editorial[data-case-slug="posivibez"] [data-section-key="character-motion-midjourney"] .cms-video-frame {
  border-radius: inherit;
}
@media (max-width: 599px) {
  .case-editorial[data-case-slug="posivibez"] .case-editorial-board--turnaround {
    aspect-ratio: auto;
    padding: 6% 3%;
  }
  .case-editorial[data-case-slug="posivibez"] :is(.case-editorial-board--equipment, .case-editorial-board--cast) {
    --case-artwork-gap: 6px;
  }
  .case-editorial[data-case-slug="posivibez"] :is(.case-editorial-board--equipment, .case-editorial-board--cast) .case-editorial-screen {
    border-radius: 5px;
  }
}
@media (max-width: 479px) {
  .case-editorial[data-case-slug="posivibez"] .case-editorial-board--mixed {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

/* Big Brother: composed artwork supplies its own background; bare players get room. */
.case-editorial[data-case-slug="big-brother"] .case-editorial-board--full-art {
  display: block;
  aspect-ratio: auto;
  padding: 0;
  background: transparent;
  overflow: hidden;
}
.case-editorial[data-case-slug="big-brother"] .case-editorial-board--full-art :is(.case-editorial-screen, .cms-image-zoom, img) {
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
}
.case-editorial[data-case-slug="big-brother"] .case-editorial-board--full-art img {
  object-fit: contain;
}
/* Wireframes and responsive previews share the same control column. */
.case-wireframes { min-width:0; }
.case-editorial .case-wireframes .case-editorial-copy { position:static; align-self:center; }
.case-wireframe-panels { aspect-ratio:8 / 5; overflow:hidden; border-radius:16px; background:#fff; }
.case-wireframe-panels [hidden] { display:none; }
@media(max-width:767px) { .case-wireframe-panels { border-radius:12px; } }
/* Two framed Citi screens share a desktop canvas and separate on phones. */
.case-editorial-media > [data-section-key="citi-feature-views"] { margin-top:40px; }
.citi-feature-board { display:grid; grid-template-columns:repeat(2,minmax(0,40%)); justify-content:center; aspect-ratio:1; overflow:hidden; border-radius:16px; background:var(--case-canvas); }
.citi-feature-screen { position:relative; margin:0; min-width:0; overflow:hidden; }
.citi-feature-screen img { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:block; height:76%; width:auto; max-width:none; border-radius:0; }
/* The supplied screenshot's category strip starts 18px before the search
   field. Move only that strip in its original 2160px coordinate system. */
.citi-merchant-artwork { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); height:76%; aspect-ratio:1; }
.citi-feature-screen .citi-merchant-artwork img { left:0; top:0; width:100%; height:100%; transform:none; }
.citi-merchant-categories { position:absolute; inset:0; background:#fafafa; clip-path:inset(35.972222% 28.796296% 59.722222% 28.888889%); pointer-events:none; }
.citi-feature-screen .citi-merchant-categories img { clip-path:inset(35.972222% 28.796296% 59.722222% 28.888889%); transform:translateX(.833333%); }
@media(max-width:767px) {
 .citi-feature-board { grid-template-columns:1fr; aspect-ratio:auto; gap:24px; overflow:visible; border-radius:0; background:none; }
 .citi-feature-screen { height:var(--citi-phone-stage-height); aspect-ratio:auto; border-radius:12px; background:var(--case-canvas); }
 /* These square exports contain the same phone and transparent gutters as
    the dashboard film. Share its stage and inset rather than shrinking to 76%. */
 .citi-feature-screen > img,
 .citi-feature-screen > .citi-merchant-artwork { height:calc(var(--citi-phone-stage-height) - 2 * var(--citi-phone-stage-padding)); }
}
/* Replace the old title's baked shadow with clean space, without moving the devices. */
.case-editorial[data-case-slug="big-brother"] [data-section-key="compact-camera-layouts"] .case-editorial-board {
  padding-top: 4.6875%;
  background: #f0f0ee;
}
.case-editorial[data-case-slug="big-brother"] [data-section-key="compact-camera-layouts"] .case-editorial-screen {
  /* Blend only the empty source margin; the devices begin below this transition. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%);
  mask-image: linear-gradient(to bottom, transparent, #000 2%);
}
.case-editorial[data-case-slug="big-brother"] .case-editorial-board--player {
  display: grid;
  aspect-ratio: 4 / 3;
  padding: 8%;
}
.case-editorial[data-case-slug="big-brother"] .case-editorial-board--player .case-editorial-board-item {
  width: 100%;
}

/* Admin screenshots retain their source pixels without the old dark poster. */
.case-editorial[data-case-slug="marketplace-control-panel"] .case-editorial-board--admin-screen {
  display: grid;
  aspect-ratio: 1;
  max-height: none;
  padding: 8%;
  background: var(--case-canvas);
}
.case-editorial[data-case-slug="marketplace-control-panel"] .case-editorial-cover .case-editorial-board--admin-screen {
  aspect-ratio: 4 / 3;
  max-height: none;
  padding: 8%;
}
.case-editorial[data-case-slug="marketplace-control-panel"] .case-editorial-board--admin-screen :is(.case-editorial-board-item, .case-editorial-screen, .cms-image-zoom) {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
}
.case-editorial[data-case-slug="marketplace-control-panel"] .case-editorial-board--admin-screen .case-editorial-screen {
  overflow: hidden;
  border-radius: 1.25% / 1.8%;
  box-shadow: none;
}
.case-editorial[data-case-slug="marketplace-control-panel"] .case-editorial-board--admin-screen img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  border-radius: 0;
}
.case-editorial[data-case-slug="marketplace-control-panel"] :is(.case-editorial-board--admin-art, .case-editorial-board--admin-original) {
  display: block;
  aspect-ratio: auto;
  max-height: none;
  padding: 0;
  background: transparent;
}
.case-editorial[data-case-slug="marketplace-control-panel"] :is(.case-editorial-board--admin-art, .case-editorial-board--admin-original) :is(.case-editorial-board-item, .case-editorial-screen, .cms-image-zoom, img) {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
}
.case-editorial[data-case-slug="marketplace-control-panel"] [data-section-key="compact-offer-mapping"] {
  grid-template-columns: minmax(0, 1fr);
}

/* The square export has transparent side gutters; only those gutters may
   overflow the stage. Keep the full phone visible with even vertical space. */
.case-editorial:has(.citi-onboarding-stage) {
  --citi-phone-stage-height:clamp(480px, 50vw, 680px);
  --citi-phone-stage-padding:32px;
}
.case-editorial [data-section-key="citi-before-after"] .image-comparison-stage {
  height:auto;
  padding:var(--citi-phone-stage-padding) 24px;
}
.case-editorial [data-section-key="citi-before-after"] .image-comparison-viewport {
  flex:none;
  /* The dashboard below uses this same 2072px phone inside a 2160px export. */
  height:calc((var(--citi-phone-stage-height) - 2 * var(--citi-phone-stage-padding)) * 2072 / 2160);
}
.case-editorial .citi-phone-demo-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--citi-phone-stage-height);
  padding: var(--citi-phone-stage-padding) 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--case-canvas);
}
.case-editorial .citi-phone-demo {
  display: block;
  flex: none;
  height: 100%;
  width: auto;
  max-width: none;
  aspect-ratio: 1;
  object-fit: contain;
  background: transparent;
}
/* Mask the stable DOM surface, not WebKit's hardware video layer. The poster
   is always present behind the film and shares its exact size and mask. */
.case-editorial .citi-phone-surface {
  position: relative;
  flex: none;
  height: 100%;
  aspect-ratio: 1;
}
.case-editorial .citi-phone-surface > :is(.citi-phone-poster, .citi-phone-demo) {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border-radius: 0;
  object-fit: contain;
}
.case-editorial .citi-phone-surface > .citi-phone-poster { pointer-events: none; }
.case-editorial .citi-phone-surface > .citi-phone-demo { opacity: 0; }
.case-editorial .citi-phone-surface[data-frame-ready] > .citi-phone-demo { opacity: 1; }
@media (max-width: 767px) {
  .case-editorial:has(.citi-onboarding-stage) {
    --citi-phone-stage-height:clamp(380px, 110vw, 500px);
    --citi-phone-stage-padding:24px;
  }
  .case-editorial .citi-phone-demo-stage {
    border-radius: 12px;
  }
}

/* Match the homepage's transparent phone silhouette around the same film. */
.case-editorial .citi-phone-surface--dashboard {
  -webkit-mask-image: url('/videos/citi/citi-home-preview-poster-v2.webp');
  mask-image: url('/videos/citi/citi-home-preview-poster-v2.webp');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* The owner's encoded video frames are copied unchanged at native resolution.
   A display mask removes only its outer white canvas; no video recompression. */
.case-editorial .citi-phone-surface--onboarding {
  -webkit-mask-image: url('/images/citi/onboarding-phone-mask.svg');
  mask-image: url('/images/citi/onboarding-phone-mask.svg');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Keep the paused-frame layers inside the hero while it scrolls out of view. */
.case-editorial-cover--ensemble-video { position: relative; overflow: hidden; background: #f4cddd; border-radius: 16px; }
.case-editorial-cover--ensemble-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }

@media (max-width: 700px) { .case-editorial-cover--ensemble-video { border-radius: 10px; } }

/* Keep the reason for the work beside the designer’s contribution. */
.case-editorial-context { margin-bottom: 28px; }
.case-editorial-scale-context { max-width: none; margin: 28px 0 0; color: var(--heading); font-family: var(--main-font); font-size: 16px; font-weight: 300; line-height: 1.6; }


.case-editorial[data-case-slug="posivibez"] [data-section-key="posivibez-flight-la"] .case-editorial-board--video { padding: 0; aspect-ratio: auto; background: transparent; }
.case-editorial[data-case-slug="posivibez"] [data-section-key="posivibez-flight-la"] .cms-video-frame { width: 100%; aspect-ratio: 16 / 9; border-radius: inherit; }

/* The shared entrance reveals the complete icon canvas, including its backdrop. */
[data-icon-hero="pending"] { opacity: 0; }

/* Square prototype films: only empty side margins were cropped from the source. */
.case-editorial[data-case-slug="speedster-product-design"] [data-section-key$="-prototype"] .case-editorial-board--video {
  padding: 0;
  background: #e0e0e0;
}
.case-editorial[data-case-slug="speedster-product-design"] [data-section-key$="-prototype"] .cms-video-frame {
  width: 100%;
  aspect-ratio: 1;
  border-radius: inherit;
}
.case-editorial[data-case-slug="speedster-product-design"] [data-section-key$="-prototype"] video {
  width: 100%; height: 100%; object-fit: contain;
}

/* Wide, manually controlled case-study gallery. */
.case-editorial .case-editorial-chapter--gallery { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.case-editorial-chapter--gallery .case-editorial-copy { position: static; max-width: 760px; }
.case-editorial-chapter--gallery .case-editorial-media { min-width: 0; }
.case-carousel { min-width: 0; }
.case-carousel-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 8px; position: relative; }
.case-carousel-track::-webkit-scrollbar { display: none; }
.case-carousel-slide { flex: 0 0 86%; min-width: 0; scroll-snap-align: start; }
.case-carousel-slide .case-editorial-figure { margin: 0; }
.case-carousel-slide .case-editorial-board { aspect-ratio: 4 / 3; }
.case-carousel-controls { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }
.case-carousel-controls button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--solid-control-bg); color: var(--solid-control-color); font: 28px/1 Arial, sans-serif; cursor: pointer; padding: 0 0 3px; }
.case-carousel-controls button:disabled { opacity: .25; cursor: default; }
.case-carousel-track:focus-visible, .case-carousel-controls button:focus-visible { outline: 2px solid var(--portfolio-link); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .case-carousel-controls button:not(:disabled):hover { background: var(--solid-control-hover); } }
@media (max-width: 767px) { .case-carousel-track { gap: 14px; } .case-carousel-slide { flex-basis: 92%; } }


/* Three construction principles share one fixed canvas and Camera Views controls. */
.paramount-principles { min-width: 0; }
.paramount-principles-canvas { padding: 24px 24px 20px; overflow: hidden; border-radius: var(--nd-radius-preview-canvas); background: #080808; }
.paramount-principles-panels { aspect-ratio: 8 / 5; margin-bottom: 24px; }
.paramount-principle-panel { height: 100%; }
.paramount-principle-panel[hidden] { display: none; }
.paramount-principle-panel:not([hidden]) { animation: paramount-principle-enter .22s ease-out; }
.case-editorial .paramount-principle-panel :is(.case-editorial-figure, .case-editorial-board, .case-editorial-board-item, .case-editorial-screen, .cms-image-zoom) { width: 100%; height: 100%; margin: 0; padding: 0; aspect-ratio: auto; border-radius: 0; background: transparent; box-shadow: none; }
.paramount-principle-panel img { display: block; width: 100%; height: 100%; object-fit: contain; }
.paramount-principles-tabs { margin: 0 auto; border-color: rgb(255 255 255 / 22%); background: rgb(255 255 255 / 10%); }
.paramount-principles-tabs button { color: #c4c4c4; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.paramount-principles-tabs button:hover { color: #fff; }
.paramount-principles-tabs button[aria-selected=true] { color: #172a3a; }
.paramount-principles-tabs[data-selected="2"]::before { transform: translateX(100%); }
.paramount-principles-tabs[data-selected="3"]::before { transform: translateX(200%); }
.case-editorial .paramount-principle-caption { margin: 16px 0 0; color: var(--portfolio-copy); font-size: 14px; line-height: 1.5; }
@keyframes paramount-principle-enter { from { opacity: .3; } to { opacity: 1; } }
@media(max-width:767px) { .paramount-principles-canvas { padding: 12px 12px 20px; } .paramount-principles-panels { margin-bottom: 20px; } }
@media(prefers-reduced-motion:reduce) { .paramount-principle-panel:not([hidden]) { animation: none; } }

/* Passive Paramount+ player: original icons over existing case-study footage. */
.paramount-player-study { --responsive-stage-height: clamp(480px, 42vw, 580px); }
.case-editorial .paramount-player-study > .case-editorial-copy { position: static; align-self: start; display: grid; align-content: center; min-height: var(--responsive-stage-height); }
html .paramount-player-study .case-editorial-copy .case-view-controls { margin-top: 0; }
.case-editorial .paramount-player-study > .case-editorial-media { gap: 0; }
.case-editorial .paramount-player { margin: 0; }
.paramount-player-canvas { box-sizing: border-box; height: var(--responsive-stage-height); padding: clamp(20px, 3vw, 36px); overflow: hidden; border-radius: var(--nd-radius-preview-canvas); background: linear-gradient(145deg, #e7eeff, #c6d7f7); }
.paramount-player-stage { display: grid; place-items: center; width: 100%; height: 100%; container-type: size; }
.paramount-player-device { position: relative; box-sizing: border-box; display: flex; flex-direction: column; width: min(100cqw, 144cqh); height: min(62.5cqw, 90cqh); padding: 0; overflow: hidden; border: 1px solid #ffffff38; border-radius: 14px; background: #141414; box-shadow: 0 24px 48px -22px #15346c66; transition: width .45s cubic-bezier(.22,1,.36,1), height .45s cubic-bezier(.22,1,.36,1), padding .45s, border-radius .45s; }
.paramount-player-browser { display: flex; flex: 0 0 26px; justify-content: space-between; align-items: center; padding: 0 12px; color: #b7bbc4; font: 10px/1 var(--main-font); }
.paramount-player-browser > :first-child { width: 30px; font-size: 15px; letter-spacing: 2px; }
.paramount-player-browser > :last-child { width: 30px; }
.paramount-player-frame { position: relative; flex: 1; width: 100%; min-height: 0; overflow: hidden; border-radius: 0; background: #080808; isolation: isolate; container-type: inline-size; }
.paramount-player-frame video { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.paramount-player-study[data-player-view=tablet] .paramount-player-device { width: min(86cqw, 116cqh); height: min(64.5cqw, 87cqh); padding: 8px; border-radius: 24px; }
.paramount-player-study[data-player-view=mobile] .paramount-player-device { width: min(58cqw, 43cqh); height: min(125.5cqw, 93cqh); padding: 6px; border-radius: 30px; }
.paramount-player-study:not([data-player-view=desktop]) .paramount-player-browser { display: none; }
.paramount-player-study:not([data-player-view=desktop]) .paramount-player-frame { border-radius: 17px; }
.paramount-player-study[data-player-view=mobile] .paramount-player-frame { border-radius: 24px; }
.paramount-player-study[data-player-view=mobile] .paramount-player-device::after { content: ''; position: absolute; z-index: 3; width: 24%; height: 5px; left: 38%; top: 12px; border-radius: 6px; background: #343434; }
.paramount-player-ui { position: absolute; inset: 0; z-index: 2; color: #fff; pointer-events: none; user-select: none; background: linear-gradient(180deg, rgb(0 0 0 / 65%) 0%, transparent 30%, transparent 48%, rgb(0 0 0 / 75%) 100%); }
.paramount-player-top { position: absolute; inset: 5.7% 5.7% auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.paramount-player-title { display: grid; gap: 4px; font-size: clamp(10px, 1.6cqw, 18px); line-height: 1.35; }
.case-editorial .paramount-player-title strong { color: #fff; font-size: clamp(13px, 2.1cqw, 23px); font-weight: 600; }
.paramount-player-tools { display: flex; gap: clamp(12px, 2.2cqw, 24px); }
.paramount-player-ui .paramount-player-icon { display: block; width: clamp(20px, 3.7cqw, 42px); height: clamp(20px, 3.7cqw, 42px); object-fit: contain; border: 0; border-radius: 0; box-shadow: none; }
.paramount-player-bottom { position: absolute; inset: auto 5.7% 5%; }
.paramount-player-times { display: flex; justify-content: space-between; font-size: clamp(9px, 1.25cqw, 14px); font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 12px; }
.paramount-player-timeline { height: 3px; background: rgb(255 255 255 / 40%); border-radius: 2px; }
.paramount-player-timeline > span { display: block; position: relative; width: 0; height: 100%; border-radius: inherit; background: #0064ff; }
.paramount-player-timeline > span::after { content: ''; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: #0064ff; transform: translateY(-50%); }
.paramount-player-controls { position: relative; display: flex; justify-content: center; align-items: center; margin-top: clamp(14px, 2cqw, 24px); }
.paramount-player-transport { display: flex; align-items: center; gap: clamp(18px, 3.5cqw, 40px); }
.paramount-player-options { position: absolute; right: 0; display: flex; gap: clamp(12px, 2.2cqw, 24px); }
/* Match the supplied Paramount+ mobile player: title and tools share the
   header; transport and playback options stay on one row below the timeline.
   Scale the UI with the mockup instead of imposing full-size phone text. */
.paramount-player-study[data-player-view=mobile] .paramount-player-top { inset: 14cqw 5.1% auto; gap: 3cqw; flex-wrap: nowrap; }
.paramount-player-study[data-player-view=mobile] .paramount-player-title { min-width: 0; gap: 2cqw; font-size: 3cqw; white-space: nowrap; }
.case-editorial .paramount-player-study[data-player-view=mobile] .paramount-player-title strong { font-size: 4.4cqw; line-height: 1.15; }
.paramount-player-study[data-player-view=mobile] .paramount-player-tools { flex: 0 0 auto; width: auto; gap: 4cqw; }
.paramount-player-study[data-player-view=mobile] .paramount-player-icon { width: 7cqw; height: 7cqw; }
.paramount-player-study[data-player-view=mobile] .paramount-player-bottom { inset: auto 5.1% 6%; }
.paramount-player-study[data-player-view=mobile] .paramount-player-times { font-size: 3cqw; margin-bottom: 3cqw; }
.paramount-player-study[data-player-view=mobile] .paramount-player-timeline { height: 1cqw; }
.paramount-player-study[data-player-view=mobile] .paramount-player-timeline > span::after { display: none; }
.paramount-player-study[data-player-view=mobile] .paramount-player-controls { flex-wrap: nowrap; margin-top: 3cqw; }
.paramount-player-study[data-player-view=mobile] .paramount-player-transport { gap: 3cqw; }
.paramount-player-study[data-player-view=mobile] .paramount-player-icon--pause { width: 12cqw; height: 12cqw; }
.paramount-player-study[data-player-view=mobile] .paramount-player-options { position: absolute; width: auto; right: 0; gap: 3cqw; }
@media (max-width: 991px) {
  .paramount-player-study { --responsive-stage-height: clamp(400px, 100vw, 480px); }
  .case-editorial .paramount-player-study > .case-editorial-copy { display: none; }
}
@media (prefers-reduced-motion: reduce) { .paramount-player-device { transition: none; } }
@media (max-width: 767px) {
  .paramount-player-title { gap: 2px; }
  .paramount-player-times { margin-bottom: 8px; }
  .paramount-player-timeline { height: 2px; }
  .paramount-player-timeline > span::after { width: 7px; height: 7px; right: -3.5px; }
}

/* Original 56px Figma outline exports stay crisp at the close-up scale. */
.paramount-close-up { min-width: 0; width: 100%; max-width: 100%; }
.paramount-close-up-heading { margin-bottom: 32px; }
.case-editorial .paramount-close-up-heading h3 { margin: 0 0 16px; font-size: var(--type-heading); color: var(--heading); }
.paramount-close-up-heading p { margin: 0; color: var(--portfolio-copy); font-size: var(--type-body); line-height: 1.6; }
.paramount-close-up-gallery--mobile { display: none; }
.paramount-close-up-gallery .case-carousel-track { border-radius: var(--nd-radius-preview-canvas); padding-bottom: 0; }
.paramount-close-up-gallery .case-carousel-slide { flex-basis: 90%; }
.paramount-close-up-board { box-sizing: border-box; padding: clamp(32px, 4.5vw, 64px); border-radius: var(--nd-radius-preview-canvas); background: linear-gradient(135deg, #0737c1, #075aff); color: #fff; }
.paramount-close-up-board-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: clamp(36px, 4.5vw, 64px); }
.case-editorial .paramount-close-up-board-heading h4 { margin: 0; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.25; font-weight: 500; color: #fff; }
.paramount-close-up-board-heading > span { color: #c9daff; font-size: 14px; font-variant-numeric: tabular-nums; }
.paramount-close-up-icons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.case-editorial .paramount-close-up-icon { margin: 0; min-width: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.paramount-close-up-tile { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 12%; background: #0264ff; box-shadow: 0 16px 28px -10px rgb(0 22 105 / 30%); }
.paramount-close-up-tile img { display: block; position: absolute; width: 66%; max-width: none; height: 66%; left: 17%; top: 17%; object-fit: contain; }
.case-editorial .paramount-close-up-icon figcaption { margin: 20px 0 0; padding: 0; background: transparent; border: 0; color: #fff; font-size: 15px; line-height: 1.4; text-align: center; }
.paramount-close-up-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; }
.paramount-close-up-footer .case-carousel-controls { margin: 0; }
.paramount-close-up-count { color: var(--portfolio-copy); font-size: 14px; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  .paramount-close-up-gallery--desktop { display: none; }
  .paramount-close-up-gallery--mobile { display: block; }
  .paramount-close-up-heading { margin-bottom: 24px; }
  .paramount-close-up-gallery .case-carousel-slide { flex-basis: 92%; }
  .paramount-close-up-board { padding: 28px 24px 32px; }
  .paramount-close-up-board-heading { min-height: 50px; margin-bottom: 32px; gap: 16px; }
  .case-editorial .paramount-close-up-board-heading h4 { font-size: 22px; }
  .paramount-close-up-icons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .case-editorial .paramount-close-up-icon figcaption { font-size: 13px; margin-top: 16px; }
  .paramount-close-up-footer { margin-top: 20px; }
  .paramount-close-up-footer .case-carousel-controls button { width: 44px; height: 44px; }
}

/* Mobile case screens: one modestly sized screen per separate square canvas.
   Hero compositions and desktop layouts retain their existing presentation. */
@media (max-width: 767px) {
  .case-editorial .case-editorial-figure > .case-editorial-board[data-mobile-screens] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    aspect-ratio: auto;
    padding: 0;
    gap: 16px;
    background: transparent;
    border-radius: 0;
  }
  .case-editorial .case-editorial-figure > .case-editorial-board[data-mobile-screens] > .case-editorial-board-item {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    max-width: none;
    aspect-ratio: 1;
    padding: 0;
    background: var(--case-canvas);
    border-radius: 10px;
    overflow: hidden;
  }
  .case-editorial .case-editorial-figure > .case-editorial-board[data-mobile-screens] > .case-editorial-board-item > .case-editorial-screen {
    width: var(--mobile-screen-width, 35%);
    max-width: none;
    min-width: 0;
  }
  .case-editorial .case-editorial-board[data-mobile-screens] .case-editorial-comparison-label {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    margin: 0;
    font-size: 12px;
    text-align: center;
  }
  .case-editorial .case-editorial-figure > .case-editorial-board--locator-phones[data-mobile-screens] > .case-editorial-board-item { background: #c1d4ce; }
  .case-editorial .case-editorial-figure > .case-editorial-board--locator-option-phones[data-mobile-screens] > .case-editorial-board-item { background: #076530; }
}

/* Citi and Speedster use a quieter mobile scale than the Swiftly case. */
@media (max-width: 767px) {
  .case-editorial:has(.citi-onboarding-stage) .case-editorial-figure > .case-editorial-board[data-mobile-screens] > .case-editorial-board-item > .case-editorial-screen,
  .case-editorial[data-case-slug="speedster-product-design"] .case-editorial-figure > .case-editorial-board[data-mobile-screens] > .case-editorial-board-item > .case-editorial-screen {
    width: calc(var(--mobile-screen-width, 35%) * .75);
  }
  .case-editorial[data-case-slug="speedster-product-design"] [data-section-key$="-prototype"] .cms-video-frame {
    width: 75%;
    justify-self: center;
    align-self: center;
    border-radius: 0;
  }
}

/* Chupogi shares the existing Big Brother selector; the artwork never shifts size. */

.case-mascot-panels { aspect-ratio:1; overflow:hidden; border-radius:16px; background:#f8861c; }
.case-mascot-panels [hidden] { display:none; }
.case-editorial[data-case-slug="springbom-pilates"] .case-mascot-panels :is([role="tabpanel"], .case-editorial-figure, .case-editorial-board, .case-editorial-board-item, .case-editorial-screen, .cms-image-zoom, img) {
  width:100%; height:100%; margin:0; padding:0; max-height:none;
}
.case-editorial[data-case-slug="springbom-pilates"] .case-mascot-panels .case-editorial-board { aspect-ratio:1; }
.case-mascot-panels img { object-fit:contain; }
@media(max-width:991px) {
  .case-editorial .case-editorial-chapter.case-mascot { gap:24px; }

}
@media(max-width:767px) { .case-mascot-panels { border-radius:12px; } }

@media(max-width:767px){.case-editorial-chapter--desktop-only{display:none!important}}

/* Mobile text controls follow the artwork; desktop controls move into the copy. */
.case-editorial .case-mascot > .case-editorial-media,
.case-editorial .case-wireframes > .case-editorial-media { gap:0; }
@media(max-width:991px) {
 .case-editorial .case-wireframes > .case-editorial-copy,
 .case-editorial .responsive-player > .case-editorial-copy { display:none; }
}