/* Shared styles for case study pages */
  /* ---------- Case study layout ---------- */
  :root { --col: 880px; }

  .wrap { max-width: var(--col); margin-inline: auto; padding: 0 var(--gutter); }
  .wide { max-width: var(--max-width); margin-inline: auto; padding: 0 var(--gutter); }
  section { margin-bottom: var(--section-gap); }

  /* Back pill (reuses the floating nav look) */
  .nav.back a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }

  /* Hero */
  .cs-hero {
    position: relative;
    overflow: hidden;
    background: var(--hero-bg);
    padding: clamp(140px, 20vh, 190px) var(--gutter) 90px;
    margin-bottom: 40px;
  }
  .cs-hero .inner { position: relative; max-width: var(--col); margin: 0 auto; }
  .cs-hero h1 {
    font-size: var(--text-h1);
    font-weight: var(--weight-heading);
    line-height: 1;
    letter-spacing: -0.05em;
    margin: 0 0 18px;
  }
  .cs-hero .sub {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 400;
    color: var(--ink-soft);
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0 0 28px;
    max-width: 460px;
  }
  .cs-hero .tags span { background: rgba(255, 255, 255, 0.7); font-size: 0.85rem; padding: 7px 14px; }

  /* Challenge / role box */
  .brief {
    background: var(--sand);
    border-radius: var(--radius-md);
    padding: clamp(28px, 5vw, 48px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 32px 56px;
  }
  .brief p:not(.eyebrow) { margin: 0; line-height: 1.6; color: var(--ink-soft); }

  /* Body text */
  .lead-text { font-size: var(--text-lead); line-height: 1.55; margin: 0; }
  .body-text { font-size: var(--text-body); line-height: 1.7; color: var(--ink-soft); margin: 0 0 16px; }
  .body-text b { color: var(--ink); font-weight: 600; }
  h2.cs-title {
    font-size: var(--text-h2);
    font-weight: var(--weight-heading);
    letter-spacing: var(--tracking-heading);
    line-height: 1.05;
    margin: 0 0 28px;
  }

  /* KPI + stat cards */
  .stats { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
  .stat { background: var(--sand); border-radius: 16px; padding: 24px; }
  .stat .label { font-size: 0.85rem; color: var(--ink-soft); margin: 0 0 18px; }
  .stat .num { font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 500; letter-spacing: -0.05em; line-height: 1; margin: 0 0 10px; }
  .stat .desc { font-size: 0.85rem; color: var(--ink-soft); margin: 0; line-height: 1.4; }

  /* Screen galleries (horizontal scroll) */
  .gallery {
    background: var(--sand);
    border-radius: 24px;
    padding: 28px 0 32px;
    position: relative;
  }
  .gallery-cap { text-align: center; font-size: 0.85rem; color: var(--ink-soft); margin: 0 auto 4px; padding: 0 var(--gutter); max-width: 620px; line-height: 1.5; }
  .gallery-hint { text-align: center; font-size: 0.75rem; color: #a7a3ae; margin: 0 0 22px; }
  .track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px clamp(20px, 4vw, 40px) 12px;
    scrollbar-width: none;
  }
  .track::-webkit-scrollbar { display: none; }
  .shot { flex: 0 0 auto; scroll-snap-align: start; cursor: zoom-in; margin: 0; }
  .shot figcaption { margin-top: 12px; font-size: 0.85rem; color: var(--ink-soft); }
  .shot figcaption em { font-family: var(--serif); color: var(--accent); margin-right: 6px; }
  .arrow {
    position: absolute;
    right: 18px; top: 50%;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 0;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    display: grid; place-items: center;
    cursor: pointer;
    color: var(--ink);
  }
  .arrow.prev { right: auto; left: 18px; }
  .arrow[hidden] { display: none; }

  /* Placeholder screens — swap each for <img src="..."> */
  .screen {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(40, 30, 90, 0.08);
    overflow: hidden;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 14px;
    transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
  }
  .shot:hover .screen { transform: translateY(-6px); }
  .screen.desk { width: clamp(260px, 34vw, 380px); aspect-ratio: 16 / 10; }
  .screen.phone { width: clamp(170px, 20vw, 210px); aspect-ratio: 9 / 19.5; border-radius: 22px; padding: 28px 12px 12px; }
  .screen span { display: block; height: 8px; border-radius: 5px; background: #eceaf1; }
  .screen span.s { width: 55%; }
  .screen span.h { height: 12px; width: 40%; background: var(--ink); opacity: 0.85; }
  .screen .img { border-radius: 10px; aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--peach), var(--lilac)); }
  .screen.phone .img { aspect-ratio: 3 / 4; }
  .screen .cta { height: 28px; border-radius: 999px; background: var(--accent); margin-top: auto; }
  .screen .sheet { margin-top: 6px; border-radius: 14px; background: #f5f4fa; padding: 10px; display: grid; gap: 6px; }

  /* Numbered problem cards */
  .points { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); margin-bottom: 28px; }
  .point { background: var(--sand); border-radius: 18px; padding: 28px; }
  .point .n { font-family: var(--serif); font-style: italic; color: var(--accent); font-size: 0.95rem; }
  .point h3 { font-size: var(--text-h3); font-weight: var(--weight-heading); letter-spacing: -0.03em; margin: 14px 0 8px; }
  .point p { margin: 0; color: var(--ink-soft); line-height: 1.55; font-size: 0.95rem; }

  /* Big statement */
  .statement {
    font-size: clamp(2.2rem, 6.5vw, 4.6rem);
    font-weight: 500;
    letter-spacing: -0.055em;
    line-height: 1.02;
    margin: 0;
  }
  .statement .w { color: var(--ink-faint); transition: color 0.3s; }
  .statement .w.on { color: var(--ink); }

  /* Bullet lists */
  .list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
  .list li { position: relative; padding-left: 26px; font-size: 1.1rem; line-height: 1.5; }
  .list li::before { content: ""; position: absolute; left: 4px; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

  /* Act headers */
  .act-title {
    font-size: var(--text-h2);
    font-weight: var(--weight-heading);
    letter-spacing: -0.04em;
    line-height: 1.12;
    margin: 0 0 40px;
    max-width: 760px;
  }
  .note { margin-top: 40px; }
  .note h3 { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.03em; margin: 0 0 12px; }

  /* Before / after table */
  .compare-wrap { overflow-x: auto; border-radius: 18px; border: 1px solid var(--line); }
  .compare { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.98rem; }
  .compare th { text-align: left; font-weight: 500; font-size: 0.85rem; color: var(--ink-soft); background: var(--sand); padding: 18px 24px; }
  .compare td { padding: 20px 24px; border-top: 1px solid var(--line); line-height: 1.5; vertical-align: top; width: 50%; }
  .compare td:first-child { color: var(--ink-soft); }

  /* Lightbox */
  .lightbox {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(18, 16, 30, 0.75);
    backdrop-filter: blur(6px);
    display: grid; place-items: center;
    padding: 40px var(--gutter);
    cursor: zoom-out;
  }
  .lightbox .screen { transform: scale(1.6); }
  .lightbox .screen.desk { transform: scale(1.9); }
  @media (max-width: 700px) {
    .lightbox .screen, .lightbox .screen.desk { transform: scale(1.3); }
  }

  .to-top { text-align: center; margin-bottom: 80px; }

  /* ---------- Real project media ---------- */

  /* Role / platform / skills / team row under the hero title */
  .meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
    gap: 20px 32px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid rgba(18, 18, 18, 0.1);
  }
  .meta dt { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
  .meta dd { margin: 0; font-size: 0.98rem; line-height: 1.5; }

  /* A single large image or video in a sand frame, with a caption */
  .media {
    margin: 0;
    background: var(--sand);
    border-radius: 24px;
    padding: clamp(14px, 3vw, 32px);
  }
  .media img, .media video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
  }
  .media.zoom { cursor: zoom-in; }
  .media figcaption, .cap {
    margin-top: 14px;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-align: center;
  }
  .media + .media { margin-top: 20px; }

  /* Real screenshots inside a horizontal gallery */
  .shot img {
    display: block;
    height: clamp(220px, 34vw, 420px);
    width: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(40, 30, 90, 0.08);
    transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
  }
  .shot:hover img { transform: translateY(-6px); }

  /* Primary users */
  .users { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
  .user { border: 1px solid var(--line); border-radius: 18px; padding: 24px; }
  .user h3 { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 8px; }
  .user p { margin: 0; color: var(--ink-soft); line-height: 1.5; font-size: 0.95rem; }

  /* Sections that still need content */
  .todo {
    border: 1.5px dashed var(--ink-faint);
    border-radius: 18px;
    padding: 28px;
    color: var(--ink-soft);
    line-height: 1.6;
  }
  .todo b { color: var(--accent); font-weight: 600; }

  .lightbox img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; border-radius: 12px; transform: none; box-shadow: none; }

  /* Spot reserved for a visual that hasn't been exported yet */
  .visual-slot {
    background: var(--sand);
    border-radius: 24px;
    padding: clamp(14px, 3vw, 32px);
  }
  .visual-slot > div {
    border: 1.5px dashed var(--ink-faint);
    border-radius: 14px;
    min-height: clamp(180px, 28vw, 340px);
    display: grid;
    place-items: center;
    text-align: center;
    padding: 24px;
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.5;
  }
  .visual-slot b { display: block; color: var(--accent); font-family: var(--serif); font-style: italic; font-weight: 400; margin-bottom: 6px; }
  .visual-slot + .visual-slot, .media + .visual-slot, .visual-slot + .media { margin-top: 20px; }

  /* Two side-by-side lists (reading vs writing reviews) */
  .split { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
  .split > div { background: var(--sand); border-radius: 18px; padding: 28px; }
  .split h3 { font-size: 1.3rem; font-weight: 500; letter-spacing: -0.03em; margin: 0 0 18px; }
  .split ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
  .split li { line-height: 1.5; color: var(--ink-soft); }
  .split li b { color: var(--ink); font-weight: 600; }

  .sub-title { font-size: var(--text-h3); font-weight: var(--weight-heading); letter-spacing: -0.035em; margin: 56px 0 20px; }

  /* Color swatches inside the brand table */
  .swatches { display: flex; flex-wrap: wrap; gap: 10px 16px; }
  .swatches span { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; }
  .swatches i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
  .compare.three td { width: auto; }
  .compare.three td:first-child { color: var(--ink-soft); white-space: nowrap; }

  /* Two images side by side (stacks on narrow screens) */
  .grid2 { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; }
  .grid2 .media + .media { margin-top: 0; }
  .grid2 + .grid2, .media + .grid2, .grid2 + .media { margin-top: 20px; }

  /* Tall screens cropped to a tidy card; click shows the full image */
  .media.crop img { aspect-ratio: 4 / 5; object-fit: cover; object-position: top; }

  /* Long website pages: scroll inside the frame */
  .scroll-shot {
    max-height: min(78vh, 720px);
    overflow-y: auto;
    border-radius: 14px;
    scrollbar-width: thin;
  }
  .scroll-shot img { border-radius: 0; }
  .scroll-hint { text-align: center; font-size: 0.75rem; color: #a7a3ae; margin: 10px 0 0; }

  /* Lightbox: tall images scroll instead of shrinking */
  .lightbox { overflow-y: auto; place-items: start center; }
  .lightbox img { margin-block: auto; max-width: min(92vw, 1200px); max-height: none; }