/* Design tokens: the single source of truth for colour, type, spacing and motion.
   Shared by every page. Breakpoints are mobile-first (min-width). */

:root{
  --bg:#FAFAFA;
  --ink:#14151A;
  --muted:#5A5C72;
  --card:#FFFFFF;
  --line:#D9D8E3;
  --r:24px;
  --r-hl:0;
  --m:16px;
  --text:350px;
  --bo:0px;
  --bw:0px;
  --sec:48px;
  --g1:#5B44B0;
  --g2:#624AD8;
  --g3:#6A4DFF;
  --g4:#6A4DFF;
  --acid:#D4FF3A;
  --acid-hover:#B8F500;
  --acid-tint:#EAFF8F;
  --gd1:#A99BFF;
  --gd2:#A99BFF;
  --gd3:#D4FF3A;
  --grad-action:linear-gradient(100deg,var(--g1) 0%,var(--g2) 35%,var(--g3) 68%,var(--g4) 100%);
  --grad-corner:linear-gradient(135deg,var(--g1) 0%,var(--g2) 35%,var(--g3) 68%,var(--g4) 100%);
  --grad-action-dark:linear-gradient(100deg,var(--gd1) 0%,var(--gd2) 50%,var(--gd3) 100%);
  --cp:0px;
  --panel:#F4F3F6;
  --cardline:#F1F1F1;
  --hl:var(--acid);
  --card-pad:24px;
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-8:32px;
  --sp-10:40px;
  --sp-12:48px;
  --sp-16:64px;
  --sp-24:96px;
  --dur-instant:.1s;
  --dur-fast:.2s;
  --dur-base:.25s;
  --dur-medium:.3s;
  --dur-slow:.45s;
  --dur-reveal:.8s;
  --dur-wave:1s;
  --delay-sm:.15s;
  --stagger-step:55ms;
  --delay-hl:1.45s;
  --delay-lede:1.7s;
  --ease:cubic-bezier(.2,0,0,1);
  --ease-out:cubic-bezier(0,0,0,1);
  --ease-in-out:cubic-bezier(.2,0,0,1);
  --ease-enter:cubic-bezier(.05,.7,.1,1);
  --ease-exit:cubic-bezier(.3,0,.8,.15);
  --ease-exit-fade:cubic-bezier(.3,0,1,1);
  --ease-reveal:var(--ease-enter);
  --kick-gap:var(--sp-4);
  --font-sans:'Hanken Grotesk','Hanken Grotesk Fallback',system-ui,sans-serif;
  --font-serif:'Newsreader','Newsreader Fallback',Georgia,serif;
  --font-mono:'DM Mono',monospace;
  --fs-xs:12px;
  --fs-sm:14px;
  --fs-md:16px;
  --fs-base:18px;
  --fs-lg:20px;
  --fs-xl:24px;
  --fs-2xl:28px;
  --fs-3xl:32px;
  --fs-h1:clamp(2rem,3.2vw,2.5rem);
  --fs-cta:clamp(2rem,4vw,3.5rem);
  --fs-display:clamp(2.75rem,5.4vw,4.5rem);
  --white:#FFFFFF;
  --black:#000000;
  --line-soft:#ECEBF3;
  --ink-06:rgba(20,21,26,.06);
  --ink-12:rgba(20,21,26,.12);
  --ink-28:rgba(20,21,26,.28);
  --ink-88:rgba(20,20,18,.88);
  --g1-35:rgba(91,68,176,.35);
  --g1-45:rgba(91,68,176,.45);
  --white-16:rgba(255,255,255,.16);
  --white-40:rgba(255,255,255,.4);
  --white-78:rgba(255,255,255,.78);
  --white-86:rgba(255,255,255,.86);
  --bg-86:rgba(250,250,250,.86);
  --shadow-35:rgba(40,43,50,.35);
  --black-40:rgba(0,0,0,.4);
  --track:#ECEBF3;
  --measure:660px;
}

@media (min-width:768px){
  :root{
    --m:32px;
    --text:524px;
    --bo:90px;
    --bw:90px;
    --sec:64px;
    --cp:24px;
    --card-pad:32px;
  }
}

