/* ============================================================
   Case-study components — shares tokens from style.css
   Backgrounds map to Figma: ivory #faf7f2 (default) · paper #fff (.bg-paper)
   · warm #fdfbf6 (.bg-warm) · cream #f3ecdf (.bg-cream) · dark #1a1817 (.bg-dark)
   ============================================================ */

/* dark-section text overrides */
.bg-dark .body,.bg-dark .lead,.bg-dark p{color:rgba(255,255,255,.74)}
.bg-dark .muted{color:rgba(255,255,255,.5)}

/* ---------- case-study nav (brand + back) ---------- */
.csnav__back{display:inline-flex;align-items:center;gap:.5em;min-height:44px;box-sizing:border-box;font:600 14.5px/1 var(--fu);color:var(--ink);
  border:1.5px solid var(--line);padding:11px 18px;border-radius:var(--r-pill);transition:.25s var(--ease)}
.csnav__back:hover{border-color:var(--ink);background:rgba(26,24,23,.03);transform:translateY(-2px)}
.csnav__back .arr{transition:transform .25s var(--ease)}
.csnav__back:hover .arr{transform:translateX(-3px)}

/* ---------- hero ---------- */
.cs-hero{position:relative;overflow:hidden;padding-top:calc(var(--nav-h) + clamp(36px,6vw,72px));padding-bottom:clamp(40px,6vw,72px)}
.cs-hero__glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;z-index:0;pointer-events:none}
.cs-hero__glow--1{width:620px;height:460px;top:-90px;right:-140px;background:radial-gradient(circle,#f4d8cf,transparent 70%)}
.cs-hero__glow--2{width:500px;height:380px;top:240px;left:-160px;background:radial-gradient(circle,#dcd9f2,transparent 70%)}
.cs-hero .wrap{position:relative;z-index:1}
.cs-eyebrow-row{display:flex;align-items:center;gap:10px}
.cs-eyebrow-row .dot{width:8px;height:8px;border-radius:50%;background:var(--terra)}
.cs-title{font-family:var(--fd);font-weight:600;font-size:clamp(2.8rem,7vw,5rem);line-height:1;letter-spacing:-.02em;margin-top:18px}
.cs-hook{font-family:var(--fd);font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.18;color:var(--ink);margin-top:18px;max-width:20ch}
.cs-summary{font-size:clamp(1.05rem,1.6vw,1.22rem);line-height:1.6;color:var(--body);margin-top:20px;max-width:62ch}
.cs-collage{margin-top:clamp(28px,4vw,44px);border-radius:var(--r-card);background:linear-gradient(135deg,#f6e4dc 0%,#faf7f2 50%,#e3e0f5 100%);
  padding:clamp(18px,3vw,32px);display:flex;justify-content:center}
.cs-collage img{width:100%;max-width:980px;height:auto;display:block}
.cs-thesis{margin-top:clamp(24px,3vw,36px);display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(20px,3vw,40px);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(22px,3vw,32px);box-shadow:var(--shadow-card)}
.cs-thesis__h{font:600 11px/1 var(--fu);letter-spacing:.14em;text-transform:uppercase;color:var(--terra-dark)}
.cs-thesis__t{font-family:var(--fd);font-size:clamp(1.1rem,1.8vw,1.35rem);line-height:1.3;margin-top:10px}
.cs-thesis__c{font-size:15px;color:var(--body);margin-top:8px}
.formula{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.formula .fchip{display:inline-flex;align-items:center;gap:8px;font:500 13px/1 var(--fu);color:var(--ink);
  background:var(--cream);border-radius:var(--r-pill);padding:9px 14px}
.formula .fchip .d{width:7px;height:7px;border-radius:50%;background:var(--terra)}
.formula .op{color:var(--terra);font-weight:600}

/* ---------- metadata strip ---------- */
.meta-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2vw,28px)}
.meta-col .mk{font:600 11px/1 var(--fu);letter-spacing:.12em;text-transform:uppercase;color:var(--terra-dark);margin-bottom:8px}
.meta-col p{font-size:14.5px;color:var(--ink);line-height:1.45}

/* ---------- section heads ---------- */
.sec-head{max-width:760px}
.sec-head .h2{margin-top:12px}
.sec-head .body{margin-top:14px}
.sec-num{font:600 12px/1 var(--fu);letter-spacing:.12em;text-transform:uppercase;color:var(--terra-dark)}

/* ---------- phase tags ---------- */
.phase-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:22px}
.phase-badge{font:600 11px/1 var(--fu);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--terra);padding:8px 14px;border-radius:var(--r-pill)}
.phase-badge--ghost{color:var(--body);background:transparent;border:1px solid var(--line)}
.bg-cream .phase-badge--ghost{border-color:rgba(26,24,23,.18)}

/* ---------- product CTAs ---------- */
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.btn--disabled{background:var(--cream);color:var(--muted);border:1px dashed var(--line);cursor:not-allowed}
.btn--disabled:hover{transform:none}
.cta-note{font-size:12.5px;color:var(--muted);margin-top:10px}

/* role card */
.rolecard{margin-top:28px;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--terra);
  border-radius:var(--r-card);padding:clamp(22px,3vw,30px);box-shadow:var(--shadow-sm)}
.rolecard h3{font:600 11px/1 var(--fu);letter-spacing:.12em;text-transform:uppercase;color:var(--terra-dark)}
.rolecard p{font-size:15px;color:var(--body);margin-top:10px;line-height:1.6}

/* ---------- galleries ---------- */
.galhead{max-width:760px;margin-bottom:clamp(28px,3.5vw,40px)}
.galhead .h3{margin-top:10px}
.galhead .body{margin-top:12px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,210px));gap:clamp(16px,2vw,26px);justify-content:center;align-items:end}
.shot{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.shot img{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 40px rgba(26,24,23,.16))}
.shot .cap{font:600 12px/1.3 var(--fu);color:var(--body)}
.shot .cap small{display:block;font-weight:500;color:var(--muted);margin-top:3px;letter-spacing:.04em;text-transform:uppercase;font-size:10.5px}
.gallery--wide{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));max-width:760px;margin-inline:auto}
.gallery--5{grid-template-columns:repeat(5,minmax(0,1fr))}   /* mentor flow: 5-in-a-row on desktop */
@media (max-width:980px){.gallery--5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.gallery--5{grid-template-columns:repeat(2,1fr)}}
@media (max-width:430px){.gallery--5{grid-template-columns:1fr;max-width:280px;margin-inline:auto}}

