/* Case study v2: same language as the home page.
   Section heads = eyebrow + Fraunces title (like Recommendations).
   Surfaces = 24px radius, 0.5px border, soft grey gradient (like the hero cards and About blocks). */
.cv2{--cv2-line:#717171;--cv2-fg:#222;--cv2-muted:#555;--cv2-card:radial-gradient(120% 120% at 0% 0%,#e2e2e2 0%,#cacaca 100%);
  --cv2-serif:"Fraunces",Georgia,"Times New Roman",serif;--cv2-mono:"Martian Mono",ui-monospace,Menlo,monospace;
  color:var(--cv2-fg)}
.cv2 .cv2-wrap{max-width:1120px;margin:0 auto;display:flex;flex-direction:column;gap:7rem;padding-block:3rem 6rem}
.cv2 p{margin:0}
.cv2-eyebrow{font-family:var(--cv2-mono);font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;opacity:.7;line-height:1.4}
.cv2-title{margin:0;font-family:var(--cv2-serif);font-weight:300;font-size:clamp(1.9rem,3vw,3rem);line-height:1.1;letter-spacing:-.025em;text-wrap:balance;color:var(--cv2-fg)}
.cv2-text{font-family:var(--cv2-mono);font-size:.875rem;line-height:1.75;color:var(--cv2-muted);max-width:62ch}

