/* Shared styles for the case-study pages (same look as the main page). */
  /* Case study page. Same look as the main page (white, PP Neue Montreal, small grey mono labels in a
     left column, content in the right column, thin lines); content order after a project page:
     back link → title + info → cover → sections with images & captions → next project. */
  @font-face { font-family: 'Neue Montreal'; src: url('../fonts/PPNeueMontreal-Light.otf') format('opentype'); font-weight: 300; font-display: swap; }
  @font-face { font-family: 'Neue Montreal'; src: url('../fonts/PPNeueMontreal-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
  @font-face { font-family: 'Neue Montreal'; src: url('../fonts/PPNeueMontreal-Semibold.otf') format('opentype'); font-weight: 600; font-display: swap; }
  :root { --pad: 2.2vw; --col: 33%; --ink: #111; --grey: #9a9a9a; --line: #e6e6e6; }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { background: #fff; color: var(--ink); font-family: 'Neue Montreal', Inter, system-ui, sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; }
  a { color: inherit; }
  img { display: block; width: 100%; height: auto; }

  .mono, .label, .top a, .cap, .k, .tags, .next a, footer { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 12px; font-weight: 400; }
  .label { font-size: 11px; text-transform: uppercase; color: var(--grey); }
  .top { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center;
    padding: 18px var(--pad); background: rgba(255,255,255,.92); backdrop-filter: blur(8px); }
  .top a { text-decoration: none; color: var(--grey); text-transform: uppercase; }
  .top a:hover { color: var(--ink); }

  h1 { margin: 6vh var(--pad) 0; font-weight: 300; text-transform: uppercase; line-height: .95; letter-spacing: -0.01em;
    font-size: clamp(48px, 10.4vw, 200px); }

  /* two-column rows, same grid as the main page */
  .row { display: grid; grid-template-columns: var(--col) 1fr; column-gap: 2vw; padding: 0 var(--pad); margin-top: 14vh; align-items: start; }
  .row > .label { position: sticky; top: 64px; }
  .lead { font-size: clamp(22px, 2.3vw, 36px); line-height: 1.22; max-width: 30ch; }
  .body { margin-top: 2.4vh; max-width: 62ch; font-size: 15px; line-height: 1.55; color: #333; }
  .tags { margin-top: 3vh; color: var(--grey); text-transform: uppercase; line-height: 1.9; }

  .cover { margin: 8vh var(--pad) 0; aspect-ratio: 16 / 7; overflow: hidden; background: #f20d0d; }
  .cover img { width: 100%; height: 100%; object-fit: cover; }
  .cap { margin-top: 10px; color: var(--grey); text-transform: uppercase; }

  .info { display: grid; grid-template-columns: 1fr 1fr; gap: 3vh 2vw; }
  .info .k { color: var(--grey); text-transform: uppercase; margin-bottom: 6px; }
  .info p { font-size: 15px; line-height: 1.5; }
  .info .wide { grid-column: 1 / -1; }

  .quote { margin-top: 16vh; padding: 0 var(--pad); }
  .quote p { margin-left: calc(var(--col) + 2vw); font-size: clamp(30px, 4.2vw, 68px); line-height: 1.08; font-weight: 300; max-width: 18ch; }

  .stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2vw; margin-top: 5vh; border-top: 1px solid var(--line); padding-top: 3vh; }
  .stats b { display: block; font-size: clamp(34px, 4vw, 64px); font-weight: 300; line-height: 1; }
  .stats span { display: block; margin-top: 10px; font-size: 12px; line-height: 1.4; color: #555; }

  .list { list-style: none; margin-top: 4vh; border-top: 1px solid var(--line); }
  .list li { display: grid; grid-template-columns: 3.4em 1fr; gap: 1vw; padding: 2.2vh 0; border-bottom: 1px solid var(--line); }
  .list li .k { color: var(--grey); padding-top: 4px; }
  .list h3 { font-size: 18px; font-weight: 400; }
  .list p { margin-top: 6px; font-size: 14px; line-height: 1.55; color: #444; max-width: 60ch; }

  .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2vw; margin-top: 4vh; }
  .cols h4 { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 400; text-transform: uppercase; color: var(--grey); margin-bottom: 10px; }
  .cols p, .cols li { font-size: 14px; line-height: 1.6; color: #333; }
  .cols ul { list-style: none; }

  table { width: 100%; border-collapse: collapse; margin-top: 4vh; font-size: 14px; }
  th { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 400; color: var(--grey); text-align: left; text-transform: uppercase; padding: 0 1vw 10px 0; }
  td { padding: 14px 1vw 14px 0; border-top: 1px solid var(--line); vertical-align: top; }
  .voices { list-style: none; margin-top: 4vh; display: grid; grid-template-columns: 1fr 1fr; gap: 2vh 2vw; }
  .voices li { font-size: 18px; line-height: 1.35; }

  .statement { margin-top: 16vh; padding: 0 var(--pad); }
  .statement .label { margin-left: calc(var(--col) + 2vw); display: block; margin-bottom: 2vh; }
  .statement p { margin-left: calc(var(--col) + 2vw); font-size: clamp(30px, 4.2vw, 68px); line-height: 1.08; font-weight: 300; max-width: 20ch; }

  .gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 2vw; margin-top: 4vh; }
  .gallery figure img { aspect-ratio: 4 / 3; object-fit: cover; background: #f2f2f2; }
  .gallery figcaption { margin-top: 10px; }
  .gallery figcaption .cap { margin-top: 0; }
  .gallery figcaption p { margin-top: 6px; font-size: 13px; line-height: 1.5; color: #444; }

  .steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.4vw; margin-top: 4vh; }
  .steps div { border-top: 1px solid var(--ink); padding-top: 12px; }
  .steps .k { color: var(--grey); }
  .steps h3 { margin-top: 8px; font-size: 17px; font-weight: 400; }
  .steps p { margin-top: 8px; font-size: 13px; line-height: 1.5; color: #444; }
  .steps em { display: block; margin-top: 10px; font-size: 13px; color: var(--ink); }

  .closing { margin-top: 18vh; padding: 0 var(--pad); }
  .closing p.big { margin-left: calc(var(--col) + 2vw); font-size: clamp(30px, 4.2vw, 68px); line-height: 1.08; font-weight: 300; max-width: 20ch; }
  .closing p.small { margin: 3vh 0 0 calc(var(--col) + 2vw); max-width: 62ch; font-size: 14px; line-height: 1.55; color: #444; }

  .next { display: flex; justify-content: space-between; align-items: center; margin: 14vh var(--pad) 0; padding: 3vh 0; border-top: 1px solid var(--line); }
  .next a { text-decoration: none; color: var(--grey); text-transform: uppercase; }
  .next a:hover { color: var(--ink); }
  .next .big { font-family: 'Neue Montreal', sans-serif; font-size: clamp(26px, 3vw, 46px); text-transform: none; color: var(--ink); }
  footer { margin: 0 var(--pad); padding: 2.4vh 0 3.2vh; border-top: 1px solid #d8d8d8; color: var(--grey); }

  /* custom cursor: same small inverting dot as the main page */
  @media (pointer: fine) {
    html, body, body * { cursor: none !important; }
    .cursor-dot { position: fixed; left: 0; top: 0; z-index: 9999; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
      background: #fff; mix-blend-mode: difference; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
    .cursor-dot.on { opacity: 1; }
    /* over anything clickable: an outlined pointing hand instead of the dot */
    a, a *, button, button *, [role="link"], [role="link"] *, .work li, .work li * { cursor: url('../ui/hand.svg') 9 1, pointer !important; }
    .cursor-dot.on.link { opacity: 0; }
  }
  @media not (pointer: fine) { .cursor-dot { display: none; } }

  @media (max-width: 760px) {
    :root { --pad: 18px; }
    .row { grid-template-columns: 1fr; row-gap: 14px; margin-top: 10vh; }
    .row > .label { position: static; }
    .quote p, .statement p, .statement .label, .closing p.big, .closing p.small { margin-left: 0; }
    .stats { grid-template-columns: 1fr 1fr; row-gap: 3vh; }
    .info, .cols, .voices, .gallery { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
  }

  /* four-up cards (e.g. the marketplace players) */
  .players { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4vw; margin-top: 4vh; }
  .players > div { border-top: 1px solid var(--ink); padding-top: 12px; }
  .players h3 { font-size: 17px; font-weight: 400; }
  .players .k { color: var(--grey); text-transform: uppercase; display: block; margin: 4px 0 10px; }
  .players dl { font-size: 13px; line-height: 1.5; color: #444; }
  .players dt { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--grey); text-transform: uppercase; margin-top: 10px; }
  .wideimg { margin-top: 4vh; }
  .wideimg img { aspect-ratio: 16 / 9; object-fit: cover; background: #f2f2f2; }
  @media (max-width: 760px) { .players { grid-template-columns: 1fr 1fr; } }

  /* galleries of deck slides: show the whole slide, never crop it */
  .gallery.slides figure img { aspect-ratio: 16 / 9; object-fit: contain; background: #f6f6f6; }

  /* at-a-glance summary at the top of every case study: problem → solution → impact, then the process */
  .row.sum { margin-top: 10vh; }
  .row.sum > div:last-child { border-top: 1px solid var(--ink); padding-top: 2.4vh; }
  .row.sum .lead { max-width: 34ch; }
  .row.sum .stats { margin-top: 3vh; }
  .row.sum .wideimg { margin-top: 3.4vh; }
  .process { margin: 20vh var(--pad) 0; padding-top: 3vh; border-top: 1px solid var(--line); display: grid; grid-template-columns: var(--col) 1fr; column-gap: 2vw; align-items: end; }
  .process p { font-size: clamp(30px, 4.2vw, 68px); line-height: 1.05; font-weight: 300; }
  .process .label { padding-bottom: 1.2vh; }
  @media (max-width: 760px) { .process { grid-template-columns: 1fr; row-gap: 10px; } .row.sum { margin-top: 7vh; } }

  /* the design process sits in a soft grey box, set smaller and lighter so it reads as optional detail */
  .proc { --line: #dcdcd6; background: #f2f2ef; margin: 16vh var(--pad) 0; padding: 7vh 0 10vh; border-radius: 16px; }
  .proc .process { margin: 0; padding: 0 3vw 2vh; border-top: 0; }
  .proc .process p { font-size: clamp(26px, 2.8vw, 44px); }
  .proc .process small { display: block; margin-top: 10px; font-size: 14px; line-height: 1.5; color: #777; font-weight: 400; max-width: 46ch; }
  .proc .row { padding: 0 3vw; margin-top: 9vh; }
  .proc .row > .label { top: 70px; }
  .proc .lead { font-size: clamp(18px, 1.55vw, 24px); line-height: 1.3; max-width: 40ch; }
  .proc .body { font-size: 14px; color: #555; }
  .proc .statement, .proc .quote { margin-top: 10vh; padding: 0 3vw; }
  .proc .statement p, .proc .quote p { font-size: clamp(22px, 2.3vw, 36px); max-width: 26ch; }
  .proc .list { margin-top: 2.6vh; }
  .proc .list li { padding: 1.5vh 0; }
  .proc .list h3 { font-size: 15px; }
  .proc .list p { font-size: 13px; color: #666; }
  .proc .stats b { font-size: clamp(26px, 2.6vw, 40px); }
  .proc .cols { margin-top: 2.6vh; }
  .proc .cols p, .proc .cols li { font-size: 13px; color: #555; }
  .proc .gallery { margin-top: 2.6vh; }
  .proc .gallery figure img, .proc .wideimg img { background: #e7e7e3; border-radius: 6px; }
  .proc .gallery figcaption p { font-size: 12px; color: #666; }
  .proc .players > div, .proc .steps div { border-top-color: #bdbdb6; }
  .proc .players dl, .proc .steps p { font-size: 12px; color: #666; }
  .proc table { font-size: 13px; color: #555; }
  .proc .voices li { font-size: 15px; color: #555; }
  @media (max-width: 760px) { .proc { margin: 10vh 0 0; border-radius: 0; padding: 5vh 0 7vh; } .proc .row, .proc .process, .proc .statement, .proc .quote { padding: 0 var(--pad); } }

  /* client testimonial under a case study's impact */
  .testimonial { margin-top: 4vh; padding-left: 18px; border-left: 2px solid var(--ink); max-width: 56ch; }
  .testimonial p { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.4; font-weight: 300; }
  .testimonial cite { display: block; margin-top: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-style: normal; text-transform: uppercase; color: var(--grey); }

  /* case rule (same as the main page): titles/labels capitalised, links as written (first letter capital) */
  .next a, .closing a, .linkrow a, .top .links a { text-transform: none !important; }