/* ============================================================
   Motion — case study
   Figma: IG Post – Second Set, frame 1037:3715 (1400 x 8059)
   Uses the shared canvas system from styles.css (.section/.abs/--px).
   ============================================================ */

.case {
  --baseline-black: #060608;
  --motion-maroon-deep: #550f10;
  --motion-blush: #f39fa9;
  --motion-cherry: #54110f;
  --motion-clay: #30160f;
  --motion-stone: #938390;
  --motion-cream: #fdfbfc;
  --motion-bone: rgba(241, 241, 235, 0.85);

  --font-editorial: "PP Editorial New", "Instrument Serif", Georgia, serif;
  --font-script: "Buntic Regal DEMO VERSION", "Shedry", "Instrument Serif", Georgia, serif;
  --font-shedry: "Shedry", "Instrument Serif", Georgia, serif;
  --font-geist: "Geist", var(--font-sans);

  --h: 8059;
  background: var(--baseline-black);
  overflow: clip;              /* clip, not hidden — keeps sticky working */
}

/* Text boxes size to their content. Without this they inherit the section's
   --h (8059) because .abs always reads var(--h). */
.case .t.abs,
.case .app-hero-text { height: auto; }

/* Custom faces. Drop the files into assets/fonts/ and they take over
   automatically; until then the stack above falls back. */
