.founder-page { background: #fcfdff; }
.founder-main { max-width: 1100px; padding: 56px 0 100px; }
.founder-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); grid-template-areas: "profile hero" "profile story"; gap: 0 72px; align-items: start; }

/* Profile column: the portrait, the personal-site card and the narration, pinned beside the story. */
.founder-profile { grid-area: profile; position: sticky; top: calc(var(--site-header-height, 72px) + 44px); display: grid; gap: 18px; animation: founder-arrive var(--duration-very-slow) var(--ease-smooth-out) both; }
.founder-portrait { margin: 0; }
.founder-portrait-frame { position: relative; display: block; border-radius: 22px; overflow: visible; }
.founder-portrait img { display: block; width: 100%; height: auto; border-radius: 22px; background: #e5e9ed; box-shadow: 0 0 0 1px #dfe6f0, 0 30px 60px -36px #0c2450; }
/* A Sumlino character peeks over the frame's corner, as they do across the site. */
.founder-portrait img { position: relative; z-index: 1; }
.founder-peek { position: absolute; z-index: 0; right: 22px; top: -26px; width: 46px; color: var(--character-ink, #075cff); transform: rotate(5deg); animation: founder-peek 6s ease-in-out infinite; }
@keyframes founder-peek { 0%, 100% { transform: rotate(5deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-4px); } }
.founder-peek svg { display: block; width: 100%; height: auto; overflow: visible; }
/* The characters are drawn by script just after the page arrives; they fade in
   rather than pop. */
:is(.founder-peek, .signoff-cast span) { transition: opacity 240ms ease-out; }
:is(.founder-peek, .signoff-cast span):empty { opacity: 0; }
.founder-portrait figcaption { display: flex; align-items: baseline; gap: 10px; margin: 16px 2px 0; color: #1c304d; font-size: 16px; }
.founder-portrait figcaption strong { font-weight: 650; letter-spacing: -.2px; }
.founder-portrait figcaption span { color: #61728a; font-size: 12.5px; }

/* "More about me": the natural next step, right under the name. A monogram,
   the link and its address, and an arrow that fills in and slides on hover. */
.founder-site-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 12px 12px 14px; border: 1px solid #dfe6f0; border-radius: 16px; background: #fff; color: #1c304d; text-decoration: none; box-shadow: 0 1px 2px #1734540a; transition: transform var(--duration-medium) var(--ease-smooth-out), box-shadow var(--duration-medium) var(--ease-smooth-out), border-color var(--duration-medium) var(--ease-smooth-out); }
.founder-site-card:focus-visible { transform: translateY(-2px); border-color: #b9ceff; box-shadow: 0 1px 2px #1734540a, 0 18px 36px -24px #075cff80; }
.founder-site-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.site-card-mark { position: relative; display: block; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #dfe6f0; transition: box-shadow var(--duration-medium) var(--ease-smooth-out), transform var(--duration-medium) var(--ease-smooth-out); }
.site-card-mark img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.site-card-copy { display: grid; gap: 2px; min-width: 0; }
.site-card-copy strong { color: #1c304d; font-size: 14.5px; font-weight: 650; letter-spacing: -.2px; }
.site-card-copy > span { color: #61728a; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-card-go { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #eef3fb; color: var(--blue); transition: background var(--duration-medium) var(--ease-smooth-out), color var(--duration-medium) var(--ease-smooth-out), transform var(--duration-medium) var(--ease-smooth-out); }
.site-card-go .ui-arrow { width: 15px; height: 15px; transition: transform var(--duration-fast) var(--ease-smooth-out); }
.founder-site-card:focus-visible .site-card-go { background: var(--blue); color: #fff; transform: translate(2px, -2px); }
/* Hover moves only for a real pointer; on a phone a tap would leave the card lifted. */
@media (hover: hover) and (pointer: fine) {
 .founder-site-card:hover { transform: translateY(-2px); border-color: #b9ceff; box-shadow: 0 1px 2px #1734540a, 0 18px 36px -24px #075cff80; }
 .founder-site-card:hover .site-card-mark { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--blue); transform: scale(1.04); }
 .founder-site-card:hover .site-card-go { background: var(--blue); color: #fff; transform: translate(2px, -2px); }
}

/* Story column: the introduction, then the chapters. The introduction comes
   first in the page so a phone opens on who Nick is, not on a stack of cards;
   on wider screens the grid puts it back beside the portrait. */
.founder-hero { grid-area: hero; padding: 6px 0 0; animation: founder-arrive var(--duration-very-slow) var(--ease-smooth-out) 80ms both; }
.founder-story { grid-area: story; animation: founder-arrive var(--duration-very-slow) var(--ease-smooth-out) 80ms both; }
.founder-hero .eyebrow { margin: 0 0 22px; }
.founder-overline { margin: 0 0 12px; color: #65738a; font-size: 13px; }
.founder-hero h1 { margin: 0; color: #1c2b43; font-size: clamp(42px, 5vw, 68px); font-weight: 600; line-height: 1.04; letter-spacing: -.045em; }
.founder-hero .founder-lead { margin: 22px 0 26px; max-width: 34em; color: #596c87; font-size: 19px; line-height: 1.65; letter-spacing: -.02em; }
.founder-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.founder-facts li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border: 1px solid #dfe6f0; border-radius: 999px; background: #fff; color: #33496a; font-size: 12.5px; font-weight: 500; }
.founder-facts i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px #075cff1a; }
/* Where Nick works: the first fact is a link. On hover or focus its dot
   spreads into an ink fill across the chip, the label rolls up to reveal the
   firm's name, and the arrow nudges toward it. The chip is as wide as its
   longer label, so nothing reflows. Reduced motion keeps a plain fade. */
.founder-facts li.founder-fact-work { padding: 0; border: 0; background: none; }
.founder-work { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px 7px 10px; overflow: hidden; border: 1px solid #dfe6f0; border-radius: 999px; background: #fff; color: #33496a; font-size: 12.5px; font-weight: 500; text-decoration: none; transition: border-color 200ms var(--ease-smooth-out), color 200ms var(--ease-smooth-out); }
.founder-work::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: var(--blue); clip-path: circle(3px at 13px 50%); opacity: 0; transition: clip-path 320ms var(--ease-smooth-out), opacity 120ms ease-out; }
.founder-work i { position: relative; flex: none; transition: transform 200ms var(--ease-smooth-out), background-color 200ms ease-out, box-shadow 200ms ease-out; }
.work-roll { display: grid; overflow: hidden; }
.work-face { grid-area: 1 / 1; white-space: nowrap; transition: transform 260ms var(--ease-smooth-out), opacity 200ms ease-out; }
.work-face--reveal { color: #fff; font-weight: 600; letter-spacing: -.005em; opacity: 0; transform: translateY(100%); }
.work-go { flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .55; transition: transform 260ms var(--ease-smooth-out), opacity 200ms ease-out, color 200ms ease-out; }
.founder-work:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.founder-work:focus-visible::before { opacity: 1; clip-path: circle(140% at 13px 50%); }
.founder-work:focus-visible { border-color: var(--blue); color: #fff; }
.founder-work:focus-visible i { background: #fff; box-shadow: 0 0 0 3px #ffffff40; transform: scale(.85); }
.founder-work:focus-visible .work-face:not(.work-face--reveal) { opacity: 0; transform: translateY(-100%); }
.founder-work:focus-visible .work-face--reveal { opacity: 1; transform: none; transition-delay: 40ms; }
.founder-work:focus-visible .work-go { opacity: 1; transform: translate(2px, -2px); }
/* The same firm, linked in the story. Pointing at (or focusing) the phrase
   pops a small card up from it with the firm's name and address. The card's
   words come from the stylesheet, so the paragraph (and its narration) reads
   exactly as written; screen readers get the link's description instead. */
.founder-firm { position: relative; color: inherit; text-decoration: underline; text-decoration-color: #075cff59; text-decoration-thickness: 1.5px; text-underline-offset: 4px; white-space: nowrap; transition: color 180ms var(--ease-smooth-out), text-decoration-color 180ms var(--ease-smooth-out); }
.firm-card { position: absolute; left: -6px; bottom: calc(100% + 12px); z-index: 5; display: grid; grid-template-areas: "name" "site"; row-gap: 2px; padding: 11px 14px 11px 14px; border: 1px solid #dfe6f0; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px #1734540d, 0 18px 40px -18px #17345466; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(6px) scale(.96); transform-origin: 24px 100%; transition: opacity 140ms ease-out, transform 160ms var(--ease-smooth-out); }
.firm-card::before { content: attr(data-name); grid-area: name; color: #1c304d; font-size: 14px; font-weight: 600; letter-spacing: -.01em; line-height: 20px; }
.firm-card::after { content: attr(data-site) " \2197"; grid-area: site; color: var(--blue); font-size: 12.5px; font-weight: 500; line-height: 18px; }
.founder-firm:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.founder-firm:focus-visible { color: var(--blue); text-decoration-color: var(--blue); }
.founder-firm:focus-visible .firm-card { opacity: 1; transform: none; transition: opacity 180ms ease-out 60ms, transform 260ms var(--ease-smooth-out) 60ms; }
@media (hover: hover) and (pointer: fine) {
 .founder-work:hover { border-color: var(--blue); color: #fff; }
 .founder-work:hover::before { opacity: 1; clip-path: circle(140% at 13px 50%); }
 .founder-work:hover i { background: #fff; box-shadow: 0 0 0 3px #ffffff40; transform: scale(.85); }
 .founder-work:hover .work-face:not(.work-face--reveal) { opacity: 0; transform: translateY(-100%); }
 .founder-work:hover .work-face--reveal { opacity: 1; transform: none; transition-delay: 40ms; }
 .founder-work:hover .work-go { opacity: 1; transform: translate(2px, -2px); }
 .founder-firm:hover { color: var(--blue); text-decoration-color: var(--blue); }
 .founder-firm:hover .firm-card { opacity: 1; transform: none; transition: opacity 180ms ease-out 60ms, transform 260ms var(--ease-smooth-out) 60ms; }
}
.founder-chapter { position: relative; padding: 36px 0 10px; margin-top: 26px; border-top: 1px solid var(--line); }
.chapter-head { display: flex; align-items: baseline; gap: 14px; margin: 0 0 16px; }
.chapter-index { flex: none; color: var(--blue); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; font-variant-numeric: tabular-nums; }
.founder-story h2 { margin: 0; color: #1c304d; font-size: clamp(22px, 2.2vw, 26px); font-weight: 600; letter-spacing: -.035em; line-height: 1.25; }
.founder-story section p { margin: 0 0 22px; max-width: 64ch; color: #5a6b85; font-size: 15.5px; line-height: 1.8; }
.founder-pastimes { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; padding: 0; list-style: none; }
.founder-pastimes li { padding: 6px 11px; border-radius: 999px; background: #eef3fb; color: #4f6481; font-size: 12px; font-weight: 500; }
/* The question Sumlino started with reads as a pull quote. */
.founder-question { position: relative; margin: 4px 0 26px !important; padding: 20px 24px 20px 26px; max-width: none !important; border-left: 3px solid var(--blue); border-radius: 0 16px 16px 0; background: linear-gradient(90deg, #f0f5ff, #fff 85%); color: #1c304d !important; font-size: 18px !important; font-weight: 500; line-height: 1.55 !important; letter-spacing: -.01em; }
/* Chapters rise in as they reach the screen. */
.js-reveal .founder-chapter.is-waiting, .js-reveal .founder-signoff.is-waiting { opacity: 0; transform: translateY(14px); }
.founder-chapter, .founder-signoff { transition: opacity var(--duration-very-slow) var(--ease-smooth-out), transform var(--duration-very-slow) var(--ease-smooth-out); }
@media print { .founder-chapter, .founder-signoff { opacity: 1 !important; transform: none !important; } .signature-ink path { opacity: 1 !important; stroke-dashoffset: 0 !important; } .signature-pen { display: none; } }

/* Sign-off: signature, the cast, and the two next steps. */
.founder-signoff { position: relative; margin-top: 28px; padding: 34px 32px 30px; border-radius: 24px; background: #0a1630; color: #c4d2ec; overflow: hidden; }
.founder-signoff::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 85% 20%, #1b3f8f55, transparent 70%); pointer-events: none; }
.founder-signoff > * { position: relative; z-index: 1; }
.signoff-cast { position: absolute; right: 26px; top: 22px; display: flex; align-items: flex-end; gap: 8px; }
.signoff-cast span { display: block; width: 40px; color: var(--character-ink, #075cff); animation: founder-bob 5.2s ease-in-out infinite; }
.signoff-cast span:nth-child(2) { width: 48px; animation-delay: -1.7s; }
.signoff-cast span:nth-child(3) { animation-delay: -3.4s; }
.signoff-cast svg { display: block; width: 100%; height: auto; overflow: visible; }
.founder-signoff p { margin: 0; color: #a9badb; font-size: 15px; }
/* The signature is a hand-drawn path, white and tilted like a pen sign-off.
   founder-motion.js has a pen write it once when the card comes into view. */
.founder-signature { display: block; width: 144px; height: auto; margin: 6px 0 16px -4px; overflow: visible; transform: rotate(-5deg); }
.signature-ink path { fill: none; stroke: #fff; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.signature-pen { opacity: 0; transition: opacity var(--duration-fast) var(--ease-smooth-out); }
.founder-signature.is-writing .signature-pen { opacity: 1; }
.pen-body { fill: #f4f7ff; stroke: #0a1630; stroke-width: .8; }
.pen-band { fill: #075cff; }
.pen-nib { fill: #c9d8f5; stroke: #0a1630; stroke-width: .8; stroke-linejoin: round; }
.signoff-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.founder-signoff .btn-primary { box-shadow: 0 0 0 1px #ffffff1f, 0 18px 50px -12px #075cffcc; }
.signoff-personal { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; color: #c3d0e8; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.signoff-personal span { transition: transform var(--duration-fast) var(--ease-smooth-out); }
@media (hover: hover) and (pointer: fine) { .signoff-personal:hover { color: #fff; } .signoff-personal:hover span { transform: translate(2px, -2px); } }
.founder-page main a:focus-visible, .founder-listen :is(button, select):focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

/* Narration card. */
.founder-listen { padding: 16px 18px 10px; border: 1px solid #dfe6f0; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px #1734540a; }
.listen-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: #61728a; font-size: 11px; font-weight: 650; letter-spacing: .6px; text-transform: uppercase; }
.listen-kicker i { width: 6px; height: 6px; border-radius: 50%; background: #20a582; box-shadow: 0 0 0 3px #20a5821f; }
.listen-controls { display: flex; align-items: center; gap: 12px; margin: 0; }
.listen-play { position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: #eaf1ff; color: #075cff; cursor: pointer; transition: background var(--duration-fast) var(--ease-smooth-out),color var(--duration-fast),transform var(--duration-fast) var(--ease-smooth-out),box-shadow var(--duration-fast); }
[data-state="playing"] .listen-play { background: #075cff; color: #fff; box-shadow: 0 4px 14px #075cff20; }
/* Only a real pointer gets the hover fill; a tap on a phone would leave the
   paused button looking as if it were still playing. */
@media (hover: hover) and (pointer: fine) {
 .listen-play:hover:not(:disabled) { background: #075cff; color: #fff; box-shadow: 0 4px 14px #075cff20; transform: translateY(-2px); }
 .listen-restart:hover:not(:disabled) { background: #edf3fe; color: var(--blue); }
 .speed-trigger:hover { background: #edf3fe; color: var(--blue); }
}
.listen-play:active:not(:disabled) { transform: scale(.96); }
.listen-icon-swap { display: grid; width: 20px; height: 20px; }
.listen-icon-swap svg { grid-area: 1/1; width: 20px; height: 20px; fill: currentColor; transition: opacity var(--icon-swap-dur) var(--icon-swap-ease),transform var(--icon-swap-dur) var(--icon-swap-ease),filter var(--icon-swap-dur) var(--icon-swap-ease); }
.listen-icon-swap .pause-symbol,.listen-icon-swap .loading-symbol { opacity: 0; filter: blur(2px); transform: scale(.7); }
[data-state="playing"] .pause-symbol,[data-state="loading"] .loading-symbol { opacity: 1; filter: none; transform: scale(1); }
[data-state="playing"] .play-symbol,[data-state="loading"] .play-symbol { opacity: 0; filter: blur(2px); transform: scale(.7); }
.listen-icon-swap .loading-symbol { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 32 18; }
[data-state="loading"] .loading-symbol { animation: listen-spin 1s linear infinite; }
.listen-wave { display: flex; flex: none; align-items: center; gap: 3px; height: 20px; margin-left: auto; color: #aab9ce; transition: color var(--duration-fast); }
.listen-wave i { width: 2px; height: 14px; border-radius: 3px; background: currentColor; transform: scaleY(.25); }
[data-state="playing"] .listen-wave { color: var(--blue); }
[data-state="playing"] .listen-wave i { animation: listen-level 900ms ease-in-out infinite alternate; }
.listen-wave i:nth-child(2) { animation-delay: -250ms; }
.listen-wave i:nth-child(3) { animation-delay: -550ms; }
.listen-wave i:nth-child(4) { animation-delay: -100ms; }
.listen-wave i:nth-child(5) { animation-delay: -400ms; }
.listen-copy { display: grid; gap: 4px; min-width: 0; flex: 1; }
.listen-copy strong { color: #1c304d; font-size: 13px; font-weight: 650; }
.listen-copy span { color: #6a7688; font-size: 11px; line-height: 1.4; }
.listen-restart { flex: none; display: grid; place-items: center; width: 32px; height: 36px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #657893; cursor: pointer; transition: background var(--duration-fast), color var(--duration-fast); }
.listen-restart svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.founder-listen button:disabled { opacity: .4; cursor: default; }
.listen-track { position: relative; height: 30px; display: grid; align-items: center; margin-top: 6px; }
.founder-listen progress { display: block; width: 100%; height: 3px; border: 0; border-radius: 4px; overflow: hidden; background: #e5ecf5; accent-color: var(--blue); }
.founder-listen progress::-webkit-progress-bar { background: #e5ecf5; }
.founder-listen progress::-webkit-progress-value { background: var(--blue); }
.founder-listen progress::-moz-progress-bar { background: var(--blue); }
.listen-track input { position: absolute; inset: 0; appearance: none; width: 100%; height: 30px; margin: 0; background: transparent; cursor: pointer; accent-color: var(--blue); }
.listen-track input::-webkit-slider-runnable-track { height: 2px; background: transparent; }
.listen-track input::-moz-range-track { height: 2px; background: transparent; }
.listen-track input::-webkit-slider-thumb { appearance: none; width: 11px; height: 11px; margin-top: -4.5px; border: 2px solid #fff; border-radius: 50%; background: var(--blue); box-shadow: 0 1px 4px #0c245033; }
.listen-track input::-moz-range-thumb { width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%; background: var(--blue); }
.listen-track input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 5px; }
.listen-track input:disabled { cursor: default; opacity: .35; }
.listen-settings { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: -5px; color: #6a7688; font-size: 11px; font-variant-numeric: tabular-nums; }
.listen-options { display: flex; align-items: center; gap: 6px; }
.listen-speed { position: relative; }
.speed-trigger { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 60px; min-height: 36px; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; color: #3e5776; font: inherit; font-size: 12px; cursor: pointer; transition: background var(--duration-fast),color var(--duration-fast); }
.speed-trigger[aria-expanded="true"] { background: #edf3fe; color: var(--blue); }
.speed-trigger svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--duration-fast) var(--ease-smooth-out); }
.speed-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.speed-menu { position: absolute; z-index: 5; bottom: calc(100% + 7px); right: 0; width: 174px; padding: 6px; border: 1px solid #e5ebf5; border-radius: 13px; background: #fff; box-shadow: 0 12px 35px #233b5d14,0 2px 5px #233b5d06; transform-origin: bottom right; transform: scale(var(--scale-medium,.97)); opacity: 0; visibility: hidden; pointer-events: none; transition: transform var(--duration-fast) var(--ease-smooth-out),opacity var(--duration-fast) var(--ease-smooth-out),visibility 0s var(--duration-quick); }
.speed-menu.is-open { transform: scale(1); opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.speed-menu.is-closing { transform: scale(var(--scale-tiny,.99)); transition-duration: var(--duration-quick); }
.speed-caption { display: block; padding: 8px 9px 7px; color: #8390a3; font-size: 11px; }
.speed-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: #3e5776; font: inherit; font-size: 12px; text-align: left; cursor: pointer; transition: background var(--duration-quick),color var(--duration-quick); }
.speed-menu button:hover,.speed-menu button:focus-visible { background: #f2f6fc; }
.speed-menu button[aria-checked="true"] { background: #edf3ff; color: var(--blue); }
.speed-menu small { margin-left: 9px; color: #7486a0; font-size: 11px; }
.speed-check { opacity: 0; transform: scale(.7); transition: opacity var(--duration-fast),transform var(--duration-fast) var(--ease-smooth-out); }
[aria-checked="true"] .speed-check { opacity: 1; transform: scale(1); }
@keyframes founder-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes founder-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-4px) rotate(-2deg); } }
@keyframes listen-level { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@keyframes listen-spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
 .founder-main { padding-top: 40px; }
 .founder-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 0 40px; }
}
@media (max-width: 680px) {
 .founder-main { padding-bottom: 60px; }
 /* One calm column on phones: the introduction, a short list of facts, the
    portrait, the narration, then the story. Repeats step aside here: the
    tagline above the name, the "More about me" card (the sign-off has the same
    link), the audio label and the pastime chips that echo the paragraphs. */
 .founder-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "profile" "story"; gap: 32px 0; }
 .founder-profile { position: static; gap: 14px; max-width: 440px; width: 100%; margin-inline: auto; }
 .founder-hero { padding: 0; }
 .founder-hero .eyebrow { margin-bottom: 18px; }
 .founder-overline, .founder-site-card, .listen-kicker, .founder-pastimes { display: none; }
 .founder-hero .founder-lead { margin: 18px 0 22px; font-size: 17.5px; text-wrap: pretty; }
 .founder-facts { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--line); }
 .founder-facts li, .founder-facts li.founder-fact-work { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; color: #33496a; font-size: 14px; }
 .founder-work { gap: 12px; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; font-size: 14px; }
 .founder-work::before { content: none; }
 .founder-work:focus-visible { border-color: transparent; color: var(--blue); }
 .founder-work:focus-visible i { background: var(--blue); box-shadow: 0 0 0 3px #075cff1a; transform: none; }
 .work-face--reveal { color: var(--blue); }
 .founder-portrait img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; }
 .founder-portrait figcaption { margin-top: 12px; }
 .founder-listen { padding: 14px 16px 8px; }
 .founder-chapter { padding-top: 28px; margin-top: 24px; }
 .founder-story > .founder-chapter:first-child { margin-top: 0; }
 .founder-story section p { font-size: 15px; }
 .founder-question { padding: 16px 18px 16px 20px; font-size: 16.5px !important; }
 .founder-signoff { padding: 28px 22px 26px; }
 .signoff-cast { position: static; justify-content: flex-start; margin-bottom: 18px; }
 .signoff-actions .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
 .founder-profile,.founder-hero,.founder-story { animation: none; }
 .founder-chapter, .founder-signoff { opacity: 1; transform: none; transition: none; }
 .signoff-cast span, .founder-peek { animation: none; }
 .founder-site-card, .site-card-mark, .site-card-go, .site-card-go .ui-arrow { transition: none; }
 .founder-work::before { clip-path: none; transition: opacity 150ms ease-out; }
 .work-face, .work-go, .founder-work i { transition: opacity 150ms ease-out, color 150ms ease-out, background-color 150ms ease-out; transform: none !important; }
 .firm-card { transform: none !important; transition: opacity 150ms ease-out !important; }
 .founder-site-card:hover, .founder-site-card:hover .site-card-go, .founder-site-card:hover .site-card-mark { transform: none; }
 .listen-play,.listen-icon-swap svg,.listen-wave,.listen-restart,.signoff-personal span,.speed-trigger,.speed-trigger svg,.speed-menu,.speed-menu button,.speed-check { transition: none; }
 [data-state="playing"] .listen-wave i,[data-state="loading"] .loading-symbol { animation: none; }
 .listen-play:hover:not(:disabled),.listen-play:active:not(:disabled),.signoff-personal:hover span { transform: none; }
}

/* Pause motion (WCAG 2.2.2): the footer switch holds the peeking and sign-off characters still. */
html.is-motion-paused :is(.founder-peek, .signoff-cast span) { animation-play-state: paused !important; }