/* ============================================================
   Form — case study
   Figma: IG Post – Second Set, frame 1037:11825 (1362 x 16818)

   The frame is 1362 wide rather than the 1400 the other case studies
   use, so the section re-derives --px from its own design width and
   still fills the same page column. Everything inside is Figma's own
   geometry, unscaled.

   The panel follows the Baseline "Map Your Space" pattern: pinned,
   content-sized, one step open at a time.
   ============================================================ */

.case-fm {
  --design-w: 1362;

  --baseline-black: #060608;
  --fm-teal-dark: #086a82;   /* Form Dark Teal */
  --fm-teal:      #1b8aa6;   /* Form Teal */
  --fm-yellow:    #ebe86b;   /* Form Light Yellow */
  --fm-butter:    #fff48b;
  --fm-navy:      #225376;   /* Receipt Navy Blue */
  --fm-blue:      #166885;
  --fm-cream:     #fcfaf2;
  --fm-bone:      #faf7f0;
  --fm-sand:      #e3d3ba;

  --font-shedry: "Shedry", "Instrument Serif", Georgia, serif;
  --font-nova:   "Arial Nova", Arial, Helvetica, sans-serif;
  --font-geist:  "Geist", var(--font-sans);

  --h: 16623;
  background: #000;
  overflow: clip;              /* clip, not hidden — keeps sticky working */
}

@font-face {
  font-family: "Shedry";
  src: url("assets/fonts/Shedry-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Shedry";
  src: url("assets/fonts/Shedry-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

.case-fm .t { margin: 0; line-height: normal; word-break: break-word; }
.case-fm .t.abs { height: auto; }
.case-fm .t-sh { font-family: var(--font-shedry); }
.case-fm .t-nv { font-family: var(--font-nova); }
.case-fm .t-in { font-family: var(--font-sans); font-variation-settings: "wdth" 100; }

/* ---------- Pinned panel (Baseline's pattern) ----------
   Figma 1037:11826 — 23,40, 383 x 16736, with the four MARK steps laid
   out at fixed y positions and every body expanded. Here the panel is
   sticky and sized by its content, so a closed step leaves no gap.
   2px border + 22/15 padding gives Figma's 24 left / 17 right insets. */
.fm-panel {
  position: sticky;
  top: calc(40 * var(--px));
  z-index: 2;
  margin-left: calc(23 * var(--px));
  width: calc(383 * var(--px));
  height: auto;
  max-height: calc(100vh - (80 * var(--px)));
  background: #000;
  border: calc(2 * var(--px)) solid #fff;
  border-radius: calc(40 * var(--px));
  padding: calc(7 * var(--px)) calc(15 * var(--px)) calc(28 * var(--px)) calc(22 * var(--px));
  display: flex; flex-direction: column;
  overflow: hidden;
}
.fm-panel-head { display: flex; align-items: flex-start; justify-content: space-between; flex: 0 0 auto; }
.fm-wordmark {
  margin: 0 0 0 calc(-1 * var(--px));
  font-family: var(--font-shedry); font-weight: 600;
  font-size: calc(64 * var(--px));
  line-height: 1.125;                     /* Figma box is 72px for 64px type */
  color: var(--fm-teal-dark);
}
.fm-year {
  margin-top: calc(30 * var(--px));
  font-family: var(--font-sans); font-variation-settings: "wdth" 100;
  font-weight: 500; font-size: calc(20 * var(--px)); line-height: 1.2; color: #fff;
}
.fm-intro {
  margin: calc(22 * var(--px)) 0 0 calc(2 * var(--px));
  width: calc(320 * var(--px));
  font-family: var(--font-sans); font-variation-settings: "wdth" 100;
  font-size: calc(20 * var(--px)); line-height: 1.2; color: #fff;
  flex: 0 0 auto;
}
.fm-acc-list {
  margin-top: calc(39 * var(--px));
  flex: 0 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.35) transparent;
}
.fm-acc-list::-webkit-scrollbar { width: calc(4 * var(--px)); }
.fm-acc-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.35); border-radius: calc(4 * var(--px)); }
.fm-item + .fm-item { margin-top: calc(22 * var(--px)); }