/* ---------- design system boards ---------- */
.ds-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,28px);margin-top:clamp(28px,3.5vw,40px)}
.ds-board{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--paper);box-shadow:var(--shadow-sm)}
.ds-board img{width:100%;height:auto;display:block}
.ds-board figcaption{font:600 11px/1 var(--fu);letter-spacing:.12em;text-transform:uppercase;color:var(--terra-dark);padding:14px 18px;border-top:1px solid var(--line)}
.ds-source{font-size:12.5px;color:var(--muted);margin-top:16px}

/* ---------- primitives strip ---------- */
.prims{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.6vw,20px);margin-top:clamp(28px,3.5vw,40px)}
.prim{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:20px;display:flex;flex-direction:column;gap:6px}
.prim h3{font-family:var(--fd);font-size:17px}
.prim .use{font:600 11px/1 var(--fu);letter-spacing:.06em;text-transform:uppercase;color:var(--terra-dark)}
.prim .ex{font-size:13px;color:var(--muted);margin-top:auto;padding-top:8px}

/* ---------- generic mini-card grids (decisions, persona, journey, modules, learning, scope, sprints) ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,24px)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px)}
.mcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:10px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.mcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.mcard .k{font:600 11px/1 var(--fu);letter-spacing:.1em;text-transform:uppercase;color:var(--terra-dark)}
.mcard h3{font-family:var(--fd);font-size:clamp(1.05rem,1.6vw,1.3rem)}
.mcard p{font-size:14.5px;color:var(--body);line-height:1.55}
.mcard .n{font-family:var(--fd);font-size:30px;color:var(--terra);line-height:1}
.section--cards .sec-head{margin-bottom:clamp(28px,3.5vw,44px)}

/* sprints (5) */
.sprints{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.4vw,18px);margin-top:clamp(28px,3.5vw,40px)}
.sprint{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:20px;display:flex;flex-direction:column;gap:8px}
.sprint .n{font-family:var(--fd);font-size:22px;color:var(--terra);line-height:1}
.sprint h3{font-family:var(--fd);font-size:16px}
.sprint p{font-size:13px;color:var(--body);line-height:1.5}

/* chronology (dark) */
.chrono{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);margin-top:clamp(28px,3.5vw,40px)}
.chrono .step{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-card);padding:clamp(20px,2.4vw,28px)}
.chrono .when{font:600 11px/1 var(--fu);letter-spacing:.1em;text-transform:uppercase;color:var(--dark-warm)}
.chrono h3{font-family:var(--fd);font-size:clamp(1.05rem,1.6vw,1.25rem);color:#fff;margin-top:10px}
.chrono p{font-size:14px;color:rgba(255,255,255,.72);margin-top:8px;line-height:1.55}

/* journey (5 numbered) */
.journey{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.6vw,20px);margin-top:clamp(28px,3.5vw,40px)}
.jstep{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:22px;display:flex;flex-direction:column;gap:8px}
.jstep .n{font-family:var(--fd);font-size:26px;color:var(--terra);line-height:1}
.jstep h3{font-family:var(--fd);font-size:16px}
.jstep p{font-size:13.5px;color:var(--body);line-height:1.5}

/* sketches */
.evidence{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);margin:clamp(24px,3vw,36px) 0;
  padding:clamp(22px,3vw,30px);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-sm)}
