/* Shared case study system: number, headline, two sentences, one framed visual.
   Used by every case study page. */
/* One rhythm for the page: number, headline, two sentences, one framed visual. */
.ds { --fc: #4630D2; --fc-soft: #EDF1FF; --mono: ui-monospace, "SF Mono", Menlo, monospace; }
.ds .sec { padding-top: clamp(72px, 9vw, 128px); }
.ds .sec-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: 28px; }
.ds .sec-head .kicker { display: block; margin-bottom: 10px; }
.ds .sec-head h2 { font-size: clamp(28px, 3.2vw, 42px); letter-spacing: normal; }
.ds .sec-head p { margin: 0; color: var(--ink-2); font-size: 17px; max-width: 46ch; }
@media (max-width: 820px) { .ds .sec-head { grid-template-columns: 1fr; gap: 12px; } }
.ds .panel { background: var(--soft); border-radius: 14px; padding: clamp(16px, 3vw, 36px); position: relative; }
.ds .panel + .panel { margin-top: 16px; }
.ds .card { background: #fff; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 28px rgba(0,0,0,.07); }
.ds .lbl { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #9b9890; }
.ds .compare .lbl { position: absolute; top: 12px; font-size: 12px; letter-spacing: .06em; color: #fff; padding: 4px 8px; z-index: 2; }
.ds .compare .lbl.l { left: 12px; background: rgba(22,24,29,.85); }
.ds .compare .lbl.r { right: 12px; background: var(--red); }
.ds .cap { font-size: 14px; color: var(--muted); margin: 14px 0 0; }
.ds .canvas { background-color: #efece5; background-image: radial-gradient(#d9d4c8 1px, transparent 1px); background-size: 18px 18px; }
.ds .frame-name { display: inline-flex; gap: 6px; font-size: 11px; font-weight: 700; color: #6c6a63; margin-bottom: 8px; }
.ds .frame-name::before { content: "#"; color: #a3a097; }
.ds .redlines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; }
.ds .redlines path { fill: none; stroke: var(--red); stroke-width: 1.3; }
.ds .redlines circle { fill: var(--red); }
.ds .note-tag { font-family: var(--mono); font-size: 11px; color: var(--red); background: #fff; border: 1px solid var(--red); border-radius: 4px; padding: 3px 7px; width: max-content; max-width: 100%; position: relative; z-index: 4; }

/* ---------- hero board ---------- */
.board { margin-top: 40px; border-radius: 16px; padding: clamp(18px, 3vw, 40px); display: grid; grid-template-columns: 1fr 1.1fr 1.2fr; gap: clamp(16px, 2.4vw, 32px); align-items: start; position: relative; }
.ramps { display: grid; gap: 6px; }
.ramp { display: grid; grid-template-columns: repeat(11, 1fr); height: 26px; border-radius: 6px; overflow: hidden; }
.ramp-name { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: #8b8981; margin-top: 2px; }
.fnd { padding: 16px; display: grid; gap: 14px; }
.typ { display: flex; gap: 12px; align-items: center; }
.typ b { font-family: var(--display); font-weight: 500; font-size: 44px; line-height: 1; }
.typ p { margin: 0; line-height: 1.3; font-size: 12px; color: #55535a; }
.typ p strong { display: block; font-family: var(--display); font-weight: 500; font-size: 16px; color: var(--ink); }
.cmp { padding: 16px; display: grid; gap: 12px; }
.cmp img { display: block; height: auto; }
.cmp .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pattern { display: grid; grid-template-columns: 1fr 0.9fr; gap: 14px; align-items: center; }
.pc { position: relative; }
.pc img { width: 100%; display: block; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 28px rgba(0,0,0,.08); }
.pc .a { position: absolute; width: 1px; height: 1px; }
.notes { list-style: none; margin: 0; padding: 0 !important; display: flex; flex-direction: column; gap: 22px; }
.notes li { margin: 0; }
@media (max-width: 980px) { .board { grid-template-columns: 1fr 1fr; } .board > :last-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .board { grid-template-columns: 1fr; } .pattern { grid-template-columns: 1fr; } .board .redlines { display: none; } .notes { flex-direction: row; flex-wrap: wrap; gap: 6px; } }

.nums { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); margin-top: 32px; }
.nums div { padding: 16px 16px 0 0; }
.nums b { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(30px, 3.2vw, 44px); letter-spacing: normal; line-height: 1; }
.nums span { display: block; font-size: 15px; color: var(--ink-2); margin-top: 8px; }
@media (max-width: 760px) { .nums { grid-template-columns: 1fr 1fr; } }

/* ---------- problem: dropdowns ---------- */
.ddc { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(16px, 3vw, 40px); align-items: center; }
.ddc .grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.ddc .cell { padding: 14px; }
.ddc .cell small { display: block; font-size: 11px; color: var(--muted); margin-top: 8px; }
.ddc .after .lbl { color: var(--red); }
.arrow { font-size: 28px; color: var(--red); font-weight: 700; }
.d1 { background: #eceef1; padding: 6px 8px; font-size: 11px; display: flex; justify-content: space-between; color: #333; }
.d2 { border-bottom: 2px solid #222; padding: 4px 0; font-size: 13px; font-weight: 700; display: flex; justify-content: space-between; }
.d3 { border: 1px dashed #7b6cff; border-radius: 14px; padding: 6px 12px; font-size: 12px; color: #4a3fcf; display: flex; justify-content: space-between; }
.d4 { border: 2px solid #2f6fe4; border-radius: 999px; padding: 5px 12px; font-size: 12px; color: #2f6fe4; display: flex; gap: 6px; }
.dn { border: 1px solid #CECECE; border-radius: 8px; padding: 7px 10px; font-size: 12px; display: flex; justify-content: space-between; background: #fff; color: #383838; }
.dn em { font-style: normal; color: #757575; }
@media (max-width: 760px) { .ddc { grid-template-columns: 1fr; } .ddc .arrow { transform: rotate(90deg); justify-self: center; } }

/* ---------- approach ---------- */
.steps7 { list-style: none; margin: 0; padding: 0 !important; display: grid; grid-template-columns: repeat(7, 1fr); position: relative; counter-reset: s; }
.steps7::before { content: ""; position: absolute; left: 12px; right: 12px; top: 12px; height: 2px; background: #d9d5cb; }
.steps7 li { counter-increment: s; position: relative; padding-right: 12px; margin: 0; font-size: 14px; color: var(--ink-2); }
.steps7 li::before { content: counter(s); position: relative; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; margin-bottom: 14px; }
.steps7 li.key::before { background: var(--red); }
.steps7 strong { display: block; color: var(--ink); font-family: var(--display); font-weight: 500; font-size: 17px; margin-bottom: 4px; line-height: 1.2; }
@media (max-width: 900px) {
  .steps7 { grid-template-columns: 1fr; gap: 16px; }
  .steps7::before { right: auto; bottom: 12px; width: 2px; height: auto; }
  .steps7 li { display: grid; grid-template-columns: 40px 1fr; padding: 0; }
  .steps7 li::before { margin: 0; grid-row: span 2; }
}

/* ---------- challenges ---------- */
.chal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.chal > div { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.chal .n { font-family: var(--display); font-size: 13px; color: var(--muted); }
.chal b { font-family: var(--display); font-weight: 500; font-size: 18px; line-height: 1.2; }
.chal p { margin: 0; font-size: 14px; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 10px; }
.chal p::before { content: "What we did"; display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--red); margin-bottom: 4px; }
@media (max-width: 1000px) { .chal { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .chal { grid-template-columns: 1fr; } }
.ladder-wrap { display: grid; grid-template-columns: 1fr 2.2fr; gap: clamp(20px, 4vw, 56px); align-items: end; }
.pull { font-family: var(--display); font-weight: 500; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: normal; margin: 0; }
.pull::before { content: ""; display: block; width: 32px; height: 3px; background: var(--red); margin-bottom: 14px; }
.pull small { display: block; font-family: var(--text); font-size: 14px; color: var(--muted); font-weight: 400; margin-top: 10px; letter-spacing: 0; }
.ladder { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; }
.ladder .bar { width: 28px; background: #8d8a83; border-radius: 4px 4px 0 0; }
.ladder div:nth-child(1) .bar { background: #d3cfc5; }
.ladder div:nth-child(2) .bar { background: #b3afa6; }
.ladder div:last-child .bar { background: var(--red); }
.ladder b { font-family: var(--display); font-weight: 500; font-size: 15px; line-height: 1.2; margin-top: 10px; display: block; }
.ladder span { font-size: 13px; color: var(--ink-2); }
@media (max-width: 900px) { .ladder-wrap { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .ladder { grid-template-columns: repeat(3, 1fr); row-gap: 24px; } }

/* ---------- visual direction ---------- */
.brief3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.brief3 > div { padding: 18px; }
.brief3 h4 { font-family: var(--text); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
.brief3 p { margin: 0; font-size: 15px; }
.ds .insp { width: 100%; border-radius: 8px; display: block; }
@media (max-width: 760px) { .brief3 { grid-template-columns: 1fr; } }

/* ---------- tokens: live state demo ---------- */
.tk { display: grid; grid-template-columns: 0.9fr 1.3fr; gap: clamp(20px, 4vw, 48px); align-items: center; }
.tk-demo { padding: 24px; display: grid; gap: 18px; justify-items: start; }
.seg { display: inline-flex; background: #f2f2f2; border-radius: 8px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { appearance: none; border: 0; background: none; font-size: 13px; padding: 6px 12px; border-radius: 6px; cursor: pointer; color: #545454; }
.seg button[aria-pressed="true"] { background: #fff; color: #212121; box-shadow: 0 1px 2px rgba(0,0,0,.1); font-weight: 600; }
.fc-btn { border-radius: 8px; padding: 12px 22px; color: #fff; font-weight: 600; font-size: 15px; background: #4630D2; transition: background .25s; display: inline-flex; }
.chainline { font-family: var(--mono); font-size: 13px; line-height: 1.8; }
.chainline .p { color: var(--red); }
.ramp-big { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; margin-top: 10px; }
.ramp-big div { display: grid; gap: 6px; }
.ramp-big i { height: 56px; border-radius: 6px; transition: transform .2s, box-shadow .2s; }
.ramp-big span { font-family: var(--mono); font-size: 10px; color: #8b8981; text-align: center; line-height: 1.3; word-break: break-all; }
.ramp-big span b { display: block; color: var(--ink); font-weight: 600; }
.ramp-big .on i { transform: translateY(-6px); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--red); }
.ramp-big .on span b { color: var(--red); }
.cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.cats span { font-size: 13px; padding: 4px 10px; border-radius: 6px; background: #fff; border: 1px solid var(--line); }
.cats span.on { border-color: var(--red); color: var(--red); }
@media (max-width: 860px) { .tk { grid-template-columns: 1fr; } .ramp-big span { font-size: 8px; } .ramp-big i { height: 40px; } }

/* ---------- components ---------- */
.levels { display: grid; grid-template-columns: 0.9fr 1.2fr 0.8fr; gap: 16px; align-items: stretch; }
.levels > div { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.levels h4 { font-family: var(--display); font-weight: 500; font-size: 18px; margin: 2px 0 4px; }
.levels img { display: block; height: auto; max-width: 100%; }
.levels .stack { display: grid; gap: 10px; justify-items: start; }
@media (max-width: 860px) { .levels { grid-template-columns: 1fr; } }

/* ---------- impact ---------- */
.imp { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(20px, 4vw, 48px); align-items: center; }
.dots { display: grid; grid-template-columns: repeat(25, 1fr); gap: 3px; max-width: 360px; }
.dots i { aspect-ratio: 1; border-radius: 2px; background: var(--red); opacity: .85; transition: background .6s; }
.dots.done i { background: #d6d2c8; }
.dots.done i:last-child { background: var(--red); }
.imp-list { list-style: none; margin: 22px 0 0; padding: 0 !important; display: grid; }
.imp-list li { margin: 0; display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid #ddd9cf; font-size: 15px; color: var(--ink-2); align-items: baseline; }
.imp-list b { font-family: var(--display); font-weight: 500; font-size: 20px; color: var(--ink); line-height: 1.1; }
@media (max-width: 860px) { .imp { grid-template-columns: 1fr; } }

/* ---------- learnings ---------- */
.lessons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lessons div { border-top: 2px solid var(--ink); padding-top: 14px; }
.lessons b { display: block; font-family: var(--display); font-weight: 500; font-size: 20px; line-height: 1.25; margin-bottom: 6px; }
.lessons p { margin: 0; color: var(--ink-2); font-size: 15px; }
@media (max-width: 760px) { .lessons { grid-template-columns: 1fr; } }
/* ---------- workshop board, value map, decisions, timeline ---------- */
.wb { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.wb > div { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.wb h4 { font-family: var(--display); font-weight: 500; font-size: 15px; line-height: 1.2; margin: 0 0 2px; }
.wb span { font-size: 12.5px; line-height: 1.3; background: #fde3ec; border-radius: 3px; padding: 6px 8px; color: #3a2a30; }
.wb span.ok { background: #d5f3ef; color: #20403c; }
@media (max-width: 1000px) { .wb { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .wb { grid-template-columns: 1fr 1fr; } }
.vm { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.vm > div { padding: 16px; }
.vm h4 { font-family: var(--text); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--red); margin: 0 0 8px; }
.vm ul { list-style: none; margin: 0; padding: 0 !important; display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.vm li { margin: 0; }
@media (max-width: 900px) { .vm { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .vm { grid-template-columns: 1fr; } }
.dec { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dec > div { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.dec b { font-family: var(--display); font-weight: 500; font-size: 17px; line-height: 1.2; }
.dec p { margin: 0; font-size: 14px; color: var(--ink-2); }
.dec .demo { height: 54px; display: flex; align-items: center; gap: 10px; }
.dec .sq { width: 44px; height: 32px; border: 1px solid #b3b3b3; background: #f2f2f2; }
.dec .rd { width: 44px; height: 32px; border: 1px solid #cecece; background: #fff; border-radius: 8px; }
.dec .sp { display: flex; align-items: end; gap: 4px; }
.dec .sp i { width: 8px; background: var(--fc); border-radius: 2px; }
.dec .srch { flex: 1; border: 1px solid #cecece; border-radius: 8px; padding: 8px 10px; font-size: 13px; color: #757575; background: #fff; }
.dec .chip { font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid #cecece; background: #fff; color: #545454; }
.dec .chip.on { background: var(--fc-soft); border-color: var(--fc); color: var(--fc); font-weight: 600; }
.dec .x { color: var(--muted); font-size: 18px; }
@media (max-width: 900px) { .dec { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .dec { grid-template-columns: 1fr; } }
.fb { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(20px, 4vw, 48px); }
.fb q { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(20px, 2vw, 26px); line-height: 1.2; letter-spacing: normal; quotes: "\201C" "\201D"; }
.fb .qs { display: grid; gap: 18px; }
.fb small { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; }
.fb ul { margin: 10px 0 0; padding-left: 18px; font-size: 14px; color: var(--ink-2); display: grid; gap: 6px; }
@media (max-width: 860px) { .fb { grid-template-columns: 1fr; } }
.tl { list-style: none; margin: 0 0 28px; padding: 0 !important; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 2px solid var(--ink); }
.tl li { margin: 0; padding: 12px 14px 0 0; font-size: 14px; color: var(--ink-2); position: relative; }
.tl li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }
.tl li:last-child::before { background: var(--red); }
.tl b { display: block; font-family: var(--display); font-weight: 500; font-size: 16px; color: var(--ink); }
@media (max-width: 760px) { .tl { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid var(--ink); padding-left: 16px !important; gap: 14px; } .tl li { padding: 0; } .tl li::before { left: -23px; top: 3px; } }
.est { display: grid; grid-template-columns: repeat(2, minmax(0, 320px)); gap: 12px; margin-top: 22px; }
.est > div { padding: 14px 16px; }
.est b { display: block; font-family: var(--display); font-weight: 500; font-size: 22px; letter-spacing: normal; margin: 4px 0 2px; }
.est p { margin: 0; font-size: 13.5px; color: var(--ink-2); }
@media (max-width: 520px) { .est { grid-template-columns: 1fr; } }
/* ---------- build or buy ---------- */
.lib { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.lib > div { padding: 16px; display: flex; flex-direction: column; gap: 8px; position: relative; }
.lib b { font-family: var(--display); font-weight: 500; font-size: 18px; }
.lib ul { list-style: none; margin: 0; padding: 0 !important; display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.lib li { margin: 0; display: grid; grid-template-columns: 18px 1fr; gap: 6px; }
.lib li::before { content: "✕"; color: var(--muted); font-size: 12px; line-height: 1.6; }
.lib li.y::before { content: "✓"; color: #009B5A; font-weight: 700; }
.lib li.q::before { content: "?"; color: #b87a00; font-weight: 700; }
.lib .pick { outline: 0; }
.lib .ring { position: absolute; inset: -14px -12px; width: calc(100% + 24px); height: calc(100% + 28px); pointer-events: none; overflow: visible; }
.lib .ring path { fill: none; stroke: var(--red); stroke-width: 2.2; stroke-linecap: round; }
.lib .tag { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--red); padding: 3px 7px; border-radius: 4px; margin-top: auto; }
@media (max-width: 900px) { .lib { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (max-width: 520px) { .lib { grid-template-columns: 1fr; } }

/* ---------- token anatomy ---------- */
.anat { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2px; font-family: var(--mono); font-size: 14px; }
.anat span { display: flex; flex-direction: column; }
.anat code { font-family: inherit; border-bottom: 2px solid var(--ink); padding-bottom: 3px; }
.anat small { font-family: var(--text); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }
.anat .st code { border-color: var(--red); color: var(--red); }
.anat i { font-style: normal; color: var(--muted); }
.chainline .f { color: var(--muted); font-size: 12px; }

/* ---------- before / after showcase ---------- */
.ba-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ds .showcase .compare { margin-top: 0; }
.imp2 { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 48px); align-items: start; }
.imp2 .est { grid-template-columns: 1fr 1fr; margin-top: 12px; }
@media (max-width: 860px) { .imp2 { grid-template-columns: 1fr; } }
/* ---------- impact quotes ---------- */
.voices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.voices figure { margin: 0; padding: 20px 18px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.voices blockquote { margin: 0; font-family: var(--display); font-weight: 500; font-size: 18px; line-height: 1.3; letter-spacing: normal; }
.voices blockquote::before { content: ""; display: block; width: 24px; height: 3px; background: var(--red); margin-bottom: 14px; }
.voices figcaption { font-size: 13px; color: var(--muted); }
@media (max-width: 1000px) { .voices { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .voices { grid-template-columns: 1fr; } }
/* ---------- overview ---------- */
.ov { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; margin-bottom: 16px; }
.ov .panel + .panel { margin-top: 0; }
.ds .ov-ch { background: var(--ink); color: #fff; }
.ov-ch .lbl { color: #ff8a73; }
.ov-ch .big { font-family: var(--display); font-weight: 500; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.2; letter-spacing: normal; margin: 12px 0 14px; }
.ov-ch p:not(.big) { margin: 0; color: #c9c6be; font-size: 15px; }
.did { margin: 12px 0 0; padding: 0 !important; list-style: none; counter-reset: d; display: grid; gap: 10px; }
.did li { counter-increment: d; margin: 0; display: grid; grid-template-columns: 28px 1fr; font-size: 15px; color: var(--ink-2); }
.did li::before { content: counter(d, decimal-leading-zero); font-family: var(--display); color: var(--red); font-size: 13px; padding-top: 2px; }
@media (max-width: 860px) { .ov { grid-template-columns: 1fr; } }
.proc { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 18px; border-left: 1px solid #ddd9cf; }
.proc > div { padding: 0 16px; border-right: 1px solid #ddd9cf; display: flex; flex-direction: column; }
.proc .ph { font-family: var(--display); font-weight: 500; font-size: 20px; }
.proc .when { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.proc .col { height: 140px; display: flex; align-items: flex-end; border-bottom: 1px solid var(--ink); }
.proc .col i { display: block; width: 100%; height: 0; background: #b9b5ab; border-radius: 4px 4px 0 0; transition: height .9s cubic-bezier(.2,.7,.2,1); }
.proc.in .col i { height: var(--h); }
.proc > div:nth-child(2) .col i { transition-delay: .1s; } .proc > div:nth-child(3) .col i { transition-delay: .2s; } .proc > div:nth-child(4) .col i { transition-delay: .3s; } .proc > div:nth-child(5) .col i { transition-delay: .4s; }
.proc .now .col i { background: var(--red); }
.proc b { font-size: 14px; margin: 10px 0 6px; }
.proc ul { list-style: none; margin: 0; padding: 0 !important; font-size: 13.5px; color: var(--ink-2); display: grid; gap: 4px; }
.proc li { margin: 0; }
@media (max-width: 860px) {
  .proc { grid-template-columns: 1fr; border-left: 0; gap: 18px; }
  .proc > div { border-right: 0; display: grid; grid-template-columns: 110px 1fr; column-gap: 14px; padding: 0; }
  .proc .ph, .proc .when { grid-column: 1; } .proc .col { grid-column: 2; grid-row: 1 / span 2; height: 22px; border-bottom: 0; border-left: 1px solid var(--ink); }
  .proc .col i { height: 100% !important; width: 0; border-radius: 0 4px 4px 0; transition: width .9s; } .proc.in .col i { width: var(--h); }
  .proc b, .proc ul { grid-column: 2; }
}

/* ---------- problem: button library ---------- */
.btns { display: grid; grid-template-columns: 1fr 0.8fr 1fr; gap: 20px; align-items: start; }
.btns figure { margin: 0; }
.btns .shot { margin-top: 10px; padding: 10px; }
.btns .shot img { width: 100%; display: block; border-radius: 4px; }
.btns figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.btns figcaption b { font-family: var(--display); font-weight: 500; font-size: 26px; color: var(--ink); margin-right: 4px; }
.btns .after .lbl, .btns .after figcaption b { color: var(--red); }
.found { display: grid; gap: 10px; align-content: start; }
.found .card { padding: 14px 16px; }
.found b { font-family: var(--display); font-weight: 500; font-size: 16px; }
.found p { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-2); }
.found code { font-family: var(--mono); font-size: 12px; background: var(--soft); padding: 1px 4px; border-radius: 3px; }
@media (max-width: 900px) { .btns { grid-template-columns: 1fr 1fr; } .found { grid-column: 1 / -1; } }
@media (max-width: 520px) { .btns { grid-template-columns: 1fr; } }

/* ---------- the turn ---------- */
.cost { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.cost > div { border-top: 2px solid var(--red); padding-top: 12px; }
.cost b { font-family: var(--display); font-weight: 500; font-size: 17px; }
.cost p { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }
@media (max-width: 820px) { .cost { grid-template-columns: 1fr 1fr; } }
.plans { display: grid; gap: 26px; }
.flow { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.flow span { position: relative; flex: 1 1 140px; background: #fff; border-radius: 8px; padding: 12px 14px; font-size: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.plan.old .flow span { background: transparent; border: 1px dashed #b9b5ab; color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.35); box-shadow: none; }
.plan.new .flow span { border-left: 3px solid var(--red); }
.flow em { display: block; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--red); margin-bottom: 4px; }
.flow small { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.why { margin: 10px 0 0; font-size: 14px; color: var(--ink-2); }
.plan.old .why { color: var(--red); }

/* ---------- buy-in: the ask ---------- */
.ask-wrap { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(20px, 4vw, 56px); align-items: center; }
.ask { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ask div { border-top: 1px solid var(--ink); padding-top: 10px; }
.ask b { display: block; font-family: var(--display); font-weight: 500; font-size: 44px; line-height: 1; letter-spacing: normal; }
.ask span { display: block; font-size: 14px; color: var(--ink-2); margin-top: 8px; }
@media (max-width: 900px) { .ask-wrap { grid-template-columns: 1fr; } .ask { grid-template-columns: 1fr 1fr; } }

/* ---------- foundations extras ---------- */
.pipe { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 14px; }
.pipe span { position: relative; font-family: var(--mono); font-size: 13px; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; }
.pipe span:not(:last-child)::after { content: "→"; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); color: var(--red); font-family: var(--text); }
.pipe span.on { border-color: var(--red); color: var(--red); }
.ds h3.sub { font-family: var(--display); font-weight: 500; font-size: 22px; letter-spacing: normal; margin: 0; }
.sub-p { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; }

/* ---------- impact + learnings extras ---------- */
.rev { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline; margin-top: 18px; padding-top: 14px; border-top: 1px solid #ddd9cf; }
.rev p { margin: 0; font-size: 14px; color: var(--muted); }
.rev q { font-family: var(--display); font-weight: 500; font-size: 18px; color: var(--ink); margin-right: 6px; }
.open { margin-top: 28px; background: var(--soft); border-radius: 14px; padding: 18px 22px; }
.open ul { margin: 8px 0 0; padding-left: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; font-size: 15px; color: var(--ink-2); }
@media (max-width: 700px) { .open ul { grid-template-columns: 1fr; } }
/* ---------- story navigation ---------- */
.rail { list-style: none; margin: 0 0 14px; padding: 0 !important; display: flex; gap: 6px; max-width: 440px; }
.rail li { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #b3afa6; padding-top: 6px; border-top: 3px solid #e2ded5; flex: 1; }
@media (max-width: 420px) { .rail li { font-size: 9px; letter-spacing: .03em; } }
.rail li.on { color: var(--red); border-color: var(--red); }
.ds h3.step { color: var(--ink); display: flex; align-items: baseline; gap: 12px; font-family: var(--display); font-weight: 500; font-size: 20px; letter-spacing: normal; margin: 40px 0 14px; }
.ds .sec-head + h3.step { margin-top: 8px; }
.ds h3.step b { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--red); }
.did li a { display: block; font-weight: 700; color: var(--ink); text-decoration: none; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.did li a:hover { color: var(--red); }
.did li { grid-template-rows: auto auto; }
.did li::before { grid-row: span 2; }
.proc a.ph { color: var(--ink); text-decoration: none; }
.proc a.ph:hover { color: var(--red); }
html { scroll-behavior: auto; }
.ds .sec[id] { scroll-margin-top: 24px; }
.ds .ov-ch { display: flex; flex-direction: column; }
.ch-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: auto; padding-top: 24px; }
.ch-nums div { border-top: 1px solid #3a3d44; padding-top: 10px; }
.ch-nums b { display: block; font-family: var(--display); font-weight: 500; font-size: 32px; letter-spacing: normal; color: #fff; }
.ch-nums span { font-size: 13px; color: #9d9a92; }
.more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 12px; }
.more figure { margin: 0; }
.more .shot { padding: 0; overflow: hidden; aspect-ratio: 3 / 2; }
.more .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.more figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.more figcaption b { display: block; font-family: var(--display); font-weight: 500; font-size: 17px; color: var(--ink); }
@media (max-width: 820px) { .more { grid-template-columns: 1fr; } }

/* =====================================================================
   v2 additions used by UKTV and Bwin (same rhythm as the design system page)
   ===================================================================== */
.ds .sec-head h2 { font-size: clamp(30px, 3.6vw, 48px); letter-spacing: normal; }
.ds .panel { border-radius: var(--r); }
.ds .panel.stage { background-color: var(--stage); }
.two-up { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(16px, 3vw, 36px); align-items: center; }
.two-up.even { grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .two-up, .two-up.even { grid-template-columns: 1fr; } }
.shot-card { background: #fff; border-radius: 12px; padding: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 12px 30px rgba(0,0,0,.08); }
.shot-card img { width: 100%; display: block; border-radius: 6px; cursor: zoom-in; }

/* who was in the room */
.room { list-style: none; margin: 10px 0 0; padding: 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.room li { margin: 0; background: #fff; border-radius: 10px; padding: 10px 12px; font-size: 15px; font-weight: 600; display: flex; gap: 10px; align-items: center; }
.room li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; }
.big-quote { font-family: var(--display); font-weight: 500; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.2; letter-spacing: normal; margin: 0; }
.big-quote::before { content: ""; display: block; width: 32px; height: 3px; background: var(--red); margin-bottom: 16px; }
.big-quote small { display: block; font-family: var(--text); font-size: 14px; color: var(--muted); font-weight: 400; letter-spacing: 0; margin-top: 12px; }

/* learned → did cards */
.fx { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.fx > a { background: #fff; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: transform .25s var(--ease), box-shadow .25s; }
.fx > a:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 14px 30px rgba(0,0,0,.09); color: inherit; }
.fx .k { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.fx .k.r { color: var(--red); }
.fx p { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.fx p.f { font-family: var(--display); font-weight: 500; font-size: 17px; color: var(--ink); line-height: 1.25; }
.fx .see { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--red); }
@media (max-width: 1100px) { .fx { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .fx { grid-template-columns: 1fr; } }

/* problem → fix */
.fix { display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); gap: 12px; }
.fix > div { background: #fff; border-radius: 12px; padding: 18px; display: grid; gap: 12px; align-content: start; }
.fix .pr { font-family: var(--display); font-weight: 500; font-size: 19px; line-height: 1.2; }
.fix .pr::before { content: "Problem"; display: block; font-family: var(--text); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.fix .so { margin: 0; font-size: 15px; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 12px; }
.fix .so::before { content: "Fix"; display: block; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--red); margin-bottom: 4px; }
@media (max-width: 760px) { .fix { grid-template-columns: 1fr; } }

/* trade-offs */
.trade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.trade > div { background: #fff; border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.trade .n { font-family: var(--mono); font-size: 12px; color: var(--red); font-weight: 600; }
.trade b { font-family: var(--display); font-weight: 500; font-size: 19px; line-height: 1.2; }
.trade p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.trade .c { margin-top: auto; padding-top: 10px; border-top: 1px dashed #d6d2c8; font-size: 13.5px; }
.trade .c::before { content: "The cost  "; font-weight: 700; color: var(--ink); }
@media (max-width: 1000px) { .trade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .trade { grid-template-columns: 1fr; } }

/* persona journey (Francis) */
.fj { background: #fff; border-radius: 14px; padding: clamp(18px, 3vw, 32px); }
.fj-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.fj-av { width: 56px; height: 56px; border-radius: 50%; background: url("../assets/uktv/journey-explorer.webp") no-repeat; background-size: 1420px auto; background-position: -14px -33px; flex: none; }
.fj-head h4 { font-family: var(--display); font-weight: 500; font-size: 22px; margin: 0; }
.fj-head p { margin: 0; font-size: 15px; color: var(--ink-2); }
.fj-head a { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--ink); }
.fj svg { width: 100%; height: auto; display: block; margin-top: 18px; overflow: visible; }
.fj-lows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.fj-lows > div { border-top: 2px solid var(--red); padding-top: 10px; }
.fj-lows q { display: block; font-family: var(--display); font-weight: 500; font-size: 17px; line-height: 1.25; quotes: "\201C" "\201D"; }
.fj-lows span { display: block; font-size: 14px; color: var(--ink-2); margin-top: 6px; }
.fj-lows span b { color: var(--ink); }
@media (max-width: 760px) { .fj-lows { grid-template-columns: 1fr; } .fj-head a { margin-left: 0; } }

/* personas (Bwin) */
.pers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.per { background: #fff; border-radius: 14px; overflow: hidden; display: grid; grid-template-columns: 0.75fr 1fr; }
.per .ph { min-height: 100%; background-repeat: no-repeat; background-size: auto 100%; background-position: 0 0; aspect-ratio: 3 / 4.4; }
.per .tx { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.per h4 { font-family: var(--display); font-weight: 500; font-size: 22px; margin: 0; }
.per h4 small { display: block; font-family: var(--text); font-size: 14px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.per q { font-family: var(--display); font-weight: 500; font-size: 17px; line-height: 1.3; quotes: "\201C" "\201D"; }
.per dl { margin: 0; display: grid; gap: 10px; font-size: 14px; }
.per dt { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.per dd { margin: 2px 0 0; color: var(--ink-2); }
.per dt.r { color: var(--red); }
@media (max-width: 900px) { .pers { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .per { grid-template-columns: 1fr; } .per .ph { aspect-ratio: 4 / 3; background-size: 220% auto; background-position: 0 30%; } }

/* rules / patterns */
.rules { list-style: none; margin: 0; padding: 0 !important; counter-reset: r; display: grid; gap: 0; }
.rules li { counter-increment: r; margin: 0; display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 12px 0; border-top: 1px solid #ddd9cf; font-size: 16px; color: var(--ink); }
.rules li:first-child { border-top: 0; }
.rules li::before { content: counter(r); width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; margin-top: 1px; }
.rules li.key::before { background: var(--red); }

/* screen gallery */
.screens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.screens figure { margin: 0; }
.screens .stage { aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 18px; }
.screens .stage img { max-height: 100%; width: auto; max-width: 100%; }
.screens figcaption { margin-top: 12px; font-size: 14px; color: var(--ink-2); }
.screens figcaption b { display: block; font-family: var(--display); font-weight: 500; font-size: 18px; color: var(--ink); margin-bottom: 2px; }
@media (max-width: 900px) { .screens { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .screens { grid-template-columns: 1fr; } }
.ds .anno-notes { margin-top: 20px; }
.ds .anno + .anno { margin-top: 56px; }
.ds .anno-head { margin-bottom: 14px; }
.ds .anno-head h3 { font-size: 22px; }
.honest { display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-size: 14.5px; color: var(--ink-2); margin-top: 20px; padding-top: 14px; border-top: 1px solid #ddd9cf; }
.honest::before { content: "!"; width: 22px; height: 22px; border-radius: 50%; background: var(--red); color: #fff; font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.honest p { margin: 0; }
.honest a { color: var(--ink-2); }
.ds .tt { border: 0; border-radius: 12px; }
.ds .journey-card { border: 0; border-radius: 12px; }
.ukb { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(16px, 3vw, 36px); align-items: start; }
.ukb .card img { width: 100%; display: block; border-radius: 6px; cursor: zoom-in; }
.pal { padding: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 12px; }
.pal i { display: block; height: 44px; border-radius: 6px; margin-bottom: 8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.pal b { display: block; font-size: 13px; font-weight: 700; }
.pal code { font-family: var(--mono); font-size: 11px; color: var(--muted); }
@media (max-width: 760px) { .ukb { grid-template-columns: 1fr; } }
.screens .stage { display: flex; align-items: center; justify-content: center; }
.screens .stage img { max-height: 100%; max-width: 100%; width: auto; height: auto; }
/* flat screens: sharp exports, soft corners, no device bezels */
.scr img, img.scr { border-radius: 10px; box-shadow: 0 1px 2px rgba(22,24,29,.10), 0 24px 48px -18px rgba(22,24,29,.40); }
.stage .anno-stage.scr img { filter: none; }
.screens .stage { aspect-ratio: 16 / 10.5; padding: 22px; }
/* final designs: big showcases */
.show { margin: 0 0 32px; }
.show .stage { padding: clamp(20px, 4vw, 56px); display: flex; align-items: center; justify-content: center; }
.show .stage img { width: 100%; max-width: 1060px; cursor: zoom-in; }
.show figcaption { display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: 6px 24px; margin-top: 14px; font-size: 15px; color: var(--ink-2); max-width: 900px; }
.show figcaption b { font-family: var(--display); font-weight: 500; font-size: 20px; color: var(--ink); letter-spacing: normal; }
.show-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.show-2 .show .stage { padding: clamp(16px, 2.4vw, 32px); aspect-ratio: 16 / 11; }
.show-2 .show .stage img { max-height: 100%; width: auto; max-width: 100%; }
.show-2 .show figcaption { grid-template-columns: 1fr; }
@media (max-width: 760px) { .show-2 { grid-template-columns: 1fr; } .show figcaption { grid-template-columns: 1fr; } }

/* ---------- process chart: four phases, each links to its sections ---------- */
.proc4 { list-style: none; margin: 0; padding: 0 !important; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 32px); position: relative; }
.proc4::before, .proc4::after { content: ""; position: absolute; left: 15px; right: 15px; top: 15px; height: 2px; background: var(--line); }
.proc4::after { background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.6s cubic-bezier(.65, 0, .35, 1) .2s; }
.proc4.in::after { transform: scaleX(1); }
.proc4 { grid-template-rows: auto auto auto; row-gap: 14px; }
.proc4 > li { margin: 0; position: relative; display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 14px; align-items: start; }
.proc4 .ph { display: grid; gap: 12px; justify-items: start; text-decoration: none; color: inherit; }
.proc4 .n { width: 32px; height: 32px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); display: grid; place-items: center; font-size: 12px; font-weight: 700; position: relative; z-index: 1; transition: background .25s, color .25s, border-color .25s, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.proc4.in .n { border-color: var(--red); }
.proc4 b { font-family: var(--display); font-weight: 300; font-size: clamp(21px, 2vw, 26px); line-height: 1.15; display: flex; align-items: baseline; gap: 8px; transition: color .2s; }
.proc4 b::after { content: "→"; font-family: var(--text); font-size: 16px; color: var(--red); opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s; }
.proc4 .ph:hover .n, .proc4 .ph:focus-visible .n { background: var(--red); border-color: var(--red); color: #fff; transform: scale(1.12); }
.proc4 .ph:hover b, .proc4 .ph:focus-visible b { color: var(--red); }
.proc4 .ph:hover b::after, .proc4 .ph:focus-visible b::after { opacity: 1; transform: none; }
.proc4 ul { list-style: none; margin: 0; padding: 0 !important; display: grid; gap: 6px; font-size: 14.5px; color: var(--ink-2); line-height: 1.4; }
.proc4 ul li { margin: 0; padding-left: 14px; position: relative; }
.proc4 ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 2px; background: var(--muted); }
.proc4 .jumps { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.proc4 .jumps a { font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--ink); }
.proc4 .jumps a::before { content: "↓  "; color: var(--red); }
.proc4 .jumps a:hover { color: var(--red); }
.skipline { margin: 0; color: var(--ink-2); }
.skipline a { color: var(--ink); font-weight: 600; }
@media (max-width: 860px) {
  .proc4 { grid-template-columns: 1fr; grid-template-rows: none; gap: 28px; }
  .proc4 > li { grid-row: auto; grid-template-rows: none; }
  .proc4::before, .proc4::after { left: 15px; right: auto; top: 15px; bottom: 15px; width: 2px; height: auto; transform-origin: 50% 0; }
  .proc4::after { transform: scaleY(0); } .proc4.in::after { transform: scaleY(1); }
  .proc4 > li { padding-left: 48px; } .proc4 .n { position: absolute; left: 0; top: 0; } .proc4 .ph { min-height: 32px; align-content: center; }
}
@media (prefers-reduced-motion: reduce) { .proc4::after { transition: none; transform: none; } }

/* =====================================================================
   Case study template, shared by every case study page.
   Order: hero → Outcome → About + my role → 01 Problem (dark band) →
   Process → numbered stages (key stages use .sec.spot) → Learnings → Next.
   ===================================================================== */
body[data-glow="ds"]   { --spot-bg: #eef0ff; --spot-ink: #4630D2; }
body[data-glow="uktv"] { --spot-bg: #e6f3f1; --spot-ink: #0f6e66; }
body[data-glow="bwin"] { --spot-bg: #fff3c9; --spot-ink: #7a5a00; }
body[data-glow="sr"]   { --spot-bg: #e8f2ec; --spot-ink: #2f6b4f; }
body[data-glow="vocabelo"] { --spot-bg: #efe9ff; --spot-ink: #6d28d9; }

/* outcome, straight under the hero */
.cs .imp-top { padding-block: clamp(48px, 6vw, 80px) 0 !important; }
.cs .imp-lead { font-family: var(--display); font-weight: 300; font-size: clamp(20px, 2vw, 26px); line-height: 1.3; margin: 10px 0 22px; max-width: 42ch; color: var(--ink); }
.cs .imp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); margin-top: 14px; align-items: start; }
.cs .imp > div { border-top: 1px solid var(--ink); padding-top: 12px; }
.cs .imp b { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(30px, 3vw, 42px); letter-spacing: normal; line-height: 1; margin-bottom: 8px; }
.cs .imp .lead { border-top-color: var(--red); }
.cs .imp .lead b { color: var(--red); }
.cs .imp p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.cs .imp small { display: block; color: var(--muted); font-size: 14px; margin-top: 8px; }
.cs .src { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.cs .src a { color: var(--muted); }

/* about + my role */
.cs .scope { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(24px, 5vw, 72px); align-items: start; }
.cs .scope .big { font-family: var(--display); font-weight: 500; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.25; letter-spacing: normal; margin: 10px 0 0; }
.cs .scope .big em { font-style: normal; color: var(--red); }
.cs .role-list { list-style: none; margin: 12px 0 0; padding: 0 !important; display: grid; }
.cs .role-list li { margin: 0; padding: 10px 0 10px 20px; border-top: 1px solid var(--line); font-size: 16px; color: var(--ink-2); position: relative; }
.cs .role-list li:first-child { border-top: 0; padding-top: 0; }
.cs .role-list li::before { content: ""; position: absolute; left: 0; top: 19px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.cs .role-list li:first-child::before { top: 9px; }

/* 01 problem: a dark band with the challenges, optional evidence row under it */
.cs .prob-band { position: relative; background: #16181d; color: #fbfaf7; margin: clamp(100px, 10vw, 140px) calc(50% - 50vw) 0; padding: clamp(56px, 7vw, 100px) 0; }
.cs .prob-band .wave-top { color: #16181d; }
.cs .prob-band .before-head { margin-bottom: 0; }
.cs .prob-band .before-head p { color: #c9c6be; font-size: 17px; }
.cs .evid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); padding: clamp(28px, 3vw, 40px) max(var(--gutter, 24px), calc(50vw - 590px)) 0; }
.cs .evid figure { margin: 0; }
.cs .evid img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-radius: 10px; background: #22252b; }
.cs .evid figcaption { color: #c9c6be; font-size: 14.5px; margin-top: 10px; }
.cs .evid figcaption b { color: #fbfaf7; font-weight: 600; }

/* key stages: a full-width tinted band so the important parts stand out */
.cs .sec.spot { background: var(--spot-bg, var(--soft)); margin-inline: calc(50% - 50vw); padding-inline: max(var(--gutter, 24px), calc(50vw - 590px)); padding-block: clamp(64px, 8vw, 112px) !important; }
.cs .sec.spot + .sec { padding-top: clamp(72px, 9vw, 120px); }
.cs .sec.spot .sec-head h2 { font-size: clamp(34px, 4.2vw, 56px); }
.cs .sec.spot .feat { border-top-color: var(--ink); }

/* readability */
.ds .sec-head p { font-size: 18px; line-height: 1.6; }
.ds .cap { font-size: 14.5px; }
@media (max-width: 860px) {
  .cs .scope, .cs .imp, .cs .evid { grid-template-columns: 1fr; }
}
.cs .sec + .sec.spot { margin-top: clamp(56px, 7vw, 96px); }

/* process as cards: every phase gets a small picture of what happened in it */
.proc4.cards { grid-template-rows: auto auto auto auto; row-gap: 0; gap: clamp(12px, 1.6vw, 20px); }
.proc4.cards::before, .proc4.cards::after { display: none; }
.proc4.cards > li { grid-row: span 4; row-gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(22,24,29,.04), 0 10px 28px rgba(22,24,29,.06); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.proc4.cards > li:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(22,24,29,.05), 0 18px 40px rgba(22,24,29,.10); }
.proc4.cards .pv { position: relative; height: 132px; background: var(--spot-bg, var(--soft)); overflow: hidden; display: grid; place-items: center; padding: 14px; }
.proc4.cards .pv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.proc4.cards .pv .faces { display: flex; }
.proc4.cards .pv .faces img { position: static; width: 54px; height: 54px; border-radius: 50%; border: 3px solid #fff; margin-left: -10px; object-fit: cover; }
.proc4.cards .ph { padding: 16px 16px 0; }
.proc4.cards .n { width: 28px; height: 28px; background: var(--ink); color: #fff; border: 0; }
.proc4.cards.in .n { border: 0; }
.proc4.cards > li:hover .n { background: var(--red); }
.proc4.cards .ph:hover .n { transform: none; }
.proc4.cards b { font-size: clamp(19px, 1.6vw, 23px); }
.proc4.cards ul { padding: 10px 16px 0 !important; }
.proc4.cards .jumps { margin: 14px 16px 16px; }
/* small code-drawn pictures for the design system phases */
.pv .nts { display: grid; grid-template-columns: repeat(3, 34px); gap: 5px; transform: rotate(-3deg); }
.pv .nts i { height: 30px; border-radius: 3px; background: #fde3ec; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.pv .nts i.g { background: #d9f3ea; }
.pv .code { font-family: var(--mono); font-size: 11.5px; background: #16181d; color: #c9c6be; border-radius: 8px; padding: 10px 12px; line-height: 1.6; }
.pv .code s { color: #ff8a73; text-decoration: none; border-bottom: 1.5px wavy #ff8a73; }
.pv .libs { display: grid; gap: 5px; justify-items: start; }
.pv .libs span { font-size: 11.5px; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; color: var(--muted); }
.pv .libs span.on { border-color: var(--red); color: var(--red); font-weight: 700; }
.pv .okr { display: grid; justify-items: center; gap: 8px; }
.pv .okr b { font-family: var(--text); font-size: 12px; font-weight: 700; letter-spacing: .06em; background: var(--ink); color: #fff; border-radius: 6px; padding: 4px 9px; }
.pv .okr span { display: flex; }
.pv .okr span i { width: 26px; height: 26px; border-radius: 50%; background: #A0ABFF; border: 2px solid #fff; margin-left: -6px; }
.pv .okr span i:nth-child(2) { background: #7B7FFE; } .pv .okr span i:nth-child(3) { background: #4630D2; }
.pv .rb { display: grid; gap: 8px; justify-items: center; }
.pv .rb .rmp { display: grid; grid-template-columns: repeat(7, 14px); height: 14px; border-radius: 3px; overflow: hidden; }
.pv .rb .bt { font-size: 11px; font-weight: 600; color: #fff; background: #4630D2; border-radius: 5px; padding: 5px 10px; }
.pv .own2 { display: grid; gap: 6px; }
.pv .own2 span { font-size: 11.5px; background: #fff; border-radius: 6px; padding: 4px 9px; border: 1px solid var(--line); }
.pv .own2 b { font-family: var(--text); font-size: 11.5px; color: var(--fc, var(--ink)); }
@media (max-width: 1000px) { .proc4.cards, .ds .proc4.six.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .proc4.cards > li { grid-row: auto; grid-template-rows: none; padding-left: 0; }
  .proc4.cards .n { position: static; }
}
@media (max-width: 560px) { .proc4.cards, .ds .proc4.six.cards { grid-template-columns: 1fr; } }
.pv strong { font-weight: 700; }
.pv .okr strong { font-size: 12px; font-weight: 700; letter-spacing: .06em; background: var(--ink); color: #fff; border-radius: 6px; padding: 4px 9px; }
.pv .own2 strong { color: var(--fc, var(--ink)); }
.proc4.cards .pv > div { transform: scale(1.12); }

/* ---------- calmer rhythm for every case study ----------
   A coloured band already separates itself, so it doesn't also need a big
   outside margin, big inside padding and a big gap after it. */
.cs .sec { padding-top: clamp(48px, 6vw, 88px); }
.cs .sec.spot { padding-block: clamp(48px, 6vw, 80px) !important; }
.cs .sec + .sec.spot { margin-top: clamp(48px, 6vw, 80px); }
.cs .sec.spot + .sec { padding-top: clamp(48px, 6vw, 80px); }
.cs .prob-band { margin-top: clamp(80px, 8vw, 112px); padding-block: clamp(48px, 6vw, 80px); }
.cs .prob-band + .sec { padding-top: clamp(48px, 6vw, 80px); }
.cs .next.band { margin-top: clamp(88px, 9vw, 128px); padding-block: clamp(48px, 6vw, 80px); }