/* Keyboard hero: reusable keycap colours, dimensions and motion. */
:root{--key-size:104px;--key-height:106px;--key-gap:16px;--key-outline:#672b20;--key-orange:#f3d64c;--key-yellow:#f7e28b;--key-cream:#fde3cf;--key-forest:#2e573a;--key-green:#82ba48;--key-pink:#e4a5ca;--key-brown:#66271b;--dot:#e3e6ed}
.keyboard-hero{background-image:radial-gradient(var(--dot) .8px,transparent .8px);background-size:18px 18px;padding:30px 0 18px;overflow:clip}.hero-introduction{text-align:center}.hero-availability{justify-content:center;display:inline-flex;border:1px solid #d5d9df;background:#fff;border-radius:30px;padding:6px 13px;margin:0;font-size:10px;color:#505663;letter-spacing:.1px}.hero-availability .led{background:#4c9457}.hero-introduction h1{font-family:var(--serif);font-size:45px;font-weight:500;letter-spacing:-2px;line-height:1.25;display:flex;justify-content:center;align-items:center;gap:16px;margin:25px 0 20px}.hero-introduction .hello-spark{font-size:30px;color:#d6b933;margin-left:1px;align-self:flex-start;transform:translateY(-8px) rotate(10deg)}.keyboard-description{font-size:17px;line-height:1.7;max-width:490px;margin:auto;color:#595e68;padding:0 12px;letter-spacing:-.2px}.keyboard-scene{display:grid;grid-template-columns:155px minmax(0,640px) 165px;align-items:center;justify-content:center;gap:40px;margin-top:29px;max-width:1220px;padding:10px 0 0}.keyboard-center{min-width:0}.portfolio-keyboard{display:flex;flex-direction:column;align-items:center;gap:20px;padding:12px 12px 0}.key-row{display:flex;justify-content:center;gap:var(--key-gap);padding:0 4px}.keycap{--face:var(--key-orange);--base:#bc9f2b;--text:var(--key-outline);display:block;position:relative;width:var(--key-size);height:var(--key-height);background:var(--base);border:1px solid var(--key-outline);border-radius:21px;color:var(--text);box-shadow:0 4px 0 var(--base),0 5px 0 var(--key-outline),0 10px 12px #28314513;transform:rotate(var(--tilt,0deg)) translateY(var(--offset,0px));flex-shrink:0;isolation:isolate}.key-face{position:absolute;inset:-2px -1px 0;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:7px;background:var(--face);border:1px solid var(--key-outline);border-radius:20px;transform:translateY(-7px);box-shadow:inset 0 2px 0 #ffffff55,inset 0 -3px 3px #0000000b;transition:transform .16s ease,box-shadow .16s ease;will-change:transform}.key-face:before{content:'';position:absolute;inset:6px 7px 8px;border:1px solid #ffffff35;border-bottom-color:#0000000e;border-radius:14px;pointer-events:none}.keycap:hover .key-face,.keycap:focus-visible .key-face,.keycap:focus-within .key-face,.keycap.idle-press .key-face{transform:translateY(-1px);box-shadow:inset 0 1px 0 #ffffff30}.keycap:active .key-face{transform:translateY(2px)}.key-letter{font-family:var(--sans);font-size:44px;line-height:1;font-weight:700;letter-spacing:-2px;position:relative}.key-caption{font-size:10px;font-weight:600;line-height:1.25;text-align:center;max-width:85px;min-height:22px;display:flex;align-items:center;justify-content:center;padding:0 2px;position:relative}.key-yellow{--face:var(--key-yellow);--base:#cfb54d}.key-cream{--face:var(--key-cream);--base:#d4b297}.key-forest{--face:var(--key-forest);--base:#183621;--text:#fff3e7}.key-green{--face:var(--key-green);--base:#5a812f;--text:#203f21}.key-pink{--face:var(--key-pink);--base:#b878a0}.key-brown{--face:var(--key-brown);--base:#401811;--text:#fff3e7}.first-row .keycap:nth-child(1){--tilt:-11deg;--offset:8px}.first-row .keycap:nth-child(2){--tilt:-4deg;--offset:-3px}.first-row .keycap:nth-child(3){--tilt:4deg;--offset:-3px}.first-row .keycap:nth-child(4){--tilt:11deg;--offset:8px}.second-row .keycap:nth-child(1){--tilt:-12deg;--offset:-2px}.second-row .keycap:nth-child(2){--tilt:-6deg;--offset:7px}.second-row .keycap:nth-child(3){--tilt:0deg;--offset:11px}.second-row .keycap:nth-child(4){--tilt:6deg;--offset:7px}.second-row .keycap:nth-child(5){--tilt:12deg;--offset:-2px}.contact-key{--face:#252525;--base:#101010;--text:#fff;--key-outline:#101010;width:310px;height:63px;border-radius:17px;margin-top:14px}.contact-key .key-face{flex-direction:row;justify-content:space-between;padding:0 27px;border-radius:17px;font-size:11px;font-weight:600;letter-spacing:1.6px}.contact-key .key-face:before{border-radius:11px}.return-symbol{font-size:34px;line-height:1;font-weight:400}.keyboard-hint{text-align:center;font-size:9px;margin-top:20px;color:#797e88}.keyboard-hint span{font-weight:600;color:#484d57}.name-key{--face:var(--key-pink);--base:#bb7ca5;--tilt:-5deg;--key-outline:#733149;width:155px;height:64px;border-radius:15px;display:inline-block;vertical-align:middle;box-shadow:0 3px 0 var(--base),0 4px 0 #733149,0 7px 9px #46203112}.name-key .key-face{border-radius:14px;padding:0 12px;transform:translateY(-5px)}.name-key .key-face:before{inset:5px;border-radius:9px}.name-key input{position:relative;width:100%;font-family:var(--serif);font-size:32px;font-weight:500;letter-spacing:-1.2px;border:0;background:transparent;color:#66271b;text-align:center;min-width:0;height:100%;padding:0;outline:0}.name-key:focus-within{outline:3px solid #643ecc;outline-offset:6px}.name-key input:focus-visible{outline:0}.name-key.long-name{width:clamp(180px,30vw,340px)}.name-key.long-name input{font-size:22px;letter-spacing:-.7px}.name-key.extra-long-name input{font-size:16px;letter-spacing:-.6px}#name-preview-note{text-align:center;font-size:8px;color:#7a7f88;margin-top:11px}.brick-stack{align-self:center;padding:20px 0 8px;position:relative}.brick-stack h2{font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:1.9px;text-align:center;margin:0 0 24px;line-height:1.3}.bricks{display:flex;flex-direction:column;align-items:center;gap:9px;padding:10px 0}.brick{--brick-face:#c8dcf4;--brick-base:#a6bad2;--brick-ink:#263c54;position:relative;min-height:43px;min-width:137px;background:var(--brick-face);border:1px solid #7f91a7;border-radius:5px;box-shadow:0 4px 0 var(--brick-base),0 5px 0 #7f91a7;color:var(--brick-ink);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;line-height:1.25;padding:8px 10px;animation:brick-settle 9s ease-in-out infinite;animation-delay:calc(var(--brick-index,0)*.3s);z-index:calc(10 - var(--brick-index,0))}.brick:before,.brick:after{content:'';position:absolute;top:-9px;width:27px;height:9px;border:1px solid #7f91a7;border-bottom:0;border-radius:4px 4px 0 0;background:var(--brick-face);box-shadow:inset 0 2px 0 #ffffff50}.brick:before{left:24px}.brick:after{right:24px}.brick:nth-child(2){--brick-face:#dbcef2;--brick-base:#b2a3ce}.brick:nth-child(3){--brick-face:#344964;--brick-base:#243449;--brick-ink:#fff}.skills-stack .brick:first-child{--brick-face:#bfded8;--brick-base:#94bab3}.skills-stack .brick:nth-child(2){--brick-face:#e6eaf2;--brick-base:#bfc8d8}.skills-stack .brick:nth-child(3){--brick-face:#dbcef2;--brick-base:#b2a3ce;--brick-ink:#263c54}.skills-stack .brick:nth-child(4){--brick-face:#c8dcf4;--brick-base:#a6bad2}.stack-annotation{display:block;font-size:9px;text-align:center;color:#6f7886;margin-top:19px;transform:rotate(-4deg)}.skills-stack .stack-annotation{transform:rotate(4deg)}.toolkit-stack{transform:rotate(-5deg)}.skills-stack{transform:rotate(5deg)}.brick-stack:hover .brick{animation-duration:5s}.ticker{background:#f8f6e8;color:#303332;border:0;transform:none;margin:0;padding:19px 0;position:relative;clip-path:polygon(0 5%,2% 0,5% 6%,8% 2%,12% 5%,16% 1%,20% 4%,25% 0,30% 5%,35% 2%,40% 6%,45% 1%,50% 4%,55% 0,60% 5%,65% 2%,70% 6%,75% 1%,80% 5%,85% 0,90% 4%,95% 1%,100% 5%,100% 96%,96% 100%,91% 95%,86% 99%,82% 95%,77% 100%,72% 96%,67% 100%,62% 95%,57% 99%,52% 95%,47% 100%,42% 96%,37% 100%,32% 95%,27% 99%,22% 95%,17% 100%,12% 96%,7% 100%,3% 95%,0 99%)}.ticker-group{font-size:10px;font-weight:500;letter-spacing:1px}.ticker-group b{font-size:19px}@keyframes brick-settle{0%,15%,50%,100%{transform:translateY(0)}25%,35%{transform:translateY(calc(-2px - var(--brick-index,0)*1px))}}
@media(min-width:1450px){.keyboard-scene{gap:55px;margin-top:35px}.keyboard-hero{padding-top:36px;padding-bottom:22px}.hero-introduction h1{font-size:49px}.keyboard-description{font-size:19px;max-width:550px}}
@media(max-width:1100px){:root{--key-size:91px;--key-height:98px;--key-gap:13px}.keyboard-scene{grid-template-columns:125px minmax(0,550px) 137px;gap:26px;width:calc(100% - 64px)}.brick{min-width:118px;min-height:40px;font-size:10px}.brick:before{left:20px}.brick:after{right:20px}.key-letter{font-size:40px}.key-caption{font-size:9px}.keycap{border-radius:18px}.key-face{border-radius:17px}.contact-key{width:280px;height:58px}.keyboard-description{font-size:17px}.hero-introduction h1{font-size:43px}}
@media(max-width:900px){.keyboard-scene{grid-template-columns:1fr 1fr;max-width:600px;gap:25px 45px;margin-top:22px}.keyboard-center{grid-column:1/-1;grid-row:1}.brick-stack{grid-row:2;padding:8px 0;transform:none}.brick-stack h2{margin-bottom:14px;font-size:8px}.bricks{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:17px 7px}.brick{min-width:0;width:auto;flex:1 0 42%;font-size:9px;min-height:37px;padding:8px}.brick:before,.brick:after{width:20px;height:7px;top:-7px}.brick:before{left:15px}.brick:after{right:15px}.stack-annotation{display:none}.keyboard-hint{margin-top:18px}.hero-introduction h1{font-size:39px;margin-top:23px}.keyboard-hero{padding-top:26px}.keyboard-scene{width:calc(100% - 48px)}.contact-key{width:295px}.hero-introduction h1:has(.long-name){flex-wrap:wrap;max-width:600px;margin-inline:auto;padding:0 15px}}
@media(max-width:600px){:root{--key-size:90px;--key-height:94px;--key-gap:16px}.hero-introduction h1{font-size:31px;gap:12px;letter-spacing:-1.3px;margin:24px 0 18px}.name-key{height:53px;width:127px;border-radius:13px}.name-key .key-face{border-radius:12px}.name-key input{font-size:27px}.hero-availability{font-size:9px}.keyboard-description{font-size:15px;max-width:345px;line-height:1.6}.keyboard-scene{margin-top:25px;width:calc(100% - 30px);gap:20px 22px;max-width:430px}.portfolio-keyboard{padding:7px 3px 0;display:grid;grid-template-columns:repeat(3,var(--key-size));gap:var(--key-gap);justify-content:center}.key-row{display:contents}.portfolio-keyboard .keycap{--tilt:0deg;--offset:0px}.portfolio-keyboard .keycap:nth-child(1){--tilt:-4deg}.portfolio-keyboard .keycap:nth-child(3){--tilt:4deg}.keycap{border-radius:18px}.key-face{border-radius:17px;gap:5px}.key-letter{font-size:36px}.key-caption{font-size:9px;max-width:78px;line-height:1.3}.contact-key{grid-column:1/-1;width:100%;height:56px;margin-top:18px}.contact-key .key-face{padding:0 24px;font-size:10px}.keyboard-hint{font-size:8px;margin-top:17px}.brick-stack h2{font-size:8px;letter-spacing:1.3px}.brick{flex-basis:100%;font-size:10px;min-height:36px;max-width:143px}.bricks{gap:12px}.brick:before{left:24px}.brick:after{right:24px}#name-preview-note{font-size:8px;max-width:280px;line-height:1.6;margin:9px auto 0}.keyboard-hero{padding-bottom:18px}.ticker{padding:17px 0}.ticker-group{font-size:9px;letter-spacing:.6px}.name-key.long-name{width:240px}.name-key.long-name input{font-size:21px}.name-key.extra-long-name input{font-size:15px}.hero-introduction h1:has(.long-name){row-gap:20px;max-width:350px;font-size:26px}.hero-introduction h1:has(.long-name) .name-key{flex-basis:260px}}
@media(max-width:360px){:root{--key-size:80px;--key-height:89px;--key-gap:15px}.hero-introduction h1{font-size:28px;gap:9px}.name-key{width:115px}.name-key input{font-size:25px}.keyboard-description{font-size:14px;max-width:285px}.key-letter{font-size:32px}.key-caption{font-size:8px;max-width:68px}.key-face:before{inset:5px}.brick{font-size:9px}}
@media(prefers-reduced-motion:reduce){.brick{animation:none}.key-face{transition:none}.keycap.idle-press .key-face{transform:translateY(-7px)}.name-key.idle-press .key-face{transform:translateY(-5px)}.ticker{clip-path:none}}
/* Keep the tactile hero, with a quieter palette and a clear consulting label. */
:root{--key-outline:#364253;--key-cream:#eef1f5;--key-forest:#34485b;--key-green:#bcd2ca;--key-brown:#37475e}
.hero-discipline{font-size:10px;font-weight:600;letter-spacing:2.1px;color:#454f5f;margin-bottom:15px}.keyboard-hero{padding-top:30px}.keyboard-scene{grid-template-columns:minmax(0,650px) 165px;max-width:900px;gap:55px;margin-top:30px}.key-cream{--base:#c2cad5}.key-forest{--base:#1d2b3a;--text:#fff}.key-green{--base:#92aaa1;--text:#304e45}.key-brown{--base:#233042;--text:#fff}.name-key{--key-outline:#855675}.name-key input{color:#593f53}.first-row .keycap:nth-child(1){--tilt:-10deg;--offset:9px}.first-row .keycap:nth-child(2){--tilt:-5deg;--offset:0px}.first-row .keycap:nth-child(3){--tilt:0deg;--offset:-4px}.first-row .keycap:nth-child(4){--tilt:5deg;--offset:0px}.first-row .keycap:nth-child(5){--tilt:10deg;--offset:9px}.ticker{background:#fafbfC;border-block:1px solid #e8ebef;clip-path:none}.hero-introduction h1{margin-top:22px}
@media(max-width:1100px){.keyboard-scene{grid-template-columns:minmax(0,560px) 140px;gap:40px;max-width:770px}}
@media(max-width:900px){.keyboard-scene{grid-template-columns:1fr;gap:26px;max-width:600px}.keyboard-center{grid-column:1;grid-row:1}.skills-stack{grid-row:2;grid-column:1;padding:8px 0;transform:none}.skills-stack h2{display:none}.skills-stack .bricks{flex-direction:row;flex-wrap:nowrap;gap:10px}.skills-stack .brick{flex:1;max-width:none;font-size:9px;min-height:35px}.skills-stack .brick:before{left:15px}.skills-stack .brick:after{right:15px}}
@media(max-width:600px){:root{--key-size:60px;--key-height:73px;--key-gap:10px}.keyboard-scene{max-width:430px;gap:24px;width:calc(100% - 34px)}.portfolio-keyboard{display:flex;gap:20px;padding:10px 0 0}.key-row{display:flex;gap:var(--key-gap);padding:0}.portfolio-keyboard .keycap{--tilt:0deg;--offset:0px}.portfolio-keyboard .keycap:nth-child(1){--tilt:-5deg}.portfolio-keyboard .keycap:nth-child(5){--tilt:5deg}.keycap{border-radius:14px}.key-face{border-radius:13px;gap:5px}.key-face:before{inset:4px;border-radius:10px}.key-letter{font-size:29px;letter-spacing:-1px}.key-caption{font-size:6px;max-width:52px;min-height:15px;font-weight:500}.contact-key{width:250px;height:52px;margin-top:8px}.contact-key .key-face{font-size:9px}.keyboard-hint{margin-top:18px}.skills-stack .bricks{flex-wrap:wrap;gap:15px 12px;max-width:310px;margin:auto}.skills-stack .brick{flex:1 0 42%;max-width:149px;font-size:9px;min-height:34px}.hero-discipline{font-size:8px;letter-spacing:1.8px;margin-bottom:14px}.hero-introduction h1{margin-top:22px}.name-key .key-face{border-radius:12px}.ticker{padding:14px 0}}
@media(max-width:380px){:root{--key-size:51px;--key-height:67px;--key-gap:9px}.key-letter{font-size:27px}.key-caption{font-size:5.5px;max-width:46px}.business-intro h2{font-size:35px}}