@media (max-width:760px){.evidence{grid-template-columns:1fr;gap:18px}}
.sketch-block + .sketch-block{margin-top:clamp(28px,4vw,48px)}
.sketch-head{display:flex;align-items:baseline;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.sketch-head .ed{font:600 11px/1 var(--fu);letter-spacing:.12em;text-transform:uppercase;color:var(--terra-dark)}
.sketch-head h3{font-family:var(--fd);font-size:clamp(1.2rem,2vw,1.5rem)}
.sketch-fig{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--paper);box-shadow:var(--shadow-sm)}
.sketch-fig img{width:100%;height:auto;display:block}
.caps{display:grid;gap:clamp(14px,1.8vw,22px);margin-top:18px}
.caps--3{grid-template-columns:repeat(3,1fr)}
.caps--4{grid-template-columns:repeat(4,1fr)}
.capx .k{font:600 10.5px/1 var(--fu);letter-spacing:.08em;text-transform:uppercase;color:var(--terra-dark)}
.capx h3{font-family:var(--fd);font-size:15px;margin-top:6px}
.capx p{font-size:13px;color:var(--body);margin-top:6px;line-height:1.5}
.provenance{margin-top:22px;font-size:13px;color:var(--muted);background:var(--paper-warm);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 18px;line-height:1.6}
/* real paper-wireframe cards (rotated photos) */
.wfreal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px);margin-top:clamp(18px,2.4vw,26px)}
.wfreal{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column}
.wfreal img{width:100%;height:auto;display:block;background:#fbfaf8;border-bottom:1px solid var(--line)}
.wfreal .k{font:600 10.5px/1 var(--fu);letter-spacing:.08em;text-transform:uppercase;color:var(--terra-dark);padding:16px 18px 0}
.wfreal h3{font-family:var(--fd);font-size:16px;padding:6px 18px 0}
.wfreal p{font-size:13px;color:var(--body);line-height:1.5;padding:8px 18px 18px;margin-top:auto}
@media (max-width:980px){.wfreal-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.wfreal-grid{grid-template-columns:1fr}}
/* how-to card icons */
.howicon{width:48px;height:48px;display:block;margin-bottom:4px}

/* ============ case-study extras (WellAI →) ============ */
/* research artefacts */
.artefacts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,28px);margin-top:clamp(28px,3.5vw,40px)}
.artefact{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(22px,2.6vw,28px);display:flex;flex-direction:column}
.artefact .k{font:600 11px/1 var(--fu);letter-spacing:.1em;text-transform:uppercase;color:var(--terra-dark)}
.artefact h3{font-family:var(--fd);font-size:clamp(1.1rem,1.7vw,1.3rem);margin-top:8px}
.doc-chrome{display:flex;align-items:center;gap:9px;margin-top:16px;padding:8px 12px;background:var(--cream);border-radius:8px;font:500 12px/1 var(--fu);color:var(--muted)}
.doc-chrome .dot{width:8px;height:8px;border-radius:50%;background:var(--terra)}
.artefact img{width:100%;height:auto;display:block;margin-top:14px;border:1px solid var(--line);border-radius:8px;background:#fff}
.artefact .src{font-size:12px;color:var(--muted);margin-top:12px}

/* persona */
.persona-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,28px);margin-top:clamp(28px,3.5vw,40px);align-items:start}
.persona-fig{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:20px;box-shadow:var(--shadow-sm)}
.persona-fig img{width:100%;height:auto;display:block;border-radius:8px;border:1px solid var(--line)}
.persona-fig .src{font-size:12px;color:var(--muted);margin-top:12px}
.persona-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(26px,3vw,32px)}
.persona-card h3{font-family:var(--fd);font-size:clamp(1.4rem,2.4vw,1.9rem)}
.persona-card .who{font-size:14px;color:var(--muted);margin-top:4px}
.persona-grp{margin-top:22px}
.persona-grp .k{font:600 11px/1 var(--fu);letter-spacing:.1em;text-transform:uppercase;color:var(--terra-dark)}
.persona-grp li{display:flex;gap:10px;font-size:14.5px;color:var(--body);line-height:1.5;margin-top:9px}
.persona-grp li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--terra);margin-top:8px}
.cs-note{font-size:12.5px;color:var(--muted);margin-top:20px}

/* insights */
.insight{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(22px,2.4vw,28px);display:flex;flex-direction:column}
.insight .num{font-family:var(--fd);font-size:32px;color:var(--terra);line-height:1}
.insight .k{font:600 11px/1 var(--fu);letter-spacing:.1em;text-transform:uppercase;color:var(--terra-dark);margin-top:14px}
.insight p{font-size:14.5px;color:var(--body);line-height:1.55;margin-top:8px}
.insight .rule{height:1px;width:40px;background:var(--line);margin:18px 0 0}
.insight .op{font:600 11px/1 var(--fu);letter-spacing:.1em;text-transform:uppercase;color:var(--terra-dark);margin-top:16px}
.insight .od{font-size:14px;color:var(--body);line-height:1.5;margin-top:8px}

