/* Whiterock technical case-study page — components layered on about.css
   tokens (af-sec/af-label/af-h2/af-r). Personas, key decisions, a type
   specimen, and a Mediterranean color palette. */

/* Whiterock-branded accent: swap the davies green for the studio's muted
   gold across the case study (menu/footer keep davies green — they use
   literal #35E07F, not this var). Deeper gold on cream for contrast. */
.tc-page { --af-green: #b19f6f; }                /* muted gold on the dark sections */
.tc-page .af-sec.af-light { --af-green: #8a7a55; } /* warm beige/taupe on light sections */
.tc-page .tc-green { --af-green: #35E07F; }      /* GREEN kept only for the result section */

/* SecondMate case study — monochrome brand: neutral accent, green only on result */
@font-face {
  font-family:"Inter Tight";
  src:url("../fonts/secondmate/InterTight-Variable.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
.sm-page { --af-green: #9aa1ab; font-family:"Inter Tight","Figtree",sans-serif; }                 /* cool silver on the dark sections */
.sm-page .af-sec.af-light { --af-green: #2a2d32; } /* graphite on the light sections */
.sm-page .tc-green { --af-green: #9aa1ab; }   /* result accent = brand silver, not the template green */
.tc-type-tags span + span::before { content: " \00B7 "; }   /* fix mojibake middot separator */

/* ---- Secondmate: wireframe -> interface pairs ---- */
.smw { display: grid; gap: 11vh; margin-top: 8vh; }
.smw-row { margin: 0; }
.smw-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5vw; align-items: start; }
.smw-shot { min-width: 0; display: grid; grid-template-rows: auto 1fr; }
.smw-shot > span { display: block; margin-bottom: 1.2vh; font-family: var(--af-mono); font-size: 11px; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: #8a8a8f; }
.smw-shot img { display: block; width: 100%; height: auto; border: 1px solid #202023; border-radius: 6px; box-shadow: 0 26px 55px -30px rgba(0,0,0,.85); }
.smw-fill { max-width: 54ch; margin-top: 2.4vh; font-size: 14px; line-height: 1.6; color: #8a8a8f; }
/* caption shares the image grid above it: title under the wireframe, reasoning under the final */
.smw-row figcaption { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5vw; align-items: start; margin-top: 3.6vh; }
.smw-cap-l > span { display: block; margin-bottom: 1.8vh; font-family: var(--af-mono); font-size: 11px; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--af-green); }
.smw-cap-l strong { display: block; max-width: 26ch; font-size: clamp(22px,1.75vw,28px); line-height: 1.18; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.smw-cap-r p { max-width: 60ch; font-size: 15px; line-height: 1.6; color: #a6a6ab; }
.sm-notes { display: grid; gap: 1.6vh; margin: 2.8vh 0 0; padding: 0; list-style: none; }
.sm-notes li { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 1vw; align-items: start; }
.sm-notes b { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border: 1px solid var(--af-green); border-radius: 50%; font-family: var(--af-mono); font-size: 11px; font-weight: 500; color: var(--af-green); }
.sm-notes span { font-size: 14px; line-height: 1.55; color: #a6a6ab; }
@media (max-width: 900px) {
  .smw { gap: 8vh; }
  .smw-pair { grid-template-columns: 1fr; gap: 3vh; }
  .smw-row figcaption { grid-template-columns: 1fr; gap: 2.4vh; margin-top: 3vh; }
}

/* ============================================================
   Secondmate — dark redesign.
   The product's brand is Absolute Black / Carbon / Graphite, so the
   case study lives entirely in that world. Rhythm comes from surface
   elevation + hairlines, not the template's light/dark flips.
   ============================================================ */
.sm-page { background: #000; }
.sm-page main > .af-sec { background: #000; border-top: 1px solid #17171a; }
.sm-page main > .af-sec:nth-of-type(even) { background: #0d0d0f; }

/* ---- lede: one column, extended to fill the content width ---- */
.sm-page .tc-lede p { max-width: none; }

/* ---- outcome: real post-launch signal ---- */
.sm-outcome { margin-top: 7vh; padding-top: 5vh; border-top: 1px solid #202023; }
.sm-outcome-label { display: block; font-family: var(--af-mono); font-size: 11px; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--af-green); }
.sm-outcome-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 2vw; margin: 4vh 0 5vh; }
.sm-outcome-grid strong { display: block; font-size: clamp(34px,3.4vw,52px); line-height: 1; font-weight: 600; letter-spacing: -.02em; color: #f0f0f2; }
.sm-outcome-grid strong i { font-style: normal; font-size: .45em; font-weight: 500; letter-spacing: 0; color: #77777c; }
.sm-outcome-grid span { display: block; margin-top: 1.6vh; font-size: 14px; line-height: 1.5; color: #a6a6ab; }
.sm-outcome-note { max-width: none; font-size: 15px; line-height: 1.6; color: #a6a6ab; }
.sm-outcome-note + .sm-outcome-note { margin-top: 2.4vh; }
@media (max-width: 900px) { .sm-outcome-grid { grid-template-columns: 1fr 1fr; gap: 4vh 4vw; } }

/* ---- information architecture: the page order as argument ---- */
.sm-ia { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 2vh 1.5vw; margin: 7vh 0 6vh; padding: 0; list-style: none; counter-reset: ia; }
.sm-ia li { counter-increment: ia; padding: 2.6vh 1.4vw; background: #0d0d0f; border: 1px solid #202023; border-radius: 12px; }
.sm-ia li::before { content: counter(ia,decimal-leading-zero); display: block; margin-bottom: 1.6vh; font-family: var(--af-mono); font-size: 11px; line-height: 1.4; letter-spacing: .1em; color: var(--af-green); }
.sm-ia li > span { display: block; margin-bottom: 1vh; font-size: 16px; line-height: 1.25; font-weight: 600; color: #f0f0f2; }
.sm-ia li p { font-size: 14px; line-height: 1.55; color: #a6a6ab; }
@media (max-width: 900px) { .sm-ia { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sm-ia { grid-template-columns: 1fr; } }

/* ---- competitive review ---- */
.smc { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.5vw; margin-top: 7vh; align-items: stretch; }
.smc-card { display: grid; grid-template-rows: auto 1fr auto auto; padding: 3.2vh 2vw; background: #0d0d0f; border: 1px solid #202023; border-radius: 14px; }
.smc-card header { padding-bottom: 2.4vh; margin-bottom: 2.4vh; border-bottom: 1px solid #1a1a1c; }
.smc-card header span { display: block; font-family: var(--af-mono); font-size: 11px; line-height: 1.4; letter-spacing: .1em; color: var(--af-green); }
.smc-card header h3 { margin-top: 1.4vh; font-size: 22px; line-height: 1.2; font-weight: 600; color: #f0f0f2; }
.smc-card header small { display: block; margin-top: .8vh; font-size: 13px; line-height: 1.4; color: #77777c; }
.smc-card > p { font-size: 14.5px; line-height: 1.6; color: #a6a6ab; }
.smc-cost, .smc-take { margin-top: 2.4vh; padding-top: 2.4vh; border-top: 1px solid #1a1a1c; }
.smc-cost span, .smc-take span { display: block; margin-bottom: 1vh; font-family: var(--af-mono); font-size: 11px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: #77777c; }
.smc-take span { color: var(--af-green); }
.smc-cost p, .smc-take p { font-size: 14px; line-height: 1.55; color: #a6a6ab; }
.sm-opps { margin-top: 5vh; padding-top: 4vh; border-top: 1px solid #202023; }
.sm-opps > span { display: block; margin-bottom: 2.6vh; font-family: var(--af-mono); font-size: 11px; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--af-green); }
.sm-opps ul { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2.5vw; margin: 0; padding: 0; list-style: none; }
.sm-opps li { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 1vw; align-items: start; }
.sm-opps b { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border: 1px solid var(--af-green); border-radius: 50%; font-family: var(--af-mono); font-size: 11px; font-weight: 500; color: var(--af-green); }
.sm-opps li > span { font-size: 14px; line-height: 1.55; color: #a6a6ab; }
@media (max-width: 900px) {
  .smc { grid-template-columns: 1fr; gap: 2vh; }
  .sm-opps ul { grid-template-columns: 1fr; gap: 2.4vh; }
}

/* ---- overview facts + goals ---- */
.sm-facts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 2vw; margin-top: 6vh; padding-top: 4vh; border-top: 1px solid #202023; }
.sm-facts span { display: block; font-family: var(--af-mono); font-size: 11px; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--af-green); }
.sm-facts strong { display: block; margin-top: 1.4vh; font-size: 15px; line-height: 1.45; font-weight: 500; color: #f0f0f2; }
.sm-goals { display: grid; grid-template-columns: 1fr 1fr; gap: 3vw; margin-top: 7vh; padding-top: 4vh; border-top: 1px solid #202023; }
.sm-goals-col > span { display: block; margin-bottom: 2.2vh; font-family: var(--af-mono); font-size: 11px; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--af-green); }
.sm-goals-col ul { display: grid; gap: 1.4vh; margin: 0; padding: 0; list-style: none; }
.sm-goals-col li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.55; color: #a6a6ab; }
.sm-goals-col li::before { content: ""; position: absolute; left: 0; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: #4a4a50; }
@media (max-width: 900px) {
  .sm-facts { grid-template-columns: 1fr 1fr; gap: 3.5vh 4vw; }
  .sm-goals { grid-template-columns: 1fr; gap: 4vh; }
}

/* ---- Key Decisions: white cards -> elevated dark cards (match .pan-card) ---- */
.sm-page .kdd { color: #f0f0f2; border-top-color: #202023; }
.sm-page .kdd-card { background: #0d0d0f; border-color: #202023; box-shadow: none; }
.sm-page .kdd-card:hover { border-color: #2e2e33; box-shadow: 0 2px 4px rgba(0,0,0,.4), 0 18px 40px -18px rgba(0,0,0,.85); }
.sm-page .kdd-ct { color: #f0f0f2; }
.sm-page .kdd-num { background: #202023; color: #f0f0f2; }
.sm-page .kdd-media { border-color: #202023; }
.sm-page .kdd-row { border-top-color: #1a1a1c; }
.sm-page .kdd-icn { border-color: #202023; color: #c6c6ca; }
.sm-page .kdd-l { color: #77777c; }
.sm-page .kdd-p { color: #a6a6ab; }
.sm-page .kdd-sum { border-top-color: #202023; }
.sm-page .kdd-sum-ic { background: #141416; border-color: #202023; color: #e6e6e8; }
.sm-page .kdd-sum-h { color: #f0f0f2; }
.sm-page .kdd-sum-p { color: #a6a6ab; }

/* ---- trust mockup: the real product's trust section is dark, so the mockup is too ---- */
.sm-page .kddt { background: #0b0b0d; }
.sm-page .kddt-h, .sm-page .kddt-n, .sm-page .kddt-name { color: #fff; }
.sm-page .kddt-l, .sm-page .kddt-role { color: #77777c; }
.sm-page .kddt-stats { border-bottom-color: #202023; }
.sm-page .kddt-q { color: #b4b4b9; }

/* ---- Logo system: labels to light; the white stage stays (it demos logo-on-light) ---- */
.sm-page .lgs { color: #f0f0f2; }
.sm-page .lgs-sec { border-top-color: #202023; }
.sm-page .lgs-np { color: #8a8a8f; }
.sm-page .lgs-dv, .sm-page .lgs-mdv { color: #77777c; }
.sm-page .lgs-dim::before, .sm-page .lgs-mdim::before { border-color: #3a3a3f; }

/* ---- Colour specimen: text to light ---- */
.sm-page .tc-c-name { color: #f0f0f2; }
.sm-page .tc-c-desc { color: #8a8a8f; }
.sm-page .tc-swatch { border-color: rgba(255,255,255,.14); }

/* persona bio (SecondMate personas carry a short bio) */
.tc-p-bio { font-size: 15px; line-height: 1.55; color: var(--af-soft-l); margin-bottom: 2.6vh; }
.af-sec.af-light .tc-p-bio { color: var(--af-soft-d); }
.tc-colors.tc-colors-4 { grid-template-columns: repeat(4, 1fr); }

/* ---- hero (villa cover behind the title) ---- */
.tc-hero {
  position: relative;
  overflow: hidden;
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22vh 6vw 7vh;
  background: #050505;
}

/* Whiterock case study */
@font-face {
  font-family:"Albert Sans";
  src:url("../fonts/whiterock/AlbertSans-Variable.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
.wr-page {
  --wr-ink:#1A1A1A;
  --wr-paper:#FAF9F7;
  --wr-ivory:#F3F1ED;
  --wr-stone:#BDB3A0;
  --wr-gold:#B19F6F;
  --wr-soft:rgba(26,26,26,.68);
  --wr-copy-size:clamp(16px,1.2vw,18px);
  --wr-copy-line:1.6;
  --wr-detail-size:15px;
  background:var(--wr-paper);
  color:var(--wr-ink);
  font-family:"Albert Sans","Figtree",sans-serif;
}
.wr-page *, .wr-page *::before, .wr-page *::after { box-sizing:border-box; }
.wr-page h1, .wr-page h2, .wr-page h3, .wr-page p { letter-spacing:0; }
.wr-hero .tc-hero-cover img { object-position:center; }
/* The 19px hero sub runs to ~54% of the width, where the old scrim had faded to
   ~.36 and the lit pool put it at 3.45:1 — an AA failure on a page that claims
   AA contrast. Hold the scrim under the text, then release it over the villa. */
.wr-hero .tc-hero-scrim { background:linear-gradient(90deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.6) 30%,rgba(0,0,0,.5) 55%,rgba(0,0,0,.26) 80%,rgba(0,0,0,.2) 100%); }
.wr-hero .pj-back { color:#f0ede7; font-family:var(--af-mono); font-size:11px; text-transform:uppercase; text-decoration:none; letter-spacing:0; }
.wr-hero .pj-back .af-arrow { display:inline-block; color:var(--af-green); transform:rotate(180deg); }
.wr-hero-label { margin-top:3vh; color:var(--wr-gold); letter-spacing:0; }
.wr-hero .tc-title { max-width:8ch; font-size:112px; line-height:.9; letter-spacing:0; color:var(--title-on-dark); }
.wr-hero .tc-title em, .wr-hero .tc-title > span { color:var(--wr-gold); }
.wr-hero .tc-hero-sub { max-width:760px; font-size:19px; line-height:1.62; color:#c7c3bd; }
.wr-hero-meta { color:#c7c3bd; }
.wr-hero-meta a { color:#d6c28e; text-decoration:none; }
.wr-section { padding:11vh 6vw; }
.wr-kicker { display:block; font-family:var(--af-mono); font-size:11px; line-height:1.4; text-transform:uppercase; letter-spacing:0; color:rgba(26,26,26,.62); }
.wr-section-head { max-width:1520px; }
.wr-section-head h2, .wr-split-head h2 { max-width:14ch; font-size:72px; line-height:1.02; font-weight:600; letter-spacing:0; }
.wr-section-head > p { max-width:760px; margin-top:4vh; font-size:var(--wr-copy-size); line-height:var(--wr-copy-line); color:var(--wr-soft); }
.wr-split-head { display:grid; grid-template-columns:minmax(180px,.38fr) minmax(0,1fr); gap:7vw; align-items:start; }
.wr-split-head > div > p { max-width:780px; margin-top:3vh; font-size:var(--wr-copy-size); line-height:var(--wr-copy-line); color:var(--wr-soft); }
.wr-brief { background:var(--wr-paper); }
.wr-brief .wr-section-head { max-width:none; }
.wr-brief .wr-kicker { margin-bottom:3.5vh; font-size:13px; letter-spacing:.08em; }
.wr-brief .wr-section-head h2 { max-width:none; font-size:clamp(38px,4.6vw,76px); line-height:1.04; letter-spacing:-.02em; }
.wr-brief-copy { display:block; max-width:62em; margin:8vh 0 0; }
.wr-brief-copy p { font-size:var(--wr-copy-size); line-height:var(--wr-copy-line); color:#3A3A3A; }
.wr-brief-copy p + p { margin-top:3vh; }
.wr-facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3vw; margin-top:9vh; padding:4.5vh 0; background:#1A1A1A; color:#F6F2EC; }
.wr-facts > div { padding:0 2vw; }
.wr-facts span, .wr-problem > span, .wr-decision-list strong, .wr-evidence figcaption span, .wr-system-grid > div > span, .wr-review-scenarios article > span, .wr-accessibility > span {
  display:block; font-family:var(--af-mono); font-size:11px; line-height:1.4; text-transform:uppercase; letter-spacing:0; color:var(--wr-gold);
}
.wr-facts strong { display:block; margin-top:1.4vh; font-size:16px; line-height:1.4; font-weight:500; }
.wr-problem { display:grid; grid-template-columns:220px minmax(0,1fr); gap:5vw; align-items:start; margin-top:7vh; }
.wr-problem p { max-width:980px; font-size:18px; line-height:1.6; font-weight:400; }
.wr-process { background:var(--wr-ivory); }
.wr-process .wr-split-head { display:block; max-width:1280px; }
.wr-process .wr-kicker { margin-bottom:3.5vh; font-size:13px; letter-spacing:.08em; color:rgba(26,26,26,.62); }
.wr-process .wr-split-head h2 { max-width:17ch; font-size:clamp(38px,4.6vw,76px); line-height:1.04; letter-spacing:-.02em; }
.wr-process .wr-split-head > div > p { max-width:62em; margin-top:4vh; }
.wr-week-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5vw; margin-top:8vh; }
.wr-week { display:grid; grid-template-columns:86px minmax(0,1fr); gap:2.4vw; align-items:start; padding:5vh 3vw 4.5vh; background:rgba(250,249,247,.86); border-radius:4px; }
.wr-week:nth-child(2) { background:var(--wr-ink); color:var(--wr-paper); }
.wr-week-index span { display:block; font-size:64px; line-height:.9; font-weight:500; color:var(--wr-gold); }
.wr-week-index small { display:block; margin-top:2vh; font-family:var(--af-mono); font-size:11px; line-height:1.4; text-transform:uppercase; color:rgba(26,26,26,.56); }
.wr-week:nth-child(2) .wr-week-index small { color:#AAA69F; }
.wr-week-content { display:flex; flex-direction:column; min-width:0; min-height:100%; }
.wr-week-content h3 { font-size:34px; line-height:1.1; font-weight:600; }
.wr-week-list { display:grid; gap:1.5vh; margin:3.5vh 0 0; padding:0; list-style:none; }
.wr-week-list li { position:relative; padding-left:18px; font-size:var(--wr-detail-size); line-height:var(--wr-copy-line); color:rgba(26,26,26,.72); }
.wr-week-list li::before { content:""; position:absolute; left:0; top:.72em; width:5px; height:5px; background:var(--wr-gold); border-radius:50%; }
.wr-week:nth-child(2) .wr-week-list li { color:#C7C2BA; }
.wr-week-output { max-width:44ch; margin-top:4vh; padding:0; background:none; font-size:var(--wr-detail-size); line-height:var(--wr-copy-line); color:rgba(26,26,26,.68); }
.wr-week-output strong { display:block; margin-bottom:1.2vh; font-family:var(--af-mono); font-size:11px; line-height:1.4; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:#765D3D; }
.wr-week:nth-child(2) .wr-week-output { color:#AAA69F; }
.wr-week:nth-child(2) .wr-week-output strong { color:#C4A873; }
.wr-audit { background:var(--wr-ink); color:var(--wr-paper); }
.wr-audit .wr-kicker { color:#C4A873; }
.wr-audit .wr-split-head > div > p { color:#AAA69F; }
.wr-contexts { margin-top:10vh; }
.wr-context { display:grid; grid-template-columns:1.1fr 1.25fr .9fr 1.25fr; gap:4vw; align-items:start; }
.wr-context + .wr-context { margin-top:7vh; padding-top:7vh; border-top:1px solid rgba(250,249,247,.14); }
.wr-context span { display:block; margin-bottom:1.8vh; font-family:var(--af-mono); font-size:11px; line-height:1.4; text-transform:uppercase; color:var(--wr-gold); }
.wr-context-title h3 { max-width:13ch; font-size:34px; line-height:1.12; font-weight:600; }
.wr-context-question p { max-width:26ch; font-size:var(--wr-copy-size); line-height:var(--wr-copy-line); font-weight:500; color:var(--wr-paper); }
.wr-context-needs ul { display:grid; gap:1.2vh; margin:0; padding:0; list-style:none; }
.wr-context-needs li { font-size:var(--wr-detail-size); line-height:var(--wr-copy-line); color:#C7C2BA; }
.wr-context-response p { font-size:var(--wr-detail-size); line-height:var(--wr-copy-line); color:#AAA69F; }
.wr-structure { background:var(--wr-paper); }
.wr-wireframe-sequence { display:grid; gap:11vh; margin-top:8vh; }
.wr-wireframe-case { margin:0; }
.wr-wireframe-case figcaption, .wr-evidence-chapter figcaption { display:grid; grid-template-columns:180px minmax(280px,.72fr) minmax(0,1fr); gap:4vw; align-items:start; margin-bottom:4vh; }
.wr-wireframe-case figcaption strong, .wr-evidence-chapter figcaption strong { font-size:26px; line-height:1.18; font-weight:600; }
.wr-wireframe-case figcaption p, .wr-evidence-chapter figcaption p { max-width:650px; font-size:var(--wr-detail-size); line-height:var(--wr-copy-line); color:var(--wr-soft); }
.wr-screen-pair { display:grid; gap:1.2vw; align-items:stretch; padding:1.2vw; background:#E7E1D8; border-radius:4px; }
.wr-pair-wire-project { grid-template-columns:minmax(0,1.67fr) minmax(220px,1fr); }
.wr-pair-wire-technical { grid-template-columns:minmax(0,1.5fr) minmax(220px,1fr); }
.wr-pair-final-project { grid-template-columns:minmax(0,2.68fr) minmax(210px,1fr); }
.wr-pair-final-technical { grid-template-columns:minmax(0,1.84fr) minmax(240px,1fr); }
.wr-pair-final-editorial { grid-template-columns:minmax(0,3.96fr) minmax(180px,1fr); }
.wr-shot { min-width:0; display:grid; grid-template-rows:auto 1fr; }
.wr-shot > span { display:block; margin-bottom:1vh; font-family:var(--af-mono); font-size:11px; line-height:1.4; letter-spacing:.1em; text-transform:uppercase; color:#766F65; }
.wr-shot img { display:block; width:100%; height:100%; min-height:0; object-fit:cover; object-position:top center; background:#FAF9F7; border:1px solid rgba(26,26,26,.12); }
/* image depth — finished screens read as presented, not pasted */
.wr-screen-pair { box-shadow:0 28px 55px -30px rgba(20,18,16,.32); }
.wr-evidence-chapter-dark .wr-screen-pair { box-shadow:0 30px 60px -30px rgba(0,0,0,.6); }
.su-evidence-media, .su-wireframe-evolution-media { box-shadow:0 26px 55px -30px rgba(20,18,16,.24); }
.su-evidence-mobile-pair img { box-shadow:0 20px 44px -26px rgba(20,18,16,.24); }
/* evidence annotations — tie each screen to a decision / research finding */
.wr-notes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2vh 3vw; margin:3.5vh 0 0; padding:0; list-style:none; }
.wr-notes li { display:grid; grid-template-columns:24px minmax(0,1fr); gap:1vw; align-items:start; }
.wr-notes b { display:flex; align-items:center; justify-content:center; width:24px; height:24px; flex:none; border:1px solid var(--wr-gold); border-radius:50%; font-family:var(--af-mono); font-size:11px; font-weight:500; color:var(--wr-gold); }
.wr-notes span { font-size:14px; line-height:1.5; color:var(--wr-soft); }
.wr-evidence-chapter-dark .wr-notes b { border-color:#C4A873; color:#C4A873; }
.wr-evidence-chapter-dark .wr-notes span { color:#AAA69F; }
.su-notes { display:grid; gap:1.8vh; margin:2.6vh 0 0; padding:0; list-style:none; }
.su-notes li { display:grid; grid-template-columns:24px minmax(0,1fr); gap:1vw; align-items:start; }
.su-notes b { display:flex; align-items:center; justify-content:center; width:24px; height:24px; flex:none; border:1px solid #AA895F; border-radius:50%; font-family:var(--af-mono); font-size:11px; font-weight:500; color:#AA895F; }
.su-notes span { font-size:14px; line-height:1.55; color:#625e57; }
@media (max-width:900px){ .wr-notes { grid-template-columns:1fr; gap:2vh; } }
.wr-decisions { background:var(--wr-ivory); }
.wr-decision-list { margin-top:8vh; }
.wr-decision-list article { display:grid; grid-template-columns:90px minmax(260px,.8fr) repeat(3,minmax(0,1fr)); gap:3vw; align-items:start; margin-top:2vh; padding:5vh 3vw; background:rgba(255,255,255,.5); border-radius:4px; }
.wr-decision-list article:nth-child(2) { background:#1D1D1A; color:#F4F0EA; }
.wr-decision-num { font-size:42px; line-height:1; font-weight:500; color:var(--wr-gold); }
.wr-decision-list h3 { font-size:29px; line-height:1.16; font-weight:600; }
.wr-decision-list div p { margin-top:1.4vh; font-size:var(--wr-detail-size); line-height:var(--wr-copy-line); color:#5B5650; }
.wr-decision-list article:nth-child(2) div p { color:#AAA69F; }
.wr-evidence { overflow:hidden; background:var(--wr-paper); }
.wr-evidence-stack { display:grid; gap:12vh; margin-top:10vh; }
.wr-evidence figure { margin:0; }
.wr-evidence-chapter-dark { margin-right:-6vw; margin-left:-6vw; padding:9vh 6vw; background:var(--wr-ink); color:var(--wr-paper); }
.wr-evidence-chapter-dark figcaption span { color:#C4A873; }
.wr-evidence-chapter-dark figcaption p { color:#AAA69F; }
.wr-evidence-chapter-dark .wr-screen-pair { background:#292824; }
.wr-evidence-chapter-dark .wr-shot > span { color:#C4A873; }
.wr-system { background:#1A1A1A; color:#F6F2EC; }
.wr-system .wr-kicker { color:#C4A873; }
.wr-system .wr-split-head > div > p { color:#AAA69F; }
.wr-system-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:7vw; margin-top:8vh; }
.wr-type-spec, .wr-color-spec { min-width:0; }
.wr-type-name { margin-top:4vh; font-size:92px; line-height:.92; font-weight:400; }
.wr-type-spec > p { max-width:680px; margin-top:4vh; font-size:16px; line-height:1.65; color:#AAA69F; }
.wr-weights { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1vw; margin-top:6vh; }
.wr-weights span { font-size:14px; color:#D4D0C8; }
.wr-weights span:nth-child(2) { font-weight:500; }
.wr-weights span:nth-child(3) { font-weight:600; }
.wr-weights span:nth-child(4) { font-weight:700; }
.wr-color-spec > span { margin-bottom:3vh; }
.wr-color-row { display:grid; grid-template-columns:80px minmax(0,1fr) auto; gap:2vw; align-items:center; min-height:72px; margin-top:1vh; padding:1vh 1.2vw; background:#242420; border-radius:4px; }
.wr-color-row i { display:block; width:56px; height:48px; border-radius:2px; }
.wr-color-row strong { font-size:16px; font-weight:500; }
.wr-color-row b { font-family:var(--af-mono); font-size:11px; font-weight:400; color:#AAA69F; }
.wr-review { background:#E7DFD3; }
.wr-review-scenarios { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2vw; margin-top:8vh; }
.wr-review-scenarios article { padding:4.5vh 2.5vw; background:rgba(255,255,255,.5); border-radius:4px; }
.wr-review-scenarios h3 { margin-top:3vh; font-size:26px; line-height:1.18; font-weight:600; }
.wr-review-scenarios p { margin-top:2vh; font-size:14px; line-height:1.6; color:var(--wr-soft); }
.wr-accessibility { display:grid; grid-template-columns:180px repeat(5,minmax(0,1fr)); gap:2vw; align-items:start; margin-top:3vh; padding:4vh 2.5vw; background:#1A1A1A; color:#D0CBC3; border-radius:4px; }
.wr-accessibility p { font-size:13px; line-height:1.5; }
.wr-result { padding:12vh 6vw; background:#090909; color:#F7F4EF; }
.wr-result .wr-kicker { color:#C4A873; }
.wr-result h2 { max-width:17ch; margin-top:5vh; font-size:72px; line-height:1.02; font-weight:600; }
.wr-result > p { max-width:980px; margin-top:5vh; font-size:18px; line-height:1.65; color:#AAA7A1; }
.wr-result-actions { display:flex; gap:2vw; margin-top:5vh; }
.wr-result-metrics { margin-top:7vh; padding-top:5vh; border-top:1px solid rgba(255,255,255,.12); }
.wr-result-metrics-label { display:block; font-family:var(--af-mono); font-size:11px; line-height:1.4; text-transform:uppercase; letter-spacing:.06em; color:#C4A873; }
.wr-result-metrics-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2vw; margin-top:4vh; }
.wr-result-metrics-grid strong { display:block; font-size:clamp(36px,3.6vw,54px); line-height:1; font-weight:600; letter-spacing:-.02em; color:#F0EBE2; }
.wr-result-metrics-grid strong i { font-style:normal; font-size:.42em; font-weight:500; letter-spacing:0; color:#8F8C86; }
.wr-result-metrics-grid span { display:block; margin-top:1.6vh; font-family:var(--af-mono); font-size:11px; line-height:1.4; text-transform:uppercase; letter-spacing:.06em; color:#AAA7A1; }
.wr-result-metrics-note { margin-top:4vh; max-width:52em; font-size:14px; line-height:1.6; color:#AAA7A1; }
.wr-result-quote { margin:7vh 0 0; padding-left:2vw; border-left:2px solid #C4A873; }
.wr-result-quote p { max-width:62ch; font-size:clamp(19px,1.7vw,26px); line-height:1.46; font-weight:500; color:#F2EEE7; }
.wr-result-quote cite { display:block; margin-top:2.6vh; font-family:var(--af-mono); font-size:11px; font-style:normal; text-transform:uppercase; letter-spacing:.08em; color:#C4A873; }

@media (max-width:900px) {
  .wr-hero .tc-title { font-size:58px; line-height:.94; }
  .wr-hero .tc-hero-sub { font-size:16px; }
  .wr-section { padding:9vh 7vw; }
  .wr-section-head h2, .wr-split-head h2, .wr-result h2 { max-width:none; font-size:46px; line-height:1.04; }
  .wr-split-head { grid-template-columns:1fr; gap:3vh; }
  .wr-brief .wr-section-head h2 { font-size:clamp(38px,4.6vw,76px); }
  .wr-brief-copy, .wr-system-grid { grid-template-columns:1fr; }
  .wr-brief-copy { margin-top:5vh; }
  .wr-brief-copy p { font-size:16px; }
  .wr-facts { grid-template-columns:1fr 1fr; gap:4vh 3vw; padding:4.5vh 4vw; }
  .wr-facts > div { padding:0; }
  .wr-problem { grid-template-columns:1fr; gap:2vh; }
  .wr-problem p { font-size:18px; }
      .wr-week-grid { grid-template-columns:1fr; gap:7vh; }
  .wr-week { grid-template-columns:72px minmax(0,1fr); gap:4vw; min-height:0; padding:4.5vh 5vw; }
  .wr-week-content { min-height:0; }
  .wr-week-index span { font-size:52px; }
  .wr-week-output { margin-top:4vh; padding:0; }
          .wr-context { grid-template-columns:1fr 1fr; gap:5vh 6vw; }
  .wr-context-title h3 { max-width:none; }
  .wr-context-question p { max-width:none; }
  .wr-wireframe-case figcaption, .wr-evidence-chapter figcaption { grid-template-columns:1fr; gap:1.5vh; }
  .wr-decision-list article { grid-template-columns:52px minmax(0,1fr); gap:2.5vh 4vw; padding:4vh 5vw; }
  .wr-decision-num { grid-row:1 / span 4; font-size:30px; }
  .wr-decision-list h3 { font-size:25px; }
  .wr-evidence-stack { gap:9vh; margin-top:7vh; }
  .wr-evidence-chapter-dark { margin-right:-7vw; margin-left:-7vw; padding:8vh 7vw; }
  .wr-type-name { font-size:58px; }
  .wr-color-spec { margin-top:5vh; }
  .wr-review-scenarios { grid-template-columns:1fr; gap:1.5vh; }
  .wr-accessibility { grid-template-columns:1fr; gap:2vh; padding:4vh 5vw; }
  .wr-result { padding:10vh 7vw; }
  .wr-result-actions { flex-direction:column; align-items:flex-start; gap:2.5vh; }
  .wr-result-metrics-grid { grid-template-columns:1fr 1fr; gap:4vh 5vw; }
  .wr-result-quote p { font-size:20px; }
}

@media (max-width:560px) {
  .wr-facts { grid-template-columns:1fr; }
  .wr-week { grid-template-columns:52px minmax(0,1fr); }
  .wr-week-index span { font-size:42px; }
        .wr-context { grid-template-columns:1fr; gap:3.5vh; }
  .wr-context + .wr-context { margin-top:6vh; padding-top:6vh; }
  .wr-context-question p { font-size:20px; }
  .wr-wireframe-sequence { gap:8vh; margin-top:6vh; }
  .wr-wireframe-case figcaption, .wr-evidence-chapter figcaption { margin-bottom:3vh; }
  .wr-screen-pair { grid-template-columns:1fr; padding:3vw; }
  .wr-shot-desktop { display:none; }
  .wr-shot-mobile > span { margin-bottom:1.2vh; }
  .wr-weights { grid-template-columns:1fr 1fr; gap:2vh; }
  .wr-color-row { grid-template-columns:64px minmax(0,1fr); padding:1.2vh 3vw; }
  .wr-color-row b { grid-column:2; }
  .wr-result-metrics-grid { grid-template-columns:1fr 1fr; gap:3.5vh 5vw; }
}
.tc-hero-cover { position: absolute; inset: 0; }
.tc-hero-cover img { width: 100%; height: 100%; object-fit: cover; }
.tc-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(rgba(10, 9, 7, 0.32) 0%, rgba(10, 9, 7, 0.62) 52%, rgba(5, 5, 5, 0.96) 100%);
}
.tc-hero-scrim::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22%;
  background: linear-gradient(rgba(5, 5, 5, 0.85), rgba(5, 5, 5, 0));
}
.tc-hero > *:not(.tc-hero-cover) { position: relative; z-index: 2; }
.tc-title {
  font-size: clamp(48px, 7vw, 118px);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin-top: 2vh;
}
.tc-title em, .tc-title > span { font-style: normal; color: var(--af-green); }
.tc-hero-sub {
  margin-top: 3vh;
  max-width: 56ch;
  font-size: clamp(15px, 1.3vw, 20px);
  line-height: 1.6;
  color: var(--af-soft-l);
}
.tc-meta {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 5vh;
  padding-top: 2.6vh;
  border-top: 1px solid var(--af-line-l);
  font-family: var(--af-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--af-soft-l);
}
.tc-meta b { color: var(--af-green); font-weight: 400; }

/* ---- lede paragraphs (used in overview/research/etc.) ---- */
.tc-lede p {
  font-size: clamp(16px, 1.2vw, 18px);   /* matches the home body scale */
  line-height: 1.6;
  max-width: 62em;                        /* stays extended to the right */
}
.tc-lede p + p { margin-top: 3vh; }
.af-sec:not(.af-light) .tc-lede p { color: #cfcfcf; }
.af-sec.af-light .tc-lede p { color: #3a3a3a; }

/* ---- persona cards ---- */
.tc-personas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2vw; margin-top: 8vh; }
.tc-persona {
  border: 1px solid var(--af-line-l);
  border-radius: 14px;
  padding: 4vh 2vw;
  display: flex;
  flex-direction: column;
}
.tc-p-top { display: flex; align-items: center; gap: 14px; }
.tc-p-name { font-size: clamp(24px, 2vw, 32px); font-weight: 650; letter-spacing: -0.02em; }
.tc-p-role {
  font-family: var(--af-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--af-green);
  margin-top: 0.8vh;
}
.tc-p-quote {
  font-size: clamp(16px, 1.25vw, 19px);
  font-style: italic;
  line-height: 1.45;
  color: var(--af-ink-l);
  margin: 3vh 0;
  padding-left: 1rem;
  border-left: 2px solid var(--af-green);
}
.tc-p-block + .tc-p-block { margin-top: 2.6vh; }
.tc-p-label {
  display: block;
  font-family: var(--af-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--af-soft-l);
  margin-bottom: 1.4vh;
}
.tc-p-block ul { list-style: none; margin: 0; padding: 0; }
.tc-p-block li {
  font-size: 16px;
  line-height: 1.45;
  color: #cfcfcf;
  padding: 0.9vh 0;
  border-bottom: 1px solid var(--af-line-l);
  padding-left: 1.1em;
  position: relative;
}
.tc-p-block li::before { content: "//"; position: absolute; left: 0; color: var(--af-green); font-family: var(--af-mono); font-size: 11px; }

/* ---- typography specimen ---- */
.tc-type { display: grid; grid-template-columns: minmax(240px, 34%) 1fr; gap: 4vw; margin-top: 8vh; align-items: center; }
.tc-aa {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--af-line-l);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(120px, 16vw, 260px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}
.tc-type-name { font-size: clamp(30px, 3.4vw, 56px); font-weight: 650; letter-spacing: -0.02em; }
.tc-type-tags {
  font-family: var(--af-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--af-green);
  margin-top: 1.5vh;
}
.tc-type-tags span + span::before { content: " · "; color: var(--af-soft-l); }
.tc-scale-label, .tc-inuse-label {
  display: block;
  font-family: var(--af-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--af-soft-l);
  margin: 4vh 0 1.5vh;
}
.tc-scale { font-size: clamp(20px, 2.2vw, 34px); font-weight: 500; letter-spacing: -0.01em; color: #cfcfcf; }
.tc-scale b { color: var(--af-green); font-weight: 500; }
.tc-inuse { font-size: clamp(22px, 2.6vw, 40px); font-weight: 600; letter-spacing: -0.02em; }

/* ---- color palette ---- */
.tc-colors { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.6vw; margin-top: 8vh; }
.tc-color { display: flex; flex-direction: column; }
.tc-swatch {
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  border: 1px solid var(--af-line-d);
}
.tc-c-name { margin-top: 2vh; font-size: clamp(16px, 1.3vw, 20px); font-weight: 600; letter-spacing: -0.01em; }
.tc-c-hex {
  font-family: var(--af-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--af-green);
  margin-top: 0.6vh;
}
.tc-c-desc { margin-top: 1.2vh; font-size: 14px; line-height: 1.45; color: var(--af-soft-d); }

/* ---- result cta ---- */
.tc-result-cta { margin-top: 5vh; display: flex; gap: 2rem; flex-wrap: wrap; }

@media (max-width: 900px) {
  .tc-hero { padding: 16vh 7vw 6vh; }
  .tc-personas { grid-template-columns: 1fr; gap: 3vh; }
    .tc-type { grid-template-columns: 1fr; gap: 4vh; }
  .tc-aa { aspect-ratio: 16 / 9; }
  .tc-colors { grid-template-columns: repeat(2, 1fr); gap: 4vw; }
}


/* ============================================================
   Secondmate case-study components ported from the reference
   (User Research .pan, Key Decisions .kdd/.kddf/.kddt, Logo .lgs).
   Font inherits the page (Figtree); layouts/colors match the ref.
   ============================================================ */

/* ---- User Research: persona cards (dark) ---- */
.pan { width: 100%; margin: 0 auto; }
.pan-grid { display: flex; flex-direction: column; gap: 20px; }
.pan-card { display: grid; grid-template-columns: 288px minmax(0,1fr); gap: 50px; background: #0d0d0f; border: 1px solid #202023; border-radius: 16px; padding: 38px 42px; }
.pan-l { display: flex; flex-direction: column; }
/* No avatar: the profiles are composites, so a stock face was claiming a person
   who doesn't exist. The profile type is the heading now. (.pan-ph removed.) */
.pan-name { font-size: 24px; font-weight: 600; letter-spacing: .01em; color: #fff; line-height: 1.1; }
.pan-role { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #9a9a9f; margin-top: 9px; }
/* Not speech any more — a stated need. Keeps the emphasis, drops the quote look. */
.pan-quote { margin-top: 22px; padding: 2px 0 2px 16px; border-left: 2px solid #4a4a4e; font-size: 17px; font-weight: 500; line-height: 1.45; letter-spacing: -.1px; color: #d8d8da; }
.pan-r { min-width: 0; }
.pan-about { font-size: 16px; font-weight: 500; line-height: 1.6; color: #b4b4b9; margin: 0; max-width: 780px; }
.pan-cols { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; margin-top: 28px; padding-top: 28px; border-top: 1px solid #202023; }
.pan-bh { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #f0f0f2; margin-bottom: 15px; }
.pan-ic { width: 16px; height: 16px; flex: none; color: #c6c6ca; }
.pan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.pan-list li { position: relative; padding-left: 18px; font-size: 15px; font-weight: 500; line-height: 1.4; color: #a6a6ab; }
.pan-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: #606065; }

/* ---- Key Decisions: cards with visuals (light section) ---- */
.kdd { width: 100%; margin: 0 auto; color: #1e1e1e; }
.kdd-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; align-items: start; }
.kdd-card { border: 1px solid #e7e5e2; border-radius: 18px; background: #fff; padding: 26px 26px 12px; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(20,18,16,.04); transition: transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s cubic-bezier(.16,1,.3,1), border-color .55s ease; }
.kdd-card:hover { transform: translateY(-6px); border-color: #d8d4ce; box-shadow: 0 2px 4px rgba(20,18,16,.04), 0 12px 26px -14px rgba(20,18,16,.13), 0 34px 64px -32px rgba(20,18,16,.23); }
.kddf:hover { border-color: #26262b; }
.kddf:hover .kddf-item { border-color: #2c2c31; }
.kdd-card:hover .kdd-media img { transform: scale(1.05); }
.kdd-top { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.kdd-num { width: 36px; height: 36px; flex: none; background: #141414; color: #fff; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }
.kdd-ct { font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: #1e1e1e; margin: 0; }
.kdd-media { border-radius: 12px; overflow: hidden; border: 1px solid #ececea; margin-bottom: 22px; line-height: 0; aspect-ratio: 6/5; }
.kdd-media img { width: 100%; height: auto; display: block; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.kdd-media:not(.kddf):not(.kddt-wrap) { aspect-ratio: 6/5; }
.kdd-media:not(.kddf):not(.kddt-wrap) img { width: 100%; height: 100%; object-fit: cover; }
.kdd-row { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid #f0efec; }
.kdd-row:first-of-type { border-top: none; padding-top: 2px; }
.kdd-icn { width: 38px; height: 38px; flex: none; border: 1px solid #e7e5e2; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #1e1e1e; }
.kdd-icn svg { width: 18px; height: 18px; }
.kdd-rc { min-width: 0; padding-top: 2px; }
.kdd-l { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #a3a3a5; }
.kdd-p { font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: -.1px; color: #6f6f70; margin: 6px 0 0; }
.kdd-sum { display: flex; align-items: flex-start; gap: 16px; max-width: 940px; margin: 36px auto 0; }
.kdd-sum-ic { width: 46px; height: 46px; flex: none; background: #f4f3f1; border: 1px solid #e7e5e2; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #1e1e1e; }
.kdd-sum-ic svg { width: 22px; height: 22px; }
.kdd-sum-h { font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: #1e1e1e; margin: 0; }
.kdd-sum-p { font-size: 15px; font-weight: 500; line-height: 1.55; letter-spacing: -.1px; color: #6f6f70; margin: 6px 0 0; max-width: 820px; }
.kddf { background: #0b0b0d; border-color: #0b0b0d; padding: 20px 16px; line-height: normal; display: flex; flex-direction: column; }
.kddf-h { font-size: 16px; font-weight: 600; letter-spacing: -.02em; color: #fff; text-align: center; line-height: 1.25; }
.kddf-sub { font-size: 11.5px; font-weight: 500; line-height: 1.4; color: #8a8a8f; text-align: center; margin: 8px auto 18px; max-width: 270px; }
.kddf-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; flex: 1; margin-top: 14px; }
.kddf-item { background: #141416; border: 1px solid #212124; border-radius: 12px; padding: 15px 13px; transition: border-color .5s ease; }
.kddf-ic { width: 30px; height: 30px; border-radius: 8px; background: #1e1e21; display: flex; align-items: center; justify-content: center; color: #e6e6e8; margin-bottom: 12px; }
.kddf-ic svg { width: 16px; height: 16px; }
.kddf-t { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 5px; }
.kddf-d { font-size: 11.5px; font-weight: 500; line-height: 1.4; color: #8f8f94; }
.kddt-wrap { display: flex; flex-direction: column; line-height: normal; }
.kddt { background: #fff; padding: 18px 20px 16px; flex: none; }
.kddt-h { font-size: 16px; font-weight: 600; letter-spacing: -.02em; color: #1e1e1e; text-align: center; line-height: 1.25; margin-bottom: 16px; }
.kddt-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; text-align: center; padding-bottom: 18px; border-bottom: 1px solid #ececea; }
.kddt-n { display: block; font-size: 18px; font-weight: 600; color: #1e1e1e; letter-spacing: -.03em; }
.kddt-l { display: block; font-size: 9px; font-weight: 500; color: #a3a3a5; margin-top: 3px; }
.kddt-testi { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 16px; }
.kdd-media img.kddt-av { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; margin-bottom: 9px; filter: grayscale(1) contrast(1.05); }
.kddt-q { font-size: 12.5px; font-weight: 500; line-height: 1.5; color: #46464a; margin: 0 0 10px; }
.kddt-name { font-size: 12.5px; font-weight: 600; color: #1e1e1e; }
.kddt-role { font-size: 11px; color: #a3a3a5; margin-top: 1px; }
.kdd-media img.kddt-wait { width: 100%; flex: 1 1 0; min-height: 0; object-fit: contain; background: #0a0a0b; display: block; border-top: 1px solid #20201f; }

/* ---- Logo System (light section) ---- */
.lgs { width: 100%; margin: 0 auto; color: #1e1e1e; }
.lgs-sec { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 64px; align-items: start; padding: 46px 0; border-top: 1px solid #ececea; }
.lgs-sec:first-child { border-top: none; padding-top: 4px; }
.lgs-sec-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.lgs-lbl { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 22px; }
.lgs-note { padding-top: 30px; }
.lgs-nh { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 13px; }
.lgs-np { font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: -.1px; color: #7f7f80; margin: 0; max-width: 270px; }
.lgs-stage { position: relative; background: #fff; border: 1px solid #ededed; display: flex; align-items: center; justify-content: flex-start; padding: 48px; min-height: 0; overflow: hidden; }
.lgs-stage-dark { background: #0A0A0B; border-color: #0A0A0B; }
.lgs-lockup { width: 100%; height: auto; display: block; position: relative; z-index: 2; }
.lgs-x { position: absolute; width: 34px; height: 34px; border: 1px solid #e6e6e6; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; color: #c4c4c4; background: #fff; z-index: 3; }
.lgs-x1 { top: 5px; left: 5px; } .lgs-x2 { top: 5px; right: 5px; } .lgs-x3 { bottom: 5px; left: 5px; } .lgs-x4 { bottom: 5px; right: 5px; }
.lgs-stage-dark .lgs-x { border-color: #2b2b2d; background: #0A0A0B; color: #5a5a5e; }
.lgs-guide { position: absolute; background: #f1f1f1; z-index: 1; }
.lgs-gt { top: 39px; left: 0; right: 0; height: 1px; } .lgs-gb { bottom: 39px; left: 0; right: 0; height: 1px; } .lgs-gl { left: 39px; top: 0; bottom: 0; width: 1px; } .lgs-gr { right: 39px; top: 0; bottom: 0; width: 1px; }
.lgs-stage-dark .lgs-guide { background: #1e1e20; }
.lgs-dims { display: flex; gap: 16px; margin: 16px 48px 0 48px; }
.lgs-dim { position: relative; height: 28px; }
.lgs-dim::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 7px; border: 1px solid #cbcbcb; border-bottom: none; }
.lgs-dv { position: absolute; top: 12px; left: 0; right: 0; text-align: center; font-size: 12.5px; font-weight: 500; color: #8a8a8d; }
.lgs-iconrow { display: flex; gap: 30px; align-items: center; }
.lgs-stage-icon { width: 168px; height: 168px; padding: 0; justify-content: center; flex: none; }
.lgs-iconmark { width: 78px; height: 78px; position: relative; z-index: 2; }
.lgs-min { display: flex; align-items: flex-end; gap: 56px; padding-top: 6px; }
.lgs-minitem { display: flex; flex-direction: column; align-items: center; }
.lgs-minitem img { display: block; }
.lgs-mdim { position: relative; height: 26px; margin-top: 16px; }
.lgs-mdim::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 7px; border: 1px solid #cbcbcb; border-bottom: none; }
.lgs-mdv { position: absolute; top: 12px; left: 0; right: 0; text-align: center; font-size: 12.5px; font-weight: 500; color: #8a8a8d; }

@media (max-width: 900px) {
  .pan-card { grid-template-columns: 1fr; gap: 24px; padding: 26px 22px; }
  .pan-cols { grid-template-columns: 1fr; gap: 24px; }
  .kdd-grid { grid-template-columns: 1fr; }
  .kdd-media { aspect-ratio: auto; }
  .kddf { padding: 22px 18px; }
  .kddf-grid { flex: none; grid-template-rows: auto; margin-top: 16px; }
  .kddt { flex: none; }
  .kdd-media img.kddt-wait { flex: none; height: auto; }
  .kdd-media:not(.kddf):not(.kddt-wrap) img { height: auto; }
  .lgs-sec { grid-template-columns: 1fr; gap: 24px; padding: 32px 0; }
  .lgs-sec-split { grid-template-columns: 1fr; gap: 32px; }
  .lgs-note { padding-top: 0; }
  .lgs-lockup { max-width: 100%; }
  .lgs-dims { margin-left: 0; }
  .lgs-min { gap: 34px; }
}


/* horizontal rule separating each section (like the reference) */
.sm-page .af-sec { border-top: 1px solid rgba(255,255,255,0.10); }
.sm-page .af-sec.af-light { border-top-color: #e3dfd8; }

/* Key Decisions: push the grid off the intro and add a dividing rule */
.kdd { margin-top: 40px; padding-top: 42px; border-top: 1px solid #e7e5e2; }
/* make all three cards the same height (tallest wins) */
.kdd-grid { align-items: stretch; }
/* User Research personas: same breathing room + rule off the intro text */
.pan { margin-top: 40px; padding-top: 42px; border-top: 1px solid rgba(255,255,255,0.10); }
/* equalize the card header height so every card's media/rows line up
   even when a title wraps to two lines */
.kdd-top { min-height: 48px; }
/* summary reads as an intentional footer rule, not a floating block */
.kdd-sum { max-width: none; margin: 46px 0 0; padding-top: 34px; border-top: 1px solid #e7e5e2; }


/* more air between the ( label ) and the section title.
   Titles keep the original per-word blur reveal (class "rt"), same as home. */
.sm-page .af-head .af-label { margin-bottom: 2.6rem; }

/* ============================================================
   Sunti Residence professional case study - no photography
   ============================================================ */
/* --af-green is scoped to brass here so nothing on this page can inherit the
   site's neon #35E07F from about.css. Every consumer is currently overridden
   individually; this stops the next one from arriving green. */
.su-pro-page { --af-green:#AA895F; --sp-ink:#090909; --sp-panel:#11110f; --sp-paper:#f4f1ea; --sp-paper-2:#ebe4d8; --sp-line:#d6ccbd; --sp-muted:#756f66; --sp-brass:#b99562; --sp-olive:#4f5b44; --sp-white:#fffaf2; background:var(--sp-ink); color:var(--sp-white); }
.su-pro-page .af-label, .su-pro-page .af-cta .af-arrow { color:var(--sp-brass); }
.su-pro-orbit.one { width:420px; height:420px; right:-110px; top:-90px; }
.su-pro-orbit.two { width:680px; height:680px; left:-240px; bottom:-260px; }
.su-pro-swatch.stone { background:#d9d0c1; color:#090909; }.su-pro-cta .af-cta { color:var(--sp-ink); }
@media (max-width: 900px) {
                    }


/* ---- Sunti case study cover: Secondmate-style image hero ---- */
.su-cover-hero {
  min-height: 78vh;
  position: relative;
  overflow: hidden;
  background: #050505;
  color: #fff;
  padding: 22vh 6vw 7vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.su-cover-bg { position: absolute; inset: 0; z-index: 0; }
/* Three darkening layers (brightness .54 + a 90deg scrim + a second 180deg
   gradient) stacked to near-black and buried the villa. This is a property
   project — the building has to be visible. Darkness is kept on the LEFT third,
   where the title sits, and released across the image. */
.su-cover-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; filter: brightness(.78) contrast(1.02) saturate(.95); }
.su-cover-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.52) 38%, rgba(0,0,0,.14) 66%, rgba(0,0,0,.4) 100%); }
.su-cover-scrim::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 34% 48%, rgba(255,255,255,.06), transparent 34%), linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.52)); }
.su-cover-back, .su-cover-label, .su-cover-meta {
  font-family: var(--af-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.su-cover-content { display: contents; }
.su-cover-content > * { position: relative; z-index: 1; }
.su-cover-back { display: inline-block; color: #f4f4f4; text-decoration: none; }
.su-cover-label { display: block; color: #AA895F; line-height: 15px; margin-top: 3vh; margin-bottom: 3.5vh; }
.su-cover-title { margin-top: 2vh; font-size: clamp(48px, 7vw, 118px); line-height: .98; letter-spacing: -0.035em; font-weight: 650; color: var(--title-on-dark); }
.su-cover-title span { color: #AA895F; }
.su-cover-sub { min-height: 3.2em; margin-top: 3vh; color: var(--af-soft-l); font-size: clamp(15px, 1.3vw, 20px); line-height: 1.6; max-width: 56ch; }
.su-cover-meta { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3vw; margin-top: 5vh; padding-top: 2.6vh; border-top: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.58); line-height: 15px; }
.su-cover-meta span:nth-child(2) { text-align: center; }
.su-cover-meta span:nth-child(3) { text-align: right; }
.su-cover-meta b { color: #AA895F; font-weight: 400; }

/* Sunti project context */
.su-project-facts { display:grid; grid-template-columns:1fr 1.8fr .8fr 1.15fr 1.7fr; gap:3vw; margin-top:6vh; padding:3.2vh 0; border-top:1px solid #d6d0c7; border-bottom:1px solid #d6d0c7; }
.su-project-facts > div { min-width:0; }
.su-project-facts span, .su-constraints-title > span { display:block; font-family:var(--af-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#AA895F; }
.su-project-facts strong { display:block; margin-top:1.1vh; font-size:clamp(14px,1.05vw,17px); line-height:1.45; font-weight:500; color:#171717; }
.su-constraints { display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr); gap:7vw; margin-top:7vh; align-items:start; }
.su-constraints-title h3 { max-width:12ch; margin-top:2vh; font-size:clamp(30px,3vw,48px); line-height:1.03; font-weight:600; }
.su-constraints ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.5vh 3vw; margin:0; padding:0; list-style:none; }
.su-constraints li { display:grid; grid-template-columns:32px 1fr; gap:1vw; align-items:start; }
.su-constraints li:last-child { grid-column:1 / -1; grid-template-columns:32px minmax(0,1fr); padding-top:1vh; }
.su-constraints li:last-child p { max-width:62em; }
.su-constraints li > span { font-family:var(--af-mono); font-size:11px; letter-spacing:.12em; color:#AA895F; }
.su-constraints li p { max-width:34em; font-size:14px; line-height:1.55; color:#55514b; }

/* Sunti process and timeline */
.su-process { padding:9vh 6vw 10vh; background:#E0D8CC; color:#101010; }
.su-process-head { display:grid; grid-template-columns:minmax(210px,.55fr) minmax(0,1.45fr); gap:7vw; align-items:start; }
.su-process-head > span, .su-process-weeks > article > span, .su-process-weeks article > div span, .su-process-deliverables > span { font-family:var(--af-mono); font-size:11px; line-height:1.4; letter-spacing:.14em; text-transform:uppercase; color:#8f704a; }
.su-process-head h2 { max-width:17ch; font-size:clamp(44px,4.8vw,76px); line-height:1; font-weight:600; }
.su-process-head p { max-width:66em; margin-top:3vh; font-size:clamp(15px,1.1vw,18px); line-height:1.62; color:#5f5a53; }
.su-process-weeks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1vw; margin-top:6vh; }
.su-process-weeks article { display:flex; flex-direction:column; min-height:370px; padding:3.2vh 1.7vw; background:rgba(255,255,255,.34); border-radius:4px; }
.su-process-weeks h3 { min-height:2.3em; margin-top:2vh; font-size:clamp(18px,1.45vw,23px); line-height:1.15; font-weight:600; }
.su-process-weeks ul { margin:2.7vh 0 0; padding:0; list-style:none; }
.su-process-weeks li { margin-top:1vh; font-size:14px; line-height:1.48; color:#56524c; }
.su-process-weeks li::before { content:"/"; margin-right:.55em; color:#8f704a; }
.su-process-weeks article > div { margin-top:auto; padding-top:3vh; }
.su-process-weeks article > div p { margin-top:1vh; font-size:13.5px; line-height:1.52; color:#514d47; }
.su-process-deliverables { display:grid; grid-template-columns:190px minmax(0,1fr); gap:3vw; align-items:start; margin-top:1vw; padding:3vh 2vw; background:rgba(255,255,255,.25); border-radius:4px; }
.su-process-deliverables p { max-width:76em; font-size:14.5px; line-height:1.6; color:#514d47; }

/* Sunti user research - editorial dossier layout */
.su-research { --af-green:#AA895F; padding:8vh 6vw 9vh; background:#050505; color:#fff; }
/* Reflection closes the page: same dark treatment as research, own hook so the
   next edit doesn't have to read "su-research" on a section that isn't. */
.su-reflection .af-label { color:#AA895F; }
.su-reflection .tc-lede p { max-width:48em; color:#c0bdb7; }
.su-reflection .tc-lede p:first-child { color:#ededed; font-size:clamp(17px,1.35vw,20px); }
.su-research-intro { display:grid; grid-template-columns:minmax(300px,.75fr) minmax(0,1.25fr); gap:8vw; align-items:end; }
.su-research-intro .af-head { display:block; margin:0; }
.su-research-intro .af-h2 { max-width:9ch; font-size:clamp(46px,5.2vw,86px); line-height:.94; }
.su-research-intro .tc-lede p { max-width:48em; }
.su-research-intro .tc-lede p:first-child { color:#ededed; font-size:clamp(17px,1.35vw,20px); }
.su-research .af-label, .su-research .tc-p-role { color:#AA895F; }
/* The synthesis board — the only raw research artifact on the page. Own classes
   because .su-wf-key's caption colours are tuned for the light wireframe section
   and would vanish on this dark one. */
.su-research-board { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1fr); gap:3vw; align-items:start; margin-top:5.5vh; }
/* The board is ~900px tall and the text beside it ~520px, so the column bottomed
   out empty. Nothing real is left to put there, so the text rides the board down
   instead of stranding at the top. */
.su-research-board-cap { position:sticky; top:18vh; }
.su-research-board figure { margin:0; }
.su-research-board img { display:block; width:100%; height:auto; border-radius:4px; box-shadow:0 26px 55px -30px rgba(0,0,0,.7); }
.su-research-board-cap > span { display:block; font-family:var(--af-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#AA895F; }
.su-research-board-cap strong { display:block; margin-top:1.4vh; font-size:clamp(20px,1.6vw,27px); line-height:1.16; font-weight:600; color:#f4f1ea; }
.su-research-board-cap p { max-width:40em; margin-top:1.8vh; font-size:15px; line-height:1.6; color:#aaa69f; }
/* The key finding is what the board concludes, so it sits beside the board rather
   than in its own block below — it also fills the column the caption left empty. */
.su-research-finding-inline { margin-top:4vh; padding:3.2vh 2vw 3.5vh; background:rgba(255,255,255,.05); border-left:2px solid #AA895F; border-radius:4px; }
.su-research-finding-inline > span { display:block; font-family:var(--af-mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:#C1A37E; }
.su-research-finding-inline strong { display:block; margin-top:1.4vh; font-size:clamp(19px,1.45vw,25px); line-height:1.2; font-weight:600; color:#f4f1ea; }
.su-research-finding-inline p { margin-top:1.6vh; color:#c0bdb7; }

.su-research-method { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1vw; margin-top:4.5vh; }
.su-research-method > div { min-width:0; padding:2.5vh 1.6vw; background:rgba(255,255,255,.05); border-radius:4px; }
.su-research-method span, .su-research .tc-p-quote > span { display:block; font-family:var(--af-mono); font-size:11px; line-height:1.4; letter-spacing:.13em; text-transform:uppercase; color:#C1A37E; }
.su-research-method p { margin-top:1.35vh; font-size:14px; line-height:1.55; color:#c0bdb7; }
.su-personas { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2vw; margin-top:4vh; }
.su-research .tc-persona { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); column-gap:2vw; row-gap:2.2vh; padding:3.5vh 2.5vw 4vh; background:rgba(255,255,255,.035); border:0; border-radius:4px; }
.su-research .tc-p-top { grid-column:1 / 4; grid-row:1; display:flex; align-items:center; gap:clamp(16px,1.6vw,26px); padding-right:1vw; }
.su-research .tc-p-avatar { flex:none; width:clamp(104px,8.5vw,128px); height:clamp(104px,8.5vw,128px); box-sizing:border-box; border:2px solid #CBBBA0; border-radius:50%; margin:0; object-fit:cover; object-position:center 18%; filter:saturate(.78) contrast(1.04); }
.su-research .tc-p-name { max-width:10ch; font-size:clamp(25px,2.15vw,34px); line-height:1.02; }
.su-research .tc-p-role { max-width:25ch; margin-top:1.2vh; line-height:1.45; }
.su-research .tc-p-quote { grid-column:4 / 7; max-width:34em; align-self:center; margin:0; padding:0; border:0; font-style:normal; color:#f5f5f5; }
.su-research .tc-p-quote p { margin-top:1.2vh; font-size:clamp(18px,1.35vw,24px); line-height:1.25; font-style:normal; }
.su-research .tc-p-block { margin:0; }
.su-research .tc-p-block:nth-child(3) { grid-column:1 / 7; }
.su-research .tc-p-block:nth-child(4) { grid-column:1 / 4; }
.su-research .tc-p-block:nth-child(5) { grid-column:4 / 7; }
.su-research .tc-p-bio { max-width:58em; margin-bottom:1vh; font-size:15px; line-height:1.58; color:#c3c0ba; }
.su-research .tc-p-label { color:#AA895F; }
.su-research .tc-p-block li { padding-top:.5vh; padding-bottom:.5vh; font-size:14px; line-height:1.45; border-bottom:0; color:#c3c0ba; }
.su-research .tc-p-block li::before { color:#AA895F; }

/* Sunti wireframing workbench */
.su-wireframe { padding:12vh 6vw; background:#f2f0eb; color:#0b0b0b; border-top:1px solid #d6d1c8; }
.su-wireframe-intro { display:grid; grid-template-columns:minmax(430px,1fr) minmax(0,1fr); gap:6vw; align-items:end; }
.su-wireframe-intro > div > span { font-family:var(--af-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.su-wireframe-intro > div > span { color:#AA895F; }
.su-wireframe-intro h2 { max-width:13ch; margin-top:2vh; font-size:clamp(46px,5.2vw,86px); line-height:.96; letter-spacing:-.02em; font-weight:600; }
.su-wireframe-intro > p { max-width:48em; font-size:clamp(16px,1.25vw,19px); line-height:1.6; color:#3f3d39; }
/* The villa-comparison screen shown at its native 874px, so it is actually
   readable. In the full board it renders ~6px tall, which wasted the best
   artifact on the page. */
.su-wf-key { display:grid; grid-template-columns:minmax(0,874px) minmax(0,1fr); gap:3vw; align-items:start; margin:8vh 0 0; }
/* Desktop table and phone are the same decision at two sizes, so they sit side by
   side. The phone also fills the right column, which the caption alone left empty. */
.su-wf-key-side { display:flex; flex-direction:column; gap:5vh; }
.su-wf-phone { display:flex; flex-direction:column; gap:2vh; align-items:flex-start; }
.su-wf-phone img { display:block; width:100%; max-width:420px; height:auto; border-radius:4px; box-shadow:0 26px 55px -30px rgba(20,18,16,.24); }
.su-wf-phone-cap span { display:block; font-family:var(--af-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#AA895F; }
.su-wf-phone-cap p { max-width:34em; margin-top:1.2vh; font-size:14px; line-height:1.55; color:#625e57; }
.su-wf-key-media { background:#fff; border-radius:4px; overflow:hidden; box-shadow:0 26px 55px -30px rgba(20,18,16,.24); }
.su-wf-key-media img { display:block; width:100%; height:auto; }
.su-wf-key figcaption > span { font-family:var(--af-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#AA895F; }
.su-wf-key figcaption strong { display:block; margin-top:1.4vh; font-size:clamp(20px,1.55vw,26px); line-height:1.16; font-weight:600; }
.su-wf-key figcaption p { max-width:40em; margin-top:1.8vh; font-size:15px; line-height:1.6; color:#625e57; }

.su-wireframe-evolution { margin-top:9vh; padding-top:8vh; border-top:1px solid #c9c4bb; }
.su-wireframe-evolution-intro { display:grid; grid-template-columns:minmax(170px,.45fr) minmax(260px,.8fr) minmax(0,1.35fr); gap:3vw; align-items:start; }
.su-wireframe-evolution-intro > span, .su-wireframe-evolution-grid figcaption span { font-family:var(--af-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#AA895F; }
.su-wireframe-evolution-intro > strong { font-size:clamp(24px,2vw,34px); line-height:1.12; font-weight:600; }
.su-wireframe-evolution-intro > p { max-width:50em; font-size:15px; line-height:1.62; color:#625e57; }
.su-wireframe-evolution-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2vw; margin-top:5vh; }
.su-wireframe-evolution-grid figure { min-width:0; margin:0; }
.su-wireframe-evolution-media { aspect-ratio:1 / 1; overflow:hidden; background:#fff; border-radius:4px; }
.su-wireframe-evolution-media img { display:block; width:100%; height:100%; object-fit:cover; object-position:center top; }
.su-wireframe-evolution-low img { object-position:left top; }
.su-wireframe-evolution-grid figcaption { padding-top:2.8vh; }
.su-wireframe-evolution-grid figcaption strong { display:block; margin-top:1.2vh; font-size:clamp(20px,1.55vw,26px); line-height:1.16; font-weight:600; }
.su-wireframe-evolution-grid figcaption p { max-width:42em; margin-top:1.2vh; font-size:14px; line-height:1.55; color:#625e57; }

/* Sunti evaluation and pre-launch measurement */
.su-evaluation { padding:10vh 6vw 0; background:#E0D8CC; color:#101010; overflow:hidden; }
.su-evaluation-head { display:grid; grid-template-columns:minmax(210px,.55fr) minmax(0,1.45fr); gap:7vw; align-items:start; }
.su-evaluation-head > span, .su-evaluation-meta span, .su-evaluation-findings > article > span, .su-evaluation-findings strong, .su-success header > span, .su-success-grid span { font-family:var(--af-mono); font-size:11px; line-height:1.45; letter-spacing:.13em; text-transform:uppercase; color:#8f704a; }
.su-evaluation-head h2 { max-width:18ch; font-size:clamp(44px,4.8vw,76px); line-height:1; font-weight:600; }
.su-evaluation-head p { max-width:70em; margin-top:3vh; font-size:clamp(15px,1.1vw,18px); line-height:1.62; color:#5f5a53; }
.su-evaluation-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1vw; margin-top:5vh; }
.su-evaluation-meta > div { padding:2.6vh 1.7vw; background:rgba(255,255,255,.34); border-radius:4px; }
.su-evaluation-meta p { margin-top:1.2vh; font-size:13px; line-height:1.55; color:#5f5a53; }
.su-evaluation-findings { margin-top:1vw; padding-bottom:9vh; }
.su-evaluation-findings article { display:grid; grid-template-columns:120px repeat(3,minmax(0,1fr)); gap:2vw; align-items:start; margin-top:1vw; padding:3.4vh 2vw; background:rgba(255,255,255,.28); border-radius:4px; }
.su-evaluation-findings strong { display:block; font-weight:500; }
.su-evaluation-findings p { max-width:34em; margin-top:1.2vh; font-size:13.5px; line-height:1.55; color:#57534d; }
.su-accessibility { padding:5.5vh 2vw 8.5vh; background:#101010; color:#f4f1ed; border-radius:4px; }
.su-accessibility header { display:grid; grid-template-columns:minmax(180px,.38fr) minmax(0,.72fr) minmax(0,1fr); gap:2.5vw; align-items:start; }
.su-accessibility header > span, .su-accessibility-grid strong { font-family:var(--af-mono); font-size:11px; line-height:1.45; letter-spacing:.13em; text-transform:uppercase; color:#CBBBA0; }
.su-accessibility header h3 { max-width:14ch; font-size:clamp(25px,2.3vw,38px); line-height:1.08; font-weight:600; }
.su-accessibility header p { max-width:54em; font-size:14px; line-height:1.58; color:#bdb8b1; }
.su-accessibility-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:2vw; margin-top:5vh; }
.su-accessibility-grid p { margin-top:1.2vh; font-size:13px; line-height:1.55; color:#bdb8b1; }
.su-success { margin:5vh -6vw 0; padding:7vh 6vw 8vh; background:#090909; color:#f4f1ea; }
.su-success header { display:grid; grid-template-columns:minmax(210px,.55fr) minmax(0,1.45fr); gap:1.5vh 7vw; align-items:start; }
.su-success header > span { grid-row:1 / span 2; color:#AA895F; }
.su-success h3 { font-size:clamp(30px,3.3vw,52px); line-height:1.04; font-weight:600; }
.su-success header p { margin-top:.6vh; font-size:14px; line-height:1.55; color:#aaa7a1; }
.su-success-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3.5vh 2.5vw; align-items:start; margin-top:5vh; }
.su-success-grid article { display:grid; grid-template-rows:48px 34px auto; align-content:start; min-width:0; }
.su-success-grid strong { display:block; font-size:clamp(24px,2.2vw,36px); line-height:1; font-weight:600; color:#CBBBA0; }
.su-success-grid span { display:block; margin-top:1.4vh; color:#B9976B; }
.su-success-grid p { margin-top:1.2vh; max-width:24em; font-size:14px; line-height:1.55; color:#b4b0aa; }
.su-success-grid article:last-child { grid-column:1 / -1; grid-template-columns:minmax(190px,.55fr) minmax(170px,.45fr) minmax(0,1.65fr); grid-template-rows:auto; gap:2vw; align-items:center; margin-top:1vh; padding:3vh 2vw; background:rgba(255,255,255,.045); border-radius:4px; }
.su-success-grid article:last-child strong { font-size:24px; }
.su-success-grid article:last-child span,
.su-success-grid article:last-child p { margin-top:0; }
.su-success-grid article:last-child p { max-width:64em; }

/* Sunti key decisions */
.su-decisions { padding:0; background:#0a0a0a; color:#f4f1ea; border-top:1px solid #232323; }
.su-decisions-head { display:block; padding:11vh 6vw 10vh; background:#0a0a0a; color:#f4f1ea; }
.su-decisions-head > span, .su-decision > div > span { font-family:var(--af-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#AA895F; }
.su-decisions-head h2 { max-width:none; margin-top:4vh; font-size:clamp(46px,5vw,78px); line-height:1; letter-spacing:-.02em; font-weight:600; }
.su-decisions-head p { max-width:72em; margin-top:6vh; font-size:clamp(16px,1.25vw,19px); line-height:1.62; color:#aaa69f; }
.su-decisions-list { margin:0 6vw; padding-bottom:14vh; border-top:1px solid #353535; }
.su-decision { display:grid; grid-template-columns:78px minmax(250px,.8fr) repeat(3,minmax(0,1fr)); border-bottom:1px solid #353535; }
.su-decision > * { min-width:0; padding:5vh 2vw; }
.su-decision-number { padding-left:0; font-size:clamp(42px,4vw,68px); line-height:.8; font-weight:600; color:#AA895F; }
.su-decision h3 { padding-top:4.9vh; font-size:clamp(20px,1.75vw,28px); line-height:1.2; letter-spacing:0; font-weight:500; color:#f4f1ea; }
.su-decision > div { border-left:1px solid #282828; }
.su-decision > div p { margin-top:2vh; font-size:14px; line-height:1.58; color:#aaa69f; }
/* The cost is a 4th block on a 5-col grid built for 3 — give it its own row
   spanning the content columns, rather than letting it wrap into the number column. */
.su-decision-cost { grid-column:3 / -1; border-top:1px solid #282828; }
.su-decision-cost p { max-width:80em; }

/* Sunti interface evidence */
.su-evidence { padding:10vh 6vw 12vh; background:#f4f1ed; color:#101010; }
.su-evidence-head { display:grid; grid-template-columns:minmax(220px,.55fr) minmax(0,1.45fr); gap:7vw; align-items:start; }
.su-evidence-head > span, .su-evidence figcaption > span { font-family:var(--af-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#AA895F; }
.su-evidence-head h2 { max-width:18ch; font-size:clamp(44px,4.8vw,76px); line-height:1; letter-spacing:0; font-weight:600; }
.su-evidence-head p { max-width:68em; margin-top:3vh; font-size:clamp(15px,1.1vw,18px); line-height:1.62; color:#625e57; }
.su-evidence-stack { margin-top:7vh; }
.su-evidence figure { min-width:0; margin:0; }
.su-evidence-media { overflow:hidden; background:#e8e2d8; border-radius:4px; }
.su-evidence-media img { display:block; width:100%; height:auto; }
.su-evidence-feature figcaption { display:grid; grid-template-columns:minmax(170px,.45fr) minmax(250px,.8fr) minmax(0,1.4fr); gap:3vw; align-items:start; padding:3.2vh 0 7vh; }
.su-evidence figcaption strong { display:block; font-size:clamp(20px,1.6vw,27px); line-height:1.18; font-weight:600; }
.su-evidence figcaption p { max-width:48em; font-size:14px; line-height:1.58; color:#625e57; }
.su-evidence-grid { display:grid; grid-template-columns:.88fr 1.12fr; gap:2vw; align-items:start; }
.su-evidence-card figcaption { padding:3vh 0 0; }
.su-evidence-card figcaption strong { margin-top:1.4vh; }
.su-evidence-card figcaption p { margin-top:1.4vh; }
.su-evidence-mobile-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1vw; background:transparent; }
.su-evidence-mobile-pair img { min-width:0; background:#e8e2d8; border-radius:4px; }

/* Sunti typography */
@font-face {
  font-family:"Sunti Gruppo";
  src:url("../fonts/sunti/Gruppo-Regular.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:"Sunti Gotham Pro";
  src:url("../fonts/sunti/GothamProRegular.woff") format("woff");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:"Sunti Gotham Pro";
  src:url("../fonts/sunti/GothamProMedium.woff") format("woff");
  font-style:normal;
  font-weight:500;
  font-display:swap;
}

/* Sunti visual system - typography and color in one compact section */
.su-visual-system { padding:8vh 4vw 9vh; background:#070707; color:#f4f1ea; border-top:1px solid #242424; }
.su-system-head { display:grid; grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr); gap:7vw; align-items:start; }
.su-system-head > span, .su-system-font > span { font-family:var(--af-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#AA895F; }
.su-system-head h2 { max-width:18ch; font-size:clamp(42px,4.3vw,68px); line-height:1; font-weight:600; }
.su-system-head p { max-width:64em; margin-top:2.8vh; font-size:clamp(15px,1.1vw,18px); line-height:1.6; color:#aaa7a1; }
.su-system-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2vw; margin-top:5.5vh; }
.su-system-type { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1vw; }
.su-system-font { display:flex; flex-direction:column; justify-content:space-between; min-height:330px; padding:3.2vh 2vw; background:#0d0d0d; border:1px solid #292929; border-radius:6px; }
.su-system-font strong { display:block; margin:3vh 0; font-size:clamp(32px,2.9vw,50px); line-height:1.05; font-weight:400; }
.su-system-font small { font-family:var(--af-mono); font-size:11px; line-height:1.55; letter-spacing:.1em; text-transform:uppercase; color:#77736d; }
/* Gruppo is the display face — the specimen has to actually look like display
   type, not body copy in a box. */
.su-system-gruppo strong { font-family:"Sunti Gruppo",sans-serif; font-size:clamp(40px,4.2vw,72px); }
.su-system-gotham, .su-system-gotham strong { font-family:"Sunti Gotham Pro",sans-serif; }
.su-system-gotham strong { font-weight:500; }
.su-system-colors { display:grid; grid-template-rows:repeat(5,1fr); min-height:270px; overflow:hidden; border-radius:6px; }
.su-system-colors > div { display:grid; grid-template-columns:84px minmax(0,1fr) minmax(100px,.8fr); gap:1.5vw; align-items:center; padding:1.2vh 1.5vw; background:var(--swatch); color:var(--swatch-ink); }
.su-system-colors span { font-family:"Sunti Gotham Pro",sans-serif; font-size:11px; }
.su-system-colors strong { font-size:clamp(14px,1.15vw,18px); line-height:1.2; font-weight:500; }
/* No opacity here: at .72 the role label measured 4.19:1 on Coastal Sand and
   3.40:1 on Muted Brass — both fail AA, on a page that claims an AA check.
   Full ink passes every row (brass 5.15:1); the softness comes from size and
   tracking instead. */
.su-system-colors small { font-family:var(--af-mono); font-size:11px; line-height:1.35; letter-spacing:.08em; text-transform:uppercase; }

/* Same #070707 as .su-visual-system above it. Without a rule the two sections
   merge and their stacked padding reads as a ~220px hole, not a boundary. */
.su-result { padding:10vh 6vw 12vh; background:#070707; color:#f4f1ea; border-top:1px solid #242424; }
.su-result-inner { max-width:1500px; }
.su-result-inner > span { font-family:var(--af-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#CBBBA0; }
.su-result h2 { max-width:none; margin-top:5vh; font-size:clamp(42px,4.4vw,78px); line-height:1; letter-spacing:0; font-weight:600; }
.su-result p { max-width:77em; margin-top:6vh; font-size:clamp(16px,1.15vw,19px); line-height:1.62; color:#b7b3ad; }
.su-result-links { display:flex; flex-wrap:wrap; gap:2rem; margin-top:5vh; }
.su-result-links a { display:inline-flex; align-items:center; justify-content:space-between; gap:2rem; min-width:154px; padding-bottom:1vh; border-bottom:1px solid #CBBBA0; font-family:var(--af-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#f4f1ea; text-decoration:none; }
.su-result-links a span { color:#CBBBA0; }
.su-outcome { display:grid; grid-template-columns:minmax(240px,.82fr) minmax(0,1.18fr); gap:5vw; margin-top:7vh; padding-top:5vh; border-top:1px solid rgba(255,255,255,.12); align-items:start; }
.su-outcome-metric strong { display:block; font-size:clamp(48px,5.2vw,88px); line-height:.92; font-weight:600; letter-spacing:-.025em; color:#f4f1ea; }
.su-outcome-metric > span { display:block; margin-top:2.2vh; font-family:var(--af-mono); font-size:11px; line-height:1.5; text-transform:uppercase; letter-spacing:.08em; color:#CBBBA0; }
.su-outcome-metric p { margin-top:2.6vh; max-width:34em; font-size:14px; line-height:1.6; color:#b7b3ad; }
.su-outcome-voices { display:grid; gap:3.4vh; }
.su-outcome-voices blockquote { margin:0; padding-left:1.4vw; border-left:2px solid #AA895F; }
.su-outcome-voices blockquote > span { display:block; margin-bottom:1.4vh; font-family:var(--af-mono); font-size:11px; line-height:1.4; text-transform:uppercase; letter-spacing:.1em; color:#AA895F; }
.su-outcome-voices blockquote p { max-width:52em; font-size:clamp(15px,1.15vw,17px); line-height:1.55; color:#e8e5df; }
@media (max-width: 900px) {
  .su-cover-hero { padding: 16vh 7vw 6vh; }
  .su-cover-meta { grid-template-columns: 1fr; gap: 1.6vh; }
  .su-cover-meta span, .su-cover-meta span:nth-child(2), .su-cover-meta span:nth-child(3) { text-align: left; }
  .su-project-facts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:3.5vh 5vw; }
  .su-project-facts-wide { grid-column:1 / -1; }
  .su-constraints { grid-template-columns:1fr; gap:4vh; margin-top:6vh; }
  .su-constraints-title h3 { max-width:14ch; }
  .su-constraints ol { grid-template-columns:1fr; gap:2.3vh; }
  .su-constraints li { gap:3vw; }
  .su-constraints li:last-child { grid-column:auto; padding-top:0; }
  .su-process { padding:8vh 7vw 9vh; }
  .su-process-head { grid-template-columns:1fr; gap:3vh; }
  .su-process-head h2 { max-width:12ch; font-size:clamp(42px,12vw,58px); line-height:1.02; }
  .su-process-weeks { grid-template-columns:1fr; gap:1.5vh; margin-top:5vh; }
  .su-process-weeks article { min-height:0; padding:3.2vh 5vw; }
  .su-process-weeks h3 { min-height:0; margin-top:1.6vh; font-size:24px; }
  .su-process-weeks article > div { margin-top:3vh; padding-top:0; }
  .su-process-deliverables { grid-template-columns:1fr; gap:1.2vh; margin-top:1.5vh; padding:3.2vh 5vw; }
  .su-research { padding:7.5vh 7vw 8vh; }
  .su-research-intro { grid-template-columns:1fr; gap:4vh; }
  .su-research-board { grid-template-columns:1fr; gap:3vh; margin-top:4vh; }
  .su-research-board-cap { position:static; }
  .su-research-method, .su-personas { grid-template-columns:1fr; gap:1.5vh; }
  .su-research-method { margin-top:4vh; }
  .su-research-method > div { padding:2.5vh 5vw; }
  .su-personas { margin-top:3.5vh; }
  .su-research .tc-persona { grid-template-columns:1fr; gap:2vh; padding:3.5vh 5vw 4vh; }
  .su-research .tc-p-top, .su-research .tc-p-quote, .su-research .tc-p-block:nth-child(3), .su-research .tc-p-block:nth-child(4), .su-research .tc-p-block:nth-child(5), .su-research .tc-p-block:nth-child(6), .su-research .tc-p-block:nth-child(7) { grid-column:1; grid-row:auto; }
  .su-research .tc-p-top { padding-right:0; }
  .su-research .tc-p-avatar { width:82px; height:82px; }
  .su-research .tc-p-name { max-width:none; font-size:28px; }
  .su-research .tc-p-quote p { font-size:20px; }
  .su-wireframe { padding:9vh 7vw; }
  .su-wireframe-intro { grid-template-columns:1fr; gap:4vh; }
  .su-wf-key { grid-template-columns:1fr; gap:3vh; margin-top:6vh; }
  .su-wf-phone img { max-width:100%; }
  .su-wireframe-evolution { margin-top:7vh; padding-top:7vh; }
  .su-wireframe-evolution-intro, .su-wireframe-evolution-grid { grid-template-columns:1fr; }
  .su-wireframe-evolution-intro { gap:1.8vh; }
  .su-wireframe-evolution-intro > strong { font-size:28px; }
  .su-wireframe-evolution-grid { gap:6vh; margin-top:4.5vh; }
  .su-wireframe-evolution-grid figcaption { padding-top:2.5vh; }
  .su-evaluation { padding:8vh 7vw 0; }
  .su-evaluation-head { grid-template-columns:1fr; gap:3vh; }
  .su-evaluation-head h2 { max-width:12ch; font-size:clamp(42px,12vw,58px); line-height:1.02; }
  .su-evaluation-meta { grid-template-columns:1fr; gap:1.5vh; margin-top:4.5vh; }
  .su-evaluation-meta > div { padding:2.7vh 5vw; }
  .su-evaluation-findings { margin-top:1.5vh; padding-bottom:8vh; }
  .su-evaluation-findings article { grid-template-columns:1fr; gap:2.2vh; margin-top:1.5vh; padding:3.5vh 5vw; }
  .su-evaluation-findings article > span { margin-bottom:.3vh; }
  .su-accessibility { margin:0 -7vw; padding:7vh 7vw 9vh; border-radius:0; }
  .su-accessibility header { grid-template-columns:1fr; gap:1.8vh; }
  .su-accessibility header h3 { max-width:13ch; font-size:34px; }
  .su-accessibility-grid { grid-template-columns:1fr; gap:3.2vh; margin-top:4.5vh; }
  .su-success { margin:5vh -7vw 0; padding:7vh 7vw 8vh; }
  .su-success header { grid-template-columns:1fr; gap:1.8vh; }
  .su-success header > span { grid-row:auto; }
  .su-success-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4vh 7vw; margin-top:5vh; }
  .su-success-grid article:last-child { grid-column:1 / -1; }
  .su-decisions { padding:0; }
  .su-decisions-head { padding:9vh 7vw 8vh; }
  .su-decisions-head h2 { max-width:none; margin-top:3vh; font-size:clamp(42px,12vw,58px); line-height:1.02; }
  .su-decisions-head p { margin-top:4vh; }
  .su-decisions-list { margin:0 7vw; padding-bottom:11vh; }
  .su-decision { grid-template-columns:52px 1fr; padding:4.5vh 0; }
  .su-decision > * { padding:0; }
  .su-decision-number { grid-row:1 / span 5; font-size:32px; }
  .su-decision-cost { grid-column:2; }
  .su-decision h3 { padding:0 0 3.5vh; font-size:24px; line-height:1.18; }
  .su-decision > div { grid-column:2; padding:3vh 0; border-left:0; border-top:1px solid #282828; }
  .su-decision > div p { margin-top:1.4vh; }
  .su-evidence { padding:8vh 7vw 9vh; }
  .su-evidence-head { grid-template-columns:1fr; gap:3vh; }
  .su-evidence-head h2 { max-width:12ch; font-size:clamp(42px,12vw,58px); line-height:1.02; }
  .su-evidence-head p { margin-top:3vh; }
  .su-evidence-stack { margin-top:5vh; }
  .su-evidence-feature figcaption { grid-template-columns:1fr; gap:1.4vh; padding:2.8vh 0 7vh; }
  .su-evidence-grid { grid-template-columns:1fr; gap:7vh; }
  .su-evidence-card figcaption { padding-top:2.8vh; }
  .su-evidence-mobile-pair { grid-template-columns:1fr; gap:2vh; }
                                  .su-visual-system { padding:8vh 7vw 9vh; }
  .su-system-head, .su-system-layout { grid-template-columns:1fr; }
  .su-system-head { gap:3vh; }
  .su-system-head h2 { max-width:12ch; font-size:clamp(42px,12vw,58px); line-height:1.02; }
  .su-system-layout { gap:2.5vh; margin-top:5vh; }
  .su-system-type { grid-template-columns:1fr; gap:1.5vh; }
  .su-system-font { min-height:210px; padding:3.5vh 5vw; }
  .su-system-font strong, .su-system-gruppo strong { font-size:38px; }
  .su-system-colors { min-height:340px; }
  .su-system-colors > div { grid-template-columns:74px 1fr; gap:3vw; padding:1.5vh 4vw; }
  .su-system-colors small { display:none; }
  .su-result { padding:10vh 7vw 11vh; }
  .su-result h2 { max-width:12ch; margin-top:4vh; font-size:clamp(42px,12vw,58px); line-height:1.02; }
  .su-result p { margin-top:4vh; }
  .su-outcome { grid-template-columns:1fr; gap:4vh; margin-top:5vh; }
  .su-result-links { margin-top:4vh; gap:1.5rem; }
}

@media (max-width: 700px) {
  .su-pro-page #tw-menu:not(.mn-open) .mn-start { display:none; }
  .su-pro-page #tw-menu:not(.mn-open) .mn-pills {
    top:14px;
    right:12px;
    pointer-events:auto;
  }
  .su-pro-page #tw-menu:not(.mn-open) .mn-talk { display:none; }
  .su-pro-page #tw-menu:not(.mn-open) .mn-toggle {
    opacity:1;
    transform:none;
    filter:none;
    padding:12px 17px;
    font-size:11px;
  }
  .su-pro-page #tw-menu.mn-scrolled:not(.mn-open) .mn-logo,
  .su-pro-page #tw-menu.mn-scrolled:not(.mn-open) .mn-talk {
    opacity:0;
    pointer-events:none;
    transform:translateY(-14px);
  }
  .su-pro-page #tw-menu.mn-scrolled:not(.mn-open) .mn-pills { top:12px; right:12px; }
  .su-pro-page #tw-menu.mn-scrolled:not(.mn-open) .mn-pill { padding:12px 17px; font-size:11px; }
}

/* Sunti unified typography scale */
.su-pro-page {
  --su-label-size:11px;
  --su-body-size:16px;
  --su-card-title-size:24px;
  --su-feature-title-size:clamp(34px,3vw,48px);
  --su-section-title-size:clamp(42px,4.8vw,76px);
}

.su-pro-page .af-label,
.su-project-facts span,
.su-constraints-title > span,
.su-process-head > span,
.su-process-weeks > article > span,
.su-process-weeks article > div span,
.su-process-deliverables > span,
.su-research-method span,
.su-research .tc-p-role,
.su-research .tc-p-quote > span,
.su-research .tc-p-label,
.su-wireframe-intro > div > span,
.su-wireframe-evolution-intro > span,
.su-wireframe-evolution-grid figcaption span,
.su-evaluation-head > span,
.su-evaluation-meta span,
.su-evaluation-findings > article > span,
.su-evaluation-findings strong,
.su-success header > span,
.su-success-grid span,
.su-decisions-head > span,
.su-decision > div > span,
.su-evidence-head > span,
.su-evidence figcaption > span,
.su-system-head > span,
.su-system-font > span,
.su-result-inner > span,
.su-result-links a {
  font-size:var(--su-label-size);
}

.su-cover-sub,
.su-project-facts strong,
.su-constraints li p,
.su-process-head p,
.su-process-weeks li,
.su-process-weeks article > div p,
.su-process-deliverables p,
.su-research-intro .tc-lede p,
.su-research-intro .tc-lede p:first-child,
.su-research-method p,
.su-research .tc-p-bio,
.su-research .tc-p-block li,
.su-wireframe-intro > p,
.su-wireframe-evolution-intro > p,
.su-wireframe-evolution-grid figcaption p,
.su-evaluation-head p,
.su-evaluation-meta p,
.su-evaluation-findings p,
.su-success header p,
.su-success-grid p,
.su-decisions-head p,
.su-decision > div p,
.su-evidence-head p,
.su-evidence figcaption p,
.su-system-head p,
.su-result p {
  font-size:var(--su-body-size);
  line-height:1.6;
}

.su-pro-page .af-h2,
.su-process-head h2,
.su-wireframe-intro h2,
.su-evaluation-head h2,
.su-decisions-head h2,
.su-evidence-head h2,
.su-system-head h2,
.su-result h2 {
  font-size:var(--su-section-title-size);
  line-height:1.02;
}

.su-process-weeks h3,
.su-wireframe-evolution-grid figcaption strong,
.su-evidence figcaption strong,
.su-decision h3 {
  font-size:var(--su-card-title-size);
  line-height:1.2;
}

.su-constraints-title h3,
.su-success h3 {
  font-size:var(--su-feature-title-size);
  line-height:1.08;
}

.su-research .tc-p-name,
.su-success-grid strong {
  font-size:32px;
}

.su-research .tc-p-quote p { font-size:var(--su-card-title-size); }

@media (max-width:700px) {
  .su-success-grid { grid-template-columns:1fr; }
  .su-success-grid article:last-child { display:block; grid-column:auto; padding:3.5vh 5vw; }
  .su-success-grid article:last-child span,
  .su-success-grid article:last-child p { margin-top:1.5vh; }
}

/* ---- Whiterock case study: one colour for its headings on the dark bands ----
   This page inverts a warm paper/ink palette band by band, and its headings had
   drifted across four near-whites doing the same job (#FAF9F7, #F6F2EC, #F4F0EA,
   #F7F4EF). Only the dark bands are listed -- the light ones keep --wr-ink, and
   body copy on the dark bands keeps its own paper tone, so the warm character of
   the page is untouched. Named individually because .wr-section covers both
   light and dark bands. */
.wr-facts h2, .wr-facts h3,
.wr-week:nth-child(2) h2, .wr-week:nth-child(2) h3,
.wr-audit h2, .wr-audit h3,
.wr-decision-list article:nth-child(2n) h2,
.wr-decision-list article:nth-child(2n) h3,
.wr-evidence-chapter-dark h2, .wr-evidence-chapter-dark h3,
.wr-system h2, .wr-system h3,
.wr-accessibility h2, .wr-accessibility h3,
.wr-result h2, .wr-result h3 { color: var(--title-on-dark); }