/* Home and section components (hero, case cards, previews, tools and methods). Requires tokens.css and site.css. */
/* Home hero (A and B) */
.home-hero{padding-block:clamp(56px,7vw,96px) clamp(56px,7vw,104px)}
.home-hero .grid-12{row-gap:48px}
.hh-main{grid-column:span 8;display:flex;flex-direction:column;gap:26px;min-width:0}
.hh-main h1{font-size:clamp(2.5rem,5.4vw,4.25rem);line-height:1.06;letter-spacing:-.01em}
.hh-main p{font-size:var(--lead);line-height:1.6;color:var(--soft-dark);max-width:48ch}
.hh-facts{grid-column:span 4;align-self:end;display:flex;flex-direction:column;border-top:1px solid var(--line-dark);margin:0}
.hh-facts div{padding-block:18px;border-bottom:1px solid var(--line-dark);display:flex;flex-direction:column;gap:6px}
.hh-facts dt{font-size:var(--label);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dark)}
.hh-facts dd{margin:0;font-size:1.0625rem;color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* Case cards */
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.case{border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:14px;min-height:340px;background:var(--mist);color:var(--ink);text-decoration:none;min-width:0}
a.case:hover{color:var(--ink)}
.case.live{background:var(--charcoal);color:#fff}
a.case.live:hover{color:#fff}
.phase{display:inline-flex;align-items:center;gap:10px;font-size:var(--label);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.case.live .phase{color:var(--saffron)}
.case h3{font-size:1.5rem;line-height:1.25}
.case.live h3{color:#fff}
.case p{font-size:1rem;color:var(--muted);flex-grow:1}
.case.live p{color:var(--soft-dark)}
.case .go{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--muted)}
.case.live .go{color:var(--saffron)}
.case .phase .ico{width:40px;height:40px;--g:20px}
.case.live .phase .ico{--tone:var(--tone-dark);background:var(--charcoal-2);color:var(--saffron)}

.home-sec{padding-block:clamp(56px,7vw,88px) 0}
.sec-top{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.sec-top h2{font-size:var(--h2)}
.sec-top .aside{color:var(--muted);font-size:1rem}

/* A: tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--rule);margin-bottom:32px;overflow-x:auto}
.tabs button{font:inherit;font-family:var(--display);font-size:clamp(1.15rem,2vw,1.5rem);font-weight:700;padding:14px 20px;min-height:48px;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;background:none;color:var(--muted);cursor:pointer;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--saffron)}
.role-rows{list-style:none;padding:0;margin-top:28px}
.role-rows li{display:grid;grid-template-columns:200px minmax(0,1fr) minmax(0,1fr);gap:24px;padding-block:18px;border-top:1px solid var(--rule);align-items:baseline}
.role-rows .when{font-weight:700;color:var(--ochre);font-size:.9375rem;font-variant-numeric:tabular-nums}
.role-rows b{display:block;font-family:var(--display);font-size:1.25rem;color:var(--ink)}
.role-rows span.co{color:var(--muted)}
.more{display:inline-flex;align-items:center;gap:8px;font-weight:700;margin-top:24px;min-height:44px}
.method-groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.mg{background:var(--mist);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:12px}
.mg h3{font-size:1.2rem}
.mg ul{list-style:none;padding:0;display:flex;flex-direction:column}
.mg li{padding-block:10px;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:2px}
.mg li b{font-size:1rem;color:var(--ink)}
.mg li span{font-size:.875rem;color:var(--muted)}
.tools-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-top:28px}
.tools-row div{display:flex;flex-direction:column;gap:4px}
.tools-row span{font-size:1rem;font-weight:700;color:var(--ink);line-height:1.5}

/* B: previews */
.previews{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.preview{border:1px solid var(--rule);border-radius:var(--radius-lg);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:20px;color:var(--ink);text-decoration:none}
a.preview:hover{border-color:var(--edge);color:var(--ink)}
.preview h3{font-size:1.875rem}
.disc-mini{list-style:none;padding:0;display:flex;flex-direction:column}
.disc-mini li{display:flex;gap:14px;align-items:center;padding-block:12px;border-top:1px solid var(--rule)}
.disc-mini b{display:block;font-size:1.0625rem}
.disc-mini small{color:var(--muted);font-size:.9375rem}
.drawn{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px}
.drawn li{background:var(--cream);border-radius:16px;padding:18px 20px;font-size:1.0625rem;line-height:1.5}
.drawn li:nth-child(2){background:var(--mist)}
.preview .go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--ochre)}

@media (max-width:1080px){
  .hh-main,.hh-facts{grid-column:1 / -1}
  .cases,.method-groups,.tools-row{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .cases,.method-groups,.tools-row,.previews{grid-template-columns:1fr}
  .role-rows li{grid-template-columns:1fr;gap:4px}
  .case{min-height:0}
}

/* ---------- About page ---------- */
.about-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:start}
.about-bio{grid-column:span 7;display:flex;flex-direction:column;gap:18px;min-width:0}
.about-bio p{font-size:var(--lead);line-height:1.6;color:var(--body);max-width:60ch}
.bring{grid-column:9 / span 4;background:var(--charcoal);color:var(--soft-dark);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:0;margin:0}
.bring .label{color:var(--muted-dark);margin-bottom:8px}
.bring div{padding-block:14px;border-top:1px solid var(--line-dark);display:flex;flex-direction:column;gap:4px}
.bring dt{font-size:var(--label);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--saffron)}
.bring dd{margin:0;color:#fff;font-size:1.0625rem}
.drawn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.drawn-card{border-radius:var(--radius);padding:28px;display:flex;gap:18px;align-items:flex-start;background:var(--cream)}
.drawn-card:nth-child(2){background:var(--mist)}
.drawn-card p{font-family:var(--display);font-size:1.375rem;line-height:1.35;font-weight:700;color:var(--ink)}
.after-note{font-size:var(--text);color:var(--body);max-width:70ch;margin-top:24px}
.stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);list-style:none;padding:0;counter-reset:st}
.stage{border:1px solid var(--rule);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:14px;min-width:0}
.stage-top{display:flex;gap:12px;align-items:center}
.stage h3{font-size:1.3rem;line-height:1.2}
.stage h4{margin:6px 0 0;font-size:.9375rem;font-weight:700;color:var(--ochre)}
.stage ul{padding-left:18px;display:flex;flex-direction:column;gap:8px;font-size:1rem;line-height:1.45;color:var(--body)}
.phase-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:28px}
.phase-card{border-radius:var(--radius);padding:24px;background:var(--mist);display:flex;flex-direction:column;gap:10px;color:var(--ink);text-decoration:none;position:relative}
a.phase-card{background:var(--charcoal);color:#fff}
a.phase-card:hover{color:#fff}
.phase-card .k{font-size:var(--label);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
a.phase-card .k{color:var(--muted-dark)}
.phase-card b{font-family:var(--display);font-size:1.5rem}
.phase-card .m{font-size:1rem;color:var(--body)}
a.phase-card .m{color:var(--soft-dark)}
.phase-card .c{margin-top:auto;font-weight:700;color:var(--muted);display:inline-flex;gap:8px;align-items:center}
a.phase-card .c{color:var(--saffron)}
.influence{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.inf{background:var(--charcoal-2);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:14px}
.inf h3{font-size:1.375rem;color:var(--saffron)!important}
.inf ul{padding-left:18px;display:flex;flex-direction:column;gap:12px;color:var(--soft-dark);font-size:1.0625rem;line-height:1.5}
@media (max-width:1080px){
  .about-bio,.bring{grid-column:1 / -1}
  .stages{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .drawn-grid,.stages,.phase-strip,.influence{grid-template-columns:1fr}
}

/* Case cards: plain-language summary for visitors without access */
.access-note{font-size:1rem;color:var(--body);margin:-12px 0 24px;max-width:70ch}
.case-facts{margin:0;display:flex;flex-direction:column;gap:12px;flex-grow:1}
.case-facts div{display:flex;flex-direction:column;gap:2px}
.case-facts dt{font-size:var(--label);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.case.live .case-facts dt{color:var(--muted-dark)}
.case-facts dd{margin:0;font-size:1rem;line-height:1.45;color:var(--ink)}
.case.live .case-facts dd{color:#fff}