/* flow rail */
.flowrail{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:clamp(26px,3vw,36px)}
.flownode{font:600 14px/1.3 var(--fu);color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill);padding:14px 20px;text-align:center}
.flowrail .farr{color:var(--terra);font-size:18px}

/* decision rows */
.decisionrow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(16px,2vw,24px);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(20px,2.4vw,26px)}
.decisionrow + .decisionrow{margin-top:16px}
.decisionrow .k{font:600 11px/1 var(--fu);letter-spacing:.1em;text-transform:uppercase;color:var(--terra-dark)}
.decisionrow p{font-size:14.5px;color:var(--body);line-height:1.5;margin-top:8px}
.decisionrow .ev{font-family:var(--fd);font-size:15px;color:var(--ink);margin-top:8px}
.decisions-wrap{margin-top:clamp(28px,3.5vw,40px)}

/* hi-fi screens grid */
.screens-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,32px);margin-top:clamp(28px,3.5vw,40px)}
.screen{display:flex;flex-direction:column;gap:14px;align-items:center}
.screen img{width:100%;max-width:300px;height:auto;display:block;border-radius:18px;box-shadow:var(--shadow-card)}
.screen .cap{font:600 13px/1 var(--fu);color:var(--body)}

/* annotated block */
.anno-block{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,4vw,56px);align-items:center;margin-top:clamp(32px,4vw,52px);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(24px,3vw,40px)}
.anno-block img{width:100%;max-width:280px;height:auto;display:block;margin:0 auto;border-radius:18px;box-shadow:var(--shadow-card)}
.anno-block .k{font:600 11px/1 var(--fu);letter-spacing:.1em;text-transform:uppercase;color:var(--terra-dark)}
.anno-block h3{font-family:var(--fd);font-size:clamp(1.3rem,2.2vw,1.7rem);margin-top:10px}
.anno-list{margin-top:18px;display:flex;flex-direction:column;gap:14px}
.anno-list li{display:flex;gap:14px;align-items:flex-start}
.anno-list .n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--terra);color:#fff;font:600 13px/28px var(--fu);text-align:center}
.anno-list p{font-size:14px;color:var(--body);line-height:1.5}

