/* Case-study body: one grammar below the fold (portfolio visual refresh board §7.1 and §7.2).
   Linked from every page's <head>; everything is scoped to case studies by
   html[data-cs-case-study] (set by site-fixes.js). Remove the <link> to revert all of it;
   each block below is independent and can be deleted on its own. The data-cs-* attributes
   come from the "Case-study body" block in site-fixes.js. */

/* ---------- 7.1 Type scale ----------
   Each step is about 1.5× the one below: page title 48, section headline 30, sub-head 20
   (the existing preset), body 17 (unchanged), mono labels 12–13. */
html[data-cs-case-study] #main h2.framer-styles-preset-6qntxx {
  --framer-font-size: 48px !important;
  --framer-line-height: 1.1em !important;
  --framer-letter-spacing: -0.02em !important;
}
html[data-cs-case-study] #main h4[data-cs-head] {
  --framer-font-size: 30px !important;
  --framer-line-height: 1.3em !important;
  --framer-letter-spacing: -0.015em !important;
}
@media (max-width: 1199.98px) {
  html[data-cs-case-study] #main h2.framer-styles-preset-6qntxx { --framer-font-size: 42px !important; }
  html[data-cs-case-study] #main h4[data-cs-head] { --framer-font-size: 26px !important; }
}
@media (max-width: 809.98px) {
  html[data-cs-case-study] #main h2.framer-styles-preset-6qntxx { --framer-font-size: 36px !important; }
  html[data-cs-case-study] #main h4[data-cs-head] { --framer-font-size: 22px !important; }
}

/* ---------- 7.1 Section openers ----------
   The mono eyebrow becomes "08  LEADERSHIP ————": a teal number that matches the contents,
   the label, and an ink rule to the column edge. It replaces the star dividers. */
html[data-cs-case-study] #main [data-framer-component-type="RichTextContainer"]:has(> h3.framer-styles-preset-1rj5zzj) {
  align-self: stretch !important;
  width: auto !important;
  /* Framer faded the label up on scroll, after its headline was already showing; the opener
     and its headline now appear together. */
  opacity: 1 !important;
  transform: none !important;
}
html[data-cs-case-study] #main h3.framer-styles-preset-1rj5zzj {
  display: flex !important;
  align-items: center;
  gap: 12px;
  --framer-font-size: 13px !important;
  --framer-line-height: 1.4em !important;
  --framer-letter-spacing: 0.1em !important;
  --framer-text-transform: uppercase !important;
  --framer-text-color: #4d605e !important;
  text-transform: uppercase;
}
html[data-cs-case-study] #main h3.framer-styles-preset-1rj5zzj[data-cs-n]::before {
  content: attr(data-cs-n);
  flex: none; /* a long label wraps; the number never splits into "0 / 2" */
  color: rgb(0, 127, 128);
}
html[data-cs-case-study] #main h3.framer-styles-preset-1rj5zzj::after {
  content: "";
  flex: 1;
  min-width: 24px;
  border-top: 1.5px solid #222;
}
@media (max-width: 809.98px) {
  html[data-cs-case-study] #main h3.framer-styles-preset-1rj5zzj { --framer-font-size: 12px !important; gap: 10px; }
}

/* The same numbers in the contents: Framer's teal box (nav A on desktop) and the rail and
   phone sheet (nav.css styles .cs-sub). */
html[data-cs-case-study] nav[aria-label="Table of contents"] li > button[data-cs-n]::before {
  content: attr(data-cs-n);
  margin-right: 8px;
  font-family: "Necto Mono", ui-monospace, monospace;
  font-size: 0.85em;
  opacity: 0.75;
}

/* ---------- 7.1 Spacing ----------
   Star dividers are gone, including the one before Reflection; sections are separated by
   space alone, the same on every page (Framer had 50 to 120px depending on the page). The stacks keep their own gap, because
   case-hero.css places the TL;DR and metadata against it; each section after the first gets a
   top margin of (target − that gap) instead. --cs-gap-above (the gap of the stack the section
   sits in) is set on each section by site-fixes.js. case-hero.css reads --cs-section-gap and
   [data-cs-section], so keep those names. */
