/* ==========================================================================
   Case study pages · loads on top of director.css + director-b.css
   Same tokens, type and panel colours as the homepage. Adds long-form
   layout: two-column sections, figures, flows, comparisons and outcomes.
   ========================================================================== */

/* ---------- hero: full-bleed photo with copy on the quiet side ---------- */
.cs-hero { position: relative; overflow: hidden; text-align: left; align-items: stretch; justify-content: flex-end; padding-bottom: 96px; }
.cs-hero-img { position: absolute; inset: 0; z-index: 0; }
.cs-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.cs-hero-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(12,12,12,.82) 0%, rgba(12,12,12,.55) 38%, rgba(12,12,12,0) 70%),
              linear-gradient(0deg, rgba(12,12,12,.7) 0%, rgba(12,12,12,0) 40%);
}
/* also carries .hero so director-b.js runs the load-in and scroll fade; undo its centring */
.cs-hero .wrap { display: flex; flex-direction: column; gap: 28px; }
.cs-hero .bigtype { max-width: 14ch; margin: 0; color: #F2F2F2; }
.cs-hero .lede { max-width: 30ch; color: #D9D9D9; margin: 0; }
.cs-hero .label { color: #D9D9D9; margin-bottom: 0; }
.cs-back { font-family: var(--medium); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: #D9D9D9; }
.cs-back:hover { color: #fff; }

/* ---------- project facts ---------- */
.cs-facts { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); }
.cs-facts > div { padding: 22px 18px 22px 0; border-bottom: 1px solid var(--line); }
.cs-facts dt { margin-bottom: 8px; }
.cs-facts dd { color: var(--fg-strong); font-size: 16px; line-height: 1.45; }
@media (min-width: 900px) {
  .cs-facts { grid-template-columns: repeat(4, 1fr); }
  .cs-facts > div { border-bottom: 0; border-right: 1px solid var(--line); padding: 26px 24px; }
  .cs-facts > div:first-child { padding-left: 0; }
  .cs-facts > div:last-child { border-right: 0; }
}

/* ---------- TL;DR outcomes (re-uses .stats from director.css) ---------- */
.cs-tldr { margin-top: 72px; }
.cs-tldr .label { margin-bottom: 4px; }
.cs-tldr .stats { margin-top: 18px; }
.stat-num .neg { color: var(--wash-3); }

/* ---------- two-column long-form section ---------- */
.cs-block { display: grid; grid-template-columns: 1fr; gap: 14px 48px; padding: 44px 0; border-top: 1px solid var(--line); }
.cs-block:first-of-type { border-top: 0; padding-top: 0; }
.cs-block h3 { font-family: var(--thin); font-weight: normal; font-size: clamp(1.6rem, 1.2vw + 1rem, 2.2rem); line-height: 1.15; letter-spacing: -.015em; color: var(--fg-strong); margin-bottom: 14px; }
.cs-block p { max-width: 62ch; }
.cs-block p + p { margin-top: 1em; }
.cs-block strong { font-family: var(--medium); font-weight: 500; color: var(--fg-strong); }
@media (min-width: 900px) { .cs-block { grid-template-columns: 220px 1fr; } }

.dash-list { list-style: none; max-width: 62ch; }
.dash-list li { position: relative; padding-left: 30px; margin: 10px 0; }
.dash-list li::before { content: ""; position: absolute; left: 0; top: .78em; width: 16px; height: 3px; border-radius: 2px; background: var(--acc-1); }
.dash-list li:nth-child(4n+2)::before { background: var(--acc-2); }
.dash-list li:nth-child(4n+3)::before { background: var(--acc-4); }
.dash-list li:nth-child(4n+4)::before { background: var(--acc-3); }

/* ---------- problem statement ---------- */
.cs-problem {
  margin-top: 56px; padding: 40px 0 0; border-top: 1px solid var(--line);
  display: grid; gap: 20px;
}
.cs-problem blockquote { font-family: var(--thin); font-size: clamp(1.6rem, 1.8vw + 1rem, 2.9rem); line-height: 1.18; letter-spacing: -.015em; color: var(--fg-strong); max-width: 26ch; }
@media (min-width: 900px) { .cs-problem { grid-template-columns: 220px 1fr; gap: 48px; } }

/* ---------- figures ---------- */
.cs-fig { margin: 56px 0 0; }
.cs-fig img { width: 100%; border-radius: 6px; }
.cs-fig figcaption { margin-top: 14px; font-size: 15px; letter-spacing: .02em; max-width: 70ch; }
/* wider than .wrap; centred with margins because .reveal owns transform */
.cs-fig--bleed { width: min(100vw - 2 * var(--gutter), 1500px); margin-left: calc(50% - min(50vw - var(--gutter), 750px)); }
.cs-fig--narrow { max-width: 760px; margin-left: auto; margin-right: auto; }
.cs-fig a.zoom, .cs-grid a.zoom { display: block; position: relative; cursor: zoom-in; }
.cs-fig a.zoom::after, .cs-grid a.zoom::after {
  content: "Open full size ↗"; position: absolute; right: 14px; bottom: 14px;
  font-family: var(--medium); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  background: rgba(20,20,20,.78); color: #eee; padding: 8px 12px; border-radius: 999px;
  opacity: 0; transition: opacity .3s;
}
.cs-fig a.zoom:hover::after, .cs-fig a.zoom:focus-visible::after,
.cs-grid a.zoom:hover::after, .cs-grid a.zoom:focus-visible::after { opacity: 1; }
@media (hover: none) { .cs-fig a.zoom::after, .cs-grid a.zoom::after { opacity: 1; } }

/* each figure spans two rows of a shared subgrid, so every caption in a row
   starts on the same line however tall its image is */
.cs-grid { display: grid; gap: 0 24px; grid-template-columns: 1fr; margin-top: 56px; }
.cs-grid figure { margin: 0 0 40px; display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 18px; }
.cs-grid figure > img, .cs-grid figure > a { align-self: start; }
.cs-grid img { width: 100%; border-radius: 6px; }
.cs-grid figcaption, .cs-craft figcaption { font-size: 15px; line-height: 1.5; } /* full column width */
.cs-grid figcaption b, .cs-craft figcaption b { display: block; font-family: var(--medium); font-weight: 500; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-strong); margin-bottom: 6px; }
@media (min-width: 760px) {
  .cs-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .cs-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .cs-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* workshop sketches: the exports have their heading at the very top edge,
   so sit them on a padded white card */
.cs-grid--sketch img { background: #fff; padding: 36px 24px 24px; box-sizing: border-box; }

/* initial concepts: the same three equal columns and 24px gutters as the
   sketch row above, so the card edges line up. Each screen sits centred in
   an identical card, which absorbs the screens' slightly different proportions. */
.cs-grid--concepts img {
  aspect-ratio: 1 / 1.98; object-fit: contain; padding: 28px; box-sizing: border-box;
  background: var(--card); border-radius: 10px;
}


/* ---------- craft: on the same 3-column grid as the sketches and concepts ----------
   col 1 splash, col 2 scenes, col 3 a stack of hero + navigation. The stack
   stretches to the phones' height; the hero sits in a cream card (the gifs'
   own background) that grows to fill it, so top edges, bottom edges and the
   bottom row of captions all line up. */
.cs-craft { display: grid; gap: 40px 24px; margin-top: 56px; grid-template-columns: 1fr 1fr; }
.cs-craft figure { margin: 0; display: flex; flex-direction: column; gap: 18px; }
.cs-craft img { width: 100%; border-radius: 14px; }
.craft-stack { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 40px; }
.craft-card { background: #F3E9E1; border-radius: 14px; overflow: hidden; display: grid; place-items: center; }
.craft-card img { border-radius: 0; aspect-ratio: 468 / 392; object-fit: cover; object-position: 100% 0; } /* the gif has a 30px offset baked in */
@media (min-width: 760px) { /* same breakpoint as .cs-grid--3 */
  /* two shared rows: media, then captions. Every column joins them through
     subgrid, so the bottom captions share one top line whatever their length */
  .cs-craft { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; row-gap: 18px; }
  .cs-craft .splash, .cs-craft .scenes, .craft-stack { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 18px; }
  .cs-craft .splash img, .cs-craft .scenes img { align-self: start; }
  .craft-stack { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .craft-stack > *, .craft-stack .nav-card > * { grid-column: 1; } /* one column: hero and nav share row 1 */
  /* hero fills the top of column 3, leaving room for the nav bar (191/800 of
     the column width, since % margins resolve against width) plus a gutter */
  .craft-stack .hero-card { grid-row: 1; margin-bottom: calc(23.875% + 24px); }
  .craft-stack .hero-card .craft-card { flex: 1; }
  .craft-stack .nav-card { display: contents; }
  .craft-stack .nav-card img { grid-row: 1; align-self: end; }
  .craft-stack .nav-card figcaption { grid-row: 2; }
}

/* ---------- product plan: three phases ---------- */
.phases { list-style: none; display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 8px; }
.phase { background: var(--bg); padding: 30px 28px 32px; position: relative; transition: background 1s; }
.phase .label-sm { margin-bottom: 18px; }
.phase h4 { font-family: var(--thin); font-weight: normal; font-size: 2rem; line-height: 1.1; color: var(--fg-strong); margin-bottom: 6px; }
.phase .when { font-family: var(--medium); font-size: 15px; color: var(--fg-strong); }
.phase p { font-size: 15px; margin-top: 14px; }
.phase--now { box-shadow: inset 0 3px 0 var(--acc-3); }
.phase--now .label-sm { color: var(--acc-3); }
.phase--next { opacity: .6; }
@media (min-width: 900px) { .phases { grid-template-columns: repeat(3, 1fr); } }

/* ---------- constraint chips ---------- */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; font-size: 15px; color: var(--fg-strong); }

/* ---------- team diagram ---------- */
.team { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.team li { display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 999px; background: var(--card); color: var(--fg-strong); font-size: 15px; }
.team .dot { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-family: var(--medium); font-size: 12px; letter-spacing: .06em; color: #111; }
.team .me { background: var(--green); }
.team .spd { background: var(--cyan); }
.team .cd { background: #8C83FF; }
.team .sq { background: transparent; border: 1px solid var(--line); color: var(--fg-strong); }

/* ---------- decision / trade-off cards ---------- */
.compare { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 8px; }
.compare article { background: var(--card); border-radius: 8px; padding: 30px 28px; border-top: 3px solid var(--acc-2); }
.compare article + article { border-top-color: var(--line); }
.compare h4 { font-family: var(--thin); font-weight: normal; font-size: 1.8rem; color: var(--fg-strong); margin: 10px 0 12px; }
.compare p { font-size: 16px; }
.compare ul { list-style: none; margin-top: 18px; }
.compare li { font-size: 15px; padding: 8px 0; border-top: 1px solid var(--line); color: var(--fg-strong); }
@media (min-width: 800px) { .compare { grid-template-columns: 1fr 1fr; } }

.decision { margin-top: 28px; padding: 22px 24px; border-left: 2px solid var(--acc-1); background: var(--card); border-radius: 0 6px 6px 0; max-width: 70ch; }
.decision .label-sm { color: var(--acc-1); margin-bottom: 8px; }
.decision p { color: var(--fg-strong); }

/* ---------- path to purchase steps ---------- */
.flow { display: grid; gap: 28px; margin-top: 8px; }
.flow-row { display: grid; gap: 12px; }
.flow-row ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: s; }
.flow-row li {
  counter-increment: s; display: flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 9px; border-radius: 999px; border: 1px solid var(--line); font-size: 15px; color: var(--fg-strong);
}
.flow-row li::before {
  content: counter(s); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--medium); font-size: 12px; background: var(--line); color: var(--fg-strong);
}
.flow-row li.cut { opacity: .5; text-decoration: line-through; text-decoration-thickness: 1px; }
.flow-row--new li { border-color: transparent; background: var(--card); }
.flow-row--new li::before { background: var(--acc-2); color: #fff; }
.flow-row .count { font-family: var(--thin); font-size: 2.4rem; line-height: 1; color: var(--fg-strong); }
@media (min-width: 900px) { .flow-row { grid-template-columns: 220px 1fr; gap: 48px; align-items: center; } }

/* ---------- mobile flow: horizontal phone strip ---------- */
.phone-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 28px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 2px 18px; margin-top: 56px;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.phone-strip figure { scroll-snap-align: start; margin: 0; display: flex; flex-direction: column; }
/* exports carry the #C5C5C5 slide background, which matches the offwhite panel */
.phone-strip img { width: 100%; max-width: 340px; margin: 0 auto; }
.phone-strip figcaption { margin-top: 22px; font-size: 15px; line-height: 1.5; }
.phone-strip figcaption b { display: flex; align-items: center; gap: 10px; font-family: var(--medium); font-weight: 500; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-strong); margin-bottom: 6px; }
.phone-strip figcaption b i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--acc-2); color: #fff; letter-spacing: 0; font-size: 12px; }
.phone-strip .edge { display: inline-block; margin-top: 8px; font-family: var(--medium); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--acc-3); }
/* four screens fit the layout width from 1000px, so they fill it with no scrolling */
@media (min-width: 1000px) { .phone-strip { grid-auto-columns: 1fr; overflow: visible; } .phone-strip img { max-width: none; } }
.strip-hint { font-size: 14px; letter-spacing: .05em; margin-top: 4px; }
@media (min-width: 1000px) { .strip-hint { display: none; } }

/* ---------- outcomes: the three results across the top, then the full-width shot ---------- */
.outcomes-stats { margin-top: 0; }
@media (min-width: 900px) { .outcomes-stats { grid-template-columns: repeat(3, 1fr); } }

/* ---------- reflections ---------- */
.reflect { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.reflect article { background: var(--bg); padding: 34px 30px 40px; transition: background 1s; }
.reflect h3 { font-family: var(--thin); font-weight: normal; font-size: 1.8rem; line-height: 1.15; color: var(--fg-strong); margin-bottom: 14px; }
.reflect p, .reflect li { font-size: 16px; }
.reflect p + p { margin-top: .8em; }
.reflect .dash-list { margin-top: 4px; }
.reflect .dash-list li::before { background: var(--acc); }
@media (min-width: 900px) { .reflect { grid-template-columns: repeat(3, 1fr); } }

/* big numeral + one of the homepage hero's outline shapes, in the card's accent */
.reflect-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 44px; }
.reflect-num { font-family: var(--thin); font-size: clamp(3.2rem, 3vw + 1.6rem, 4.6rem); line-height: .9; letter-spacing: -.04em; color: var(--acc); }
.reflect-shape { width: 46px; fill: none; stroke: var(--acc); stroke-width: 2.5; vector-effect: non-scaling-stroke; overflow: visible; transition: transform 1.2s var(--ease-out); }
.reflect-shape * { vector-effect: non-scaling-stroke; }
.reflect article:hover .reflect-shape { transform: rotate(90deg) scale(1.1); }
/* accent bar draws across the top of each card as the row arrives */
.reflect article::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--acc); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease-out) calc(.2s + var(--i, 0) * 150ms); }
.reflect.in article::after { transform: none; }

/* pull quote above the cards */
.reflect-quote { margin: 0 0 64px; padding-left: 28px; border-left: 2px solid var(--line); }
.reflect-quote p { font-family: var(--thin); font-size: clamp(1.9rem, 2.2vw + 1rem, 3.4rem); line-height: 1.15; letter-spacing: -.02em; color: var(--fg-strong); max-width: 24ch; }
.reflect-quote em { font-style: normal; color: var(--acc-2); }

/* ---------- next / back ---------- */
.cs-next { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 44px; }

@media (max-width: 700px) {
  .cs-hero { padding-bottom: 72px; }
  .cs-hero-img img { object-position: 70% 50%; }
  .cs-hero-img::after { background: linear-gradient(0deg, rgba(12,12,12,.9) 0%, rgba(12,12,12,.55) 55%, rgba(12,12,12,.2) 100%); }
  .cs-block { padding: 34px 0; }
  .cs-fig, .cs-grid, .phone-strip { margin-top: 40px; }
  .phone-strip { grid-auto-columns: 72%; gap: 20px; }
  .phase, .compare article, .reflect article { padding: 24px 20px; }
  .chips li, .team li { font-size: 14px; }
}

/* ---------- no widows ----------
   src/no-widows.js glues the last two words of each text block with .nw;
   text-wrap covers browsers that run without JS */
main p, main li, main dd, main figcaption, main blockquote { text-wrap: pretty; }
main h3, main h4 { text-wrap: balance; } /* .bigtype balances in director.css */

/* ==========================================================================
   Motion details, matching the homepage (director-b.css): chips invert like
   the ritual list, cards sweep like the career rows, dashes draw in like the
   timeline, and figures lift like the "how I lead" steps.
   ========================================================================== */
.chips li { transition: background .3s, color .3s, border-color .3s, opacity .8s var(--ease-out) calc(var(--i, 0) * 70ms), translate .9s var(--ease-out) calc(var(--i, 0) * 70ms); }
.chips li:hover { background: var(--fg-strong); color: var(--bg); border-color: var(--fg-strong); }

.team li { transition: background .3s, opacity .8s var(--ease-out) calc(var(--i, 0) * 70ms), translate .9s var(--ease-out) calc(var(--i, 0) * 70ms); }
.team .dot { transition: transform .6s var(--ease-out); }
.team li:hover .dot { transform: scale(1.12) rotate(-8deg); }

/* card sweep (career rows) */
.phase, .reflect article, .compare article { position: relative; isolation: isolate; overflow: hidden; }
.phase::before, .reflect article::before, .compare article::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--card);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out);
}
.phase:hover::before, .reflect article:hover::before, .compare article:hover::before { transform: scaleX(1); }
.phase h4, .reflect h3, .compare h4 { transition: transform .5s var(--ease-out), color .4s; }
.phase:hover h4, .reflect article:hover h3, .compare article:hover h4 { transform: translateX(8px); color: var(--acc-1); }
.reflect article:hover h3 { color: var(--acc); }
.phase, .reflect article, .compare article { transition: background 1s, opacity .8s var(--ease-out) calc(var(--i, 0) * 70ms), translate .9s var(--ease-out) calc(var(--i, 0) * 70ms); }