/* usability findings */
.findings{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,26px);margin-top:clamp(28px,3.5vw,40px)}
.finding{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(22px,2.4vw,28px);display:flex;flex-direction:column}
.finding-badge{align-self:flex-start;font:600 11px/1 var(--fu);letter-spacing:.06em;text-transform:uppercase;padding:7px 12px;border-radius:var(--r-pill)}
.finding-badge--v{background:var(--terra-soft);color:var(--terra-dark)}
.finding-badge--c{background:#e3efe6;color:#2f6b46}
.finding h3{font-family:var(--fd);font-size:clamp(1.05rem,1.7vw,1.25rem);margin-top:18px}
.finding .scr{font:500 12px/1 var(--fu);color:var(--muted);margin-top:8px}
.finding p{font-size:14px;color:var(--body);line-height:1.55;margin-top:12px}
.finding .rule{height:1px;width:40px;background:var(--line);margin:18px 0 0}
.finding .ck{font:600 11px/1 var(--fu);letter-spacing:.08em;text-transform:uppercase;color:var(--terra-dark);margin-top:16px}
.finding .cv{font-size:14px;color:var(--body);line-height:1.5;margin-top:8px}

/* dark prototype cards: reuse .howto as 2-col */
.howto.howto--2{grid-template-columns:1fr 1fr}

/* ============ RouteSync extras ============ */
/* flexible phone gallery (variable counts) */
.phone-row{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(16px,2vw,28px);margin-top:clamp(26px,3.4vw,38px)}
.phone{width:clamp(150px,15vw,196px);display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.phone img{width:100%;height:auto;display:block;border-radius:16px;box-shadow:var(--shadow-card)}
.phone .cap{font:600 12.5px/1.3 var(--fu);color:var(--body)}
.hifi-group + .hifi-group{margin-top:clamp(30px,4vw,48px)}
.hifi-group .gl{font:600 11px/1 var(--fu);letter-spacing:.12em;text-transform:uppercase;color:var(--terra-dark);text-align:center}
.hifi-group .phone-row{margin-top:16px}
/* hero proof stats + horizontal stat strip */
.hero-stats,.statbar{display:flex;flex-wrap:wrap;gap:clamp(22px,3.4vw,48px);margin-top:26px}
.statbar{margin-top:clamp(22px,2.8vw,32px)}
.hero-stats .s,.statbar .s{display:flex;flex-direction:column;gap:4px}
.hero-stats .s .n,.statbar .s .n{font-family:var(--fd);font-size:clamp(1.7rem,2.5vw,2.2rem);color:var(--terra);line-height:1}
.hero-stats .s .l,.statbar .s .l{font-size:13px;color:var(--body);line-height:1.3}
.statbar .s .l small{display:block;color:var(--muted);font-size:11.5px;margin-top:1px}
.cap-line{font-size:12.5px;color:var(--muted);margin-top:16px;text-align:center}
/* colour swatches + design-system 2-col */
.ds-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,52px);margin-top:clamp(28px,3.5vw,40px)}
.ds-cols .k{font:600 11px/1 var(--fu);letter-spacing:.1em;text-transform:uppercase;color:var(--terra-dark);margin-bottom:16px}
.swatches{display:flex;flex-wrap:wrap;gap:14px}
.swatch{display:flex;flex-direction:column;gap:7px}
.swatch .col{width:88px;height:62px;border-radius:12px;border:1px solid var(--line)}
.swatch .nm{font:600 12px/1 var(--fu);color:var(--ink)}
.swatch .hx{font:500 11px/1 "SF Mono",ui-monospace,monospace;color:var(--muted)}
/* full-width artefact image */
.artefact-img{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--paper);box-shadow:var(--shadow-sm);margin-top:clamp(20px,2.5vw,30px)}
.artefact-img img{width:100%;height:auto;display:block}
.artefact-img figcaption{font:500 12px/1 var(--fu);color:var(--muted);padding:12px 18px;border-top:1px solid var(--line)}
.artefact-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,26px);margin-top:clamp(20px,2.5vw,30px)}
.artefact-2 .artefact-img{margin-top:0}
/* storyboard caption grid */
.story-caps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}
.story-caps .sc{font-size:13px;color:var(--body);line-height:1.45}
.story-caps .sc b{font-family:var(--fd);color:var(--terra);font-size:17px;margin-right:6px}
/* quote cards */
.quotes{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px);margin-top:clamp(24px,3vw,34px)}
.quote-c{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--terra);border-radius:var(--r-sm);padding:20px}
.quote-c .k{font:600 10.5px/1 var(--fu);letter-spacing:.08em;text-transform:uppercase;color:var(--terra-dark)}
.quote-c p{font-family:var(--fd);font-size:15px;color:var(--ink);line-height:1.4;margin-top:10px}
.finding-badge--m{background:var(--cream);color:var(--body)}
.finding .fix{font:600 11px/1 var(--fu);letter-spacing:.06em;text-transform:uppercase;color:var(--terra-dark);margin-top:16px}
/* dark prototype tag chips */
.dark-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.dark-tags span{font:500 13px/1 var(--fu);color:rgba(255,255,255,.8);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);padding:9px 15px;border-radius:var(--r-pill)}
.proto-cta{margin-top:26px}
@media (max-width:980px){
  .story-caps{grid-template-columns:repeat(2,1fr)}
  .quotes{grid-template-columns:repeat(2,1fr)}
  .ds-cols{grid-template-columns:1fr;gap:32px}
}
@media (max-width:680px){
  .artefact-2{grid-template-columns:1fr}
}
@media (max-width:520px){
  .story-caps,.quotes{grid-template-columns:1fr}
}

@media (max-width:980px){
  .screens-grid{grid-template-columns:repeat(3,1fr)}
  .findings{grid-template-columns:1fr}
  .decisionrow{grid-template-columns:1fr;gap:14px}
  .anno-block{grid-template-columns:1fr;gap:24px}
  .anno-block img{max-width:240px}
}
@media (max-width:760px){
  .artefacts,.persona-grid{grid-template-columns:1fr}
  .howto.howto--2{grid-template-columns:1fr}
  .screens-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:460px){
  .screens-grid{grid-template-columns:1fr}
  .flowrail{flex-direction:column;align-items:center}
  .flownode{width:100%}
  .flowrail .farr{transform:rotate(90deg)}
}

