/* ==========================================================================
   Portfolio text system, 21 October
   One treatment per role, on every page. Loaded last, after each page's own
   styles, so it settles the differences the style review found:
   - one H1 for case studies, one for lead pages (home, about)
   - chapter headings (H2) visibly larger than subsections (H3)
   - one lead size, one label, one caption
   - two quote scales: a standalone quote and a compact evidence quote
   - one headline-figure style for results
   ========================================================================== */

:root{
  --t-h1:clamp(2.4rem,5.28vw,4.75rem);
  --t-h1-lead:clamp(2.1rem,4.6vw,3.75rem);
  --t-h2:clamp(1.875rem,3vw,2.5rem);
  --t-h3:clamp(1.375rem,1.9vw,1.75rem);
  --t-h3-sm:clamp(1.1875rem,1.4vw,1.3125rem);
  --t-lede:clamp(1.3rem,1.7vw,1.5rem);
  --t-quote:clamp(1.4rem,2.4vw,1.9rem);
  --t-fig:clamp(2.75rem,4.6vw,4.25rem);
  --t-fig-sm:clamp(2rem,3.2vw,2.75rem);
  --lg:#F5F5F7;
  --pb:#EEF1FD;
}

/* ---------- Headings ---------- */
.has-rail main h1{
  font-size:var(--t-h1)!important;font-weight:700!important;line-height:1.12!important;
  letter-spacing:-.04em!important;max-width:20ch;text-wrap:balance;
}
.v3 .lead-head h1{font-size:var(--t-h1-lead)!important;line-height:1.1!important;letter-spacing:-.04em}

.has-rail .chapter h2,
.has-rail .chapter h2.span-head,
.has-rail .article .chapter h2{
  font-size:var(--t-h2)!important;font-weight:700;line-height:1.2!important;
  letter-spacing:-.025em!important;max-width:46rem;text-wrap:balance;
}
/* Subsections: one size smaller than the chapter, everywhere */
.has-rail .chapter h3,
.has-rail .chapter .span-text h3,
.has-rail .chapter h3.lk-h,
.has-rail .chapter h2.wsr-more-h2{
  font-size:var(--t-h3)!important;line-height:1.25!important;letter-spacing:-.02em!important;
  max-width:40rem;text-wrap:balance;
}
/* Process steps that sit in full-width bands, outside a chapter */
.has-rail .proc h3{font-size:var(--t-h3)!important;line-height:1.25!important;letter-spacing:-.02em!important}
/* "More work" is a label on every page */
.has-rail .more h2,.v3 .more h2{font-size:.8125rem!important;font-weight:700;letter-spacing:.1em!important;
  text-transform:uppercase;color:var(--blue);line-height:1.4!important;margin-bottom:2rem;max-width:none}
/* Small headings inside cards, steps and lists */
.has-rail .chapter .step h3,
.has-rail .chapter .solo-text h3,
.has-rail .chapter .reflect h3,
.has-rail .chapter .onward h3,
.has-rail .chapter .problems h3,
.has-rail .chapter h3.t-sm{
  font-size:var(--t-h3-sm)!important;line-height:1.3!important;letter-spacing:-.015em!important;
}
.has-rail .chapter .step h3{font-size:var(--t-h3)!important;line-height:1.25!important}

/* ---------- Lead, labels, captions ---------- */
.has-rail .head-block .lede-under,
.has-rail .summary-statement{
  font-size:var(--t-lede)!important;line-height:1.5!important;letter-spacing:-.012em!important;
  color:var(--ink)!important;max-width:46rem;
}
.label,.sublabel,.page-kicker,.onward-kicker,.phone-kicker,.step .count{
  font-size:.8125rem!important;font-weight:700!important;letter-spacing:.1em!important;
  text-transform:uppercase;line-height:1.4;color:var(--blue);
}
main figcaption:not(.ev-it figcaption){font-size:.875rem;line-height:1.5;color:var(--muted)}