.fm-acc {
  display: flex; align-items: baseline; justify-content: space-between;
  width: 100%; margin: 0; padding: 0;
  background: none; border: 0; text-align: left; cursor: pointer;
  font-family: var(--font-sans); font-variation-settings: "wdth" 100;
  font-weight: 500; font-size: calc(24 * var(--px));
  letter-spacing: calc(-0.72 * var(--px)); line-height: 1.2; color: #fff;
  transition: color 180ms ease, opacity 180ms ease;
}
.fm-acc:hover { color: var(--octodraws-icon-purple); }
.fm-acc:focus-visible { outline: calc(2 * var(--px)) solid #fff; outline-offset: calc(6 * var(--px)); }
.fm-acc .sign { flex: 0 0 auto; margin-left: calc(16 * var(--px)); }

.fm-body {
  display: grid; grid-template-rows: 0fr; padding-top: 0;
  transition: grid-template-rows 380ms cubic-bezier(0.4, 0, 0.2, 1),
              padding-top 380ms cubic-bezier(0.4, 0, 0.2, 1);
}
.fm-body > div { overflow: hidden; }
.fm-body p {
  margin: 0; width: calc(320 * var(--px));
  font-family: var(--font-sans); font-variation-settings: "wdth" 100;
  font-size: calc(22 * var(--px)); letter-spacing: calc(-0.44 * var(--px));
  line-height: 1.25; color: #fff;
  opacity: 0; transition: opacity 220ms ease;
}
.fm-body.is-open { grid-template-rows: 1fr; padding-top: calc(14 * var(--px)); }
.fm-body.is-open p { opacity: 1; transition: opacity 280ms ease 110ms; }

/* Next Project — Figma places the parts at fixed x positions rather than
   spacing them evenly, so they are positioned rather than laid out. */
.fm-next-row {
  flex: 0 0 auto; margin-top: calc(24 * var(--px)); padding-top: calc(20 * var(--px));
  border-top: calc(1 * var(--px)) solid rgba(255,255,255,0.18);
  display: block; text-decoration: none; transition: color 180ms ease;
}
.fm-next-row:hover,
.fm-next-row:hover .fm-next-label { color: var(--octodraws-icon-purple); }
.fm-next-row:focus-visible { outline: calc(2 * var(--px)) solid #fff; outline-offset: calc(4 * var(--px)); }
.fm-next-label {
  display: block; margin-left: calc(1 * var(--px));
  font-family: var(--font-sans); font-variation-settings: "wdth" 100;
  font-weight: 500; font-size: calc(24 * var(--px)); letter-spacing: calc(-0.72 * var(--px));
  color: #fff; line-height: 1.2;
}
.fm-next-line {
  display: block; position: relative;
  margin-top: calc(7 * var(--px)); height: calc(23 * var(--px));
  font-family: var(--font-sans); font-variation-settings: "wdth" 100;
  font-size: calc(15 * var(--px)); color: #fff; line-height: 1.2;
}
.fm-next-line > * { position: absolute; }
/* Next project is Soma: a plain white mark inset 4 on the green ground. The
   earlier cherry-red tile carried a photo clipped to an "m" by an SVG mask;
   that whole mechanism is gone, so the mask is not referenced any more. */
.fm-badge {
  left: calc(1 * var(--px)); top: 0;
  width: calc(21 * var(--px)); height: calc(23 * var(--px));
  background: #72922e; border-radius: calc(4 * var(--px)); overflow: hidden;
}
.fm-badge img {
  position: absolute; max-width: none;
  left: calc(4 * var(--px)); top: calc(4 * var(--px));
  width: calc(14 * var(--px)); height: calc(16 * var(--px));
  object-fit: cover;
}
/* Figma carries a flicker on this node (1169:3971), but it is not animated
   here: the badge holds the state the frame renders, fully opaque. */

/* All three sit at 15/Regular in full white — Figma dims none of them. */
.fm-next-name { left: calc(30 * var(--px)); top: calc(3 * var(--px)); }
.fm-next-type { left: calc(100 * var(--px)); top: calc(3 * var(--px)); width: calc(161 * var(--px)); text-align: center; }
.fm-next-year { left: calc(293 * var(--px)); top: calc(3 * var(--px)); width: calc(41 * var(--px)); }

/* ---------- Shared card chrome ---------- */
.fm-card {
  border: calc(2 * var(--px)) solid #000;
  border-radius: calc(40 * var(--px));
  overflow: hidden;
}
.fm-crop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fm-crop img { position: absolute; max-width: none; }
.fm-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 1. Wordmark card ---------- */
.fm-c1 { --l: 418; --t: 40; --w: 909; --h: 390; background: var(--fm-yellow); }
.case-fm .fm-c1-word {
  --l: 193; --t: 45; --w: 520; --h: 242;
  font-family: var(--font-shedry); font-weight: 600;
  font-size: calc(220 * var(--px)); line-height: 1.1;
  color: var(--fm-teal-dark);
}

/* ---------- 2. Typeface specimen ----------
   Figma draws the white card empty and lays the specimen over it as siblings.
   The specimen is nested inside the card here instead, so the two always
   travel together — in the phone column each top-level block becomes its own
   row, and as siblings the specimen broke away and left an empty white card.
   Coordinates are therefore card-relative: Figma's value less the card's
   origin (418 / 458) and its 2px border. */
.fm-c2 { --l: 418; --t: 458; --w: 502; --h: 390; background: #fff; }
.fm-spec-box {
  --l: 35; --t: 40; --w: 430; --h: 290;
  border: calc(3 * var(--px)) dashed var(--fm-teal-dark);
  border-radius: calc(40 * var(--px));
}
.fm-spec-name,
.fm-spec-role {
  font-family: var(--font-sans); font-variation-settings: "wdth" 100;
  font-weight: 500; font-size: calc(24 * var(--px)); color: var(--fm-blue);
}
.fm-spec-name { --l: 60; --t: 64; --w: 183; --h: 21; }
.fm-spec-role { --l: 243; --t: 65; --w: 199; --h: 24; text-align: right; text-transform: capitalize; }
.case-fm .fm-spec-glyphs {
  --l: 60; --t: 168; --w: 382; --h: 127;
  font-family: var(--font-shedry); font-size: calc(24 * var(--px));
  color: var(--fm-blue); text-transform: capitalize; line-height: calc(31.75 * var(--px));
}
.fm-spec-glyphs p { margin: 0; }

/* ---------- 3. Colour card ---------- */
.fm-c3 { --l: 951; --t: 458; --w: 376; --h: 390; background: #fff; }
.fm-c3-in { --l: -2; --t: -2; --w: 376; --h: 390; background: #fff; overflow: hidden; }
.fm-sw { position: absolute; }
.fm-sw-l {
  position: absolute; margin: 0;
  font-family: var(--font-sans); font-variation-settings: "wdth" 100;
  font-weight: 500; font-size: calc(24 * var(--px));
  letter-spacing: calc(-1.44 * var(--px));
  color: #fff;
  /* Figma stores these labels lowercase and capitalises them with
     text-transform. We write them already capitalised instead, because
     `text-transform: capitalize` leaves the FIRST word of a run untouched
     here — "vital red" came out "vital Red". Reproduced in Chrome 152 with
     plain Arial and no other styles, so it is not something in this file. */
  width: calc(164 * var(--px)); height: calc(32 * var(--px));
}

/* ---------- 4. Product hero ---------- */
.fm-c4 { --l: 420; --t: 876; --w: 909; --h: 863; }
.fm-c4-in { --l: -2; --t: -5; --w: 920; --h: 862; }
.fm-c4-in img { left: -1.58%; top: -20.05%; width: 101.58%; height: 145.22%; }

/* ---------- 5. Product grid row ---------- */
.fm-c5 { --l: 420; --t: 1777; --w: 909; --h: 640; background: var(--fm-butter); }
.fm-grid { --l: -7; --t: 39; --w: 914; --h: 560; }
.fm-gcard { position: absolute; top: 0; height: calc(560 * var(--px)); background: #fff; border-radius: calc(28 * var(--px)); overflow: hidden; }
.fm-gcard--hero { left: calc(35 * var(--px)); width: calc(416 * var(--px)); }
.fm-gcard--art  { left: calc(470 * var(--px)); width: calc(418 * var(--px)); border: calc(1 * var(--px)) solid #fff; }
.fm-brand {
  position: absolute; left: calc(21 * var(--px)); top: calc(18 * var(--px)); margin: 0;
  font-family: var(--font-shedry); font-weight: 600; font-size: calc(24 * var(--px));
  letter-spacing: calc(-0.5 * var(--px)); color: var(--fm-blue);
  text-transform: lowercase; white-space: nowrap;
}
.fm-botanical { position: absolute; left: calc(87.5 * var(--px)); top: calc(64 * var(--px)); width: calc(240 * var(--px)); height: calc(210 * var(--px)); }
.fm-botanical img { width: 100%; height: 100%; display: block; }
.fm-hero-h {
  position: absolute; left: calc(21 * var(--px)); right: calc(21 * var(--px)); top: calc(288 * var(--px)); margin: 0;
  font-family: var(--font-shedry); font-size: calc(38 * var(--px)); line-height: 1.1; color: #000;
}
.fm-hero-h p { margin: 0; }
.fm-hero-p {
  position: absolute; left: calc(21 * var(--px)); right: calc(70 * var(--px)); top: calc(430 * var(--px)); margin: 0;
  font-family: var(--font-nova); font-size: calc(16 * var(--px)); line-height: 1.5; color: #000;
}
.fm-btn {
  position: absolute; display: inline-flex; align-items: center; justify-content: center;
  padding: calc(10 * var(--px)) calc(20 * var(--px));
  border-radius: calc(100 * var(--px)); border: calc(1 * var(--px)) solid transparent;
}
.fm-btn p {
  margin: 0; font-family: var(--font-nova); font-weight: 700;
  font-size: calc(13 * var(--px)); color: #fff; white-space: nowrap;
}
.fm-btn--teal  { left: calc(21 * var(--px)); top: calc(492 * var(--px)); background: var(--fm-blue); border-color: var(--fm-blue); }
.fm-btn--black { left: calc(23 * var(--px)); top: calc(375 * var(--px)); background: #000; border-color: #000; }

.fm-inner-card {
  position: absolute; inset: calc(35 * var(--px));
  background: #fff; border: calc(1 * var(--px)) solid #000;
  border-radius: calc(20 * var(--px)); overflow: hidden;
}
.fm-banner {
  position: absolute; left: calc(23 * var(--px)); right: calc(23 * var(--px));
  top: calc(23 * var(--px)); height: calc(180 * var(--px));
  border-radius: calc(12 * var(--px)); overflow: hidden;
}
.fm-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fm-banner-shade { position: absolute; inset: 0; background: rgba(53,72,97,0.18); }
.fm-tag {
  position: absolute; top: calc(12 * var(--px)); height: calc(25 * var(--px));
  border: calc(0.5 * var(--px)) solid #000; border-radius: calc(100 * var(--px));
}
.fm-tag p {
  position: absolute; left: calc(11.5 * var(--px)); top: calc(5.5 * var(--px)); margin: 0;
  font-family: var(--font-nova); font-weight: 700; font-size: calc(11 * var(--px));
  white-space: nowrap;
}
.fm-tag--dark  { left: calc(12 * var(--px));  width: calc(102 * var(--px)); background: #000; }
.fm-tag--dark p  { color: #fff; }
.fm-tag--light { left: calc(122 * var(--px)); width: calc(71 * var(--px));  background: #fff; }
.fm-tag--light p { color: #000; }
.fm-art-h {
  position: absolute; left: calc(23 * var(--px)); right: calc(23 * var(--px)); top: calc(219 * var(--px)); margin: 0;
  font-family: var(--font-shedry); font-size: calc(28 * var(--px)); line-height: 1.2; color: #000;
}
.fm-art-p {
  position: absolute; left: calc(23 * var(--px)); right: calc(23 * var(--px)); top: calc(299 * var(--px)); margin: 0;
  font-family: var(--font-nova); font-size: calc(13 * var(--px)); line-height: 1.5; color: #000;
}

/* ---------- 6-8, 10, 11, 13, 14, 16, 17. Full-bleed artwork ---------- */
/* The health-systems poster frame was re-cropped: the card lost 94 of height
   and the poster inside it now hangs 48 above the card instead of 25 below,
   so it is trimmed top and bottom rather than sitting with a gap. Everything
   from here down moved up with it. */
.fm-c6  { --l: 420; --t: 2451;  --w: 909; --h: 1172; background: var(--fm-butter); }
.fm-c6-in  { --l: -2; --t: -50;  --w: 909; --h: 1212; }
/* Figma nudges the poster 1.15% down inside its own box as part of the crop,
   which `.fm-fill`'s inset:0 would flatten to zero. */
.fm-c6-in img { top: 1.15%; bottom: auto; }
.fm-c7  { --l: 423; --t: 3661;  --w: 909; --h: 1212; }
.fm-c7-in  { --l: -2; --t: -2;   --w: 909; --h: 1212; }
.fm-c8  { --l: 423; --t: 4919;  --w: 909; --h: 1233; }
.fm-c8-in  { --l: -10; --t: -2;  --w: 925; --h: 1233; }
.fm-c10 { --l: 423; --t: 6784;  --w: 909; --h: 737; }
.fm-c10-in { --l: -51; --t: -2; --w: 990; --h: 737; border-radius: calc(40 * var(--px)); overflow: hidden; }
.fm-c10-in img { left: -12.12%; top: -10.61%; width: 124.19%; height: 141%; }
.fm-c11 { --l: 425; --t: 7555;  --w: 909; --h: 737; }
.fm-c11-in { --l: -2; --t: -2;   --w: 909; --h: 737; }
.fm-c11-in img { left: -12.67%; top: -3.21%; width: 125.36%; height: 123.13%; }
.fm-c13 { --l: 416; --t: 9497;  --w: 909; --h: 1144; }
.fm-c13-in { --l: -30; --t: -32; --w: 966; --h: 1174; }
.fm-c13-in img { left: -45.41%; top: -55.08%; width: 190.75%; height: 210.23%; }
.fm-c14 { --l: 423; --t: 10681; --w: 896; --h: 1095; }
.fm-c14 .fm-crop { border-radius: calc(40 * var(--px)); }
.fm-c14 .fm-crop img { left: -1.11%; top: -6.98%; width: 102.21%; height: 114%; }
.fm-c16 { --l: 416; --t: 12668; --w: 909; --h: 1144; }
.fm-c16-in { --l: -2; --t: -5;   --w: 909; --h: 1187; }
.fm-c16-in img { left: -2.88%; top: -1.47%; width: 103.34%; height: 106%; }
.fm-c17 { --l: 416; --t: 13852; --w: 909; --h: 1548; }
.fm-c17-in { --l: -18; --t: -27; --w: 941; --h: 1573; }
.fm-c17-in img { left: -12.48%; top: -0.02%; width: 126.34%; height: 101.23%; }

/* ---------- 9. Vitamin card ---------- */
.fm-c9 { --l: 423; --t: 6186; --w: 909; --h: 564; }
.fm-c9-in { --l: -2; --t: -2; --w: 909; --h: 564; background: var(--fm-bone); border-radius: calc(40 * var(--px)); overflow: hidden; }
.fm-cat {
  --l: 51; --t: 51; --w: 120.282; --h: 28.59;
  border: calc(1 * var(--px)) solid var(--fm-navy);
  border-radius: calc(100 * var(--px));
}
.fm-cat p {
  position: absolute; left: calc(11.58 * var(--px)); top: calc(4.16 * var(--px)); margin: 0;
  font-family: var(--font-nova); font-weight: 700; font-size: calc(14 * var(--px));
  letter-spacing: calc(0.007 * var(--px)); color: var(--fm-navy);
  text-transform: uppercase; white-space: nowrap;
}
.case-fm .fm-c9-h {
  --l: 51; --t: 129; --w: 737.6;
  font-family: var(--font-shedry); font-size: calc(64 * var(--px));
  line-height: 1.1; color: #000;
}
.fm-c9-q {
  --l: 51; --t: 243; --w: 769.436; --h: 33.788;
  font-family: var(--font-nova); font-size: calc(28 * var(--px));
  letter-spacing: calc(0.014 * var(--px)); color: #000;
}
.fm-opt {
  --w: 769.436; --h: 26.857;
  font-family: var(--font-nova); font-size: calc(17 * var(--px));
  letter-spacing: calc(0.0085 * var(--px)); color: var(--fm-teal-dark);
}
.fm-opt--plus { --l: 659.751; --w: 197.409; text-align: right; }
.case-fm .fm-c9-note {
  --l: 51; --t: 493; --w: 731.79; --h: 21.659;
  font-family: var(--font-nova); font-size: calc(16 * var(--px));
  line-height: 1.4; color: #000;
}
.fm-leaf { --l: 783; --t: 43; --w: 83.789; --h: 74.507; transform: rotate(180deg); }
.fm-leaf img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 12. Mobile screen ---------- */
.fm-c12 { --l: 416; --t: 8327; --w: 909; --h: 1144; background: var(--fm-butter); }
.fm-phone {
  --l: 203; --t: 30; --w: 500; --h: 1080;
  background: var(--fm-cream); border-radius: calc(48 * var(--px));
  box-shadow: 0 calc(32 * var(--px)) calc(64 * var(--px)) rgba(0,0,0,0.25);
  overflow: hidden;
}
.fm-ph-top { --l: 0; --t: 0;   --w: 500; --h: 540; background: var(--fm-cream); }
.fm-ph-bot { --l: 0; --t: 540; --w: 500; --h: 540; background: var(--fm-butter); }
.case-fm .fm-ph-hi {
  margin: 0; font-family: var(--font-shedry); font-weight: 600;
  font-size: calc(96 * var(--px)); line-height: 0.85; color: var(--fm-blue);
}
.fm-ph-hi--welcome { --l: 46;  --t: 56;  --w: 420; }
.fm-ph-hi--kate    { --l: 40;  --t: 145; --w: 420; text-align: center; }
.fm-pill {
  border: calc(2 * var(--px)) solid var(--fm-blue);
  border-radius: calc(20 * var(--px)); height: calc(40 * var(--px));
}
.fm-pill p {
  position: absolute; top: calc(9 * var(--px)); margin: 0;
  font-family: var(--font-geist); font-size: calc(15 * var(--px));
  color: var(--fm-blue); white-space: nowrap;
}
.fm-pill--date  { --l: 170; --t: 329; --w: 160; --h: 40; }
.fm-pill--date p  { left: calc(13 * var(--px)); font-weight: 700; }
.fm-pill--focus { --l: 51;  --t: 395; --w: 409; --h: 40; }
.fm-pill--focus p { left: calc(16 * var(--px)); font-weight: 600; }
.fm-chev { position: absolute; left: calc(377 * var(--px)); top: calc(13 * var(--px)); width: calc(12 * var(--px)); height: calc(12 * var(--px)); }
.fm-chev img { width: 100%; height: 100%; display: block; }
.fm-ph-sys {
  --l: 40; --t: 25; --w: 320; --h: 73;
  font-family: var(--font-shedry); font-weight: 600; font-size: calc(64 * var(--px));
  color: var(--fm-blue); text-transform: capitalize;
}
.fm-rec { --l: 40; --t: 130; --w: 420; --h: 366; background: var(--fm-cream); border-radius: calc(28 * var(--px)); overflow: hidden; }
.fm-rec-img { --l: 0; --t: 0; --w: 420; --h: 260; }
.fm-rec-img img { left: -0.09%; top: -11.67%; width: 100%; height: 181.39%; }
.fm-rec-badge { --l: 16; --t: 16; --w: 105; --h: 28; background: #fff; border-radius: calc(14 * var(--px)); }
.fm-rec-badge p {
  position: absolute; left: calc(21 * var(--px)); top: calc(6 * var(--px)); margin: 0;
  font-family: var(--font-shedry); font-size: calc(12 * var(--px));
  color: var(--fm-blue); text-transform: capitalize; white-space: nowrap;
}
.case-fm .fm-rec-cap {
  --l: 23; --t: 274; --w: 300;
  font-family: var(--font-shedry); font-size: calc(24 * var(--px));
  line-height: calc(29 * var(--px)); color: var(--fm-blue);
}
.fm-rec-cap span { text-transform: lowercase; }
.fm-play { --l: 352; --t: 294; --w: 48; --h: 48; background: var(--fm-blue); border-radius: calc(24 * var(--px)); }
.fm-play img { position: absolute; left: calc(19 * var(--px)); top: calc(16 * var(--px)); width: calc(14 * var(--px)); height: calc(16 * var(--px)); display: block; }

/* ---------- 15. Three app screens ---------- */
.fm-c15 { --l: 416; --t: 11815; --w: 909; --h: 812; background: #fff; }
.fm-screens { --l: 37; --t: 34; --w: 832; --h: 740; overflow: hidden; }
.fm-glow { --l: 202.8; --t: 156.37; --w: 427.252; --h: 427.252; }
.fm-glow img { width: 100%; height: 100%; display: block; }
.fm-scr { position: absolute; }
.fm-scr p { position: absolute; margin: 0; }
.fm-scr img { position: absolute; display: block; }
.fm-scr--1 {
  --l: 12; --t: 70; --w: 282; --h: 614;
  background: var(--fm-cream); border: calc(2 * var(--px)) solid #000;
  border-radius: calc(24 * var(--px));
  filter: drop-shadow(calc(-8 * var(--px)) calc(16 * var(--px)) calc(16 * var(--px)) rgba(0,0,0,0.2));
}
.fm-scr--2 {
  --l: 243; --t: 0; --w: 349; --h: 740;
  background: var(--fm-yellow); border: calc(2 * var(--px)) solid var(--fm-blue);
  border-radius: calc(32 * var(--px));
  filter: drop-shadow(0 calc(24 * var(--px)) calc(24 * var(--px)) rgba(0,0,0,0.3));
}
.fm-scr--3 {
  --l: 532; --t: 70; --w: 288; --h: 611;
  background: var(--fm-teal); border: calc(2 * var(--px)) solid #fff;
  border-radius: calc(24 * var(--px));
  filter: drop-shadow(calc(8 * var(--px)) calc(16 * var(--px)) calc(16 * var(--px)) rgba(0,0,0,0.2));
}
.fm-avatar { position: absolute; width: calc(29 * var(--px)); height: calc(29 * var(--px)); background: #265485; border-radius: calc(100 * var(--px)); }
.fm-avatar p {
  left: 50%; transform: translateX(-50%); top: calc(10 * var(--px)); width: calc(32 * var(--px));
  font-family: var(--font-shedry); font-weight: 600; font-size: calc(7 * var(--px));
  color: var(--fm-yellow); text-align: center;
}
.fm-scr .nv { font-family: var(--font-nova); }
.fm-scr .sh { font-family: var(--font-shedry); }

/* ---------- 18. Closing card ---------- */
.fm-c18 {
  /* Figma's metadata call fails on this node, so its top is derived from the
     frame: 16623 total, less the unchanged 41 of tail below it and its own
     1144. Its x follows c16 and c17, which both moved from 425 to 416. */
  --l: 416; --t: 15437; --w: 909; --h: 1144;
  background: var(--fm-butter); color: var(--fm-teal-dark);
  text-align: center; text-transform: lowercase;
}
.case-fm .fm-c18-kicker {
  --l: 271; --t: 39; --w: 312; --h: 78;
  font-family: var(--font-nova); font-size: calc(32 * var(--px)); line-height: 1.2;
}
.fm-c18-kicker em { font-style: italic; text-decoration: underline; font-stretch: condensed; }
.case-fm .fm-c18-big {
  --l: 142; --t: 406; --w: 622; --h: 328;
  font-family: var(--font-shedry); font-size: calc(96 * var(--px));
  line-height: calc(86 * var(--px));
}
.fm-c18-big p { margin: 0; white-space: pre-wrap; }
.fm-c18-url {
  --l: 320; --t: 1068; --w: 214; --h: 39;
  font-family: var(--font-nova); font-size: calc(32 * var(--px));
}

/* The next-project label sets its own colour, so it needs the hover
   transition too or it would snap while the row around it eases. */
.fm-next-label { transition: color 180ms ease; }