/* ============ MedBuddy extras ============ */
/* single dark code card (Design → code) */
.codecard{border-radius:14px;overflow:hidden;background:#12141c;border:1px solid rgba(219,229,247,.1);box-shadow:0 24px 60px rgba(5,9,20,.4);margin-top:clamp(28px,3.5vw,40px)}
.codecard__bar{display:flex;align-items:center;gap:7px;padding:13px 16px;background:#1f212b;border-bottom:1px solid rgba(219,229,247,.08)}
.codecard__bar .cd{width:11px;height:11px;border-radius:50%}
.codecard__bar .cd:nth-child(1){background:#e0725c}.codecard__bar .cd:nth-child(2){background:#dcab57}.codecard__bar .cd:nth-child(3){background:#7fae6f}
.codecard__file{margin-left:8px;font:500 12.5px/1 var(--fu);color:#99a3b8}
.codecard__body{margin:0;padding:20px 24px;font-family:"SF Mono",ui-monospace,"Menlo",monospace;font-size:13.5px;line-height:1.9;color:#dbe5f7;white-space:pre;overflow-x:auto}
.code-cap{font-size:13.5px;color:var(--body);margin-top:18px;max-width:84ch;line-height:1.6}

/* design → code comparison */
.d2c{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:clamp(14px,2.4vw,40px);margin-top:clamp(28px,3.5vw,40px)}
.d2c figure{display:flex;flex-direction:column;align-items:center;gap:14px;width:clamp(128px,36vw,250px)}
.d2c figure img{width:100%;height:auto;display:block;border-radius:18px;box-shadow:var(--shadow-card)}
.d2c figcaption{font:600 12.5px/1 var(--fu);color:var(--body);text-align:center}
.d2c .d2c-arr{color:var(--terra);font-size:clamp(22px,3vw,30px);line-height:1;flex:none}
@media (max-width:600px){.d2c .d2c-arr{display:none}}   /* mobile Figma shows the two phones side-by-side, no arrow */

/* goal icon mark */
.goalmark{width:12px;height:12px;border-radius:4px;background:var(--terra);display:block}
/* under-the-hood architecture cards: prominent title */
.mcard--arch h3{font-size:clamp(1.35rem,2.2vw,1.75rem)}

/* user-context card (featured statement) */
.usercard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(24px,3vw,34px);box-shadow:var(--shadow-sm);margin-top:clamp(28px,3.5vw,40px)}
.usercard p{font-family:var(--fd);font-size:clamp(1.15rem,1.9vw,1.45rem);line-height:1.4;color:var(--ink)}

/* dark disabled button (prototype section) */
.bg-dark .btn--disabled{background:rgba(255,255,255,.05);color:rgba(255,255,255,.4);border:1px dashed rgba(255,255,255,.2)}
.bg-dark .btn--disabled:hover{transform:none}

/* ============ Conductor Simulator extras ============ */
/* hero device image */
.cond-hero-img{margin-top:clamp(28px,4vw,44px);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-card)}
.cond-hero-img img{width:100%;height:auto;display:block}
/* hero stats + CTA row */
.hero-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:clamp(24px,3vw,32px)}
.hero-meta .hero-stats{margin-top:0}

/* generic image figure(s) with sentence caption below */
.figrow{display:grid;gap:clamp(18px,2.4vw,30px);margin-top:clamp(24px,3vw,36px)}
.figrow--2{grid-template-columns:1fr 1fr}
.figfig{margin:0}
.figfig img{width:100%;height:auto;display:block;border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.figfig figcaption{font-size:13px;color:var(--muted);margin-top:12px;line-height:1.5}
.figfig--center img{max-width:660px;margin-inline:auto}
.bg-dark .figfig figcaption{color:rgba(255,255,255,.5)}

/* product parts (2): image + title + desc */
.parts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,40px);margin-top:clamp(28px,3.5vw,40px)}
.part figure{margin:0}
.part img{width:100%;height:auto;display:block;border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.part h3{font-family:var(--fd);font-size:clamp(1.2rem,2vw,1.5rem);margin-top:18px}
.part p{font-size:14.5px;color:var(--body);line-height:1.55;margin-top:8px}

/* LED states */
.leds{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px);margin-top:16px}
.led{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(20px,2.2vw,24px)}
.led .sw{width:30px;height:30px;border-radius:9px;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.led h3{font-family:var(--fd);font-size:18px;margin-top:16px}
.led p{font-size:13.5px;color:var(--body);margin-top:5px}

/* before → after rows */
.ba{display:flex;flex-direction:column;gap:14px;margin-top:clamp(26px,3.2vw,38px)}
.ba-row{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(16px,2.4vw,28px);align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(16px,2vw,22px) clamp(18px,2.4vw,28px)}
.ba-row .lab{font:600 11px/1 var(--fu);letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:8px}
.ba-row .before .lab{color:var(--muted)}
.ba-row .after .lab{color:var(--terra-dark)}
.ba-row p{font-size:14.5px;line-height:1.4}
.ba-row .before p{color:var(--body)}
.ba-row .after p{color:var(--ink);font-weight:500}
.ba-row .baarr{color:var(--terra);font-size:22px;line-height:1}

/* tester quotes */
.tquotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);margin-top:16px}
.tquote{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--terra);border-radius:var(--r-sm);padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column}
.tquote p{font-family:var(--fd);font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:1.4;color:var(--ink)}
.tquote cite{font:600 12px/1 var(--fu);color:var(--muted);font-style:normal;margin-top:auto;padding-top:16px}

/* emphasis callout (CAD / DEMO evidence) */
.callout{background:var(--paper-warm);border:1px solid var(--line);border-left:3px solid var(--terra);border-radius:var(--r-card);padding:clamp(22px,2.6vw,30px);margin-top:clamp(26px,3vw,34px)}
.bg-dark .callout{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);border-left-color:var(--terra)}
.callout .k{font:600 11px/1 var(--fu);letter-spacing:.12em;text-transform:uppercase;color:var(--terra-dark)}
.bg-dark .callout .k{color:var(--dark-warm)}
.callout h3{font-family:var(--fd);font-size:clamp(1.15rem,1.9vw,1.45rem);margin-top:10px}
.callout p{font-size:14.5px;color:var(--body);line-height:1.6;margin-top:10px}

