/* Sayantani Mukherjee portfolio, design system v2
   Type: Source Sans 3 (interface and body), Source Serif 4 (editorial moments only),
   IBM Plex Mono (inside recreated software artefacts only). */

:root{
  --ink:#161615;
  --ink-2:#3B3B38;
  --ink-3:#65645F;
  --rule:#E4E2DB;
  --rule-2:#C9C7BE;
  --paper:#FFFFFF;
  --paper-2:#F7F6F2;

  /* colour roles */
  --red:#FF5B3E;          /* fills inside figures only */
  --red-text:#B83218;     /* insight, key finding, risk. 5.99:1 on white */
  --red-tint:#FDEDE8;
  --gold:#FFD84D;         /* fills inside figures only */
  --gold-text:#6E5300;    /* evidence and data. 7.24:1 on white */
  --gold-tint:#FFF4CC;

  --sans:'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --f-h1:clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
  --f-h2:clamp(1.9rem, 1.45rem + 1.7vw, 2.75rem);
  --f-h3:clamp(1.3rem, 1.15rem + .6vw, 1.6rem);
  --f-lead:clamp(1.15rem, 1.05rem + .4vw, 1.375rem);
  --f-body:1.125rem;
  --f-small:.9rem;
  --f-meta:.8125rem;

  --measure:42rem;
  --maxw:1240px;
  --gut:40px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:88px}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{margin:0; background:var(--paper); color:var(--ink-2); font-family:var(--sans);
  font-size:var(--f-body); line-height:1.65; font-feature-settings:"kern","liga";
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
img{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{color:var(--ink); margin:0; font-weight:600; letter-spacing:-.01em}
h1{font-size:var(--f-h1); line-height:1.06; letter-spacing:-.02em}
h2{font-size:var(--f-h2); line-height:1.12}
h3{font-size:var(--f-h3); line-height:1.25}
h4{font-size:1.0625rem; line-height:1.35}
p{margin:0 0 1em}
strong{color:var(--ink); font-weight:600}
a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--red-text);
  text-decoration-thickness:1px; text-underline-offset:.2em; transition:color .15s, text-decoration-color .15s}
a:hover{color:var(--red-text)}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:2px}
.serif{font-family:var(--serif); font-weight:500; letter-spacing:-.01em}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:16px; top:-60px; background:var(--ink); color:#fff; padding:10px 16px; z-index:100; text-decoration:none}
.skip:focus{top:12px; color:#fff}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gut)}
@media (max-width:720px){ :root{--gut:20px} }

/* meta label: small, quiet, sentence case */
.meta{font-size:var(--f-meta); line-height:1.4; color:var(--ink-3); letter-spacing:.02em; font-weight:600}
.num{font-variant-numeric:tabular-nums lining-nums}

/* ---------- header ---------- */
.site-head{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.96); border-bottom:1px solid var(--rule)}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{font-weight:600; color:var(--ink); text-decoration:none; font-size:1.0625rem; letter-spacing:-.005em}
.brand:hover{color:var(--ink)}
.nav ul{list-style:none; margin:0; padding:0; display:flex; gap:32px}
.nav a{text-decoration:none; font-size:.975rem; color:var(--ink-2); padding:6px 0; border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--ink)}
.nav-toggle{display:none; background:none; border:1px solid var(--rule-2); font:inherit; font-size:.95rem; color:var(--ink); padding:6px 12px; cursor:pointer}
@media (max-width:720px){
  .nav-toggle{display:block}
  .nav{position:absolute; left:0; right:0; top:64px; background:#fff; border-bottom:1px solid var(--rule); display:none}
  .nav.open{display:block}
  .nav ul{flex-direction:column; gap:0; padding:8px var(--gut) 16px}
  .nav a{display:block; padding:12px 0; border-bottom:1px solid var(--rule)}
}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--rule); margin-top:120px; padding:36px 0 48px}
.site-foot .wrap{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; font-size:var(--f-small); color:var(--ink-3)}
.site-foot ul{list-style:none; margin:0; padding:0; display:flex; gap:24px; flex-wrap:wrap}

/* ---------- editorial section grid ---------- */
.sec{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:32px; padding:96px 0 0}
.sec > *{grid-column:4 / 13}
.sec-rail{grid-column:1 / 4; grid-row:1 / span 2; align-self:baseline; padding-top:0;
  display:block; font-size:var(--f-small); line-height:1.4}
.sec-rail .no{margin-right:10px; font-weight:700; color:var(--ink); letter-spacing:.04em; font-variant-numeric:tabular-nums lining-nums}
.sec-rail .name{font-weight:600; color:var(--ink-3); max-width:12rem}
.sec-rail .time{display:block; width:max-content; margin-top:12px; font-size:var(--f-meta); color:var(--gold-text); font-weight:600;
  border-top:2px solid var(--gold); padding-top:6px}
.sec > h2,.home-head h2{align-self:baseline}
.sec > h2{margin-bottom:28px; max-width:22em}
.sec > p,.sec > ul,.sec > ol,.prose{max-width:var(--measure)}
.sec > .full{grid-column:1 / -1; max-width:none}
.sec > .wide{grid-column:2 / 13}
.sec-top{border-top:1px solid var(--rule); padding-top:40px}
.sec > h3{margin:56px 0 16px; max-width:var(--measure)}
.sec > h3:first-of-type{margin-top:48px}
@media (max-width:900px){
  .sec{column-gap:0; padding-top:72px}
  .sec > *,.sec > .full,.sec > .wide,.sec-rail{grid-column:1 / -1; grid-row:auto}
  .sec-rail{margin-bottom:10px}
  .sec-rail .name{max-width:none}
}

/* ---------- role blocks: context, evidence, insight, decision ---------- */
.role{margin:32px 0; padding:4px 0 4px 22px; border-left:3px solid var(--rule-2); max-width:var(--measure)}
.role > .meta{display:block; margin-bottom:6px}
.role p:last-child{margin-bottom:0}
.role--insight{border-left-color:var(--red-text)}
.role--insight > .meta{color:var(--red-text)}
.role--insight .say{font-family:var(--serif); font-size:clamp(1.3rem,1.1rem + .8vw,1.65rem); line-height:1.35; color:var(--ink); font-weight:500}
.role--decision{border-left-color:var(--ink)}
.role--decision > .meta{color:var(--ink)}
.role--evidence{border-left-color:var(--gold)}
.role--evidence > .meta{color:var(--gold-text)}
.role--context{border-left-color:var(--rule-2)}

/* legend for the colour roles */
.roles-key{display:flex; flex-wrap:wrap; gap:8px 22px; font-size:var(--f-meta); color:var(--ink-3); font-weight:600}
.roles-key span{display:inline-flex; align-items:center; gap:8px}
.roles-key i{width:12px; height:3px; display:inline-block}

/* ---------- lists ---------- */
.plain{list-style:none; padding:0; margin:0}
.plain li{padding:10px 0; border-top:1px solid var(--rule)}
.plain li:last-child{border-bottom:1px solid var(--rule)}
.ticks{padding-left:1.1em; margin:0 0 1em}
.ticks li{margin-bottom:.45em}
.ticks li::marker{color:var(--ink-3)}

/* ---------- figures ---------- */
.fig{margin:48px 0 36px}
.fig-frame{background:var(--paper-2); padding:36px}
.fig-frame--plain{background:transparent; padding:0}
.fig-frame--line{background:#fff; border:1px solid var(--rule); padding:0}
.fig-frame img{margin:0 auto}
.fig figcaption{margin-top:14px; padding-top:12px; border-top:1px solid var(--rule); max-width:var(--measure);
  font-size:var(--f-small); line-height:1.5; color:var(--ink-2)}
.fig figcaption b{display:block; color:var(--ink); font-size:var(--f-meta); letter-spacing:.06em; margin-bottom:3px}
@media (max-width:720px){ .fig-frame{padding:20px} }
.zoom{cursor:zoom-in}
.zoom-hint{font-size:var(--f-meta); color:var(--ink-3); font-weight:600; margin-top:6px}
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch}
.scroll-note{font-size:var(--f-meta); color:var(--ink-3); font-weight:600; margin:10px 0 0}

