@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&family=Poppins:wght@500&family=Roboto:wght@400;700&display=swap');
:root{--paper:#fbfaf8;--ink:#222;--lime:#e5f192;color-scheme:light;font-family:Inter,Arial,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}a[href]:focus-visible{outline:3px solid #506417;outline-offset:5px}a[href]:hover{text-decoration:underline}img{display:block;max-width:100%}.page{width:min(1194px,calc(100% - 96px));margin:auto;padding-bottom:150px}header{padding-top:40px}nav{display:flex;align-items:center;gap:20px;min-height:32px;font-size:.875rem;text-transform:uppercase}nav .brand{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#111;color:white;font-size:.7rem;text-transform:none}.cv{margin-left:44px}.hero{display:flex;align-items:center;justify-content:space-between;max-width:1057px;gap:40px;margin:99px 0 109px;min-height:304px}.intro{flex:1}h1{font-family:Poppins,Arial,sans-serif;font-size:3.1575rem;font-weight:500;letter-spacing:-.04em;line-height:1.15;margin:0 0 8px}.tagline{font-size:1.333rem;font-weight:300;text-transform:uppercase;line-height:1.25;margin:0;max-width:510px}.actions{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:36px}.button{display:inline-flex;justify-content:center;align-items:center;padding:8px 23px;min-height:38px;border:1px solid var(--ink);border-radius:999px;font-size:.875rem;line-height:1.3;white-space:nowrap}.button.primary{background:var(--lime);border-color:var(--lime);min-width:139px}a[aria-disabled=true]{cursor:default}.character{width:281px;height:auto;flex-shrink:0}.work-section{margin-bottom:100px}h2{font-size:1rem;font-weight:400;text-transform:uppercase;line-height:1.3;padding-bottom:16px;border-bottom:1px solid #444;margin:0 0 55px;max-width:794px}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}.project{min-width:0;overflow:hidden;display:flex;flex-direction:column;color:white}.project-art{width:100%;height:auto;aspect-ratio:376/310;object-fit:cover}.project-copy{padding:14px 23px 22px;flex:1;font-family:Roboto,Arial,sans-serif;font-size:1rem;line-height:1.25;min-height:126px}.project h3{font-size:inherit;font-weight:400;line-height:inherit;margin:0}.project p{margin:0}.budget-direct{background:#f00}.swyftx{background:#006bfa}.compare-the-market,.yellow-castle{background:#091492}.hiring-buddy{background:#fff;color:#111;box-shadow:inset 0 0 0 1px #eee}.drohne{background:#0c1220}.ballkick{background:#5f6d38}.fun-art{background:#f19294;color:#302023}.about{margin-top:230px;background:var(--lime);padding:28px 44px;display:flex;align-items:center;gap:32px;min-height:161px}.portrait{width:100px;height:100px;object-fit:cover;flex-shrink:0}.about p{font-size:1rem;line-height:1.4;margin:0}.about .actions{margin-top:14px}.about .button{min-height:36px;padding:7px 26px}.social{display:grid;place-items:center;background:#111;color:white;border-radius:50%;height:30px;width:30px;font-family:Arial,sans-serif;font-weight:bold}.skip-link{position:fixed;left:20px;top:-100px;padding:12px;background:var(--lime);z-index:10}.skip-link:focus{top:12px}@media(min-width:1400px){.hero{margin-top:99px}.button{min-height:38px}}@media(max-width:1000px){.page{width:calc(100% - 64px);padding-bottom:80px}.hero{margin:80px 0;gap:32px}.character{width:220px}h1{font-size:2.8rem}.tagline{font-size:1.125rem}.desktop-break{display:none}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.work-section{margin-bottom:72px}.about{margin-top:100px;padding:28px;align-items:flex-start}.about p br{display:none}.about p br:after{content:' '}}@media(max-width:600px){.page{width:calc(100% - 40px);padding-bottom:40px}header{padding-top:22px}nav{min-height:44px}.cv{margin-left:26px}.hero{margin:48px 0 65px;flex-direction:column;align-items:flex-start;gap:38px}.intro{width:100%}h1{font-size:2.65rem}.tagline{font-size:1.08rem;max-width:330px;line-height:1.4}.actions{gap:12px;margin-top:28px}.button{min-height:44px;padding:10px 18px;font-size:.875rem}.character{width:190px;align-self:center}.project-grid{grid-template-columns:1fr;gap:24px}.work-section{margin-bottom:56px}h2{font-size:.875rem;margin-bottom:28px;padding-bottom:14px}.project-copy{padding:16px 22px 24px;min-height:116px;font-size:1rem;line-height:1.4}.about{margin-top:72px;flex-direction:column;gap:20px;padding:26px}.about p{line-height:1.6}.about .actions{margin-top:20px}.about .button,.social{min-height:44px}.social{width:44px}.portrait{width:80px;height:80px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Match the original artwork backgrounds. */
.budget-direct{background:rgb(255,1,0)}
.swyftx{background:rgb(0,114,238)}
.compare-the-market{background:rgb(1,30,157)}
.yellow-castle{background:rgb(0,23,149)}
.hiring-buddy{background:rgb(253,253,253)}
.drohne{background:rgb(13,21,32)}
.ballkick{background:rgb(94,119,49)}
.fun-art{background:rgb(240,146,148)}
/* Card art, branding and text remain separate from the foreground fade. */
.project{position:relative;isolation:isolate;background:var(--card-color);transition:transform 260ms cubic-bezier(.2,.7,.25,1)}
.budget-direct{--card-color:#ff0000}.swyftx{--card-color:#0072ee}.compare-the-market{--card-color:#001f9d}.yellow-castle{--card-color:#001695}.hiring-buddy{--card-color:#fcfcfc}.drohne{--card-color:#0e1521}.ballkick{--card-color:#5f6d38}.fun-art{--card-color:#6456FF;color:#fff}
.project-media{position:relative;aspect-ratio:376/310;flex-shrink:0}
.project-subject,.project-logo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.project-subject{z-index:1;transition:transform 260ms cubic-bezier(.2,.7,.25,1)}
.project-logo{z-index:2;pointer-events:none}
.project-copy{position:relative;z-index:3;background:var(--card-color)}
.project-copy::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:85px;background:linear-gradient(to bottom,transparent,var(--card-color) 85%);z-index:4;pointer-events:none}
@media(hover:hover) and (pointer:fine){.project:hover{transform:translateY(-15px)}.project:hover .project-subject{transform:translateY(-10px)}}
@media(prefers-reduced-motion:reduce){.project,.project-subject{transition:none}.project:hover,.project:hover .project-subject{transform:none}}

.drohne .project-subject{mix-blend-mode:lighten}
/* Revised HiringBuddy composition from the reference beside the artboard. */
.hiring-buddy{--hiring-colors:linear-gradient(110deg,#f5da79 0%,#f1d3bd 50%,#e2a4d2 100%);background:linear-gradient(to bottom,#ffffff 0%,#ffffffed 15%,#ffffff00 90%),var(--hiring-colors);box-shadow:inset 0 0 0 1px #00000012}
.hiring-buddy .project-media{aspect-ratio:376/326}
.hiring-composition{overflow:visible}
.hiring-buddy .hiring-wordmark{inset:10% auto auto 8.8%;width:41%;height:auto;object-fit:contain}
.hiring-website{position:absolute;left:18.6%;top:27%;width:86.7%;max-width:none;height:auto;box-shadow:0 5px 16px #56497813}
.hiring-portrait{position:absolute;width:15%;height:auto;border-radius:50%;object-fit:cover}
.hiring-portrait.woman{right:1.6%;top:9%}.hiring-portrait.pink{left:3%;top:46%}.hiring-portrait.man{left:3%;top:80%;width:18%}
.hiring-buddy .project-copy{background:var(--hiring-colors);padding:10px 18px 22px}
.hiring-buddy .project-copy::before{height:48px;background:var(--hiring-colors);mask-image:linear-gradient(to bottom,transparent,#000 90%);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 90%)}

.character{position:relative;aspect-ratio:842/926;transform:scaleX(-1)}.character-fallback{width:100%;height:100%;object-fit:contain}.character-animation{position:absolute;inset:0}.character-animation svg{display:block;width:100%;height:100%}.character.is-loaded .character-fallback{visibility:hidden}

/* Keep the original card layout with the requested typography. */
.project-copy{font-family:Inter,Arial,sans-serif;font-size:.875rem}

.project-link:hover{text-decoration:none}.project-link:focus-visible{outline:3px solid #506417;outline-offset:6px}

/* Keep button dimensions stable while revealing the directional cue. */
.button.primary{position:relative;overflow:hidden}
.button.primary .button-label{display:inline-block;transition:transform 220ms ease}
.button.primary::after{content:"";position:absolute;right:15px;top:50%;width:6px;height:6px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;opacity:0;transform:translate(-5px,-50%) rotate(45deg);transition:opacity 220ms ease,transform 220ms ease}
.button.primary:focus-visible .button-label{transform:translateX(-7px)}
.button.primary:focus-visible::after{opacity:1;transform:translate(0,-50%) rotate(45deg)}
@media(hover:hover) and (pointer:fine){.button.primary:hover{text-decoration:none}.button.primary:hover .button-label{transform:translateX(-7px)}.button.primary:hover::after{opacity:1;transform:translate(0,-50%) rotate(45deg)}}
@media(prefers-reduced-motion:reduce){.button.primary .button-label,.button.primary::after{transition:none}}

.fun-art .project-subject{inset:7.5%;width:85%;height:85%}

.yellow-castle .yellow-castle-figure{inset:23% 0 auto auto;width:39.63%;height:auto}

button[data-link="email"]{font-family:inherit;background:transparent;color:inherit;cursor:pointer}button[data-link="email"].primary{background:var(--lime)}