@media (min-width:1024px){
  :root{
    --m:48px;
    --text:612px;
    --bo:79px;
    --bw:158px;
    --sec:96px;
    --cp:40px;
    --card-pad:40px;
  }
}

@media (min-width:1280px){
  :root{
    --m:64px;
    --text:564px;
    --bo:196px;
    --bw:294px;
  }
}

@media (min-width:1440px){
  :root{
    --m:120px;
    --text:588px;
    --bo:204px;
    --bw:306px;
  }
}

/* Shared component styles: rules that were repeated on every page. */
x-dc{display:none!important}
body{margin:0;background:var(--bg)}
a{color:var(--ink);text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:4px}
header a,nav a{color:var(--ink)}
h1,h2,h3{text-wrap:balance}
@font-face{font-family:'Hanken Grotesk Fallback';src:local('Arial');size-adjust:100.94%;ascent-override:99.07%;descent-override:30.02%;line-gap-override:0%}
@font-face{font-family:'Newsreader Fallback';src:local('Times New Roman');size-adjust:105.48%;ascent-override:69.68%;descent-override:25.12%;line-gap-override:0%}
h1,h2{font-family:var(--font-serif);font-weight:500}
h1{font-size:var(--fs-display);line-height:1.05;letter-spacing:-0.025em}
h2{font-size:var(--fs-h1);line-height:1.15;letter-spacing:-0.02em}
h3{line-height:1.3;letter-spacing:-0.01em}
h1 em{font-style:italic}
.kick{font-family:var(--font-mono);font-size:var(--fs-sm);letter-spacing:.04em}
p,li,dd,blockquote{text-wrap:pretty}
.num{margin:0 0 var(--kick-gap);font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--muted);letter-spacing:.04em}
nav a{text-decoration:none}
.ni{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px}
.ico{flex:none;overflow:visible}
.ico *{transform-box:fill-box;transform-origin:center;transition:transform var(--dur-medium) var(--ease)}
.ni .nt{transition:color var(--dur-fast) var(--ease)}
.ni:is(:hover,:focus-visible) .nt{background:var(--grad-action);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.ni:is(:hover,:focus-visible) .ico{stroke:url(#navg)}
.ni:hover .i-work .a{transform:translateY(-1.5px)}
.ni:hover .i-work .b{transform:scaleX(1.14) translateY(.5px)}
.ni:hover .i-talk .a{transform:scaleY(1.6)}
.ni:hover .i-talk .b{transform:scaleY(.55)}
.ni:hover .i-talk .c{transform:scaleY(1.5)}
.ni:hover .i-talk .d{transform:scaleY(.6)}
.i-about .h{opacity:0;transform:rotate(-7deg) scale(.7);transition:transform var(--dur-instant) var(--ease-out),opacity var(--dur-instant) var(--ease-out)}
.ni:hover .i-about .h{opacity:1;transform:rotate(-7deg) scale(1)}
.ni:hover .i-about .b{transform:translateY(1px)}
@media (prefers-reduced-motion:reduce){
  .i-about .h{transition:none;transform:rotate(-7deg)}
}
/* Contact: the whole envelope tilts */
.ni .i-mail{transition:transform var(--dur-medium) var(--ease)}
.ni:hover .i-mail{transform:rotate(-4deg)}
@media (prefers-reduced-motion:reduce){
  .ico *{transition:none}
  .ni:hover .ico *{transform:none !important}
  .ni .i-mail{transition:none}
  .ni:hover .i-mail{transform:none}
}
:focus-visible{outline:2px solid var(--g1);outline-offset:3px;border-radius:6px}
.up:focus-visible{outline-color:var(--white);outline-offset:-6px}
@media (forced-colors:active){
  a:is(:hover,:focus-visible),.ni:is(:hover,:focus-visible) .nt,.btn:is(:hover,:focus-visible){background:none !important;color:LinkText !important;-webkit-text-fill-color:currentColor !important}
}
.stat{font-variant-numeric:tabular-nums;font-size:var(--fs-3xl);font-weight:600;line-height:1.1;letter-spacing:-.01em}
.btn{transition:background-color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease),color var(--dur-base) var(--ease)}
.btn>span{transition:background-color var(--dur-base) var(--ease),color var(--dur-base) var(--ease)}
.btn-p{background:var(--acid) !important;color:var(--ink) !important}
.btn-p span{background:var(--ink) !important;color:var(--white) !important}
.btn-p:is(:hover,:focus-visible){background:var(--g1) !important;color:var(--white) !important}
.btn-p:is(:hover,:focus-visible) span{background:var(--acid) !important;color:var(--ink) !important}
::selection{background:var(--acid);color:var(--ink)}
.btn-s:is(:hover,:focus-visible){background:var(--grad-action);-webkit-background-clip:text;background-clip:text;color:transparent !important;-webkit-text-fill-color:transparent;border-color:var(--g3) !important}
.btn-p:hover .arr{transform:translateX(3px)}
.up .arr{transition:transform var(--dur-medium) var(--ease)}
.up:hover .arr{transform:translateX(14px)}
.up img{transition:transform var(--dur-slow) var(--ease)}
.up:hover img{transform:translateY(-10px)}
.up .ul{transition:border-color var(--dur-medium) var(--ease)}
@media (prefers-reduced-motion:reduce){
  .up .arr,.up img,.btn{transition:none}
  .up:hover .arr,.up:hover img,.btn-p:hover .arr{transform:none}
}
.logo{position:relative;display:inline-flex;align-items:center;min-height:44px}
.logo .hand{position:absolute;left:100%;top:50%;margin:-11px 0 0 var(--sp-2);opacity:0;transform-origin:70% 90%;transition:opacity var(--dur-fast) var(--ease);pointer-events:none}
.logo:hover .hand{opacity:1;animation:wave var(--dur-wave) var(--ease-in-out) 1 forwards}
@keyframes wave{0%,100%{transform:rotate(0)}15%{transform:rotate(16deg)}30%{transform:rotate(-10deg)}45%{transform:rotate(16deg)}60%{transform:rotate(-8deg)}75%{transform:rotate(10deg)}}
@media (prefers-reduced-motion:reduce){
  .logo:hover .hand{animation:none}
}
html{scroll-padding-top:var(--sp-24)}
.skip{position:absolute;left:16px;top:-120px;z-index:300;background:var(--ink);color:var(--white);padding:0 var(--sp-4);border-radius:8px;text-decoration:none}
.skip:focus{top:12px}
@media (max-width:479px){
  .ni .ico{display:none}
  nav[aria-label="Main"]{padding:var(--sp-2) 0 !important;row-gap:0 !important}
  nav[aria-label="Main"]>div{gap:0 var(--sp-3) !important}
  html{scroll-padding-top:120px}
}
@media (min-width:480px) and (max-width:599px){
  .ni .ico{display:none}
  html{scroll-padding-top:152px}
}
.hdr{position:sticky;top:0;z-index:100;background:var(--white-86);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:transform var(--dur-slow) var(--ease-enter),opacity var(--dur-medium) var(--ease),border-color var(--dur-medium) var(--ease),box-shadow var(--dur-medium) var(--ease),visibility 0s linear 0s;will-change:transform}
.hdr.is-stuck{border-bottom-color:var(--line);box-shadow:0 10px 30px -22px var(--shadow-35)}
.hdr.is-hidden{transform:translateY(-100%);opacity:0;visibility:hidden;transition:transform var(--dur-slow) var(--ease-exit),opacity var(--dur-medium) var(--ease-exit-fade) var(--delay-sm),border-color var(--dur-medium) var(--ease),box-shadow var(--dur-medium) var(--ease),visibility 0s linear var(--dur-slow)}
@media (prefers-reduced-motion:reduce){
  .hdr,.hdr.is-hidden{transition:none}
  .hdr.is-hidden{transform:none;opacity:1;visibility:visible}
}
.arr{display:inline-block;vertical-align:-1px;margin-left:var(--sp-2);transition:transform var(--dur-base) var(--ease)}
.arr-l{margin-left:0;margin-right:var(--sp-2)}
a:hover .arr{transform:translateX(4px)}
a:hover .arr-l{transform:translateX(-4px)}
@media (prefers-reduced-motion:reduce){
  .arr{transition:none}
  a:hover .arr,a:hover .arr-l{transform:none}
}
.hdr{background:var(--bg-86)}
.kick{color:var(--g1) !important}
[style*="background: var(--card)"]{box-shadow:0 0 0 1px var(--cardline)}
.btn-p{background:var(--ink) !important;color:var(--white) !important}
.btn-p span{background:var(--acid) !important;color:var(--ink) !important}
.btn-p:is(:hover,:focus-visible){background:var(--acid) !important;color:var(--ink) !important}
.btn-p:is(:hover,:focus-visible) span{background:var(--ink) !important;color:var(--white) !important}
.btn-s{background:transparent !important;border-color:var(--ink) !important;color:var(--ink) !important;transition:background-color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease),color var(--dur-base) var(--ease)}
.btn-s:is(:hover,:focus-visible){background:var(--acid) !important;border-color:var(--acid) !important;color:var(--ink) !important;-webkit-text-fill-color:var(--ink) !important;-webkit-background-clip:border-box !important;background-clip:border-box !important}
.shot{position:relative;overflow:hidden;aspect-ratio:16/10;border-radius:16px;background:var(--panel)}
.shot img{position:absolute;left:5%;top:7%;width:100%;height:100%;object-fit:cover;object-position:left top;display:block;border-radius:12px;background:var(--white);box-shadow:0 0 0 1px var(--ink-06),0 32px 64px -24px var(--g1-45);transition:transform var(--dur-slow) var(--ease)}
.card:hover .shot img{transform:translate(-6px,-8px)}
.kick,.num,.hvsw,[style*="DM Mono"]{text-transform:uppercase}
@media (prefers-reduced-motion:reduce){
  .card:hover .shot img{transform:none}
}
[style*="background: var(--card)"][style*="padding: var(--sp-4);"],[style*="background: var(--card)"][style*="padding: var(--sp-5);"],[style*="background: var(--card)"][style*="padding: var(--sp-6);"],[style*="background: var(--card)"][style*="padding: var(--sp-6)"]{padding:var(--card-pad) !important}
.ni:is(:hover,:focus-visible) .nt{background:var(--acid) !important;-webkit-background-clip:border-box !important;background-clip:border-box !important;color:var(--ink) !important;-webkit-text-fill-color:var(--ink) !important;box-shadow:0 0 0 3px var(--acid);border-radius:var(--r-hl)}
.ni:is(:hover,:focus-visible) .ico{stroke:var(--ink) !important}
.ni:is(:hover,:focus-visible) .nt{background:none !important;box-shadow:none !important;color:var(--ink) !important;-webkit-text-fill-color:var(--ink) !important;text-decoration:underline;text-decoration-color:var(--acid);text-decoration-thickness:3px;text-underline-offset:6px}
.ni:is(:hover,:focus-visible) .ico{stroke:currentColor !important}
.logo .hand{display:none !important}
.logo:is(:hover,:focus-visible){background:none !important;box-shadow:none !important;color:var(--ink) !important;-webkit-text-fill-color:var(--ink) !important}
.zoom{display:block;width:100%;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:inherit;cursor:zoom-in}
.lbd{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:var(--sp-6);border:0;box-sizing:border-box;background:var(--ink-88);align-items:center;justify-content:center;cursor:zoom-out}
.lbd:not([open]){display:none}
.lbd[open]{display:flex}
.lbd::backdrop{background:transparent}
.lbx{position:absolute;top:16px;right:16px;width:44px;height:44px;border:0;border-radius:50%;background:var(--white);color:var(--ink);font-size:var(--fs-2xl);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lbd :focus-visible{outline-color:var(--white)}
.lbd{padding:72px 88px}
.lbd img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;background:none;box-shadow:none;border-radius:12px}
.lbn{position:absolute;top:50%;margin-top:-24px;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:var(--white);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color var(--dur-base) var(--ease)}
.lbn:hover{background:var(--acid)}
.lbp{left:16px}
.lbnx{right:16px}
.lbc{position:absolute;left:0;right:0;bottom:24px;text-align:center;color:var(--white);font:14px/1 var(--font-mono);letter-spacing:.04em;pointer-events:none}
@media (max-width:640px){
  .lbd{padding:64px 12px 88px}
  .lbn{top:auto;bottom:12px;margin:0}
  .lbp{left:16px}
  .lbnx{right:16px}
}
@media (prefers-reduced-motion:reduce){
  .lbn{transition:none}
}

/* Components: these used to be repeated inline styles. */
/* Case studies: "What I did / What I didn't do" row */
.tradeoff{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-8)}
.tradeoff-col{flex:1 1 240px}
.tradeoff-label{margin:0px;font-size:var(--fs-sm);color:var(--muted)}
.tradeoff-text{margin:2px 0px 0px;font-size:var(--fs-base)}
/* Case studies: fact list (My role, Result…) */
.fact-label{font-size:var(--fs-sm);color:var(--muted)}
.fact-value{margin:var(--sp-1) 0 0}
/* Card heading */
.card-title{margin:0 0 var(--sp-3);font-size:var(--fs-xl);font-weight:600}
/* Text under a big number */
.stat-label{margin:var(--sp-2) 0 0;font-size:var(--fs-sm);color:var(--muted)}
/* Section heading spacing */
.section-title{margin:0 0 var(--sp-6)}
/* Case studies: section divider */
.cs-section{margin-top:var(--sec);padding-top:var(--sec);border-top:1px solid var(--line)}
/* Figure caption */
.caption{margin-top:var(--sp-2);font-size:var(--fs-sm);color:var(--muted)}