/* lightbox */
dialog.lightbox{border:0; padding:0; max-width:96vw; max-height:94vh; background:#fff}
dialog.lightbox::backdrop{background:rgba(22,22,21,.82)}
dialog.lightbox img{max-width:96vw; max-height:88vh; width:auto; height:auto}
dialog.lightbox .lb-bar{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:10px 14px; font-size:var(--f-small); border-top:1px solid var(--rule)}
dialog.lightbox button{font:inherit; background:none; border:1px solid var(--rule-2); padding:4px 12px; cursor:pointer; color:var(--ink)}

/* ---------- pull quotes ---------- */
.quote{margin:0; max-width:var(--measure)}
.quote p{font-family:var(--serif); font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem); line-height:1.4; color:var(--ink); margin:0 0 10px; font-weight:400}
.quote cite{font-style:normal; font-size:var(--f-meta); font-weight:600; color:var(--ink-3)}
.quotes{display:grid; grid-template-columns:3fr 2fr; gap:40px; margin:40px 0}
@media (max-width:760px){ .quotes{grid-template-columns:1fr; gap:28px} }

/* ---------- facts / metadata table (case hero, previews) ---------- */
.facts{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 32px; margin:0; border-top:1px solid var(--ink)}
.facts > div{padding:16px 0 0}
.facts dt{font-size:var(--f-meta); font-weight:700; color:var(--ink); letter-spacing:.04em; margin-bottom:6px}
.facts dd{margin:0; font-size:var(--f-small); line-height:1.55; color:var(--ink-2)}
@media (max-width:900px){ .facts{grid-template-columns:1fr 1fr; gap:0 24px} .facts > div{padding-bottom:12px} }
@media (max-width:520px){ .facts{grid-template-columns:1fr} }

/* ---------- impact figures ---------- */
.impact{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 32px; margin:36px 0; border-top:1px solid var(--ink)}
.impact.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.impact > div{padding:20px 0 0}
.impact .v{display:block; font-size:clamp(1.8rem,1.4rem + 1.4vw,2.6rem); font-weight:600; color:var(--ink); line-height:1.1; font-variant-numeric:tabular-nums lining-nums; letter-spacing:-.02em}
.impact .v .arrow{color:var(--ink-3); font-weight:400; padding:0 .12em}
.impact .k{display:block; margin-top:10px; font-size:var(--f-small); line-height:1.5; color:var(--ink-2); max-width:22rem}
@media (max-width:760px){ .impact,.impact.two{grid-template-columns:1fr} .impact > div{padding-bottom:16px; border-bottom:1px solid var(--rule)} }

/* ---------- data tables ---------- */
.dtable{border-collapse:collapse; width:100%; font-size:.95rem; font-variant-numeric:tabular-nums lining-nums}
.dtable caption{text-align:left; font-size:var(--f-meta); color:var(--ink-3); font-weight:600; padding-bottom:10px}
.dtable th,.dtable td{padding:11px 14px; text-align:right; border-bottom:1px solid var(--rule); white-space:nowrap}
.dtable thead th{font-size:var(--f-meta); font-weight:700; color:var(--ink); letter-spacing:.03em; vertical-align:bottom; border-bottom:1px solid var(--ink)}
.dtable th:first-child,.dtable td:first-child{text-align:left; padding-left:0}
.dtable thead tr + tr th:first-child{text-align:right; padding-left:14px}
.dtable tbody th{font-weight:600; color:var(--ink)}
.dtable .grp{text-align:center; border-bottom:2px solid var(--rule-2)}
.dtable .grp.before{border-bottom-color:#8E8C85}
.dtable .grp.after{border-bottom-color:var(--red-text)}
.dtable tr.total th,.dtable tr.total td{font-weight:700; color:var(--ink); border-top:1px solid var(--ink); border-bottom:0}
.dtable .hl{color:var(--ink); font-weight:600}

/* ---------- buttons / text links ---------- */
.more{display:inline-block; font-weight:600; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--red-text); padding-bottom:2px}
.more:hover{color:var(--red-text)}
.more::after{content:" \2192"}

/* ---------- reveal (motion only when the reader allows it) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease}
  .js .rv.in{opacity:1; transform:none}
}

/* =================================================================
   HOME
   ================================================================= */
.hero{padding:96px 0 80px; border-bottom:1px solid var(--rule)}
.hero-role{font-size:1rem; line-height:1.4; color:var(--ink-3); font-weight:600; letter-spacing:.01em; margin:0 0 20px}
.hero-statement{font-family:var(--serif); font-weight:500; font-size:clamp(2.2rem,1.4rem + 3vw,3.6rem); line-height:1.1;
  color:var(--ink); letter-spacing:-.02em; max-width:16em; margin:0 0 28px}
.hero-support{font-size:var(--f-lead); line-height:1.55; max-width:36em; color:var(--ink-2); margin:0}
.hero-facts{display:flex; flex-wrap:wrap; gap:8px 28px; margin:36px 0 0; font-size:var(--f-small); color:var(--ink-3)}
.hero-facts span{padding-left:12px; border-left:2px solid var(--rule-2)}
.hero-facts span:first-child{border-left-color:var(--red)}

.home-sec{padding:96px 0 0}
.home-head{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:32px; margin-bottom:32px; align-items:baseline}
.home-head .sec-rail{grid-row:auto}
.home-head h2{grid-column:4 / 13}
@media (max-width:900px){ .home-head{display:block; margin-bottom:24px} }

/* case study cards: the whole card is one link */
.work{list-style:none; margin:0; padding:0; display:grid; gap:20px}
.work-card{display:block; text-decoration:none; color:inherit; background:var(--paper); border:1px solid var(--rule-2);
  padding:32px 36px 28px; position:relative; transition:border-color .2s, background-color .2s, box-shadow .2s}
.work-card:hover{color:inherit; border-color:var(--ink); background:var(--paper-2); box-shadow:0 1px 0 var(--ink)}
.work-card:focus-visible{outline-offset:4px}
.wc-top{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin-bottom:14px}
.work-no{font-size:var(--f-small); font-weight:700; letter-spacing:.04em; color:var(--ink)}
.work-disc{font-size:var(--f-small); font-weight:600; color:var(--ink-3)}
.wc-body{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:32px}
.wc-main{grid-column:1 / 7}
.work-card h3{font-size:clamp(1.55rem,1.25rem + 1vw,2.1rem); line-height:1.15; margin:0 0 14px; transition:color .2s}
.work-card:hover h3{color:var(--red-text)}
.wc-desc{margin:0; color:var(--ink-2)}
.wc-role{margin:18px 0 0; font-size:var(--f-small); line-height:1.5; color:var(--ink-2)}
.wc-role b{font-weight:700; color:var(--ink); font-size:var(--f-meta); letter-spacing:.03em; margin-right:8px}
.wc-out{grid-column:8 / 13; align-self:start; margin-top:4px; padding-top:12px; border-top:1px solid var(--rule)}
.wc-label{margin:0 0 8px; font-weight:700; color:var(--ink); font-size:var(--f-meta); letter-spacing:.03em}
.wc-note{margin:10px 0 0; font-size:var(--f-meta); line-height:1.5; color:var(--ink-3)}
.work-card:hover{--surface:var(--paper-2)}
.wc-cta{display:inline-flex; align-items:center; gap:10px; margin-top:28px; font-weight:600; font-size:1rem; color:var(--ink);
  border-bottom:1px solid var(--red-text); padding-bottom:2px}