/* header */
.cv2-hero{display:flex;flex-direction:column;gap:2.5rem}
.cv2-hero__copy{display:flex;flex-direction:column;gap:1rem;max-width:44rem}
.cv2-hero__title{margin:0;font-family:var(--cv2-serif);font-weight:300;font-size:clamp(2.4rem,5vw,4.25rem);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.cv2-hero__stand{font-family:var(--cv2-mono);font-size:1rem;line-height:1.6;color:var(--cv2-muted)}
.cv2-meta{display:flex;gap:1.25rem;flex-wrap:wrap;font-family:var(--cv2-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cv2-muted)}
.cv2-meta span+span::before{content:"";display:inline-block;width:1.25rem;height:1px;background:currentColor;vertical-align:middle;margin-right:1.25rem;opacity:.6}

/* framed images */
.cv2-frame{display:block;border:.5px solid var(--cv2-line);border-radius:24px;background:var(--cv2-card);padding:14px;text-decoration:none;color:inherit}
.cv2-frame img{display:block;width:100%;height:auto;border-radius:12px;background:#0c0c0e}
.cv2-frame--hero{padding:18px}
.cv2-figcap{margin-top:12px;font-family:var(--cv2-mono);font-size:.75rem;color:var(--cv2-muted);display:flex;gap:.75rem;align-items:baseline}
.cv2-figcap b{font-weight:400;letter-spacing:.18em;text-transform:uppercase;font-size:.625rem;color:var(--cv2-fg)}

/* two-column chapter: head on the left, body on the right */
.cv2-chapter{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:2rem 4rem;align-items:start}
.cv2-chapter__head{display:flex;flex-direction:column;gap:.7rem;position:sticky;top:6rem}
.cv2-chapter__body{display:flex;flex-direction:column;gap:1.75rem;min-width:0}

/* before + context pairing */
.cv2-pair{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:1.5rem;align-items:stretch}
.cv2-card{border:.5px solid var(--cv2-line);border-radius:24px;background:var(--cv2-card);padding:2rem 1.75rem;display:flex;flex-direction:column;gap:1rem}
.cv2-card .cv2-title{font-size:clamp(1.5rem,2.2vw,2rem)}

/* evidence images */
.cv2-evidence{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}

/* results tiles */
.cv2-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:1rem}
.cv2-stat{border:.5px solid var(--cv2-line);border-radius:20px;background:var(--cv2-card);padding:1.25rem 1.25rem 1.1rem;display:flex;flex-direction:column;gap:.75rem;min-width:0}
.cv2-stat__label{font-family:var(--cv2-mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cv2-muted)}
.cv2-stat__vals{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.cv2-stat__before{font-family:var(--cv2-mono);font-size:.875rem;color:var(--cv2-muted);text-decoration:line-through;text-decoration-thickness:1px}
.cv2-stat__arrow{font-family:var(--cv2-mono);font-size:.75rem;color:var(--cv2-muted)}
.cv2-stat__after{font-family:var(--cv2-serif);font-weight:300;font-size:2rem;line-height:1;color:#2b4bd8}
.cv2-impact{border-top:.5px solid var(--cv2-line);padding-top:1.5rem}

/* new design grid */
.cv2-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.cv2-grid figure{margin:0;display:flex;flex-direction:column}
.cv2-grid .cv2-frame{aspect-ratio:16/11;overflow:hidden;display:flex}
.cv2-grid .cv2-frame img{height:100%;object-fit:cover;object-position:top}
.cv2-step{font-family:var(--cv2-serif);font-weight:300;font-size:1.25rem;color:#2b4bd8;margin-right:.25rem}

.cv2 .cm-play{margin-top:0}
.cv2 .w-lightbox{cursor:zoom-in}

@media (max-width:991px){
  .cv2 .cv2-wrap{gap:5rem}
  .cv2-chapter{grid-template-columns:1fr}
  .cv2-chapter__head{position:static}
  .cv2-pair{grid-template-columns:1fr}
}
@media (max-width:600px){
  .cv2 .cv2-wrap{gap:4rem;padding-block:1.5rem 4rem}
  .cv2-frame{padding:8px;border-radius:18px}
  .cv2-frame img{border-radius:10px}
  .cv2-evidence,.cv2-grid{grid-template-columns:1fr}
  .cv2-card{padding:1.5rem 1.25rem}
}

/* Blocks: same card as the prototype artifact (eyebrow, serif title, text, play button). */
.cv2-block{border:.5px solid var(--cv2-line);border-radius:24px;background:var(--cv2-card);padding:28px 26px;display:flex;flex-direction:column;gap:14px;min-width:0}
.cv2-block h2{margin:0;font-family:var(--cv2-serif);font-weight:400;font-size:clamp(1.4rem,2vw,1.75rem);line-height:1.15;color:var(--cv2-fg);text-wrap:balance}
.cv2-block .cv2-text{max-width:64ch}
.cv2-col{max-width:820px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.cv2-stack{display:flex;flex-direction:column;gap:20px}
.cv2-sechead{display:flex;flex-direction:column;gap:.7rem;margin-bottom:.5rem}

/* Text blocks sit on the page, no card. */
.cv2 .cv2-block{border:0;background:none;border-radius:0;padding:0}
.cv2 .cv2-block h2{font-weight:300;font-size:clamp(1.6rem,2.4vw,2.25rem);letter-spacing:-.02em}

/* Everything aligns to the left edge of the content column. */
.cv2 .cv2-col{margin:0}
.cv2-stat__note{font-family:var(--cv2-mono);font-size:.6875rem;color:var(--cv2-muted)}
.cv2-grid.cv2-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:767px){.cv2-grid.cv2-grid--3{grid-template-columns:1fr}}
/* Phone screenshots: keep the full portrait screen, no crop. */
.cv2-phones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;max-width:860px}
.cv2-phones .cv2-frame{padding:10px;border-radius:28px}
.cv2-phones .cv2-frame img{border-radius:20px;aspect-ratio:420/909;object-fit:cover;height:auto}
@media (max-width:600px){.cv2-phones{grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}.cv2-phones .cv2-frame{padding:5px;border-radius:16px}.cv2-phones .cv2-frame img{border-radius:12px}}
/* Two images in one frame sit side by side (moved here so pages without case-motion.css get it too). */
.cv2-frame.cv2-frame--duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
@media (max-width:600px){.cv2-frame.cv2-frame--duo{grid-template-columns:1fr}}

.cv2-frame.cv2-frame--sm{max-width:560px}

/* Sources footer: small thumbnails that open in the lightbox */
.cv2-sources{gap:10px;padding-top:4px}
.cv2-sources .cv2-eyebrow{margin:0}
.cv2-srcrow{display:flex;flex-wrap:wrap;gap:12px}
.cv2-src{margin:0;width:132px}
.cv2-src a{display:block;border:.5px solid var(--cv2-line);border-radius:12px;overflow:hidden;background:var(--cv2-card);aspect-ratio:4/3;cursor:zoom-in;transition:transform .15s ease,border-color .15s ease}
.cv2-src a:hover,.cv2-src a:focus-visible{transform:translateY(-2px);border-color:var(--cv2-fg);outline:none}
.cv2-src img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.cv2-src figcaption{margin-top:6px;font-family:var(--cv2-mono);font-size:.625rem;letter-spacing:.06em;color:var(--cv2-muted)}
@media (max-width:479px){.cv2-src{width:calc(50% - 6px)}}