/* External links: open in a new tab, marked with the external-link icon */
.ext{display:inline-block;vertical-align:-1px;margin-left:var(--sp-1);flex:none;transition:transform var(--dur-base) var(--ease)}
a:is(:hover,:focus-visible) .ext{transform:translate(1px,-1px)}
@media (prefers-reduced-motion: reduce){.ext{transition:none}a:is(:hover,:focus-visible) .ext{transform:none}}
.nowrap{white-space:nowrap}
/* Download links: download icon; on hover the arrow drops into the tray */
.dl{display:inline-block;vertical-align:-1px;margin-left:var(--sp-1);flex:none}
.dl .dl-arrow{transition:transform var(--dur-base) var(--ease)}
a:is(:hover,:focus-visible) .dl .dl-arrow{transform:translateY(2px)}
@media (prefers-reduced-motion: reduce){.dl .dl-arrow{transition:none}a:is(:hover,:focus-visible) .dl .dl-arrow{transform:none}}
/* Homepage jumps to Work and About: land with the section title near the top edge.
   The header hides on the way down, so the scroll-padding kept for it (above) is cancelled
   here and the section's own top padding is scrolled past, leaving --sp-12 above the title.
   Reduced motion: the header stays visible, so keep the default offset. */
#work,#how{scroll-margin-top:calc(var(--sp-12) - var(--sec) - var(--sp-24))}
@media (max-width:479px){#work,#how{scroll-margin-top:calc(var(--sp-12) - var(--sec) - 120px)}}
@media (min-width:480px) and (max-width:599px){#work,#how{scroll-margin-top:calc(var(--sp-12) - var(--sec) - 152px)}}
@media (prefers-reduced-motion:reduce){#work,#how{scroll-margin-top:0}}
/* How I work: a small arrow before each principle (decorative: hidden from screen readers) */
#how h3::before{content:"↳";content:"↳" / "";font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:400;font-synthesis:none;letter-spacing:0.04em;color:var(--g1);margin-right:var(--sp-1);vertical-align:text-top;position:relative;top:0.2em}
/* Back links ("Back to all work", "Back to home"): one look everywhere, the case-study breadcrumb style */
#content .back{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;color:var(--muted);font-size:var(--fs-sm)}
#content .back:is(:hover,:focus-visible){background:none !important;box-shadow:none !important;color:var(--ink) !important;-webkit-text-fill-color:var(--ink) !important;text-decoration-color:var(--ink) !important}
#content .back:is(:hover,:focus-visible) .arr{stroke:currentColor !important}
/* Contact footer band (home, speaking): section spacing above and below */
.cf{padding:var(--sec) 0}
/* Case-study "Next case study" footer band: section spacing on top, like the contact footer.
   (Below 1440px the pages raise the bottom padding to make room for the image.) */
.up{padding:var(--sec) 0 var(--sp-8)}