/* Home · desktop 1280 / mobile 390. Stage coordinates are the Figma frame coordinates,
   expressed from the horizontal centre (x - 640) and from a vertically centred 718px band. */

/* ------------------------------------------------------------------
   Intro stage (01 → 05)
   ------------------------------------------------------------------ */
.intro { position: relative; height: calc(calc(100 * var(--svh)) + 2400px); }
.stage {
  --oy: max(-40px, calc((calc(100 * var(--svh)) - 718px) / 2));
  --shift: 0px;              /* conversation lifts the hero by 60px (frames A/B/C) */
  position: sticky; top: 0;
  height: calc(100 * var(--svh)); min-height: 640px;
  overflow: hidden;
  background: #fff;
}
.stage.is-convo { --shift: -60px; }
.stage > * { position: absolute; will-change: transform, opacity; }
.stage > picture { display: contents; }   /* <picture> wrappers (desk/mobile-only art): the img is the stage item */
.stage > picture > img { position: absolute; will-change: transform, opacity; }
.stage__pattern { left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; } /* exact at 1280×718, covers taller / wider stages */
.stage__patterns { inset: 0; pointer-events: none; }
.stage__patterns .stage__pattern { position: absolute; transition: opacity 500ms var(--ease); }
.stage__pattern--convo, .stage__pattern--again { opacity: 0; }
.stage.is-convo .stage__patterns .stage__pattern { opacity: 0; }
.stage.is-convo:not(.is-again) .stage__pattern--convo, .stage.is-convo.is-again .stage__pattern--again { opacity: 1; }
.stage__glow { transition: transform 600ms var(--ease); }
.stage.is-busy .ask__send .icon-circle, .stage.is-busy .ask__send:hover .icon-circle { background: #e0e0e0; color: #fff; transform: none; }   /* busy: no hover */
.stage.is-busy .ask__send .icon-circle svg { transform: none; }
.stage__glow {
  left: calc(50% - 640px); top: var(--oy);
  width: 1176px; height: 1176px;
  border-radius: 50%; background: #fff; filter: blur(50px);
  transform-origin: 0 0;
}
.stage__arrow { left: calc(50% - 640px); top: var(--oy); width: 1169px; height: 1172px; max-width: none; transform-origin: 0 0; opacity: 0; pointer-events: none; }
.stage__arrow3d { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.stage.has-arrow3d .stage__arrow { visibility: hidden; }
.stage__blocks { left: calc(50% - 99px); top: calc(var(--oy) + 492px); width: 178.28px; height: 156px; opacity: 0; } /* group is rotated 90° in Figma */

/* PixelCursorMark: the stepped block is two rects (550×480 path: lower-left 0–481 × 69–480, upper-right
   275–550 × 0–412), lime from 1238:20516. .is-in builds them in 4 hard steps: the lower-left from its
   bottom-left corner (180ms), the upper-right from its top-right corner 60ms later. Opacity never changes. */
.pcm { --ts: 1; }
.pcm__a, .pcm__b { position: absolute; background: #c4fe47; }
.pcm__a { left: 0; top: 14.375%; width: 87.455%; height: 85.625%; }
.pcm__b { left: 50%; top: 0; width: 50%; height: 85.833%; }
.js .pcm:not(.is-in) .pcm__a { clip-path: inset(100% 100% 0 0); }
.js .pcm:not(.is-in) .pcm__b { clip-path: inset(0 0 100% 100%); }
.motion .pcm.is-in.is-anim .pcm__a { animation: pcm-a calc(180ms / var(--ts)) steps(4, jump-start) both; }
.motion .pcm.is-in.is-anim .pcm__b { animation: pcm-b calc(180ms / var(--ts)) steps(4, jump-start) calc(60ms / var(--ts)) both; }
@keyframes pcm-a { from { clip-path: inset(100% 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pcm-b { from { clip-path: inset(0 0 100% 100%); } to { clip-path: inset(0 0 0 0); } }
/* rest frame (render of the new model at CURSOR_REST, cropped at the block's bottom like Figma) until 3D is up */
.pcm__still { position: absolute; left: -39px; top: 13px; width: 248px; height: 143px; max-width: none; opacity: 0; transition: opacity 120ms; }
.pcm.is-in .pcm__still { opacity: 1; transition-delay: calc(260ms / var(--ts)); }
.stage.has-arrow3d .pcm__still { visibility: hidden; }

.stage__title {
  left: calc(50% - 392px); top: calc(var(--oy) + 224px + var(--shift));
  width: 784px;
  font-size: 96px; line-height: 0.96; text-align: center; color: #000;
  transition: top 600ms var(--ease);
}
.stage__intro {
  left: calc(50% - 290px); top: calc(var(--oy) + 439px + var(--shift));
  width: 580px;
  font-size: 15px; line-height: 18px; text-align: center; color: var(--body);
  transition: top 600ms var(--ease);
}
.stage__ask { left: calc(50% - 166px); top: calc(var(--oy) + 531px + var(--shift)); transition: top 600ms var(--ease); }
.stage__prompts { display: flex; gap: 8px; }
.prompts--hero { left: calc(50% - 349px); top: calc(var(--oy) + 599px); transition: opacity 300ms var(--ease); }
.prompts--folders { left: 50%; transform: translateX(-50%); top: calc(var(--oy) + 622px); opacity: 0; }
.stage.is-convo .prompts--hero { opacity: 0 !important; pointer-events: none; }
.stage__code { left: 24px; top: calc(var(--oy) + 648px); }

/* conversation (A thinking / B response / C asking again) */
.convo { left: calc(50% - 280px); top: calc(var(--oy) + 541px); width: 560px; text-align: center; }
/* message parts (.convo__thinking, .px-loader, .convo__response, .convo__links, …) live in base.css: shared with the footer chat */

/* 04 · folders reveal: thumbnail sketches at 30% that hand over to the real folders */
.reveal { left: calc(50% - 640px); top: var(--oy); width: 1280px; height: 0; opacity: 0; pointer-events: none; }
.reveal img { position: absolute; height: auto; max-width: none; }
.reveal span { position: absolute; font-size: 15px; line-height: 18px; color: var(--text); white-space: nowrap; }

/* folders (05) */
.folders { left: calc(50% - 640px); top: var(--oy); width: 1280px; height: 0; opacity: 0; }
.folder { position: absolute; top: 242px; width: 188.62px; height: 203px; display: block; }
.folder:nth-child(1) { left: 144.69px; }
.folder:nth-child(2) { left: 422.19px; }
.folder:nth-child(3) { left: 696.19px; }
.folder:nth-child(4) { left: 970.19px; }
.folder__stack { position: absolute; inset: 0; transition: transform 300ms var(--ease); }
.folder__card {
  position: absolute; width: 167px; height: 167px;
  border-radius: 42px; overflow: hidden;
  transform-origin: 0 0;
}
.folder__card--back { left: 21.62px; top: 0; background: #d4d4d4; }
.folder__card--mid { left: 10.38px; top: 12.06px; background: #e6e6e6; transform: rotate(-4deg); }
.folder__card--front { left: 0; top: 24.87px; background: #fff; transform: rotate(-8deg); box-shadow: inset 0 0 0 1px #e4e4e4; }
.folder__card picture, .folder__card img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the two showcase pieces behind the front cover sit under a white veil (mid 12%, back 24%), so the front leads;
   the veil lifts when the folder fans out on hover / focus */
.folder__card--mid::after, .folder__card--back::after { content: ''; position: absolute; inset: 0; background: #fff; pointer-events: none; transition: opacity 200ms var(--ease); }
.folder__card--mid::after { opacity: 0.12; }
.folder__card--back::after { opacity: 0.24; }
.folder:hover .folder__card--mid::after, .folder:hover .folder__card--back::after,
.folder:focus-visible .folder__card--mid::after, .folder:focus-visible .folder__card--back::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .folder:hover .folder__stack, .folder:focus-visible .folder__stack, .folder:hover .folder__card, .folder:focus-visible .folder__card { transform: none; }
  .folder:hover .folder__card--mid, .folder:focus-visible .folder__card--mid { transform: rotate(-4deg); }
  .folder:hover .folder__card--front, .folder:focus-visible .folder__card--front { transform: rotate(-8deg); }
  .folder:hover .folder__card--mid::after, .folder:focus-visible .folder__card--mid::after { opacity: 0.12; }
  .folder:hover .folder__card--back::after, .folder:focus-visible .folder__card--back::after { opacity: 0.24; }
}
.folder__card--front::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px #e4e4e4; pointer-events: none; }
.folder__label { position: absolute; left: 0; right: 0; top: 185px; text-align: center; font-size: 15px; line-height: 18px; color: var(--text); white-space: nowrap; }
.folder:nth-child(4) .folder__label { left: 21.62px; } /* matches the Figma frame, where this label sits 10.8px right of centre */
.folder:hover .folder__stack, .folder:focus-visible .folder__stack { transform: translateY(-8px); }
.folder:hover .folder__card--mid, .folder:focus-visible .folder__card--mid { transform: rotate(-5deg); }
.folder:hover .folder__card--front, .folder:focus-visible .folder__card--front { transform: rotate(-12deg); }
.folder__card { transition: transform 300ms var(--ease); }

/* ------------------------------------------------------------------
   Work · sticky split
   ------------------------------------------------------------------ */
.work { padding-bottom: 140px; }
.work__head { padding-top: 92px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.work__title { font-size: 36px; line-height: 0.96; color: #000; height: 35px; margin-bottom: -1px; }
.work__lede { width: 580px; max-width: calc(100% - 48px); font-size: 15px; line-height: 18px; color: var(--body); }
.work__split {
  display: grid; grid-template-columns: 349px 697px; justify-content: space-between;
  width: min(1120px, calc(100% - 160px)); margin: 87px auto 0;
}
.work__aside { position: relative; }
.work__col { position: sticky; top: calc(calc(50 * var(--vh)) - 260px); height: 551px; }
.work__case { position: absolute; left: 0; top: 0; width: 349px; height: 409px; opacity: 0; visibility: hidden; transition: opacity 250ms var(--ease), visibility 0s 250ms; }
.work__case.is-active { opacity: 1; visibility: visible; transition: opacity 250ms var(--ease); }
.work__case.is-active .work__body { animation: case-in 480ms var(--ease) both; }
@keyframes case-in { from { transform: translateY(12px); opacity: 0; } }
.work__tags { display: flex; gap: 18px; }
.work__tags li { padding: 5px 4px 3px; border-radius: 4px; background: var(--surface); font-size: 14px; line-height: 17px; color: #000; }
.work__body { position: absolute; left: 0; top: 201px; width: 349px; display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
.work__name { font-family: 'Inter', var(--sans); font-weight: 600; font-size: 30px; line-height: 36px; letter-spacing: -0.03em; color: #212833; }
.work__desc { height: 100px; font-size: 16px; line-height: 1.5; color: #212833; }
.work__index { position: absolute; left: 0; top: 473px; display: flex; flex-direction: column; gap: 12px; }
.work__index button { display: flex; align-items: center; gap: 16px; font-size: 15px; line-height: 18px; color: rgba(18, 18, 18, 0.35); transition: color 200ms; }
.work__index button span { font-size: 13px; line-height: 16px; color: rgba(18, 18, 18, 0.3); transition: color 200ms; }
.work__index button[aria-current] { color: var(--text); font-weight: 500; }
.work__index button[aria-current] span { color: var(--text); font-weight: 400; }
.work__index button:hover { color: var(--text); }
.work__covers { display: flex; flex-direction: column; gap: 64px; }
.cover {
  position: relative; display: block;
  width: 697px; height: 439px;
  border-radius: 36px; overflow: hidden;
  background: var(--surface);
  isolation: isolate;
}
.cover--white { background: #fff; }
.cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.cover:hover img { transform: scale(1.02); }
.cover__play { position: absolute; left: 606px; top: 15px; }

/* ------------------------------------------------------------------
   06 · My Taste teaser
   ------------------------------------------------------------------ */
.taste-teaser { position: relative; height: 720px; width: 1280px; max-width: 100%; margin: 0 auto; }
.taste-teaser__photo { position: absolute; left: calc(50% - 158px); top: 214px; width: 316.14px; height: 292px; margin: 0; }
.taste-teaser__photo img { width: 100%; height: 100%; border-radius: 36px; object-fit: cover; }
.caption-pill {
  position: absolute;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.58);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  font-size: 14px; line-height: 17px; color: #fff; white-space: nowrap;
  width: max-content;
}
.caption-pill img { width: 20px; height: 19px; }
.taste-teaser__photo .caption-pill { left: 158px; top: -16px; }
.taste-teaser__row { position: absolute; left: 0; right: 0; top: 584px; }
.taste-teaser__title { position: absolute; left: 71px; top: 12px; display: flex; align-items: center; }
.taste-teaser__title img { width: 56.85px; height: 35.76px; margin-top: 6px; }
.taste-teaser__title span { margin-left: 8.15px; font-size: 48px; line-height: 0.96; font-weight: 500; font-style: italic; letter-spacing: -0.01em; color: #000; }
.taste-teaser__aside { position: absolute; left: 853px; top: 0; width: 356px; }
.taste-teaser__aside p { margin-left: 7px; font-size: 16px; line-height: 1.5; color: #212833; }
.taste-teaser__aside .abtn { margin-top: 10px; }

/* ------------------------------------------------------------------
   07 · Side quests
   ------------------------------------------------------------------ */
.quests { position: relative; height: 812px;   /* photos end at y812; the 174 gap to the footer is the footer's margin */ width: 1280px; max-width: 100%; margin: 0 auto; }
.quests__collage img {
  position: absolute; left: var(--x); top: var(--y);
  border-radius: 24.67px; object-fit: cover;
  transform: translateY(calc(var(--float, 0px) + var(--lift, 0px)));
  transition: transform 360ms var(--ease);
}
.quests__collage img:hover { --lift: -8px; z-index: 2; }
.quests__center { position: absolute; left: calc(50% - 115px); top: 366px; width: 230px; display: flex; flex-direction: column; align-items: center; }
.quests__title { width: 230px; font-size: 48px; line-height: 1.04; text-align: center; color: var(--ink-soft); }
.quests__btn { margin-top: 16px; }
/* Footer gap: 174 at 1280 (Figma 812 → 986), fluid down to 80. With the pinned ring the stage already leaves
   --tq-under px below its lowest possible photo (taste-quests.js), so the footer adds only the rest. */
.footer--home { padding-bottom: 16px; margin-top: max(0px, calc(clamp(80px, 13.6vw, 174px) - var(--tq-under, 0px) * var(--tz))); }

/* ------------------------------------------------------------------
   Mobile (390)
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .intro { height: calc(max(calc(100 * var(--svh)), 844px) + 1800px); }   /* stage (≥ the 844 frame) + 1800 of scroll */
  /* at least the 844 Figma frame: the end frame's chips (to 759) always fit, with the frame's 98px to the Work heading;
     on shorter phones they come into view as the stage scrolls away */
  .stage { --oy: 0px; --shift: 0px; min-height: 844px; }
  .stage.is-convo { --shift: 0px; }
  .stage__pattern { left: 0; top: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: none; object-fit: cover; }
  .stage__glow { left: calc(50% - 279px); top: 10px; width: 559px; height: 824px; }
  .stage__arrow { left: calc(50% - 195px); top: 0; }
  .stage__blocks--m { left: calc(50% - 67px); top: 560px; width: 133.71px; height: 117px; }
  .stage__blocks--m .pcm__still { left: -20px; top: 17px; width: 174px; height: 100px; }
  .stage__title { left: 24px; right: 24px; width: auto; top: 230px; font-size: 40px; line-height: 44px; }
  .stage__intro { left: 24px; right: 24px; width: auto; top: 334px; line-height: 22px; }
  .stage__ask { left: calc(50% - 164px); top: 416px; }
  .stage__ask .ask__input { line-height: 22px; }
  .prompts--hero, .prompts--folders { left: 16px; right: 16px; flex-wrap: wrap; justify-content: center; }
  .prompts--hero { top: 474px; }
  .prompts--folders { top: 673px; transform: none; }
  .stage__prompts .chip { font-size: 14px; line-height: 17px; padding: 12px 18px 10px; min-width: var(--wm, 0); }
  .stage__code { left: 16px; top: 774px; bottom: auto; height: 41px; padding-top: 13px; padding-bottom: 11px; font-size: 14px; line-height: 17px; }
  .convo { left: 30px; right: 30px; width: auto; top: 486px; }

  .folders { left: 0; top: 0; width: 100%; }
  .folder { width: 149.39px; height: 162.52px; top: 214px; }
  .folder:nth-child(1) { left: calc(50% - 163px); }
  .folder:nth-child(2) { left: calc(50% + 14px); }
  .folder:nth-child(3) { left: calc(50% - 163px); top: 407px; }
  .folder:nth-child(4) { left: calc(50% + 14px); top: 407px; }
  .folder__stack { transform-origin: 0 0; transform: scale(0.792); width: 188.62px; height: 203px; }
  .folder:hover .folder__stack, .folder:focus-visible .folder__stack { transform: scale(0.792) translateY(-8px); }
  .folder__label { top: 146.52px; font-size: 12px; line-height: 16px; }

  .work { padding-bottom: 88px; }
  .work__head { padding-top: 13px; gap: 11px; padding-inline: 24px; }
  .work__title { font-size: 32px; line-height: 36px; height: 36px; margin-bottom: 0; }
  .work__lede { width: 100%; max-width: 342px; line-height: 22px; }

  .m-work { position: relative; padding: 48px 24px 0; }
  .m-work__pill {
    position: sticky; top: 76px; z-index: 5;
    display: inline-flex; align-items: center; gap: 10px;
    height: 32px; padding: 8px 14px;
    border-radius: 999px; background: var(--surface);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    font-size: 12px; color: rgba(18, 18, 18, 0.5);
  }
  .m-work__pill b { font-size: 13px; font-weight: 500; color: var(--text); }
  .m-case { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 20px; }
  .m-case + .m-case { margin-top: 64px; }
  .m-case__media { position: relative; width: 100%; aspect-ratio: 342 / 215; border-radius: 20px; overflow: hidden; background: var(--surface); }
  .m-case__media--white { background: #fff; }
  .m-case__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 17.66px; }
  .m-case__media .cover__play { left: auto; right: 11px; top: 7.36px; transform-origin: top right; transform: scale(0.4907); }
  .m-case__tags { display: flex; gap: 8px; }
  .m-case__tags li { padding: 7px 14px 5px; border-radius: 8px; background: var(--surface); font-size: 14px; line-height: 17px; color: var(--text); }
  .m-case__name { font-size: 22px; font-weight: 500; line-height: 27px; color: var(--text); }
  .m-case__desc { position: relative; top: 1px; font-size: 14px; line-height: 17px; color: rgba(18, 18, 18, 0.6); }

  .taste-teaser { height: 844px; width: 100%; }
  .taste-teaser__photo { left: calc(50% - 138.2px); top: 322px; width: 276px; height: 257px; }
  .taste-teaser__photo img { border-radius: 0; object-fit: contain; }
  .taste-teaser__photo .caption-pill { left: -2.8px; top: 271.95px; padding: 7px 6px 5px; line-height: 21px; }
  .taste-teaser__row { top: 136px; }
  .taste-teaser__title { left: calc(50% - 77px); top: 0; }
  .taste-teaser__title img { width: 41.33px; height: 26px; margin: 7px 10px 0 0; }
  .taste-teaser__title span { margin-left: 0; font-family: var(--serif); font-size: 32px; line-height: 36px; }
  .taste-teaser__aside { left: calc(50% - 140px); top: 48px; width: 280px; display: contents; }
  .taste-teaser__aside p { position: absolute; left: calc(50% - 140px); top: 49px; width: 280px; margin: 0; text-align: center; font-size: 14px; line-height: 21px; color: rgba(18, 18, 18, 0.6); }
  .taste-teaser__aside .abtn { position: absolute; left: 50%; translate: -50% 0; top: 528.95px; margin: 0; }

  .quests { height: 738px; width: 100%; }
  .quests__center { left: 0; right: 0; width: auto; top: 136px; }
  .quests__title { width: 300px; font-size: 32px; line-height: 36px; }
  .quests__btn { position: absolute; left: 50%; translate: -50% 0; top: 479px; margin: 0; }
  .footer--home { padding-bottom: 0; margin-top: 0; }   /* the 390 frame has the 80 gap inside .quests (658 → 738) */
}

/* 06 → 07 on phones (home.js): the two frames share one pinned stage (738 = the Eyes off the screen frame), My Taste
   on top of it; the extra wrapper height is the scroll that drives the hold and the morph. Without .motion, or on
   tablet / desktop, the wrapper does nothing. */
.mq, .mq__stage { display: contents; }
@media (max-width: 767px) {
  .motion .mq { display: block; position: relative; height: calc(738px + 120 * var(--vh)); }
  .motion .mq__stage { display: block; position: sticky; top: 0; height: 738px; overflow: hidden; }
  .motion .mq .taste-teaser, .motion .mq .quests { position: absolute; left: 0; top: 0; }
  .motion .mq .quests { z-index: 1; }
  .mq.is-morph .carousel__card { transition: none; }
  .mq.is-morph .carousel, .mq.is-morph .taste-teaser { pointer-events: none; }
  /* act 1 on phones (home.js): the photo prints in through a stepped pixel mask with a lime print head, and two ghost
     photos (the carousel's neighbours) peek out behind it, as on desktop */
  .motion .mq .taste-teaser__photo img.mob-only { position: relative; z-index: 1; transform-origin: 50% 50%; will-change: transform, clip-path; }
  .mq .tt-lime { position: absolute; left: 0; top: 0; width: 100%; height: 257px; z-index: 2; background: #c4fe47; pointer-events: none; transform-origin: 50% 50%; }
  .mq .tt-ghost { position: absolute; left: 50%; top: 128.5px; width: 254px; height: 234px; margin: -117px 0 0 -127px; border-radius: 30px; overflow: hidden; opacity: 0; pointer-events: none; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14); background: #d9d9d9; }
  .mq .tt-ghost img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; }
}

/* Mobile side-quests carousel (Active=1…5) */
.carousel { position: absolute; left: 0; right: 0; top: 64px; height: 391px; overflow: hidden; touch-action: pan-y; }
.carousel__deck { position: absolute; left: calc(50% - 195px); top: 0; width: 390px; height: 300px; }
.carousel__card {
  position: absolute; left: 63px; top: 26px; width: 264px; height: 244px; margin: 0;
  border-radius: 30px; overflow: hidden; background: #d9d9d9;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
  transform-origin: 0 0;
  transition: transform 420ms var(--ease), opacity 420ms var(--ease), border-radius 420ms var(--ease);
}
.carousel__card img { width: 100%; height: 100%; object-fit: cover; }
.carousel__caption { left: calc(50% - 141px); top: 307px; padding: 7px 6px 5px; line-height: 21px; }
.carousel__hint { position: absolute; left: 0; right: 0; top: 354px; text-align: center; font-size: 13px; line-height: 19px; color: rgba(18, 18, 18, 0.45); }
.carousel__dots { position: absolute; left: 50%; translate: -50% 0; top: 385px; display: flex; gap: 6px; }
.carousel__dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(18, 18, 18, 0.18); transition: width 300ms var(--ease), background-color 300ms; }
.carousel__dots i.is-on { width: 16px; background: var(--text); }

/* ------------------------------------------------------------------
   06 → 07 · pinned sequence (desktop ≥1024px with JS; taste-quests.js)
   ------------------------------------------------------------------ */
.tq { display: none; }
@media (min-width: 1024px) {
  .js .tq { display: block; position: relative; height: calc(323 * var(--vh)); }   /* act 1 starts before the pin (taste-quests.js) */
  .js .tq.tq--static { height: max(calc(100 * var(--vh)), 900px); }
  .js .work { padding-bottom: 40px; }   /* the pinned stage's own top half is the rest of the gap */
  .js .taste-teaser, .js .quests { display: none; }
}
.tq__stage { position: sticky; top: 0; height: calc(100 * var(--vh)); min-height: 640px; overflow: hidden; background: #fff; }
.tq--static .tq__stage { height: 100%; }
.tq__cards { position: absolute; inset: 0; }
.tq__card {
  position: absolute; left: 0; top: 0; margin: 0;
  border-radius: 26px; overflow: hidden; background: #ececec;
  transform-origin: 50% 50%; will-change: transform, opacity, filter;
  outline: none; cursor: default;
}
.tq__card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.tq__card:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--text); }
.tq__card--hero { border-radius: 36px; background: transparent; }
.tq__card--hero svg { display: block; width: 100%; height: 100%; }

/* act 2 · My Taste CTA (Figma 1238:19881, bottom row) */
.tq__cta { position: absolute; left: 0; right: 0; bottom: 0; height: 136px; z-index: 30; pointer-events: none; }
.tq__cta > * { pointer-events: auto; }
.tq__label { position: absolute; left: 71px; top: 12px; width: 300px; height: 46px; }
.tq__label img { position: absolute; left: 0; top: 6px; width: 56.85px; height: 35.76px; max-width: none; }
.tq__label > span { position: absolute; left: 65px; top: 0; width: max-content; display: flex; overflow: hidden; white-space: nowrap; font-size: 48px; line-height: 46px; font-weight: 500; font-style: italic; letter-spacing: -0.01em; color: #000; }
.tq--static .tq__label .l { transform: none; }   /* letters: .hold-letters (base.css) */
.tq__aside { position: absolute; left: calc(100% - 427px); top: 0; width: 356px; }
.tq__aside p { margin-left: 7px; font-size: 16px; line-height: 1.5; color: #212833; }
.tq__aside .abtn { margin-top: 10px; }

/* act 3 · heading in the middle of the ring (Figma 1245:33695) */
.tq__heading { position: absolute; left: 50%; top: 50%; width: 230px; margin: -80px 0 0 -115px; display: flex; flex-direction: column; align-items: center; z-index: 15; }
.tq__title { width: 230px; font-size: 48px; line-height: 1.04; text-align: center; color: var(--ink-soft); }
.tq__btn { margin-top: 16px; }

/* GlassPill — the shared caption (cursor-caption.js), Figma 1245:33690.
   Lives on <html>, outside the zoomed body. Hugs its text: 6px padding, 8px gap, items top-aligned
   (icon 19px, text box 17px, both at y = 6), 31px tall, radius 20 = full pill. */
.glass-pill {
  position: fixed; left: 0; top: 0; z-index: 1000;
  display: flex; align-items: flex-start; gap: 8px; padding: 6px;
  border-radius: 20px; overflow: hidden; isolation: isolate;
  background: rgba(0, 0, 0, 0.58);
  -webkit-backdrop-filter: blur(4px) saturate(140%);
  backdrop-filter: blur(4px) saturate(140%);                       /* 1 · base frost */
  color: #fff; font: 400 14px/17px var(--sans); letter-spacing: 0; white-space: nowrap;
  pointer-events: none; visibility: hidden; transform-origin: 16px 15.5px;
  --lime: 1;
}
.glass-pill::before {                                             /* 2 · light from −45° (top-left), 0.8 */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.32), inset -1px -1px 0 rgba(255, 255, 255, 0.08);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 45%);
  mix-blend-mode: screen;
}
@supports (backdrop-filter: url(#x)) {                            /* 3 + 4 · rim refraction + dispersion (Chromium) */
  .glass-pill { backdrop-filter: url(#glass-refract) blur(4px) saturate(140%); }
}
.glass-pill.is-on { visibility: visible; }
.glass-pill__icon { position: relative; z-index: 2; flex: none; width: 20px; height: 19px; color: #fff; }
.glass-pill__text { position: relative; top: 1px; z-index: 2; display: block; height: 17px; } /* top: Chrome sets 14px text 1px higher than Figma */
.cc__dot { position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: #c4fe47; opacity: var(--lime); }
.cc__line { display: flex; overflow: hidden; height: 17px; }
.cc__line.is-old { position: absolute; left: 0; top: 0; }
.cc__w { display: inline-block; transform: translateY(110%); opacity: 0; transition: transform 260ms var(--ease), opacity 200ms var(--ease); }
.cc__line.is-in .cc__w { transform: none; opacity: 1; }
.cc__line .cc__w.is-out { transform: translateY(110%); opacity: 0; transition-duration: 80ms; }
@media (prefers-reduced-motion: reduce) {
  .glass-pill { transition: opacity 160ms linear; }
  .cc__w { transform: none; transition: none; opacity: 1; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .glass-pill { background: rgba(0, 0, 0, 0.85); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass-pill::before { display: none; }
}