/* ══ Case study ═════════════════════════════════════════════════════════
   Figma 813:10621 — the Menuvo write-up, a 1280x7710 frame.

   The hero keeps the fixed-frame treatment the rest of the site uses, so it
   reuses .stage and its cqw coordinate space. The body below it does not:
   it is a 7000px document rather than a composition, so it runs in normal
   flow down a centred column. Pinning several hundred paragraphs to absolute
   frame coordinates would be unreadable to edit and would break the moment a
   sentence changed length. The column width, gutters and rhythm are taken
   from the frame; the vertical positions are not.

   Colours below are sampled from the frame rather than guessed. */

.case {
  /* The frame's own page colour. */
  --page: #fffcf6;
  --gold: #b19c1b;
  --body: #3f3f3e;
  --amber: #ffda9f;
  --cocoa: #733d20;
  --clay: #955430;
  --rule: #898989;
  --sage: #62845f;

  background: var(--page);
}

/* Cadence runs the same layout on its own palette: a blue accent instead of
   the gold, slate cards instead of cocoa, and a dark cover band. Sampled from
   Figma 820:16765. */
.case--cadence {
  --gold: #006ea1;
  --cocoa: #434c5e;
  --clay: #434c5e;
  --amber: #3b4353;
}

/* Food Blend runs teal throughout, sampled from Figma 820:18277.
   Cover / filled surfaces use the hero teal (#5C949C). */
.case--beli {
  --gold: #2c636e;
  --cocoa: #2b6774;
  --clay: #2b6774;
  --amber: #5c949c;
}

/* Rythmeet is client work, so it runs on the startup's own violet: a
   saturated accent for the kickers over a muted one for every filled
   surface. Sampled from Figma 820:18279. */
.case--rythmeet {
  --gold: #4a21e3;
  --cocoa: #6050a0;
  --clay: #6050a0;
  --amber: #6050a0;
}

/* The kinetic grid (landing.css) stays fixed to the viewport. Hero, body and
   footer are transparent so it runs the length of every case study. */

/* ── Hero ─────────────────────────────────────────────────────────────── */

.stage--case {
  background: transparent;
}

/* Figma 813:16549. Everything in the hero sits on one column, and it is the
   same 1030 column the body below uses, so the left and right margins hold
   all the way down the page. The cover used to be a 1178 band at x=50 while
   the body ran at x=125, which is what made the margins disagree. */
.case-hero {
  position: absolute;
  left: 9.766cqw; /* 125 */
  top: 9.453cqw; /* 121 */
  width: 80.469cqw; /* 1030 */
  z-index: 2;
}

.case-cover {
  position: relative;
  width: 100%;
  /* The frame's cover is 1066x517. */
  aspect-ratio: 1066 / 517;
  background: var(--amber);
  overflow: hidden;
}

/* Menuvo and the repo button at the left edge of the column, the date and
   swatches at the right — Figma 813:16548, a 93-tall row 30 below the cover. */
.case-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 2.344cqw; /* 30 */
}

.case-head-right {
  text-align: right;
}

/* Same clipping frames as the landing cover: the recordings carry a cream
   margin around the phone that has to be pushed outside the frame. */
.case-cover .shot {
  position: absolute;
  display: block;
  top: 8.124%; /* 42 / 517 */
  height: 83.947%; /* 434 / 517 */
  overflow: hidden;
}

.case-cover .shot--menuvo-1 {
  left: 28.331%; /* 302 / 1066 */
  width: 19.888%; /* 212 */
}

.case-cover .shot--menuvo-2 {
  left: 51.595%; /* 550 */
  width: 19.981%; /* 213 */
}

/* ── Food Blend ───────────────────────────────────────────────────────── */

/* This cover is composed rather than filled: a phone on the left of a line of
   copy. Figma 820:16987 — recording at 261 sized 201x416, text from 509. */
/* Both pieces are placed against the band itself. A grid split looked close
   but resolves its percentages against the column rather than the full band,
   which halved the phone and pulled both pieces left of the frame. */
.case-cover--split {
  display: block;
}

.cover-phone {
  position: absolute;
  left: 24.484%; /* 261 / 1066 */
  top: 9.865%; /* 51 / 517 */
  width: 18.856%; /* 201 */
  height: 80.464%; /* 416 */
}