html[data-cs-case-study] #main [class*="-container"]:has(> .framer-UvsAd),
html[data-cs-case-study] #main :has(> [class*="-container"] > .framer-UvsAd):not(:has(p, h1, h2, h3, h4, h5, h6, video)) {
  display: none !important;
}
html[data-cs-case-study] { --cs-section-gap: 128px; }
@media (max-width: 1199.98px) { html[data-cs-case-study] { --cs-section-gap: 104px; } }
@media (max-width: 809.98px) { html[data-cs-case-study] { --cs-section-gap: 80px; } }
html[data-cs-case-study] #main [data-cs-stack] > [data-cs-section] {
  margin-top: calc(var(--cs-section-gap) - var(--cs-gap-above, var(--cs-section-gap))) !important;
}

/* ---------- 7.2 Bubble: someone is talking ----------
   TL;DR, decisions and their reasoning, findings, user quotes, reflections. One shape:
   25px corners with one square corner on the tail side (the side Framer already had).
   Transparent bubbles take the TL;DR's fill; colored ones (problem tan, result ice,
   the dark/light pairs) keep their color. */
html[data-cs-case-study] #main [data-cs-box="bubble"] { border-radius: 25px 25px 25px 0 !important; }
html[data-cs-case-study] #main [data-cs-box="bubble"][data-cs-tail="br"] { border-radius: 25px 25px 0 25px !important; }
html[data-cs-case-study] #main [data-cs-box="bubble"][data-cs-tail="tl"] { border-radius: 0 25px 25px 25px !important; }
html[data-cs-case-study] #main [data-cs-box="bubble"][data-cs-tail="tr"] { border-radius: 25px 0 25px 25px !important; }
html[data-cs-case-study] #main [data-cs-box="bubble"][data-cs-fill="none"] { background-color: rgb(223, 234, 248) !important; }

/* ---------- 7.2 Panel: look at this ----------
   Screenshots, video, diagrams and sliders, plus the cards that share a grid with them.
   The cover's comic grammar: a 2px ink frame and square corners. */
html[data-cs-case-study] #main [data-cs-box="panel"],
html[data-cs-case-study] #main [data-cs-box="panel"] > [data-framer-background-image-wrapper] {
  border-radius: 0 !important;
}
html[data-cs-case-study] #main [data-border="true"][data-cs-box="panel"]::after {
  border: 2px solid #222 !important;
  border-radius: 0 !important;
}

/* ---------- 7.2 Note: facts and rules ----------
   Stat cards and numbered rules lose their fill and box. What's left is an ink rule on top
   and the content, aligned to the column edge. (The metadata table is case-hero.css's strip.) */
html[data-cs-case-study] #main :is([data-cs-box="stat"], [data-cs-box="note"]) {
  background-color: transparent !important;
  border-radius: 0 !important;
  padding: 14px 0 0 !important;
}
html[data-cs-case-study] #main [data-border="true"]:is([data-cs-box="stat"], [data-cs-box="note"])::after {
  border-width: 1.5px 0 0 !important;
  border-color: #222 !important;
  border-style: solid !important;
  border-radius: 0 !important;
}

/* ---------- 7.2 Pull question (was the dark "How might we" pill) ----------
   No fill and no icon: a teal bar on the left, a mono label, and the question in the
   heading face. */
