/* Case study pages (v3 style). Loaded after v3.css, which provides the colours, fonts, header, panels, footer and menu.
   Layout: each step is a white panel with a narrow label column on the left and the story on the right. */

.cs3{gap:clamp(16px,2vw,28px)}
.cs3 img{display:block;max-width:100%;height:auto}
.cs3 a{color:inherit}
.cs3 h1,.cs3 h2,.cs3 p,.cs3 ul,.cs3 ol,.cs3 dl,.cs3 dd,.cs3 figure,.cs3 blockquote{margin:0}
.cs3 ul,.cs3 ol{padding:0;list-style:none}

/* Intro */
.cs-hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"text meta" "cover cover"}
.cs-hero-text{grid-area:text;display:grid;align-content:space-between;gap:clamp(28px,5vw,72px);padding:clamp(22px,3.4vw,48px);border-right:1px solid var(--rule)}
.crumb a{text-decoration:none;border-bottom:1px solid var(--rule)}
.crumb a:hover{border-color:currentColor}
.cs-h1{font-size:clamp(36px,5vw,80px);line-height:1;letter-spacing:-.035em;font-weight:var(--big);text-wrap:balance;max-width:14ch}
.cs-h1 .serif,.cs-h2 .serif{color:var(--ink-2)}
.cs-sub{max-width:46ch;font-size:clamp(17px,1.35vw,20px);line-height:1.45;color:var(--ink-2)}
.meta{grid-area:meta;display:grid;align-content:end}
.meta div{display:grid;gap:4px;padding:16px clamp(18px,2.4vw,32px);border-top:1px solid var(--rule)}
.meta div:first-child{border-top:0}
.meta dd{font-size:15px;line-height:1.45}
.cs-cover{grid-area:cover;border-top:1px solid var(--rule);background:#14152A;display:flex;justify-content:center;padding:clamp(16px,3vw,48px)}
.cs-cover img{width:100%;max-width:1100px;border-radius:6px}

/* Step panels */
.cs-block{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr)}
.cs-side{border-right:1px solid var(--rule);padding:clamp(18px,2.4vw,32px)}
.cs-side>*{position:sticky;top:20px}
.cs-side .num{font-size:clamp(40px,5vw,84px);line-height:.9;letter-spacing:-.05em;font-weight:300;color:var(--ink-2);margin-bottom:10px;position:static}
.cs-main{display:grid;gap:clamp(18px,2.2vw,30px);align-content:start;padding:clamp(22px,3.4vw,52px) clamp(18px,3.4vw,52px) clamp(28px,4vw,60px);min-width:0}
.cs-h2{font-size:clamp(28px,3.2vw,52px);line-height:1.04;letter-spacing:-.03em;font-weight:var(--big);text-wrap:balance;max-width:20ch}
.cs-p{max-width:58ch;font-size:clamp(17px,1.3vw,19px);line-height:1.55}
.dir{color:var(--accent)}
.rule{border:0;border-top:1px solid var(--rule);margin:clamp(12px,2vw,28px) 0}
.sublabel{margin-top:8px}
.note{max-width:52ch;padding-left:14px;border-left:2px solid var(--ink);font-size:16px;line-height:1.5}
.note b{font-weight:500;color:var(--accent)}

/* Overview */
.ov{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap)}
.ov div{display:grid;gap:10px;align-content:start;padding-top:12px;border-top:1px solid var(--ink)}
.ov p:last-child{font-size:16px;line-height:1.55}