.cover-phone video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cover-line {
  position: absolute;
  left: 47.749%; /* 509 / 1066 */
  top: 43.13%; /* 223 / 517 */
  width: 27.767%; /* 296 */
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue',
    Helvetica, Arial, sans-serif;
  font-size: 2.188cqw; /* 28 */
  line-height: 1.3;
  color: #fff;
}

/* Competitor marks in the market research section. */
.competitors {
  position: relative;
  width: 155px;
  height: 149px;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.competitors li {
  position: absolute;
  width: 64px;
  height: 64px;
}

.competitors img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}

/* Figma 820:17066 — Yelp tipped left, Maps tipped right, Spotify under. */
.competitors-yelp {
  left: 0;
  top: 3px;
  transform: rotate(-6.48deg);
}

.competitors-maps {
  left: 78px;
  top: 0;
  transform: rotate(12.84deg);
}

.competitors-maps img {
  border: 0.5px solid #000;
}

.competitors-spotify {
  left: 38px;
  top: 85px;
}

/* Market research copy beside the icon cluster — Figma 820:17060. */
.market-research {
  display: flex;
  align-items: center;
  gap: 63px;
  margin-top: 12px;
}

.market-research-copy {
  flex: 1;
  min-width: 0;
}

.market-research-copy p + p {
  margin-top: 1em;
}

.market-research-copy strong {
  font-weight: 700;
}

/* Brainstorming spacing — body type matches standard .case-p. */
.case-p.brainstorm-copy {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.5;
  text-align: justify;
}

.case-p.brainstorm-copy--after {
  margin-top: 30px;
}

.case-em {
  text-decoration: underline;
  text-underline-position: from-font;
}

.case-em--strong {
  font-weight: 700;
}

/* The iteration artwork is a tall exported sheet; it just runs the column. */
.iterating {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 24px;
}

/* Numbered points with no heading of their own sit tighter. */
.learned--tight {
  gap: 18px;
}

.learned--tight .learned-num {
  width: 34px;
  height: 34px;
  font-size: 16px;
}

/* ── Rythmeet ─────────────────────────────────────────────────────────── */

/* A desktop recording floated on the band rather than a phone laid over it
   or a fill bleeding to its edges. Figma 820:19521 insets it 47 from the top
   and 46 from the bottom of the 517 band, which leaves a 595 x 424 window
   centred in it. The band colour sits underneath so the frame reads as part
   of the cover for as long as the recording takes to arrive. */
.cover-screen {
  position: absolute;
  left: 50%;
  top: 9.091%; /* 47 / 517 */
  width: 55.835%; /* 595.2 / 1066 */
  height: 82.012%; /* 424 / 517 */
  transform: translateX(-50%);
  border: 1px solid #a9a9a9;
  border-radius: 10px;
  background: var(--amber);
  overflow: hidden;
}

.cover-screen video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Rythmeet's body rules live further down, below the shared .cards and
   .sheet they vary — a modifier is only worth its own class if it wins the
   tie against the base class it sits beside. */

