/* ================================================================
   CASE STUDY TEMPLATE (case-study-*.html)
   Structure modelled on agr.studio case studies: a title block with a
   details list, full-width media (walkthrough video, product overview),
   then two-column rows (label left, content right), a screen gallery,
   an "at a glance" facts row and links to other case studies.
   The division colour comes from --accent on <body>.
   ================================================================ */
.case{ --accent: #00e6ff; }

/* ---------- Title block (black, sits under the transparent nav) ---------- */
.case-head{ background: #000; color: #fff; margin-top: -86px; padding-top: 86px; }
.case-head__inner{ max-width: var(--maxw); margin: 0 auto; padding: 90px var(--gap) 64px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 60px; align-items: end; }
.case-head__bar{ display: flex; align-items: center; gap: 16px; margin-bottom: 28px; font-size: 20px; letter-spacing: -.05em; line-height: 1; text-transform: uppercase; }
.case-head__bar::before{ content: ''; width: 44px; height: 12px; background: var(--accent); }
.case-head__bar b{ font-family: 'Archivo Black', var(--font); font-weight: 400; }
.case-head__bar i{ font-style: normal; font-weight: 100; }
.case-head h1{ font-size: clamp(44px, 6.25vw, 90px); font-weight: 700; letter-spacing: -.04em; line-height: .95; text-transform: uppercase; }
.case-head__intro{ max-width: 520px; margin-top: 24px; font-size: 17px; line-height: 1.5; color: rgba(255,255,255,.8); }
.case-head__cta{ display: inline-flex; align-items: center; gap: 10px; margin-top: 32px; padding: 14px 22px; border: 1px solid var(--accent); font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; transition: background .2s ease, color .2s ease; }
.case-head__cta::before{ content: ''; width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.case-head__cta:hover{ background: var(--accent); color: #000; }
.case-meta{ display: grid; grid-template-columns: 110px minmax(0, 1fr); column-gap: 24px; }
.case-meta dt, .case-meta dd{ padding: 14px 0; border-top: 1px solid rgba(255,255,255,.18); }
.case-meta dt{ font-size: 13px; font-weight: 600; letter-spacing: .06em; line-height: 22px; text-transform: uppercase; color: rgba(255,255,255,.6); }
.case-meta dd{ font-size: 15px; line-height: 22px; }

/* ---------- Floating logo strokes (same shape and triFloat animation as
   the mobile menu background), bleeding off the sides of the black bands ---------- */
.case-head, .case-media--video{ position: relative; overflow: hidden; }
.case-head__inner, .case-media--video .case-media__inner{ position: relative; z-index: 1; }
.case-tri{ position: absolute; z-index: 0; height: auto; overflow: visible; pointer-events: none; animation: triFloat 14s ease-in-out infinite; will-change: translate, scale; }
.case-tri path{ stroke: #fff; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.case-tri path:nth-child(1){ stroke-opacity: .45; }
.case-tri path:nth-child(2){ stroke-opacity: .3; }
.case-tri path:nth-child(3){ stroke-opacity: .18; }
.case-tri--head{ width: 940px; right: -340px; top: -30px; }
.case-tri--left{ width: 820px; left: -430px; top: 40px; animation-delay: -4s; }
.case-tri--right{ width: 820px; right: -430px; bottom: -160px; transform: scaleX(-1); animation-delay: -11s; }

/* ---------- Full-width media ---------- */
.case-media{ background: #000; }
.case-media__inner{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gap) 90px; display: flex; flex-direction: column; gap: 24px; }
/* The player takes each video's real shape (--ratio, set inline from the
   video's size), so there are no letterbox bars. Landscape videos
   are capped at 700px wide and centred; phone recordings sit beside an outline. */
.case-video{ scroll-margin-top: 100px; }
.case-video__player{
  display: block; margin: 0 auto; aspect-ratio: var(--ratio, 16 / 9);
  width: min(100%, 700px, calc((100vh - 140px) * var(--ratio, 16 / 9)));
  background: #000; object-fit: contain;
}
.case-video--portrait{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 72px; align-items: center; }
.case-video--portrait .case-video__player{ margin: 0; width: auto; height: min(calc(100vh - 140px), 780px); }
.case-video__panel{ max-width: 520px; color: #fff; }
.case-video__eyebrow{ font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.case-video__panel h2{ margin-top: 12px; font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; text-transform: uppercase; }
.case-video__panel ol{ margin-top: 28px; padding: 0; list-style: none; counter-reset: ch; }
.case-video__panel li{ counter-increment: ch; display: flex; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.18); font-size: 16px; line-height: 1.4; }
.case-video__panel li::before{ content: counter(ch, decimal-leading-zero); flex: none; width: 24px; font-size: 13px; font-weight: 600; line-height: 22px; color: var(--accent); }
/* Walkthrough band near the end of the page (after How it works) */
.case-media--video .case-media__inner{ padding-top: 90px; }
.case-shot{ display: block; width: 100%; height: auto; border-radius: 10px; }
/* Two renders sharing one hero slot. aspect-ratio pins the grid to the exact
   footprint a single 2532x1424 shot had, so swapping in two images does not
   change the section's height. */
.case-shot--split{ display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 2532 / 1424; overflow: hidden; }
.case-shot--split img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Two-column rows ---------- */
.case-rows{ background: #fff; color: #000; }
.case-rows__inner{ max-width: var(--maxw); margin: 0 auto; padding: 110px var(--gap) 40px; }
.case-row{ display: grid; grid-template-columns: minmax(0, 404fr) minmax(0, 834fr); gap: 40px; padding-bottom: 90px; }
.case-row__label{ font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.case-row__body{ display: flex; flex-direction: column; gap: 20px; }
.case-row__body .case-row__lead{ font-size: 26px; color: #000; font-weight: 500; letter-spacing: -.02em; line-height: 1.4; }
.case-row__body h3{ margin-top: 12px; font-size: 16px; font-weight: 700; letter-spacing: .03em; line-height: 1.2; text-transform: uppercase; }
.case-row__body h3:first-child{ margin-top: 0; }
.case-row__body h3 + p{ margin-top: -8px; }
.case-row__body p, .case-row__body li{ font-size: 16px; line-height: 1.6; color: #222; }
.case-row__body ul{ margin: 0; padding-left: 18px; }
.case-row__body li + li{ margin-top: 6px; }
/* Numbered feature list ("How it works") */
.case-steps{ list-style: none; padding: 0 !important; counter-reset: step; display: grid; grid-template-columns: 1fr 1fr; gap: 36px 40px; }
.case-steps li{ counter-increment: step; margin: 0 !important; padding-top: 16px; border-top: 1px solid #ddd; }
.case-steps li::before{ content: counter(step, decimal-leading-zero); display: block; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: #888; }
.case-steps h3{ margin: 0 0 8px !important; }

/* ---------- Gallery (two images side by side) ---------- */
.case-gallery{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-bottom: 110px; }
/* Direct child only. The Promptive gallery nests a whole mockup, whose own
   images this rule would otherwise stretch to full width. */
.case-gallery > img{ display: block; width: 100%; height: auto; border-radius: 10px; }
.case-gallery__stack{ display: flex; flex-direction: column; gap: 24px; }
/* The stack's images are not direct children of .case-gallery, so they need
   their own sizing or they fall back to their intrinsic widths and the
   column's edges stop lining up. */
.case-gallery__stack img{ display: block; width: 100%; height: auto; border-radius: 10px; object-fit: cover; }
/* Side by side, the stack shares the grid row's height with the mockup, which
   is taller. Letting the three images flex to fill makes the column end level
   with the mockup at any width, instead of stopping short. Only above the
   breakpoint - once the gallery is a single column the row has no imposed
   height and flex-basis 0 would collapse them. */
@media (min-width: 641px){
  .case-gallery__stack img{ flex: 1 1 0; min-height: 0; }
}
.case-mock{ padding: 32px; border-radius: 10px; background: #f2f2f4; }

/* ---------- Facts row ---------- */
.case-facts{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 40px 0 110px; border-top: 1px solid #ddd; }
.case-facts__label{ grid-column: 1 / -1; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #888; }
.case-facts b{ display: block; font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1; text-transform: uppercase; }
.case-facts span{ display: block; margin-top: 10px; font-size: 16px; line-height: 1.4; color: #333; }

.case-rows__inner--facts{ padding-top: 90px; padding-bottom: 0; }
.case-rows__inner--facts .case-facts{ border-top: 0; padding-top: 0; }

/* Visible placeholder copy, so reviewers can't miss what still needs content */
.case-placeholder{ display: inline-block; padding: 2px 8px; border: 1px dashed currentColor; opacity: .7; font-style: italic; }

/* ---------- Continue exploring ---------- */
.case-next{ background: #fff; color: #000; }
.case-next__inner{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gap) 110px; }
.case-next__head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.case-next__eyebrow{ font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #888; }
.case-next__head h2{ margin-top: 10px; font-size: 28px; font-weight: 700; letter-spacing: -.02em; text-transform: uppercase; }
.case-next__all{ font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.case-next__all:hover{ opacity: .6; }
.case-next__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.case-card{ display: block; }
.case-card__img{ overflow: hidden; border-radius: 10px; aspect-ratio: 669 / 474; }
.case-card__img img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.case-card:hover .case-card__img img{ transform: scale(1.03); }
.case-card__meta{ margin-top: 16px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #888; }
.case-card h3{ margin-top: 6px; font-size: 25px; font-weight: 700; letter-spacing: -.02em; text-transform: uppercase; }

@media (max-width: 1000px){
  .case-head__inner{ grid-template-columns: 1fr; gap: 40px; padding: 48px var(--gap) 40px; }
  .case-media__inner{ padding-bottom: 60px; }
  .case-media--video .case-media__inner{ padding-top: 60px; }
  .case-rows__inner--facts{ padding-top: 60px; }
  .case-rows__inner{ padding-top: 60px; }
  .case-row{ grid-template-columns: 1fr; gap: 16px; padding-bottom: 56px; }
  .case-row__label{ font-size: 22px; }
  .case-row__body .case-row__lead{ font-size: 21px; }
  .case-gallery{ padding-bottom: 60px; }
  .case-facts{ padding-bottom: 60px; }
  .case-next__inner{ padding-bottom: 60px; }
}
@media (max-width: 640px){
  .case-tri--head{ width: 560px; right: -300px; top: 20px; }
  .case-tri--left, .case-tri--right{ width: 480px; }
  .case-tri--left{ left: -300px; }
  .case-tri--right{ right: -300px; }
  .case-steps, .case-gallery, .case-next__grid{ grid-template-columns: 1fr; }
  .case-video--portrait{ grid-template-columns: 1fr; gap: 32px; }
  .case-video--portrait .case-video__player{ margin: 0 auto; height: auto; width: min(100%, calc(80vh * var(--ratio))); }
  .case-facts{ grid-template-columns: 1fr; gap: 24px; }
  .case-meta{ grid-template-columns: 96px minmax(0, 1fr); }
  .case-mock{ padding: 16px; }
  .case-next__head{ flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce){
  .case-card__img img{ transition: none; }
  .case-tri{ animation: none; }
}


/* ================================================================
   Promptive case-study mockup (Figma 78:2220 -> 78:2221 + 78:2248)
   Rebuilt from the Figma layers instead of the flattened
   case-promptive-mockups.jpg, so the question bubble, the recipient
   chips and every control are real elements.
   The whole thing is authored at Figma's 608px design width and
   scales with the column: 1 design px = 0.16447368cqw, so every value
   below is <figma px> x that factor.
   ================================================================ */
.case-mock{ container-type: inline-size; }
.cs-mock{ position: relative; width: 100%; aspect-ratio: 608 / 1578.897; font-family: var(--font-alt); }
.cs-mock *{ box-sizing: border-box; }

/* ---- invite card ---- */
.cs-invite{
  position: absolute; left: 3.4539cqw; top: 3.6184cqw; width: 93.0921cqw; height: 106.0686cqw;
  background: #1b1d21; border: 0.1645cqw solid rgba(0,0,0,.1); border-radius: 2.6316cqw; overflow: hidden;
}
.cs-mock .cs-invite__glow{ position: absolute; max-width: none; }
.cs-mock .cs-invite__glow--a{ left: -52.2122cqw; top: -26.3997cqw; width: 151.4862cqw; height: 109.0306cqw; }
.cs-mock .cs-invite__glow--b{ left: -13.7056cqw; top: -3.8322cqw; width: 175.5459cqw; height: 63.4331cqw; transform: rotate(180deg) scaleY(-1); }
.cs-invite__sheet{ position: absolute; left: -0.4457cqw; top: 52.1645cqw; width: 93.3742cqw; height: 53.7395cqw; background: #fff; }
.cs-invite__body{
  position: absolute; left: 8.2977cqw; top: 4.6316cqw; width: 76.3072cqw;
  display: flex; flex-direction: column; align-items: center; gap: 2.2567cqw;
}
.cs-invite__title{ width: 67.8444cqw; font-size: 5.6419cqw; line-height: 6.3472cqw; letter-spacing: -0.1128cqw; font-weight: 600; color: #fff; text-align: center; }
.cs-invite__lead{ width: 67.8444cqw; font-size: 2.2567cqw; line-height: 1.36; letter-spacing: -0.1128cqw; font-weight: 400; color: #fff; text-align: center; }
.cs-invite__bubble{
  width: 100%; height: 24.2604cqw; padding: 3.3852cqw; border-radius: 4.2314cqw;
  background: #1b1d21; border: 0.1411cqw solid #fff;
  filter: drop-shadow(0 0.5641cqw 2.8211cqw rgba(0,0,0,.25));
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
}
.cs-invite__bubble img{ width: 4.5135cqw; height: 4.5135cqw; display: block; }
.cs-invite__bubble p{ font-size: 2.5388cqw; line-height: 1.5; letter-spacing: -0.0838cqw; font-weight: 700; color: #fff; }
.cs-invite__cta{
  width: 100%; padding: 2.2567cqw 3.3852cqw; border-radius: 14.1049cqw;
  background: #6500ff; border: 0.4232cqw solid rgba(255,255,255,.1);
  filter: drop-shadow(0 0.5641cqw 2.1158cqw rgba(93,46,241,.4));
  display: flex; align-items: center; justify-content: center;
}
.cs-invite__cta img{ width: 2.2567cqw; height: 2.2567cqw; display: block; }
.cs-invite__cta span{ padding: 0 1.3299cqw; font-size: 1.9747cqw; line-height: 1.5; letter-spacing: -0.1058cqw; font-weight: 600; color: #fff; white-space: nowrap; }
.cs-invite__note{ width: 67.8444cqw; font-size: 1.9747cqw; line-height: 1.36; letter-spacing: -0.1128cqw; color: #000; text-align: center; white-space: pre-wrap; }
.cs-invite__rule{ width: 87.8734cqw; height: 0; border-top: 0.1411cqw solid rgba(0,0,0,.1); }
.cs-invite__rule--full{ width: 100%; }
.cs-invite__brand{ display: flex; align-items: center; gap: 0.3944cqw; }
.cs-invite__brand img{ width: 3.0563cqw; height: 3.4260cqw; display: block; }
.cs-invite__brand span{ font-size: 3.0526cqw; color: #1b1d21; white-space: nowrap; }
.cs-invite__legal{ width: 87.8734cqw; font-size: 1.4105cqw; line-height: 1.36; letter-spacing: -0.1128cqw; color: #000; opacity: .5; }
.cs-invite__legal p + p{ margin-top: 1.36em; }

/* ---- form panel ---- */
.cs-form{
  position: absolute; left: 3.2895cqw; top: 111.3317cqw; width: 93.4211cqw;
  border: 0.1645cqw solid rgba(0,0,0,.1); border-radius: 2.6316cqw; overflow: hidden;
  display: flex; flex-direction: column; gap: 2.6316cqw;
}
.cs-panel{
  width: 100%; padding: 3.9474cqw; border-radius: 1.3158cqw; background: #fff;
  border: 0.1645cqw solid rgba(255,255,255,.3);
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.3158cqw;
}
.cs-panel--center{ align-items: center; justify-content: center; }
.cs-panel__head{ width: 100%; display: flex; align-items: flex-start; justify-content: space-between; }
.cs-panel__title{ font-size: 2.9605cqw; line-height: 1.5; letter-spacing: -0.0977cqw; font-weight: 600; color: #1b1d21; white-space: nowrap; }
.cs-panel__desc{ width: 100%; font-size: 2.3026cqw; line-height: 1.35; letter-spacing: -0.0760cqw; color: #1b1d21; }
.cs-rule{ width: 100%; height: 0; border-top: 0.1645cqw solid rgba(0,0,0,.1); }
.cs-group{ width: 100%; display: flex; flex-direction: column; gap: 0.6579cqw; }
.cs-label{ width: 100%; font-size: 2.3026cqw; line-height: 1.5; letter-spacing: -0.1234cqw; font-weight: 600; color: #1b1d21; }
.cs-field{
  height: 6.9079cqw; padding: 2.6316cqw; border: 0.1645cqw solid rgba(0,0,0,.1); border-radius: 1.3158cqw;
  display: flex; align-items: center; gap: 0.6579cqw;
  font-size: 2.3026cqw; line-height: 1.5; letter-spacing: -0.1151cqw; color: #86848d; white-space: nowrap;
}
.cs-field--block{ width: 100%; }
.cs-field--select{ width: 32.8947cqw; justify-content: space-between; color: #1b1d21; }
.cs-field--tall{ width: 100%; height: 13.8158cqw; }
/* Figma sizes this text node at 442px; Inter needs 445 for the same string,
   so it is given the field's full inner width to keep the design's one line. */
.cs-field--tall em{ width: 100%; white-space: normal; }
.cs-field em{ font-style: italic; font-size: 2.6316cqw; line-height: 1.5; }
.cs-field img{ width: 2.3026cqw; height: 2.3026cqw; display: block; flex: none; }
.cs-field--date{ gap: 1.3158cqw; }
.cs-field--date img{ width: 2.6316cqw; height: 2.6316cqw; }
.cs-checks{ width: 100%; display: flex; flex-direction: column; gap: 1.3158cqw; list-style: none; margin: 0; padding: 0; }
.cs-checks li{ width: 100%; display: flex; align-items: center; gap: 1.3158cqw; font-size: 2.3026cqw; line-height: 1.35; letter-spacing: -0.0760cqw; color: #1b1d21; white-space: nowrap; }
.cs-mock .cs-box{ width: 2.6316cqw; height: 2.6316cqw; flex: none; border: 0.1645cqw solid rgba(0,0,0,.1); border-radius: 0.6579cqw; display: block; }
.cs-mock .cs-box--on{ border: 0; }
.cs-chip{ padding: 0.6579cqw 1.3158cqw; border-radius: 0.6579cqw; background: #e5e5e5; font-size: 1.6447cqw; line-height: 1.35; letter-spacing: -0.0543cqw; font-weight: 500; color: #1b1d21; }
.cs-row{ width: 100%; display: flex; align-items: center; gap: 1.3158cqw; }
.cs-toggle{ width: 5.9211cqw; padding: 0.3289cqw; border-radius: 0.6579cqw; background: #5d2ef1; display: flex; align-items: center; justify-content: flex-end; flex: none; }
.cs-toggle i{ width: 2.6316cqw; height: 2.6316cqw; border-radius: 0.6579cqw; background: #fff; border: 0.1645cqw solid rgba(0,0,0,.1); display: block; }
.cs-row__label{ font-size: 2.3026cqw; line-height: 1.35; letter-spacing: -0.0760cqw; color: #1b1d21; white-space: nowrap; }
.cs-row img.cs-ic{ width: 2.3026cqw; height: 2.3026cqw; display: block; flex: none; }

/* Closing CTA band reuses .media-cta from style.css (as on the blog) */
.case .media-cta__copy{ max-width: 470px; }

/* ---------- Feedback round 2: YouTube episodes and CTA button ---------- */
.case-yt{ position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.case-yt iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.case-episodes__title{ margin-bottom: 24px; font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; letter-spacing: -.02em; }
.case-meta dd a{ text-decoration: underline; text-underline-offset: 3px; }
.case .media-cta__scrim{ background: rgba(0,0,0,.6); }