/* Process overview: four phases, each step links to its section */
.cs3 .flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--col-gap);counter-reset:none}
.phase{display:grid;gap:10px;align-content:start}
.phase-name{padding:8px 0;border-top:1px solid var(--ink)}
.phase ul{display:grid;gap:6px}
.phase a{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;gap:8px;align-items:baseline;padding:12px;background:var(--surface);border-radius:6px;text-decoration:none;font-size:15px;line-height:1.3;transition:background .2s,color .2s}
.phase a .arr{color:var(--ink-2);transition:transform .25s}
.phase a:hover{background:var(--ink);color:var(--panel)}
.phase a:hover .muted,.phase a:hover .arr{color:#A9ADA7}
.phase a:hover .arr{transform:translateY(3px)}

/* Tags, lists */
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags li{font-size:14px;padding:6px 12px;border:1px solid var(--rule);border-radius:999px}
.finds{display:grid;gap:10px;max-width:56ch}
.finds li{display:grid;grid-template-columns:1.4rem minmax(0,1fr);font-size:clamp(16px,1.25vw,18px);line-height:1.4}
.finds li::before{content:"→";color:var(--ink-2)}
.plain{display:grid;gap:8px;max-width:56ch}
.plain li{font-size:16px;line-height:1.45;color:var(--ink-2);padding-bottom:8px;border-bottom:1px solid var(--rule)}

/* Images: click to enlarge */
.gal{display:grid;gap:var(--col-gap);align-items:start}
.gal.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gal.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cs3 figure{display:grid;gap:8px;align-content:start;min-width:0}
.cs3 figure img{width:100%;border-radius:6px;border:1px solid var(--rule);background:var(--surface)}
.cs3 figcaption{text-transform:none}
.zoom{cursor:zoom-in}
.zoom img{transition:transform .5s cubic-bezier(.2,.7,.1,1),box-shadow .3s}
.zoom:hover img{transform:translateY(-2px);box-shadow:0 10px 30px -18px rgba(0,0,0,.35)}
.cs-cover.zoom:hover img{transform:none}
.doc img{background:#fff}
.sketches img{background:#fff}
.cs3 .gal.sketches{max-width:560px}
.zoom.phone{max-width:280px;justify-self:end}
.wide img{width:100%}

/* Side-by-side text + image */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:start}
.split>div{display:grid;gap:16px;align-content:start}
.split.a11y{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}

/* Cards */
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap)}
.card3{display:grid;gap:8px;align-content:start;padding:clamp(16px,1.8vw,24px);background:var(--surface);border-radius:6px}
.card3 .c-t{font-size:clamp(18px,1.5vw,22px);line-height:1.2;letter-spacing:-.015em;margin-bottom:12px}
.c-t{font-size:17px;font-weight:500;letter-spacing:-.01em;line-height:1.3}
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 16px}
.feat li{font-size:15px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.verify,.probs,.principles{display:grid;gap:18px var(--col-gap)}
.verify{grid-template-columns:repeat(3,minmax(0,1fr))}
.probs{grid-template-columns:repeat(2,minmax(0,1fr))}
.principles{grid-template-columns:repeat(4,minmax(0,1fr))}
.verify div,.probs div,.principles div{display:grid;gap:6px;align-content:start;padding-top:10px;border-top:1px solid var(--ink)}
.verify p:last-child,.probs p:last-child,.principles p:last-child{font-size:15px;line-height:1.45;color:var(--ink-2)}

/* The blocker: dark panel */
.cs-block.dark{background:var(--dark);color:var(--on-dark);border-color:var(--dark)}
.cs-block.dark .cs-side{border-color:#3A3C3A}
.cs-block.dark .cs-h2 .serif,.cs-block.dark .num{color:#8E928C}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.two>div{display:grid;gap:12px;align-content:start}
.dark .plain li{color:#B9BDB7;border-color:#3A3C3A}
.dark .finds li::before{color:#8E928C}
.big-note{max-width:40ch;font-size:clamp(20px,1.9vw,28px);line-height:1.3;letter-spacing:-.015em;padding-top:18px;border-top:1px solid #3A3C3A}

/* Conversation flow: a row of stages that scrolls sideways */
.convo{overflow-x:auto;padding-bottom:10px;margin-inline:calc(clamp(18px,3.4vw,52px) * -1);padding-inline:clamp(18px,3.4vw,52px);scrollbar-width:thin}
.convo ol{display:grid;grid-auto-flow:column;grid-auto-columns:240px;gap:10px;min-width:max-content;counter-reset:none}
.convo>ol>li{position:relative;display:grid;gap:10px;align-content:start;padding:16px;background:var(--surface);border-radius:8px}
.convo>ol>li:not(:last-child)::after{content:"→";position:absolute;right:-10px;top:16px;width:10px;text-align:center;color:var(--ink-2);font-size:12px}
.stage{display:grid;gap:4px;font-size:16px;font-weight:500;letter-spacing:-.01em;line-height:1.25}
.convo li ul{display:grid;gap:6px}
.convo li li{font-size:13.5px;line-height:1.4;padding:8px 10px;background:var(--panel);border-radius:5px}
.convo li.edge{background:var(--dark);color:var(--on-dark)}
.convo li.edge li{background:#2C2E2C;color:var(--on-dark)}
.convo li.edge .muted{color:#8E928C}
.edge-tag{color:#FFB199;font-size:11px}
.hint a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* Impact */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--col-gap)}
.stats>div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:baseline;padding:18px 0;border-top:1px solid var(--rule)}
.stats .w2{grid-column:1/-1}
.stat{font-size:clamp(44px,5.4vw,92px);line-height:.9;letter-spacing:-.05em;font-weight:300;min-width:2ch}
.stats p:last-child{font-size:clamp(16px,1.25vw,18px);line-height:1.4;max-width:34ch}

/* Testimonial */
.quote{display:grid;gap:clamp(16px,2vw,24px)}
.q-big{font-size:clamp(30px,3.6vw,58px);line-height:1.04;letter-spacing:-.03em;font-weight:var(--big);max-width:18ch}
.q-big .serif{color:var(--ink-2)}
.q-body{max-width:64ch;font-size:clamp(16px,1.2vw,18px);line-height:1.6;color:var(--ink-2)}
.quote footer{display:flex;flex-wrap:wrap;gap:6px 12px;padding-top:12px;border-top:1px solid var(--rule)}

/* Next case study */
.next3{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px var(--col-gap);align-items:end;padding:clamp(22px,3.4vw,48px);text-decoration:none}
.next3 .mono{grid-column:1/-1}
.next3 .nt{font-size:clamp(30px,4vw,64px);letter-spacing:-.035em;line-height:1;font-weight:var(--big)}
.next3 .nt .serif{color:var(--ink-2);font-size:.5em;margin-left:.3em}
.next3 .go{font-size:clamp(28px,3vw,48px);transition:transform .3s}
.next3:hover .go{transform:translateX(8px)}

/* Step progress on the right edge (desktop) */
.stepnav{position:fixed;right:calc(var(--g) - 4px);top:50%;transform:translate(12px,-50%);z-index:30;display:grid;gap:2px;padding:6px;background:var(--panel);border:1px solid var(--rule);border-radius:999px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.stepnav.show{opacity:1;pointer-events:auto;transform:translate(0,-50%)}
.stepnav a{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;text-decoration:none;font-size:11px;color:var(--ink-2);transition:background .2s,color .2s}
.stepnav a:hover{color:var(--ink)}
.stepnav a.on{background:var(--ink);color:var(--panel)}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:clamp(16px,4vw,56px);background:rgba(20,22,20,.92);cursor:zoom-out}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:6px;background:#fff}
.lb-close{all:unset;position:absolute;top:16px;right:var(--g);cursor:pointer;color:#fff;font-family:var(--f-mono);font-size:12px;text-transform:uppercase}

/* Tablet */
@media (max-width:1100px){
  .principles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs3 .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stepnav{display:none}
}
@media (max-width:900px){
  .cs-hero{grid-template-columns:1fr;grid-template-areas:"text" "meta" "cover"}
  .cs-hero-text{border-right:0}
  .meta{border-top:1px solid var(--rule)}
  .cs-block{grid-template-columns:1fr}
  .cs-side{border-right:0;border-bottom:1px solid var(--rule);display:flex;align-items:baseline;gap:14px;padding-block:14px}
  .cs-side>*{position:static}
  .cs-side .num{font-size:32px;margin:0}
  .split,.split.a11y,.two,.ov{grid-template-columns:1fr}
  .cards3,.verify{grid-template-columns:1fr}
  .zoom.phone{justify-self:start}
  .stats{grid-template-columns:1fr}
}
/* Phone */
@media (max-width:560px){
  .gal.g2,.gal.g3,.cs3 .flow,.probs,.principles,.feat{grid-template-columns:1fr}
  .feat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats>div{grid-template-columns:1fr;gap:8px}
}
@media (prefers-reduced-motion:reduce){.zoom img,.phase a .arr,.next3 .go{transition:none}}

/* ---------- Shared case study template (all projects) ---------- */
.cs-hero.solo{grid-template-columns:1fr;grid-template-areas:"text" "meta" "cover"}
.cs-hero.solo .cs-hero-text{border-right:0}
.cs-hero.solo .meta{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border-top:1px solid var(--rule)}
.cs-hero.solo .meta div{border-top:0;border-left:1px solid var(--rule)}
.cs-hero.solo .meta div:first-child{border-left:0}
.cs-cover.light{background:var(--surface)}
.cs-cover.light{grid-template-columns:minmax(0,1fr)}
.cs-cover.light img{width:auto;max-width:100%;max-height:min(70vh,640px);border:0;justify-self:center}
.ov1{display:grid;gap:10px;padding-top:12px;border-top:1px solid var(--ink)}
.lead-p{max-width:64ch}

/* Contents */
.toc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.toc a{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;gap:8px;align-items:baseline;height:100%;box-sizing:border-box;padding:12px;background:var(--surface);border-radius:6px;text-decoration:none;font-size:15px;line-height:1.3;transition:background .2s,color .2s}
.toc a .arr{color:var(--ink-2);transition:transform .25s}
.toc a:hover{background:var(--ink);color:var(--panel)}
.toc a:hover .muted,.toc a:hover .arr{color:#A9ADA7}
.toc a:hover .arr{transform:translateY(3px)}

/* Images from the content files */
.gal.g1{grid-template-columns:1fr}
.cs3 figure.narrow{max-width:520px}
.cs3 figure.phone{max-width:300px}
.fig-link{position:relative;display:block;text-decoration:none}
.fig-go{position:absolute;right:10px;bottom:10px;padding:5px 10px;border-radius:999px;background:var(--ink);color:var(--panel);font-size:11px;opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s}
.fig-link:hover .fig-go,.fig-link:focus-visible .fig-go{opacity:1;transform:none}
.cs-main>.zoom+.zoom{margin-top:clamp(4px,1vw,12px)}

/* Numbered points */
.pts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--col-gap)}
.pts li{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:8px;align-items:baseline;padding:16px;background:var(--surface);border-radius:6px;font-size:clamp(16px,1.2vw,18px);line-height:1.4}

/* Small stats */
.kstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:0 var(--col-gap)}
.kstats div{display:grid;gap:8px;padding:16px 0;border-top:1px solid var(--rule)}
.kstats .stat{font-size:clamp(40px,4.4vw,72px)}

/* Quotes from people */
.kquotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--col-gap)}
.kq{display:grid;gap:16px;align-content:space-between;padding:clamp(16px,1.8vw,24px);background:var(--surface);border-radius:6px;margin:0}
.kq blockquote{margin:0;font-size:clamp(17px,1.35vw,20px);line-height:1.4;letter-spacing:-.01em}
.kq figcaption{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;font-size:15px}
.kq figcaption span{grid-column:2}
.kq .avatar{grid-row:1/span 2;width:44px;height:44px;border-radius:50%;object-fit:cover;border:0}
.kq .avatar.ph{display:grid;place-items:center;background:var(--panel);font-size:16px;color:var(--ink-2)}

/* Statement panel (# lines) */
.cs-state{background:var(--dark);color:var(--on-dark);border-color:var(--dark);display:grid;gap:clamp(20px,3vw,40px);padding:clamp(28px,5vw,72px) clamp(18px,3.4vw,52px)}
.cs-state-t{font-size:clamp(28px,3.6vw,58px);line-height:1.08;letter-spacing:-.03em;font-weight:var(--big);max-width:24ch;text-wrap:balance}
.cs-state .cs-main{padding:0}

@media (max-width:900px){
  .toc,.pts{grid-template-columns:1fr}
  .cs-hero.solo .meta{grid-auto-flow:row}
  .cs-hero.solo .meta div{border-left:0;border-top:1px solid var(--rule)}
  .cs-hero.solo .meta div:first-child{border-top:0}
}

/* ---------- About ---------- */
.about3{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.about3-photo{margin:0;padding:clamp(18px,2.4vw,32px);border-right:1px solid var(--rule)}
.cs3 .about3-photo img{width:100%;max-width:340px;aspect-ratio:8/9;object-fit:cover;border:0;border-radius:6px;position:sticky;top:90px}
.about3-copy{display:grid;gap:clamp(18px,2.2vw,28px);align-content:start;padding:clamp(22px,3.4vw,52px)}
.about3-text{display:grid;gap:16px;max-width:60ch}
.about3-text p{font-size:clamp(17px,1.35vw,20px);line-height:1.55}
.about3-text p:last-child{font-family:var(--f-serif);font-weight:var(--acc-weight);font-size:clamp(24px,2.2vw,34px);line-height:1.15;color:var(--ink-2)}
.about3-links{padding:0}
.cs3 .about3-wide{margin:0;padding:0}
.cs3 .about3-wide img{width:100%;aspect-ratio:3/1;object-fit:cover;border:0;border-radius:0}
@media (max-width:900px){
  .about3{grid-template-columns:1fr}
  .about3-photo{border-right:0;border-bottom:1px solid var(--rule)}
  .cs3 .about3-photo img{max-width:240px;position:static}
  .cs3 .about3-wide img{aspect-ratio:16/9}
}
.cs3 .about3-links .pill{color:var(--panel);text-decoration:none}

/* ---------- BNY: added sections ---------- */
/* Yellow notes: only visible in local preview (npm run dev), never on the live site */
.todo{background:#FFF3B0;color:#5C4A00;padding:1px 6px;border-radius:4px;font-size:.92em;text-transform:none;letter-spacing:0}
p.todo{display:block;padding:10px 12px;line-height:1.45}
.todo-card{padding:14px;border:1px dashed #D9B800;border-radius:6px;background:#FFFBE6}
.cs-h3x{font-size:clamp(22px,2.2vw,34px);line-height:1.08;letter-spacing:-.025em;font-weight:var(--big);margin:0}
.cs-h3x .serif{color:var(--ink-2)}

/* Goals */
.goals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--col-gap)}
.goals div{display:grid;gap:10px;align-content:start;padding:16px;background:var(--surface);border-radius:6px}

/* Personas */
.personas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap)}
.persona{display:grid;gap:14px;align-content:start;padding:clamp(16px,1.8vw,22px);border:1px solid var(--rule);border-radius:8px}
.p-head{display:flex;gap:12px;align-items:center}
.p-ico{display:grid;place-items:center;width:44px;height:44px;flex:0 0 auto;border-radius:50%;background:var(--ink);color:var(--panel);font-family:var(--f-mono);font-size:12px}
.persona dl{display:grid;gap:10px;margin:0}
.persona dl div{display:grid;gap:3px;padding-top:10px;border-top:1px solid var(--rule)}
.persona dd{margin:0;font-size:15px;line-height:1.4}

/* Journey map */
.journey{overflow-x:auto;padding-bottom:6px}
.j-grid{display:grid;grid-template-columns:5.5rem repeat(5,minmax(150px,1fr));gap:8px;min-width:820px;align-items:stretch}
.j-lab{align-self:center;font-size:11px}
.j-st{padding:10px 12px;background:var(--ink);color:var(--panel);border-radius:6px;font-size:14px;font-weight:500}
.j-pain,.j-gain{margin:0;padding:12px;border-radius:6px;font-size:14px;line-height:1.4}
.j-pain{background:#FBEDEA;color:#6B2A1E}
.j-gain{background:#EAF0FF;color:#1E2E7A}
.j-mood{display:grid;place-items:center;padding:8px;border-radius:999px;font-size:13px;border:1px solid var(--rule);position:relative}
.j-mood::before{content:"";width:8px;height:8px;border-radius:50%;margin-bottom:4px;background:#E0654A}
.j-mood[data-m="1"]::before{background:#E8A33D}
.j-mood[data-m="2"]::before{background:#C9C24A}

/* AI response patterns */
.chats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--col-gap)}
.chat{margin:0;display:grid;gap:8px;align-content:start;padding:14px;background:#14152A;border-radius:10px;color:#E6E8F5;min-height:220px}
.chat figcaption{color:#9DA3D8;font-size:11px;margin-bottom:4px}
.bub{display:grid;gap:6px;padding:10px 12px;border-radius:10px;font-size:13px;line-height:1.35;max-width:92%}
.bub.me{justify-self:end;background:#3B3FA8;color:#fff;border-bottom-right-radius:3px}
.bub.bot{background:#24264A;border-bottom-left-radius:3px}
.bub b{font-weight:600}
.ln{display:block;height:7px;border-radius:4px;background:#3A3D6E}
.ln.s{width:60%}
.src{font-size:10px;color:#9FB2FF;text-transform:none;margin-top:2px}
.acts,.chips{display:flex;flex-wrap:wrap;gap:6px;font-size:10px;text-transform:none}
.acts span,.chips span{padding:4px 8px;border-radius:999px;border:1px solid #3A3D6E;color:#C9CCEB}
.ticket{display:grid;gap:4px;padding:10px;border-radius:8px;border:1px dashed #6E74C9;font-size:11px;text-transform:none}
.ticket .muted{color:#9DA3D8}
.rate{display:flex;justify-content:space-between;align-items:center;font-size:11px;text-transform:none;color:#C9CCEB}

/* Validation */
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px var(--col-gap)}
.vgrid>div{display:grid;gap:6px;align-content:start;padding-top:12px;border-top:1px solid var(--ink)}
.vgrid>div.todo-card{border-top:1px dashed #D9B800}
.vgrid p:last-child{font-size:15px;line-height:1.45;color:var(--ink-2)}

/* Reflection */
.reflect{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap)}
.reflect>div{display:grid;gap:8px;align-content:start;padding:16px;background:var(--surface);border-radius:6px}
.reflect p:last-child{font-size:15px;line-height:1.5;color:var(--ink-2)}
.num-s{color:var(--ink-2)}

@media (max-width:1100px){.goals,.chats{grid-template-columns:repeat(2,minmax(0,1fr))}.vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.personas,.reflect{grid-template-columns:1fr}}
@media (max-width:560px){.goals,.chats,.vgrid{grid-template-columns:1fr}}

/* ---------- Video & prototype (project pages) ---------- */
.cs-jump{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.cs3 .cs-jump .pill,.cs3 #prototype .pill{color:var(--panel);text-decoration:none}
.yt{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#111}
.yt-frame,.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-sound{all:unset;position:absolute;left:14px;bottom:14px;z-index:2;cursor:pointer;padding:8px 14px;border-radius:999px;background:var(--panel);color:var(--ink);font-family:var(--f-mono);font-size:12px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.yt-sound[hidden]{display:none}
.fig-embed{position:relative;aspect-ratio:16/10;border-radius:8px;overflow:hidden;border:1px solid var(--rule);background:var(--surface)}
.fig-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hint a{color:var(--ink);text-underline-offset:3px}

/* LinkedIn card on case pages */
.quote .li-card{max-width:720px}
/* Certifications (About) */
.certs{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.certs li{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 9.5rem;gap:6px var(--col-gap);align-items:baseline;padding:14px 0;border-bottom:1px solid var(--rule)}
.cert-name{font-size:clamp(16px,1.3vw,19px);letter-spacing:-.01em}
.certs .mono{text-transform:none}
.certs a{text-decoration:none;border-bottom:1px solid var(--rule);justify-self:end}
.certs a:hover{border-color:currentColor}
@media (max-width:700px){.certs li{grid-template-columns:1fr}.certs a{justify-self:start}}

/* BNY: API Wizard before/after and memories */
.ba{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:var(--col-gap);align-items:start}
.ba figcaption b{font-weight:500;color:var(--ink)}
.cs3 .memories{max-width:640px}
.cs3 .memories img{border-radius:8px}
@media (max-width:700px){.ba{grid-template-columns:1fr}}
.cs3 .wizard-final{max-width:820px}
.cs3 .tall-page .tall-scroll{max-height:560px;overflow-y:auto;border:1px solid var(--rule);border-radius:8px}
.cs3 .tall-page img{display:block;width:100%;height:auto}
/* Conversation flow (BNY): five steps in a row */
.cflow{list-style:none;margin:28px 0 10px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;counter-reset:none}
.cflow li{display:grid;gap:6px;align-content:start;padding:16px;border-radius:10px;background:var(--panel-2,#F1F2EF);position:relative}
.cflow li p:last-child{font-size:14px;line-height:1.4;color:var(--ink-2)}
.cflow li:not(:last-child)::after{content:"→";position:absolute;right:-10px;top:16px;font-size:13px;color:var(--ink-2)}
.cflow li.edge{background:var(--ink);color:#fff}
.cflow li.edge p:last-child{color:#C9CCC6}
.fixes .c-t{font-size:clamp(16px,1.25vw,19px)}
@media (max-width:900px){.cflow{grid-template-columns:1fr 1fr}.cflow li::after{display:none}}
@media (max-width:520px){.cflow{grid-template-columns:1fr}}
.principles.fixes p:last-child{color:var(--ink);font-size:clamp(16px,1.25vw,19px)}
.chat-real{cursor:zoom-in}
.chat-real img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid #2A2C4A}
.cs3 .rate-strip{margin-top:var(--col-gap)}
.cs3 .rate-strip img{border-radius:8px}
/* Journey map v2 */
.jm{overflow-x:auto;padding-bottom:6px}
.jm-grid{display:grid;grid-template-columns:7rem repeat(5,minmax(140px,1fr));gap:10px 12px;min-width:860px;align-items:start}
.jm-st{margin:0;display:grid;gap:4px;padding:12px 0 10px;border-top:2px solid var(--ink);font-size:16px;font-weight:500;line-height:1.25}
.jm-st span{font-size:11px;font-weight:400}
.jm-lab{margin:0;font-size:11px;line-height:1.3;align-self:center;display:flex;align-items:center;gap:6px}
.jm-curve{grid-column:2 / -1;position:relative;height:150px;background:linear-gradient(var(--rule) 1px,transparent 1px) 0 50%/100% 50%;border-radius:8px;margin:4px 0 8px}
.jm-curve svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.jm-curve polyline{fill:none;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.jm-curve .before{stroke:#E0654A;stroke-dasharray:4 4}
.jm-curve .after{stroke:var(--accent)}
.jm-dot{position:absolute;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);border:2px solid var(--panel)}
.jm-dot.b{background:#E0654A}
.jm-dot.a{background:var(--accent)}
.jm-dot em{position:absolute;top:14px;left:50%;transform:translateX(-50%);white-space:nowrap;font-style:normal;font-size:11px;color:#B5432B}
.jm-pain,.jm-fix{margin:0;padding:12px;border-radius:8px;font-size:14px;line-height:1.4;height:100%}
.jm-pain{background:#FBEDEA;color:#6B2A1E}
.jm-fix{background:#EAEEFF;color:#1E2E7A}
.sw{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none}
.sw.b{background:#E0654A}.sw.a{background:var(--accent)}
.jm-key{display:flex;gap:20px;font-size:11px;margin:14px 0 0}
.jm-key span{display:flex;align-items:center;gap:6px}
.jm-key .ln{display:inline-block;width:22px;height:0;border-top:2px solid var(--accent)}
.jm-key .ln.b{border-top:2px dashed #E0654A}
/* Journey map faces */
.jm-curve{height:230px}
.jm-face{position:absolute;width:34px;height:34px;transform:translate(-50%,-50%);z-index:1;animation:jm-pop .5s cubic-bezier(.3,1.6,.5,1) both;animation-delay:var(--d,0s)}
.jm-face>span,.jm-face svg{display:block;width:100%;height:100%}
.jm-face svg{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.jm-face:hover svg{transform:scale(1.25) rotate(-6deg)}
.jm-face.b svg{stroke:#B5432B}.jm-face.b .bg{fill:#FBEDEA}.jm-face.b .f{fill:#B5432B}
.jm-face.a svg{stroke:var(--accent)}.jm-face.a .bg{fill:#EAEEFF}.jm-face.a .f{fill:var(--accent)}
.jm-face .blush{fill:#F4A3B4;stroke:none}
.jm-face .z{stroke-width:1.2}
.jm-face em{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;font-style:normal;font-size:11px}
.jm-face.b em{top:38px;color:#B5432B}
.jm-face.a em{bottom:38px;color:var(--accent)}
.jm-face.b{animation-name:jm-pop,jm-wobble;animation-duration:.5s,3.2s;animation-iteration-count:1,infinite;animation-delay:var(--d,0s),calc(var(--d,0s) + 1s)}
@keyframes jm-pop{from{opacity:0;transform:translate(-50%,-50%) scale(.3)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes jm-wobble{0%,86%,100%{transform:translate(-50%,-50%) rotate(0)}90%{transform:translate(-50%,-50%) rotate(-8deg)}95%{transform:translate(-50%,-50%) rotate(6deg)}}
@media (prefers-reduced-motion:reduce){.jm-face,.jm-face.b{animation:none}}
/* More work at BNY */
.more-proj{padding-top:clamp(28px,4vw,48px);margin-top:clamp(28px,4vw,48px);border-top:1px solid var(--rule)}
.more-proj:first-of-type{border-top:0;margin-top:8px;padding-top:0}
.more-proj .cs-p{max-width:60ch;margin-bottom:18px}
.gal.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--col-gap)}
.repair-cards img{border-radius:12px;box-shadow:0 1px 0 var(--rule)}
@media (max-width:900px){.gal.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.more-proj .cs-h3x{margin:6px 0 12px}
/* Journey map: native emoji faces */
.jm-face{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--panel)}
.jm-face .emo{display:block;width:auto;height:auto;font-size:20px;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.jm-face:hover .emo{transform:scale(1.3) rotate(-6deg)}
.jm-face.b em{top:34px}.jm-face.a em{bottom:34px}
/* Passcode gate (see scripts/protect.mjs) */
.lock{min-height:62vh;display:grid;place-items:center;padding:clamp(28px,6vw,80px) var(--g,20px)}
.lock-in{max-width:34rem;display:grid;gap:16px}
.lock-h{font-size:clamp(34px,4.6vw,64px);line-height:1.02;letter-spacing:-.035em;font-weight:var(--big);margin:0}
.lock-h .serif{color:var(--ink-2)}
.lock-p{margin:0;font-size:17px;line-height:1.5;color:var(--ink-2)}
.lock-p a{color:var(--ink)}
.lock-f{display:flex;gap:10px;margin-top:8px}
.lock-f input{flex:1;min-width:0;font:inherit;font-size:17px;padding:12px 18px;border:1px solid var(--rule);border-radius:999px;background:var(--panel);color:var(--ink)}
.lock-f input:focus{outline:2px solid var(--accent);outline-offset:1px}
.lock-f.busy{opacity:.6;pointer-events:none}
.lock-err{color:#B5432B;font-size:12px;margin:0}
.lock.trying .lock-in{visibility:hidden}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lock-in{min-width:0;width:100%}
@media (max-width:520px){.lock-f{flex-direction:column}.lock-f .pill{justify-content:center}}
/* Jobs-to-be-done map (Amazon Explore) */
.jtbd{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:8px}
.jt-group{display:grid;gap:16px;align-content:start}
.jt-job{justify-self:center;text-align:center;display:grid;gap:4px;padding:16px 26px;border-radius:16px;background:linear-gradient(135deg,#FF9F1C,#FF7A3D);color:#1B1C1B;max-width:30ch;position:relative}
.jt-job .mono{font-size:10.5px;opacity:.75;text-transform:uppercase;letter-spacing:.06em}
.jt-job p{margin:0;font-size:17px;line-height:1.3;font-weight:500}
.jt-job::after{content:"";position:absolute;left:50%;bottom:-16px;width:1px;height:16px;background:var(--rule)}
.jt-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:14px;border-top:1px solid var(--rule)}
.jt-col{display:grid;gap:10px;align-content:start}
.jt-col>p.mono{margin:0;font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.jt-card{margin:0;padding:12px 14px;border-radius:12px;background:#E3EEFF;color:#14203F;font-size:14.5px;line-height:1.38}
.jt-col:nth-child(2) .jt-card{background:#F1E9FF;color:#2A1A4A}
@media (max-width:900px){.jtbd{grid-template-columns:1fr}}
@media (max-width:520px){.jt-cols{grid-template-columns:1fr}}
/* 4-up galleries (e.g. EduNexus interview notes): smaller, never stretched */
.cs3 .gal.g4{grid-template-columns:repeat(4,minmax(0,1fr));max-width:760px}
.cs3 .gal.g4 img{width:100%;height:auto;object-fit:contain}
@media (max-width:700px){.cs3 .gal.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}