html[data-cs-case-study] #main [data-cs-box="pull"] {
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: inset 3px 0 0 rgb(0, 127, 128) !important;
  padding: 4px 0 4px 22px !important;
}
html[data-cs-case-study] #main [data-cs-box="pull"]::after { display: none !important; }
/* Framer popped the old pill in from scale(0), a bubble's entrance. A pull question just appears. */
html[data-cs-case-study] #main :is([data-cs-box="pull"], [data-cs-box="linkrow"]) { transform: none !important; }
html[data-cs-case-study] #main [data-cs-box="pull"] [data-framer-name="Question"] { display: none !important; }
html[data-cs-case-study] #main [data-cs-box="pull"] p { --framer-text-color: #10201f !important; }
html[data-cs-case-study] #main [data-cs-box="pull"] p:is(.framer-styles-preset-1sv6u0f, [data-cs-pull="label"]):not([data-cs-pull="q"]) {
  --framer-font-family: "Necto Mono", "Necto Mono Placeholder", monospace !important;
  --framer-font-size: 12px !important;
  --framer-letter-spacing: 0.1em !important;
  --framer-text-transform: uppercase !important;
  --framer-text-color: #4d605e !important;
  text-transform: uppercase;
}
html[data-cs-case-study] #main [data-cs-box="pull"] p:is(.framer-styles-preset-169fk5x:not([data-cs-pull="label"]), [data-cs-pull="q"]) {
  --framer-font-family: "National Park", "National Park Placeholder", sans-serif !important;
  --framer-font-weight: 600 !important;
  --framer-font-size: 22px !important;
  --framer-line-height: 1.35em !important;
  --framer-letter-spacing: -0.01em !important;
}
/* Questions written as a numbered list (Encore) read as plain questions, one after another. */
html[data-cs-case-study] #main [data-cs-box="pull"] ol:has(p[data-cs-pull="q"]) { list-style: none !important; padding: 0 !important; margin: 0 !important; }
html[data-cs-case-study] #main [data-cs-box="pull"] li:has(> p[data-cs-pull="q"]) { padding: 0 !important; }
html[data-cs-case-study] #main [data-cs-box="pull"] li:has(> p[data-cs-pull="q"])::before,
html[data-cs-case-study] #main [data-cs-box="pull"] li:has(> p[data-cs-pull="q"])::marker { content: none !important; }
@media (max-width: 809.98px) {
  html[data-cs-case-study] #main [data-cs-box="pull"] { padding-left: 16px !important; }
  html[data-cs-case-study] #main [data-cs-box="pull"] p:is(.framer-styles-preset-169fk5x:not([data-cs-pull="label"]), [data-cs-pull="q"]) { --framer-font-size: 18px !important; }
}

/* ---------- 7.2 Link row (was the teal "Full case study" card) ---------- */
html[data-cs-case-study] #main [data-cs-box="linkrow"] {
  background-color: transparent !important;
  border-radius: 0 !important;
  padding: 16px 0 !important;
}
html[data-cs-case-study] #main [data-border="true"][data-cs-box="linkrow"]::after {
  border-width: 1.5px 0 !important;
  border-color: #222 !important;
  border-style: solid !important;
  border-radius: 0 !important;
}

/* ---------- Jump to final design ----------
   A quiet teal link at the right end of the tag line, styled like "See the work" on home, with
   the nav's scribble underline drawing in on hover. Framer's sticker button is hidden. */
html[data-cs-case-study] #main [data-cs-jump-old] { display: none !important; }
/* The tag line spans the column so the link can sit at its right end. */
html[data-cs-case-study] #main :has(> a.cs-jump) { width: 100% !important; align-self: stretch !important; }
/* case-hero.css ends every tag but the last with "·"; the link isn't a tag. */
html[data-cs-case-study] #main :has(+ a.cs-jump) p::after { content: none !important; }
html[data-cs-case-study] #main a.cs-jump {
  margin-left: auto !important;
  padding-left: 24px !important;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: rgb(0, 127, 128);
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
}
html[data-cs-case-study] #main a.cs-jump::before,
html[data-cs-case-study] #main a.cs-jump::after { content: none !important; }
html[data-cs-case-study] #main a.cs-jump .cs-link-t { position: relative; }
html[data-cs-case-study] #main a.cs-jump:is(:hover, :focus-visible) .cs-link-scribble { clip-path: inset(0 0 0 0); }
/* Spacing lives on the arrow and the link itself: case-hero.css zeroes the tag line's children's gap and padding. */
.cs-jump-a { display: inline-block; margin-left: 6px; transition: transform 160ms ease; }
html[data-cs-case-study] #main a.cs-jump:hover .cs-jump-a { transform: translateY(3px); }
html[data-cs-case-study] #main a.cs-jump:focus-visible { outline: 2px solid rgb(0, 127, 128); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 809.98px) {
  /* The tag line wraps on phones; the link takes its own line under the tags. */
  html[data-cs-case-study] #main a.cs-jump { flex-basis: 100%; margin: 6px 0 0 !important; padding-left: 0 !important; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .cs-jump-a { transition: none; } }