.arr{display:inline-block; transition:transform .2s ease}
@media (prefers-reduced-motion:no-preference){ .work-card:hover .wc-cta .arr{transform:translateX(5px)} }
.work-card:hover .wc-cta{color:var(--red-text)}
@media (max-width:900px){
  .work-card{padding:24px 22px 22px}
  .wc-body{display:block}
  .wc-out{margin-top:24px}
}

.caps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px}
.caps > div{border-top:1px solid var(--ink); padding-top:20px}
.caps h3{font-size:1.25rem; margin-bottom:14px}
.caps ul{list-style:none; margin:0; padding:0}
.caps li{padding:7px 0; border-top:1px solid var(--rule); font-size:1.0625rem}
.caps li:first-child{border-top:0}
@media (max-width:820px){ .caps{grid-template-columns:1fr} }

.bg{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:32px}
.bg-text{grid-column:4 / 10}
.bg-text p{font-size:1.1875rem}
.bg-list{grid-column:4 / 13; margin-top:28px}
.bg-list .row{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,3fr) minmax(0,2fr); gap:24px; padding:13px 0; border-top:1px solid var(--rule); font-size:var(--f-small)}
.bg-list .row:last-child{border-bottom:1px solid var(--rule)}
.bg-list .org{color:var(--ink); font-weight:600}
.bg-list .when{color:var(--ink-3); text-align:right}
@media (max-width:900px){
  .bg-text,.bg-list{grid-column:1 / -1}
  .bg-list .row{grid-template-columns:1fr; gap:2px}
  .bg-list .when{text-align:left}
}

.earlier{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px}
.earlier article{border-top:1px solid var(--ink); padding-top:22px}
.earlier .org{font-size:var(--f-h3); color:var(--ink); font-weight:600; line-height:1.2; margin:0}
.earlier .role-line{font-size:var(--f-small); color:var(--ink-3); margin:6px 0 20px}
.earlier dl{margin:0 0 20px}
.earlier dl div{display:grid; grid-template-columns:7rem 1fr; gap:12px; padding:9px 0; border-top:1px solid var(--rule); font-size:var(--f-small)}
.earlier dt{font-weight:700; color:var(--ink); font-size:var(--f-meta); letter-spacing:.03em; padding-top:2px}
.earlier dd{margin:0}
.earlier ul{padding-left:1.1em; margin:0 0 20px; font-size:1.0625rem}
.earlier li{margin-bottom:.4em}
.earlier li::marker{color:var(--ink-3)}
@media (max-width:820px){ .earlier{grid-template-columns:1fr; gap:40px} }

.contact{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:32px}
.contact-text{grid-column:4 / 10}
.contact-text p{font-size:var(--f-lead)}
.contact-links{grid-column:4 / 13; list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr)); border-top:1px solid var(--ink)}
.contact-links li{padding:16px 16px 0 0}
.contact-links .meta{display:block; margin-bottom:4px}
.contact-links a{font-size:1.0625rem; overflow-wrap:anywhere}
@media (max-width:900px){ .contact-text,.contact-links{grid-column:1 / -1} .contact-links{grid-template-columns:1fr 1fr} .contact-links li:first-child{grid-column:1 / -1} }
@media (max-width:520px){ .contact-links{grid-template-columns:1fr} }

/* =================================================================
   CASE STUDY
   ================================================================= */
.cs-hero{padding-top:80px}
.cs-kicker{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:var(--f-small); font-weight:600; color:var(--ink-3); margin-bottom:26px}
.cs-kicker a{color:var(--ink-3); text-decoration:none}
.cs-kicker a:hover{color:var(--ink)}
.cs-title{font-family:var(--serif); font-weight:500; font-size:var(--f-h1); line-height:1.08; letter-spacing:-.02em; max-width:15em}
.cs-dek{font-size:var(--f-lead); line-height:1.55; max-width:40rem; margin:28px 0 56px; color:var(--ink-2)}
.cs-contrib{margin:28px 0 0; max-width:48rem; font-size:1.0625rem}
.cs-contrib strong{font-weight:600}

/* opening problem: four step read */
.frame4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border-top:1px solid var(--ink); margin-top:8px}
.frame4 > div{padding:18px 24px 4px 0}
.frame4 > div + div{padding-left:24px; border-left:1px solid var(--rule)}
.frame4 .meta{display:block; margin-bottom:8px}
.frame4 p{font-size:1.0625rem; line-height:1.55; margin:0}
.frame4 .q{font-family:var(--serif); color:var(--ink)}
.frame4 .solved .meta{color:var(--red-text)}
.frame4 .solved p{color:var(--ink); font-weight:600}
@media (max-width:980px){
  .frame4{grid-template-columns:1fr 1fr}
  .frame4 > div:nth-child(3){padding-left:0; border-left:0}
  .frame4 > div{padding-bottom:20px}
}
@media (max-width:560px){
  .frame4{grid-template-columns:1fr}
  .frame4 > div,.frame4 > div + div{padding:16px 0; border-left:0; border-bottom:1px solid var(--rule)}
}

/* contribution grid */
.who{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; border-top:1px solid var(--rule); padding-top:20px; margin-top:28px}
.who h3{font-size:var(--f-meta); letter-spacing:.04em; margin-bottom:10px}
.who ul{margin:0; padding-left:1.05em; font-size:var(--f-small); line-height:1.55}
.who li{margin-bottom:.35em}
@media (max-width:820px){ .who{grid-template-columns:1fr; gap:22px} }