@media (max-width:900px){
  .parts{grid-template-columns:1fr}
  .leds{grid-template-columns:repeat(2,1fr)}
  .tquotes{grid-template-columns:1fr}
}
@media (max-width:760px){
  .figrow--2{grid-template-columns:1fr}
  .ba-row{grid-template-columns:1fr;gap:6px}
  .ba-row .baarr{display:none}
  .ba-row .after{margin-top:6px}
}
@media (max-width:430px){
  .leds{grid-template-columns:1fr}
}

/* ============ Travel Probe extras ============ */
/* 2-column hero (text + portrait image) */
.tp-hero__grid{display:grid;grid-template-columns:1.25fr .85fr;gap:clamp(32px,5vw,64px);align-items:center}
.tp-hero__img{border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-card)}
.tp-hero__img img{width:100%;height:auto;display:block}
@media (max-width:880px){.tp-hero__grid{grid-template-columns:1fr;gap:clamp(24px,4vw,36px)}}

/* kit grid (5 element cards) */
.kitgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.6vw,20px);margin-top:clamp(28px,3.5vw,40px)}
.kitcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.kitcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.kitcard img{width:100%;height:auto;display:block;background:var(--cream)}
.kitcard h3{font-family:var(--fd);font-size:16px;padding:16px 16px 0}
.kitcard p{font-size:13px;color:var(--body);line-height:1.5;padding:6px 16px 18px}
@media (max-width:900px){.kitgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.kitgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:430px){.kitgrid{grid-template-columns:1fr;max-width:320px;margin-inline:auto}}

/* text + image split (probe design, foundation) */
.tsplit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center;margin-top:clamp(28px,3.5vw,40px)}
.tsplit p + p{margin-top:16px}
.tsplit .body{color:var(--body);line-height:1.6}
.tsplit__img{border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-card)}
.tsplit__img img{width:100%;height:auto;display:block}
.tsplit--imgright .tsplit__img{order:2}
@media (max-width:860px){.tsplit{grid-template-columns:1fr;gap:24px}.tsplit--imgright .tsplit__img{order:0}}

/* numbered findings list (what it revealed) */
.findlist{margin-top:clamp(26px,3vw,36px)}
.findrow{display:flex;gap:18px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line)}
.findrow:first-child{padding-top:0}
.findrow:last-child{border-bottom:0}
.findrow .fn{flex:none;width:38px;height:38px;border-radius:50%;background:var(--terra-soft);color:var(--terra-dark);font:600 15px/38px var(--fu);text-align:center}
.findrow h3{font-family:var(--fd);font-size:clamp(1.05rem,1.6vw,1.2rem)}
.findrow p{font-size:14.5px;color:var(--body);line-height:1.5;margin-top:4px}

/* boundary note (concepts) */
.boundary{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:clamp(22px,2.6vw,30px);background:var(--paper-warm);border:1px solid var(--line);border-radius:var(--r-pill);padding:13px 22px}
.boundary .pill{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--fu);color:var(--terra-dark);white-space:nowrap}
.boundary .pill .d{width:7px;height:7px;border-radius:50%;background:var(--terra)}
.boundary p{font-size:13.5px;color:var(--body);line-height:1.45}
@media (max-width:600px){.boundary{border-radius:var(--r-card)}}