/* Cadence's cover is a single recording filling the band. */
.cover-fill {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-cover .shot video {
  position: absolute;
  width: 109.73%;
  height: 103%;
  left: -6.76%;
  top: -1.04%;
  object-fit: cover;
}

.case-title {
  margin: 0;
  font-family: 'Syncopate', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 2.344cqw; /* 30 */
  line-height: normal;
  letter-spacing: -0.047cqw;
  color: #000;
}

.case-date {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue',
    Helvetica, Arial, sans-serif;
  font-size: 1.406cqw; /* 18 */
  color: #000;
}

/* Figma 784:6311 — 160x48, sitting 45 below the title. */
.case-repo {
  margin-top: 1.094cqw; /* 45 - 31 title height = 14 */
  display: inline-flex;
  align-items: center;
  gap: 0.625cqw;
  padding: 0.938cqw 1.875cqw; /* 12 24 */
  border: 1px solid var(--sage);
  border-radius: 30px;
  background: var(--sage);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue',
    Helvetica, Arial, sans-serif;
  font-size: 1.406cqw; /* 18 */
  color: #fff;
  text-decoration: none;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.case-repo:hover,
.case-repo:focus-visible {
  background: transparent;
  color: var(--sage);
  transform: translateY(-2px);
}

/* The arrow inherits the label colour through a mask, the same way the
   footer's Back to Top arrow does. */
.case-repo-arrow {
  width: 1.094cqw; /* 14 */
  height: 1.094cqw;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 11 11 3M4.5 3H11v6.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 11 11 3M4.5 3H11v6.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

/* Figma 784:6303 — four 20px chips over 95, sitting 38 below the date. */
.case-swatches {
  display: flex;
  justify-content: flex-end;
  gap: 0.391cqw; /* 5 */
  margin: 1.328cqw 0 0; /* 38 - 21 date height = 17 */
  padding: 0;
  list-style: none;
}

.case-swatches li {
  width: 1.563cqw; /* 20 */
  height: 1.563cqw;
  background: var(--sw);
}

/* ── Body ─────────────────────────────────────────────────────────────── */

.case-body {
  position: relative;
  z-index: 1;
  /* Same 1030 / 1280 column as .case-hero (80.469%). Using 80.469vw (capped
     at 1030) keeps L/R gutters matched to the hero below 1280, where
     `min(100vw - 2.5rem, 1030px)` used to sit wider and break the align. */
  width: min(1030px, 80.469vw);
  margin: 60px auto 0;
  background: transparent;
  color: var(--body);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue',
    Helvetica, Arial, sans-serif;
}

.case-sec + .case-sec {
  margin-top: 90px;
}

.case-kicker {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Food Blend: no bottom gap under the kicker (Figma 820:17060 / 820:17071). */
.case--beli .case-kicker {
  margin: 0;
}

.case-h {
  margin: 0 0 14px;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #000;
}

.case--beli .case-h {
  margin: 0;
  font-size: 30px;
  line-height: 32px;
  letter-spacing: 0;
}

.case--beli .case-h + .case-p {
  margin-top: 14px;
}

.case--beli .case-h + .brainstorm-copy {
  margin-top: 20px;
}

.case--beli .case-h + .cards {
  margin-top: 14px;
}

.case-h2 {
  margin: 46px 0 18px;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #000;
}

.case-lead,
.case-p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  text-align: justify;
}

/* Role / Timeline / Skills / Team. */
.case-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  margin: 40px 0 0;
}

.case-meta dt {
  margin-bottom: 6px;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gold);
}

.case-meta dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
}

/* ── Interview quotes ─────────────────────────────────────────────────── */