@font-face {
  font-family: "PP Editorial New";
  src: url("assets/fonts/PPEditorialNew-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@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;
}
@font-face {
  font-family: "Shedry";
  src: url("assets/fonts/Shedry-ExtraBold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Buntic Regal DEMO VERSION";
  src: url("assets/fonts/BunticRegal-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- Type helpers for this page ---------- */
.case .t { margin: 0; line-height: normal; word-break: break-word; }
.case .t-ed    { font-family: var(--font-editorial); }
.case .t-sh    { font-family: var(--font-shedry); }
.case .t-is    { font-family: var(--font-sans); font-variation-settings: "wdth" 100; }
.case .t-geist { font-family: var(--font-geist); }

/* ---------- Pinned panel (same pattern as Baseline / Receipt) ----------
   Figma 1037:3716 — 23,40, 470 x 7949. The design lists all four MARK steps
   expanded at once; on the page the panel is pinned and one step is open at
   a time, so the copy is never clipped by the viewport. */
.mo-panel {
  position: sticky;
  top: calc(40 * var(--px));
  z-index: 2;
  margin-left: calc(23 * var(--px));
  width: calc(470 * var(--px));
  height: auto;
  max-height: calc(100vh - (80 * var(--px)));
  background: var(--baseline-black);
  border: calc(2 * var(--px)) solid #fff;
  border-radius: calc(40 * var(--px));
  /* 2px border + 28px padding = the 30px content inset Figma uses (x = 53 on
     a panel whose left edge is 23), and a 410px content width for the 409px
     body copy. */
  padding: calc(18 * var(--px)) calc(28 * var(--px)) calc(28 * var(--px));
  display: flex; flex-direction: column;
  overflow: hidden;
}
.mo-panel-head { display: flex; align-items: flex-start; justify-content: space-between; flex: 0 0 auto; }
.mo-wordmark {
  margin: 0;
  font-family: var(--font-script);
  font-size: calc(64 * var(--px));
  line-height: 1.125;                     /* Figma box is 72px for 64px type */
  color: var(--motion-blush);
}
.mo-year {
  margin-top: calc(22 * 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;
}
.mo-intro {
  margin: calc(15 * var(--px)) 0 0;
  width: calc(386 * var(--px));
  font-family: var(--font-sans); font-variation-settings: "wdth" 100;
  font-size: calc(20 * var(--px)); line-height: 1.25; color: #fff;
  flex: 0 0 auto;
}
.mo-acc-list {
  margin-top: calc(62 * 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;
}
.mo-acc-list::-webkit-scrollbar { width: calc(4 * var(--px)); }
.mo-acc-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.35); border-radius: calc(4 * var(--px)); }
.mo-item + .mo-item { margin-top: calc(22 * var(--px)); }

.mo-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;
}
.mo-acc:hover { color: var(--octodraws-icon-purple); }
.mo-acc:focus-visible { outline: calc(2 * var(--px)) solid #fff; outline-offset: calc(6 * var(--px)); }
.mo-acc .sign { flex: 0 0 auto; margin-left: calc(16 * var(--px)); }

.mo-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);
}
.mo-body > div { overflow: hidden; }
.mo-body p {
  margin: 0;
  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;
}
.mo-body.is-open { grid-template-rows: 1fr; padding-top: calc(14 * var(--px)); }
.mo-body.is-open p { opacity: 1; transition: opacity 280ms ease 110ms; }

/* Next Project — Figma 1171:14 … 1171:17 plus badge 1169:3801 */
.mo-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;
}
.mo-next-row:hover,
.mo-next-row:hover .mo-next-label { color: var(--octodraws-icon-purple); }
.mo-next-row:focus-visible { outline: calc(2 * var(--px)) solid #fff; outline-offset: calc(4 * var(--px)); }
/* Figma places the five parts at fixed x positions rather than spacing them
   evenly, so they are positioned rather than laid out with flex. Coordinates
   are Figma's, shifted so 0 = the panel's 30px content inset. */
.mo-next-label {
  display: block; margin-left: calc(5 * 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;
}
.mo-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;
}
.mo-next-line > * { position: absolute; }
.mo-badge {
  left: calc(5 * var(--px)); top: 0;
  width: calc(21 * var(--px)); height: calc(23 * var(--px));
  background: #ebe86b; border-radius: calc(7 * var(--px)); overflow: hidden;
}
.mo-badge img {
  position: absolute; left: calc(4 * var(--px)); top: calc(5 * var(--px));
  width: calc(13.794 * var(--px)); height: calc(13 * var(--px));
  max-width: none; object-fit: cover; transform: rotate(180deg);
}
.mo-next-name { left: calc(34 * var(--px)); top: calc(3 * var(--px)); font-weight: 500; }
.mo-next-type {
  left: calc(108 * var(--px)); top: calc(3 * var(--px));
  width: calc(194 * var(--px)); text-align: center; opacity: 0.75;
}
.mo-next-year {
  right: calc(5 * var(--px)); top: calc(3 * var(--px));
  width: calc(42 * var(--px)); text-align: right; opacity: 0.75;
}

/* ---------- Right column cards ---------- */
.card-m {
  border: calc(2 * var(--px)) solid #000;
  border-radius: calc(40 * var(--px));
  overflow: hidden;
}
.card-m > img,
.card-m .fill { width: 100%; height: 100%; object-fit: cover; }

.m-crop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.m-crop img { position: absolute; max-width: none; }

/* 1 — logo lockup */
.c-logo { --l: 546; --t: 40; --w: 805; --h: 390; background: var(--motion-maroon-deep); }
.c-logo-img {
  --l: 166; --t: 101; --w: 473; --h: 188;   /* centred: (805-473)/2, (390-188)/2 */
}
.c-logo-img img { width: 100%; height: 100%; object-fit: cover; }

/* 2 — reformer photo */
.c-reformer { --l: 546; --t: 458; --w: 445; --h: 390; }
.c-reformer img { left: 0; top: -19.17%; width: 100%; height: 152.83%; }

/* 3 — IG post 18 */
.c-ig18 { --l: 1018; --t: 458; --w: 333; --h: 390; background: #fff; }
.c-ig18-img { --l: -2; --t: -29; --w: 333; --h: 444; }
.c-ig18-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Figma sets this text to `leading-[normal]`, and its render steps the three
   lines 65px apart. The 194px box is simply smaller than its own content —
   four lines at that leading come to 260 — so the box height must not be
   used to derive the leading. */
.case .c-ig18-words {
  --l: 65; --t: 98; --w: 204; --h: 194;
  font-family: var(--font-shedry);
  font-size: calc(48 * var(--px));
  line-height: calc(65 * var(--px));
  color: #fff;
  text-align: center;
  overflow: visible;
}
.c-ig18-words p { margin: 0; }

/* 4 — app carousel */
.c-carousel { --l: 546; --t: 875; --w: 807; --h: 719; }
.carousel-track {
  --t: 47; --h: 620;
  position: absolute;
  left: 0;
  top: calc(var(--t) * var(--px));
  height: calc(var(--h) * var(--px));
  display: flex;
  width: max-content;
  animation: motion-marquee 62s linear infinite;
  will-change: transform;
}
.c-carousel:hover .carousel-track { animation-play-state: paused; }
@keyframes motion-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .carousel-track { animation: none; }
  .c-carousel { overflow-x: auto; }
}

/* 5 — mat + monogram pair */
.c-mat { --l: 546; --t: 1604; --w: 386; --h: 422; }
.c-mat-inner { --l: -2; --t: -2; --w: 410; --h: 422; }
.c-mat-inner img { left: -5.03%; top: -11.51%; width: 99.9%; height: 130%; }

.c-monogram { --l: 965; --t: 1604; --w: 386; --h: 422; background: var(--motion-maroon-deep); }
.mask-m {
  position: absolute;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  overflow: hidden;
}
.mask-m img { position: absolute; max-width: none; left: 3.71%; top: -34.94%; width: 92.54%; height: 175%; }
.c-monogram-mask {
  --l: 29; --t: 81; --w: 327; --h: 259;
  mask-image: url("assets/motion/mask-m-large.svg");
  -webkit-mask-image: url("assets/motion/mask-m-large.svg");
  mask-size: calc(291 * var(--px)) calc(243.554 * var(--px));
  -webkit-mask-size: calc(291 * var(--px)) calc(243.554 * var(--px));
  mask-position: calc(18.029 * var(--px)) calc(8.224 * var(--px));
  -webkit-mask-position: calc(18.029 * var(--px)) calc(8.224 * var(--px));
}
/* floating monogram, page-level */
.c-monogram-float {
  --l: 1053; --t: 3184; --w: 248; --h: 197;
  mask-image: url("assets/motion/mask-m-small.svg");
  -webkit-mask-image: url("assets/motion/mask-m-small.svg");
  mask-size: calc(221.039 * var(--px)) calc(185 * var(--px));
  -webkit-mask-size: calc(221.039 * var(--px)) calc(185 * var(--px));
  mask-position: calc(13.695 * var(--px)) calc(6.247 * var(--px));
  -webkit-mask-position: calc(13.695 * var(--px)) calc(6.247 * var(--px));
}

/* 6 — IG post 03 */
.c-ig03 { --l: 546; --t: 2095; --w: 807; --h: 620; }
.c-ig03-bg { --l: -140; --t: -412; --w: 1080; --h: 1069; background: var(--motion-maroon-deep); overflow: hidden; }
.c-ig03-img { --l: 136; --t: 410; --w: 809; --h: 620; }
.c-ig03-img img { left: -1.97%; top: -33.35%; width: 104.04%; height: 181%; }

/* 7 — quotes */
.c-quotes { --l: 546; --t: 2756; --w: 807; --h: 849; }
.c-quotes-img { --l: 1; --t: -2; --w: 805; --h: 849; }
.c-quotes-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: bottom; }
.quote-plate { background: var(--motion-maroon-deep); }
.quote-plate--1 { --l: 296; --t: 29; --w: 476; --h: 158; }
.quote-plate--2 { --l: 32;  --t: 655; --w: 476; --h: 158; }
.quote-text {
  font-family: var(--font-shedry);
  font-size: calc(20 * var(--px));
  letter-spacing: calc(0.6 * var(--px));
}
.quote-text--1 { --l: 334; --t: 53;  --w: 406; --h: 109; color: #e5ecda; }
.quote-text--2 { --l: 83;  --t: 680; --w: 380; --h: 108; color: #e8efcb; }

/* 8 — pose grid (IG post 02) */
.c-poses { --l: 548; --t: 3646; --w: 807; --h: 744; }
.c-poses-bg { --l: -2; --t: -2; --w: 805; --h: 744; background: var(--motion-maroon-deep); overflow: hidden; }
.pose-tile { background: var(--motion-blush); border-radius: calc(20.667 * var(--px)); --w: 304.111; --h: 231.467; }
.pose-tile--tl { --l: 76.03;  --t: 124; }
.pose-tile--bl { --l: 76.03;  --t: 388.53; }
.pose-tile--tr { --l: 424.86; --t: 124; }
.pose-tile--br { --l: 424.86; --t: 388.53; }
/* Figma's timeline settles these at 0.7, which is what the frame renders. */
.pose-art { opacity: 0.7; }
.pose-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pose-art--arabesque { --l: 168.98; --t: 206.32; --w: 128.204; --h: 66.65; }
.pose-art--elephant  { --l: 537;    --t: 201;    --w: 74.537;  --h: 76.983; }
.pose-art--swan      { --l: 512.07; --t: 462.63; --w: 129.694; --h: 67.683; }
.pose-art--mermaid   { --l: 189.43; --t: 461.43; --w: 77.519;  --h: 80.083; transform: rotate(180deg); }
.pose-name {
  font-family: var(--font-editorial);
  font-size: calc(20.667 * var(--px));
  letter-spacing: calc(0.2067 * var(--px));
  color: #000;
  text-align: center;
}
.pose-name--arabesque { --l: 123;    --t: 155;    --w: 213;     --h: 21; }
.pose-name--elephant  { --l: 470;    --t: 152;    --w: 213;     --h: 25; }
.pose-name--mermaid   { --l: 117.87; --t: 417;    --w: 213.176; --h: 19.117; }
.pose-name--swan      { --l: 470.33; --t: 412;    --w: 213.176; --h: 19.117; }
.pose-note {
  font-family: var(--font-shedry);
  font-size: calc(10.333 * var(--px));
  letter-spacing: calc(0.31 * var(--px));
  color: #000;
  text-align: center;
}
.pose-note--arabesque { --l: 112;     --t: 303;    --w: 224;     --h: 27; }
.pose-note--elephant  { --l: 447;     --t: 302;    --w: 259;     --h: 28; }
.pose-note--swan      { --l: 455;     --t: 561.67; --w: 243;     --h: 28; }
.pose-note--mermaid   { --l: 97.005;  --t: 566.83; --w: 262.37;  --h: 24.8; }

/* 9 — colour palette */
.c-palette { --l: 546; --t: 4431; --w: 807; --h: 827; }
.c-palette-inner { --l: -2; --t: -2; --w: 807; --h: 1304; overflow: hidden; }
.swatch { --w: 203.244; --h: 1304; --t: 0; overflow: hidden; }
.swatch-fill { position: absolute; left: 0; top: 0; width: calc(272 * var(--px)); height: calc(1440 * var(--px)); }
.swatch-name, .swatch-hex {
  font-family: var(--font-editorial);
  text-align: center;
}
.swatch-name { font-size: calc(48 * var(--px)); --t: 45; }
.swatch-hex  { font-size: calc(40 * var(--px)); --t: 1320; --h: 86; }

.swatch--stone  { --l: 0; }
.swatch--blush  { --l: 203.24; }
.swatch--cherry { --l: 403.5; }
.swatch--clay   { --l: 606.74; --w: 203.244; }

/* ---------- Figma's 2.375s palette timeline (cohort root 1037:3715) ----------
   Every strip, name and hex runs the one 2.375s linear master on an infinite
   loop, which is the `loopMode: loop` Figma reports for the cohort. Each
   element waits at its start value, moves over its own window, then holds to
   100% and the whole card restarts together. The percentages, easings and the
   1500 / 25 / -20 offsets below are read straight off Figma's keyframes, so
   each pair is kept as its own block rather than folded into a shared curve.

   The pose grid above it has no timeline: its illustrations sit at their
   resting 0.7 opacity from the start. */
.c-palette.is-playing .swatch,
.c-palette.is-playing .swatch-name,
.c-palette.is-playing .swatch-hex {
  animation-duration: 2.375s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* strips — translate y 1500 -> 0, eased out of the 0% frame */
@keyframes mo-strip-stone  { 0% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); translate: 0 calc(1500 * var(--px)); } 37.895%, 100% { translate: 0 0; } }
@keyframes mo-strip-blush  { 0% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); translate: 0 calc(1500 * var(--px)); } 45.474%, 100% { translate: 0 0; } }
@keyframes mo-strip-cherry { 0% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); translate: 0 calc(1500 * var(--px)); } 53.053%, 100% { translate: 0 0; } }
@keyframes mo-strip-clay   { 0% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); translate: 0 calc(1500 * var(--px)); } 60.632%, 100% { translate: 0 0; } }
.c-palette.is-playing .swatch--stone  { animation-name: mo-strip-stone; }
.c-palette.is-playing .swatch--blush  { animation-name: mo-strip-blush; }
.c-palette.is-playing .swatch--cherry { animation-name: mo-strip-cherry; }
.c-palette.is-playing .swatch--clay   { animation-name: mo-strip-clay; }

