/* ---------- Fonts, hosted with the site (no calls to Google) ---------- */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/caveat-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/caveat-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Dora Farkas portfolio — "Clean desk"
   Calm, roomy layout with big bold type; the collage lives in a few places:
   an open-tab research board in the hero, sticky notes, Dovetail-style tags and handwritten notes. */

:root {
  --bg: #fbfaf6; --ink: #0f1a2b; --ink-soft: #4d5868; --card: #ffffff; --line: #e9e5dc;
  --accent: #ff5a1f; --lime: #d7ff5f; --on-lime: #0f1a2b;
  --panel: linear-gradient(135deg, #ffe4d2 0%, #fdf2c0 46%, #dbf4cf 100%);
  --shadow: 0 1px 2px rgba(15, 26, 43, 0.06), 0 18px 40px -22px rgba(15, 26, 43, 0.28);
  --btn-bg: #0f1a2b; --btn-ink: #ffffff; --logo-filter: brightness(0); --nav-bg: rgba(251, 250, 246, 0.86);
  --radius: 22px; --wrap: 1120px;
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "Caveat", "Bradley Hand", cursive;
}
[data-theme="dark"] {
  --bg: #0d1117; --ink: #f3f1ea; --ink-soft: #a9b1bd; --card: #161b22; --line: #2a313c;
  --panel: linear-gradient(135deg, #3b2315 0%, #33300f 46%, #17321c 100%);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 40px -22px rgba(0, 0, 0, 0.8);
  --btn-bg: #f3f1ea; --btn-ink: #0f1a2b; --logo-filter: brightness(0) invert(1); --nav-bg: rgba(13, 17, 23, 0.86);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background-color 0.25s ease, color 0.25s ease; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4, h5, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; text-wrap: balance; }
h1 { font-size: clamp(2.9rem, 7.2vw, 5.2rem); }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); letter-spacing: -0.025em; line-height: 1.15; }
h4 { letter-spacing: -0.01em; }
strong { font-weight: 700; }
em { font-style: normal; }
em, .hl, mark { background: linear-gradient(transparent 16%, var(--lime) 16% 90%, transparent 90%); color: var(--on-lime); padding: 0 0.14em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hl { font-weight: 700; }
.hand { font-family: var(--hand); font-weight: 700; line-height: 1.15; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.narrow { max-width: 720px; margin-inline: auto; }
.center { text-align: center; }
section { padding: clamp(48px, 7vw, 96px) 0; }
.lede { font-size: 1.15rem; color: var(--ink-soft); }
.section-head { margin-bottom: clamp(28px, 4vw, 48px); }
.eyebrow { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.footnote { font-size: 0.85rem; color: var(--ink-soft); margin-top: 28px; }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px clamp(16px, 4vw, 40px); background: var(--nav-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; letter-spacing: -0.01em; }
.mark { width: 34px; height: 34px; flex: none; }
.nav-links { display: flex; gap: 30px; }
.nav-links a { text-decoration: none; font-weight: 500; font-size: 0.97rem; }
.nav-links a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.nav-right { justify-self: end; display: flex; align-items: center; gap: 10px; }
.theme-toggle { width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; }
.theme-toggle svg { width: 18px; height: 18px; }
[data-theme="dark"] .theme-toggle .icon-moon, [data-theme="light"] .theme-toggle .icon-sun { display: none; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 14px; font: inherit; font-size: 0.97rem; font-weight: 600; text-decoration: none; cursor: pointer; background: var(--btn-bg); color: var(--btn-ink); border: 1px solid var(--btn-bg); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(15, 26, 43, 0.5); }
.btn-light { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- Dovetail-style tags ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips.center { justify-content: center; }
.chip, .tag { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 7px; font-size: 0.82rem; font-weight: 600; color: #0f1a2b; background: #e4ecff; }
.chip::before, .tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3d63dd; flex: none; }
.chip:nth-child(5n+2), .tag.alt { background: #ffe6d6; } .chip:nth-child(5n+2)::before, .tag.alt::before { background: #e4570f; }
.chip:nth-child(5n+3) { background: #ddf5cf; } .chip:nth-child(5n+3)::before { background: #3b8a1f; }
.chip:nth-child(5n+4) { background: #f0e3ff; } .chip:nth-child(5n+4)::before { background: #8a43d6; }
.chip:nth-child(5n+5) { background: #fff1b8; } .chip:nth-child(5n+5)::before { background: #b88600; }
.stat-pill { display: inline-block; padding: 1px 10px; border-radius: 7px; font-weight: 800; white-space: nowrap; background: var(--lime); color: var(--on-lime); }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(40px, 6vw, 80px); }
.hero-copy { max-width: 860px; margin-inline: auto; }
.hero h1 small { display: block; font-size: 0.5em; letter-spacing: -0.03em; margin-top: 0.15em; }
.hero-tagline { font-size: clamp(1.3rem, 2.6vw, 1.8rem); font-weight: 600; letter-spacing: -0.02em; margin: 18px 0 20px; }
.hero .lede { max-width: 660px; margin-inline: auto; }
.hero .lede + .lede { margin-top: 10px; }
.hero .btn-row { margin-top: 28px; }

/* The open-tab research board */
.desk { margin-top: clamp(36px, 5vw, 64px); border-radius: 28px; background: var(--panel); padding: clamp(12px, 2vw, 22px); }
.desk-window { background: var(--card); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--line); }
.desk-bar { display: flex; align-items: center; gap: 14px; padding: 10px 14px 0; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--card) 86%, var(--ink) 4%); overflow: hidden; }
.dots { display: flex; gap: 6px; padding-bottom: 10px; } .dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.tabs { display: flex; gap: 4px; min-width: 0; }
.tab { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px 10px 0 0; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.tab img { width: 16px; height: 16px; border-radius: 4px; object-fit: contain; background: #fff; }
.tab.is-active { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-bottom-color: var(--card); margin-bottom: -1px; }
.board {
  display: grid; grid-template-columns: 0.8fr 1fr 1.1fr; gap: clamp(16px, 3vw, 34px); align-items: center; padding: clamp(22px, 4vw, 44px);
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 14%, transparent) 1px, transparent 1.5px); background-size: 22px 22px;
}
.polaroid { justify-self: center; width: min(100%, 230px); padding: 10px 10px 8px; background: #fff; box-shadow: 0 16px 30px -16px rgba(15, 26, 43, 0.5); rotate: -4deg; position: relative; color: #0f1a2b; }
.polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.polaroid figcaption { text-align: center; font-size: 1.5rem; padding-top: 6px; }
.tape { position: absolute; left: 50%; top: -13px; width: 92px; height: 26px; translate: -50% 0; rotate: 3deg; background: rgba(255, 214, 120, 0.75); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
/* Sticky notes: paper with an adhesive strip along the top and a peeling corner.
   The paper is drawn on ::before so the drop shadow follows the cut corner. */
.sticky, .manifesto {
  --paper: #ffe86b; position: relative; isolation: isolate; color: #0f1a2b;
  filter: drop-shadow(0 16px 12px rgba(15, 26, 43, 0.26)) drop-shadow(0 2px 2px rgba(15, 26, 43, 0.14));
  transition: rotate 0.2s ease, translate 0.2s ease;
}
.sticky::before, .manifesto::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(15, 26, 43, 0.09), rgba(15, 26, 43, 0) 34px), linear-gradient(175deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 60%), var(--paper);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
}
.sticky::after, .manifesto::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 34px; height: 34px; z-index: -1;
  background: linear-gradient(135deg, color-mix(in srgb, var(--paper) 72%, #6b5a00) 0 50%, transparent 50%);
  border-top-left-radius: 6px; box-shadow: -3px -3px 5px -3px rgba(15, 26, 43, 0.35);
}
.sticky { padding: 30px 24px 32px; rotate: 1.5deg; }
.sticky.pink { --paper: #ffc9de; rotate: -3deg; } .sticky.mint { --paper: #c9f2c0; rotate: 2.5deg; }
.sticky p + p { margin-top: 10px; }
.sticky.big .hand { font-size: clamp(1.45rem, 2.3vw, 1.85rem); }
.sticky.small { font-size: 1.45rem; padding: 24px 18px 26px; }
.sticky mark { background: #fff; padding: 0 0.15em; }
.board-side { display: grid; gap: 22px; }
.tagcard { background: #fff; color: #0f1a2b; border: 1px solid #e9e5dc; border-radius: 14px; padding: 16px; box-shadow: 0 14px 28px -18px rgba(15, 26, 43, 0.4); rotate: -1deg; }
.tagcard b { display: block; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #4d5868; margin-bottom: 10px; }

/* ---------- Logo strip ---------- */
.logos { padding: 8px 0 24px; }
.logos .eyebrow { text-align: center; margin-bottom: 22px; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; align-items: center; gap: 60px; width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track > * { flex: none; }
.logo-img { height: var(--h, 28px); width: auto; filter: var(--logo-filter); opacity: 0.7; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Skills + tool cloud ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 72px); align-items: center; }
.split h3 { margin-bottom: 18px; }
.bullets li { position: relative; padding-left: 24px; margin-bottom: 11px; color: var(--ink-soft); }
.bullets li::before { content: ""; position: absolute; left: 3px; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.bullets strong { color: var(--ink); }
.toolcloud { position: relative; height: 420px; width: min(100%, 480px); margin-inline: auto; border-radius: 28px; background: var(--panel); }
.orbit { position: absolute; inset: 9% 8% 16%; border: 1.5px dashed rgba(15, 26, 43, 0.3); border-radius: 50%; animation: spin 70s linear infinite; }
.tool { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); rotate: var(--r, 0deg); display: grid; place-items: center; border-radius: 24%; background: #fff; box-shadow: 0 18px 30px -14px rgba(15, 26, 43, 0.5); animation: bob var(--d, 5s) ease-in-out var(--delay, 0s) infinite alternate; }
.tool img { width: 62%; height: 62%; object-fit: contain; }
.tool.full { background: none; } .tool.full img { width: 100%; height: 100%; }
.toolcloud .tool { scale: 0.86; }
.presence { position: absolute; left: 9%; top: 67%; rotate: -3deg; display: flex; align-items: center; gap: 10px; white-space: nowrap; padding: 9px 14px 9px 9px; border-radius: 14px; background: #fff; color: #0f1a2b; box-shadow: 0 16px 28px -14px rgba(15, 26, 43, 0.55); animation: bob 4.4s ease-in-out 0.3s infinite alternate; }
.presence img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.presence b { display: block; font-size: 0.88rem; font-weight: 700; line-height: 1.25; }
.presence small { font-size: 0.76rem; color: #4d5868; }
.presence i { font-style: normal; font-weight: 700; padding: 1px 7px; border-radius: 5px; background: #ffe86b; }
.rec { position: absolute; left: 54%; top: 86%; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 7px 14px; border-radius: 999px; background: #0f1a2b; color: #fff; font-size: 0.82rem; font-weight: 600; box-shadow: 0 12px 22px -10px rgba(15, 26, 43, 0.7); animation: bob 5.2s ease-in-out 0.8s infinite alternate; }
.rec i { width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; animation: pulse 1.2s ease-in-out infinite; }
@keyframes bob { from { transform: translateY(-6px) rotate(-2deg); } to { transform: translateY(7px) rotate(2.5deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: 0.3; transform: scale(0.8); } }

/* ---------- Philosophy: index cards with a strip of tape ---------- */
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.5vw, 28px); align-items: start; }
.principle { --tape: #ffe86b; position: relative; padding: 40px 26px 28px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.principle::before { content: ""; position: absolute; left: 50%; top: -12px; width: 108px; height: 26px; translate: -50% 0; rotate: -2deg; background: color-mix(in srgb, var(--tape) 88%, transparent); box-shadow: 0 1px 2px rgba(15, 26, 43, 0.15); }
.principle:nth-child(2) { --tape: #ffc9de; } .principle:nth-child(2)::before { rotate: 1.5deg; }
.principle:nth-child(3) { --tape: #c9f2c0; }
.principle h4 { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 16px; }
.because li { padding: 14px 0; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.96rem; }
.because strong { color: var(--ink); }
.because b { background: var(--lime); color: #0f1a2b; padding: 0 0.3em; border-radius: 5px; font-weight: 800; }
.sticky:hover { rotate: 0deg; translate: 0 -6px; }

/* ---------- Work ---------- */
.cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.case { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 36px); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform 0.18s ease; }
.case:hover { transform: translateY(-4px); }
.case .chips { margin-bottom: 18px; }
.case-client { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 8px; }
.case-client b { color: var(--ink); font-weight: 700; }
.case h3 { margin-bottom: 12px; }
.case p { color: var(--ink-soft); margin-bottom: 22px; }
.stats { display: grid; gap: 8px; margin: auto 0 0; }
.stats li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.95rem; }
.case .btn { align-self: flex-start; margin-top: 22px; }

/* ---------- Pain points ---------- */
.pains { display: grid; gap: 14px; }
.pain { display: grid; grid-template-columns: 1fr 1.15fr 1.3fr; gap: clamp(18px, 3vw, 36px); align-items: start; padding: clamp(20px, 3vw, 30px); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.pain .eyebrow { display: block; font-size: 0.72rem; margin-bottom: 8px; }
.pain h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
.pain p { color: var(--ink-soft); font-size: 0.97rem; }
.pain .proof b { display: block; color: var(--ink); font-weight: 700; margin-bottom: 4px; }
.pain a, .footnote a { color: inherit; text-underline-offset: 3px; }
.pain sup, .footnote sup { font-size: 0.7em; }

/* ---------- Fit: where I'm useful / not ---------- */
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
.fit h3 { margin-bottom: 18px; }
.fit-yes { padding: clamp(24px, 3vw, 36px); }
.ticks li, .crosses li { position: relative; padding-left: 34px; margin-bottom: 14px; }
.ticks li { color: var(--ink-soft); }
.ticks li::before, .crosses li::before { position: absolute; left: 0; top: 0.1em; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: 0.78rem; font-weight: 800; }
.ticks li::before { content: "✓"; background: var(--lime); color: #0f1a2b; }
.crosses li::before { content: "✕"; background: #0f1a2b; color: #fff; }

/* ---------- Story ---------- */
.story { max-width: 800px; margin: 0 auto; position: relative; }
.story::before { content: ""; position: absolute; left: 105px; top: 10px; bottom: 10px; width: 2px; background: var(--line); }
.story li { display: grid; grid-template-columns: 84px 1fr; gap: 44px; margin-bottom: 18px; position: relative; }
.story li::before { content: ""; position: absolute; left: 99px; top: 26px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--bg); }
.story .when { padding-top: 20px; text-align: right; white-space: nowrap; font-family: var(--hand); font-weight: 700; font-size: 1.5rem; line-height: 1.2; }
.story li > div { padding: 22px 26px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.story h4 { font-size: 1.2rem; font-weight: 700; margin-bottom: 6px; }
.story p { color: var(--ink-soft); font-size: 0.98rem; }

/* ---------- Footer ---------- */
.footer { background: #0f1a2b; color: #fff; padding: clamp(56px, 8vw, 104px) 0 88px; margin-top: 32px; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.footer h2 { max-width: 16ch; }
.footer-cta p { color: #c3cad5; margin-top: 16px; max-width: 44ch; }
.footer-links { display: grid; gap: 14px; justify-items: end; }
.footer-links a:not(.btn) { display: inline-flex; align-items: center; gap: 12px; font-size: 1.05rem; text-decoration: none; }
.footer-links a:not(.btn):hover { text-decoration: underline; }
.footer-links .mail { width: 28px; height: 28px; color: var(--lime); flex: none; }
.footer .btn { background: #fff; color: #0f1a2b; border-color: #fff; font-size: 1.05rem; padding: 14px 24px; }
.footer small { opacity: 0.65; font-size: 0.85rem; }
.to-top { position: fixed; right: 20px; bottom: 20px; z-index: 40; font-size: 0.85rem; padding: 9px 14px; opacity: 0; pointer-events: none; }
.to-top.show { opacity: 1; pointer-events: auto; }

/* ---------- About page ---------- */
.manifesto { max-width: 620px; margin: 30px auto 26px; padding: 34px 28px 34px; rotate: -1deg; font-family: var(--hand); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 1.9rem); line-height: 1.2; }
.manifesto em { background: #fff; }
.split.top { align-items: start; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card, .panel, .figure, .big-stat, .quote, .flow li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card { padding: 26px; }
.card h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.card p { color: var(--ink-soft); font-size: 0.97rem; }
.icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 14px; background: var(--lime); color: #0f1a2b; }
.icon svg { width: 22px; height: 22px; }
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; counter-reset: step; }
.flow.four { grid-template-columns: repeat(4, 1fr); }
.flow li { counter-increment: step; padding: 18px; font-size: 0.93rem; color: var(--ink-soft); }
.flow li::before { content: counter(step); display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 10px; border-radius: 50%; background: var(--btn-bg); color: var(--btn-ink); font-weight: 700; font-size: 0.85rem; }
.flow li b { display: block; color: var(--ink); font-weight: 700; margin-bottom: 4px; }
.flow-loop { text-align: center; font-family: var(--hand); font-weight: 700; font-size: 1.7rem; margin-top: 18px; }
.credit { font-size: 0.88rem; color: var(--ink-soft); margin-top: 26px; }
.timeline { border-top: 1px solid var(--line); }
.timeline li { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.timeline h4 { font-size: 1.1rem; font-weight: 700; }
.timeline p { color: var(--ink-soft); grid-column: 1; font-size: 0.97rem; }
.timeline time { color: var(--ink-soft); font-size: 0.9rem; white-space: nowrap; }
.timeline.compact li { padding: 13px 0; gap: 2px 24px; }
.timeline.compact h4 { font-size: 1rem; }
.timeline.compact p { font-size: 0.9rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bring-lead { display: block; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 6px; }
.roller { height: 1.6em; overflow: hidden; font-size: clamp(2.4rem, 9vw, 6.4rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.roller ul { animation: roll 12s cubic-bezier(0.85, 0, 0.15, 1) infinite; }
.roller li { height: 1.6em; display: grid; place-items: center; }
.roller span { display: inline-block; padding: 0.04em 0.2em 0.12em; border-radius: 0.16em; rotate: -1.5deg; background: var(--lime); color: #0f1a2b; }
.roller li:nth-child(3n+2) span { rotate: 1.5deg; background: #ffc9de; }
.roller li:nth-child(3n+3) span { rotate: -1deg; background: #ffe86b; }
@keyframes roll {
  0%, 12% { transform: translateY(0); } 16.66%, 28.66% { transform: translateY(-1.6em); } 33.33%, 45.33% { transform: translateY(-3.2em); }
  50%, 62% { transform: translateY(-4.8em); } 66.66%, 78.66% { transform: translateY(-6.4em); } 83.33%, 95.33% { transform: translateY(-8em); } 100% { transform: translateY(-9.6em); }
}

/* ---------- Case study page ---------- */
.cs-hero { padding-bottom: 40px; }
.cs-hero h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); margin: 16px 0 20px; }
.meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.meta dt { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.meta dd { margin: 0; font-weight: 600; }
.panel { padding: clamp(24px, 4vw, 44px); }
.panel > p { margin: 12px 0 28px; }
.big-statement { font-size: clamp(1.9rem, 4.4vw, 3.1rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.04em; text-wrap: balance; }
.big-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.big-stat { padding: 24px; color: var(--ink-soft); box-shadow: none; }
.big-stat b { display: block; font-size: clamp(2.6rem, 5vw, 3.8rem); font-weight: 800; line-height: 1; margin: 10px 0 8px; letter-spacing: -0.05em; color: var(--ink); }
.frame { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
.prose { display: grid; gap: clamp(40px, 6vw, 72px); }
.prose h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin-bottom: 18px; }
.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.quotes.three { grid-template-columns: repeat(3, 1fr); }
.quote { padding: clamp(22px, 3vw, 30px); display: flex; flex-direction: column; gap: 24px; justify-content: space-between; }
.quote blockquote { margin: 0; font-size: 1.02rem; line-height: 1.5; }
.person b { display: block; font-weight: 700; }
.person span { font-size: 0.85rem; color: var(--ink-soft); }
.fig-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.figure { padding: clamp(22px, 3vw, 30px); }
.figure h4 { font-size: 1.08rem; font-weight: 700; margin-bottom: 4px; }
.figure .sub { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 20px; }
.bar-row { display: grid; grid-template-columns: 64px 1fr 48px; gap: 12px; align-items: center; font-size: 0.9rem; margin-bottom: 10px; }
.bar-track { height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.bar { height: 100%; border-radius: 8px; background: color-mix(in srgb, var(--ink) 35%, transparent); }
.bar.hot { background: var(--accent); }
.bar-row b { font-weight: 700; text-align: right; }
.delta { display: inline-block; margin-top: 8px; padding: 1px 10px; border-radius: 7px; font-weight: 800; background: var(--lime); color: #0f1a2b; }
.ai-note { border-left: 4px solid var(--accent); padding: 4px 0 4px 20px; color: var(--ink-soft); }
.ai-note b { color: var(--ink); }

/* ---------- Wordmark ---------- */
.nav-brand { padding-top: 4px; }
.nav-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }

/* ---------- Hero intro ---------- */
.amp { color: var(--accent); }
.intro { display: flex; align-items: center; gap: 22px; max-width: 720px; margin: 0 auto; text-align: left; }
.avatar { display: block; width: 160px; height: 160px; margin: 6px auto 22px; border-radius: 50%; object-fit: cover; border: 4px solid var(--card); box-shadow: 0 0 0 3px var(--accent), 0 18px 30px -16px rgba(15, 26, 43, 0.6); }
.hero .intro .lede { margin: 0; max-width: none; font-size: 1.08rem; }
.hero .intro .lede + .lede { margin-top: 8px; }
.board-notes { display: grid; gap: 26px; justify-items: start; }
.board-notes .sticky.small { margin-left: 10%; max-width: 280px; }
.tagcard { rotate: 0deg; }
.tagcard-sub { margin-top: 18px; }

/* ---------- Section bands ---------- */
.band-ink { background: #0f1a2b; color: #fff; --ink: #ffffff; --ink-soft: #c3cad5; --card: rgba(255, 255, 255, 0.07); --line: rgba(255, 255, 255, 0.16); --shadow: none; --btn-bg: #ffffff; --btn-ink: #0f1a2b; }
[data-theme="dark"] .band-ink { background: #161b22; }
.band-tint { background: #f3efe6; }
[data-theme="dark"] .band-tint { background: #11161d; }
.band-ink .credit a { color: var(--lime); }
.qa { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.qa .card h4 { font-size: 1.15rem; }

/* ---------- Charts inside the pain points ---------- */
.pain-figure { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 36px); padding: clamp(22px, 3vw, 34px); border-radius: var(--radius); background: linear-gradient(135deg, #ffe4d2 0%, #fdf2c0 46%, #dbf4cf 100%); color: #0f1a2b; }
.pain-figure figcaption { font-weight: 700; font-size: 0.97rem; line-height: 1.3; margin-bottom: 16px; }
.pain-figure small { display: block; font-weight: 500; font-size: 0.8rem; color: #3d4756; }
.pain-figure .bar-track { background: rgba(15, 26, 43, 0.12); }
.pain-figure .bar { background: rgba(15, 26, 43, 0.45); } .pain-figure .bar.hot { background: #0f1a2b; }
.stack { display: flex; height: 54px; border-radius: 10px; overflow: hidden; font-size: 0.82rem; font-weight: 700; }
.stack span { display: grid; place-items: center; text-align: center; padding: 0 6px; background: #0f1a2b; color: #fff; }
.stack span + span { background: #d7ff5f; color: #0f1a2b; }
.deltas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.deltas span { background: rgba(255, 255, 255, 0.7); border-radius: 12px; padding: 12px; font-size: 0.85rem; line-height: 1.3; }
.deltas b { display: block; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; }
.more { margin-top: 20px; align-self: flex-start; font-weight: 700; font-size: 0.95rem; text-underline-offset: 4px; }

/* ---------- Fit cards ---------- */
.fit-no { padding: clamp(24px, 3vw, 36px); border-top: 6px solid #ffc9de; }
.fit-yes { border-top: 6px solid var(--lime); }
.fit-no li { color: var(--ink-soft); }
.fit-no strong { color: var(--ink); }
.crosses li::before { background: var(--btn-bg); color: var(--btn-ink); }

/* ---------- Photo slots (appear when the file exists in /photos) ---------- */
.snap { width: 150px; flex: none; padding: 7px 7px 22px; background: #fff; box-shadow: 0 14px 24px -14px rgba(15, 26, 43, 0.55); rotate: 3deg; }
.snap img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.story li { grid-template-columns: 84px 1fr auto; }
.story li .snap { align-self: center; margin-left: -14px; }
.story li:nth-child(even) .snap { rotate: -3deg; }

/* ---------- Work page ---------- */
.work-hero { padding-bottom: 24px; }
.jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.jump-bar { position: sticky; top: 79px; z-index: 45; padding: 10px clamp(16px, 4vw, 40px); background: var(--nav-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.jump a.is-current { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); }
.study { scroll-margin-top: 130px; }
.jump a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); text-decoration: none; font-size: 0.9rem; font-weight: 600; }
.jump a:hover { border-color: var(--ink); }
.study { padding: clamp(40px, 6vw, 80px) 0; }
.study:nth-of-type(even) { background: #f3efe6; }
[data-theme="dark"] .study:nth-of-type(even) { background: #11161d; }
.study header { margin-bottom: 28px; }
.study h2 { margin: 8px 0 6px; }
.study .role { font-size: 1.1rem; font-weight: 600; color: var(--ink-soft); }
.study-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.study h4 { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 10px; }
.study-grid > div > p { font-size: 1.12rem; margin-bottom: 26px; }
.study .study-side { padding: 26px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.study .study-side .stats { margin: 0 0 20px; }
.study .study-side .snap { width: 100%; rotate: -1.5deg; margin: -46px 0 22px; }
.study .study-side .snap img { aspect-ratio: 4 / 3; }

.career { margin-top: clamp(36px, 5vw, 56px); }
.career h3 { margin-bottom: 16px; }

/* ---------- Motion ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal.in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .pain, .fit, .qa, .pain-figure, .study-grid, .split, .cases, .principles, .board, .cards, .frame, .big-stats, .quotes, .quotes.three, .fig-grid, .flow, .flow.four { grid-template-columns: 1fr; }
  .meta { grid-template-columns: repeat(2, 1fr); }
  .tab:not(.is-active) { padding-inline: 10px; font-size: 0; gap: 0; }
  .board-notes .sticky.small { margin-left: 0; }
  .study .study-side .snap { margin-top: 0; }
  .footer-links { justify-items: start; }
}
@media (max-width: 520px) {
  .nav { grid-template-columns: auto 1fr auto; gap: 10px; }
  .nav-brand span { display: none; }
  .nav-links { gap: 16px; justify-content: center; }
  .timeline li { grid-template-columns: 1fr; }
  .story::before { left: 6px; } .story li::before { left: 0; top: 6px; }
  .story li { grid-template-columns: 1fr; gap: 6px; padding-left: 28px; }
  .story .when { text-align: left; padding-top: 0; }
  .presence { left: 3%; }
  .jump-bar { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; top: 67px; } .jump-bar a { flex: none; }
  .intro { flex-direction: column; text-align: center; }
  .story li { grid-template-columns: 1fr; } .story li .snap { margin: 10px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .tool, .presence, .rec, .rec i, .orbit { animation: none; }
  .roller { height: auto; font-size: clamp(1.6rem, 4vw, 2.4rem); } .roller ul { animation: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .roller li { height: auto; } .roller li:last-child { display: none; }
}

/* ================= Warm gradient pass ================= */
:root {
  --accent: #f26b3a;
  --grad: linear-gradient(100deg, #ffd9c2 0%, #fdefb2 50%, #cdeec0 100%);
  --grad-strong: linear-gradient(100deg, #ffb38a 0%, #ffe27a 50%, #a9e59a 100%);
}
/* A soft wash of the gradient behind the top of every page */
body { position: relative; }
body::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 760px; z-index: -1; background: var(--panel); opacity: 0.75; -webkit-mask-image: linear-gradient(#000 20%, transparent); mask-image: linear-gradient(#000 20%, transparent); }
.nav { background: color-mix(in srgb, var(--bg) 72%, transparent); border-bottom-color: transparent; }

/* Highlighter, pills, ticks and icons use the gradient instead of flat lime */
.sticky mark, .manifesto em { background: #fff; }
.band-ink em { color: #0f1a2b; }
.story li::before { background: var(--grad-strong); box-shadow: 0 0 0 5px var(--bg), 0 0 0 6px var(--line); }
.bar.hot { background: var(--grad-strong); }
.pain-figure .bar.hot { background: #0f1a2b; }
.fit-yes { border-top: 0; } .fit-no { border-top: 0; }
.fit-yes, .fit-no, .case, .pain { position: relative; overflow: hidden; }
.fit-yes::after, .case::after, .pain::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--lime); }
.fit-no::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--line); }
.band-tint { background: linear-gradient(180deg, transparent, color-mix(in srgb, #fdefb2 38%, transparent) 25% 75%, transparent); }
[data-theme="dark"] .band-tint { background: linear-gradient(180deg, transparent, rgba(255, 226, 122, 0.05) 25% 75%, transparent); }

/* Softer, rounder buttons; the main action carries the gradient on hover */
.btn { border-radius: 999px; padding: 13px 24px; }
.btn:hover { box-shadow: 0 0 0 4px color-mix(in srgb, #ffe27a 55%, transparent), 0 14px 26px -14px rgba(15, 26, 43, 0.5); }
.nav .btn::after { content: "→"; display: grid; place-items: center; width: 26px; height: 26px; margin: -4px -12px -4px 4px; border-radius: 50%; background: var(--grad-strong); color: #0f1a2b; font-weight: 700; }
.theme-toggle { border-radius: 50%; }
.footer { border-top: 6px solid transparent; border-image: var(--grad-strong) 1; }
.footer .btn { background: var(--grad-strong); border-color: transparent; color: #0f1a2b; }

/* Logo: lowercase wordmark with a small speech-bubble mark */
.logo { font-size: 1.55rem; font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: var(--ink); white-space: nowrap; }
.logo-mark { display: inline-block; width: 0.38em; height: 0.31em; margin-left: 0.1em; translate: 0 -0.4em; border-radius: 0.11em 0.11em 0.11em 0; background: var(--accent); }

/* Header in two halves: statement left, tools right */
.hero-split { padding-top: clamp(36px, 5vw, 72px); }
.hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero-split .hero-copy { max-width: none; margin: 0; text-align: left; }
.hero-split h1 { font-size: clamp(3rem, 6.4vw, 5.4rem); line-height: 1.02; }
.hero-sub { margin: 24px 0 30px; font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 600; letter-spacing: -0.02em; }
.hero-split .btn-row { justify-content: flex-start; margin-top: 0; }
.hero-split .toolcloud { background: none; height: 400px; }
.hero-split .orbit { border-color: color-mix(in srgb, var(--ink) 28%, transparent); }

/* Board with the bio on it */
.board.board-bio { grid-template-columns: 0.72fr 1.15fr 1fr; align-items: start; }
.board-col { display: grid; gap: 26px; justify-items: center; }
.biocard { width: 100%; background: #fff; color: #0f1a2b; border: 1px solid #e9e5dc; border-radius: 14px; padding: 18px 20px; box-shadow: 0 14px 28px -18px rgba(15, 26, 43, 0.4); }
.biocard b:first-child { display: block; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #4d5868; margin-bottom: 10px; }
.biocard p { font-size: 1rem; line-height: 1.55; color: #24303f; }
.biocard p + p { margin-top: 10px; }
.biocard strong { color: #0f1a2b; }
.board-bio .sticky.big { justify-self: start; }
.board-bio .sticky.small { margin: 0; }
.desk { background: var(--grad); }
[data-theme="dark"] .desk { background: var(--panel); }

/* Skills as two columns now the tool cluster lives in the header */
.skills { max-width: 900px; margin-inline: auto; }
.skills h3 { text-align: center; margin-bottom: 22px; }
.bullets.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 40px; }

@media (max-width: 900px) {
  .hero-grid, .board.board-bio, .bullets.two-col { grid-template-columns: 1fr; }
  .hero-split .hero-copy { text-align: center; } .hero-split .btn-row { justify-content: center; }
}

/* Logos directly under the header, board in its own section */
.hero-split { padding-bottom: clamp(20px, 3vw, 36px); }
.board-section { padding-top: 8px; }
.board-section .desk { margin-top: 0; }

/* Title: "Your next" as a handwritten aside */
.your-next { display: block; width: fit-content; margin: 0 0 0.05em 0.06em; rotate: -5deg; font-size: 0.6em; letter-spacing: 0; line-height: 1; color: var(--accent); }

/* Full-width bio between the header and the client logos */
.bio { padding: clamp(20px, 3vw, 40px) 0 8px; }
.bio-row { display: flex; align-items: center; gap: clamp(22px, 4vw, 52px); }
.bio-photo { position: relative; flex: none; width: clamp(160px, 21vw, 260px); aspect-ratio: 1; rotate: -2.5deg; }
.bio-block { position: absolute; inset: 0; translate: 11px 11px; rotate: 5deg; border-radius: 24px; background: var(--lime); }
.bio-photo img { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; border: 5px solid #fff; box-shadow: 0 20px 30px -18px rgba(15, 26, 43, 0.55); }
.bio-lead { font-size: clamp(1.35rem, 2.7vw, 2.15rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.25; }
.bio-lead strong { font-weight: 800; }
.bio-more { margin-top: clamp(22px, 3vw, 34px); padding: 20px 26px; border-radius: 18px; background: var(--grad); color: #0f1a2b; font-size: 1.08rem; }
.board.board-two { grid-template-columns: 1fr 1.25fr; align-items: center; }
.board-two .sticky.big { justify-self: center; max-width: 420px; }
@media (max-width: 900px) { .board.board-two { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .bio-row { flex-direction: column; text-align: center; } }

/* Spacing around the bio, client logos and board */
.bio { padding-bottom: clamp(30px, 4.5vw, 52px); }
.logos { padding-bottom: clamp(40px, 5.5vw, 64px); }
.board-section { padding-bottom: clamp(16px, 2.5vw, 28px); }
.board-section + section { padding-top: clamp(28px, 4vw, 48px); }

/* "AI" drawn as chunky bitmap pixels with a faint glow */
.pixel-ai { display: inline-block; margin-left: 0.12em; }
.pixel-ai svg { display: block; height: 0.74em; width: auto; fill: var(--lime); filter: drop-shadow(0 0 5px rgba(215, 255, 95, 0.55)) drop-shadow(0 0 16px rgba(215, 255, 95, 0.28)); }
/* A more sinister "AI": red ghosting behind the pixels and an uneasy flicker */
.pixel-ai { margin-left: 0.3em; }
.pixel-ai svg {
  filter: drop-shadow(0.045em 0 0 rgba(255, 45, 45, 0.85)) drop-shadow(-0.03em 0 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 0 6px rgba(215, 255, 95, 0.5)) drop-shadow(0 0 18px rgba(255, 45, 45, 0.35));
  animation: ai-flicker 5.5s steps(1, end) infinite;
}
@keyframes ai-flicker {
  0%, 100% { opacity: 1; transform: none; }
  41% { opacity: 0.55; } 42% { opacity: 1; }
  43% { opacity: 0.35; transform: translateX(0.03em); } 44.5% { opacity: 1; transform: none; }
  78% { opacity: 0.7; transform: translateX(-0.02em) skewX(-6deg); } 79% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .pixel-ai svg { animation: none; } }

/* Navigation: logo left; page switch, theme toggle and Contact grouped on the right */
.nav { display: flex; justify-content: space-between; gap: 16px; }
.seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); border: 1px solid var(--line); }
.seg a { padding: 8px 17px; border-radius: 999px; font-size: 0.92rem; font-weight: 600; text-decoration: none; color: var(--ink-soft); transition: background-color 0.15s ease, color 0.15s ease; }
.seg a:hover { color: var(--ink); }
.seg a[aria-current="page"] { background: var(--btn-bg); color: var(--btn-ink); box-shadow: 0 2px 6px -2px rgba(15, 26, 43, 0.5); }
@media (max-width: 620px) {
  .nav { padding-inline: 12px; gap: 8px; }
  .nav-brand span.logo { display: inline; font-size: 1.2rem; }
  .nav-right { gap: 6px; }
  .seg a { padding: 7px 11px; font-size: 0.84rem; }
  .theme-toggle { width: 38px; height: 38px; }
  .nav .btn { font-size: 0; gap: 0; padding: 6px; }
  .nav .btn::after { margin: 0; }
}
@media (max-width: 400px) {
  .hero { overflow-x: clip; }
  .nav { padding-inline: 10px; gap: 6px; }
  .nav-brand span.logo { font-size: 1.05rem; }
  .nav-right { gap: 4px; }
  .seg { padding: 3px; }
  .seg a { padding: 6px 9px; font-size: 0.8rem; }
  .theme-toggle { width: 34px; height: 34px; }
}
@media (max-width: 340px) {
  .nav { padding-inline: 8px; gap: 4px; }
  .nav-brand span.logo { font-size: 0.95rem; }
  .seg a { padding: 6px 7px; font-size: 0.76rem; }
  .theme-toggle { width: 32px; height: 32px; }
  .nav .btn { padding: 4px; }
}

/* Work page: jump links land exactly at the top of each case study.
   --nav-h and --stick are measured in script.js so the offset matches the real bar heights. */
.jump-bar { top: var(--nav-h, 79px); }
html:has(.jump-bar) { scroll-padding-top: var(--stick, 140px); }
.study { scroll-margin-top: 0; }
@media (max-width: 620px) { .jump-bar { top: var(--nav-h, 67px); } }

/* Work page: pill bar has no fill of its own so it melts into the gradient above
   (the blur keeps the pills readable once it sticks over content); Google sits on the
   plain page colour like Shell, instead of on the top-of-page gradient wash */
.jump-bar { background: transparent; border-bottom: 0; }
.study { background: var(--bg); }
.jump-bar { transition: background-color 0.2s ease, box-shadow 0.2s ease; }
.jump-bar.is-stuck { background: var(--nav-bg); box-shadow: 0 1px 0 var(--line); }
.nav { transition: background-color 0.2s ease, box-shadow 0.2s ease; }
.nav.is-scrolled { background: var(--nav-bg); }
body:not(:has(.jump-bar)) .nav.is-scrolled { box-shadow: 0 1px 0 var(--line); }
/* Tuck the stuck pill bar 1px under the navigation so no sliver of page shows between them */
.jump-bar { top: calc(var(--nav-h, 79px) - 1px); }

/* Once the pill bar sticks, draw ONE background layer behind both the navigation and the pills.
   Two separately blurred layers never match exactly, which showed as a seam between them. */
.jump-bar.is-stuck { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.jump-bar.is-stuck::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; top: calc(-1 * var(--nav-h, 79px) - 1px);
  background: var(--nav-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
body:has(.jump-bar.is-stuck) .nav { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }

/* ---------- Sticky notes: digital board style (like FigJam / Miro) ---------- */
.sticky, .sticky.pink, .sticky.mint { filter: none; rotate: 0deg; padding: 22px 20px 14px; border-radius: 6px; background: var(--paper); box-shadow: 0 2px 4px rgba(15, 26, 43, 0.12), 0 12px 22px -12px rgba(15, 26, 43, 0.38); }
.sticky::before, .sticky::after { display: none; }
.sticky .hand, .sticky.big .hand { font-family: var(--sans); font-weight: 600; font-size: 1.08rem; line-height: 1.45; letter-spacing: -0.01em; }
.sticky:hover { rotate: 0deg; translate: 0 -4px; }
.sticky-foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 10px; border-top: 1px solid rgba(15, 26, 43, 0.12); font-size: 0.78rem; color: #3d4756; }
.sticky-foot img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.sticky-foot b { color: #0f1a2b; font-weight: 700; }
.sticky-foot .react { margin-left: auto; padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); }

/* ---------- "Is this a fit?": E colours, C7 tinted headers, C2 near-white cards ---------- */
#fit { background: linear-gradient(135deg, #ffe9da 0%, #fdf5cf 46%, #e3f6d8 100%); }
[data-theme="dark"] #fit { background: var(--panel); }
#fit .fit .card {
  --pad: clamp(24px, 3vw, 36px);
  overflow: hidden; padding: 0 var(--pad) var(--pad); border: 1px solid rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 18px 34px -24px rgba(15, 26, 43, 0.45);
}
#fit .fit .card::after { display: none; }
#fit .fit-yes { background: rgba(252, 255, 242, 0.8); }
#fit .fit-no { background: rgba(255, 249, 246, 0.8); }
#fit .fit .card h3 { margin: 0 calc(-1 * var(--pad)) 18px; padding: 22px var(--pad) 16px; }
#fit .fit-yes h3 { background: #ecfcc0; }
#fit .fit-no h3 { background: #ffe3d8; }
#fit .ticks li::before { background: var(--lime); color: #0f1a2b; }
#fit .crosses li::before { background: #ff8a6a; color: #0f1a2b; }
[data-theme="dark"] #fit .fit .card { border-color: rgba(255, 255, 255, 0.14); box-shadow: none; }
[data-theme="dark"] #fit .fit-yes { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] #fit .fit-no { background: rgba(255, 255, 255, 0.05); }
[data-theme="dark"] #fit .fit-yes h3 { background: rgba(215, 255, 95, 0.16); }
[data-theme="dark"] #fit .fit-no h3 { background: rgba(255, 138, 106, 0.16); }

/* ---------- Accessibility fixes (WCAG AA contrast) ---------- */
/* Orange used as text or as meaningful dots is a shade deeper in light mode (3.5–3.9:1);
   the brighter orange stays on decorative marks like the logo and Contact arrow. */
:root { --accent-text: #d65424; }
[data-theme="dark"] { --accent-text: #f26b3a; }
.amp, .your-next { color: var(--accent-text); }
.bullets li::before { background: var(--accent-text); }
.chip:nth-child(5n+5)::before { background: #946c00; }

/* "Is this a fit?": each heading strip is a light tint of its own icon colour */
#fit .fit-yes h3 { background: color-mix(in srgb, var(--lime) 40%, #fff); }
#fit .fit-no h3 { background: color-mix(in srgb, #ff8a6a 40%, #fff); }
[data-theme="dark"] #fit .fit-yes h3 { background: rgba(215, 255, 95, 0.16); }
[data-theme="dark"] #fit .fit-no h3 { background: rgba(255, 138, 106, 0.2); }

/* Dark mode: lighter secondary grey. The old #a9b1bd passed AA (5.2:1 at worst, on the
   "Is this a fit?" gradient) but read as faint; this lifts every surface to 6.8–11.6:1. */
[data-theme="dark"] { --ink-soft: #c5cbd4; }

/* ---------- Services ---------- */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.service { display: flex; flex-direction: column; padding: 26px; }
.service h3 { font-size: 1.2rem; margin-bottom: 6px; }
.service .for { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; color: var(--accent-text); margin-bottom: 12px; }
.service p { color: var(--ink-soft); font-size: 0.96rem; }
.service .get { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink); }
.service p + p { margin-top: 10px; }
@media (max-width: 900px) { .services { grid-template-columns: 1fr; } }
/* Small orange labels need 4.5:1 (normal-size text): a deeper orange in light mode */
:root { --accent-small: #b5441a; }
[data-theme="dark"] { --accent-small: #f26b3a; }
.service .for { color: var(--accent-small); }

/* No gradients behind "Is this a fit?" or on the Contact / Start the conversation buttons */
#fit, [data-theme="dark"] #fit { background: transparent; }
#fit .fit .card { border: 1px solid var(--line); box-shadow: var(--shadow); -webkit-backdrop-filter: none; backdrop-filter: none; }
#fit .fit-yes, #fit .fit-no { background: var(--card); }
.nav .btn::after { background: var(--lime); }
.footer .btn { background: var(--lime); border-color: var(--lime); color: #0f1a2b; }

/* No gradient strip on the footer; lime dots on the "how I got here" timeline */
.footer { border-top: 0; border-image: none; }
.story li::before { background: var(--lime); border: 2px solid #0f1a2b; box-shadow: 0 0 0 5px var(--bg); }

/* ---------- "How I got here" as diary study entries (like dscout) ---------- */
.diary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 980px; margin-inline: auto; }
.entry { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.entry-top { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 0.84rem; color: var(--ink-soft); }
.entry-top img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.entry-top b { font-weight: 700; color: var(--ink); }
.entry-top .when { margin-left: auto; text-align: right; }
.entry-photo { margin: 16px 18px 0; }
.entry-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.entry-body { padding: 16px 18px 20px; }
.entry-body h3 { font-size: 1.2rem; margin: 10px 0 6px; }
.entry-body p { color: var(--ink-soft); font-size: 0.97rem; }
.mood { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; background: #fff1b8; color: #0f1a2b; font-size: 0.8rem; font-weight: 700; }
.entry:nth-child(2) .mood { background: #ddf5cf; } .entry:nth-child(3) .mood { background: #e4ecff; } .entry:nth-child(4) .mood { background: #ffe6d6; }
@media (max-width: 760px) { .diary { grid-template-columns: 1fr; } }

/* ---------- Small business page (not linked yet) ---------- */
.sb-questions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sb-questions li { padding: 18px 20px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); font-weight: 600; font-size: 1.02rem; }
.service .len { font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.faq details { padding: 16px 20px; margin-bottom: 10px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 700; }
.faq details p { margin-top: 10px; color: var(--ink-soft); }
@media (max-width: 900px) { .sb-questions { grid-template-columns: 1fr; } }

/* ---------- "How I got here" as a staggered timeline: diary cards on one side, year + photo on the other ---------- */
.tline { position: relative; max-width: 1000px; margin-inline: auto; }
.tline::before { content: ""; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 2px; margin-left: -1px; background: var(--line); }
.tline li { position: relative; display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; margin-bottom: 28px; }
.tline li:last-child { margin-bottom: 0; }
.tline li::before { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--lime); border: 2px solid #0f1a2b; box-shadow: 0 0 0 5px var(--bg); z-index: 1; }
.tline .entry { grid-row: 1; grid-column: 1; }
.tline .tl-side { grid-row: 1; grid-column: 3; display: flex; align-items: center; gap: 22px; }
.tline li:nth-child(even) .entry { grid-column: 3; }
.tline li:nth-child(even) .tl-side { grid-column: 1; flex-direction: row-reverse; }
.tl-year { font-family: var(--hand); font-weight: 700; font-size: 2rem; line-height: 1.1; white-space: nowrap; }
.tline .snap { width: 160px; }
.tline li:nth-child(even) .snap { rotate: -3deg; }
.tline li:nth-child(2) .mood { background: #ddf5cf; } .tline li:nth-child(3) .mood { background: #e4ecff; } .tline li:nth-child(4) .mood { background: #ffe6d6; }
@media (max-width: 760px) {
  .tline::before { left: 11px; }
  .tline li { grid-template-columns: 1fr; gap: 10px; padding-left: 38px; }
  .tline li::before { left: 11px; top: 14px; margin-top: 0; }
  .tline .entry, .tline li:nth-child(even) .entry { grid-column: 1; grid-row: 2; }
  .tline .tl-side, .tline li:nth-child(even) .tl-side { grid-column: 1; grid-row: 1; flex-direction: row; }
  .tl-year { font-size: 1.7rem; }
  .tline .snap { width: 130px; }
}
.pain-figure.one { grid-template-columns: 1fr; }
@media (min-width: 901px) { .pain { grid-template-columns: 1fr 1.05fr 1.3fr; } .pain > div:nth-child(3) { padding-left: clamp(12px, 2vw, 28px); } }

/* ---------- Services page: Double Diamond process chart ---------- */
.proc-map { max-width: 1080px; margin-inline: auto; }
.proc-wave { display: block; width: 100%; height: auto; color: var(--ink); }
.proc-wave .shape { fill: var(--lime); stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; }
.proc-wave .loop { fill: none; stroke: currentColor; stroke-width: 2.5; }
.proc-wave .mid { stroke: #0f1a2b; stroke-width: 1.5; stroke-dasharray: 4 6; opacity: 0.5; }
.proc-wave .link, .proc-wave .return { stroke: currentColor; stroke-width: 2; fill: none; }
.proc-wave .return { stroke-dasharray: 7 7; }
.proc-wave .phase { font-family: var(--sans); font-weight: 800; font-size: 21px; fill: #0f1a2b; }
.proc-wave .note { font-family: var(--hand); font-weight: 700; font-size: 22px; fill: currentColor; }
.proc-wave .cap { font-family: var(--hand); font-weight: 700; font-size: 27px; fill: currentColor; }
.proc-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 14px; }
.proc-step { padding: 18px 16px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.proc-step .mood { margin-bottom: 10px; font-size: 0.74rem; }
.proc-step:nth-child(2) .mood { background: #ddf5cf; } .proc-step:nth-child(3) .mood { background: #e4ecff; } .proc-step:nth-child(4) .mood { background: #ffe6d6; } .proc-step:nth-child(5) .mood { background: #eee9ff; }
.proc-step h3 { font-size: 1.25rem; margin-bottom: 6px; }
.proc-step .q { font-family: var(--hand); font-weight: 700; font-size: 1.3rem; line-height: 1.15; margin-bottom: 12px; }
.proc-step ul { display: flex; flex-wrap: wrap; gap: 6px; }
.proc-step li { padding: 3px 9px; border-radius: 7px; border: 1px solid var(--line); font-size: 0.8rem; font-weight: 600; color: var(--ink); }
@media (max-width: 1000px) { .proc-steps { grid-template-columns: repeat(2, 1fr); } .proc-step:last-child { grid-column: 1 / -1; } }
@media (max-width: 760px) { .proc-wave { display: none; } .proc-steps { grid-template-columns: 1fr; } }

/* ---------- Research philosophy pinned to the synthesis board (highlight cards) ---------- */
.pins { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 28px); margin-top: 6px; }
.pins-label { grid-column: 1 / -1; font-size: 1.7rem; color: var(--ink); rotate: -1.5deg; margin-bottom: -4px; }
.pin { position: relative; padding: 18px 18px 18px 20px; background: #fff; color: #0f1a2b; border: 1px solid #e9e5dc; border-left: 6px solid #3d63dd; border-radius: 12px; box-shadow: 0 14px 26px -16px rgba(15, 26, 43, 0.5); transition: translate 0.2s ease; }
.pin:nth-child(3) { border-left-color: #e4570f; } .pin:nth-child(4) { border-left-color: #2f9e44; }
.pin-tag { display: inline-block; margin-bottom: 10px; padding: 2px 9px; border-radius: 6px; background: #e4ecff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #0f1a2b; }
.pin:nth-child(3) .pin-tag { background: #ffe6d6; } .pin:nth-child(4) .pin-tag { background: #ddf5cf; }
.pin b { display: block; font-size: 1.1rem; font-weight: 800; line-height: 1.25; margin-bottom: 8px; }
.pin p { font-size: 0.94rem; color: #4d5868; }
.pin:hover { translate: 0 -4px; }
@media (max-width: 900px) { .pins { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .pin { transition: none; } .pin:hover { translate: none; } }

/* Three page tabs: on phones the tabs get their own full-width row under the logo */
@media (max-width: 560px) {
  .nav { flex-wrap: wrap; row-gap: 10px; padding-bottom: 10px; }
  .nav-right { display: contents; }
  .nav-brand { flex: 1 0 auto; }
  .nav .seg { order: 3; flex: 1 0 100%; }
  .nav .seg a { flex: 1; text-align: center; padding: 7px 10px; font-size: 0.86rem; }
}

/* ---------- 2026-10-16: heading levels fixed, same look as before ---------- */
.qa .card h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.6; margin-bottom: 8px; }
.frame .card h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.6; margin-bottom: 8px; }
.figure h3 { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.6; margin-bottom: 4px; }
.study h3 { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.6; margin: 0 0 10px; }
h2.eyebrow { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.6; }
.service h2 { font-size: 1.2rem; letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 6px; }

/* Keyboard focus ring: darker orange in light mode so it reaches 3:1 */
a:focus-visible, button:focus-visible, summary:focus-visible { outline-color: var(--accent-text); }
summary:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; border-radius: 6px; }
/* Phones: the top bar is taller (two rows), so leave room above anything scrolled or focused into view */
@media (max-width: 560px) { html { scroll-padding-top: 135px; } }

/* Services: length, format and a call link on each card */
.svc-meta { display: grid; gap: 6px; margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 5%, transparent); font-size: 0.86rem; }
.svc-meta div { display: grid; grid-template-columns: 7.5em 1fr; gap: 8px; }
.svc-meta dt { font-weight: 700; color: var(--ink); }
.svc-meta dd { margin: 0; color: var(--ink-soft); }
.svc-cta { display: inline-block; margin-top: 14px; font-weight: 700; color: var(--ink); text-underline-offset: 4px; }
.faq summary { padding: 2px 0; }
.faq details[open] { box-shadow: var(--shadow); }

/* Footer: location, CV and small print */
.footer-where { font-weight: 600; color: #fff !important; }
.fine-print { margin-top: clamp(36px, 5vw, 56px); padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.16); display: grid; gap: 6px; font-size: 0.82rem; color: #c3cad5; }
.fine-print b { color: #fff; font-weight: 700; }
.fine-print a { color: inherit; text-underline-offset: 3px; }
.footer .fine-print a:focus-visible, .footer a:focus-visible { outline-color: var(--lime); }
.proof a { color: inherit; text-underline-offset: 3px; }

/* ---------- Board with three columns: big note, tag card, two small notes ---------- */
.board.board-three { grid-template-columns: 1.05fr 1.15fr 0.8fr; align-items: center; }
.board-three .sticky.big { justify-self: center; max-width: 420px; }
.board-side-notes { display: grid; gap: 26px; justify-items: center; }
.sticky.note-skip { max-width: 240px; rotate: 2.5deg; }
.note-skip .hand { font-size: 1.5rem; line-height: 1.15; }
.sticky.note-dd { max-width: 220px; rotate: -2deg; padding: 18px 16px 14px; }
.note-dd svg { display: block; width: 100%; height: auto; }
.note-dd svg path { fill: none; stroke: #0f1a2b; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.note-dd svg path.dash { stroke-width: 1.4; stroke-dasharray: 3 5; opacity: 0.55; }
.note-dd .hand { font-size: 1.35rem; text-align: center; margin-top: 4px; }
.note-dd a { color: #0f1a2b; text-underline-offset: 4px; }
.note-dd a:focus-visible { outline-color: #0f1a2b; }
@media (max-width: 900px) { .board.board-three { grid-template-columns: 1fr; } .board-side-notes { grid-template-columns: 1fr 1fr; align-items: center; } }
@media (max-width: 480px) { .board-side-notes { grid-template-columns: 1fr; } }

/* Impact page: "I bring big-tech, agency & freelance experience" above the projects */
.bring-section { padding-top: 0; }
.bring-title { font-size: clamp(1.6rem, 3.2vw, 2.3rem); text-align: center; margin-bottom: 26px; }

/* ---------- Case study: fintech JTBD (facts, phases, stages, pairs, learnings) ---------- */
.cs-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 18px 0 26px; }
.cs-facts li { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.4; }
.cs-facts b { display: block; font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -0.04em; color: var(--ink); line-height: 1.1; margin-bottom: 4px; }
.phase-no { font-family: var(--hand); font-weight: 700; font-size: 1.6rem; color: var(--accent-text); margin-bottom: 6px; }
.stages { display: grid; gap: 14px; counter-reset: stage; }
.stages li { counter-increment: stage; display: grid; grid-template-columns: 52px 0.7fr 1fr 1.2fr; gap: 18px; align-items: start; padding: 20px 22px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.stages li::before { content: counter(stage, decimal-leading-zero); font-weight: 800; font-size: 1.3rem; color: var(--ink-soft); }
.stages h3 { font-size: 1.15rem; letter-spacing: -0.02em; }
.stages p { color: var(--ink-soft); font-size: 0.95rem; }
.stages .who { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin-bottom: 3px; }
.stages .who.me { color: var(--accent-small); }
.pairs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pairs li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); text-align: center; font-weight: 700; font-size: 1.05rem; }
.pairs i { font-style: normal; font-size: 1.5rem; }
.band-ink .ticks li { color: #c3cad5; }
.learnings li { position: relative; padding-left: 40px; margin-bottom: 18px; font-size: 1.08rem; color: var(--ink-soft); max-width: 820px; }
.learnings li::before { content: "↳"; position: absolute; left: 4px; top: -0.1em; font-size: 1.5rem; font-weight: 700; color: var(--accent-text); }
.todo { margin-top: 28px; padding: 16px 20px; border: 2px dashed var(--accent-text); border-radius: 14px; color: var(--ink); background: color-mix(in srgb, var(--accent-text) 7%, transparent); }
.todo.dark { color: #fff; border-color: var(--lime); background: rgba(215, 255, 95, 0.08); }
@media (max-width: 900px) { .cs-facts { grid-template-columns: 1fr 1fr; } .stages li { grid-template-columns: 1fr; gap: 8px; } .pairs { grid-template-columns: 1fr; } }
/* Fintech case study: findings, job statements, worked example */
.found { margin-top: clamp(40px, 6vw, 64px); }
.found-title { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin-bottom: 20px; }
.found .pin-tag { margin-bottom: 8px; } .found .pin-tag.t2 { background: #ffe6d6; }
.found-sub { font-size: 1.2rem; margin: 30px 0 14px; }
.jobs { display: grid; gap: 14px; }
.job { padding: 18px 22px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--lime); color: var(--ink-soft); font-size: 1.02rem; }
.job b { color: var(--ink); }
.example { margin-top: clamp(32px, 5vw, 48px); padding: clamp(20px, 3vw, 30px); border: 2px dashed var(--line); border-radius: 18px; }
.example-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-small); margin-bottom: 6px; }
.example h3 { font-size: 1.25rem; margin-bottom: 16px; }
.example-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.example-steps li { position: relative; padding: 14px 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: 0.95rem; color: var(--ink); }
.example-steps span { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
@media (max-width: 900px) { .example-steps { grid-template-columns: 1fr; } }

/* Timeline photos: one polaroid, or a small scattered stack when there are several */
.snaps { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.snaps.many { max-width: 320px; }
.snaps.many .snap { width: 128px; padding: 6px 6px 18px; }
.snaps.many .snap:nth-child(odd) { rotate: -3deg; } .snaps.many .snap:nth-child(even) { rotate: 3deg; margin-top: 14px; }
.tline li:nth-child(even) .snaps { justify-content: flex-end; }
@media (max-width: 760px) { .snaps.many { max-width: none; } .snaps.many .snap { width: 110px; } .tline li:nth-child(even) .snaps { justify-content: flex-start; } }

/* Fintech case study: the checks I run */
.checks { margin-top: 28px; padding: clamp(20px, 3vw, 28px); border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.checks h3 { font-size: 1.2rem; margin-bottom: 14px; }
.checks-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; counter-reset: chk; }
.checks-list li { counter-increment: chk; position: relative; padding-left: 40px; color: var(--ink-soft); }
.checks-list li::before { content: counter(chk); position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: #0f1a2b; font-weight: 800; font-size: 0.85rem; }
.checks-list b { color: var(--ink); }
@media (max-width: 760px) { .checks-list { grid-template-columns: 1fr; } }
.snap img { height: auto; }
.tl-side .snaps { flex: none; }
.snaps.many { width: 290px; }
@media (max-width: 760px) { .snaps.many { width: auto; } }
@media (max-width: 760px) { .tline .tl-side { flex-wrap: wrap; } .tl-side .snaps { flex: 1 1 100%; min-width: 0; } .snaps.many .snap { width: calc(50% - 6px); max-width: 150px; } }
@media (max-width: 760px) { .snaps.many .snap { width: calc(33.333% - 8px); padding: 4px 4px 12px; } .snaps.many .snap:nth-child(even) { margin-top: 8px; } }
/* Xeropan case study */
.pairs.stats li span:first-child { font-size: clamp(1.8rem, 3.4vw, 2.4rem); font-weight: 800; letter-spacing: -0.04em; color: var(--lime); }
.pairs.stats li span:last-child { font-weight: 600; color: #e6eaf0; }
.stages.versions li { grid-template-columns: 52px 0.8fr 1.1fr 1.3fr; }
.ai-note a { color: inherit; text-underline-offset: 3px; }
@media (max-width: 900px) { .stages.versions li { grid-template-columns: 1fr; } }
/* Case study images and results table */
.cs-gallery { display: grid; gap: 18px; margin-top: 28px; }
.cs-gallery.two { grid-template-columns: repeat(2, 1fr); }
.cs-shot { margin: 0; }
.cs-shot img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow); background: #fff; }
.cs-shot figcaption { margin-top: 8px; font-size: 0.88rem; font-weight: 600; color: var(--ink-soft); }
.cs-shot a:focus-visible { display: block; border-radius: 14px; }
.results { margin-top: 32px; }
.results h3 { font-size: 1.2rem; margin-bottom: 14px; }
.table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--line); background: var(--card); }
.results table { width: 100%; border-collapse: collapse; font-size: 0.94rem; min-width: 620px; }
.results th, .results td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.results thead th { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.results tbody th { font-weight: 700; white-space: nowrap; }
.results td { color: var(--ink-soft); }
.results tr:last-child th, .results tr:last-child td { border-bottom: 0; }
.results mark { padding: 0 0.2em; }
@media (max-width: 760px) { .cs-gallery.two { grid-template-columns: 1fr; } }
.snap img[src$="story-4-mentoring-2.jpg"] { object-position: 50% 12%; }

/* Bigger timeline photos (2026-10-17) */
.tline .snap { width: 230px; }
.snaps.many { width: 370px; }
.snaps.many .snap { width: 175px; padding: 7px 7px 20px; }
.tline .tl-side { gap: 18px; }
@media (max-width: 1000px) { .tline .snap { width: 190px; } .snaps.many { width: 300px; } .snaps.many .snap { width: 142px; } }
@media (max-width: 760px) { .tline .snap { width: 220px; } .snaps.many { width: auto; } .snaps.many .snap { width: calc(50% - 6px); max-width: 200px; padding: 6px 6px 16px; } }
@media (min-width: 1001px) { .snaps.many { width: 352px; } .snaps.many .snap { width: 168px; } }
@media (min-width: 761px) { .snaps.many .snap { box-sizing: border-box; } .snaps.many { width: 360px; } .snaps.many .snap { width: 172px; } }
@media (min-width: 761px) and (max-width: 1000px) { .snaps.many { width: 300px; } .snaps.many .snap { width: 142px; } }
.snaps.many { max-width: none; }

/* ---------- 2026-10-17 round: board in a 2×2, all notes tilted ---------- */
.board.board-quad { grid-template-columns: 1fr 1fr; gap: clamp(22px, 4vw, 44px) clamp(22px, 4vw, 48px); align-items: center; justify-items: center; }
.board-quad > * { max-width: 420px; width: 100%; }
.board-quad > .sticky.big { rotate: -2.5deg; }
.board-quad > .sticky.note-dd { rotate: 3deg; max-width: 260px; }
.board-quad > .tagcard { rotate: -1.5deg; }
.board-quad > .sticky.note-skip { rotate: 2.5deg; max-width: 280px; }
.board-quad > .sticky:hover, .board-quad > .tagcard:hover { rotate: 0deg; }
@media (max-width: 760px) { .board.board-quad { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .board-quad > * { transition: none; } }

/* Philosophy in its own section, soft lime block */
.band-soft { background: color-mix(in srgb, var(--lime) 22%, var(--bg)); }
[data-theme="dark"] .band-soft { background: color-mix(in srgb, var(--lime) 8%, var(--bg)); }
#philosophy .pins { margin-top: 0; }

/* Booking note */
.no-obligation { font-size: 0.86rem; color: #c3cad5; margin-top: -4px; }
.hero-note { color: var(--ink-soft); margin-top: 12px; }

/* Timeline: two photos piled on top of each other */
.snaps.pile { display: flex; flex-wrap: nowrap; align-items: flex-start; width: auto; }
.snaps.pile .snap { width: 200px; box-sizing: border-box; flex: none; }
.snaps.pile .snap:first-child { rotate: -4deg; z-index: 1; }
.snaps.pile .snap + .snap { margin-left: -70px; margin-top: 46px; rotate: 4deg; z-index: 2; }
@media (max-width: 1000px) { .snaps.pile .snap { width: 165px; } .snaps.pile .snap + .snap { margin-left: -55px; } }
@media (max-width: 760px) { .snaps.pile .snap { width: 170px; } .snaps.pile .snap + .snap { margin-left: -50px; margin-top: 34px; } }
@media (max-width: 380px) { .snaps.pile .snap { width: 145px; } .snaps.pile .snap + .snap { margin-left: -45px; } }

/* Impact page: hand-drawn arrow and skill cards */
.read-below { display: inline-flex; flex-direction: column; align-items: center; margin-top: 22px; font-size: 1.5rem; color: var(--accent-text); rotate: -3deg; }
.read-below svg { width: 40px; height: 60px; margin-top: 2px; }
.read-below path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.bring-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; text-align: left; }
.bring-card { padding: 20px 20px 22px; border-top: 5px solid var(--lime); }
.bring-card h3 { font-size: 1.08rem; letter-spacing: -0.02em; margin-bottom: 6px; }
.bring-card p { font-size: 0.94rem; }

/* Double footer: small print on a darker strip */
.footer { padding-bottom: 0; }
.footer-base { margin-top: clamp(44px, 6vw, 72px); padding: 22px 0 26px; background: #070d18; }
.footer-base .fine-print { margin-top: 0; padding-top: 0; border-top: 0; }
/* Sound familiar: solid block behind the cards */
@media (max-width: 360px) { .snaps.pile .snap { width: 130px; } .snaps.pile .snap + .snap { margin-left: -42px; } }
.bring-section .skills { max-width: none; } .bring-card h3 { text-align: left; margin-bottom: 6px; }
.snap img[src$="story-4-mentoring.jpg"] { object-position: 72% 50%; }
.snaps.pile .snap:has(img[src$="story-4-mentoring-2.jpg"]) { z-index: 3; position: relative; }

/* ---------- 2026-10-18 tweaks ---------- */
/* Board: tighter columns, only the linked note moves on hover, yellow note straighter */
.board.board-quad { column-gap: clamp(8px, 1.5vw, 18px); }
.board-quad > .sticky.big { rotate: -1deg; }
.board-quad > .sticky:hover, .board-quad > .tagcard:hover, .board-quad > .sticky.big:hover { translate: none; }
.board-quad > .sticky.big:hover { rotate: -1deg; } .board-quad > .tagcard:hover { rotate: -1.5deg; } .board-quad > .sticky.note-skip:hover { rotate: 2.5deg; }
.board-quad > .sticky.note-dd:hover, .board-quad > .sticky.note-dd:focus-within { rotate: 0deg; translate: 0 -6px; }
/* Timeline piles overlap less */
.snaps.pile .snap + .snap { margin-left: -32px; margin-top: 40px; }
@media (max-width: 1000px) { .snaps.pile .snap + .snap { margin-left: -26px; } }
@media (max-width: 760px) { .snaps.pile .snap { width: 155px; } .snaps.pile .snap + .snap { margin-left: -24px; margin-top: 30px; } }
@media (max-width: 380px) { .snaps.pile .snap { width: 128px; } .snaps.pile .snap + .snap { margin-left: -20px; } }
@media (max-width: 340px) { .snaps.pile .snap { width: 118px; } }
/* AI closing line: more space above, less below */
.ai-closer { margin-top: 44px; }
.ai-closer + .credit { margin-top: 8px; }
/* Impact: arrow sits right above the projects */
.read-below-wrap { padding-top: 6px; padding-bottom: 6px; }
.bring-section .skills { padding-top: 0; }
@media (min-width: 761px) { .board-quad > :nth-child(odd) { justify-self: end; } .board-quad > :nth-child(even) { justify-self: start; } }
/* Principle cards: one colour each */
.pin { background: #eef3ff; border-color: #d3defa; }
.pin:nth-child(3) { background: #fff1e8; border-color: #f6d9c6; }
.pin:nth-child(4) { background: #ecf8e6; border-color: #cfeac3; }
#philosophy .pin:nth-child(1) { background: #eef3ff; border-color: #d3defa; border-left-color: #3d63dd; }
#philosophy .pin:nth-child(2) { background: #fff1e8; border-color: #f6d9c6; border-left-color: #e4570f; }
#philosophy .pin:nth-child(3) { background: #ecf8e6; border-color: #cfeac3; border-left-color: #2f9e44; }
#philosophy .pin:nth-child(1) .pin-tag { background: #d6e2ff; } #philosophy .pin:nth-child(2) .pin-tag { background: #ffd9c2; } #philosophy .pin:nth-child(3) .pin-tag { background: #cdeec0; }

/* ---------- 2026-10-18 audit fixes ---------- */
/* Availability line and methods strip under the bio */
.bio-extra { margin-top: clamp(22px, 3vw, 32px); }
.availability { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 0.92rem; font-weight: 600; }
.availability .dot { width: 9px; height: 9px; border-radius: 50%; background: #2f9e44; box-shadow: 0 0 0 4px color-mix(in srgb, #2f9e44 22%, transparent); }
.methods-label { margin: 22px 0 10px; }
.chips.methods .chip { font-size: 0.8rem; }
/* Featured case studies */
.featured { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feat { display: flex; flex-direction: column; gap: 10px; padding: 22px; color: var(--ink); text-decoration: none; transition: translate 0.2s ease, box-shadow 0.2s ease; }
.feat .pin-tag { align-self: flex-start; margin: 0; }
.pin-tag.t2 { background: #ffe6d6; } .pin-tag.t3 { background: #ddf5cf; }
.feat h3 { font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1.25; }
.feat-stat { color: var(--ink-soft); font-size: 0.94rem; }
.feat-stat b { display: inline-block; padding: 0 0.3em; border-radius: 5px; background: var(--lime); color: #0f1a2b; font-weight: 800; }
.feat-more { margin-top: auto; font-weight: 700; font-size: 0.92rem; text-decoration: underline; text-underline-offset: 4px; }
.feat:hover { translate: 0 -4px; }
.feat:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; }
.featured-top { padding: 0 0 clamp(28px, 4vw, 44px); }
@media (max-width: 900px) { .featured { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .feat { transition: none; } .feat:hover { translate: none; } }
/* Footer availability line */
.footer-cta .footer-where { margin-top: 14px; font-weight: 600; color: #fff; }

/* ---------- 2026-10-18 round 2 ---------- */
/* Sticky-note highlights: peach on yellow, lime on pink */
.board .sticky.big mark { background: #ffbf94; }
.board .sticky.note-skip mark { background: var(--lime); }
/* Board notes: a bit more room between columns */
.board.board-quad { column-gap: clamp(22px, 3.2vw, 40px); row-gap: clamp(26px, 3.6vw, 44px); }
#philosophy { padding-bottom: clamp(36px, 5vw, 60px); }
#familiar { padding-top: clamp(36px, 5vw, 60px); }
/* Buttons with icons */
.btn-icon { display: inline-flex; align-items: center; gap: 9px; }
.btn-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.btn-icon::after { display: none !important; }
/* AI: more room between title and intro */
#ai .section-head .lede { margin-top: 26px !important; }
/* Methods bar on the board (icon above label) */
.methods-bar { grid-column: 1 / -1; position: relative; width: 100%; max-width: none !important; justify-self: stretch !important; padding: 18px 20px 20px; border-radius: 28px; background: #fff6f2; border: 1px solid #f3e1d8; color: #0f1a2b; box-shadow: 0 14px 28px -20px rgba(15, 26, 43, 0.45); }
.methods-bar-label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #4d5868; margin: 0 0 10px 4px; }
.methods-bar-label + .tools-list { margin-top: 0; }
.methods-scroll { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-right: 56px; border-radius: 16px; }
.methods-scroll::-webkit-scrollbar { display: none; }
.methods-scroll:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; }
.methods-list { display: flex; gap: 6px; padding-bottom: 4px; }
.methods-list li { flex: none; width: 116px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 6px; text-align: center; font-size: 0.84rem; font-weight: 600; line-height: 1.25; }
.methods-list svg, .methods-next svg { width: 30px; height: 30px; fill: none; stroke: #0f1a2b; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.methods-next { position: absolute; right: 18px; top: 46px; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 6px 16px -6px rgba(15, 26, 43, 0.35); cursor: pointer; }
.methods-next svg { width: 20px; height: 20px; stroke-width: 2.2; transition: rotate 0.2s ease; }
.methods-next.is-end svg { rotate: 180deg; }
.methods-next:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; }
.methods-bar .methods-bar-label:nth-of-type(2) { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #ead3c8; }
.tools-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tools-list li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px solid #ecdcd3; font-size: 0.84rem; font-weight: 600; }
.tools-list img { width: 18px; height: 18px; object-fit: contain; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .methods-next svg { transition: none; } }
/* Philosophy cards: icon in the corner */
#philosophy .pin { padding-right: 64px; }
.pin-icon { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: #fff; }
.pin-icon svg { width: 22px; height: 22px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#philosophy .pin:nth-child(1) .pin-icon svg { stroke: #3d63dd; } #philosophy .pin:nth-child(2) .pin-icon svg { stroke: #c2410c; } #philosophy .pin:nth-child(3) .pin-icon svg { stroke: #2f9e44; }
/* Reviews */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.review { margin: 0; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.review-head { display: flex; align-items: center; gap: 12px; }
.review-avatar { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; color: #0f1a2b; font-weight: 800; }
.review-head b { display: block; font-weight: 700; }
.review-head small { display: block; font-size: 0.82rem; color: var(--ink-soft); }
.review blockquote { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--ink); }
.review-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.review-tags li { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); }
@media (max-width: 900px) { .reviews { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .methods-scroll { margin-right: 0; } .methods-next { top: auto; bottom: auto; right: 10px; top: 40px; width: 40px; height: 40px; } .methods-list li { width: 100px; } }
.board.board-quad { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.methods-bar, .methods-scroll { min-width: 0; }
@media (max-width: 760px) { .board.board-quad { grid-template-columns: minmax(0, 1fr); } }
/* Board order: yellow + green, methods bar, tag card + pink — align by role, not position */
@media (min-width: 761px) {
  .board-quad > .sticky.big, .board-quad > .tagcard { justify-self: end; }
  .board-quad > .sticky.note-dd, .board-quad > .sticky.note-skip { justify-self: start; }
}
/* Timeline: keep the dates clear of the centre line and dot */
@media (min-width: 761px) {
  .tl-year { flex: none; }
  .tline li:nth-child(odd) .tl-side { padding-left: 16px; }
  .tline li:nth-child(even) .tl-side { padding-right: 16px; }
  .tline .tl-side { min-width: 0; }
  .snaps.pile .snap { width: 160px; }
}
@media (min-width: 761px) and (max-width: 1000px) { .snaps.pile .snap { width: 120px; } .snaps.pile .snap + .snap { margin-left: -24px; } .tl-year { font-size: 1.6rem; } }
@media (min-width: 1001px) { .snaps.pile .snap { width: 150px; } }
@media (min-width: 761px) and (max-width: 880px) { .snaps.pile .snap { width: 96px; padding: 5px 5px 14px; } .snaps.pile .snap + .snap { margin-left: -18px; margin-top: 26px; } .tl-year { font-size: 1.35rem; } .tline .tl-side { gap: 12px; } }

/* ---------- 2026-10-18 round 3 ---------- */
/* Availability dot pulses like an "online" status */
.availability .dot { position: relative; }
.availability .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #2f9e44; animation: online-pulse 1.8s ease-out infinite; }
@keyframes online-pulse { 0% { transform: scale(1); opacity: 0.7; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .availability .dot::after { animation: none; display: none; } }
/* Board on the left half, methods + tools on the right */
.board-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 2.5vw, 30px); align-items: start; }
.board-row .desk { margin: 0; }
.board-row .board.board-quad { padding: clamp(18px, 2.5vw, 28px); column-gap: clamp(14px, 2vw, 22px); row-gap: clamp(18px, 2.4vw, 26px); }
.board-row .board-quad > * { max-width: 260px; }
.board-row .sticky.big { padding: 18px 16px 12px; }
.board-row .sticky.big .hand { font-size: clamp(1.05rem, 1.35vw, 1.25rem); }
.board-row .sticky.note-skip .hand { font-size: 1.2rem; }
.board-row .note-dd .hand { font-size: 1.15rem; }
.board-row .tagcard { padding: 12px; }
.board-row .tagcard .chip { font-size: 0.74rem; padding: 3px 8px; }
.board-row .desk-bar .tab:not(.is-active) { padding-inline: 10px; font-size: 0; gap: 0; }
/* Methods panel: everything visible, no scrolling */
.board-row .methods-bar { grid-column: auto; align-self: stretch; padding: 22px 22px 24px; }
.board-row .methods-scroll { overflow: visible; margin-right: 0; }
.board-row .methods-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 6px; }
.board-row .methods-list li { width: auto; padding: 8px 2px; font-size: 0.78rem; }
.board-row .methods-list svg { width: 26px; height: 26px; }
@media (max-width: 900px) { .board-row { grid-template-columns: minmax(0, 1fr); } .board-row .board-quad > * { max-width: 300px; } }
@media (max-width: 420px) { .board-row .methods-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Philosophy cards: softer tints */
#philosophy .pin:nth-child(1) { background: #f6f8ff; border-color: #e3eafb; }
#philosophy .pin:nth-child(2) { background: #fff9f5; border-color: #f7e7dc; }
#philosophy .pin:nth-child(3) { background: #f5fbf2; border-color: #e0f0d8; }
@media (min-width: 640px) and (max-width: 900px) { .board-row .methods-list { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 421px) and (max-width: 639px) { .board-row .methods-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.board-row .methods-bar { align-self: start; } .board-row .sticky-foot span:not(.react) { display: none; }

/* 2026-10-19 round 4: one consistent gap between sections (matches the board → philosophy gap) */
:root { --sec-half: clamp(18px, 2.4vw, 30px); }
main > section,
main > section.hero-split,
main > section.bio,
main > section.logos,
main > section.board-section,
main > .board-section + section,
main > section#philosophy,
main > section#familiar { padding-top: var(--sec-half); padding-bottom: var(--sec-half); }
main > section.hero-split { padding-top: clamp(36px, 5vw, 72px); }
main > section.band-ink { padding-top: calc(var(--sec-half) * 2.4); padding-bottom: calc(var(--sec-half) * 2.4); margin: var(--sec-half) 0; }
.footer { margin-top: var(--sec-half); }

/* Impact page: hand-drawn illustrations and button links on the featured cards */
.feat { padding-top: 14px; }
.feat-art { display: block; margin: 0 -8px 6px; border-radius: 14px; background: #eef3ff; }
.feat-art.fa-2 { background: #fff1e8; } .feat-art.fa-3 { background: #eefae7; }
.feat-art svg { display: block; width: 100%; height: auto; max-height: 150px; fill: none; stroke: #1b2433; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.feat-art .fa-blue { fill: #c6d6ff; } .feat-art .fa-peach { fill: #ffc8a6; } .feat-art .fa-lime { fill: #d7ff5f; } .feat-art .fa-white { fill: #fff; } .feat-art .fa-ink { fill: #1b2433; }
.feat-art text { fill: #1b2433; stroke: none; font-family: var(--hand); font-weight: 700; font-size: 17px; }
.featured-top .feat-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink); text-decoration: none; font-weight: 600; transition: box-shadow 0.15s ease; }
.featured-top .feat:hover .feat-more { box-shadow: 0 0 0 4px color-mix(in srgb, #ffe27a 55%, transparent); }

/* 2026-10-19 round 6: no panel around tools + methods; tools pills first, methods as small cards */
.board-row .methods-bar { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; align-self: center; }
.board-row .methods-bar .methods-bar-label:nth-of-type(2) { margin-top: 26px; padding-top: 0; border-top: 0; }
.board-row .methods-list { display: flex; flex-wrap: wrap; gap: 8px; }
.board-row .methods-list li { width: auto; flex-direction: row; gap: 8px; padding: 9px 13px 9px 11px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 4px 12px -8px rgba(15, 26, 43, 0.25); font-size: 0.84rem; font-weight: 600; text-align: left; line-height: 1.25; }
.board-row .methods-list svg { width: 20px; height: 20px; flex: none; stroke: currentColor; }
.board-row .tools-list li { background: var(--card); border-color: var(--line); }
@media (max-width: 420px) { .board-row .methods-list { display: flex; } }
@media (min-width: 421px) and (max-width: 900px) { .board-row .methods-list { display: flex; } }
.board-row .methods-bar { color: var(--ink); } .board-row .methods-bar-label { color: var(--ink-soft); margin-left: 0; }

/* 2026-10-19 round 7 */
/* Board a little wider than the tools column */
@media (min-width: 901px) { .board-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
/* Methods: their own full-width section of square cards */
.methods-section h2.eyebrow { margin: 0 0 18px; font-size: 0.74rem; }
.methods-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.methods-grid li { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px 8px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 6px 16px -12px rgba(15, 26, 43, 0.3); text-align: center; font-size: 0.82rem; font-weight: 600; line-height: 1.25; color: var(--ink); }
.methods-grid svg { width: 28px; height: 28px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
@media (max-width: 1000px) { .methods-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .methods-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 520px) { .methods-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .methods-grid li { font-size: 0.74rem; padding: 8px 5px; gap: 7px; border-radius: 14px; } .methods-grid svg { width: 24px; height: 24px; } }
/* Featured case study illustrations: clean geometric style */
.feat-art svg { stroke-width: 2; }
.feat-art .fa-bg { stroke: none; fill: #dbe5ff; }
.feat-art.fa-2 .fa-bg { fill: #ffe0cc; } .feat-art.fa-3 .fa-bg { fill: #d8f2c8; }
.feat-art text { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 700; font-size: 12px; }
/* A little more room after the last timeline entry and above "I've helped" */
.tline { padding-bottom: clamp(20px, 3vw, 36px); }
main > section.logos { padding-top: calc(var(--sec-half) + clamp(14px, 2vw, 24px)); }
@media (max-width: 440px) { .methods-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* "how I got here": handwritten like the timeline years, no highlighter */
#about .section-head h2 em { background: none; padding: 0; color: inherit; font-family: var(--hand); font-weight: 700; font-size: 1.3em; letter-spacing: 0; line-height: 1; }

/* 2026-10-19: synthesis board as clickable tabs (Dovetail, Claude, Miro), prev/next arrows, tidy-up cards */
.desk-tabs { position: relative; }
.desk-tabs .desk-bar { overflow: visible; }
.desk-tabs .tabs { overflow-x: auto; scrollbar-width: none; }
.desk-tabs .tabs::-webkit-scrollbar { display: none; }
.desk-tabs button.tab { font: inherit; font-size: 0.82rem; font-weight: 600; border: 1px solid transparent; border-bottom: 0; background: none; cursor: pointer; }
.desk-tabs button.tab.is-active { border-color: var(--line); border-bottom-color: var(--card); background: var(--card); }
.desk-tabs button.tab:hover { color: var(--ink); }
.desk-tabs button.tab:focus-visible { outline: 3px solid var(--accent-text); outline-offset: -3px; }
.board-row .desk-tabs .desk-bar .tab:not(.is-active) { padding-inline: 10px; font-size: 0; gap: 0; }
.board.board-tabs { display: block; padding: 0; background: none; }
.board-panel { position: relative; min-height: 450px; display: grid; place-items: center; padding: clamp(24px, 4vw, 40px) clamp(52px, 7vw, 64px) 54px; }
.board-panel[hidden] { display: none; }
.board-panel .sticky { width: 100%; }
.board-panel .sticky:hover { translate: none; }
.tab-arrow { position: absolute; top: 50%; z-index: 3; translate: 0 -50%; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--ink); box-shadow: 0 10px 22px -12px rgba(15, 26, 43, 0.55); cursor: pointer; transition: transform 0.15s ease; }
.tab-arrow.prev { left: 2px; } .tab-arrow.next { right: 2px; }
.tab-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tab-arrow:hover { transform: scale(1.06); }
.tab-arrow:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; }
.tab-count { position: absolute; left: 50%; bottom: clamp(20px, 2.8vw, 30px); translate: -50% 0; z-index: 2; padding: 3px 10px; border-radius: 999px; background: #fff; border: 1px solid #e4e4e8; font-size: 0.74rem; font-weight: 700; color: #4d5868; }

/* Tab 1: Dovetail-style project canvas with highlight cards */
.bp-dovetail { background: #f6f6f8; }
.dt-app { width: 100%; background: #fff; border: 1px solid #e6e6ea; border-radius: 14px; box-shadow: 0 16px 34px -26px rgba(15, 26, 43, 0.5); color: #1c1c22; }
.dt-head { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-bottom: 1px solid #ececf0; }
.dt-head img { width: 18px; height: 18px; }
.dt-title { font-size: 0.86rem; font-weight: 700; letter-spacing: -0.01em; color: #1c1c22; }
.dt-meta { margin-left: auto; padding: 2px 8px; border-radius: 6px; background: #f1f1f4; font-size: 0.7rem; font-weight: 600; color: #4f4f5a; }
.tidy-board { position: relative; height: 330px; margin: 0 12px; }
.tg-purple { --tag: #ebe7ff; --bar: #7b61ff; } .tg-pink { --tag: #ffe3ef; --bar: #e5508f; } .tg-green { --tag: #dcf5e4; --bar: #2fa866; }
.tg-blue { --tag: #e1ecff; --bar: #3b7bf0; } .tg-orange { --tag: #ffe8d6; --bar: #ec7a2c; } .tg-yellow { --tag: #fff3c4; --bar: #d4a514; }
.tidy-notes li { position: absolute; width: 47%; min-height: 72px; padding: 10px 12px 10px 15px; display: flex; flex-direction: column; justify-content: center; gap: 7px; background: #fff; color: #1c1c22; border: 1px solid #e3e3e8; border-radius: 10px; box-shadow: 0 10px 20px -14px rgba(15, 26, 43, 0.45); font-family: var(--sans); font-weight: 600; font-size: 0.9rem; line-height: 1.3; letter-spacing: -0.01em; transition: left 0.6s cubic-bezier(.2,.8,.2,1), top 0.6s cubic-bezier(.2,.8,.2,1), rotate 0.6s ease; }
.tidy-notes li::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--bar); }
.tidy-tag { align-self: flex-start; padding: 2px 8px; border-radius: 6px; background: var(--tag); color: #1c1c22; font-size: 0.68rem; font-weight: 700; opacity: 0; transition: opacity 0.3s ease 0.3s; }
.tidy-board[data-state="messy"] li:nth-child(1) { left: 6%; top: 8%; rotate: -6deg; }
.tidy-board[data-state="messy"] li:nth-child(2) { left: 38%; top: 5%; rotate: 5deg; z-index: 1; }
.tidy-board[data-state="messy"] li:nth-child(3) { left: 16%; top: 20%; rotate: 3deg; z-index: 2; }
.tidy-board[data-state="messy"] li:nth-child(4) { left: 42%; top: 26%; rotate: -5deg; z-index: 3; }
.tidy-board[data-state="messy"] li:nth-child(5) { left: 8%; top: 37%; rotate: 7deg; z-index: 4; }
.tidy-board[data-state="messy"] li:nth-child(6) { left: 30%; top: 44%; rotate: -8deg; z-index: 5; }
.tidy-board[data-state="tidy"] li { rotate: 0deg; }
.tidy-board[data-state="tidy"] .tidy-tag { opacity: 1; }
.tidy-board[data-state="tidy"] li:nth-child(odd) { left: 0; } .tidy-board[data-state="tidy"] li:nth-child(even) { left: 53%; }
.tidy-board[data-state="tidy"] li:nth-child(-n+2) { top: 4%; }
.tidy-board[data-state="tidy"] li:nth-child(3), .tidy-board[data-state="tidy"] li:nth-child(4) { top: 30%; }
.tidy-board[data-state="tidy"] li:nth-child(5), .tidy-board[data-state="tidy"] li:nth-child(6) { top: 56%; }
.tidy-btn { position: absolute; left: 50%; bottom: 12px; translate: -50% 0; z-index: 8; padding: 10px 18px; border: 0; border-radius: 8px; background: #1c1c22; color: #fff; font: 700 0.86rem/1 var(--sans); cursor: pointer; white-space: nowrap; box-shadow: 0 10px 22px -10px rgba(15, 26, 43, 0.6); }
.tidy-btn:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; }
.tidy-off, .tidy-board[data-state="tidy"] .tidy-on { display: none; } .tidy-board[data-state="tidy"] .tidy-off { display: inline; }

/* Tab 2: Claude-style chat window */
.bp-claude { background: #faf9f5; grid-template-rows: auto 1fr auto; place-items: stretch; gap: 14px; color: #3d3929; }
.cl-top { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.95rem; color: #3d3929; }
.cl-top img { width: 20px; height: 20px; }
.cl-body { display: grid; place-items: center; }
.cl-body .sticky.big { max-width: 340px; rotate: -1.5deg; }
.cl-input { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 12px 12px 16px; border-radius: 16px; background: #fff; border: 1px solid #e6e2d6; box-shadow: 0 6px 16px -12px rgba(61, 57, 41, 0.4); font-size: 0.86rem; color: #6b6656; }
.cl-input i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: #c96442; }
.cl-input svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Tab 3: Miro-style board */
.bp-miro { background-color: #fff; background-image: radial-gradient(#d4d4dc 1px, transparent 1.3px); background-size: 20px 20px; }
.mr-name { position: absolute; left: 14px; top: 14px; display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 8px; background: #fff; box-shadow: 0 2px 8px rgba(5, 0, 56, 0.12); font-size: 0.8rem; font-weight: 700; color: #050038; }
.mr-name img { width: 20px; height: 20px; border-radius: 4px; }
.mr-tools { position: absolute; left: 14px; top: 50%; translate: 0 -50%; display: grid; gap: 4px; padding: 6px; border-radius: 8px; background: #fff; box-shadow: 0 2px 8px rgba(5, 0, 56, 0.12); }
.mr-tools svg { width: 22px; height: 22px; padding: 3px; fill: none; stroke: #050038; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.mr-tools svg:first-child { background: #eef0ff; border-radius: 5px; stroke: #4262ff; }
.mr-zoom { position: absolute; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; background: #fff; box-shadow: 0 2px 8px rgba(5, 0, 56, 0.12); font-size: 0.78rem; color: #050038; }
.mr-zoom b { font-weight: 600; }
.mr-notes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 30px); padding: 36px 0 18px 30px; }
.mr-notes .sticky.note-dd { max-width: 220px; rotate: -2deg; }
.mr-notes .sticky.note-skip { max-width: 220px; rotate: 2.5deg; }
.mr-notes .note-skip .hand { font-size: 1.3rem; }

@media (max-width: 520px) {
  .board-panel { min-height: 480px; padding: 18px 12px 74px; }
  .tab-arrow { top: auto; bottom: clamp(12px, 2vw, 20px); translate: 0 0; width: 38px; height: 38px; }
  .tab-arrow.prev { left: calc(50% - 84px); } .tab-arrow.next { right: calc(50% - 84px); }
  .tab-count { bottom: calc(clamp(12px, 2vw, 20px) + 8px); }
  .tidy-board { height: 400px; margin: 0 8px; }
  .tidy-notes li { width: 48.5%; font-size: 0.8rem; padding: 8px 8px 8px 12px; min-height: 80px; }
  .tidy-board[data-state="tidy"] li:nth-child(even) { left: 51.5%; }
  .tidy-board[data-state="tidy"] li:nth-child(-n+2) { top: 3%; }
  .tidy-board[data-state="tidy"] li:nth-child(3), .tidy-board[data-state="tidy"] li:nth-child(4) { top: 28%; }
  .tidy-board[data-state="tidy"] li:nth-child(5), .tidy-board[data-state="tidy"] li:nth-child(6) { top: 53%; }
  .mr-tools { display: none; } .mr-notes { padding: 44px 0 10px; } .mr-zoom { bottom: auto; top: 14px; }
}
@media (max-width: 360px) { .tidy-notes li { font-size: 0.74rem; } .tidy-tag { font-size: 0.6rem; } }
@media (prefers-reduced-motion: reduce) { .tidy-notes li, .tidy-tag, .tab-arrow { transition: none; } }

/* v3: app names on tabs, louder tidy button, Miro note layout */
.board-row .desk-tabs .desk-bar .tab:not(.is-active) { padding-inline: 12px; font-size: 0.82rem; gap: 8px; }
.tidy-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border: 2px solid #0f1a2b; border-radius: 999px; background: #d7ff5f; color: #0f1a2b; font: 800 1rem/1 var(--sans); letter-spacing: -0.01em; bottom: 10px; box-shadow: 0 0 0 6px rgba(215, 255, 95, 0.35), 0 14px 26px -12px rgba(15, 26, 43, 0.6); animation: tidy-nudge 2.4s ease-in-out infinite; }
.tidy-btn span { display: inline-flex; align-items: center; gap: 8px; line-height: 1; }
.tidy-btn:hover { background: #c8f53a; }
.tidy-board[data-state="tidy"] .tidy-btn { animation: none; background: #fff; box-shadow: 0 10px 22px -12px rgba(15, 26, 43, 0.5); }
.tidy-off, .tidy-board[data-state="tidy"] .tidy-on { display: none; } .tidy-board[data-state="tidy"] .tidy-off { display: inline-flex; }
@keyframes tidy-nudge { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
@media (prefers-reduced-motion: reduce) { .tidy-btn { animation: none; } }
.bp-miro { padding-left: 56px; padding-right: 56px; }
.mr-tools { top: 56px; translate: none; }
.mr-notes { flex-wrap: wrap; align-items: flex-start; gap: 22px; padding: 30px 0 10px; }
.mr-notes .sticky.note-skip { flex: 0 1 175px; max-width: 175px; rotate: -2.5deg; margin-top: -6px; }
.mr-notes .sticky.note-dd { flex: 0 1 250px; max-width: 250px; rotate: 2deg; margin-top: 46px; padding: 22px 20px 18px; }
.mr-notes .note-dd .hand { font-size: 1.35rem; }
@media (max-width: 520px) {
  .bp-miro { padding: 18px 12px 74px; }
  .mr-notes { padding-top: 44px; } .mr-notes .sticky.note-dd { margin-top: 0; }
  .tidy-btn { height: 44px; padding: 0 20px; font-size: 0.92rem; }
}
.tidy-btn .tidy-off, .tidy-board[data-state="tidy"] .tidy-btn .tidy-on { display: none; } .tidy-board[data-state="tidy"] .tidy-btn .tidy-off { display: inline-flex; }
@media (min-width: 521px) {
  .board-panel { min-height: 520px; }
  .tidy-board { height: 380px; }
  .tidy-board[data-state="tidy"] li:nth-child(-n+2) { top: 3%; }
  .tidy-board[data-state="tidy"] li:nth-child(3), .tidy-board[data-state="tidy"] li:nth-child(4) { top: 28%; }
  .tidy-board[data-state="tidy"] li:nth-child(5), .tidy-board[data-state="tidy"] li:nth-child(6) { top: 53%; }
}
@media (min-width: 901px) and (max-width: 1100px) { .tidy-notes li { font-size: 0.8rem; padding: 8px 9px 8px 13px; } }

/* v4: highlights count fades in on tidy; sparkly (not green) tidy button; Claude chat; FigJam board */
.dt-meta { opacity: 0; translate: 0 4px; transition: opacity 0.5s ease 0.45s, translate 0.5s ease 0.45s; }
.dt-app:has(.tidy-board[data-state="tidy"]) .dt-meta { opacity: 1; translate: 0 0; }
.tidy-btn { overflow: visible; background: #1c1c22; color: #fff; border: 0; box-shadow: 0 0 0 4px rgba(255, 216, 77, 0.28), 0 14px 26px -12px rgba(15, 26, 43, 0.65); animation: none; isolation: isolate; }
.tidy-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(110deg, #1c1c22 30%, #4a4a58 45%, #1c1c22 60%) 0 0 / 250% 100%; animation: tidy-shimmer 2.8s linear infinite; }
.tidy-btn:hover { background: #2a2a33; }
.spk { position: absolute; width: 14px; height: 14px; background: #ffd84d; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: tidy-twinkle 1.8s ease-in-out infinite; pointer-events: none; }
.spk.s1 { left: -8px; top: -9px; }
.spk.s2 { right: -6px; top: -11px; width: 10px; height: 10px; background: #fff3b0; animation-delay: 0.45s; }
.spk.s3 { right: -12px; bottom: -6px; width: 12px; height: 12px; animation-delay: 0.9s; }
.spk.s4 { left: 18%; bottom: -10px; width: 8px; height: 8px; background: #ffe680; animation-delay: 1.3s; }
@keyframes tidy-twinkle { 0%, 100% { opacity: 0.15; scale: 0.4; rotate: 0deg; } 50% { opacity: 1; scale: 1; rotate: 45deg; } }
@keyframes tidy-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.tidy-board[data-state="tidy"] .tidy-btn { background: #fff; color: #1c1c22; border: 1px solid #d9d9e0; box-shadow: 0 10px 22px -12px rgba(15, 26, 43, 0.5); }
.tidy-board[data-state="tidy"] .tidy-btn::after, .tidy-board[data-state="tidy"] .spk { display: none; }
@media (prefers-reduced-motion: reduce) { .tidy-btn::after, .spk { animation: none; } .spk { opacity: 0.9; } .dt-meta { transition: none; } }

/* Claude tab: prompt and reply */
.bp-claude { grid-template-rows: auto 1fr auto; }
.cl-chat { display: grid; align-content: center; gap: 14px; max-width: 440px; width: 100%; justify-self: center; }
.cl-user { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: #f0eee6; color: #3d3929; font-size: 0.86rem; line-height: 1.5; }
.cl-av { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #3d3929; color: #faf9f5; font-size: 0.75rem; font-weight: 700; }
.cl-reply { padding: 2px 4px; color: #3d3929; font-size: 0.86rem; line-height: 1.55; }
.cl-reply ul { margin: 6px 0 0; padding-left: 18px; list-style: disc; }
.cl-reply li + li { margin-top: 3px; }
.cl-spark { display: block; width: 20px; height: 20px; margin-top: 10px; }

/* FigJam tab */
.bp-figjam { background-color: #f5f5f5; background-image: radial-gradient(#d9d9d9 1.2px, transparent 1.4px); background-size: 24px 24px; padding-bottom: 110px; }
.fj-name { position: absolute; left: 14px; top: 14px; display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06); font-size: 0.8rem; font-weight: 600; color: #1e1e1e; }
.fj-name img { width: 12px; height: 18px; object-fit: contain; }
.fj-toolbar { position: absolute; left: 50%; bottom: 58px; translate: -50% 0; display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 14px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.05); }
.fj-toolbar svg { width: 30px; height: 30px; padding: 6px; border-radius: 8px; fill: none; stroke: #1e1e1e; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.fj-toolbar svg.on { background: #0d99ff; stroke: #fff; }
.fj-sticky { width: 22px; height: 22px; margin: 0 4px; border-radius: 2px; background: #ffd966; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); rotate: -6deg; }
.fj-notes { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 22px; padding-top: 30px; }
.fj-notes .sticky.fj-skip { flex: 0 1 220px; max-width: 220px; rotate: -2deg; margin-top: -4px; }
.fj-notes .sticky.fj-skip .hand { font-size: 1.2rem; line-height: 1.3; }
.fj-notes .sticky.note-dd { flex: 0 1 240px; max-width: 240px; rotate: 2deg; margin-top: 40px; padding: 22px 20px 18px; color: #0f1a2b; text-decoration: none; cursor: pointer; transition: translate 0.2s ease, rotate 0.2s ease; }
.fj-notes .sticky.note-dd .hand { display: block; text-align: center; font-size: 1.35rem; margin-top: 6px; text-decoration: underline; text-underline-offset: 4px; }
.fj-notes .sticky.note-dd:hover, .fj-notes .sticky.note-dd:focus-visible { rotate: 0deg; translate: 0 -4px; }
.fj-notes .sticky.note-dd:focus-visible { outline: 3px solid #0f1a2b; outline-offset: 4px; }
@media (min-width: 901px) and (max-width: 1100px) { .fj-notes .sticky.fj-skip { flex-basis: 190px; } .fj-notes .sticky.note-dd { flex-basis: 200px; } }
@media (max-width: 520px) {
  .bp-figjam { padding: 18px 12px 140px; }
  .fj-notes { padding-top: 46px; } .fj-notes .sticky.note-dd { margin-top: 0; }
  .fj-toolbar { bottom: 70px; } .fj-toolbar svg { width: 26px; height: 26px; padding: 5px; }
  .cl-chat { gap: 10px; } .cl-user, .cl-reply { font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) { .fj-notes .sticky.note-dd { transition: none; } }
.bp-figjam { padding-left: 52px; padding-right: 52px; padding-bottom: 120px; }
.fj-notes { flex-wrap: nowrap; gap: 18px; }
.fj-notes .sticky.fj-skip { flex: 0 1 185px; max-width: 185px; padding: 18px 16px 12px; }
.fj-notes .sticky.fj-skip .hand { font-size: 1.12rem; }
.fj-notes .sticky.note-dd { flex: 0 1 215px; max-width: 215px; }
@media (max-width: 1100px) { .fj-notes { flex-wrap: wrap; } }
@media (min-width: 521px) and (max-width: 900px) { .fj-notes { flex-wrap: nowrap; } }
/* all tabs share one height (the tallest), so the board doesn't jump when switching */
.board.board-tabs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.board-tabs > .board-panel { grid-area: 1 / 1; }
.board-tabs > .board-panel[hidden] { display: grid; visibility: hidden; }
.cl-user, .cl-reply { font-size: 0.82rem; } .cl-chat { gap: 10px; } .cl-spark { margin-top: 6px; }

/* v5: wider board column on big screens; FigJam landing animation */
@media (min-width: 1100px) { .board-row { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); } }
@media (min-width: 521px) { .tidy-btn { bottom: 24px; } }
.cl-av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.fj-notes .sticky.fj-skip { flex: 0 1 265px; max-width: 265px; }
.fj-notes .sticky.note-dd { flex: 0 1 205px; max-width: 205px; }
@media (max-width: 1099px) { .fj-notes .sticky.fj-skip { flex-basis: 230px; max-width: 230px; } }
.fj-react { display: inline-flex; align-items: center; gap: 4px; transition: box-shadow 0.2s ease, background 0.2s ease; }
.fj-react b { font-weight: 700; color: inherit; }
.fj-react.is-hit { background: #e5f4ff; box-shadow: 0 0 0 2px #0d99ff; animation: fj-pop 0.45s ease; }
@keyframes fj-pop { 0% { scale: 1; } 40% { scale: 1.3; } 100% { scale: 1; } }
.fj-burst { position: absolute; z-index: 6; font-size: 20px; pointer-events: none; animation: fj-float 1.4s ease-out forwards; }
@keyframes fj-float { 0% { opacity: 0; translate: 0 0; scale: 0.6; } 15% { opacity: 1; scale: 1.2; } 100% { opacity: 0; translate: var(--dx, 0px) -80px; scale: 1; } }
.fj-toolbar svg { transition: background 0.2s ease, stroke 0.2s ease; }
.fj-toolbar svg.on { background: #0d99ff; stroke: #fff; }
.fj-toolbar svg.is-press { animation: fj-pop 0.35s ease; }
.fj-draw { position: absolute; z-index: 4; width: 160px; height: 90px; overflow: visible; pointer-events: none; left: calc(50% + 60px); top: 40px; }
.fj-ink-text { font-family: var(--hand); font-weight: 700; font-size: 28px; fill: #f24822; clip-path: inset(0 0 0 0); }
.fj-ink-arrow, .fj-ink-head { fill: none; stroke: #f24822; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.fj-draw.is-reset .fj-ink-text { clip-path: inset(0 100% 0 0); }
.fj-draw.is-reset .fj-ink-arrow, .fj-draw.is-reset .fj-ink-head { stroke-dashoffset: 1; }
.fj-draw.is-writing .fj-ink-text { transition: clip-path 1.3s steps(24, end); clip-path: inset(0 0 0 0); }
.fj-draw.is-arrow .fj-ink-arrow { transition: stroke-dashoffset 0.6s ease-in-out; stroke-dashoffset: 0; }
.fj-draw.is-arrow .fj-ink-head { transition: stroke-dashoffset 0.3s ease-out 0.6s; stroke-dashoffset: 0; }
.fj-cursor { position: absolute; z-index: 7; left: 0; top: 0; display: none; pointer-events: none; transition: left 0.8s cubic-bezier(.45,.05,.3,1), top 0.8s cubic-bezier(.45,.05,.3,1); }
.fj-cursor.is-on { display: block; }
.fj-cursor svg { display: block; width: 22px; height: 22px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.fj-c-arrow path { fill: #7b3fe4; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.fj-c-pen { display: none !important; } .fj-c-pen path { fill: #f24822; stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; }
.fj-cursor.is-pen .fj-c-arrow { display: none; } .fj-cursor.is-pen .fj-c-pen { display: block !important; }
.fj-cursor span { position: absolute; left: 18px; top: 18px; padding: 2px 7px; border-radius: 4px 10px 10px 10px; background: #7b3fe4; color: #fff; font: 700 0.7rem/1.3 var(--sans); white-space: nowrap; }
.fj-cursor.is-pen span { background: #c7361a; }
.fj-cursor.is-click svg { animation: fj-click 0.3s ease; }
@keyframes fj-click { 50% { scale: 0.8; } }
.fj-notes .sticky.note-dd .hand { white-space: nowrap; font-size: 1.22rem; }
@media (max-width: 520px), (min-width: 901px) and (max-width: 1099px) { .fj-notes .sticky.note-dd { margin-top: 84px; } }
.board.board-tabs { align-items: stretch; }

/* v6: bigger Claude text; red collaborator cursor throughout; no stray dot before the arrow is drawn */
.cl-top { font-size: 1.1rem; } .cl-top img { width: 22px; height: 22px; }
.cl-user, .cl-reply { font-size: 0.98rem; line-height: 1.5; }
.cl-av { width: 30px; height: 30px; }
.cl-input { font-size: 0.95rem; }
@media (max-width: 520px) { .cl-user, .cl-reply { font-size: 0.9rem; } }
.fj-c-arrow path { fill: #f24822; }
.fj-cursor span, .fj-cursor.is-pen span { background: #c7361a; }
.fj-draw.is-reset .fj-ink-arrow, .fj-draw.is-reset .fj-ink-head { opacity: 0; }
.fj-draw.is-arrow .fj-ink-arrow { opacity: 1; }
.fj-draw.is-arrow .fj-ink-head { opacity: 1; transition: stroke-dashoffset 0.3s ease-out 0.6s, opacity 0s linear 0.6s; }

/* v7: much wider board section; roomier Claude chat; bigger FigJam notes */
.board-section > .wrap { width: min(100% - 40px, 1440px); }
@media (min-width: 1100px) { .board-row { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); } }
.cl-chat { max-width: none; gap: 26px; }
.cl-user { padding: 14px 18px; }
.cl-text p + p { margin-top: 1.1em; }
.cl-reply { padding: 0 6px; }
@media (min-width: 1100px) {
  .fj-notes { gap: 30px; }
  .fj-notes .sticky.fj-skip { flex: 0 1 330px; max-width: 330px; padding: 24px 22px 16px; }
  .fj-notes .sticky.fj-skip .hand { font-size: 1.4rem; }
  .fj-notes .sticky.note-dd { flex: 0 1 280px; max-width: 280px; padding: 26px 24px 20px; margin-top: 56px; }
  .fj-notes .sticky.note-dd .hand { font-size: 1.45rem; }
}
@media (min-width: 521px) and (max-width: 1099px) {
  .fj-notes .sticky.fj-skip { flex-basis: 260px; max-width: 260px; }
  .fj-notes .sticky.note-dd { flex-basis: 230px; max-width: 230px; }
}
@media (max-width: 520px) { .fj-notes .sticky.fj-skip { max-width: 100%; flex-basis: 100%; } .fj-notes .sticky.note-dd { flex-basis: 85%; max-width: 260px; } }
.cl-text { flex: 1; min-width: 0; }

/* FigJam animation 30% faster (CSS parts) */
.fj-draw.is-writing .fj-ink-text { transition: clip-path 0.91s steps(24, end); }
.fj-draw.is-arrow .fj-ink-arrow { transition: stroke-dashoffset 0.42s ease-in-out; }
.fj-draw.is-arrow .fj-ink-head { transition: stroke-dashoffset 0.21s ease-out 0.42s, opacity 0s linear 0.42s; }
.fj-burst { animation-duration: 1s; }
.fj-react.is-hit { animation-duration: 0.32s; }
.fj-cursor.is-click svg { animation-duration: 0.21s; }
/* Bigger "Tools I use" pills */
.board-row .tools-list { gap: 10px; }
.board-row .tools-list li { gap: 10px; padding: 10px 18px 10px 14px; font-size: 1rem; }
.board-row .tools-list img { width: 24px; height: 24px; border-radius: 5px; }
@media (max-width: 520px) { .board-row .tools-list li { padding: 8px 14px 8px 11px; font-size: 0.92rem; } .board-row .tools-list img { width: 20px; height: 20px; } }

/* FigJam: "click here" is drawn stroke by stroke (each letter is a pen path) */
.fj-stroke { fill: none; stroke: #f24822; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fj-arrow { stroke-width: 3.5; }
.fj-word .fj-stroke { stroke-width: 2.95; }

/* 2026-10-20: more room between the company logos and the philosophy */
main > section#philosophy { padding-top: calc(var(--sec-half) + clamp(28px, 4vw, 56px)); }

/* Claude tab: the spark animates as if finishing the reply each time the tab opens, then rests */
.cl-spark { width: 24px; height: 24px; transform-origin: 50% 50%; }
.bp-claude:not([hidden]) .cl-spark { animation: cl-spark 1.5s cubic-bezier(.45, 0, .25, 1) 0.2s 2 both; }
@keyframes cl-spark {
  0% { transform: rotate(0deg) scale(1); }
  30% { transform: rotate(90deg) scale(0.72); }
  55% { transform: rotate(220deg) scale(1.12); }
  80% { transform: rotate(310deg) scale(0.9); }
  100% { transform: rotate(360deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .bp-claude:not([hidden]) .cl-spark { animation: none; } }

/* 2026-10-20: Claude panel title "Human in the loop", same format as the Dovetail and FigJam board titles */
.cl-top { font-size: 0.86rem; font-weight: 700; letter-spacing: -0.01em; } .cl-top img { width: 18px; height: 18px; }

/* 2026-10-20: Unsplash photos on the featured case study cards */
.feat-art.has-photo { overflow: hidden; background: none; aspect-ratio: 12 / 7; }
.feat-art.has-photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-credit { margin-top: 12px; text-align: center; font-size: 0.78rem; color: var(--ink-soft); }
.photo-credit a { color: inherit; text-underline-offset: 3px; }

/* 2026-10-21: case study structure v2: facts row, big visual, impact at a glance, process with reasons,
   constraints, participants & ethics, research materials, goal vs result, learnings and retro */
.cs-v2 main > section { padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(28px, 4vw, 48px); }
.cs-v2 .cs-hero { padding-bottom: 8px; }
.cs-v2 .meta { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 22px; }
.cs-v2 .meta dd { font-size: 0.95rem; line-height: 1.45; }
.cs-v2 h2.sec { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: 10px; }
.cs-v2 .sec-lede { color: var(--ink-soft); font-size: 1.08rem; max-width: 760px; margin-bottom: clamp(22px, 3vw, 32px); }
.cs-v2 .kicker { font-family: var(--hand); font-weight: 700; font-size: 1.5rem; color: var(--accent-text); margin-bottom: 4px; }

/* Big visual: the case study's illustration, large */
.cs-visual { display: grid; place-items: center; padding: clamp(18px, 4vw, 40px); border-radius: var(--radius); background: #eef3ff; }
.cs-visual.fa-2 { background: #fff1e8; } .cs-visual.fa-3 { background: #eefae7; }
.cs-visual svg { width: min(100%, 560px); height: auto; max-height: 300px; fill: none; stroke: #1b2433; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cs-visual .fa-bg { stroke: none; fill: #dbe5ff; } .cs-visual.fa-2 .fa-bg { fill: #ffe0cc; } .cs-visual.fa-3 .fa-bg { fill: #d8f2c8; }
.cs-visual .fa-blue { fill: #c6d6ff; } .cs-visual .fa-peach { fill: #ffc8a6; } .cs-visual .fa-lime { fill: #d7ff5f; } .cs-visual .fa-white { fill: #fff; } .cs-visual .fa-ink { fill: #1b2433; }
.cs-visual text { fill: #1b2433; stroke: none; font-family: var(--sans); font-weight: 700; font-size: 12px; }

/* TL;DR and impact at a glance */
.tldr { display: grid; grid-template-columns: 180px 1fr; gap: clamp(16px, 3vw, 40px); align-items: start; }
.tldr h2 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); letter-spacing: -0.05em; }
.tldr p { font-size: 1.15rem; line-height: 1.6; }
.glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: clamp(24px, 3vw, 36px); }
.glance .card { padding: 22px; }
.glance h3 { font-size: 1.15rem; margin: 2px 0 12px; }
.glance li { margin-bottom: 9px; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.45; }
.glance li b { color: var(--ink); font-weight: 800; }

/* The problem: statement, one quote, numbers */
.problem { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; }
.problem .big-statement { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
.problem .quote blockquote { font-size: 1.05rem; }
.cs-v2 .big-stats { margin-top: clamp(24px, 3vw, 36px); }
.cs-v2 .big-stat b { font-size: clamp(2.3rem, 4.4vw, 3.2rem); }

/* Process: what I owned, and why */
.process { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; counter-reset: pstep; }
.process li { counter-increment: pstep; position: relative; padding: 22px 22px 20px 64px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.process li::before { content: counter(pstep); position: absolute; left: 20px; top: 20px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--btn-bg); color: var(--btn-ink); font-weight: 700; font-size: 0.85rem; }
.process h3 { font-size: 1.08rem; letter-spacing: -0.01em; margin-bottom: 6px; }
.process p { color: var(--ink-soft); font-size: 0.95rem; }
.process .why { margin-top: 8px; color: var(--ink); }
.process .why b { color: var(--accent-small); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; margin-right: 6px; }

/* Constraints and participants: three cards */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.trio .card { padding: 24px; }
.trio h3 { font-size: 1.1rem; margin: 2px 0 8px; }
.trio p, .trio li { color: var(--ink-soft); font-size: 0.95rem; }
.trio li { margin-bottom: 6px; }
.trio .bullets li { margin-bottom: 8px; }

/* Research materials: interview guide excerpt */
.guide { padding: clamp(20px, 3vw, 32px); border: 2px dashed var(--line); border-radius: 18px; }
.guide-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 6px 0 20px; font-size: 0.9rem; color: var(--ink-soft); }
.guide-meta b { color: var(--ink); }
.guide-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.guide-parts > div { padding: 18px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.guide-parts h4 { font-size: 0.98rem; margin-bottom: 8px; }
.guide-parts h4 span { color: var(--accent-text); margin-right: 6px; }
.guide-parts li { position: relative; padding-left: 16px; margin-bottom: 6px; color: var(--ink-soft); font-size: 0.93rem; }
.guide-parts li::before { content: "–"; position: absolute; left: 0; }
.guide-note { margin-top: 16px; padding: 14px 18px; background: #ffe86b; color: #0f1a2b; border-radius: 4px; rotate: -0.4deg; box-shadow: 0 10px 18px -14px rgba(15, 26, 43, 0.5); }
.guide-note b { font-family: var(--hand); font-size: 1.3rem; margin-right: 6px; }
.nda { margin-top: 16px; font-size: 0.92rem; color: var(--ink-soft); }

/* Goal vs result */
.goal { display: grid; grid-template-columns: 1fr auto 1.4fr; gap: 16px; align-items: stretch; margin-bottom: clamp(22px, 3vw, 32px); }
.goal .card { padding: 22px 24px; }
.goal .arrow { align-self: center; font-size: 1.8rem; font-weight: 800; color: var(--accent-text); }
.goal p { color: var(--ink); font-size: 1.05rem; font-weight: 600; line-height: 1.45; }

/* Learnings and what I'd do differently */
.retro { margin-top: clamp(26px, 4vw, 40px); padding: clamp(22px, 3vw, 32px); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.retro .kicker { font-size: 1.7rem; margin-bottom: 10px; }
.retro p { color: var(--ink-soft); font-size: 1.02rem; max-width: 860px; }
.retro p + p { margin-top: 12px; }
.learn-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.learn-list .card { padding: 22px; }
.learn-list h3 { font-size: 1.05rem; margin-bottom: 8px; }
.learn-list p { color: var(--ink-soft); font-size: 0.95rem; }

@media (max-width: 900px) {
  .cs-v2 .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glance, .trio, .learn-list { grid-template-columns: 1fr; }
  .problem, .tldr { grid-template-columns: 1fr; }
  .process, .guide-parts { grid-template-columns: 1fr; }
  .goal { grid-template-columns: 1fr; } .goal .arrow { justify-self: center; rotate: 90deg; }
}
@media (max-width: 420px) { .cs-v2 .meta { grid-template-columns: 1fr; } .process li { padding-left: 58px; } }

/* 2026-10-21: closing line at the end of each case study's impact section */
.cs-v2 .closing { margin-top: clamp(30px, 4vw, 48px); text-align: center; font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; }
.cs-v2 .trio .bullets li { font-size: 0.93rem; }

/* 2026-10-21 round 8 */
/* Philosophy cards: no hover lift */
#philosophy .pin:hover { translate: none; }
/* Scruffy black pen underline */
.scrawl { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5 C 22 5.5, 48 9.5, 70 6.8 S 104 6, 118 7.6' fill='none' stroke='%230f1a2b' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 100% / 100% 0.42em; padding-bottom: 0.16em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
#about .section-head h2 em { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5 C 22 5.5, 48 9.5, 70 6.8 S 104 6, 118 7.6' fill='none' stroke='%230f1a2b' stroke-width='2.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 100% / 100% 0.3em; padding-bottom: 0.12em; }
/* Impact page: more room above "Featured case studies", less under it; more space above the client tabs, less below */
.featured-top { padding-top: clamp(18px, 2.6vw, 32px); padding-bottom: clamp(52px, 7vw, 84px); }
.jump-bar + .study { padding-top: clamp(18px, 2.6vw, 30px); }

/* 2026-10-21: Claude tab plays a short chat each time it opens: type, send, think, stream the reply.
   The spark keeps its spin, now running while Claude thinks and writes, then it rests. */
.bp-claude:not([hidden]) .cl-spark { animation: none; }
.bp-claude:not([hidden]) .cl-spark.is-spinning, .cl-think img { animation: cl-spark 1.5s cubic-bezier(.45, 0, .25, 1) infinite; }
.bp-claude .cl-input { min-width: 0; max-width: 100%; }
.cl-reply { position: relative; }
.cl-think { position: absolute; left: 6px; top: 0; display: flex; align-items: center; gap: 8px; color: #6b6656; font-size: 0.9rem; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.cl-think img { width: 20px; height: 20px; transform-origin: 50% 50%; }
.cl-think span { background: linear-gradient(90deg, #736e5e 0%, #3d3929 45%, #736e5e 90%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: cl-shimmer 1.6s linear infinite; }
@keyframes cl-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.bp-claude.is-thinking .cl-think { opacity: 1; }
.bp-claude.is-playing .cl-user { opacity: 0; translate: 0 8px; }
.cl-user { transition: opacity .3s ease, translate .3s ease; }
.bp-claude.is-playing .cl-spark:not(.is-spinning) { opacity: 0; }
.cl-w { transition: opacity .28s ease; }
.cl-w.is-off { opacity: 0; }
.bp-claude.is-playing .cl-reply li { transition: opacity .2s ease; }
.cl-field { position: relative; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.cl-typed { display: none; color: #3d3929; }
.cl-input.has-text .cl-ph { display: none; }
.cl-input.has-text .cl-typed { display: inline; }
.cl-input.has-text .cl-typed::after { content: ""; display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -0.18em; background: #3d3929; animation: cl-caret 1s steps(1) infinite; }
@keyframes cl-caret { 50% { opacity: 0; } }
.cl-input i { transition: transform .12s ease, background-color .2s ease; }
.cl-input:not(.has-text) i { background: #e3a58c; }
.cl-input i.is-press { transform: scale(0.86); }
@media (prefers-reduced-motion: reduce) { .bp-claude:not([hidden]) .cl-spark.is-spinning, .cl-think img, .cl-think span { animation: none; } }

/* 2026-10-21: Impact page "What changed" cards a little wider, and each stat's text starts on the same line as its highlighted figure */
@media (min-width: 901px) { .study-grid { grid-template-columns: 1.15fr 1fr; } }
.study .study-side .stats li { flex-wrap: nowrap; align-items: baseline; }
.study .study-side .stats li .stat-pill { flex: none; }

/* 2026-10-24: Claude tab starts at hitting enter (no typing), so no caret */
.cl-input.no-caret .cl-typed::after { display: none; }

/* 2026-10-24: my message softly pops into place (no text in the input box) */
.bp-claude .cl-user { transform-origin: 50% 100%; transition: opacity .25s ease-out, translate .6s cubic-bezier(.34, 1.56, .64, 1), scale .6s cubic-bezier(.34, 1.56, .64, 1); }
.bp-claude.is-playing .cl-user { opacity: 0; translate: 0 40px; scale: 0.92; }
@media (prefers-reduced-motion: reduce) { .bp-claude .cl-user { transition: none; } }

/* 2026-10-26: link underlines sit close to the words; they thicken on hover */
.proof a, .study .more, .feat-more { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: text-decoration-thickness .2s ease; }
.proof a:hover, .proof a:focus-visible, .study .more:hover, .study .more:focus-visible, .feat:hover .feat-more, .feat:focus-visible .feat-more { text-decoration-thickness: 2px; }
.featured-top .feat-more { text-decoration: none; }

/* 2026-10-26: testimonial cards get a big orange quote mark, top right */
.review { position: relative; }
.review::before { content: "“"; position: absolute; top: 4px; right: 18px; font-family: var(--sans); font-weight: 800; font-size: 4.2rem; line-height: 1; color: var(--accent); pointer-events: none; }


/* 2026-10-26: rougher pen lines in "Sound familiar?" — each one starts and ends in a slightly different place */
.pain:nth-child(1) .scrawl { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M6 9.4 C 20 7.2, 41 10.6, 63 7.9 S 98 6.4, 116 6.1' fill='none' stroke='%230f1a2b' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); background-size: 112% 0.44em; background-position: -0.35em 100%; }
.pain:nth-child(2) .scrawl { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M1 7.2 C 18 8.9, 39 5.6, 58 8.3 S 92 9.9, 109 7.4 L 114 8.6' fill='none' stroke='%230f1a2b' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); background-size: 109% 0.44em; background-position: -0.2em 100%; }
.pain:nth-child(3) .scrawl { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M3 8.8 C 26 6.1, 50 10.1, 74 7.3 S 106 5.2, 119 8.9' fill='none' stroke='%230f1a2b' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); background-size: 108% 0.44em; background-position: -0.3em 100%; }

/* 2026-10-26: on wide screens "Your next" hangs a little to the left of "User", as on smaller screens */
@media (min-width: 1000px) { .your-next { margin-left: -14px; } }
@media (min-width: 1200px) { .your-next { margin-left: calc(-1 * min(58px, 4vw)); translate: 0 0.12em; } }

/* 2026-10-26: a little more space before "Sound familiar?" and "Beyond research" so they read as new sections */
main > section#familiar, main > section#about { padding-top: calc(var(--sec-half) * 2.2); }

/* 2026-10-26: enormous faint question mark behind "Sound familiar?" */
main > section#familiar { position: relative; isolation: isolate; overflow-x: clip; overflow-y: visible; }
.qmark { position: absolute; z-index: -1; top: 3%; left: 93%; height: 88%; width: auto; aspect-ratio: 60 / 88; translate: -50% 0; rotate: 17deg; overflow: visible; pointer-events: none; user-select: none; }
.qmark text { font-family: var(--sans); font-weight: 800; font-size: 100px; fill: var(--ink); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; paint-order: stroke; }
.qmark { opacity: 0.06; }
#familiar .pain { background: color-mix(in srgb, var(--card) 80%, transparent); }

/* Fintech case study: evidence → need → implication chain */
.chain { display: grid; gap: 12px; margin: 4px 0 0; }
.chain dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 2px; }
.chain dd { margin: 0; }
.chain > div + div { padding-top: 12px; border-top: 1px dashed var(--line); }
.evidence-note { margin-top: 22px; padding: 16px 20px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); color: var(--ink-soft); }
.evidence-note b { display: block; color: var(--ink); margin-bottom: 4px; }

/* Fintech case study: proposal details */
.weeks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.weeks .card { padding: 22px 24px; }
.weeks h4 { font-size: 1.05rem; margin: 10px 0 8px; }
.weeks ul { margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: 0.95rem; }
.weeks ul li { margin-bottom: 4px; }
.criteria { margin-top: 22px; padding: 22px 24px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.criteria-grid, .tag-defs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px 28px; margin: 10px 0 0; }
.criteria h4 { font-size: 0.95rem; margin: 0 0 4px; }
.criteria p { margin: 0; color: var(--ink-soft); font-size: 0.93rem; }
.tag-defs > div { padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.tag-defs dt { font-weight: 700; margin-bottom: 2px; }
.tag-defs dd { margin: 0; color: var(--ink-soft); font-size: 0.93rem; }
@media (max-width: 760px) { .weeks { grid-template-columns: 1fr; } }

/* Fintech case study: desk research, jobs, mental models, tables */
.layers { list-style: none; padding: 0; margin: 18px 0 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.layers li { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 0.9rem; color: var(--ink-soft); }
.layers b { color: var(--ink); margin-right: 6px; }
.desk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.desk-grid .card { padding: 24px; }
.desk-grid h3 { font-size: 1.1rem; margin: 10px 0 8px; }
.desk-grid p { color: var(--ink-soft); font-size: 0.95rem; }
.desk-grid .src { margin-top: 12px; font-size: 0.85rem; }
.desk-grid .src a, .qs a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.desk-grid .src a:hover { text-decoration-thickness: 2px; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.table-scroll:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cs-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.cs-table th, .cs-table td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.cs-table tbody tr:last-child th, .cs-table tbody tr:last-child td { border-bottom: 0; }
.cs-table thead th { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.cs-table td { color: var(--ink-soft); }
.cs-table tbody th { font-weight: 700; min-width: 11em; }
.guide .cs-table td { min-width: 10em; }
.table-note { margin: 10px 0 0; color: var(--ink-soft); font-size: 0.92rem; max-width: 72ch; }
.qs details { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 0 20px; margin-bottom: 10px; }
.qs summary { cursor: pointer; padding: 16px 0; font-weight: 700; }
.qs summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.qs details p, .qs details ul { color: var(--ink-soft); font-size: 0.95rem; margin: 0 0 10px; }
.qs details ul { padding-left: 20px; margin-bottom: 18px; }
.qs details p b { display: block; color: var(--ink); margin-bottom: 2px; }
.jobs .job p { margin: 0; }
.job-title { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.jobs .job .job-opp { margin-top: 10px; font-size: 0.92rem; }
.models h4 { font-size: 1.02rem; line-height: 1.45; margin: 0 0 10px; }
.models .model-imp { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.models .model-imp b { display: block; color: var(--ink); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2px; }
@media (max-width: 760px) { .desk-grid { grid-template-columns: 1fr; } }

/* Fintech case study: lean structure */
.outcome { margin-top: clamp(24px, 3vw, 36px); padding: clamp(20px, 3vw, 28px); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.outcome h2 { font-size: 1.3rem; margin-bottom: 12px; }
.outcome .ticks li { font-size: 1.02rem; }
.weeks-line { margin-top: 22px; }
.context { margin-top: clamp(22px, 3vw, 32px); padding: clamp(20px, 3vw, 28px); border: 2px dashed var(--line); border-radius: 18px; }
.context ul { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 10px; }
.context li { color: var(--ink-soft); }
.context li b { color: var(--ink); }
.context .src { font-size: 0.85rem; }
.context a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.context a:hover { text-decoration-thickness: 2px; }
.context-note { margin-top: 14px; font-size: 0.92rem; color: var(--ink-soft); }
.directions { padding: 24px; }
.directions h3 { font-size: 1.1rem; margin: 10px 0 10px; }
.directions li { color: var(--ink-soft); }
.directions li b { color: var(--ink); }
.directions .maps { display: inline-block; margin-left: 4px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-soft); white-space: nowrap; }
.dir-note { margin-top: 12px; font-size: 0.9rem; color: var(--ink-soft); }
details.acc { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 0 20px; margin-top: 14px; }
.qs details.acc { margin-top: 0; }
details.acc > summary { cursor: pointer; padding: 16px 0; font-weight: 700; }
details.acc > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
details.acc[open] { padding-bottom: 20px; }
details.acc .stages { margin-top: 4px; }
details.acc .table-scroll { background: var(--bg, #fff); }
.trio .card .pin-tag + p { margin-top: 10px; }
.cs-table tbody th { font-weight: 600; }

/* Fintech case study: polish */
.cs-subtitle { font-size: clamp(1.1rem, 1.8vw, 1.3rem); font-weight: 600; color: var(--ink); margin: -6px 0 14px; max-width: 60ch; }
.ai-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; counter-reset: ai; }
.ai-steps li { counter-increment: ai; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; font-size: 0.9rem; color: var(--ink-soft); }
.ai-steps li::before { content: "0" counter(ai); display: block; font-size: 0.75rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 4px; }
.ai-steps b { display: block; color: var(--ink); margin-bottom: 4px; font-size: 0.95rem; }
.key-learning { margin-top: 14px; font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 600; line-height: 1.45; max-width: 60ch; }
@media (max-width: 900px) { .ai-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ai-steps { grid-template-columns: 1fr; } }

/* Fintech case study: section nav, tool logos, Dovetail steps */
.cs-toc { position: sticky; top: var(--nav-h, 66px); z-index: 40; display: flex; justify-content: center; padding: 10px clamp(16px, 4vw, 40px); pointer-events: none; }
.cs-toc ul { pointer-events: auto; list-style: none; margin: 0; padding: 5px; display: flex; gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; background: color-mix(in srgb, var(--card) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 10px 24px -18px rgba(15, 26, 43, 0.45); }
.cs-toc ul::-webkit-scrollbar { display: none; }
.cs-toc a { display: block; white-space: nowrap; padding: 7px 12px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.cs-toc a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.cs-toc a[aria-current="true"] { background: var(--ink); color: var(--bg, #fff); }
.cs-toc a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
main [id] { scroll-margin-top: calc(var(--nav-h, 66px) + var(--toc-h, 60px) + 20px); }
.cs-tools { list-style: none; padding: 0; margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.cs-tools li { display: inline-flex; align-items: center; gap: 7px; }
.cs-tools img { height: 22px; width: auto; border-radius: 6px; }
.cs-tools img.wordmark { height: 19px; border-radius: 0; }
.ai-steps.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .ai-steps.three { grid-template-columns: 1fr; } .cs-toc { padding-inline: 12px; } }
@media (prefers-reduced-motion: reduce) { .cs-toc a { transition: none; } }
.retro h3 { font-size: 1.25rem; margin-bottom: 10px; }

/* Fintech case study: constraint → what I did cards */
.constraints .chain dd .bullets { margin: 4px 0 0; padding-left: 18px; }
.constraints .chain dd .bullets li { margin-bottom: 6px; color: var(--ink-soft); }
.constraints .chain dd .bullets li:last-child { margin-bottom: 0; }
.constraints h3 { margin-top: 10px; }

.outcome p { color: var(--ink-soft); font-size: 1.02rem; max-width: 80ch; }
.outcome p b { color: var(--ink); }
.learnings li b { color: var(--ink); }

/* Case studies: space between the last block and the back button */
.cs-v2 main .btn-row { margin-top: clamp(36px, 5vw, 56px); }

/* "How I got here": the header gradient, mirrored (colours reversed, fading in from the top) */
main > section#about { position: relative; isolation: isolate; }
main > section#about::before { content: ""; position: absolute; inset: 0 0 calc(-1 * var(--sec-half)) 0; z-index: -1; pointer-events: none; background: linear-gradient(135deg, #dbf4cf 0%, #fdf2c0 54%, #ffe4d2 100%); opacity: 0.75; -webkit-mask-image: linear-gradient(transparent, #000 80%); mask-image: linear-gradient(transparent, #000 80%); }

/* Homepage: same space above every section title as between the logo strip and "My research philosophy"
   (previous section's bottom padding + this top padding = 2 × --sec-half + clamp(28px, 4vw, 56px)) */
main > section.methods-section { padding-top: calc(var(--sec-half) + clamp(28px, 4vw, 56px) - clamp(12px, 2vw, 24px)); }
main > section#familiar { padding-top: calc(var(--sec-half) + clamp(28px, 4vw, 56px)); }
main > section#case-studies { padding-top: calc(var(--sec-half) + clamp(28px, 4vw, 56px)); }
main > section#ai { padding-top: calc(var(--sec-half) * 2 + clamp(28px, 4vw, 56px) - clamp(12px, 2vw, 24px)); }
main > section#testimonials { padding-top: calc(var(--sec-half) + clamp(28px, 4vw, 56px)); }
main > section#about { padding-top: calc(var(--sec-half) + clamp(28px, 4vw, 56px)); }

/* "How I got here" gradient drawn per pixel on a canvas (script.js) with dithering, so there are no visible bands.
   The CSS ::before above stays as the fallback when scripts don't run. */
#about .about-grad { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% + var(--sec-half)); z-index: -1; pointer-events: none; display: block; }
#about.has-grad::before { display: none; }

/* Timeline circles: no painted ring (it showed as white on the gradient). Instead script.js cuts a transparent
   gap into the line above and below each circle with a mask, so the gradient shows through. */
.tline li::before { box-shadow: none; }
.tline::before { -webkit-mask-image: var(--tl-mask, none); mask-image: var(--tl-mask, none); }

/* Space under "See more work / Let's chat" matches the space above "A word on AI" inside the dark band */
main > section#case-studies { padding-bottom: calc(var(--sec-half) + clamp(28px, 4vw, 56px) - clamp(12px, 2vw, 24px)); }

.cs-tools img.mark { border-radius: 0; height: 20px; }
.cs-tools li { color: #000; }

/* Tool icons are cropped tight to their artwork, so the 8px gap is the real distance to every label */
.cs-tools li { gap: 8px; }
.cs-tools img.mark { height: 18px; }
.cs-tools img.wordmark { height: 13px; }
.cs-tools img.mark.wide { height: 11px; }

/* Case study section nav: wrap onto a second row when the pills don't fit (no hidden, half-cut pills);
   on phones it scrolls sideways instead, with a soft fade showing there's more */
@media (min-width: 600px) {
  .cs-toc ul { flex-wrap: wrap; justify-content: center; overflow: visible; border-radius: 24px; }
}
@media (max-width: 599px) {
  .cs-toc ul { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent); }
}

/* Case study section nav: styled exactly like the Impact page's pill bar (.jump-bar):
   a full-width strip of outlined pills, no container, transparent until it sticks,
   then one shared background behind the navigation and the pills */
.cs-toc { top: calc(var(--nav-h, 79px) - 1px); padding: 10px clamp(16px, 4vw, 40px); pointer-events: auto; transition: box-shadow 0.2s ease; }
.cs-toc ul { flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.cs-toc a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 0.9rem; font-weight: 600; }
.cs-toc a:hover { border-color: var(--ink); background: var(--card); color: var(--ink); }
.cs-toc a[aria-current="true"], .cs-toc a[aria-current="true"]:hover { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); }
.cs-toc.is-stuck { box-shadow: 0 1px 0 var(--line); }
.cs-toc.is-stuck::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; top: calc(-1 * var(--nav-h, 79px) - 1px);
  background: var(--nav-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
body:has(.cs-toc.is-stuck) .nav { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
@media (max-width: 520px) {
  .cs-toc ul { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; }
  .cs-toc a { flex: none; }
}

/* Work page: an icon for each industry subtitle */
.study .role { display: flex; align-items: center; gap: 8px; }
.study .role svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }

/* Nav pills react on hover so it's clear they're clickable */
.seg a:not([aria-current="page"]):hover { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
.seg a[aria-current="page"]:hover { background: color-mix(in srgb, var(--btn-bg) 86%, #fff); }
/* Case study pages: way back to the case studies */
.cs-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: border-color 0.15s ease; }
.cs-back:hover { border-color: var(--ink); }
.cs-back:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
#featured { scroll-margin-top: var(--nav-h, 79px); }
.objectives .card { padding: 22px 24px; }
.objectives .ticks { margin-top: 12px; }
.objectives .ticks li { color: var(--ink-soft); }
.objectives .ticks li b { color: var(--ink); }
.seg a { white-space: nowrap; }

/* Main menu: "Case studies" dropdown listing the three featured case studies */
.dd { position: relative; display: inline-flex; }
.seg .dd-btn { padding: 8px 17px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; }
.seg .dd-btn::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; translate: 0 -3px; transition: rotate 0.15s ease, translate 0.15s ease; }
.seg .dd-btn:hover, .dd.open .dd-btn { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
.seg .dd-btn.is-current { background: var(--btn-bg); color: var(--btn-ink); box-shadow: 0 2px 6px -2px rgba(15, 26, 43, 0.5); }
.seg .dd-btn.is-current:hover, .dd.open .dd-btn.is-current { background: color-mix(in srgb, var(--btn-bg) 86%, #fff); color: var(--btn-ink); }
.dd.open .dd-btn::after { rotate: -135deg; translate: 0 1px; }
.seg .dd-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dd-menu { display: none; position: absolute; top: calc(100% + 12px); right: -4px; z-index: 60; width: min(340px, calc(100vw - 24px)); padding: 8px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 24px 40px -24px rgba(15, 26, 43, 0.45); }
.dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* keeps hover alive across the gap */
.dd.open .dd-menu { display: block; }
.seg .dd-menu a { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; white-space: normal; text-align: left; flex: none; text-decoration: none; color: var(--ink); font-size: inherit; font-weight: inherit; box-shadow: none; background: none; }
.seg .dd-menu a:hover, .seg .dd-menu a:focus-visible, .seg .dd-menu a[aria-current="page"], .seg .dd-menu a[aria-current="page"]:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); box-shadow: none; }
.seg .dd-menu a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.dd-menu i { width: 44px; height: 44px; border-radius: 12px; }
.dd-menu i.t1 { background: #e8f7dc; } .dd-menu i.t2 { background: #e4ecff; } .dd-menu i.t3 { background: #ffe6d6; }
.dd-menu b { display: block; font-size: 0.9rem; font-weight: 700; line-height: 1.3; }
.dd-menu a > span > span { display: block; margin-top: 2px; font-size: 0.78rem; font-weight: 500; color: var(--ink-soft); }
/* the Case studies button follows the same sizes as the Approach / Impact tabs at every width */
@media (max-width: 620px) { .seg .dd-btn { padding: 7px 11px; font-size: 0.84rem; } }
@media (max-width: 560px) {
  .nav .seg .dd { flex: 1; }
  .nav .seg .dd-btn { flex: 1; text-align: center; padding: 7px 10px; font-size: 0.86rem; }
  .dd-menu { right: 0; }
}

/* Three tabs + Contact: switch to the compact menu a little earlier so nothing runs off the edge */
@media (min-width: 561px) and (max-width: 740px) {
  .seg a, .seg .dd-btn { padding: 7px 11px; font-size: 0.84rem; }
  .nav .btn { font-size: 0; gap: 0; padding: 6px; }
  .nav .btn::after { margin: 0; }
}

/* Main menu: plain text tabs (no pill switcher). Hover draws a soft underline; the current page
   (or Case studies, on a case study page) is dark with a solid underline */
.nav .seg { background: none; border: 0; padding: 0; gap: 2px; }
.nav .seg > a, .nav .seg .dd-btn {
  border-radius: 0; box-shadow: none; color: var(--ink-soft);
  background-color: transparent; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
  background-position: 50% calc(100% - 3px); background-size: 0 2px;
  transition: color 0.15s ease, background-size 0.2s ease;
}
.nav .seg > a:hover, .nav .seg .dd-btn:hover, .nav .dd.open .dd-btn { background-color: transparent; background-repeat: no-repeat; background-position: 50% calc(100% - 3px); color: var(--ink); background-size: calc(100% - 22px) 2px; background-image: linear-gradient(color-mix(in srgb, var(--ink) 35%, transparent), color-mix(in srgb, var(--ink) 35%, transparent)); }
.nav .seg > a[aria-current="page"], .nav .seg > a[aria-current="page"]:hover,
.nav .seg .dd-btn.is-current, .nav .seg .dd-btn.is-current:hover, .nav .dd.open .dd-btn.is-current {
  background-color: transparent; background-repeat: no-repeat; background-position: 50% calc(100% - 3px); box-shadow: none; color: var(--ink); font-weight: 700;
  background-image: linear-gradient(var(--ink), var(--ink)); background-size: calc(100% - 22px) 2.5px;
}
.nav .seg .dd-btn::after { margin-left: 7px; }
@media (prefers-reduced-motion: reduce) { .nav .seg > a, .nav .seg .dd-btn { transition: none; } }

/* Main menu tabs: the same hand-drawn pen line as the "Sound familiar?" pain points,
   faint on hover and solid for the current page */
.nav .seg > a, .nav .seg .dd-btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5 C 22 5.5, 48 9.5, 70 6.8 S 104 6, 118 7.6' fill='none' stroke='%230f1a2b' stroke-opacity='1' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); background-size: 0 0.5em; background-position: 9px calc(100% - 1px); }
.nav .seg > a:hover, .nav .seg .dd-btn:hover, .nav .dd.open .dd-btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5 C 22 5.5, 48 9.5, 70 6.8 S 104 6, 118 7.6' fill='none' stroke='%230f1a2b' stroke-opacity='0.4' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); background-size: calc(100% - 18px) 0.5em; background-position: 9px calc(100% - 1px); }
.nav .seg > a[aria-current="page"], .nav .seg > a[aria-current="page"]:hover,
.nav .seg .dd-btn.is-current, .nav .seg .dd-btn.is-current:hover, .nav .dd.open .dd-btn.is-current { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5 C 22 5.5, 48 9.5, 70 6.8 S 104 6, 118 7.6' fill='none' stroke='%230f1a2b' stroke-opacity='1' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); background-size: calc(100% - 18px) 0.5em; background-position: 9px calc(100% - 1px); }

/* Case study skill tags: one colour per kind of skill, with a small key */
.tag.t-green { background: #ddf5cf; } .tag.t-green::before { background: #2f7d1a; }
.tag-key { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); }
.tag-key span { display: inline-flex; align-items: center; gap: 6px; }
.tag-key span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.tag-key .k-m::before { background: #3d63dd; } .tag-key .k-s::before { background: #e4570f; } .tag-key .k-p::before { background: #2f7d1a; }
.objectives.biz { padding: 22px 24px; }
.objectives.ro { margin-top: 20px; padding: 22px 24px; }
.objectives.ro .table-scroll { margin-top: 14px; }
.cs-table.obj-map td:nth-child(2) { color: var(--ink); }

/* Fintech business objectives: three numbered goals side by side (distinct from the ticked Outcome list) */
.biz-goals { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.biz-goals li { display: flex; flex-direction: column; gap: 6px; padding: 4px 22px; border-left: 1px solid var(--line); }
.biz-goals li:first-child { padding-left: 0; border-left: 0; }
.biz-goals li:last-child { padding-right: 0; }
.biz-goals .n { font-size: 1.9rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: color-mix(in srgb, var(--ink) 28%, transparent); }
.biz-goals b { font-size: 1.02rem; line-height: 1.35; color: var(--ink); }
.biz-goals .why { font-size: 0.92rem; line-height: 1.45; color: var(--ink-soft); }
.biz-goals .why::before { content: "→ "; }
@media (max-width: 760px) {
  .biz-goals { grid-template-columns: 1fr; gap: 16px; }
  .biz-goals li { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .biz-goals li:first-child { padding-top: 0; border-top: 0; }
}

/* Case studies: every main title sits the same distance below the content above it
   (= one section's bottom padding + the next one's top padding) */
.cs-v2 main .wrap > .sec-lede:last-child, .cs-v2 main .wrap > .reveal:last-child > .sec-lede:last-child { margin-bottom: 0; }
.cs-v2 #materials { margin-top: calc(2 * clamp(28px, 4vw, 48px)); }

/* Pill bars pinned under the navigation near the bottom of the page (see script.js) */
.jump-bar.is-pinned, .cs-toc.is-pinned { position: fixed; top: calc(var(--nav-h, 79px) - 1px); left: 0; right: 0; }

/* Hero: "Your next" and "User" are one grouped unit (an inline block), so they always
   resize and move together. "Your next" sits on top of "User", tucked slightly left;
   its width doesn't count, so the gap before "Researcher" never changes. Offsets are in the label's em. */
.yn-anchor { display: inline-block; text-align: left; }
.yn-anchor .your-next { display: block; width: 0; white-space: nowrap; margin: 0 0 -0.27em -1.08em; translate: none; }
/* On mid-size screens the left-aligned hero sits close to the edge: nudge the text column in so "Your next" fits */
@media (min-width: 901px) { .hero-split .hero-copy { padding-left: max(0px, calc(0.67 * clamp(3rem, 6.4vw, 5.4rem) + 12px - max(20px, (100vw - 1120px) / 2))); } }

/* "How I got here", stacked layout (phones / narrow windows): the date sits on the circle,
   then the entry text and its photos share one row, photos on the right */
@media (max-width: 760px) {
  .tline li { grid-template-columns: minmax(0, 1fr) clamp(100px, 31vw, 210px); column-gap: 14px; row-gap: 10px; align-items: start; }
  .tline li .tl-side, .tline li:nth-child(even) .tl-side { display: contents; }
  .tline li .tl-year { grid-column: 1 / -1; grid-row: 1; line-height: 32px; }
  .tline li .entry, .tline li:nth-child(even) .entry { grid-column: 1; grid-row: 2; }
  .tline li .snaps, .tline li:nth-child(even) .snaps { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; width: auto; max-width: none; padding: 6px 4px 0 0; }
  .tline li .snaps .snap { width: 100%; margin: 0; }
  .tline li .snaps.pile .snap { width: 84%; }
  .tline li .snaps.pile .snap + .snap { margin: -34% 0 0 16%; }
  .tline li::before { top: 8px; } /* circle centre (16px) = middle of the 32px date line */
}
/* Phones: side by side is too narrow for the entry, so the photos sit on the date line, to the right,
   and the entry keeps the full width underneath */
@media (max-width: 520px) {
  .tline li { grid-template-columns: minmax(0, 1fr) 132px; row-gap: 12px; }
  .tline li .snaps, .tline li:nth-child(even) .snaps { grid-column: 2; grid-row: 1; padding: 0 4px 0 0; }
  .tline li .entry, .tline li:nth-child(even) .entry { grid-column: 1 / -1; grid-row: 2; }
  .tline li .snaps .snap { padding: 4px 4px 13px; }
}

/* Timeline card locations: a small map-pin icon before each place */
.entry-top .when { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; }
.entry-top .when::before {
  content: ""; flex: none; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Phones: the date shrinks a little and the photo column narrows so the photo never covers the date */
@media (max-width: 520px) {
  .tline li { grid-template-columns: minmax(0, 1fr) clamp(88px, 30vw, 132px); }
  .tline li .tl-year { font-size: clamp(1.2rem, 6vw, 1.7rem); white-space: nowrap; }
}

/* Board, Dovetail tab: when another tab is taller, the Dovetail card stretches to fill the panel
   (instead of floating in the middle with empty space above it); the notes spread over the extra room */
.bp-dovetail { align-items: stretch; }
.bp-dovetail .dt-app { display: flex; flex-direction: column; }
.bp-dovetail .tidy-board { flex: 1 0 auto; }

/* Board, small screens */
/* tabs show only their icons when the names don't fit (script.js adds .icons-only); names stay for screen readers */
.desk-tabs.icons-only .desk-bar .tab, .board-row .desk-tabs.icons-only .desk-bar .tab:not(.is-active) { font-size: 0; gap: 0; padding-inline: 12px; }
/* "Together, we can…" and "6 highlights" stay on one line: the text shrinks a little instead of wrapping */
.dt-title, .dt-meta { white-space: nowrap; }
@media (max-width: 520px) {
  .dt-title { font-size: clamp(0.72rem, 3.6vw, 0.86rem); }
  .dt-meta { font-size: clamp(0.6rem, 2.9vw, 0.7rem); }
  .dt-head { gap: 7px; padding-inline: 12px; }
  /* arrows under the board sit 6px higher */
  .tab-arrow { bottom: calc(clamp(12px, 2vw, 20px) + 6px); }
  /* messy notes spread lower so there's no big gap above "Tidy it up" */
  .tidy-board[data-state="messy"] li:nth-child(1) { top: 9%; }
  .tidy-board[data-state="messy"] li:nth-child(2) { top: 6%; }
  .tidy-board[data-state="messy"] li:nth-child(3) { top: 28%; }
  .tidy-board[data-state="messy"] li:nth-child(4) { top: 39%; }
}

/* Board: the bottom two notes are anchored to the "Tidy it up" button (by their bottom edge), so the gap
   above the button stays the same however tall the board gets; the notes above spread over any extra room */
.tidy-board[data-state] li:nth-child(5), .tidy-board[data-state] li:nth-child(6) { top: auto; } /* without JS; script.js sets exact tops */
.tidy-board[data-state="messy"] li:nth-child(5) { bottom: 164px; }
.tidy-board[data-state="messy"] li:nth-child(6) { bottom: 140px; }
.tidy-board[data-state="tidy"] li:nth-child(5), .tidy-board[data-state="tidy"] li:nth-child(6) { bottom: 98px; }
@media (max-width: 520px) {
  .tidy-board[data-state="messy"] li:nth-child(5) { bottom: 118px; }
  .tidy-board[data-state="messy"] li:nth-child(6) { bottom: 92px; }
  .tidy-board[data-state="tidy"] li:nth-child(5), .tidy-board[data-state="tidy"] li:nth-child(6) { bottom: 86px; }
}

/* Methods I use: every card is the same square at every width, and its text scales with the card
   (container units) so long words like "Participatory" never spill over the edges */
.methods-grid { grid-auto-rows: 1fr; }
.methods-grid li { container-type: inline-size; aspect-ratio: 1; min-width: 0; overflow: hidden; padding: 6% 4%; gap: 5%; }
.methods-grid li span { font-size: clamp(0.56rem, 12.6cqi, 0.86rem); line-height: 1.15; overflow-wrap: break-word; hyphens: manual; }
.methods-grid li svg { width: clamp(16px, 20cqi, 28px); height: clamp(16px, 20cqi, 28px); }
@media (max-width: 359px) { .methods-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } }
@media (min-width: 360px) and (max-width: 520px) { .methods-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Board arrows under the board (phones): 12px up in total, and "1/3" centred on the arrows' middle line */
@media (max-width: 520px) {
  .tab-arrow { bottom: calc(clamp(12px, 2vw, 20px) + 12px); }
  .tab-count { bottom: calc(clamp(12px, 2vw, 20px) + 12px + 19px); translate: -50% 50%; }
}
@media (max-width: 340px) { .nav .seg > a, .nav .seg .dd-btn { padding: 7px 6px; font-size: 0.8rem; } .nav .seg .dd-btn::after { margin-left: 5px; } }

/* FigJam tab on phones: narrower, portrait sticky notes so both fit inside the board */
@media (max-width: 520px) {
  .board-panel.bp-figjam { padding-left: 14px; padding-right: 14px; }
  .fj-notes .sticky.fj-skip { flex: 0 0 auto; width: min(210px, 80%); max-width: 80%; padding: 16px 14px 12px; }
  .fj-notes .sticky.fj-skip .hand { font-size: clamp(0.98rem, 4.6vw, 1.12rem); }
  .fj-notes .sticky.note-dd { flex: 0 0 auto; width: min(190px, 76%); max-width: 76%; padding: 18px 14px 14px; }
  .fj-notes .sticky.note-dd .hand { font-size: clamp(0.95rem, 4.4vw, 1.15rem); }
  .fj-notes .sticky.note-dd svg { max-width: 100%; height: auto; }
}

/* Hero tool cloud on narrow screens: the whole 480 × 400 composition scales down as one piece
   (script.js sets --cloud-k), so every icon, card and pill stays on screen and in proportion */
@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 519px) {
  .hero-split { overflow-x: clip; }
  .hero-split .toolcloud { width: 480px; max-width: none; transform-origin: 0 0; scale: var(--cloud-k, 1);
    margin-left: calc((100% - 480px * var(--cloud-k, 1)) / 2); margin-right: 0;
    margin-bottom: calc(400px * (var(--cloud-k, 1) - 1)); }
}

/* Hero title on centred layouts: side padding keeps room for "Your next" beside "User", and the size
   shrinks with the screen so the longest line ("& Strategist") always fits */
@media (max-width: 900px) {
  .hero-split h1 { padding-inline: 0.7em; font-size: min(clamp(3rem, 6.4vw, 5.4rem), calc((100vw - 40px) / 8)); }
}

/* Board on phones only (≤520px): shorter, with each tab's contents tightened to fit.
   Larger screens keep the original board. */
@media (max-width: 520px) {
  .board-tabs > .board-panel { min-height: 420px; }
  .tidy-board { height: 330px; }
  .cl-user, .cl-reply { font-size: 0.84rem; line-height: 1.45; }
  .cl-user { padding: 11px 13px; }
  .cl-chat { gap: 12px; }
  .board-panel.bp-figjam { padding-bottom: 126px; }
  .fj-notes { padding-top: 40px; }
  .fj-notes .sticky.note-dd { margin-top: 76px; }
}
@media (max-width: 440px) {
  .cl-user, .cl-reply { font-size: 0.8rem; }
  .cl-chat { gap: 10px; }
  .fj-notes { padding-top: 30px; }
  .fj-notes .sticky.note-dd { margin-top: 70px; }
}

/* Hero on small screens: the "tagged this" card and "Dora is listening…" pill 30% bigger,
   and a larger title (it still fits: side padding reduced, size capped by the screen width) */
@media (max-width: 519px) {
  .hero-split .toolcloud .presence { scale: 1.3; transform-origin: 0 50%; }
  .hero-split .toolcloud .rec { scale: 1.3; transform-origin: 0 0; }
  .hero-split h1 { padding-inline: 0.35em; font-size: min(3.5rem, calc((100vw - 40px) / 6.1)); }
}

/* "Based in the UK…" pill: the green dot keeps its round shape, and the text never runs to 3 lines
   (it shrinks a little on narrow screens and breaks into two balanced lines) */
.availability .dot { flex: none; }
.availability { text-wrap: balance; }
@media (max-width: 520px) { .availability { font-size: clamp(0.64rem, 3.5vw, 0.92rem); gap: 9px; padding: 6px 12px; }
@media (max-width: 300px) { .availability { padding-inline: 10px; gap: 8px; } } }

/* Board, Dovetail window on very narrow screens: never wider than the board, so it stays centred.
   The header text shrinks a little more, and would trim with "…" rather than push the window sideways */
.bp-dovetail { grid-template-columns: minmax(0, 1fr); }
.bp-dovetail .dt-app { min-width: 0; }
.dt-head { min-width: 0; }
.dt-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dt-meta { flex: none; }
@media (max-width: 340px) {
  .dt-title { font-size: clamp(0.64rem, 3.7vw, 0.78rem); }
  .dt-meta { font-size: 0.6rem; padding: 2px 6px; }
  .dt-head { gap: 6px; padding-inline: 10px; }
}
/* Below ~310px the title and the "6 highlights" count both shrink so they share one line, count top right */
@media (max-width: 310px) {
  .dt-title { font-size: clamp(0.56rem, 3.2vw, 0.64rem); }
  .dt-meta { font-size: 0.54rem; padding: 2px 5px; }
  .dt-head { gap: 4px; padding-inline: 8px; }
}

/* Menu tabs: the hover underline draws from left to right (it starts at the text's left edge) */

/* Board, Dovetail tab on phones: when tidied, each card gets its own full-width line,
   text on the left and its tag on the right (script.js stacks them above the button) */
.tidy-notes li { transition: left 0.6s cubic-bezier(.2,.8,.2,1), top 0.6s cubic-bezier(.2,.8,.2,1), rotate 0.6s ease, width 0.6s cubic-bezier(.2,.8,.2,1); }
@media (max-width: 520px) {
  /* the cards keep this same wide shape when messy, only scattered and tilted */
  .tidy-board .tidy-notes li { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; padding-block: 12px; min-height: 48px; }
  .tidy-board .tidy-notes li .tidy-tag { align-self: center; flex: none; }
  .tidy-board .tidy-notes li::before { top: 8px; bottom: 8px; }
  .tidy-board[data-state="tidy"] li, .tidy-board[data-state="tidy"] li:nth-child(even) { left: 0; }
  .tidy-board[data-state="messy"] li:nth-child(1) { left: -3%; rotate: -2.5deg; }
  .tidy-board[data-state="messy"] li:nth-child(2) { left: 4%; rotate: 2deg; }
  .tidy-board[data-state="messy"] li:nth-child(3) { left: -2%; rotate: 3deg; }
  .tidy-board[data-state="messy"] li:nth-child(4) { left: 3%; rotate: -2deg; }
  .tidy-board[data-state="messy"] li:nth-child(5) { left: -4%; rotate: 2.5deg; }
  .tidy-board[data-state="messy"] li:nth-child(6) { left: 2%; rotate: -3deg; }
}

/* Timeline locations: the pin sits inline, right before the first word, even when the place wraps onto two lines */
.entry-top .when { display: block; }
.entry-top .when::before { display: inline-block; vertical-align: -0.12em; margin-right: 5px; }

/* "How I got here" on phones: the photos get their own row under the date, bigger,
   and a pair sits side by side (slightly overlapping and tilted) instead of on top of each other */
@media (max-width: 520px) {
  .tline li { grid-template-columns: minmax(0, 1fr); }
  .tline li .snaps, .tline li:nth-child(even) .snaps { grid-column: 1; grid-row: 2; flex-direction: row; align-items: flex-start; justify-content: flex-start; padding: 4px 0 6px; }
  .tline li .entry, .tline li:nth-child(even) .entry { grid-column: 1; grid-row: 3; }
  .tline li .snaps .snap { width: min(60%, 240px); padding: 5px 5px 16px; }
  .tline li .snaps.pile .snap { width: min(49%, 210px); }
  .tline li .snaps.pile .snap + .snap { margin: 22px 0 0 -5%; }
}

/* "Based in the UK…" pill text: script.js narrows it to its longest line when it wraps */
.availability .av-text { min-width: 0; }
/* "Based in the UK…" pill: original padding, but more space between the dot and the text,
   and more room on the right-hand side */
.availability { gap: 16px; padding-right: 24px; }
@media (max-width: 520px) { .availability { gap: 14px; padding-right: 20px; } }
@media (max-width: 300px) { .availability { gap: 11px; padding-right: 14px; } }
@media (max-width: 270px) { .availability { gap: 9px; padding-right: 10px; } } /* keeps the text to 2 lines on the tiniest screens */
/* "Based in the UK…" pill: 6px more room left of the dot, 3px more right of the text;
   when the text wraps onto two lines, the pill sits in the centre */
.availability { padding-left: 20px; padding-right: 27px; }
@media (max-width: 520px) { .availability { padding-left: 18px; padding-right: 23px; } }
@media (max-width: 300px) { .availability { padding-left: 16px; padding-right: 17px; } }
@media (max-width: 270px) { .availability { padding-left: 10px; padding-right: 10px; } } /* tiniest screens: a bit less, so the text stays on 2 lines */
.availability.is-wrapped { display: flex; width: fit-content; margin-inline: auto; }

/* FigJam "how I research" note on phones: wide enough that the words sit centred with room either side */
@media (max-width: 520px) {
  .fj-notes .sticky.note-dd { width: min(210px, 88%); max-width: 88%; padding-inline: 16px; }
  .fj-notes .sticky.note-dd .hand { text-align: center; }
}
@media (max-width: 300px) { .fj-notes .sticky.note-dd .hand { font-size: 0.92rem; } }

/* Menu tabs: the pen line is drawn on from left to right at its full size (revealed, not stretched),
   slowly, like a pen moving. Faint on hover, solid for the current page. */
.nav .seg > a, .nav .seg .dd-btn,
.nav .seg > a:hover, .nav .seg .dd-btn:hover, .nav .dd.open .dd-btn,
.nav .seg > a[aria-current="page"], .nav .seg > a[aria-current="page"]:hover,
.nav .seg .dd-btn.is-current, .nav .seg .dd-btn.is-current:hover, .nav .dd.open .dd-btn.is-current { background-image: none; }
.nav .seg > a, .nav .seg .dd-btn { position: relative; }
.nav .seg > a::before, .nav .seg .dd-btn::before {
  content: ""; position: absolute; left: var(--ul-l, 11px); right: var(--ul-r, 11px); bottom: 1px; height: 0.5em; pointer-events: none;
  background: currentColor; opacity: 0.4;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5 C 22 5.5, 48 9.5, 70 6.8 S 104 6, 118 7.6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5 C 22 5.5, 48 9.5, 70 6.8 S 104 6, 118 7.6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  clip-path: inset(0 100% 0 0); transition: clip-path 0.5s cubic-bezier(.45, .05, .35, 1);
}
.nav .seg > a:hover::before, .nav .seg .dd-btn:hover::before, .nav .dd.open .dd-btn::before { clip-path: inset(0 0 0 0); }
.nav .seg > a[aria-current="page"]::before, .nav .seg .dd-btn.is-current::before { clip-path: inset(0 0 0 0); opacity: 1; transition: none; }
@media (prefers-reduced-motion: reduce) { .nav .seg > a::before, .nav .seg .dd-btn::before { transition: none; } }
/* Each menu tab gets its own slightly different pen line (the first keeps the original) */
.nav .seg > a:nth-of-type(2)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 26 9.6, 50 5.4, 74 7.8 S 106 9.2, 118 6.4' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 26 9.6, 50 5.4, 74 7.8 S 106 9.2, 118 6.4' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.nav .seg .dd-btn::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9.2 C 18 6.8, 44 6.2, 66 8.6 S 100 7.4, 118 5.8' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9.2 C 18 6.8, 44 6.2, 66 8.6 S 100 7.4, 118 5.8' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }

/* "How I got here" on phones: a single photo sits just to the right of the date, so the entry
   can start higher up; photo pairs keep their own row under the date */
@media (max-width: 520px) {
  .tline li { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; }
  .tline li .tl-year { grid-column: 1; }
  .tline li .snaps, .tline li:nth-child(even) .snaps { grid-column: 1 / -1; }
  .tline li .entry, .tline li:nth-child(even) .entry { grid-column: 1 / -1; }
  .tline li .snaps:not(.pile), .tline li:nth-child(even) .snaps:not(.pile) { grid-column: 2; grid-row: 1; padding: 0; justify-content: flex-start; }
  .tline li .snaps:not(.pile) .snap { width: min(calc(100% - 8px), 220px); } /* room for the tilt */
  .tline li:has(.snaps:not(.pile)) .entry { grid-row: 2; }
}
/* Phones: the single photo's right edge lines up with the right edge of the entry card below it */
@media (max-width: 520px) {
  .tline li .snaps:not(.pile), .tline li:nth-child(even) .snaps:not(.pile) { justify-content: flex-end; }
  .tline li .snaps:not(.pile) .snap { margin-right: calc(min(calc(100% - 8px), 220px) * 0.027); } /* the tilt pokes out about 2.7% of the width */
}
/* Phones: photo pairs overlap a little more, and each pair is tilted differently */
@media (max-width: 520px) {
  .tline li .snaps.pile .snap + .snap { margin-left: -9%; }
  .tline li:nth-child(3) .snaps.pile .snap:first-child { rotate: -5deg; }
  .tline li:nth-child(3) .snaps.pile .snap + .snap { rotate: 3deg; }
  .tline li:nth-child(4) .snaps.pile .snap:first-child { rotate: -2.5deg; }
  .tline li:nth-child(4) .snaps.pile .snap + .snap { rotate: 5.5deg; }
}
/* Phones: photo pairs centred under the date, across the width of the entry card;
   photos a little smaller on the wider phones, a little bigger on the narrowest */
@media (max-width: 520px) {
  .tline li .snaps.pile, .tline li:nth-child(even) .snaps.pile { justify-content: center; }
  /* each pair's tilt pokes out a little more on one side; this evens out the gaps either side */
  .tline li:nth-child(3) .snaps.pile { padding-left: 0.85%; padding-right: 0; }
  .tline li:nth-child(4) .snaps.pile { padding-left: 0; padding-right: 1.25%; }
}
@media (min-width: 400px) and (max-width: 520px) {
  .tline li .snaps.pile .snap { width: min(44%, 190px); }
  .tline li .snaps:not(.pile) .snap { width: min(calc(100% - 8px), 190px); margin-right: calc(min(calc(100% - 8px), 190px) * 0.027); }
}
@media (max-width: 360px) {
  .tline li { column-gap: 8px; }
  .tline li .snaps.pile .snap { width: 50.5%; }
}

/* Contact button: always shows the word "Contact" (never just the arrow), a little smaller on narrow screens */
@media (max-width: 740px) {
  .nav .btn { font-size: 0.86rem; gap: 6px; padding: 8px 16px; }
  .nav .btn::after { width: 22px; height: 22px; margin: -4px -10px -4px 2px; }
}
@media (max-width: 400px) { .nav .btn { font-size: 0.8rem; padding: 7px 14px; } }
@media (max-width: 340px) { .nav .btn { font-size: 0.76rem; padding: 6px 12px; } .nav .btn::after { width: 20px; height: 20px; margin-right: -8px; } }

/* Phones: the three menu tabs spread evenly across a centred row, but the row is narrower
   than the full width (at most 420px), so they never drift too far apart */
@media (max-width: 560px) {
  .nav .seg { flex-basis: 100%; width: clamp(min(100%, 280px), 86%, 420px); max-width: clamp(min(100%, 280px), 86%, 420px); margin-inline: auto; }
}

/* Hero: the "tagged this" card and "Dora is listening…" pill are enlarged most on the narrowest phones,
   and less as the screen gets wider, so they stay in proportion with the rest of the hero */
@media (min-width: 400px) and (max-width: 459px) {
  .hero-split .toolcloud .presence, .hero-split .toolcloud .rec { scale: 1.18; }
}
@media (min-width: 460px) and (max-width: 519px) {
  .hero-split .toolcloud .presence, .hero-split .toolcloud .rec { scale: 1.08; }
}

/* "Tidy it up" button: 2px higher at every size */
.tidy-btn { margin-bottom: 2px; }
/* Smallest phones: a slightly smaller "Tidy it up" / "Make it messy again" button */
@media (max-width: 340px) { .tidy-btn { height: 38px; padding: 0 16px; font-size: 0.82rem; gap: 6px; } }

/* Board "1 / 3" pill: 7px higher at every size; on phones the arrows under the board move up with it,
   so their middles stay level with the pill */
.tab-count { margin-bottom: 7px; }
@media (max-width: 520px) { .tab-arrow { margin-bottom: 7px; } }

/* Claude tab on wider phones (400–520px): the board's height is set by the FigJam tab, so the chat
   uses larger text and a little more spacing to fill it, instead of floating in empty space */
@media (min-width: 400px) and (max-width: 520px) {
  .bp-claude .cl-user, .bp-claude .cl-reply { font-size: clamp(0.9rem, 3.4vw, 1.06rem); line-height: 1.55; }
  .bp-claude .cl-user { padding: 14px 16px; }
  .bp-claude .cl-chat { gap: 18px; }
}
@media (min-width: 340px) and (max-width: 399px) {
  .bp-claude .cl-user, .bp-claude .cl-reply { font-size: 0.88rem; line-height: 1.5; }
  .bp-claude .cl-chat { gap: 14px; }
}

/* Board tabs never squash their names against the right edge: if the names don't fit with their
   full padding, the tabs switch to icons only (script.js) instead */
.desk-tabs .desk-bar .tab { flex-shrink: 0; }
.desk-tabs.icons-only .desk-bar .tab { flex-shrink: 1; } /* icon-only tabs may still tighten on the tiniest screens */
/* Board tab icons never get squashed; on the tiniest screens the tabs lose a little padding instead */
.desk-tabs .desk-bar .tab img, .desk-tabs .desk-bar .tab svg { flex-shrink: 0; object-fit: contain; }
@media (max-width: 300px) { .desk-tabs.icons-only .desk-bar .tab, .board-row .desk-tabs.icons-only .desk-bar .tab:not(.is-active) { padding-inline: 8px; } }
@media (max-width: 260px) { .desk-tabs.icons-only .desk-bar .tab, .board-row .desk-tabs.icons-only .desk-bar .tab:not(.is-active) { padding-inline: 6px; } }

/* Smallest phones: the "6 highlights" count is hidden, so "Together, we can…" has the header to itself */
@media (max-width: 340px) { .dt-head .dt-meta { display: none; } }
@media (max-width: 340px) { .dt-title { font-size: clamp(0.7rem, 4vw, 0.8rem); } } /* the title can be a bit bigger now it has the room */

/* "Methods I use" on the smallest phones (under 360px): two cards per row */
@media (max-width: 359px) { .methods-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }

/* "Methods I use": 6 per row on mid-size screens (521–1000px), with the last row of 4 centred;
   3 per row on phones (360–520px), with the last card centred. Each card spans 2 columns of a
   double-width grid, so a short last row can start half a card in. */
@media (min-width: 521px) and (max-width: 699px) { .methods-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* 4 per row until 6 would be too small */
@media (min-width: 700px) and (max-width: 1000px) {
  .methods-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .methods-grid li { grid-column: span 2; }
  .methods-grid li:nth-child(13) { grid-column: 3 / span 2; }
}
@media (min-width: 360px) and (max-width: 520px) {
  .methods-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .methods-grid li { grid-column: span 2; }
  .methods-grid li:nth-child(16) { grid-column: 3 / span 2; }
}

/* Pain cards: a little more space between "The pain", "What’s going on" and "My proof" */
.pain { gap: clamp(24px, 3.6vw, 44px); }

/* "Beyond research" gradient starts a little higher, fading in from above the section */
#about { --grad-lift: clamp(70px, 10vw, 140px); }
#about .about-grad { top: calc(-1 * var(--grad-lift)); height: calc(100% + var(--sec-half) + var(--grad-lift)); }

/* "Book a free 15-minute call" button: if it needs two lines, it breaks after "Book a free"
   and both lines are centred */
.btn-call { flex-wrap: wrap; justify-content: center; text-align: center; column-gap: 0.28em; row-gap: 2px; }
.btn-call span { white-space: nowrap; }

/* Footer: when the call button wraps onto two centred lines (script.js adds .is-wrapped),
   "No pitch, just a conversation." is centred under it too */
.footer-links .no-obligation.is-centred { text-align: center; }
/* Footer email link (with its icon) sits lower, close to the "Download my CV" link below it */
.footer-links a[href^="mailto:"] { margin-top: 12px; margin-bottom: -8px; }
/* Footer links never push past the screen edge */
.footer-links { min-width: 0; }
.footer-links > * { max-width: 100%; }
.footer-links .no-obligation.is-centred { max-width: 100%; }

/* "Back to top": when it floats over a section the same colour as itself (e.g. the dark band or the
   footer), script.js adds .on-match and it swaps to the opposite colours so it stays visible */
.to-top { transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } /* keeps the same hover lift and glow as the other buttons */
.to-top.on-match { background: var(--btn-ink); color: var(--btn-bg); border-color: var(--btn-ink); }

/* Footer links: right-aligned while they sit beside the footer text, left-aligned only once they
   wrap underneath it (script.js adds .is-stacked; the wrap depends on content, not a fixed width) */
.footer-links { justify-items: end; }
.footer-links.is-stacked { justify-items: start; }
/* Footer: the right-hand links line up with the bottom of the text on the left */
.footer-inner { align-items: flex-end; }
.footer-links:not(.is-stacked) { margin-bottom: 3px; } /* the CV icon is taller than the text; this lines the words up exactly */
/* Footer email and CV icons sit closer to their text (12px → 8px) */
.footer-links a:not(.btn) { gap: 8px; }
/* the document icon is drawn narrower inside its box than the envelope, so it is nudged 2px closer to match */
.footer-links a[download] .mail { margin-right: -2px; }

/* "How I got here" on phones: the photos sit inside the entry card (script.js moves them there),
   between the name/place and the text, like a post. Every photo has the same 18px gap to the card's sides
   and 14px below the header; pairs sit side by side as squares */
@media (max-width: 520px) {
  .tline li:has(.entry .snaps) .entry { grid-row: 2; }
  .tline li:nth-child(n) .entry .snaps, .tline li:nth-child(n) .entry .snaps.pile { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px; padding: 14px 18px 0; margin: 0; width: auto; max-width: none; justify-content: flex-start; align-items: stretch; }
  .tline li:nth-child(n) .entry .snaps .snap:nth-child(n) { flex: 1 1 0; width: auto; min-width: 0; margin: 0; padding: 0; rotate: none; box-shadow: none; background: none; }
  .tline .entry .snaps .snap img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
  .tline .entry .snaps.pile .snap img { aspect-ratio: 1; }
  .tline .entry .snap img[src$="story-1-studying.jpg"] { object-position: 50% 15%; } /* show more of the top of the photo, but not right up to the edge */
}
/* "How I got here", wider than phones: the first photo's square crop sits very slightly higher than centre */
@media (min-width: 521px) { .tline .snap img[src$="story-1-studying.jpg"] { object-position: 50% 40%; } }

/* Impact page pill bar: the pills sit in an inner row, and on phones only that row scrolls sideways.
   (When the bar itself scrolled, it also cut off the shared background drawn above it, behind the
   navigation, so both bars lost their frosted background.) Same structure as the case-study bar. */
.jump-bar { display: block; }
.jump-bar .jump-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
@media (max-width: 520px) {
  .jump-bar { overflow: visible; padding-inline: 0; }
  /* the side padding sits inside the scrolling row, so the pills scroll right up to the screen edges */
  .jump-bar .jump-row { padding-inline: clamp(16px, 4vw, 40px); scroll-padding-inline: clamp(16px, 4vw, 40px); }
  .jump-bar .jump-row { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .jump-bar .jump-row::-webkit-scrollbar { display: none; }
}

/* Pill bars (Impact page + case studies): when scrolling back up, the bar moves a frame or two before
   script.js drops .is-stuck, so the shared background briefly started a few px below the top of the screen.
   It now reaches 200px above the screen edge (never visible), so there's no see-through strip.
   The navigation's own background also switches instantly, instead of fading in behind it. */
.jump-bar.is-stuck::before, .cs-toc.is-stuck::before { top: calc(-1 * var(--nav-h, 79px) - 201px); }
body:has(.jump-bar) .nav, body:has(.cs-toc) .nav { transition: none; }

/* Impact page pill bar on phones: no sideways scrolling, every pill stays visible.
   The pills wrap onto centred rows and are a little smaller, so the bar stays compact. */
@media (max-width: 520px) {
  .jump-bar { padding-inline: clamp(12px, 4vw, 16px); }
  .jump-bar .jump-row { flex-wrap: wrap; justify-content: center; overflow: visible; padding-inline: 0; gap: 6px 5px; }
  .jump-bar a { padding: 5px 10px; font-size: 0.78rem; }
}

/* Back to top sits above the sticky pill bars (Impact page + case studies, layer 45),
   so a bar never covers it as it scrolls past; still below the navigation (layer 50) */
.to-top { z-index: 46; }

/* Impact page: when the "What changed" box drops under the text (900px and narrower), it sits the same
   26px below the text as "What I did" sits below the paragraph above it */
@media (max-width: 900px) {
  .study .study-grid { row-gap: 26px; }
  .study .study-grid > div > :last-child, .study .study-grid > div > ul:last-child > li:last-child { margin-bottom: 0; }
}

/* Board tabs: the tab row scrolls sideways, which also trims anything above it, so the active tab's
   top outline was cut off. 2px of room at the top (taken back with a negative margin, so nothing moves) */
.desk-tabs .tabs { padding-top: 2px; margin-top: -2px; }

/* Board, Dovetail tab on phones: the cards are a little narrower (92%), before and after tidying,
   so their offsets and tilt stay inside the Dovetail box; each one moves 4% right to keep the pile centred */
@media (max-width: 520px) {
  .tidy-board[data-state] .tidy-notes li { width: 92%; } /* same width tidied and untidied */
  .tidy-board[data-state="tidy"] li:nth-child(odd), .tidy-board[data-state="tidy"] li:nth-child(even) { left: 4%; } /* centred when tidied */
  .tidy-board[data-state="messy"] li:nth-child(1) { left: 1%; }
  .tidy-board[data-state="messy"] li:nth-child(2) { left: 8%; }
  .tidy-board[data-state="messy"] li:nth-child(3) { left: 2%; }
  .tidy-board[data-state="messy"] li:nth-child(4) { left: 7%; }
  .tidy-board[data-state="messy"] li:nth-child(5) { left: 0%; }
  .tidy-board[data-state="messy"] li:nth-child(6) { left: 6%; }
}
/* the narrowest phones: 96% wide (centred), so the longest tag ("Alignment") still fits inside its card */
@media (max-width: 300px) {
  .tidy-board[data-state] .tidy-notes li { width: 96%; }
  .tidy-board[data-state="tidy"] li:nth-child(odd), .tidy-board[data-state="tidy"] li:nth-child(even) { left: 2%; }
  .tidy-board[data-state="messy"] li:nth-child(1) { left: -1%; }
  .tidy-board[data-state="messy"] li:nth-child(2) { left: 6%; }
  .tidy-board[data-state="messy"] li:nth-child(3) { left: 0%; }
  .tidy-board[data-state="messy"] li:nth-child(4) { left: 5%; }
  .tidy-board[data-state="messy"] li:nth-child(5) { left: -2%; }
  .tidy-board[data-state="messy"] li:nth-child(6) { left: 4%; }
}

/* "Sound familiar?": the cards are 7% more see-through (80% → 73% opaque) */
#familiar .pain { background: color-mix(in srgb, var(--card) 73%, transparent); }
/* the giant question mark is a little smaller on the narrowest screens, where the tall stacked section makes it biggest */
@media (max-width: 400px) { .qmark { height: 80%; } }
/* smaller screens: the question mark is smaller and sits further left, so more of it is on screen */
@media (max-width: 520px) { .qmark { left: 72%; height: 70%; } }
@media (max-width: 400px) { .qmark { height: 64%; } }

/* "How I got here", medium screens (761–1000px): side by side, the photo pairs were only 103–129px wide.
   They now stack diagonally (the second one lower down and to the right, overlapping the first),
   so each photo can be up to 200px wide, like the single photos */
@media (min-width: 761px) and (max-width: 1000px) {
  .tline .snaps.pile { --pw: min(200px, calc(188px + (100vw - 881px) * 0.37)); }
  /* photos 10% smaller; the second one starts in the same place, so they overlap less */
  .tline .snaps.pile .snap { width: calc(0.9 * var(--pw)); padding: 7px 7px 20px; }
  .tline .snaps.pile .snap + .snap { margin-left: calc(-0.65 * var(--pw)); margin-top: calc(0.75 * var(--pw)); }
}
@media (min-width: 761px) and (max-width: 880px) {
  .tline .snaps.pile { --pw: min(200px, calc(158px + (100vw - 761px) * 0.36)); }
  .tline li:has(.snaps.pile) .tl-side { gap: 18px; }
}
/* "How I got here", wide screens (above 1000px): photo pairs 12% bigger (150px → 168px each) */
@media (min-width: 1001px) { .tline .snaps.pile .snap { width: min(168px, calc(152px + (100vw - 1001px) * 0.2)); } } /* grows to 168px by about 1080px, so it never runs off the page */

/* Impact page pills: one colour per category, like the case study pages
   (blue methods, orange strategy & influence, green research practice, purple deliverables, yellow sector); no key */
.chip.c-m { background: #e4ecff; } .chip.c-m::before { background: #3d63dd; }
.chip.c-s { background: #ffe6d6; } .chip.c-s::before { background: #e4570f; }
.chip.c-p { background: #ddf5cf; } .chip.c-p::before { background: #2f7d1a; }
.chip.c-d { background: #f0e3ff; } .chip.c-d::before { background: #8a43d6; }
.chip.c-x { background: #fff1b8; } .chip.c-x::before { background: #946c00; }

/* Impact page: a colour key under each "What changed" card, naming only the categories of that card's pills */
/* the key sits in its own card joined to the bottom of the "What changed" card (one shadow around both),
   its text the same size and weight as the pills above it */
.study .aside-col { border-radius: var(--radius); box-shadow: var(--shadow); }
.study .aside-col .study-side { box-shadow: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.study .aside-col .tag-key { margin: 0; padding: 12px 26px 14px; gap: 6px 16px; font-size: 0.82rem; font-weight: 600; color: var(--ink);
  background: color-mix(in srgb, var(--card) 55%, var(--bg)); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
.tag-key .k-d::before { background: #8a43d6; } .tag-key .k-x::before { background: #946c00; }

/* Impact page and featured case study pages: no dot inside the tags (the keys keep their dots) */
.study .chip::before, .tag::before { display: none; }
.study .chip, .tag { gap: 0; }
/* Key: the yellow (sector) dot a little lighter, the same mustard as the original yellow tags (still 3:1 against the card) */
.tag-key .k-x::before { background: #b88600; }


/* Impact page title: a hand-drawn pen underline under "impact", like the pain-point titles, but its
   thickness scales with the heading (0.06em) so it doesn't look spindly at this size */
.pen-ul { position: relative; display: inline-block; }
.pen-ul svg { position: absolute; left: -1%; width: 102%; bottom: -0.2em; height: 0.24em; overflow: visible; pointer-events: none; }
.pen-ul path { fill: none; stroke: currentColor; stroke-width: 0.06em; stroke-linecap: round; }
/* "impact" handwritten, exactly like "how I got here" (Caveat, bold, 1.3em); the underline keeps its previous thickness */
.pen-ul { font-family: var(--hand); font-weight: 700; font-size: 1.3em; letter-spacing: 0; line-height: 1; }
.pen-ul path { stroke-width: 0.046em; }
/* Impact page title: a much smaller "&", lifted to sit around the middle of the words */
.work-hero h1 .amp-sm { font-family: var(--hand); font-weight: 700; font-size: 1em; letter-spacing: 0; margin-inline: 0.08em; color: var(--accent-text); } /* handwritten like "impact", at the title's own size, in the homepage ampersand's orange */

/* Featured case study pages: the skills tags sit in a card, with the colour key in its own card joined underneath
   (one shadow around both), the same way as the "What changed" cards and keys on the Impact page */
.tag-panel { width: 820px; max-width: 100%; margin-top: 22px; border-radius: var(--radius); box-shadow: var(--shadow); }
.tag-panel .chips { margin: 0; padding: 20px 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.tag-panel .tag-key { margin: 0; padding: 12px 24px 14px; gap: 6px 16px; font-size: 0.82rem; font-weight: 600; color: var(--ink);
  background: color-mix(in srgb, var(--card) 55%, var(--bg)); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
/* featured case study pages: the summary above the tags is as wide as the tags card (820px) */
.lede.narrow:has(+ .tag-panel) { max-width: 820px; }
/* featured case study pages: a little more room under the "All case studies" button (18px → 28px) */
.cs-back { margin-bottom: 28px; }
/* featured case study pages: a little more room under the subtitle (14px → 24px) */
.cs-subtitle { margin-bottom: 24px; }

/* Featured case study pages: a small line icon before each detail label (Client, Role, Timeline…),
   drawn like the sector icons on the Impact page; decorative, so hidden from screen readers */
.meta dt { display: flex; align-items: center; gap: 7px; }
.meta-ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Xeropan case study: more room under the "Is it for kids?" quote box, before the facts list (18px → 48px) */
.problem + .cs-facts { margin-top: 48px; margin-bottom: 48px; } /* the same 48px below the facts as above them */
/* "TAGS" label at the top of the tags card, in the same style as Client, Role, Timeline… (.meta dt) */
.tag-panel .tag-head { margin: 0; padding: 18px 24px 0; background: var(--card); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.tag-panel .tag-head + .chips { padding-top: 10px; border-top: 0; border-radius: 0; }
/* Xeropan: "The research question:" handwritten (like "how I got here" and "impact"), with a pen underline */
h2.sec.hand-q { font-family: var(--hand); font-weight: 700; letter-spacing: 0; padding-bottom: 0.48em; } /* room for the underline above the statement; also used for "The challenge:" */
h2.sec.hand-q .q-colon { font-size: 1.3em; line-height: 1; }
/* Xeropan "The challenge": the text under the statement starts at the top (not centred against the taller quote),
   so its gap below the statement matches the research question section */
.big-statement + .problem { align-items: start; }
/* featured case study pages: a little more room under the Outcome box (before the section links) */
.outcome { margin-bottom: 16px; }
/* handwritten section labels shrink a little on the narrowest phones, so long ones ("The question I focused on:")
   stay on one line with their colon; at 375px and up they keep the full 1.3em */
h2.sec.hand-q .pen-ul, h2.sec.hand-q .q-colon { font-size: min(1.3em, 9.1vw); }
/* Xeropan facts list: the description under each heading is a little narrower than its column */
.cs-facts .fact-txt { display: block; }
@media (min-width: 521px) { .cs-facts .fact-txt { max-width: 93%; } } /* phones keep the full (already narrow) column */
/* Xeropan: a bit less space above "My research strategy" (this section's top padding halved) */
main > section:has(#strategy) { padding-top: clamp(14px, 2vw, 24px); }
/* step cards (featured case studies): the number circle is centred on the title's capital letters
   (moved up 2px), and there's a bit more space under each title (6px → 12px) */
.process li::before { top: 18px; }
.process h3 { margin-bottom: 12px; }
/* step cards: "What we learned" sits on its own line, with its text underneath */
.process .why b { display: block; margin: 0 0 4px; }
/* a bit more space above "What we learned" (8px → 16px) */
.process .why { margin-top: 16px; }
/* Xeropan five-second results table: row headings in the same weight and size as the table above it (.cs-table) */
.results tbody th { font-weight: 600; font-size: 0.95rem; }

/* Featured case study pages: the small labels below the tags ("Timing", "Theme 01"…) have no background,
   just orange text, styled like "Context from published research" (.example-label) */
.cs-v2 main .pin-tag, .cs-v2 main .pin-tag.t2, .cs-v2 main .pin-tag.t3 { background: none; color: var(--accent-small); padding: 0; border-radius: 0; font-size: 0.78rem; letter-spacing: 0.08em; }
/* Fintech "Where Dovetail AI helped": the 01–03 numbers are orange text, like the labels on this page */
.ai-steps.three li::before { width: fit-content; padding: 0; margin-bottom: 8px; border-radius: 0; background: none; color: var(--accent-small); font-size: 0.78rem; letter-spacing: 0.08em; }
/* Featured case study pages: every regular section title has exactly 18px below it.
   !important on the next element's margin because some have a top margin set in the page itself */
.cs-v2 main h2.sec:not(.hand-q) { margin-bottom: 18px; }
.cs-v2 main h2.sec:not(.hand-q) + * { margin-top: 0 !important; }
/* Fintech "From insight to product direction": the two cards are as far apart as the Constraints cards (20px) */
.split:has(> .card.directions) { gap: 20px; }
/* featured case study pages: a little more space under the "Outcome" title (12px → 18px, like the section titles) */
.outcome h2 { margin-bottom: 18px; }
/* Fintech "Business objectives" card: a tiny bit more space inside, under the text (22px → 28px) */
.card.objectives.biz { padding-bottom: 28px; }
/* Fintech "What the research revealed": 18px under each theme title */
#findings + .qa .card h3 { margin-bottom: 18px; }
#findings + .qa .card h3 + .chain { margin-top: 0; }
/* Fintech "What the research revealed": 18px under each "Theme" label too */
#findings + .qa .card .pin-tag { display: block; width: fit-content; margin-bottom: 18px; }
#findings + .qa .card .pin-tag + h3 { margin-top: 0; }
/* Fintech direction cards: slightly more space under the titles (10px → 14px) */
.directions h3 { margin-bottom: 14px; }
/* featured case study pages: 18px under the title of every card with labelled rows (Constraint / What I did…) */
.cs-v2 .card h3:has(+ .chain) { margin-bottom: 18px; }
.cs-v2 .card h3 + .chain { margin-top: 0; }
/* Interviewer note: formatted like the Traceability matrix box above it (same outline, corners, background,
   uppercase label and grey text), but with no line between the label and the text. No more yellow note */
.guide-note { padding: 14px 16px; background: var(--bg, #fff); color: var(--ink-soft); border: 1px solid var(--line); border-radius: 14px; rotate: none; box-shadow: none; font-size: 0.95rem; }
details.acc p.guide-note b, .guide-note b { display: block; margin: 0 0 8px; font-family: inherit; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
/* Interviewer note: the same 16px above it as between the guide cards */
details.acc p.guide-note { margin-top: 16px; }
/* Recruitment criteria: the same 8px under each title as under the interview guide titles */
.criteria-grid h4 { margin-bottom: 8px; }
/* Recruitment criteria, Segments: each letter sits on the same line as its text */
.qs details .criteria-grid p b { display: inline; margin: 0; }
/* Affinity diagram tags: the same 8px under each title as in the dropdown sections above */
.qs details .tag-defs dt { margin-bottom: 8px; }
.qs details .tag-defs dd { margin-top: 0; }
/* Fintech worked example: 18px under "Illustrative, not from the client study" */
.qs details .example-label { margin-bottom: 18px; }
.qs details .example-label + .example-steps { margin-top: 0; }
/* Fintech "Taken forward" (tick) and "To explore" (magnifying glass): a small line icon before the label, in the label's colour */
.cs-v2 main .pin-tag:has(.pin-ic) { display: inline-flex; align-items: center; gap: 7px; }
.pin-ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Fintech "Taken forward": green text and icon (the same green as the Research practice tags' dot) */
.cs-v2 main .pin-tag.t3:has(.pin-ic) { color: #2f7d1a; }
[data-theme="dark"] .cs-v2 main .pin-tag.t3:has(.pin-ic) { color: #8fd46f; }
/* Fintech "Four product directions": regular round bullets instead of ticks, in the green of "Taken forward" */
.directions .ticks li { padding-left: 24px; margin-bottom: 11px; }
.directions .ticks li::before { content: ""; left: 3px; top: 0.6em; width: 8px; height: 8px; font-size: inherit; background: #2f7d1a; }
[data-theme="dark"] .directions .ticks li::before { background: #8fd46f; }

/* Case study pill bar on phones: same as the Impact page bar, no sideways scrolling, every pill stays visible */
@media (max-width: 520px) {
  .cs-toc { padding-inline: clamp(12px, 4vw, 16px); }
  .cs-toc ul { flex-wrap: wrap; justify-content: center; overflow: visible; gap: 6px 5px; }
  .cs-toc a { padding: 5px 10px; font-size: 0.78rem; }
}

/* Case study tables (Fintech + Xeropan): nothing scrolls sideways. Wider screens get the normal table with the text
   wrapping; from 760px down each row becomes a stacked block, with its column name above each answer */
.table-scroll, .table-wrap { overflow: hidden; }
.results table { min-width: 0; }
.results tbody th { white-space: normal; }
.cs-table tbody th { min-width: 0; }
.guide .cs-table td { min-width: 0; }
@media (max-width: 760px) {
  .cs-table, .results table, .cs-table tbody, .results tbody, .cs-table tr, .results tr, .cs-table tbody th, .results tbody th, .cs-table td, .results td { display: block; width: auto; }
  .cs-table thead, .results thead { display: none; }
  .cs-table tbody tr, .results tbody tr { padding: 16px; border-bottom: 1px solid var(--line); }
  .cs-table tbody tr:last-child, .results tbody tr:last-child { border-bottom: 0; }
  .cs-table tbody th, .results tbody th, .cs-table td, .results td { padding: 0; border: 0; overflow-wrap: anywhere; }
  .cs-table td, .results td { margin-top: 12px; }
  .cs-table td:first-child, .results td:first-child { margin-top: 0; }
  .cs-table td::before, .results td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
}

/* Fintech affinity diagram tags: one full-width column at the same point as the worked example cards */
@media (max-width: 900px) { .tag-defs { grid-template-columns: 1fr; } }
.criteria-grid { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }

/* Fintech "Research rigour and AI": no boxes. A headline figure on the left, one reading column on the right */
.rigour-e { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 72px); align-items: start; }
.rigour-fig { margin: 0 0 12px; font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; }
.rigour-fig mark { padding: 0 0.12em; }
.rigour-cap { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }
.rigour-col > div { padding: 18px 0; border-top: 1px solid var(--line); }
.rigour-col > div:first-child { padding-top: 0; border-top: 0; }
.rigour-col > div:last-child { padding-bottom: 0; }
.rigour-col h3 { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 8px; color: var(--accent-small); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.4; text-transform: uppercase; }
.rigour-col p { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }
.rigour-steps { margin: 0; }
.rigour-steps > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding-top: 7px; }
.rigour-steps dt { font-weight: 700; }
.rigour-steps dd { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }
@media (max-width: 760px) { .rigour-e { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 400px) { .rigour-steps > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* Fintech: findings as big statements, constraints as dropdowns, key learnings closing statement */
.f-states { margin-top: 20px; }
.f-state { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 64px); padding: 28px 0; border-top: 1px solid var(--line); }
.f-state:last-child { border-bottom: 1px solid var(--line); }
.f-state-tag { display: block; margin-bottom: 6px; color: var(--accent-small); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.f-state h3 { margin: 0; font-size: clamp(1.45rem, 2.6vw, 1.9rem); letter-spacing: -0.02em; line-height: 1.25; }
.f-state-chain { margin: 0; }
.f-state-chain > div + div { margin-top: 16px; }
.f-state-chain dt { margin-bottom: 4px; color: var(--ink-soft); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.f-state-chain dd { margin: 0; color: var(--ink-soft); }
.c-drops { margin-top: 20px; }
.c-drop { border-top: 1px solid var(--line); }
.c-drop:last-child { border-bottom: 1px solid var(--line); }
.c-drop summary { display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px; column-gap: 8px; padding: 20px 0; cursor: pointer; list-style: none; }
.c-drop summary::-webkit-details-marker { display: none; }
.c-drop summary::after { content: "+"; grid-column: 3; grid-row: 1; font-size: 1.5rem; line-height: 1; font-weight: 500; color: var(--ink); }
.c-drop[open] summary::after { content: "–"; }
.c-drop-n { grid-column: 1; grid-row: 1; padding-top: 4px; color: var(--accent-small); font-size: 0.85rem; font-weight: 700; }
.c-drop h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 1.2rem; line-height: 1.3; }
.c-drop-p { grid-column: 2; grid-row: 2; margin-top: 4px; color: var(--ink-soft); }
.c-drop-body { padding: 0 32px 22px 52px; }
.c-drop-lab { margin: 0 0 6px; color: var(--ink-soft); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.c-drop-body .bullets { margin: 0; padding-left: 18px; }
.c-drop-body .bullets li { margin-bottom: 6px; color: var(--ink-soft); }
.c-drop-body .bullets li:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .f-state { grid-template-columns: minmax(0, 1fr); }
  .f-state { gap: 16px; }
  .c-drop-body { padding: 0 0 22px; }
}

/* Fintech: horizontal week timeline, labels in heading colour, jobs two per line, rigour statement size */
.week-tl { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 28px 0 0; padding: 0; }
.week-tl li { position: relative; padding: 22px 20px 0 0; border-top: 2px solid var(--ink); color: var(--ink-soft); font-size: 0.97rem; }
.week-tl li::before { content: ""; position: absolute; left: 0; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.week-tl b { display: block; margin-bottom: 2px; color: var(--ink); font-size: 1.1rem; }
.f-state-chain dt { color: var(--ink); }
.rigour-fig { font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1.1; }
@media (max-width: 480px) {
  .week-tl { grid-template-columns: minmax(0, 1fr); margin-left: 5px; }
  .week-tl li { padding: 0 0 18px 20px; border-top: 0; border-left: 2px solid var(--ink); }
  .week-tl li:last-child { padding-bottom: 0; }
  .week-tl li::before { left: -7px; top: 5px; }
}

/* Fintech: orange job titles; What I learned next to the What I'd do differently box */
.job-title { color: var(--accent-small); }
.job-name { color: var(--ink); }

/* Fintech: mental models with the design implication indented below */
.m-rows { list-style: none; margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; }
.m-row { padding: 24px 0; border-top: 1px solid var(--line); }
.m-row:last-child { border-bottom: 1px solid var(--line); }
.m-lab { margin: 0 0 4px; color: var(--accent-small); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.m-quote { margin: 0; color: var(--ink); font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.22; }
.m-reply { margin: 14px 0 0 clamp(16px, 6vw, 72px); padding-left: 16px; border-left: 3px solid var(--accent-small); }
.m-tx { margin: 0; color: var(--ink-soft); }

/* Case studies: type aligned with font-style-guide.pdf */
.cs-v2 main .f-state-tag, .cs-v2 main .c-drop-lab, .cs-v2 main .example-steps li > span, .cs-v2 main .guide-note b, .cs-v2 main .why b, .cs-v2 main .example-label { color: var(--accent-small); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; }
.cs-v2 main .job-title, .cs-v2 main .job-name, .cs-v2 main .f-state-chain dt { font-size: 0.78rem; letter-spacing: 0.08em; }
.cs-v2 main .results thead th { font-size: 0.75rem; letter-spacing: 0.08em; }
.cs-v2 main .week-tl li, .cs-v2 main .rigour-col p, .cs-v2 main .rigour-cap, .cs-v2 main .rigour-steps dt, .cs-v2 main .rigour-steps dd, .cs-v2 main .dir-note, .cs-v2 main .guide-meta span, .cs-v2 main .guide-parts li, .cs-v2 main .tag-defs dt, .cs-v2 main .tag-defs dd, .cs-v2 main .flow li, .cs-v2 main .job p, .cs-v2 main .qa .card p, .cs-v2 main .results td, .cs-v2 main .directions li, .cs-v2 main .context li { font-size: 0.95rem; line-height: 1.6; }
.cs-v2 main .retro p, .cs-v2 main .outcome .ticks li, .cs-v2 main .learnings li { font-size: 1.0625rem; line-height: 1.6; }
.cs-v2 main .process li h3, .cs-v2 main .c-drop h3, .cs-v2 main .results h3, .cs-v2 main .qa .card h3 { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
.cs-v2 main .guide-parts h4, .cs-v2 main .criteria-grid h4 { font-size: 0.95rem; font-weight: 700; }
.cs-v2 main .quote blockquote { font-size: 1.05rem; line-height: 1.5; }
.cs-v2 main .rigour-fig { font-size: clamp(1.9rem, 3.875vw, 3.1rem); letter-spacing: -0.04em; line-height: 1.12; }

/* HMRC: orange quotation mark on quotes, matching the homepage reviews */
.quote.has-mark { position: relative; }
.quote.has-mark::before { content: "“"; position: absolute; top: 4px; right: 18px; font-family: var(--sans); font-weight: 800; font-size: 4.2rem; line-height: 1; color: var(--accent); pointer-events: none; }
.quote.has-mark blockquote { padding-right: 44px; }

/* HMRC: What changed as a stacked list with lime icons */
.c-path { list-style: none; margin: 22px 0 0; padding: 0; }
.c-path li { position: relative; padding: 0 0 26px 62px; }
.c-path li:last-child { padding-bottom: 0; }
.c-path-ic { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--lime); color: #0f1a2b; }
.c-path-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.c-path h3 { margin: 10px 0 6px; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
.c-path p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.6; max-width: 72ch; }
/* Xeropan: loyal users' first and final quotes as bookends */
.v-story { margin-top: 24px; }
.v-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 5vw, 56px); }
.v-lab { margin: 0 0 6px; color: var(--accent-small); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.v-q { margin: 0; color: var(--ink); font-size: clamp(1.45rem, 2.6vw, 1.9rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.v-mid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 5vw, 56px); margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.95rem; line-height: 1.6; }
.v-mid b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 1.1rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
@media (max-width: 760px) { .v-quotes { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .v-mid { grid-template-columns: minmax(0, 1fr); } }

/* HMRC: the framework as navy arrows with a hand-drawn return to the first stage */
.fw-cycle { margin-top: 22px; }
.fw-row { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; }
.fw-ar { display: flex; align-items: center; height: 44px; padding: 0 20px 0 22px; background: #0f1a2b; color: #fff; font-size: 0.88rem; font-weight: 700; line-height: 1.1; clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%, 13px 50%); }
.fw-row li:first-child .fw-ar { padding-left: 14px; clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%); }
.fw-row li:last-child .fw-ar { background: var(--lime); color: #0f1a2b; }
.fw-row p { margin: 10px 14px 0 4px; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.6; }
.fw-back { position: relative; height: 92px; margin-top: 18px; }
.fw-swoop { display: block; width: 100%; height: 70px; overflow: visible; }
.fw-swoop path, .fw-head path { fill: none; stroke: var(--accent-small); stroke-linecap: round; stroke-linejoin: round; }
.fw-swoop path { stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.fw-head { position: absolute; left: calc(6% - 4px); top: 2px; width: 30px; height: 30px; overflow: visible; }
.fw-head path { stroke-width: 3; }
.fw-back p { position: absolute; left: 0; right: 0; top: 66px; margin: 0; text-align: center; font-family: var(--hand); font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--ink); }
.fw-sym, .fw-ph { display: none; }
@media (max-width: 760px) {
  .fw-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fw-ar, .fw-row li:first-child .fw-ar { justify-content: center; width: min(220px, 100%); height: auto; min-height: 36px; margin: 0 auto; padding: 8px 14px; border-radius: 10px; clip-path: none; text-align: center; }
  .fw-row p { margin: 8px auto 0; max-width: 46ch; text-align: center; }
  .fw-row li:not(:last-child)::after { content: "↓" / ""; display: block; margin: 8px 0; text-align: center; font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--accent-small); }
  .fw-back { height: auto; margin-top: 14px; }
  .fw-swoop, .fw-head { display: none; }
  .fw-back p { position: static; text-align: center; }
  .fw-sym, .fw-ph { display: inline; }
}

/* Tags grouped under visible category names, so colour is decoration only */
.tag-groups { margin: 0; }
.tag-groups > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.tag-groups > div:first-child { padding-top: 0; border-top: 0; }
.tag-groups > div:last-child { padding-bottom: 0; }
.tag-groups dt { padding-top: 4px; color: var(--ink-soft); font-size: 0.78rem; font-weight: 700; line-height: 1.4; }
.tag-groups dd { margin: 0; }
.tag-groups .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; list-style: none; }
.tag-panel .tag-groups { padding: 12px 24px 20px; background: var(--card); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
.study .tag-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 20px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.study .tag-groups > div { grid-template-columns: minmax(0, 1fr); padding: 0; border-top: 0; }
.study .tag-groups dt { padding-top: 0; }
.study .aside-col .study-side { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }
@media (max-width: 520px) { .tag-groups > div { grid-template-columns: minmax(0, 1fr); } .tag-groups dt { padding-top: 0; } }

/* Small screens: nothing wider than its column; shorter cards at tablet widths */
@media (max-width: 900px) {
  .study-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Impact "At a glance": text starts beside the lime tag, then wraps back under it */
@media (max-width: 1279px) {
  .study .study-side .stats li { display: block; }
  .study .study-side .stats li .stat-pill { margin-right: 4px; }
}
@media (max-width: 420px) {
  .cs-facts { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 561px) and (max-width: 900px) {
  .featured-top .feat { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 22px; row-gap: 8px; padding: 16px; align-content: center; }
  .featured-top .feat > * { grid-column: 2; }
  .featured-top .feat .pin-tag, .featured-top .feat-more { justify-self: start; }
  .featured-top .feat-art { grid-column: 1; grid-row: 1 / span 6; align-self: stretch; display: flex; align-items: center; margin: 0; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .trio .card { padding: 18px; }
}
@media (min-width: 481px) and (max-width: 760px) {
  .results table { min-width: 0; }
  .results tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 18px; }
  .results tbody th { grid-column: 1 / -1; }
  .results td { margin-top: 0; }
}
@media (max-width: 480px) { .results table { min-width: 0; } }

/* Case studies: comfortable line length, with boxes matching the 820px tags card */
.cs-v2 main p:not(.lede.narrow):not(.big-statement):not(.cs-subtitle), .cs-v2 main li, .cs-v2 main dd, .cs-v2 main blockquote { max-width: 44rem; }
.cs-v2 main .jobs, .cs-v2 main .retro, .cs-v2 main .outcome, .cs-v2 main .context, .cs-v2 main .qs, .cs-v2 main .c-drops, .cs-v2 main .m-rows { max-width: 820px; }
.footnote.center { max-width: 44rem; margin-inline: auto; }
/* Contrast and heading levels */
.cs-v2 main .n { color: var(--ink-soft); }
.cs-v2 main .guide-parts h3, .cs-v2 main .criteria-grid h3 { margin: 0 0 8px; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.6; }
.cs-v2 main .guide-parts h3 span { margin-right: 6px; color: var(--accent-small); }
p.your-next { width: auto; margin-bottom: 8px; font-size: 1.6rem; color: var(--accent-small); text-align: center; rotate: none; translate: none; }

/* Raised text proposal: body 16px, small labels 12px */
.cs-v2 main .week-tl li, .cs-v2 main .rigour-col p, .cs-v2 main .rigour-cap, .cs-v2 main .rigour-steps dt, .cs-v2 main .rigour-steps dd, .cs-v2 main .dir-note, .cs-v2 main .guide-meta span, .cs-v2 main .guide-parts li, .cs-v2 main .tag-defs dt, .cs-v2 main .tag-defs dd, .cs-v2 main .flow li, .cs-v2 main .job p, .cs-v2 main .qa .card p, .cs-v2 main .results td, .cs-v2 main .directions li, .cs-v2 main .context li, .cs-v2 main .trio p, .cs-v2 main .trio li, .cs-v2 main .process li p, .cs-v2 main .cs-table td, .cs-v2 main .cs-table tbody th, .cs-v2 main .results tbody th, .cs-v2 main .fw-row p, .cs-v2 main .c-path p, .cs-v2 main .v-mid, .cs-v2 main .acc p, .cs-v2 main .acc li, .cs-v2 main .criteria-grid p, .cs-v2 main .fact-txt, .cs-v2 main .guide-parts h3, .cs-v2 main .criteria-grid h3 { font-size: 1rem; }
.feat .pin-tag, .pin-tag, .tidy-tag, .dt-meta, .tab-count, .methods-bar-label, .methods-section h2.eyebrow, h2.eyebrow, .eyebrow { font-size: max(0.75rem, 12px); }

/* Short screens (400% zoom, phones on their side): menu and pills scroll away instead of covering the page */
@media (max-height: 480px) {
  .nav, .cs-toc, .jump-bar { position: static !important; }
  html, html:has(.jump-bar) { scroll-padding-top: 16px; }
  main [id], #featured { scroll-margin-top: 16px; }
  .to-top { padding: 6px 12px; font-size: 0.85rem; }
}

/* Highlight directly before punctuation: no gap before the full stop */
em.tight-end, mark.tight-end, .hl.tight-end { padding-right: 0; }

/* 2026-11-02: small text on the home, Impact and footer brought onto the style guide sizes */
.pain .eyebrow { font-size: 12.5px; }
.pain p, .pain .proof { font-size: 1rem; }
.pain sup, .footnote sup { font-size: 12px; }
.entry-top b, .entry-top .when { font-size: 13.6px; }
.no-obligation { font-size: 13.6px; }
.dt-title { font-size: 13.6px; }
.feat-stat, .feat-stat b { font-size: 15.5px; }
.pin p { font-size: 1rem; }
.review blockquote { font-size: 16.8px; line-height: 1.5; }
.cl-text p, .cl-w { font-size: 1rem; }
.availability .av-text { font-size: max(12.5px, 13.6px); }
@media (max-width: 360px) { .availability .av-text { font-size: 12.5px; } .dt-title { font-size: 12.5px; } .tidy-notes li span:not(.tidy-tag) { font-size: 12px; } }
@media (max-width: 400px) { .tidy-notes li, .tidy-notes li span:not(.tidy-tag) { font-size: 12px; } }
@media (max-width: 360px) { .nav .nav-right > .btn { font-size: 12.5px; } }

/* Case study sections on phones: one "Jump to" menu instead of the pills */
.cs-jump { display: none; }
@media (max-width: 520px) {
  html:has(.cs-toc.has-jump) { scroll-padding-top: 175px; }
  .cs-toc.has-jump { display: block; }
  .cs-toc .cs-jump { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 40px; padding: 7px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font: inherit; font-size: 14.4px; font-weight: 600; text-align: left; cursor: pointer; }
  .cs-toc .cs-jump b { font-weight: 800; }
  .cs-toc .cs-jump svg { flex: none; }
  .cs-toc.is-open .cs-jump svg { rotate: 180deg; }
  .cs-toc .cs-jump:focus-visible { outline: 3px solid var(--accent-text, #d65424); outline-offset: 2px; }
  .cs-toc.has-jump ul { display: none; position: absolute; left: clamp(12px, 4vw, 16px); right: clamp(12px, 4vw, 16px); top: calc(100% - 4px); z-index: 60; max-width: none !important; max-height: calc(100vh - 190px); overflow-y: auto; margin: 0; padding: 8px; flex-direction: column; flex-wrap: nowrap; gap: 2px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: var(--shadow); }
  .cs-toc.has-jump.is-open ul { display: flex; }
  .cs-toc.has-jump a { display: flex; align-items: center; min-height: 40px; padding: 7px 12px; border: 0; border-radius: 12px; font-size: 1rem; white-space: normal; }
}

/* Pause control under the logo strip: faint on purpose (#868b94 is 3.28:1 on the page), 24px tap area */
.motion-toggle { display: grid; place-items: center; width: 24px; height: 24px; margin: 2px clamp(16px, 4vw, 40px) 0 auto; padding: 0; border: 0; background: none; color: #868b94; cursor: pointer; }
.motion-toggle svg { fill: currentColor; }
.motion-toggle:hover { color: var(--ink); }
.motion-toggle:focus-visible { outline: 3px solid var(--accent-text, #d65424); outline-offset: 1px; border-radius: 6px; }
.motion-toggle .mt-play { display: none; }
.motion-toggle[aria-pressed="true"] .mt-play { display: inline; }
.motion-toggle[aria-pressed="true"] .mt-pause { display: none; }
.motion-paused .marquee-track, .motion-paused .orbit, .motion-paused .tool, .motion-paused .presence, .motion-paused .rec, .motion-paused .rec i, .motion-paused .availability .dot::after, .motion-paused .tidy-btn, .motion-paused .tidy-btn::after, .motion-paused .spk { animation-play-state: paused !important; }
.motion-paused .pixel-ai svg { animation-play-state: paused !important; }