/* ---------- 7.3 Decision, then the artifact ----------
   The card stops being a box; its reasoning becomes the bubble (full width, on top), and the
   artifact sits under it as a panel. */
html[data-cs-case-study] #main [data-cs-dec][data-cs-dec] {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 20px !important;
  height: auto !important;
  padding: 0 !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}
html[data-cs-case-study] #main [data-cs-dec][data-cs-dec]::after { display: none !important; }
html[data-cs-case-study] #main [data-cs-dec-text] {
  order: -1;
  width: 100% !important;
  height: auto !important;
  padding: 24px 28px !important;
  background-color: rgb(223, 234, 248);
  border: 1.5px solid #222;
  border-radius: 25px 25px 25px 0;
}
html[data-cs-case-study] #main [data-cs-dec][data-cs-tail="br"] > [data-cs-dec-text] { border-radius: 25px 25px 0 25px; }
html[data-cs-case-study] #main [data-cs-dec][data-cs-tail="tl"] > [data-cs-dec-text] { border-radius: 0 25px 25px 25px; }
html[data-cs-case-study] #main [data-cs-dec][data-cs-tail="tr"] > [data-cs-dec-text] { border-radius: 25px 0 25px 25px; }
html[data-cs-case-study] #main [data-cs-dec-fig] {
  width: 100% !important;
  height: auto !important;
  align-items: flex-start !important;
}
html[data-cs-case-study] #main [data-cs-dec-fig] > :not([data-framer-background-image-wrapper]) { width: 100% !important; height: auto !important; }
/* A frame that keeps its proportions as it grows (aspect-ratio and --cs-ar, width ÷ height, are
   set inline by site-fixes.js). It fills the column unless that would make it taller than
   --cs-fit-h, so square, tall and phone-shaped media stay a readable size. */
html[data-cs-case-study] { --cs-fit-h: 520px; }
@media (max-width: 1199.98px) { html[data-cs-case-study] { --cs-fit-h: 460px; } }
@media (max-width: 809.98px) { html[data-cs-case-study] { --cs-fit-h: 440px; } }
html[data-cs-case-study] #main [data-cs-fit] {
  width: min(100%, calc(var(--cs-fit-h) * var(--cs-ar, 10))) !important;
  height: auto !important;
  flex: none !important;
  align-self: flex-start !important;
}
/* Extra's NFC illustration supports the decision; it is not a full-width UI. */
.framer-QrRzv .framer-zimkyg { --cs-fit-h: 240px; }

/* Framer portals use z-index 10, below the Contents rail (50/1000). Keep both
   the lightbox image and its click-to-dismiss backdrop above the navigation. */
#template-overlay:has(.framer-lightbox-container) > [data-framer-portal-id] {
  z-index: 1100 !important;
}
@media (max-width: 809.98px) {
  html[data-cs-case-study] #main [data-cs-dec-text] { padding: 18px 20px !important; }
}

/* ---------- 7.3 Annotation pins ----------
   Teal numbered pins on a solution image; each opens a small speech bubble with one "why".
   They pop in once when the image scrolls into view, and open on hover, focus or tap. */