/* names — rise 25 and fade in behind the strip that carries them */
@keyframes mo-name-stone  { 0%, 54.737% { animation-timing-function: cubic-bezier(0, 0, 0.2, 1); opacity: 0; translate: 0 calc(25 * var(--px)); } 75.789%, 100% { opacity: 1; translate: 0 0; } }
@keyframes mo-name-blush  { 0%, 59.789% { animation-timing-function: cubic-bezier(0, 0, 0.2, 1); opacity: 0; translate: 0 calc(25 * var(--px)); } 80.842%, 100% { opacity: 1; translate: 0 0; } }
@keyframes mo-name-cherry { 0%, 64.842% { animation-timing-function: cubic-bezier(0, 0, 0.2, 1); opacity: 0; translate: 0 calc(25 * var(--px)); } 85.895%, 100% { opacity: 1; translate: 0 0; } }
@keyframes mo-name-clay   { 0%, 69.895% { animation-timing-function: cubic-bezier(0, 0, 0.2, 1); opacity: 0; translate: 0 calc(25 * var(--px)); } 90.947%, 100% { opacity: 1; translate: 0 0; } }
.c-palette.is-playing .swatch--stone  .swatch-name { animation-name: mo-name-stone; }
.c-palette.is-playing .swatch--blush  .swatch-name { animation-name: mo-name-blush; }
.c-palette.is-playing .swatch--cherry .swatch-name { animation-name: mo-name-cherry; }
.c-palette.is-playing .swatch--clay   .swatch-name { animation-name: mo-name-clay; }