/* 32 day timeline */
.tl{--days:32}
.tl-phases,.tl-bar,.tl-ruler,.tl-stages{display:grid; grid-template-columns:repeat(var(--days),minmax(0,1fr))}
.tl-phases > div{padding:0 10px 12px 0; border-left:2px solid var(--ink); padding-left:10px}
.tl-phases .p{display:block; font-weight:700; color:var(--ink); font-size:1rem}
.tl-phases .d{display:block; font-size:var(--f-small); color:var(--ink-3)}
.tl-bar{height:56px; gap:2px}
.tl-bar > div{display:flex; align-items:center; justify-content:center; font-size:var(--f-meta); font-weight:700; color:var(--ink)}
.tl-bar .ph1{background:var(--red)}
.tl-bar .ph1.b{background:#FF8A74}
.tl-bar .ph2{background:var(--gold)}
.tl-bar .ph3{background:var(--ink); color:#fff}
.tl-bar .ph3.b{background:#4A4945}
.tl-ruler{margin-top:6px; font-size:var(--f-meta); color:var(--ink-3); font-variant-numeric:tabular-nums}
.tl-ruler span{white-space:nowrap}
.tl-stages{margin-top:22px; gap:0}
.tl-stages > div{border-top:1px solid var(--rule); padding:10px 28px 0 0}
.tl-stages ol{list-style:none; margin:0; padding:0}
.tl-stages li{display:flex; justify-content:space-between; gap:10px; font-size:var(--f-small); padding:5px 0; border-bottom:1px dotted var(--rule-2)}
.tl-stages li b{font-weight:600; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums}
.tl-stages .ph-name{display:none}
@media (max-width:760px){
  .tl-ruler{display:none}
  .tl-bar .bl{display:none}
  .tl-phases{display:none}
  .tl-bar{height:40px}
  .tl-stages{display:block}
  .tl-stages > div{margin-bottom:14px}
  .tl-stages .ph-name{display:block; font-weight:700; color:var(--ink); font-size:1rem; margin-bottom:4px}
}

/* team funnel, reframe, sequence rails */
.funnel{display:grid; gap:10px; justify-items:center}
.funnel .lvl{text-align:center; padding:16px 20px}
.funnel .lvl b{display:block; font-size:1.9rem; line-height:1.1; font-weight:600; font-variant-numeric:tabular-nums}
.funnel .lvl span{font-size:var(--f-small)}
.funnel .l1{width:100%; background:#fff; border:1px solid var(--rule); color:var(--ink)}
.funnel .l2{width:58%; background:var(--ink); color:#fff}
.funnel .l2 b{color:#fff}
.funnel .l2 span{color:rgba(255,255,255,.84)}
.funnel .how{font-size:var(--f-small); color:var(--ink-2); text-align:center; max-width:30rem}
@media (max-width:600px){ .funnel .l2{width:100%} }

.pair{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px}
.pair > div{background:#fff; padding:20px 22px; border-top:3px solid var(--gold)}
.pair h3{margin-bottom:6px; font-size:1.0625rem}
.pair p{margin:0; font-size:1rem}
@media (max-width:640px){ .pair{grid-template-columns:1fr} }

.reframe{display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:stretch}
.reframe > div{padding:24px}
.reframe .given{background:#fff; border:1px solid var(--rule)}
.reframe .given p{text-decoration:line-through; text-decoration-color:var(--ink-3); color:var(--ink-3)}
.reframe .found{background:var(--ink); color:#fff}
.reframe .found .meta{color:var(--gold)}
.reframe .found p{color:#fff}
.reframe p{font-family:var(--serif); font-size:1.35rem; line-height:1.3; margin:6px 0 0}
.reframe .arw{align-self:center; font-size:1.5rem; color:var(--ink-3); padding:0}
@media (max-width:700px){ .reframe{grid-template-columns:1fr} .reframe .arw{transform:rotate(90deg); justify-self:center} }

.steps{list-style:none; margin:0; padding:0; counter-reset:st}
.steps > li{display:grid; grid-template-columns:9rem 1fr; gap:24px; padding:22px 0; border-top:1px solid var(--rule-2)}
.steps > li:first-child{border-top:1px solid var(--ink)}
.steps .when{font-size:var(--f-meta); font-weight:700; color:var(--ink); letter-spacing:.03em}
.steps .when span{display:block; color:var(--gold-text); font-weight:600; margin-top:4px}
.steps h3{font-size:1.125rem; margin-bottom:6px}
.steps p{font-size:1.0625rem; margin:0 0 10px}
.steps .rules{list-style:none; padding:0; margin:8px 0 0; display:flex; flex-wrap:wrap; gap:6px 18px}
.steps .rules li{font-size:var(--f-small); color:var(--ink-2); padding-left:14px; position:relative}
.steps .rules li::before{content:""; position:absolute; left:0; top:.62em; width:7px; height:2px; background:var(--gold-text)}
@media (max-width:640px){ .steps > li{grid-template-columns:1fr; gap:8px} }

/* the tracker -> hierarchy sequence strip */
.chain{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; margin:8px 0 0; padding:0; list-style:none; border-top:1px solid var(--ink)}
.chain li{padding:14px 18px 14px 0; font-size:var(--f-small); line-height:1.45; position:relative}
.chain li + li{padding-left:18px; border-left:1px solid var(--rule)}
.chain b{display:block; font-size:var(--f-meta); color:var(--ink); letter-spacing:.04em; margin-bottom:4px}
.chain a{text-decoration:none; color:inherit}
.chain a:hover b{color:var(--red-text)}
@media (max-width:900px){ .chain{grid-template-columns:1fr} .chain li + li{padding-left:0; border-left:0; border-top:1px solid var(--rule)} }

/* tracker categories */
.cats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule)}
.cats > div:last-child:nth-child(odd){grid-column:1 / -1}
@media (max-width:600px){ .cats{grid-template-columns:1fr} }
.cats > div{background:#fff; padding:16px 18px}
.cats h3{font-size:.95rem; display:flex; justify-content:space-between; gap:8px; margin-bottom:8px}
.cats h3 span{color:var(--ink-3); font-weight:600; font-variant-numeric:tabular-nums}
.cats p{font-size:var(--f-small); line-height:1.55; margin:0; color:var(--ink-2)}

/* artefact gallery */
.artefacts{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:32px 32px}
.artefacts figure{margin:0}
.artefacts .a-wide{grid-column:1 / -1}
.artefacts .a-half{grid-column:span 6}
.artefacts .a-img{border:1px solid var(--rule); background:#fff; display:block; padding:0}
.artefacts figcaption{margin-top:10px; font-size:var(--f-small); line-height:1.5}
.artefacts figcaption b{color:var(--ink); font-weight:700; font-size:var(--f-meta); letter-spacing:.04em; display:block; margin-bottom:2px}
.artefacts .a-main{grid-column:1 / span 8}
.artefacts .a-side{grid-column:9 / -1}
@media (max-width:820px){ .artefacts{grid-template-columns:minmax(0,1fr); gap:28px} .artefacts > *{grid-column:1 / -1 !important} }

/* decision matrix: what existed -> who needed it -> where it landed */
.dm{border-collapse:collapse; width:100%; font-size:var(--f-small); line-height:1.4}
.dm caption{text-align:left; font-size:var(--f-meta); color:var(--ink-3); font-weight:600; padding-bottom:12px}
.dm th,.dm td{padding:9px 12px; border-bottom:1px solid var(--rule); text-align:left; vertical-align:top}
.dm thead th{font-size:var(--f-meta); font-weight:700; color:var(--ink); border-bottom:1px solid var(--ink); letter-spacing:.03em; vertical-align:bottom}
.dm tbody th{font-weight:600; color:var(--ink); padding-left:0}
.dm .who-c{text-align:center; width:4.2rem}
.dm .dot{display:inline-block; width:12px; height:12px; border-radius:50%; background:var(--ink); vertical-align:middle}
.dm .dot.no{background:transparent; border:1px solid var(--rule-2)}
.dm .land{white-space:nowrap; font-weight:600}
.dm .t1{color:var(--red-text)}
.dm .t2{color:var(--gold-text)}
.dm .t3{color:var(--ink-3)}
.dm .off{color:var(--ink-3); font-weight:600}
.dm tr.grp th{background:var(--paper-2); color:var(--ink); font-size:var(--f-meta); letter-spacing:.04em; padding:8px 12px 8px 0}
.dm .why{color:var(--ink-2)}
.tag{display:inline-block; font-size:var(--f-meta); font-weight:700; padding:2px 8px; letter-spacing:.02em}
.tag.t1{background:var(--red-tint); color:var(--red-text)}
.tag.t2{background:var(--gold-tint); color:var(--gold-text)}
.tag.t3{background:var(--paper-2); color:var(--ink-3)}
.tag.off{background:#fff; color:var(--ink-3); border:1px solid var(--rule-2)}

/* information hierarchy tree */
.ia{border-top:1px solid var(--ink)}
.ia-tier{display:grid; grid-template-columns:14rem 1fr; gap:24px; padding:22px 0; border-bottom:1px solid var(--rule)}
.ia-tier .t-head .tag{margin-bottom:8px}
.ia-tier .t-head h3{font-size:1.125rem}
.ia-tier .t-head p{font-size:var(--f-small); color:var(--ink-3); margin:4px 0 0}
.ia-groups{display:grid; gap:10px}
.ia-group{display:grid; grid-template-columns:11rem 1fr; gap:14px; font-size:var(--f-small)}
.ia-group .gn{font-weight:700; color:var(--ink)}
.ia-group .gf{color:var(--ink-2)}
@media (max-width:820px){ .ia-tier,.ia-group{grid-template-columns:1fr; gap:6px} .ia-groups{gap:14px} }

/* five panel terminal */
.term{display:grid; grid-template-columns:1fr 2.2fr 1.3fr 1.3fr 1.3fr; gap:8px; min-height:190px}
.term > div{background:#fff; border:1px solid var(--rule); padding:14px; font-size:var(--f-small); color:var(--ink-3); font-weight:600; display:flex; align-items:flex-end}
.term .target{border:2px solid var(--red); color:var(--ink); flex-direction:column; align-items:flex-start; justify-content:space-between}
.term .target .tag{background:var(--red); color:var(--ink)}
.term .target p{margin:0; font-weight:400; color:var(--ink-2); font-size:var(--f-small)}
@media (max-width:640px){ .term{grid-template-columns:1fr 1fr; min-height:0} .term > div{min-height:70px} .term .target{grid-column:1 / -1; min-height:120px} }

/* before / after panel */
.ba{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:40px; align-items:start}
.ba .phones{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.ba .phones img{border:1px solid var(--rule); background:#fff}
.ba .lab{display:block; font-size:var(--f-meta); font-weight:700; color:var(--ink); letter-spacing:.04em; margin-bottom:12px}
.ba .note{font-size:var(--f-small); color:var(--ink-2); margin-top:12px}
@media (max-width:900px){ .ba{grid-template-columns:1fr} }

/* validation */
.tests{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; margin-top:12px}
.tests > div{border-top:1px solid var(--ink); padding-top:18px}
.tests h3{margin:0 0 6px !important; font-size:1.3rem}
.tests .who-line{font-size:var(--f-small); color:var(--ink-3); margin-bottom:16px}
.tests .ask{list-style:none; margin:0 0 20px; padding:0}
.tests .ask li{padding:10px 0; border-top:1px solid var(--rule); font-size:1rem}
.tests .ask li span{display:block; font-size:var(--f-meta); color:var(--ink-3); font-weight:600; margin-top:3px}
.res{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:4px 0 16px}
.res b{display:block; font-size:2.2rem; line-height:1.05; color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
.res span{font-size:var(--f-small); color:var(--ink-2)}
.exc{list-style:none; padding:0; margin:0}
.exc li{padding:8px 0 8px 16px; border-top:1px solid var(--rule); font-size:1rem; position:relative}
.exc li::before{content:""; position:absolute; left:0; top:1.05em; width:7px; height:2px; background:var(--red-text)}
@media (max-width:820px){ .tests{grid-template-columns:1fr; gap:36px} }

/* next steps */
.next{list-style:none; counter-reset:n; margin:0; padding:0; max-width:var(--measure)}
.next li{counter-increment:n; display:grid; grid-template-columns:2.2rem 1fr; gap:10px; padding:16px 0; border-top:1px solid var(--rule)}
.next li::before{content:counter(n,decimal-leading-zero); font-size:var(--f-meta); font-weight:700; color:var(--ink); padding-top:4px}
.next li p{margin:0}
.next li strong{display:block; margin-bottom:2px}

/* case nav */
.cs-next{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:120px}
.cn{display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit; border:1px solid var(--rule-2); background:var(--paper);
  padding:24px 28px 26px; transition:border-color .2s, background-color .2s, box-shadow .2s}
.cn--next{text-align:right; align-items:flex-end}
.cn:hover{color:inherit; border-color:var(--ink); background:var(--paper-2); box-shadow:0 1px 0 var(--ink)}
.cn-label{display:inline-flex; align-items:center; gap:10px; font-size:var(--f-small); font-weight:600; color:var(--ink-3)}
.cn .arr{font-size:1.25rem; line-height:1; color:var(--ink)}
.cn .t{font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem); font-weight:600; color:var(--ink); line-height:1.25; transition:color .2s}
.cn:hover .t{color:var(--red-text)}
@media (prefers-reduced-motion:no-preference){
  .cn--prev:hover .arr{transform:translateX(-5px)}
  .cn--next:hover .arr{transform:translateX(5px)}
}
@media (max-width:640px){ .cs-next{grid-template-columns:1fr; gap:12px} .cn--next{text-align:left; align-items:flex-start} }

/* recreated software: tracking sheet (kept authentic, mono inside only) */
.sheet{border:1px solid var(--rule); background:#fff}
.sheet-bar{display:flex; align-items:center; gap:12px; padding:9px 14px; background:#EDEAE3; border-bottom:1px solid var(--rule);
  font-family:var(--mono); font-size:.72rem; color:#5E5A52}
.sheet-bar .dots{display:flex; gap:6px}
.sheet-bar .dots i{width:9px; height:9px; border-radius:50%; display:block}
.sheet-bar .right{margin-left:auto; color:#6E6A61}
.sh-band{font-family:var(--mono); font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; padding:6px 8px;
  border-right:1px solid rgba(17,17,17,.08); white-space:nowrap; overflow:hidden}
.sh-h{font-family:var(--mono); font-size:.64rem; line-height:1.3; color:#4F4B44; background:#F4F1EA; padding:6px 7px;
  border-right:1px solid #E7E2D6; border-bottom:1px solid #DCD6C8; display:flex; align-items:flex-end; min-height:42px}
.sh-c{height:24px; border-right:1px solid #F0EDE5; border-bottom:1px solid #F0EDE5; display:flex; align-items:center; padding:0 7px; background:#fff}
.sh-bar{height:7px; border-radius:3px; background:#E6E1D4}
.sheet-tabs{display:flex; gap:3px; padding:7px 12px 0; background:#F2EFE8; border-top:1px solid var(--rule)}
.sheet-tabs span{font-family:var(--mono); font-size:.66rem; padding:5px 13px; background:#E7E3D8; border:1px solid var(--rule); border-bottom:none; color:#6E6A61}
.sheet-tabs span.on{background:#fff; color:#232019}

@media print{ .site-head,.nav-toggle,.cs-next,.site-foot{display:none} .js .rv{opacity:1; transform:none} }

/* =================================================================
   CASE STUDY 01 AND 02 COMPONENTS
   ================================================================= */
/* belief to evidence reframe */
.belief{background:#fff; border:1px solid var(--rule); padding:22px 24px}
.belief p{font-family:var(--serif); font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem); line-height:1.35; color:var(--ink); margin:0 0 12px}
.belief .meta{color:var(--red-text)}
.down{font-size:var(--f-small); color:var(--ink-3); font-weight:600; padding:14px 0 14px 24px}
.gaps{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px}
.gaps > div{background:#fff; padding:18px 22px; border-top:3px solid var(--red)}
.gaps > div.m{border-top-color:var(--gold)}
.gaps h3{font-size:1.0625rem; margin-bottom:6px}
.gaps p{margin:0; font-size:1rem}
.gaps .meta{display:block; margin-bottom:6px; color:var(--gold-text)}
.closing{background:var(--ink); color:#fff; padding:16px 22px; margin-top:24px; font-weight:600}
@media (max-width:640px){ .gaps{grid-template-columns:1fr} }

/* narrowing funnel (generic) */
.nar{display:grid; gap:0; justify-items:center}
.nar .lvl{text-align:center; padding:16px 20px}
.nar .lvl b{display:block; font-size:1.9rem; line-height:1.1; font-weight:600; font-variant-numeric:tabular-nums}
.nar .lvl span{font-size:var(--f-small)}
.nar .w1{width:100%; background:#fff; border:1px solid var(--rule); color:var(--ink)}
.nar .w2{width:62%; background:var(--red-tint); border:1px solid var(--red); color:var(--red-text)}
.nar .w2 b{color:var(--red-text)}
.nar .w3{width:42%; background:var(--ink); color:#fff}
.nar .w3 b{color:#fff}
.nar .w3 span{color:rgba(255,255,255,.84)}
.nar .how{font-size:var(--f-small); color:var(--ink-2); text-align:center; padding:10px 0; max-width:34rem}
@media (max-width:600px){ .nar .w2,.nar .w3{width:100%} }

/* three people who hold the why */
.trio{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
.trio > div{background:#fff; padding:18px 20px; border-top:3px solid var(--gold)}
.trio h3{font-size:1.0625rem; margin-bottom:6px}
.trio p{margin:0; font-size:1rem}
@media (max-width:760px){ .trio{grid-template-columns:1fr} }

.redact{display:flex; gap:14px; align-items:flex-start; border:1px dashed var(--rule-2); padding:14px 18px; margin-top:20px; font-size:var(--f-small); color:var(--ink-2); max-width:var(--measure)}
.redact b{white-space:nowrap; color:var(--ink); font-size:var(--f-meta); letter-spacing:.04em}

/* mindset cards */
.minds{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px}
.mind{border-top:1px solid var(--ink); padding-top:18px}
.mind .no{font-size:var(--f-meta); font-weight:700; color:var(--ink); letter-spacing:.06em}
.mind h3{font-family:var(--serif); font-weight:500; font-size:clamp(1.4rem,1.2rem + .8vw,1.85rem); margin:6px 0 14px}
.mind .count{display:flex; align-items:baseline; gap:10px; margin-bottom:18px}
.mind .count b{font-size:2.4rem; line-height:1; font-weight:600; color:var(--red-text); font-variant-numeric:tabular-nums}
.mind .count span{font-size:var(--f-small); color:var(--ink-2)}
.mind .conflict{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule); border:1px solid var(--rule); margin-bottom:16px}
.mind .conflict > div{background:#fff; padding:14px 16px}
.mind .conflict .meta{display:block; margin-bottom:6px}
.mind .conflict p{margin:0; font-family:var(--serif); font-size:1.02rem; line-height:1.4; color:var(--ink)}
.mind .conflict .need .meta{color:var(--gold-text)}
.mind dl{margin:0}
.mind dl div{padding:10px 0; border-top:1px solid var(--rule)}
.mind dt{font-size:var(--f-meta); font-weight:700; color:var(--ink); letter-spacing:.03em; margin-bottom:3px}
.mind dd{margin:0; font-size:1rem}
@media (max-width:860px){ .minds{grid-template-columns:1fr; gap:40px} }
@media (max-width:480px){ .mind .conflict{grid-template-columns:1fr} }

/* segment distribution */
.dist{display:grid; gap:10px}
.dist .row{display:grid; grid-template-columns:minmax(0,15rem) 1fr 3rem; gap:16px; align-items:center; font-size:1rem}
.dist .nm{color:var(--ink); font-weight:600; line-height:1.3}
.dist .nm small{display:block; font-weight:600; color:var(--red-text); font-size:var(--f-meta)}
.dist .tr{height:14px; background:#E9E7E0}
.dist .fl{height:100%; background:var(--ink)}
.dist .fl.hot{background:var(--red)}
.dist .ct{text-align:right; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums}
.dist .sum{font-size:var(--f-small); color:var(--ink-3); margin-top:6px; text-align:right}
@media (max-width:600px){ .dist .row{grid-template-columns:1fr 2.5rem} .dist .tr{grid-column:1 / -1; grid-row:2} }

/* journey map and failure model grids (native research artefacts) */
.jm,.bfm{display:grid; background:var(--rule); gap:1px; border:1px solid var(--rule); font-size:.9rem; line-height:1.45}
.jm{grid-template-columns:8rem repeat(7,minmax(8.5rem,1fr)); min-width:1080px}
.bfm{grid-template-columns:9rem repeat(5,minmax(10.5rem,1fr)); min-width:1020px}
.jm > div,.bfm > div{background:#fff; padding:12px 12px}
.jm ul,.bfm ul{margin:0; padding-left:1em}
.jm li,.bfm li{margin-bottom:4px}
.jm .rl,.bfm .rl{background:var(--paper-2); font-weight:700; color:var(--ink); font-size:var(--f-meta); letter-spacing:.03em}
.jm .st{background:var(--paper-2); font-weight:700; color:var(--ink)}
.jm .fr{background:var(--red-tint)}
.jm .mood{grid-column:2 / -1; padding:8px 12px}
.jm .mood svg{width:100%; height:auto; display:block}
.bfm .st{font-weight:700; color:var(--ink); line-height:1.25}
.bfm .st small{display:block; font-size:var(--f-meta); color:var(--red-text); font-weight:700; margin-bottom:4px}
.bfm .st.s1{background:#FFF1ED}
.bfm .st.s2{background:#FFE1D8}
.bfm .st.s3{background:#FFCDBF}
.bfm .st.s4{background:#FFB3A0}
.bfm .st.s5{background:var(--ink); color:#fff}
.bfm .st.s5 small{color:var(--gold)}
.bfm .end{background:#FFF7F4}
.bfm .q p{font-family:var(--serif); font-size:.95rem; line-height:1.4; color:var(--ink); margin:0 0 8px}

/* how the model runs */
.flow3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border-top:1px solid var(--ink)}
.flow3 > div{padding:16px 22px 4px 0}
.flow3 > div + div{padding-left:22px; border-left:1px solid var(--rule)}
.flow3 .meta{display:block; margin-bottom:6px; color:var(--gold-text)}
.flow3 h3{font-size:1.0625rem; margin-bottom:6px}
.flow3 p{margin:0; font-size:1rem}
@media (max-width:760px){ .flow3{grid-template-columns:1fr} .flow3 > div + div{padding-left:0; border-left:0; border-top:1px solid var(--rule)} .flow3 > div{padding:14px 0} }

/* learnings */
.learn{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px}
.learn > div{border-top:1px solid var(--ink); padding-top:16px}
.learn h3{font-size:1.125rem; margin-bottom:8px}
.learn p{font-size:1.0625rem}
@media (max-width:760px){ .learn{grid-template-columns:1fr} }

/* two mindsets that still failed (cs02) */
.rc{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px}
.rc > div{background:#fff; padding:20px 22px; border-top:3px solid var(--red)}
.rc h3{font-family:var(--serif); font-weight:500; font-size:1.35rem; margin-bottom:12px}
.rc .nums{display:flex; gap:28px; margin-bottom:12px}
.rc .nums b{display:block; font-size:1.7rem; line-height:1.1; color:var(--red-text); font-weight:600; font-variant-numeric:tabular-nums}
.rc .nums span{font-size:var(--f-meta); color:var(--ink-3); font-weight:600}
.rc p{margin:0; font-size:1rem}
@media (max-width:640px){ .rc{grid-template-columns:1fr} }

/* implied vs actual */
.vs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule)}
.vs > div{background:#fff; padding:20px 22px}
.vs .meta{display:block; margin-bottom:10px}
.vs .said .meta{color:var(--red-text)}
.vs .real .meta{color:var(--gold-text)}
.vs ul{margin:0; padding-left:1.05em}
.vs li{margin-bottom:.45em}
@media (max-width:640px){ .vs{grid-template-columns:1fr} }

/* website mock: keeps Amura's own look on purpose */
.browser{border:1px solid var(--rule); background:#FDFCF9; overflow:hidden}
.browser-bar{display:flex; align-items:center; gap:12px; padding:11px 16px; background:#EDEAE3; border-bottom:1px solid var(--rule)}
.browser-bar .dots{display:flex; gap:6px}
.browser-bar .dots i{width:10px; height:10px; border-radius:50%; display:block}
.browser-bar .url{flex:1; max-width:340px; background:#fff; border:1px solid #DDD8CC; border-radius:16px; padding:4px 16px; font-family:var(--mono); font-size:.72rem; color:#5E5A52}
@media (max-width:700px){ .browser [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important} .browser [style*="padding:54px 38px"]{padding:30px 20px !important} .browser [style*="justify-content:space-between;align-items:center;padding:18px 38px"] > span:last-child{display:none !important} }

/* gap analysis */
.ga-old{border:1px solid var(--red); background:#fff; padding:16px 20px}
.ga-old .meta{color:var(--red-text)}
.ga-q{font-family:var(--serif); font-size:1.25rem; color:var(--ink); margin:6px 0 0; line-height:1.35}
.ga-mid{font-size:var(--f-small); color:var(--ink-3); font-weight:600; padding:14px 0 14px 20px}
.ga4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.ga4 > div{background:#fff; padding:14px 16px; border-top:3px solid var(--gold)}
.ga4 h3{font-size:1rem; margin-bottom:4px}
.ga4 p{margin:0; font-size:.95rem}
.ga-new{background:var(--ink); color:#fff; padding:16px 20px; margin-top:16px}
.ga-new .meta{color:var(--gold)}
.ga-new .ga-q{color:#fff}
@media (max-width:760px){ .ga4{grid-template-columns:1fr 1fr} }
@media (max-width:460px){ .ga4{grid-template-columns:1fr} }

/* ten categories, grouped */
.cat-groups{border-top:1px solid var(--ink)}
.cg{display:grid; grid-template-columns:12rem 1fr; gap:24px; padding:18px 0; border-bottom:1px solid var(--rule)}
.cg > .meta{color:var(--ink); padding-top:3px}
.cg details{border-top:1px solid var(--rule); padding:10px 0}
.cg details:first-of-type{border-top:0; padding-top:0}
.cg summary{cursor:pointer; list-style:none; display:grid; grid-template-columns:2.2rem 1fr auto; gap:10px; align-items:baseline}
.cg summary::-webkit-details-marker{display:none}
.cg summary .n{font-size:var(--f-meta); font-weight:700; color:var(--ink-3); font-variant-numeric:tabular-nums}
.cg summary .t{font-weight:600; color:var(--ink)}
.cg summary .t span{display:block; font-weight:400; color:var(--ink-2); font-size:.975rem}
.cg summary .more-ind{font-size:var(--f-meta); font-weight:600; color:var(--ink-3)}
.cg summary .more-ind::after{content:"Details +"}
.cg details[open] summary .more-ind::after{content:"Close"}
.cg .det{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:12px 0 4px 3.2rem; font-size:.95rem}
.cg .det .meta{display:block; margin-bottom:4px}
.cg .det ul{margin:0; padding-left:1em}
@media (max-width:760px){ .cg{grid-template-columns:1fr; gap:10px} .cg .det{grid-template-columns:1fr; margin-left:0} }

/* ten categories to six mindsets */
.cm{margin:0 0 16px}
.cm-h{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin:0 0 6px}
.cm-nm{font-weight:600; color:var(--ink)}
.cm-tag{font-size:var(--f-meta); font-weight:700; color:var(--red-text); margin-left:8px}
.cm-ct{font-size:var(--f-small); color:var(--ink-3); white-space:nowrap}
.cm-tr{height:10px; background:#E9E7E0; margin-bottom:7px}
.cm-fl{height:100%; background:var(--ink)}
.cm-fl.hot{background:var(--red)}
.cm-chips{display:flex; flex-wrap:wrap; gap:5px}
.cm-chip{font-size:.75rem; font-weight:700; color:var(--ink); background:#fff; border:1px solid var(--rule-2); min-width:26px; height:24px; display:inline-flex; align-items:center; justify-content:center; padding:0 6px}
.cm-leg{border-top:1px solid var(--rule); margin-top:20px; padding-top:14px; display:grid; grid-template-columns:1fr 1fr; gap:6px 24px; font-size:var(--f-small); color:var(--ink-2)}
.cm-leg b{color:var(--ink); display:inline-block; min-width:1.6rem}
@media (max-width:640px){ .cm-leg{grid-template-columns:1fr} }

/* service flow */
.flow-svg{min-width:760px}
.flow-svg svg{width:100%; height:auto; display:block}
.flow-lab{display:block; font-size:var(--f-meta); font-weight:700; color:var(--ink); letter-spacing:.04em; margin:0 0 10px}
.flow-lab.before{color:var(--red-text)}
.flow-lab.after{color:var(--gold-text)}
.flow-legend{display:flex; flex-wrap:wrap; gap:8px 22px; font-size:var(--f-meta); color:var(--ink-2); font-weight:600; margin-top:18px}
.flow-legend span{display:inline-flex; align-items:center; gap:8px}
.flow-legend i{width:14px; height:14px; display:inline-block}

/* =================================================================
   ABOUT AND WORK
   ================================================================= */
.page-hero{padding-top:96px}
.kicker{display:block; font-size:1.125rem; line-height:1.4; font-weight:600; color:var(--ink-3); margin:0 0 18px}
.page-hero h1,.about-hero h1{font-family:var(--serif); font-weight:500; letter-spacing:-.02em}
.page-hero .lead,.about-hero .lead{font-size:var(--f-lead); max-width:38rem; margin:24px 0 0}

.about{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:32px; padding-top:96px}
.about-hero{grid-column:6 / 13; grid-row:1; margin-bottom:56px}
.about-photo{grid-column:1 / 5; grid-row:1 / span 2; margin:0; align-self:start; position:sticky; top:104px}
.about-photo img{width:100%}
.about-text{grid-column:6 / 13; grid-row:2; max-width:var(--measure)}
.about-text h2{font-size:var(--f-h3); margin:0 0 14px}
.about-text section + section{margin-top:44px; padding-top:32px; border-top:1px solid var(--rule)}
.about-text .bg-list{margin-top:0}
.contact-links--about{grid-template-columns:1fr 1fr; margin-top:20px}
.contact-links--about li:first-child{grid-column:1 / -1}
@media (max-width:900px){
  .about{display:block; padding-top:64px}
  .about-hero{margin-bottom:32px}
  .about-photo{position:static; max-width:380px; margin:0 0 40px}
}

/* stacked timeline legend: used when one phase is too short to label in place */
.tl .sw{display:inline-block; width:10px; height:10px; margin-right:8px; vertical-align:0}
.tl .sw.ph1{background:var(--red)} .tl .sw.ph2{background:var(--gold)} .tl .sw.ph3{background:var(--ink)}
.tl--stack .tl-phases{display:none}
.tl--stack .tl-stages{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 32px}
.tl--stack .tl-stages > div{grid-column:auto !important}
.tl--stack .tl-stages .ph-name{display:block; font-weight:700; color:var(--ink); font-size:1rem; margin-bottom:4px}
@media (max-width:760px){ .tl--stack .tl-stages{display:block} }

/* education, kept apart from employment */
.bg-list.edu{margin-top:36px}
.bg-list.edu > .meta{margin:0 0 8px}
.about-text .bg-list .row:last-child{border-bottom:0}
/* when the content below starts in column 4, the rail may hang beside it instead of pushing it down */
@media (max-width:720px){
  .hero{padding:56px 0 56px}
  .home-sec{padding-top:72px}
  .page-hero,.cs-hero{padding-top:56px}
  .about{padding-top:56px}
  .cs-next{margin-top:88px}
}

/* heading alignment rule: a heading shares the left edge of the content under it */
.sec--stack .sec-rail{grid-column:1 / -1; grid-row:auto; margin-bottom:14px}
.sec--stack > *{grid-column:1 / -1}
.home-head--stack{display:block}
.home-head--stack .sec-rail{margin-bottom:14px}
h1,h2,h3{text-wrap:balance}

/* =================================================================
   HOME HERO ILLUSTRATION
   ================================================================= */
.hero-art{margin:56px 0 0}
.hero-art img{width:100%; height:auto}
.hero-art figcaption{display:flex; justify-content:space-between; gap:16px; margin-top:12px; font-size:var(--f-meta); font-weight:600; color:var(--ink-3); letter-spacing:.02em}
@media (max-width:720px){ .hero-art{margin-top:36px} }

/* =================================================================
   CHARTS
   Before is a hollow grey ring, after a solid red dot: shape and colour both carry it.
   Colours validated for colour vision deficiency (adjacent pair dE 14.3) and 3:1 contrast.
   ================================================================= */
:root{--before:#8E8C85; --after:var(--red-text); --surface:var(--paper)}
.fig-frame:not(.fig-frame--plain){--surface:var(--paper-2)}
.dd-legend{display:flex; flex-wrap:wrap; gap:4px 20px; margin:0 0 6px; font-size:var(--f-meta); font-weight:600; line-height:1.4; color:var(--ink-3)}
.dd-key{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:7px; vertical-align:-1px; box-sizing:border-box}
.dd-key--b{border:2px solid var(--before); background:var(--surface)}
.dd-key--a{background:var(--after)}
.dd-key--line{width:14px; height:2px; border-radius:0; vertical-align:3px}

/* dumbbell: compact by default (name and values above a full width track) */
.dd-row{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"name vals" "track track"; column-gap:12px; row-gap:5px; padding:7px 0}
.dd-name{grid-area:name; align-self:baseline; font-size:var(--f-small); line-height:1.35; color:var(--ink-2)}
.dd-vals{grid-area:vals; align-self:baseline; font-size:var(--f-small); line-height:1.35; color:var(--ink-3); white-space:nowrap; font-variant-numeric:tabular-nums lining-nums}
.dd-vals .v1{color:var(--ink); font-weight:700}
.dd-arr{margin:0 6px}
.dd-x{margin-left:10px}
.dd-track{grid-area:track; position:relative; height:14px}
.dd-track::before{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--rule)}
.dd-link{position:absolute; top:50%; height:2px; margin-top:-1px; background:var(--after); opacity:.35}
.dd-dot{position:absolute; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; box-sizing:border-box}
.dd-dot--b{background:var(--surface); border:2px solid var(--before)}
.dd-dot--a{background:var(--after); box-shadow:0 0 0 2px var(--surface)}
.dd-row--axis{padding:3px 0 0}
.dd-row--axis .dd-name,.dd-row--axis .dd-vals{display:none}
.dd-ticks{height:16px}
.dd-ticks::before{display:none}
.dd-ticks span{position:absolute; top:0; transform:translateX(-50%); font-size:.75rem; line-height:1.3; color:var(--ink-3); font-variant-numeric:tabular-nums lining-nums; white-space:nowrap}
.dd-ticks span.t0{transform:none}
.dd-ticks span.tmax{transform:translateX(-100%)}

/* dumbbell: wide, one line per row with shared gridlines */
.dd--wide .dd-row{grid-template-columns:var(--dd-name,8rem) minmax(0,1fr) var(--dd-vals,8rem); grid-template-areas:"name track vals"; column-gap:20px; row-gap:0; padding:0}
.dd--wide .dd-name,.dd--wide .dd-vals{align-self:center; padding:10px 0}
.dd--wide .dd-vals{text-align:right}
.dd--wide .dd-track{height:auto; min-height:42px}
.dd-g{position:absolute; top:0; bottom:0; width:1px; background:#EFEDE7}
.dd--wide .dd-row--axis .dd-name,.dd--wide .dd-row--axis .dd-vals{display:block; padding:0}
.dd--wide .dd-ticks{min-height:0; height:22px}
.dd--wide .dd-ticks span{top:6px}
.dd-row--total{border-top:1px solid var(--rule-2)}
.dd-row--total .dd-name{font-weight:700; color:var(--ink)}
.dd-rows{transition:opacity .15s}
.dd-row{transition:opacity .15s}
@media (hover:hover){ .dd--wide .dd-rows:hover .dd-row:not(.dd-row--axis):not(:hover){opacity:.4} }
@media (max-width:640px){
  .dd--wide .dd-row{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"name vals" "track track"; row-gap:5px; padding:8px 0}
  .dd--wide .dd-name,.dd--wide .dd-vals{padding:0}
  .dd--wide .dd-vals{text-align:left}
  .dd--wide .dd-track{min-height:0; height:14px}
  .dd--wide .dd-row--axis .dd-name,.dd--wide .dd-row--axis .dd-vals{display:none}
  .dd--wide .dd-ticks{height:16px}
  .dd--wide .dd-ticks span{top:0}
}
.dd-panels{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 56px}
.dd-title,.lc-title{margin:0 0 8px; font-size:var(--f-small); font-weight:700; color:var(--ink)}
@media (max-width:1080px){ .dd-panels{grid-template-columns:1fr} }
.chart-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px 24px; margin-bottom:22px}
.chart-head .dd-legend{margin:0}
.chart-sub{margin:0; font-size:var(--f-meta); font-weight:600; color:var(--ink-3)}

/* line chart, small multiples */
.lc-plot{position:relative; height:200px; margin:14px 3.5rem 0 2.75rem; outline-offset:6px}
.lc-plot svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.lc-plot polyline{fill:none; stroke-width:2; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round}
.lc-plot polyline.s-a{stroke:var(--after)}
.lc-plot polyline.s-b{stroke:var(--before)}
.lc-g{position:absolute; left:0; right:0; height:1px; background:var(--rule)}
.lc-g span{position:absolute; right:100%; margin-right:10px; transform:translateY(-50%); font-size:.75rem; font-style:normal; color:var(--ink-3); font-variant-numeric:tabular-nums lining-nums; white-space:nowrap}
.lc-dot{position:absolute; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; box-sizing:border-box}
.lc-dot.s-a{background:var(--after); box-shadow:0 0 0 2px var(--surface)}
.lc-dot.s-b{background:var(--surface); border:2px solid var(--before)}
.lc-end{position:absolute; left:100%; margin-left:12px; transform:translateY(-50%); font-size:var(--f-small); font-weight:700; color:var(--ink); white-space:nowrap; font-variant-numeric:lining-nums}
.lc-mark{position:absolute; top:-18px; bottom:0; width:0; border-left:1px solid var(--ink-3)}
.lc-mark span{position:absolute; top:0; left:6px; font-size:.75rem; font-weight:600; color:var(--ink-2); white-space:nowrap; line-height:1}
.lc-x{position:relative; height:18px; margin:8px 3.5rem 0 2.75rem; font-size:.75rem; color:var(--ink-3)}
.lc-x span{position:absolute; top:0; transform:translateX(-50%); white-space:nowrap}
.lc-hair{position:absolute; top:0; bottom:0; width:1px; margin-left:-.5px; background:var(--ink); opacity:.55; pointer-events:none}
.lc-tip{position:absolute; top:4px; z-index:3; min-width:10.5rem; padding:9px 11px; background:var(--ink); color:#fff; font-size:.8125rem; line-height:1.45; pointer-events:none; transform:translateX(14px)}
.lc-tip.flip{transform:translateX(calc(-100% - 14px))}
.lc-tip b{display:block; font-weight:600; color:#D9D7D0; margin-bottom:3px}
.lc-tip .r{display:flex; align-items:center; gap:8px; white-space:nowrap}
.lc-tip .r::before{content:""; flex:none; width:12px; height:2px; background:#C9C7BE}
.lc-tip .r.s-a::before{background:#FF8A74}
.lc-tip .r strong{color:#fff; font-weight:700}
.lc-tip .r span{color:#D9D7D0}
.lc-panels{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 64px}
@media (max-width:820px){ .lc-panels{grid-template-columns:1fr} .lc-plot{height:180px} }

/* the table behind a chart, one click away */
.tv{margin-top:28px; border-top:1px solid var(--rule)}
.tv summary{display:inline-flex; align-items:center; gap:10px; padding:14px 0 4px; cursor:pointer; list-style:none; font-size:var(--f-small); font-weight:600; color:var(--ink)}
.tv summary::-webkit-details-marker{display:none}
.tv summary::before{content:""; width:7px; height:7px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:rotate(-45deg); transition:transform .15s}
.tv[open] summary::before{transform:rotate(45deg)}
.tv summary:hover{color:var(--red-text)}
.tv > .scroll-x{margin-top:16px}
@media print{ .tv > .scroll-x{display:block} }