/* step chips: number pops on hover */
.flow-row li { transition: border-color .3s, opacity .8s var(--ease-out) calc(var(--i, 0) * 70ms), translate .9s var(--ease-out) calc(var(--i, 0) * 70ms); }
.flow-row li::before { transition: transform .5s var(--ease-out); }
.flow-row li:hover { border-color: var(--fg-strong); }
.flow-row li:hover::before { transform: scale(1.15); }

/* dash bullets draw in when their block arrives (timeline) */
.dash-list li::before { transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease-out); }
.in .dash-list li::before { transform: none; }
.in .dash-list li:nth-child(2)::before { transition-delay: .1s; }
.in .dash-list li:nth-child(3)::before { transition-delay: .2s; }
.in .dash-list li:nth-child(4)::before { transition-delay: .3s; }

/* decision call-outs: the accent rule grows from the top (section-head label line) */
.decision { position: relative; border-left-color: transparent; }
.decision::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--acc-1); transform: scaleY(0); transform-origin: top; transition: transform 1s var(--ease-out) .25s; }
.in .decision::before, .decision.in::before { transform: none; }

/* figures lift a touch on hover (lead steps) */
.cs-grid figure, .cs-craft figure, .phone-strip figure { transition: opacity .8s var(--ease-out) calc(var(--i, 0) * 70ms), translate .9s var(--ease-out) calc(var(--i, 0) * 70ms), transform .8s var(--ease-out); }
@media (hover: hover) {
  .cs-grid figure:hover, .cs-craft figure:hover, .phone-strip figure:hover { transform: translateY(-6px); }
}
.cs-grid figcaption b, .cs-craft figcaption b, .phone-strip figcaption b { transition: color .4s; }
.cs-grid figure:hover figcaption b, .cs-craft figure:hover figcaption b { color: var(--acc-1); }

/* overview link underline (work-meta links) */
.cs-facts a { position: relative; text-decoration: none; }
.cs-facts a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(.3); transform-origin: left; transition: transform .5s var(--ease-out); }
.cs-facts a:hover::after { transform: scaleX(1); }


@media (prefers-reduced-motion: reduce) {
  .dash-list li::before, .decision::before, .reflect article::after { transform: none !important; transition: none; }
  .reflect article:hover .reflect-shape { transform: none; }
  .cs-grid figure:hover, .cs-craft figure:hover, .phone-strip figure:hover { transform: none; }
}