/* ---------- Quotes ----------
   .pq   standalone quote: semibold, display size, hanging quote mark, attribution under
   .eq   compact evidence quote: body size, blue rule, attribution under
   Existing page classes are mapped onto the same two scales. */
.pq{margin:0}
.pq blockquote,.pq>p.q,
.has-rail .chapter blockquote:not([class]),
.has-rail .chapter blockquote.ctx-q{
  margin:0;font-weight:600;font-size:var(--t-quote)!important;line-height:1.25!important;
  letter-spacing:-.02em!important;max-width:30ch;text-indent:-.42em;color:var(--ink);
  border:0;padding:0;
}
.pq blockquote p{margin:0}
.pq figcaption,.pq .by,.eq figcaption,.eq .by{
  margin:.85rem 0 0!important;font-size:.875rem!important;line-height:1.45;color:var(--muted)!important;
  font-weight:400;text-indent:0;
}
.pq-row{display:grid;gap:2.25rem 3rem}
@media (min-width:48rem){.pq-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

.eq{margin:0;padding:.15rem 0 .15rem 1.1rem;border-left:3px solid var(--blue)}
.eq blockquote,.eq>p.q,
.has-rail .chapter blockquote.bau-q{
  margin:0;font-weight:400;font-size:1.0625rem!important;line-height:1.55!important;
  letter-spacing:0!important;color:var(--ink);
}
.has-rail .chapter blockquote.bau-q{padding-left:1.1rem;border-left:3px solid var(--blue)!important}
.eq blockquote p{margin:0}

/* Quote cards: compact quotes set out as a row */
.qcards{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
@media (min-width:48rem){.qcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}}
.qcards li{background:var(--lg);padding:1.5rem 1.6rem 1.4rem;display:flex;flex-direction:column;justify-content:space-between;gap:1rem}
.qcards blockquote{margin:0;font-weight:600;font-size:1.1875rem;line-height:1.4;letter-spacing:-.01em;text-indent:-.4em}
.qcards .by{margin:0;font-size:.875rem;color:var(--muted)}

/* ---------- Headline figures ---------- */
.has-rail .impact .n,
.has-rail .impact.three .n,
.stats .n{
  font-size:var(--t-fig)!important;font-weight:700;line-height:1!important;
  letter-spacing:-.045em!important;color:var(--ink);
}
.has-rail .impact div:first-child .n,.stats>div:first-child .n{color:var(--blue)}
.has-rail .impact p,.stats p{font-size:.9375rem;line-height:1.5}

.stats{list-style:none;margin:0;padding:0;display:grid;gap:2rem 2rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:62rem){
  .stats{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}
}
.stats>div{min-width:0}
.stats .n{display:block;margin-bottom:.7rem;white-space:nowrap}
.stats p{margin:0;max-width:15rem}
.stats .stars{margin:0 0 .5rem}
.stats.sm .n{font-size:var(--t-fig-sm)!important}
.stats-src{margin:1rem 0 0!important;font-size:.875rem;color:var(--muted)}

/* Results line on the first screen: figures in bold, blue dots between */
.resline{list-style:none;margin:clamp(1.5rem,2.5vw,2rem) 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:.5rem 1.1rem;font-size:1.0625rem;line-height:1.5;max-width:52rem}
.resline li{display:inline-flex;align-items:baseline;gap:1.1rem}
.resline li:not(:last-child)::after{content:"";flex:none;width:.32rem;height:.32rem;border-radius:50%;
  background:var(--blue);transform:translateY(-.22em)}
.resline b{font-weight:700}

/* ---------- Glanceable problem list (Context) ---------- */
.problems{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem 2.5rem;counter-reset:pr}
@media (min-width:48rem){.problems{grid-template-columns:repeat(2,minmax(0,1fr))}}
.problems>li{counter-increment:pr;display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.9rem;
  padding-top:1.1rem;border-top:1px solid var(--rule)}
.problems>li::before{content:counter(pr);width:1.75rem;height:1.75rem;border-radius:50%;background:var(--blue);
  color:#fff;font-weight:700;font-size:.875rem;display:flex;align-items:center;justify-content:center;margin-top:.1rem}
.problems h3{margin:0!important;max-width:none!important}
.problems p{margin:.4rem 0 0;font-size:1rem;line-height:1.5;color:var(--muted)}
.problems p.q{color:var(--ink)}

/* ---------- Brief / opportunity: the H3 that turns Context ---------- */
.turn{margin-top:clamp(2.5rem,5vw,3.5rem)}

/* ---------- Diagram boxes built in HTML ---------- */
.tc{background:var(--lg);padding:clamp(1.25rem,3vw,2.25rem)}
.tc-lab{margin:0 0 .75rem;font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tc-row{display:grid;gap:.75rem}
.tc-row+.tc-lab{margin-top:1.75rem}
@media (min-width:40rem){.tc-row.c5{grid-template-columns:repeat(5,minmax(0,1fr))}.tc-row.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.tc-row.c4{grid-template-columns:repeat(4,minmax(0,1fr))}.tc-row.c2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tc-box{background:#fff;padding:.85rem .95rem;min-width:0}
.tc-box p{margin:0}
.tc-t{font-size:.9375rem;font-weight:600;line-height:1.35;color:var(--ink)}
.tc-s{font-size:.875rem;line-height:1.45;color:var(--muted);margin-top:.3rem!important}
.tc-box.off{background:transparent;border:1px dashed #B6BFCB}
.tc-box.off .tc-s{color:#8A2B00}
.tc-box.key{background:var(--blue-soft);box-shadow:inset 0 0 0 1.5px var(--blue)}
.tc-box.key .tc-t,.tc-box.key .tc-s{color:var(--blue)}
.tc-arrow{display:flex;align-items:center;gap:.6rem;font-size:.875rem;color:var(--muted)}
.tc-step{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin:0 0 .35rem}

/* Renames: old name struck, new name in bold */
.renames{display:grid;gap:1rem}
@media (min-width:48rem){.renames{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}}
.renames>div{background:var(--lg);padding:1.4rem 1.5rem}
.renames .from{margin:0;font-size:1.0625rem;color:var(--muted);text-decoration:line-through;text-decoration-thickness:1.5px}
.renames .to{margin:.25rem 0 0;font-size:clamp(1.3rem,1.8vw,1.5rem);font-weight:700;letter-spacing:-.015em;line-height:1.25}
.renames .why{margin:.75rem 0 0;font-size:.9375rem;line-height:1.5;color:var(--muted)}

/* Phase strip */
.phases{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem;counter-reset:ph}
@media (min-width:48rem){.phases{grid-template-columns:repeat(4,minmax(0,1fr))}}
.phases li{counter-increment:ph;margin:0}
.phases .ph-shot{background:var(--lg);aspect-ratio:4/5;overflow:hidden;display:flex;align-items:flex-start;justify-content:center;padding:1rem 1rem 0}
.phases .ph-shot img{width:100%;height:auto;display:block;box-shadow:0 1px 2px rgba(22,22,26,.08)}
.phases .ph-shot.phone img{width:62%}
.phases .ph-k{margin:.85rem 0 .2rem;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.phases .ph-k::before{content:counter(ph) " · "}
.phases p{margin:0;font-size:1rem;line-height:1.45}

/* Paired media blocks with a short line of text */
.media-row{display:grid;gap:clamp(1.25rem,3vw,2.5rem);align-items:start}
@media (min-width:48rem){.media-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Highlight a figure in a stats row as the turn */
.stats .n .unit{font-size:.5em;letter-spacing:-.02em}

@media print{
  .pq blockquote,.has-rail .chapter blockquote:not([class]){font-size:13pt!important}
  .stats .n,.has-rail .impact .n{font-size:20pt!important}
  .tc,.qcards li,.renames>div{break-inside:avoid}
}

/* ---------- Phones ---------- */
@media (max-width:47.99rem){
  .resline{flex-direction:column;gap:.4rem}
  .resline li::after{display:none}
  .tc-row.c5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .phases{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
  .phases p{font-size:.9375rem}
}