/* hex codes — drop 20 and fade in a beat after their name */
@keyframes mo-hex-stone  { 0%, 63.158% { animation-timing-function: cubic-bezier(0, 0, 0.2, 1); opacity: 0; translate: 0 calc(-20 * var(--px)); } 84.211%, 100% { opacity: 1; translate: 0 0; } }
@keyframes mo-hex-blush  { 0%, 68.211% { animation-timing-function: cubic-bezier(0, 0, 0.2, 1); opacity: 0; translate: 0 calc(-20 * var(--px)); } 89.263%, 100% { opacity: 1; translate: 0 0; } }
@keyframes mo-hex-cherry { 0%, 73.263% { animation-timing-function: cubic-bezier(0, 0, 0.2, 1); opacity: 0; translate: 0 calc(-20 * var(--px)); } 94.316%, 100% { opacity: 1; translate: 0 0; } }
@keyframes mo-hex-clay   { 0%, 78.316% { animation-timing-function: cubic-bezier(0, 0, 0.2, 1); opacity: 0; translate: 0 calc(-20 * var(--px)); } 99.368%, 100% { opacity: 1; translate: 0 0; } }
.c-palette.is-playing .swatch--stone  .swatch-hex { animation-name: mo-hex-stone; }
.c-palette.is-playing .swatch--blush  .swatch-hex { animation-name: mo-hex-blush; }
.c-palette.is-playing .swatch--cherry .swatch-hex { animation-name: mo-hex-cherry; }
.c-palette.is-playing .swatch--clay   .swatch-hex { animation-name: mo-hex-clay; }