html[data-cs-case-study] #main [data-cs-pins] { overflow: visible !important; }
.cs-pin {
  all: unset;
  position: absolute;
  z-index: 2;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  display: grid;
  place-items: center;
  border: 2px solid #222;
  border-radius: 50%;
  background: rgb(0, 127, 128);
  color: #fff;
  font: 600 12px/1 "Necto Mono", ui-monospace, monospace;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.4);
}
.cs-pins-in .cs-pin {
  opacity: 1;
  transform: scale(1);
  transition: opacity 200ms ease, transform 380ms cubic-bezier(.34, 1.56, .64, 1);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.cs-pin:focus-visible { outline: 2px solid #222; outline-offset: 3px; }
.cs-pin-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  width: 240px;
  margin-left: -14px;
  padding: 9px 12px;
  background: #fff;
  color: #10201f;
  border: 1.5px solid #222;
  border-radius: 14px 14px 14px 3px;
  box-shadow: 3px 3px 0 #222;
  font: 400 13px/1.45 "Inter", "Inter Placeholder", sans-serif;
  text-align: left;
  white-space: normal;
  transform-origin: 0 100%;
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
  transition: opacity 140ms ease, transform 180ms cubic-bezier(.34, 1.56, .64, 1);
}
.cs-pin.is-left .cs-pin-tip { left: auto; right: 50%; margin: 0 -14px 0 0; border-radius: 14px 14px 3px 14px; transform-origin: 100% 100%; }
.cs-pin.is-below .cs-pin-tip { bottom: auto; top: calc(100% + 10px); border-radius: 3px 14px 14px 14px; transform-origin: 0 0; }
.cs-pin.is-left.is-below .cs-pin-tip { border-radius: 14px 3px 14px 14px; transform-origin: 100% 0; }
.cs-pin:is(:hover, :focus-visible, [aria-expanded="true"]) { z-index: 3; }
.cs-pin:is(:hover, :focus-visible, [aria-expanded="true"]) .cs-pin-tip { opacity: 1; transform: scale(1); }
@media (max-width: 809.98px) { .cs-pin-tip { width: min(220px, 70vw); font-size: 12.5px; } }
@media (prefers-reduced-motion: reduce) {
  .cs-pin { opacity: 1; transform: none; }
  .cs-pins-in .cs-pin, .cs-pin-tip { transition: none; }
}

/* ---------- 7.4 Figures ----------
   One width: a lone figure spans the text column. One caption: "FIG. 2.1" in mono, then the
   caption's own words. A zoom tab where the image opens the lightbox. A one-time wipe in. */
html[data-cs-case-study] #main [data-cs-wide] { width: 100% !important; align-self: stretch !important; }
html[data-cs-case-study] #main [data-cs-wide] > [data-framer-component-type="RichTextContainer"] { width: 100% !important; }
/* Framer set some captions never to wrap, so a long one was cut off at the frame's edge. */
html[data-cs-case-study] #main [data-cs-figcap] { width: 100% !important; align-self: stretch !important; white-space: pre-wrap !important; }
html[data-cs-case-study] #main p[data-cs-fig] {
  --framer-text-alignment: start !important;
  --framer-text-color: #4d605e !important;
  --framer-font-size: 13.5px !important;
  --framer-line-height: 1.45em !important;
  text-align: start !important;
}
html[data-cs-case-study] #main p[data-cs-fig]::before,
.cs-fignum {
  font-family: "Necto Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #10201f;
}
html[data-cs-case-study] #main p[data-cs-fig]::before { content: "FIG. " attr(data-cs-fig); margin-right: 8px; }
.cs-fignum { margin: 0; width: 100%; line-height: 1.45; }
/* Zoom tab on everything the image viewer opens (site-fixes.js sets data-cs-zoom, and makes the
   frame a containing block when it isn't one). Small thumbnails get just the icon. It shows on
   hover or focus, and always on touch screens. */