/* wireframes (digital) */
.wf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px);margin-top:clamp(28px,3.5vw,40px)}
.wf{display:flex;flex-direction:column;gap:12px}
.wf img{width:100%;height:auto;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.wf .cap{font:600 13px/1.3 var(--fu);color:var(--ink)}
.wf .cap small{display:block;font-weight:500;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-top:3px}
.note{font-size:13px;color:var(--muted);margin-top:18px;font-style:italic}

/* ---------- SwiftUI proof (dark) ---------- */
.modules{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,18px);margin-top:clamp(28px,3.5vw,40px)}
.module{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-sm);padding:18px;display:flex;flex-direction:column;gap:6px}
.module .swift{font:600 10.5px/1 var(--fu);letter-spacing:.06em;text-transform:uppercase;color:var(--dark-warm)}
.module h3{font-family:var(--fd);font-size:16px;color:#fff}
.module .files{font-size:12px;color:rgba(255,255,255,.55);line-height:1.5}
.module--lg{background:rgba(194,80,46,.16);border-color:rgba(224,120,89,.4)}
.proof-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,36px);margin-top:clamp(24px,3vw,36px);align-items:start}
.proof-split>*{min-width:0}            /* prevent code-window grid blowout */
.codewin{max-width:100%}
.proof-block .plabel{font:600 11px/1 var(--fu);letter-spacing:.1em;text-transform:uppercase;color:var(--dark-warm);margin-bottom:12px}
.sim-shot{border-radius:var(--r-card);overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.sim-shot img{width:100%;height:auto;display:block}
.proof-src{font-size:12px;color:rgba(255,255,255,.5);margin-top:12px;line-height:1.5}

/* how-to-view (3 cards, dark) */
.howto{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);margin-top:clamp(28px,3.5vw,40px)}
.howcard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-card);padding:clamp(20px,2.4vw,26px);display:flex;flex-direction:column;gap:10px}
.howcard .k{font:600 11px/1 var(--fu);letter-spacing:.08em;text-transform:uppercase;color:var(--dark-warm)}
.howcard h3{font-family:var(--fd);font-size:18px;color:#fff}
.howcard p{font-size:13.5px;color:rgba(255,255,255,.72);line-height:1.55;flex:1}
.howcard .mono{font:500 12px/1.4 "SF Mono",ui-monospace,monospace;color:rgba(255,255,255,.5);word-break:break-all}
.howcard .act{display:inline-flex;align-items:center;gap:.5em;align-self:flex-start;margin-top:10px;
  font:600 14px/1 var(--fu);color:#fff;border:1.5px solid rgba(255,255,255,.32);padding:12px 20px;border-radius:var(--r-pill);
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.howcard .act .arr,.howcard .act{white-space:nowrap}
.howcard a.act:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.6);transform:translateY(-2px)}
.howcard .act--soon{color:rgba(255,255,255,.45);border-style:dashed;border-color:rgba(255,255,255,.2);cursor:not-allowed}
.howcard .soon{font-size:12px;color:rgba(255,255,255,.45);margin-top:8px}

/* ---------- outcome ---------- */
.oc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.6vw,22px);margin-top:clamp(28px,3.5vw,40px)}
.oc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:22px 18px;text-align:center}
.oc .n{font-family:var(--fd);font-size:clamp(1.8rem,2.6vw,2.3rem);color:var(--terra);line-height:1}
.oc .l{font-size:12px;color:var(--body);margin-top:8px;line-height:1.4}
.scope-note{margin-top:26px;background:var(--paper-warm);border:1px solid var(--line);border-left:3px solid var(--terra);border-radius:var(--r-sm);padding:20px 22px}
.scope-note .k{font:600 11px/1 var(--fu);letter-spacing:.12em;text-transform:uppercase;color:var(--terra-dark)}
.scope-note p{font-size:14.5px;color:var(--body);margin-top:8px;line-height:1.6}

/* ---------- project nav ---------- */
.projnav{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center}
.projnav a{display:flex;flex-direction:column;gap:4px}
.projnav .dir{font:600 11px/1 var(--fu);letter-spacing:.12em;text-transform:uppercase;color:var(--terra-dark)}
.projnav .name{font-family:var(--fd);font-size:clamp(1.2rem,2vw,1.6rem);color:var(--ink);transition:color .2s}
.projnav a:hover .name{color:var(--terra-dark)}
.projnav .prev{text-align:left}.projnav .next{text-align:right}
.projnav .mid{font-size:12px;color:var(--muted);text-align:center;max-width:160px}

/* ============ RESPONSIVE ============ */
@media (max-width:980px){
  .cs-thesis{grid-template-columns:1fr;gap:18px}
  .meta-strip{grid-template-columns:repeat(3,1fr);row-gap:24px}
  .prims{grid-template-columns:repeat(3,1fr)}
  .sprints{grid-template-columns:repeat(3,1fr)}
  .journey{grid-template-columns:repeat(3,1fr)}
  .modules{grid-template-columns:repeat(2,1fr)}
  .oc-grid{grid-template-columns:repeat(3,1fr)}
  .wf-grid{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .proof-split{grid-template-columns:1fr;gap:28px}
}
@media (max-width:760px){
  .grid-3,.howto,.chrono{grid-template-columns:1fr}
  .ds-grid{grid-template-columns:1fr}
  .caps--3,.caps--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .meta-strip{grid-template-columns:repeat(2,1fr)}
  .grid-2,.grid-4{grid-template-columns:1fr}
  .prims{grid-template-columns:repeat(2,1fr)}
  .sprints{grid-template-columns:repeat(2,1fr)}
  .journey{grid-template-columns:repeat(2,1fr)}
  .oc-grid{grid-template-columns:repeat(2,1fr)}
  .wf-grid{grid-template-columns:repeat(2,1fr)}
  .modules{grid-template-columns:1fr}
  .projnav{grid-template-columns:1fr;gap:16px;text-align:center}
  .projnav .prev,.projnav .next{text-align:center}
  .projnav .mid{max-width:none;order:-1;padding-bottom:4px;border-bottom:1px solid var(--line)}
  .cta-row .btn{flex:1 1 auto;justify-content:center}
}
@media (max-width:430px){
  .caps--3,.caps--4,.prims,.sprints,.journey,.oc-grid,.wf-grid{grid-template-columns:1fr}
}