@media (prefers-reduced-motion: reduce) {
  .c-palette.is-playing .swatch,
  .c-palette.is-playing .swatch-name,
  .c-palette.is-playing .swatch-hex { animation: none; }
}

/* 10 — website mockup */
.c-web { --l: 546; --t: 5299; --w: 807; --h: 1050; background: var(--motion-maroon-deep); }
.web-nav {
  --l: 45; --t: 41; --w: 717; --h: 66.389;
  background: #8a1616;
  border-bottom: calc(0.889 * var(--px)) solid #eae9e4;
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: calc(28.449 * var(--px));
}
.web-nav-logo { width: calc(75.569 * var(--px)); height: calc(30.046 * var(--px)); }
.web-nav-logo img { width: 100%; height: 100%; object-fit: cover; }
.web-nav-links { display: flex; align-items: center; gap: calc(24.893 * var(--px)); }
.web-nav-links p { margin: 0; font-size: calc(12.447 * var(--px)); color: #fff; font-weight: 500; }
.web-nav-links p:first-child { font-weight: 600; }
.web-cta {
  background: var(--motion-blush);
  border-radius: calc(7.112 * var(--px));
  padding: calc(8.89 * var(--px)) calc(14.225 * var(--px));
  font-size: calc(11.558 * var(--px));
  font-weight: 600;
  color: var(--motion-maroon-deep);
}
.web-hero { --l: 45; --t: 107.39; --w: 717; --h: 379.247; }
.web-hero img { left: -58.82%; top: -147.7%; width: 212.54%; height: 300%; }
.web-panel { --l: 45; --t: 486.64; --w: 717; --h: 521.983; }
.web-panel img { position: absolute; inset: 0; width: 100%; height: 100%; }
.case .web-strapline {
  --l: 178.5; --t: 517.31; --w: 449.785; --h: 39.003;
  font-family: var(--font-editorial);
  font-size: calc(17.781 * var(--px));
  line-height: calc(19.5 * var(--px));   /* Figma: 39.003 box, two lines */
  color: #8a1616;
  text-align: center;
}
.web-strapline p { margin: 0; }
.case .web-headline {
  --l: 222.59; --t: 254.27; --w: 361.819; --h: 85.476;
  font-family: var(--font-shedry); font-weight: 600;
  font-size: calc(35.562 * var(--px));
  line-height: calc(44.452 * var(--px));   /* Figma's own leading */
  color: #fff; text-align: center;
}
.web-card { border-radius: calc(10.669 * var(--px)); --w: 331.944; --h: 182.569; }
.web-card--1 { --l: 59.94;  --t: 587.88; background: #ffbff0; }
.web-card--2 { --l: 59.94;  --t: 793.68; background: #e5d9e5; }
.web-card--3 { --l: 415.12; --t: 587.88; background: #b1a8e2; }
.web-card--4 { --l: 415.12; --t: 792.02; background: #ffbfc0; }
.web-dur  { font-family: var(--font-shedry); font-weight: 800; font-size: calc(10.669 * var(--px)); color: #8a1616; }
.web-name { font-family: "Instrument Serif", Georgia, serif; font-size: calc(21.337 * var(--px)); color: #000; }
.web-desc { font-family: var(--font-shedry); font-size: calc(9.779 * var(--px)); color: #030303; }
.web-desc p { margin: 0; }
.web-book { background: #8a1616; border-radius: calc(14.225 * var(--px)); --w: 58.09; --h: 26.556; }
.web-book-t { font-family: var(--font-shedry); font-weight: 800; font-size: calc(10.669 * var(--px)); color: #fff; text-align: center; }
.web-price { font-family: var(--font-shedry); font-weight: 600; font-size: calc(9.779 * var(--px)); color: #8a1616; }
.web-thumb { --w: 116.181; --h: 116.181; }
.web-thumb img { width: 100%; height: 100%; }

/* 11 + 12 — IG grid and billboard */
.c-iggrid { --l: 546; --t: 6383; --w: 807; --h: 615; }
.c-iggrid-inner { --l: -19; --t: -2; --w: 832; --h: 615; }
.c-iggrid-inner img { left: -1.44%; top: -36.43%; width: 102.85%; height: 186.24%; }

.c-billboard { --l: 546; --t: 7032; --w: 807; --h: 957; }
.c-billboard-inner { --l: -2; --t: -2; --w: 807; --h: 957; }
.c-billboard-inner img { left: -0.46%; top: -6.5%; width: 100.04%; height: 113%; }

/* ============================================================
   App carousel cards (340 x 620 each)
   ============================================================ */
.app-card {
  position: relative;
  flex: 0 0 auto;
  width: calc(340 * var(--px));
  height: calc(620 * var(--px));
  /* margin (not gap) so one full run is exactly 50% of the track */
  margin-right: calc(28 * var(--px));
  border-radius: calc(32 * var(--px));
  overflow: hidden;
}
.app-card--blush { background: var(--motion-blush); }
.app-card--cream { background: var(--motion-cream); }

.app-pad { padding: calc(32 * var(--px)) calc(24 * var(--px)) 0; }
.app-h {
  font-family: var(--font-shedry);
  font-size: calc(32 * var(--px));
  color: var(--motion-clay);
  margin: 0;
}
.app-sub {
  font-family: var(--font-sans); font-weight: 500;
  font-size: calc(14 * var(--px));
  color: var(--motion-cherry);
  margin: calc(4 * var(--px)) 0 0;
}
.app-list { display: flex; flex-direction: column; gap: calc(10 * var(--px)); padding: calc(16 * var(--px)) calc(20 * var(--px)) 0; }
.app-tile { border-radius: calc(24 * var(--px)); padding: calc(16 * var(--px)); display: flex; flex-direction: column; gap: calc(12 * var(--px)); }
.app-tile--white { background: #fff; }
.app-tile--bone  { background: var(--motion-bone); }
.app-row { display: flex; align-items: center; justify-content: space-between; }
.app-meta { font-family: var(--font-sans); font-weight: 600; font-size: calc(12 * var(--px)); margin: 0; }
.app-badge { border-radius: calc(100 * var(--px)); padding: calc(4 * var(--px)) calc(8 * var(--px)); }
.app-badge p { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: calc(10 * var(--px)); white-space: nowrap; }
.app-title { font-family: var(--font-shedry); font-size: calc(20 * var(--px)); color: var(--motion-clay); margin: 0; }
.app-who { display: flex; align-items: center; gap: calc(8 * var(--px)); }
.app-who p { margin: 0; font-family: var(--font-sans); font-size: calc(13 * var(--px)); color: var(--motion-clay); }
.app-pill {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(24 * var(--px));
  width: calc(292 * var(--px)); height: calc(56 * var(--px));
  background: var(--motion-clay); border-radius: calc(28 * var(--px));
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: calc(24 * var(--px));
}
.app-pill p { margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: calc(14 * var(--px)); color: var(--motion-blush); white-space: nowrap; }
.app-btn {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(24 * var(--px));
  width: calc(292 * var(--px)); height: calc(50 * var(--px));
  border-radius: calc(25 * var(--px));
  display: flex; align-items: center; justify-content: center;
}
.app-btn p { margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: calc(14 * var(--px)); white-space: nowrap; }
.app-btn--dark  { background: var(--motion-clay); }
.app-btn--dark p { color: #fff; }
.app-btn--white { background: #fff; }
.app-btn--white p { color: var(--motion-clay); }
.app-circle { width: calc(32 * var(--px)); height: calc(32 * var(--px)); border-radius: 50%; background: var(--motion-blush); display: flex; align-items: center; justify-content: center; }
.app-ico { display: block; }
.app-home { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(6 * var(--px)); width: calc(120 * var(--px)); height: calc(5 * var(--px)); background: var(--motion-clay); opacity: .3; border-radius: calc(100 * var(--px)); }

/* headline cards — position comes from .abs, not from here */
.app-hero-text p {
  margin: 0;
  font-family: var(--font-shedry);
  font-size: calc(45 * var(--px));
  line-height: 1.05;
  letter-spacing: calc(-1.2 * var(--px));
  color: var(--motion-clay);
}
.app-action {
  background: var(--motion-blush);
  border: calc(1 * var(--px)) solid var(--motion-clay);
  border-radius: calc(28 * var(--px));
  display: flex; align-items: center;
  padding-left: calc(23 * var(--px));
}
.app-action p { margin: 0; font-family: var(--font-sans); font-weight: 500; font-size: calc(14 * var(--px)); color: var(--motion-clay); white-space: nowrap; }
.app-action-dot {
  position: absolute; right: calc(9 * var(--px));
  width: calc(40 * var(--px)); height: calc(40 * var(--px));
  background: var(--motion-clay); border-radius: calc(20 * var(--px));
  display: flex; align-items: center; justify-content: center;
}
.app-photo-frame { position: absolute; }
.app-deco { position: absolute; left: 0; top: 0; background: var(--motion-clay); border-radius: calc(12 * var(--px)); }
.app-portrait { position: absolute; border-radius: calc(12 * var(--px)); overflow: hidden; }
.app-portrait img { width: 100%; height: 100%; object-fit: cover; }
.app-badge-float {
  position: absolute; background: var(--motion-clay); border-radius: calc(12 * var(--px));
  display: flex; align-items: center; justify-content: center;
}

/* profile / instructor / detail / studio / progress screens */
.app-hdr { display: flex; align-items: center; justify-content: space-between; padding: calc(32 * var(--px)) calc(24 * var(--px)) 0; }
.app-hdr p { margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: calc(16 * var(--px)); color: var(--motion-clay); }
.app-round {
  width: calc(36 * var(--px)); height: calc(36 * var(--px));
  border: calc(1 * var(--px)) solid var(--motion-clay); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.app-img-block { margin: calc(16 * var(--px)) calc(24 * var(--px)) 0; border-radius: calc(24 * var(--px)); overflow: hidden; }
.app-img-block img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-body { padding: calc(12 * var(--px)) calc(24 * var(--px)) 0; }
.app-body p { margin: 0; }
.app-lede { font-family: var(--font-shedry); font-size: calc(28 * var(--px)); color: var(--motion-clay); }
.app-note { font-family: var(--font-sans); font-size: calc(13 * var(--px)); line-height: 1.4; color: var(--motion-clay); margin-top: calc(12 * var(--px)) !important; }
.app-tags { display: flex; flex-wrap: wrap; gap: calc(6 * var(--px)); margin-top: calc(12 * var(--px)); }
.app-tag { background: var(--motion-blush); border-radius: calc(100 * var(--px)); padding: calc(6 * var(--px)) calc(10 * var(--px)); }
.app-tag p { font-family: var(--font-sans); font-weight: 600; font-size: calc(11 * var(--px)); color: var(--motion-clay); white-space: nowrap; }
.app-metarow { display: flex; gap: calc(12 * var(--px)); margin-top: calc(12 * var(--px)); }
.app-metaitem { display: flex; align-items: center; gap: calc(6 * var(--px)); }
.app-metaitem p { font-family: var(--font-sans); font-weight: 500; font-size: calc(13 * var(--px)); color: var(--motion-clay); white-space: nowrap; }
.app-rule { height: 1px; background: rgba(48,22,15,.15); margin: calc(12 * var(--px)) 0; }
.app-avail {
  background: var(--motion-blush); opacity: .72; border-radius: calc(16 * var(--px));
  padding: calc(12 * var(--px)); display: flex; align-items: center; gap: calc(8 * var(--px));
  margin-top: calc(12 * var(--px));
}
.app-avail p { font-family: var(--font-sans); font-weight: 600; font-size: calc(12 * var(--px)); color: #000; }
.app-stats { display: flex; gap: calc(12 * var(--px)); padding: calc(16 * var(--px)) calc(24 * var(--px)) 0; }
.app-stat { flex: 1 1 0; border-radius: calc(24 * var(--px)); padding: calc(16 * var(--px)); display: flex; flex-direction: column; gap: calc(8 * var(--px)); }
.app-stat--blush { background: var(--motion-blush); }
.app-stat--bone  { background: var(--motion-bone); }
.app-stat p { margin: 0; white-space: nowrap; }
.app-stat-k { font-family: var(--font-sans); font-weight: 600; font-size: calc(12 * var(--px)); color: var(--motion-clay); }
.app-stat-v { font-family: var(--font-shedry); font-size: calc(36 * var(--px)); color: var(--motion-clay); }
.app-stat-v span { font-family: var(--font-sans); font-size: calc(18 * var(--px)); }
.app-stat-s { font-family: var(--font-sans); font-size: calc(11 * var(--px)); color: var(--motion-cherry); }
.app-ring {
  background: #fff; border: calc(1 * var(--px)) solid rgba(48,22,15,.1);
  border-radius: calc(24 * var(--px)); padding: calc(16 * var(--px));
  display: flex; align-items: center; gap: calc(16 * var(--px));
  margin: calc(12 * var(--px)) calc(24 * var(--px)) 0;
}
.app-ring-vis { position: relative; width: calc(64 * var(--px)); height: calc(64 * var(--px)); flex: 0 0 auto; }
.app-ring-vis img { position: absolute; inset: 0; width: 100%; height: 100%; }
.app-ring-vis span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-weight: 700; font-size: calc(13 * var(--px)); color: var(--motion-clay);
}
.app-tiers { display: flex; flex-direction: column; gap: calc(12 * var(--px)); padding: calc(16 * var(--px)) calc(20 * var(--px)) 0; }
.app-tier { border-radius: calc(24 * var(--px)); padding: calc(18 * var(--px)); position: relative; }
.app-tier--white { background: #fff; }
.app-tier--dark  { background: var(--motion-clay); }
.app-tier p { margin: 0; }
.app-tier-top { display: flex; align-items: center; justify-content: space-between; }
.app-tier-name { font-family: var(--font-shedry); font-size: calc(20 * var(--px)); }
.app-tier-price { font-family: var(--font-sans); font-weight: 700; font-size: calc(18 * var(--px)); }
.app-tier-price span { font-weight: 400; font-size: calc(12 * var(--px)); }
.app-tier-desc { font-family: var(--font-sans); font-size: calc(12 * var(--px)); margin-top: calc(12 * var(--px)) !important; }
.app-feature {
  position: absolute; top: calc(-10 * var(--px)); right: calc(16 * var(--px));
  background: var(--motion-blush); border-radius: calc(100 * var(--px));
  padding: calc(4 * var(--px)) calc(8 * var(--px));
}
.app-feature p { font-family: var(--font-sans); font-weight: 700; font-size: calc(9 * var(--px)); color: var(--motion-clay); white-space: nowrap; }
.app-amen { display: flex; flex-wrap: wrap; gap: calc(8 * var(--px)); margin-top: calc(12 * var(--px)); }
.app-amen-item { background: var(--motion-bone); border-radius: calc(12 * var(--px)); padding: calc(6 * var(--px)) calc(10 * var(--px)); display: flex; align-items: center; gap: calc(6 * var(--px)); }
.app-amen-item p { font-family: var(--font-sans); font-weight: 500; font-size: calc(11 * var(--px)); color: var(--motion-clay); white-space: nowrap; }
.app-status { background: var(--motion-blush); border-radius: calc(100 * var(--px)); padding: calc(4 * var(--px)) calc(10 * var(--px)); }
.app-status p { font-family: var(--font-sans); font-weight: 600; font-size: calc(11 * var(--px)); color: var(--motion-clay); white-space: nowrap; }
.app-brand { font-family: var(--font-script); font-size: calc(36 * var(--px)); color: var(--motion-clay); margin: 0; }
.app-cats { position: absolute; inset: 0; }
.app-cats > img { width: 100%; height: 100%; object-fit: cover; }
.app-cats-shade { position: absolute; inset: 0; background: rgba(0,0,0,.15); }
.app-cat-pill {
  position: absolute; height: calc(54 * var(--px));
  background: var(--motion-bone); border-radius: calc(27 * var(--px));
  box-shadow: 0 calc(4 * var(--px)) calc(8 * var(--px)) rgba(0,0,0,.05);
  display: flex; align-items: center;
}
.app-cat-pill p { margin: 0 0 0 calc(57 * var(--px)); font-family: var(--font-sans); font-weight: 600; font-size: calc(15 * var(--px)); color: var(--motion-cherry); white-space: nowrap; }
.app-cat-dot {
  position: absolute; left: calc(8 * var(--px));
  width: calc(38 * var(--px)); height: calc(38 * var(--px));
  background: var(--motion-blush); border-radius: calc(19 * var(--px));
  display: flex; align-items: center; justify-content: center;
}

/* 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. */
.mo-next-label { transition: color 180ms ease; }