html[data-cs-case-study] #main [data-cs-lb] { cursor: zoom-in; }
html[data-cs-case-study] #main [data-cs-lb] img { cursor: inherit; }
html[data-cs-case-study] #main [data-cs-lb]:focus-visible { outline: 2px solid rgb(0, 127, 128); outline-offset: 3px; }
html[data-cs-case-study] #main [data-cs-zoom]::before {
  content: "⤢ zoom";
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 5px 7px;
  background: #fff;
  border: 1.5px solid #222;
  border-radius: 6px;
  font: 12px/1 "Necto Mono", ui-monospace, monospace;
  color: #10201f;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease;
}
html[data-cs-case-study] #main [data-cs-zoom="icon"]::before { content: "⤢"; right: 4px; bottom: 4px; padding: 3px 4px; font-size: 11px; }
html[data-cs-case-study] #main [data-cs-zoom]:is(:hover, :focus-within)::before { opacity: 1; }
@media (hover: none) { html[data-cs-case-study] #main [data-cs-zoom]::before { opacity: 1; } }

/* ---------- Image viewer ----------
   Full screen on the page's paper, the image in an ink frame, the FIG. caption in mono under it.
   "Full size" (or a tap on the image) swaps to the real pixels in a scrolling stage. */
html[data-cs-lb-open] { overflow: hidden; }
.cs-lb {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  background: rgb(239, 255, 254);
  animation: cs-lb-in 160ms ease;
}
@keyframes cs-lb-in { from { opacity: 0; } }
.cs-lb-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 16px 12px;
  overflow: hidden;
  cursor: zoom-out;
}
.cs-lb-media {
  display: block;
  flex: none;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #fff;
  border: 2px solid #222;
  cursor: zoom-in;
}
video.cs-lb-media { cursor: auto; }
.cs-lb.is-zoomed .cs-lb-stage { align-items: flex-start; justify-content: flex-start; overflow: auto; -webkit-overflow-scrolling: touch; padding: 64px 16px 16px; }
.cs-lb.is-zoomed .cs-lb-media { max-width: none; max-height: none; height: auto; cursor: zoom-out; }
.cs-lb-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: min(100%, 960px);
  margin: 0 auto;
  padding: 4px 16px max(20px, env(safe-area-inset-bottom));
}
.cs-lb-cap {
  margin: 0;
  font: 400 14px/1.45 "Inter", "Inter Placeholder", sans-serif;
  color: #4d605e;
}
.cs-lb-num { margin-right: 8px; font: 12px/1.45 "Necto Mono", ui-monospace, monospace; letter-spacing: 0.04em; color: #10201f; }
.cs-lb-zoom,
.cs-lb-close {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  background: #fff;
  border: 1.5px solid #222;
  color: #10201f;
}
.cs-lb-zoom { flex: none; padding: 7px 10px; border-radius: 6px; font: 12px/1 "Necto Mono", ui-monospace, monospace; white-space: nowrap; }
.cs-lb-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.cs-lb-close .cs-icon { width: 20px; height: 20px; }
.cs-lb-zoom:focus-visible,
.cs-lb-close:focus-visible { outline: 2px solid rgb(0, 127, 128); outline-offset: 2px; }
@media (hover: hover) { .cs-lb-zoom:hover, .cs-lb-close:hover { background: rgb(223, 234, 248); } }
@media (prefers-reduced-motion: reduce) { .cs-lb { animation: none; } }

/* ---------- Phone layout ----------
   Tags from the "Phone layout" block in site-fixes.js. Same 20px gutters on every page; a
   paragraph that sat in a narrow column beside a screenshot stacks over it; a caption that
   couldn't wrap can. */
@media (max-width: 809.98px) {
  html[data-cs-case-study] #main [data-cs-gutter-out] { padding-left: 0 !important; }
  html[data-cs-case-study] #main [data-cs-gutter-in] { padding-left: 20px !important; padding-right: 20px !important; }
  html[data-cs-case-study] #main [data-cs-mrow] {
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
    gap: 16px !important;
  }
  html[data-cs-case-study] #main [data-cs-mrow] > *,
  html[data-cs-case-study] #main [data-cs-mrow-fill] { width: 100% !important; height: auto !important; flex: none !important; }
  html[data-cs-case-study] #main [data-cs-mfit] {
    width: min(100%, calc(var(--cs-fit-h) * var(--cs-ar, 10))) !important;
    height: auto !important;
    aspect-ratio: var(--cs-mar);
    flex: none !important;
    align-self: flex-start !important;
  }
  html[data-cs-case-study] #main [data-cs-hgrow] { height: auto !important; }
  html[data-cs-case-study] #main [data-cs-wrap] { white-space: pre-wrap !important; max-width: 100% !important; flex-shrink: 1 !important; }
}

/* ---------- Encore: pause screen before/after ----------
   From the "Encore: pause screen" block in site-fixes.js. Same parts as the Framer sliders
   (GoDaddy, PhysioVaping): a white pill for before, a teal one for after, a teal ⟷ knob on a
   white line, in a 2px ink panel. The range input on top does the dragging (and the keyboard). */