.quotes {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.quotes li {
  padding-left: 22px;
  border-left: 1px solid var(--rule);
  font-size: 16px;
  line-height: 1.5;
}

/* ── Market research ──────────────────────────────────────────────────── */

.market {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 68px;
  align-items: center;
  margin-top: 18px;
}

.market + .market {
  margin-top: 26px;
}

.market-note {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.market-panel {
  margin: 0;
  padding: 40px;
  list-style: none;
  border-radius: 20px;
  background: var(--amber);
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: #000;
}

.market-panel > li {
  display: flex;
  align-items: center;
  gap: 20px;
}

.market-panel img {
  width: 60px;
  height: 60px;
  flex: none;
  border-radius: 13px;
}

.market-name {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

.market-panel ul {
  margin: 4px 0 0;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.55;
}

/* ── Cocoa cards (Key Insights, Reflection) ───────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  /* Breathing room from the paragraphs that sit above and below — without
     this the list sits flush on both and the stack reads as one block. */
  margin: 5px 0;
  padding: 0;
  list-style: none;
}

.cards li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  min-height: 260px;
  padding: 34px 30px;
  border-radius: 20px;
  background: var(--cocoa);
  text-align: center;
  color: #fff;
}

.cards strong {
  font-size: 20px;
  line-height: 1.25;
}

.cards span {
  font-size: 15px;
  line-height: 1.4;
}

/* Brainstorming opportunity cards — Figma 820:17071. Three 275 squares with
   numbered titles and two bullet solutions each. */
.cards--ideas {
  grid-template-columns: repeat(3, 275px);
  justify-content: center;
  gap: 20px;
  margin: 30px 0 0;
}

.cards--ideas li {
  box-sizing: border-box;
  width: 275px;
  height: 275px;
  min-height: 0;
  justify-content: center;
  gap: 10px;
  padding: 24px 18px;
  background: #2c636e;
  text-align: center;
}

.cards--ideas > li > strong {
  font-size: 22px;
  font-weight: 700;
  line-height: 30px;
}

.cards--ideas ul {
  margin: 0;
  padding-left: 1.5em;
  text-align: left;
  list-style: disc;
}

.cards--ideas ul li {
  display: list-item;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  text-align: left;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.02em;
  color: #fff;
}

.cards--ideas ul li + li {
  margin-top: 20px;
}

.cards--ideas ul b {
  font-weight: 700;
}

/* ── Solution ─────────────────────────────────────────────────────────── */

.solution {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 40px;
  align-items: center;
  margin-top: 24px;
}

.solution-shot {
  width: 100%;
  height: auto;
  display: block;
}

.solution-copy {
  position: relative;
  padding: 46px 40px;
  text-align: center;
}

.solution-wordmark {
  display: block;
  width: 227px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 18px;
}

.solution-copy p {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  color: #000;
}

/* The export is a top-left corner — arms running right and down — so each
   instance is turned a quarter to face the corner it sits in. Rotating with
   the independent `rotate` property keeps `transform` free. */
.bracket {
  position: absolute;
  width: 67px;
  height: 67px;
}

.bracket--tr {
  right: 0;
  top: 0;
  rotate: 90deg; /* arms run down and left */
}

.bracket--bl {
  left: 0;
  bottom: 0;
  rotate: -90deg; /* arms run up and right */
}

/* ── Design process ───────────────────────────────────────────────────── */

.parts {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.parts > li {
  display: grid;
  grid-template-columns: 108px 1fr;
  align-items: start;
}

.parts-num {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue',
    Helvetica, Arial, sans-serif;
  font-size: 54px;
  font-weight: 700;
  line-height: 0.9;
  color: #e7e3d8;
}

.parts strong {
  display: block;
  margin-bottom: 6px;
  font-size: 20px;
  text-transform: uppercase;
  color: #000;
}

.parts p {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
}

.sheet {
  margin: 40px 0 0;
}

.sheet figcaption {
  margin-bottom: 12px;
  font-size: 18px;
  font-style: italic;
  color: #7d7a72;
}

/* The exported sheets are flattened onto the page colour, so the rounded
   frame around them is drawn here rather than baked into the image. */
.sheet-frame {
  border: 1px solid #2b2b2b;
  border-radius: 22px;
  overflow: hidden;
}

.sheet-frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* Cadence / Food Blend sheets sit on a plain white panel with the caption
   underneath, rather than Menuvo's heavy outlined frame with the caption
   above. A light black hairline keeps the white panel from dissolving into
   the page. */
.sheet-frame--plain {
  border: 1px solid #b0b0b0;
  padding: 2.5%;
  background: #fff;
}

.sheet--pair .sheet-frame {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5%;
  align-items: center;
}

.sheet figcaption + .sheet-frame,
.sheet .sheet-frame + figcaption {
  margin-top: 12px;
  margin-bottom: 0;
}

/* ── Rythmeet body ────────────────────────────────────────────────────
   Below .cards and .sheet rather than up with the hero: these carry the
   same one-class weight as the rules they vary, so they only take effect
   from here down. */

/* Two findings rather than three, so the row is inset and centred instead of
   spanning the column, and the copy ranges left. Figma 820:19554. */
.cards--pair {
  grid-template-columns: repeat(2, 302px);
  justify-content: center;
  gap: 66px;
  margin-top: 40px;
}

.cards--pair li {
  min-height: 0;
  justify-content: flex-start;
  gap: 30px;
  padding: 40px;
  text-align: left;
}

.cards--pair strong {
  font-size: 25px;
  font-weight: 700;
  line-height: 35px;
}

.cards--pair span {
  font-size: 18px;
  line-height: 25px;
}

/* The process sheets are captures of the working Figma boards, so they take a
   hairline frame and a small radius rather than Menuvo's heavy outline or
   Cadence's white mat. Figma 820:19567. */
.sheet-frame--thin {
  border: 1px solid #b8b8b8;
  border-radius: 8px;
}

.case--rythmeet .sheet {
  margin-top: 50px;
}

.case--rythmeet .sheet figcaption {
  font-size: 18px;
  color: #a7a6a6;
}

/* Each contribution pairs its screens with the two things the change bought.
   Figma 820:19585 runs the entry point at 458 beside 520 of copy; 820:19595
   runs the four steps as a 2x2 of 301s beside a narrower 335. */
.outcome {
  display: grid;
  align-items: center;
  gap: 52px;
  margin-top: 40px;
}

.outcome--entry {
  grid-template-columns: 458px 1fr;
}

.outcome--steps {
  grid-template-columns: 1fr 335px;
  gap: 63px;
}

.outcome-shot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #d0d0d0;
  border-radius: 7px;
}

.outcome-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.outcome-points {
  margin: 0 0 13px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.outcome-points li {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 22px;
  font-weight: 500;
  color: #000;
}

.outcome-points img {
  flex: none;
  width: 24px;
  height: 21px;
}

.outcome p {
  margin: 0;
  font-size: 18px;
  line-height: 25px;
}

.outcome p + p {
  margin-top: 18px;
}

/* One phone recording centred on the column — Figma 813:16644, 168 wide. */
.final-single {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 25px;
  padding: 40px 24px;
  /* Same dark greenish-blue as the phone recording's own stage fill
     (sampled off final-flow-recording.png), so the band and the video
     read as one surface instead of a cream frame around a teal strip. */
  background: #124651;
  border-radius: 0;
}

/* Food Blend Final Flow + Final Product — flat teal stage. */
.case--beli .final-single {
  background: #00545b;
}

/* Cadence Final Product — flat navy stage (sampled off Weekly Insights mock). */
.case--cadence .final-single {
  background: #283958;
}

.final-single video,
.final-single img {
  display: block;
  width: 168px;
  height: auto;
  border-radius: 0;
}

/* ── User testing (Figma 820:17747) ─────────────────────────────────────
   Phone mockups on the left, a white callout with the takeaway on the right.
   Rows sit in an 838 column — the same width Figma uses, inset from the
   1030 reading column so the phones don't spill past its gutters. */

.testing {
  display: flex;
  flex-direction: column;
  gap: 63px;
  width: min(100%, 838px);
  margin: 50px auto 0;
}

.testing-row {
  display: flex;
  align-items: center;
  gap: 30px;
}

.testing-phones {
  display: block;
  width: 467px;
  max-width: calc(100% - 345px);
  height: auto;
  flex: none;
}

.testing-phones--single {
  width: 226px;
}

.testing-note {
  box-sizing: border-box;
  flex: none;
  width: 315px;
  max-width: 100%;
  padding: 30px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.testing-note ul {
  margin: 0;
  padding-left: 1.35em;
  font-size: 18px;
  line-height: 25px;
  color: #000;
}

.testing-note li + li {
  margin-top: 1.2em;
}

/* The question the design process was framed around. */
.case-question {
  margin: 26px 0 0;
  font-size: 20px;
  line-height: 1.4;
  color: #000;
}

/* Cadence insets its card row rather than running it the full column:
   3 x 275 with 20 between, per Figma 813:16650. */
.case--cadence .cards {
  max-width: 865px;
  margin-inline: auto;
  gap: 20px;
}

/* Key Features reuses the numbered list, but its bodies are bullets. */
.learned ul {
  margin: 6px 0 0;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.55;
}

/* ── Final product ────────────────────────────────────────────────────── */

/* Figma 809:9028 — three panels of ~335x311 with 10px between them. */
.final {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 25px 0 0;
  padding: 0;
  list-style: none;
}

.final li {
  aspect-ratio: 335 / 311;
  overflow: hidden;
}

.final video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── What I learned ───────────────────────────────────────────────────── */

.learned {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Direct children only. As a descendant selector this also caught the bullet
   items nested inside a row, turning each one into its own two-column grid
   and dropping its text into the 108px numeral column. */
.learned > li {
  display: grid;
  grid-template-columns: 108px 1fr;
  align-items: start;
}

/* Wins over the 108px numeral track above — circle + small gap only. */
.learned.learned--tight > li {
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  align-items: center;
}

.learned-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--clay);
  font-size: 20px;
  color: #fff;
}

.learned strong {
  display: block;
  margin-bottom: 6px;
  font-size: 20px;
  color: #000;
}

.learned p {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
}

.case .foot {
  margin-top: 110px;
  /* Match the nav's paper — not the case --page cream — so footers read the
     same on every project as they do on home. */
  background: var(--paper);
}

/* ── Small screens ────────────────────────────────────────────────────── */

@media (max-width: 60rem) {
  .market,
  .solution,
  .outcome--entry,
  .outcome--steps {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .testing {
    gap: 40px;
    max-width: none;
  }

  .testing-row {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .testing-phones,
  .testing-phones--single {
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
  }

  .testing-note {
    width: 100%;
  }

  .market-research {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }

  .cards--ideas {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .cards--ideas > li {
    width: auto;
    height: auto;
    min-height: 220px;
  }

  .cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .cards li {
    min-height: 0;
  }

  .case-meta {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 43rem) {
  /* The hero drops out of the fixed frame with the rest of the site, so the
     absolutely placed pieces return to flow. */
  .stage--case {
    gap: 1.25rem;
  }

  .case-hero {
    position: static;
    width: auto;
  }

  .case-head {
    flex-direction: column;
    gap: 1rem;
  }

  .case-head-right {
    text-align: left;
  }

  .case-swatches {
    justify-content: flex-start;
  }

  .case-title {
    font-size: 1.6rem;
  }

  .case-date,
  .case-repo {
    font-size: 1rem;
  }

  .case-repo {
    align-self: flex-start;
    padding: 0.6rem 1.1rem;
    gap: 0.5rem;
  }

  .case-repo-arrow {
    width: 0.9rem;
    height: 0.9rem;
  }

  /* Back into flow: the frame coordinates have no room on a phone. */
  .case-cover--split {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 0;
    aspect-ratio: auto;
  }

  .cover-phone,
  .cover-line {
    position: static;
    width: auto;
    height: auto;
  }

  .cover-phone {
    width: 42%;
  }

  .cover-line {
    padding: 0 1.25rem;
    font-size: 1.15rem;
    text-align: center;
  }

  .competitors {
    width: 140px;
    height: 134px;
  }

  /* Back into flow with the rest of the hero. The band gives up its fixed
     ratio with it: there is no longer a 517 height to inset against, and
     holding the ratio would crop the recording rather than sit around it. */
  .case--rythmeet .case-cover {
    aspect-ratio: auto;
  }

  .cover-screen {
    position: static;
    width: auto;
    height: auto;
    transform: none;
    margin: 1.5rem 1.25rem;
  }

  .cards--pair li {
    padding: 24px;
    gap: 18px;
  }

  .cards--pair strong {
    font-size: 1.3rem;
    line-height: 1.3;
  }

  .cards--pair span,
  .outcome p {
    font-size: 1rem;
    line-height: 1.5;
  }

  .outcome-points li {
    gap: 14px;
    font-size: 1.15rem;
  }

  .case--rythmeet .sheet {
    margin-top: 32px;
  }

  .case--rythmeet .sheet figcaption {
    font-size: 18px;
  }

  .case-swatches {
    gap: 5px;
  }

  .case-swatches li {
    width: 20px;
    height: 20px;
  }

  .case-body {
    /* On phone the stage pads 1.25rem; drop the proportional column so the
       reading width matches the stacked hero's full content box. */
    width: auto;
    margin-top: 2rem;
    margin-inline: 1.25rem;
  }

  .case-sec + .case-sec {
    margin-top: 54px;
  }

  .case-meta {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .case-h {
    font-size: 1.4rem;
  }

  .case-lead,
  .case-p {
    text-align: left;
  }

  .market-panel {
    padding: 22px;
  }

  .parts > li,
  .learned > li {
    grid-template-columns: 64px 1fr;
  }

  .learned.learned--tight > li {
    grid-template-columns: auto 1fr;
    column-gap: 8px;
  }

  .parts-num {
    font-size: 34px;
  }

  .learned-num {
    width: 40px;
    height: 40px;
    font-size: 17px;
  }
}