html[data-cs-case-study] #main [data-cs-ba-old] { display: none !important; }
.cs-pause { display: flex; flex-direction: column; gap: 10px; width: 100%; }
/* Framer positions some column children absolutely; these sit in the flow. */
.cs-pause > * { position: relative !important; inset: auto !important; }
.cs-ba,
.cs-pair-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1474 / 862;
  border: 2px solid #222;
  background: #222;
}
.cs-ba > img,
.cs-ba-after,
.cs-ba-after video,
.cs-pair-item video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-ba-after { clip-path: inset(0 0 0 var(--pos)); }
.cs-ba-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 5px 12px;
  border: 1.5px solid #222;
  border-radius: 999px;
  background: #fff;
  color: #10201f;
  font: 600 14px/1.2 "Inter", "Inter Placeholder", sans-serif;
  letter-spacing: -0.01em;
  pointer-events: none;
}
.cs-ba-tag.is-final { left: auto; right: 12px; background: rgb(0, 127, 128); color: #fff; }
.cs-ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 2; width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.cs-ba-knob {
  position: absolute;
  top: 50%;
  left: var(--pos);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgb(0, 127, 128);
  color: #fff;
  font: 600 16px/1 "Inter", sans-serif;
  pointer-events: none;
}
.cs-ba-range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  touch-action: pan-y;
}
/* A full-height thumb under the knob, so a finger on the knob drags it and a swipe elsewhere still scrolls. */
.cs-ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 48px; height: 100vh; }
.cs-ba-range::-moz-range-thumb { width: 48px; height: 100vh; border: 0; }
.cs-ba:has(.cs-ba-range:focus-visible) { outline: 2px solid rgb(0, 127, 128); outline-offset: 3px; }
.cs-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
@media (max-width: 809.98px) {
  .cs-pair { grid-template-columns: 1fr; }
  .cs-ba-tag { top: 8px; left: 8px; padding: 4px 10px; font-size: 12px; }
  .cs-ba-tag.is-final { right: 8px; }
}

/* Extra's "Final design" flow: below desktop Framer collapsed the first and last steps (1px
   wrappers around 40px cards), so only step 2 showed. */
@media (max-width: 1199.98px) {
  .framer-QrRzv :is(.framer-1dh5ifz, .framer-1ekjpo2, .framer-j9poxd, .framer-1rclgf5) { height: auto !important; }
}
html[data-cs-case-study] #main [data-cs-wipe]:not(.cs-wipe-go) { clip-path: inset(0 100% 0 0); }
html[data-cs-case-study] #main [data-cs-wipe].cs-wipe-go { clip-path: inset(0 0 0 0); transition: clip-path 450ms cubic-bezier(.65, 0, .35, 1); }
html[data-cs-case-study] #main [data-cs-wipe].cs-wipe-done { clip-path: none; }
@media (prefers-reduced-motion: reduce) { html[data-cs-case-study] #main [data-cs-wipe] { clip-path: none !important; } }

/* ---------- Caption boxes ----------
   A comic narration box instead of a lavender PNG bubble: square, 1.5px ink, white, mono caps,
   pinned 12px inside the figure's top-left corner (--cs-cap-x/y from site-fixes.js). It no
   longer takes up room above the figure, and it doesn't pop in. Video labels get a ▶. */
html[data-cs-case-study] #main [data-cs-capbox] {
  position: absolute !important;
  left: var(--cs-cap-x, 12px) !important;
  top: var(--cs-cap-y, 12px) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2;
  width: auto !important;
  height: auto !important;
  max-width: var(--cs-cap-w, calc(100% - 24px)) !important;
  aspect-ratio: auto !important;
  padding: 5px 9px !important;
  background: #fff;
  border: 1.5px solid #222;
  border-radius: 0;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
}
html[data-cs-case-study] #main [data-cs-capbox] > [data-framer-background-image-wrapper] { display: none !important; }
html[data-cs-case-study] #main [data-cs-capbox] > :not([data-framer-background-image-wrapper]) {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
}
html[data-cs-case-study] #main [data-cs-capbox] p {
  --framer-font-family: "Necto Mono", "Necto Mono Placeholder", monospace !important;
  --framer-font-size: 12px !important;
  --framer-line-height: 1.4em !important;
  --framer-letter-spacing: 0.06em !important;
  --framer-text-color: #10201f !important;
  --framer-text-alignment: start !important;
  --framer-text-transform: uppercase !important;
  text-transform: uppercase;
  text-align: start !important;
}
html[data-cs-case-study] #main [data-cs-capbox="video"] p::before { content: "▶ "; color: rgb(0, 127, 128); }
@media (max-width: 809.98px) {
  html[data-cs-case-study] #main [data-cs-capbox] p { --framer-font-size: 10.5px !important; }
}