:root{color-scheme:dark;--bg:#0d0e11;--surface:#161820;--text:#f4f3f6;--muted:#a5a6b1;--subtle:#777a86;--line:#292b34;--accent:#b9c7ff;--chip:#1b1d24;--field:#14151a;--shadow:#08080bd9}
body.light{color-scheme:light;--bg:#f5f5f1;--surface:#fff;--text:#171921;--muted:#565c69;--subtle:#69707c;--line:#d7dae0;--accent:#4357bd;--chip:#e9eaf0;--field:#fff;--shadow:#2b2e3945}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 Inter,Arial,sans-serif;transition:background .35s,color .35s}button,input,textarea{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:4px}img{display:block;max-width:100%}h1,h2,h3,p{margin:0}h1,h2,h3{letter-spacing:-.055em;line-height:1.12}#field{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;opacity:.35;z-index:0}.wrap{width:min(1050px,calc(100% - 48px));margin-inline:auto;position:relative;z-index:1}.topbar{position:fixed;left:22px;right:22px;top:16px;z-index:20;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}.topbar>*{pointer-events:auto}.wordmark{border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 92%,transparent);border-radius:40px;padding:10px 17px;font:600 14px DM Mono,monospace;box-shadow:0 8px 35px #0002}.wordmark span,.mark-dot{color:var(--accent)}.top-actions{display:flex;gap:8px}.theme-button,.menu-button{height:44px;border:1px solid var(--line);color:var(--text);background:color-mix(in srgb,var(--bg) 92%,transparent);border-radius:50%;display:grid;place-items:center;box-shadow:0 8px 35px #0002}.theme-button{width:44px;font-size:20px;line-height:1}.menu-button{width:44px;padding:12px}.menu-button span{display:block;width:18px;height:1px;background:var(--text);transition:transform .25s;grid-area:1/1}.menu-button span:first-child{transform:translateY(-4px)}.menu-button span:last-child{transform:translateY(4px)}.menu-button[aria-expanded=true] span:first-child{transform:rotate(45deg)}.menu-button[aria-expanded=true] span:last-child{transform:rotate(-45deg)}.menu{position:absolute;right:0;top:55px;width:250px;padding:12px;background:var(--surface);border:1px solid var(--line);box-shadow:0 20px 45px var(--shadow);border-radius:14px}.menu[hidden]{display:none}.menu a{display:flex;justify-content:space-between;padding:12px 14px;border-radius:8px;font-size:15px}.menu a:hover{background:var(--chip);color:var(--accent)}.menu a span,.section-count{font:12px DM Mono,monospace;color:var(--subtle)}.hero{min-height:930px;display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:80px}.hero-copy{max-width:570px;position:relative;z-index:2}.hello{font:15px DM Mono,monospace;color:var(--accent);margin-bottom:12px}.hero h1{font-size:clamp(4.1rem,8vw,7rem);font-weight:750;margin-bottom:24px}.role{font:500 clamp(17px,1.7vw,20px) DM Mono,monospace;letter-spacing:-.035em;margin-bottom:26px}.role span{color:var(--subtle)}.intro{max-width:540px;color:var(--muted);font-size:18px;line-height:1.65}.hero-links{display:flex;align-items:center;gap:20px;margin-top:32px}.main-button{background:var(--text);color:var(--bg);padding:11px 17px;border-radius:6px;font-size:14px;font-weight:650;white-space:nowrap;transition:transform .2s,box-shadow .2s}.main-button:hover{transform:translateY(-3px);box-shadow:0 10px 30px #8495ff44}.main-button span{padding-left:18px}.link-divider{height:26px;width:1px;background:var(--line);margin-left:2px}.icon-link{width:30px;height:30px;display:grid;place-items:center;color:var(--muted);font-weight:750;font-size:17px}.icon-link:hover{color:var(--accent);transform:translateY(-2px)}.portrait-wrap{position:relative;width:290px;height:360px;flex:none;perspective:700px;transform-style:preserve-3d;transition:transform .22s ease-out}.portrait-frame{position:absolute;inset:0;border-radius:10px;overflow:hidden;border:1px solid #7182b966;box-shadow:0 28px 65px #0008;transform:rotate(-3deg);background:#1e2840}.portrait-frame:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#8ca9ff18,transparent 58%);pointer-events:none}.portrait-frame img{height:100%;width:100%;object-fit:cover;object-position:center;filter:saturate(.85)}.portrait-corner{position:absolute;width:85px;height:85px;right:-14px;bottom:-14px;border-right:1px solid var(--accent);border-bottom:1px solid var(--accent);opacity:.75}.scroll-cue{position:absolute;bottom:90px;left:0;font:11px DM Mono,monospace;letter-spacing:.1em;color:var(--subtle)}.scroll-cue span{margin-left:12px;color:var(--accent)}.section{padding:115px 0;border-top:1px solid var(--line);scroll-margin-top:90px}.section-head{display:flex;justify-content:space-between;align-items:start;gap:28px;margin-bottom:56px}.section-head h2{font-size:clamp(2.5rem,4vw,3.5rem);font-weight:650}.section-head p{max-width:590px;margin-top:13px;color:var(--muted);font-size:16px;line-height:1.6}.section-count{padding-top:14px;white-space:nowrap}.work-list{border-top:1px solid var(--line)}.work-row{position:relative;min-height:109px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid var(--line);transition:background .25s,padding .25s}.work-row:hover,.work-row:focus-within{background:color-mix(in srgb,var(--accent) 5%,transparent);padding-inline:10px}.row-main{display:flex;gap:14px;align-items:center;min-width:0;flex:1}.project-logo{width:28px;height:28px;border:1px solid var(--line);border-radius:7px;flex:none;display:grid;place-items:center;font:700 16px Inter,sans-serif;letter-spacing:-.08em}.logo-resolve{color:#b6baff;background:#20243d}.logo-meridian{color:#c7b7ff;background:#26203d}.logo-repodiet{color:#83d3d2;background:#183032}.logo-agora{color:#ffc3a5;background:#342826}.project-identity{min-width:0}.project-heading{display:flex;align-items:center;gap:18px}.project-heading h3{font-size:17px;font-weight:650;letter-spacing:-.025em;white-space:nowrap}.project-identity p{font-size:14px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row-actions{display:flex;gap:7px;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s}.work-row:hover .row-actions,.work-row:focus-within .row-actions{opacity:1;transform:none}.row-actions a{font:12px DM Mono,monospace;background:var(--chip);border:1px solid var(--line);border-radius:5px;padding:4px 7px;white-space:nowrap}.row-actions a:hover{color:var(--accent);border-color:var(--accent)}.row-right{display:flex;gap:6px;justify-content:flex-end;min-width:320px;flex-wrap:wrap}.row-right span{font:11px DM Mono,monospace;color:var(--muted);background:var(--chip);border:1px solid var(--line);border-radius:5px;padding:5px 8px;white-space:nowrap}.hover-preview{position:fixed;left:0;top:0;z-index:10;width:320px;background:var(--surface);border:1px solid #65729a77;box-shadow:0 25px 70px var(--shadow);border-radius:10px;padding:8px;pointer-events:none;opacity:0;transform:translate3d(var(--preview-x,0px),var(--preview-y,0px),0) scale(.94);transition:opacity .2s,transform .2s;will-change:transform,opacity}.hover-preview.visible{opacity:1;transform:translate3d(var(--preview-x,0px),var(--preview-y,0px),0) scale(1)}.hover-preview img{width:100%;height:175px;object-fit:cover;object-position:top;border-radius:5px;background:#161b28}.hover-preview>div{display:flex;justify-content:space-between;align-items:center;padding:11px 5px 5px}.hover-preview strong{font-size:14px}.hover-preview span{color:var(--subtle);font:10px DM Mono,monospace}.preview-toggle,.mobile-preview{display:none}.about-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:11%}.about-prose p{color:var(--muted);font-size:17px;line-height:1.8;margin-bottom:20px}.about-prose .about-close{color:var(--text);font-weight:550}.how h3{font-size:19px;margin-bottom:18px;letter-spacing:-.02em}.how ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}.how li{display:flex;gap:20px;padding:19px 0;border-bottom:1px solid var(--line)}.how li>span{font:12px DM Mono,monospace;color:var(--accent);padding-top:3px}.how strong{font-size:15px}.how p{color:var(--muted);font-size:14px;line-height:1.6;margin-top:5px}.expertise-list{border-top:1px solid var(--line)}.expertise-list>div{display:grid;grid-template-columns:180px 1fr;gap:20px;align-items:center;padding:21px 0;border-bottom:1px solid var(--line)}.expertise-list h3{font-size:17px;letter-spacing:-.025em}.expertise-list p{color:var(--muted);font-size:15px}.contact-intro{color:var(--muted);font-size:17px;margin:-28px 0 30px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.contact-card{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:20px 22px;min-height:100px;position:relative;display:flex;flex-direction:column;justify-content:space-between;transition:border-color .2s,transform .2s}.contact-card:hover{border-color:var(--accent);transform:translateY(-3px)}.contact-card>span{color:var(--subtle);font:12px DM Mono,monospace}.contact-card strong{font-size:16px;font-weight:600;overflow-wrap:anywhere;padding-right:20px}.contact-card b{position:absolute;right:20px;top:18px;color:var(--accent);font-size:20px;font-weight:400}.contact-form{margin-top:50px;border-top:1px solid var(--line);padding-top:30px}.contact-form h3{font-size:19px;letter-spacing:-.02em;margin-bottom:24px}.contact-form label{display:block;color:var(--muted);font-size:14px;font-weight:600}.form-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:17px}.contact-form input,.contact-form textarea{display:block;width:100%;margin-top:8px;border:1px solid var(--line);border-radius:5px;background:var(--field);color:var(--text);padding:12px 14px;outline:none;resize:vertical;min-height:46px}.contact-form input:focus,.contact-form textarea:focus{border-color:var(--accent)}.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--subtle)}.form-end{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:16px}.form-end p{font-size:13px;color:var(--subtle)}.form-end button{border:0;border-radius:5px;background:var(--text);color:var(--bg);font-weight:650;padding:11px 16px;white-space:nowrap}.form-end button:hover{background:var(--accent)}.form-end button span{padding-left:12px}.footer{display:flex;justify-content:space-between;gap:20px;color:var(--subtle);font-size:13px;border-top:1px solid var(--line);padding-block:35px 50px}.footer>div{display:flex;gap:22px}.footer a:hover{color:var(--accent)}
@media(max-width:800px){.hero{min-height:790px}.hero h1{font-size:clamp(3.8rem,9vw,6rem)}.portrait-wrap{width:220px;height:285px;opacity:.85}.row-right{min-width:230px}.row-right span{font-size:10px}.row-actions{opacity:1;transform:none}.about-grid{gap:6%}}
@media(max-width:650px){.wrap{width:min(100% - 36px,1050px)}.topbar{left:18px;right:18px}.hero{min-height:820px;display:block;padding-top:150px}.hero-copy{max-width:100%}.hero h1{font-size:clamp(3.7rem,13vw,5.8rem)}.role{font-size:16px}.intro{font-size:16px}.portrait-wrap{position:absolute;right:12px;bottom:45px;width:150px;height:190px;opacity:.8}.portrait-frame{transform:rotate(4deg)}.scroll-cue{bottom:35px}.section{padding:86px 0}.section-head{margin-bottom:34px}.section-head p{font-size:15px}.work-row{display:block;padding:18px 0;min-height:unset}.work-row:hover,.work-row:focus-within{padding-inline:0}.project-heading{display:block}.row-actions{margin-top:9px}.row-right{min-width:0;margin:13px 0 0 42px;justify-content:flex-start}.project-identity p{white-space:normal;line-height:1.5}.preview-toggle{display:inline-block;border:0;background:none;color:var(--accent);font:12px DM Mono,monospace;margin:14px 0 0 42px;padding:0}.mobile-preview{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s;overflow:hidden}.mobile-preview img{min-height:0;opacity:0;width:100%;object-fit:cover;transition:opacity .2s;margin-top:0;border-radius:7px}.work-row.expanded .mobile-preview{grid-template-rows:1fr}.work-row.expanded .mobile-preview img{opacity:1;margin-top:15px}.about-grid{display:block}.how{margin-top:40px}.expertise-list>div{grid-template-columns:1fr;gap:5px}.contact-grid{grid-template-columns:1fr}.footer{flex-direction:column}.footer>div{flex-wrap:wrap}.hover-preview{display:none}}
@media(max-width:420px){.hero{padding-top:135px}.hero h1{font-size:3.45rem}.hero-links{gap:12px}.portrait-wrap{width:130px;height:165px;bottom:35px}.scroll-cue{display:none}.form-two{grid-template-columns:1fr}.form-end{display:block}.form-end button{margin-top:15px;width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Portfolio refinements */
#field{opacity:.13}.scroll-cue{display:none}.hero-copy{max-width:610px}.intro{max-width:590px}.hero-links{gap:23px}.hero-secondary{font-size:14px;font-weight:600;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:4px}.hero-secondary:hover{color:var(--accent);border-color:var(--accent)}.project-logo{width:38px;height:38px;display:block;object-fit:cover;object-position:center;border:1px solid var(--line);border-radius:8px;background:#101218}.logo-repodiet{background:#fff}.row-right{min-width:65px;color:var(--subtle);font:11px DM Mono,monospace;letter-spacing:.06em}.work-row:hover .row-right{color:var(--accent)}.project-identity p{font-size:14px}.how{border-top:1px solid var(--line);padding-top:22px}.how h3{margin-bottom:18px}.how p{font-size:16px;line-height:1.75;color:var(--muted);margin:0 0 17px}.preview-shot{height:175px;overflow:hidden;border-radius:5px;background:#141924}.hover-preview .preview-shot img{width:100%;height:100%;object-fit:cover;object-position:top;transform:scale(1.2);transform-origin:center bottom;border-radius:0}.mobile-shot{min-height:0;aspect-ratio:16/9;overflow:hidden;border-radius:7px;background:#141924}.mobile-preview .mobile-shot img{width:100%;height:100%;object-fit:cover;object-position:top;transform:scale(1.2);transform-origin:center bottom;border-radius:0;margin:0}.work-row.expanded .mobile-preview .mobile-shot{margin-top:15px}.work-row.expanded .mobile-preview img{margin-top:0}.section-head .section-count{color:var(--subtle)}
@media(max-width:650px){.hero{min-height:850px}.hero-links{gap:15px;flex-wrap:wrap}.row-right{min-width:0;margin:12px 0 0 52px;justify-content:flex-start}.preview-toggle{margin-left:52px}.mobile-preview{display:grid;grid-template-rows:0fr}.work-row.expanded .mobile-preview{grid-template-rows:1fr}.section-head .section-count{display:none}}
@media(max-width:420px){.hero-secondary{font-size:13px}.hero{min-height:900px}.portrait-wrap{bottom:20px}}
/* Case-study list, responsive previews and client contact */
.row-right{min-width:330px;width:auto;display:flex;justify-content:flex-end;gap:7px;color:var(--muted);font:inherit;letter-spacing:0}.row-right span{font:11px DM Mono,monospace;color:var(--muted);border:1px solid var(--line);background:var(--chip);padding:5px 8px;border-radius:5px;white-space:nowrap}.work-row:hover .row-right span{border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}.hover-preview .preview-shot img,.mobile-preview .mobile-shot img{transform:scale(1.29);transform-origin:center center}.preview-shot,.mobile-shot{isolation:isolate}.how strong{color:var(--text)}.stack{display:flex;align-items:baseline;gap:30px;border-top:1px solid var(--line);padding-top:28px;margin-top:36px}.stack h3{font-size:17px;letter-spacing:-.025em;min-width:150px}.stack p{color:var(--muted);line-height:1.9;font-size:14px}.contact-card{min-height:106px}.contact-icon{display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--line);border-radius:5px;color:var(--accent)}.contact-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.contact-card strong{font-weight:600}.contact-card b{top:20px}.form-status{min-height:1.5em;margin-top:16px;font-size:14px}.form-status.success{color:#9ad7b8}.form-status.error{color:#f5afab}.form-end button:disabled{opacity:.55;cursor:wait}.honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}.portrait-wrap{will-change:transform}.portrait-frame{box-shadow:0 28px 75px #000a}
@media(max-width:800px){.row-right{min-width:220px;flex-wrap:wrap}}
@media(max-width:650px){.row-right{min-width:0;margin-left:52px;justify-content:flex-start}.stack{display:block}.stack p{margin-top:10px}.hero{min-height:880px}.intro{max-width:560px}}
/* Owner inquiry inbox */
.inbox{width:min(850px,calc(100% - 40px));margin:0 auto;padding:110px 0 100px}.inbox-head{display:flex;justify-content:space-between;color:var(--muted);font:12px DM Mono,monospace}.inbox-head a:hover{color:var(--accent)}.inbox h1{font-size:clamp(2.7rem,5vw,4.5rem);margin:60px 0 12px}.inbox-summary,.inbox-empty{color:var(--muted)}.inbox-list{margin-top:55px;border-top:1px solid var(--line)}.inbox-item{padding:25px 0;border-bottom:1px solid var(--line)}.inbox-item>div{display:flex;align-items:baseline;justify-content:space-between;gap:20px}.inbox-item h2{font-size:20px}.inbox-item time{color:var(--subtle);font:12px DM Mono,monospace}.inbox-item>a{display:inline-block;color:var(--accent);margin:8px 0 15px}.inbox-item p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7}

/* Midnight cobalt identity */
:root{--bg:#080c12;--surface:#111924;--text:#f1f4f9;--muted:#a2aebb;--subtle:#6f8194;--line:#243242;--accent:#89dce9;--chip:#15212d;--field:#101821;--shadow:#02060bcf}
body.light{--bg:#f1f5f8;--surface:#fff;--text:#102233;--muted:#526779;--subtle:#6a7d8d;--line:#c8d6e0;--accent:#00788b;--chip:#e6f0f3;--field:#fff;--shadow:#254c6940}
body{background:radial-gradient(circle at 73% 16%,#122847 0%,transparent 27%),radial-gradient(circle at 8% 32%,#0c1e28 0%,transparent 23%),var(--bg)}
body.light{background:radial-gradient(circle at 75% 18%,#dcecf4 0%,transparent 28%),var(--bg)}
#field{opacity:.09}.wordmark{letter-spacing:-.045em}.hello{border:1px solid #34748a80;border-radius:100px;background:#0e293765;width:max-content;padding:7px 12px;color:#a8e5e7;font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:28px}.signal-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#74e9dc;box-shadow:0 0 11px #62ded4;margin-right:7px;vertical-align:2px}
.greeting{color:var(--subtle);font:15px DM Mono,monospace;margin-bottom:8px}.hero{min-height:890px;gap:25px}.hero-copy{max-width:630px}.hero h1{font-size:clamp(4rem,7.1vw,6.7rem);line-height:1.06;margin-bottom:25px}.hero .role{font-size:clamp(16px,1.55vw,20px);color:#dce5ee}.hero .role span{color:var(--accent);padding:0 4px}.hero .intro{font-size:17px;max-width:580px;line-height:1.75}.hero-links{gap:14px;margin-top:35px}.main-button{display:inline-flex;align-items:center;gap:9px;background:#e4f2f5;color:#071521;border-radius:7px;padding:12px 17px}.main-button span{padding-left:9px}.main-button svg,.hero-social svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.main-button:hover{box-shadow:0 10px 30px #51bcca46}.hero-social{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:7px;color:var(--muted);transition:color .2s,background .2s,transform .2s}.hero-social:hover{background:var(--chip);color:var(--accent);transform:translateY(-2px)}
.portrait-wrap{position:relative;width:334px;height:650px;flex:none;perspective:1100px;transform:none!important;transition:none;cursor:grab;user-select:none;touch-action:pan-y}.portrait-wrap:active{cursor:grabbing}.portrait-wrap:before{content:"";position:absolute;width:440px;height:510px;left:50%;top:170px;transform:translateX(-50%);background:radial-gradient(ellipse,#28649c45,transparent 68%);filter:blur(26px);pointer-events:none}.badge-assembly{position:absolute;inset:0;transform-origin:50% 9%;will-change:transform}.lanyard{position:absolute;top:-95px;left:calc(50% - 39px);width:78px;height:365px;background:repeating-linear-gradient(90deg,#081016 0 3px,#102332 3px 7px,#09141c 7px 11px);border-left:2px solid #45687a;border-right:2px solid #3b5e70;box-shadow:inset 8px 0 14px #0009,9px 15px 25px #0008;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;transform:perspective(600px) rotateY(-8deg);clip-path:polygon(3% 0,97% 0,100% 100%,0 100%)}.lanyard span{color:#9ddce5;font:800 24px Inter,sans-serif;letter-spacing:-.12em;transform:rotate(90deg);opacity:.75}.badge-connector{position:absolute;left:calc(50% - 15px);top:257px;width:30px;height:36px;border:5px solid #647b87;border-radius:45% 45% 50% 50%;box-shadow:0 3px 7px #000c,inset 0 0 5px #e3faff7a;z-index:2}.badge-connector:after{content:"";position:absolute;width:6px;height:27px;background:linear-gradient(90deg,#879ba5,#263e4b,#a6bcc5);left:7px;top:19px;border-radius:3px}
.portrait-frame{position:absolute;left:0;right:0;top:306px;height:405px;inset:auto 0 auto 0;border:2px solid #71899b;overflow:hidden;border-radius:16px;background:#0b1e35;box-shadow:0 36px 65px #000c,0 4px 13px #000a,inset 0 0 0 2px #d4f8ff4a;transform:none;transform-style:preserve-3d;will-change:transform;isolation:isolate}.portrait-frame:after{content:"";position:absolute;inset:0;border:5px solid #e3efff18;border-radius:13px;background:none;z-index:4;pointer-events:none}.portrait-frame img{width:100%;height:100%;object-fit:cover;object-position:center 26%;filter:saturate(.95) contrast(1.05)}.badge-hole{position:absolute;top:9px;left:calc(50% - 16px);width:32px;height:9px;background:#06131f;border:2px solid #aec5cb85;border-radius:8px;z-index:5;box-shadow:0 2px 7px #000}.badge-shine{position:absolute;z-index:3;inset:0;background:linear-gradient(113deg,transparent 20%,#ffffff0d 31%,transparent 37%,transparent 65%,#caeaff22 76%,transparent 84%);mix-blend-mode:screen;pointer-events:none}.badge-caption{position:absolute;bottom:0;left:0;right:0;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:14px 17px;background:linear-gradient(0deg,#071018eb,#0710188a);backdrop-filter:blur(5px);color:#ddf4f9;font:9px DM Mono,monospace;letter-spacing:.06em}.badge-caption strong{font-weight:500;letter-spacing:.12em}.badge-hint{position:absolute;top:730px;right:0;color:var(--subtle);font:10px DM Mono,monospace;letter-spacing:.07em;white-space:nowrap}.badge-hint span{color:var(--accent);margin-left:4px}
.text-link{display:inline-flex;gap:20px;margin-top:12px;color:var(--accent);font-weight:600;border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,transparent);padding-bottom:5px}.text-link:hover{color:var(--text)}.about-prose p{line-height:1.8}.how{border-top:1px solid var(--line)}.how h3{font-size:20px}.how .method{display:grid;grid-template-columns:30px 1fr;gap:15px;padding:17px 0;border-top:1px solid var(--line)}.how .method span{color:var(--accent);font:11px DM Mono,monospace;padding-top:6px}.how .method p{margin:0;font-size:15px;line-height:1.7}.how .method strong{color:var(--text)}
.expertise-matrix{border-top:1px solid var(--line)}.expertise-group{display:grid;grid-template-columns:245px 1fr;gap:30px;padding:27px 0;border-bottom:1px solid var(--line);align-items:start}.expertise-group h3{font-size:17px;letter-spacing:-.025em;font-weight:600}.expertise-tags{display:flex;flex-wrap:wrap;gap:9px}.expertise-tags span{font:12px DM Mono,monospace;color:#c5d5dc;padding:8px 12px;border:1px solid #365060;background:#10212c;border-radius:5px}.light .expertise-tags span{color:#284959;background:#e7f1f4;border-color:#bfd2da}.expertise-note{display:grid;grid-template-columns:245px 1fr;gap:30px;padding:27px 0;color:var(--muted)}.expertise-note span{font:11px DM Mono,monospace;color:var(--accent);letter-spacing:.1em}.expertise-note p{font-size:14px;line-height:1.7}
@media(max-width:1000px){.hero-copy{max-width:530px}.hero h1{font-size:clamp(3.8rem,7vw,6rem)}.portrait-wrap{width:290px;height:620px}.portrait-frame{height:380px}.badge-hint{top:700px}}
@media(max-width:750px){.hero{display:block;min-height:1120px;padding-top:150px}.hero-copy{max-width:620px}.portrait-wrap{position:absolute;left:50%;top:490px;transform:translateX(-50%)!important;width:290px;height:610px}.portrait-wrap:before{width:350px}.lanyard{top:-20px;height:270px}.badge-connector{top:226px}.portrait-frame{top:272px;height:335px}.badge-hint{top:625px}.hero h1{font-size:clamp(3.4rem,11vw,5rem)}.expertise-group,.expertise-note{grid-template-columns:1fr;gap:15px}}
@media(max-width:520px){.hero{min-height:1090px;padding-top:135px}.hello{font-size:10px}.hero h1{font-size:clamp(3.3rem,13vw,4.3rem)}.hero .intro{font-size:15px}.hero .role{font-size:15px}.hero-links{margin-top:25px}.portrait-wrap{top:495px;width:245px;height:580px}.lanyard{width:62px;left:calc(50% - 31px);height:248px}.lanyard span{font-size:19px}.badge-connector{top:208px}.portrait-frame{top:252px;height:310px}.badge-hint{top:572px;font-size:9px}.expertise-tags span{font-size:11px;padding:7px 9px}}
@media(prefers-reduced-motion:reduce){.badge-assembly,.portrait-frame{transform:none!important}.portrait-wrap{cursor:auto}}
/* Keep the badge below its metal clip. */
.portrait-frame{inset:306px 0 auto 0}
@media(max-width:750px){.portrait-frame{inset:272px 0 auto 0}}
@media(max-width:520px){.portrait-frame{inset:252px 0 auto 0}}
@media(min-width:751px){.hero{min-height:960px}}
@media(max-width:750px){.hero{min-height:1320px}.portrait-wrap{top:650px}}
@media(max-width:520px){.hero{min-height:1270px}.portrait-wrap{top:660px}}

/* Dedicated project previews and clearer links */
.work-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:18px;min-height:132px;padding:19px 0}.work-row:hover,.work-row:focus-within{padding-inline:0;background:transparent}.row-main{gap:14px}.logo-button{flex:none;width:42px;height:42px;padding:0;border:1px solid var(--line);border-radius:9px;background:var(--chip);display:grid;place-items:center;transition:transform .2s,border-color .2s}.logo-button:hover,.logo-button:focus-visible{transform:scale(1.08);border-color:var(--accent)}.logo-button .project-logo{width:38px;height:38px;border:0;border-radius:7px}.project-identity h3{font-size:18px;letter-spacing:-.025em}.project-identity p{white-space:normal;overflow:visible;line-height:1.45}.row-right{width:auto;min-width:0;max-width:290px;justify-content:flex-end}.row-right span{font-size:10px;padding:4px 6px}.row-actions{opacity:1;transform:none;display:flex;align-items:center;gap:6px}.row-actions a,.row-actions button{font:11px DM Mono,monospace;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:6px 8px;white-space:nowrap}.row-actions a:hover,.row-actions button:hover{color:var(--accent);border-color:var(--accent)}.row-actions .project-preview-trigger{color:var(--accent)}
.project-dialog{width:min(1160px,calc(100vw - 36px));max-width:none;max-height:calc(100vh - 36px);padding:20px;border:1px solid #456275;border-radius:14px;background:#0c1722;color:#f0f5f8;box-shadow:0 40px 100px #000d;overflow:auto}.project-dialog::backdrop{background:#030810d9;backdrop-filter:blur(8px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.dialog-kicker{font:10px DM Mono,monospace;letter-spacing:.12em;color:#80d9e4}.dialog-head h3{font-size:25px;letter-spacing:-.04em;margin-top:4px}.dialog-close{border:1px solid #365063;background:#142632;color:#d5eaf0;border-radius:7px;width:36px;height:36px;font-size:27px;line-height:1}.dialog-close:hover{background:#213c4c}.screen-viewport{position:relative;overflow:hidden;border:1px solid #315064;border-radius:8px;background:#0b141f;width:100%}.screen-viewport img{position:absolute;left:0;width:100%;max-width:none;height:auto;transition:opacity .15s}.dialog-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:17px}.dialog-foot p{color:#b0c2cd;font-size:14px}.dialog-foot>div{display:flex;flex-wrap:wrap;gap:12px}.dialog-foot a{font:12px DM Mono,monospace;color:#9de2eb;border-bottom:1px solid #5c8b98;padding-bottom:3px;white-space:nowrap}.dialog-foot a:hover{color:#fff}
.hero-social[href*="linkedin.com"] svg,.linkedin-brand svg{fill:currentColor;stroke:none!important}.hero-social[href*="linkedin.com"] svg{width:22px;height:22px}.badge-caption{justify-content:center}.badge-caption span{display:none}.badge-caption strong{font-size:10px;letter-spacing:.18em}
.contact-icons{display:flex;gap:13px;margin-bottom:38px}.contact-social{width:67px;height:67px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--accent);transition:transform .2s,border-color .2s,background .2s}.contact-social:hover{transform:translateY(-3px);border-color:var(--accent);background:var(--chip)}.contact-social svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.contact-social.linkedin-brand svg{width:28px;height:28px}.form-status.warning{color:#f2c784}
.expertise-group{grid-template-columns:230px 1fr;align-items:center;gap:30px;padding:25px 0}.expertise-group h3{font:500 12px DM Mono,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}.expertise-tags{gap:3px 0}.expertise-tags span,.light .expertise-tags span{font:500 15px Inter,Arial,sans-serif;color:var(--text);background:transparent;border:0;padding:0;border-radius:0}.expertise-tags span:not(:last-child):after{content:"/";display:inline-block;color:var(--subtle);margin:0 13px;font-weight:400}.expertise-primary{background:linear-gradient(90deg,#17364655,transparent 55%);padding-inline:14px}.expertise-primary .expertise-tags span{font-weight:650}
@media(max-width:1000px){.work-row{grid-template-columns:minmax(0,1fr) auto;gap:10px}.row-right{max-width:350px}.row-actions{grid-column:1/-1;margin-left:56px}}
@media(max-width:650px){.work-row{display:grid;grid-template-columns:1fr;padding:20px 0}.row-right{margin:0 0 0 56px;justify-content:flex-start;max-width:none}.row-actions{margin:2px 0 0 56px;grid-column:1}.expertise-group{display:block}.expertise-group h3{margin-bottom:13px}.expertise-tags span,.light .expertise-tags span{font-size:14px}.dialog-foot{display:block}.dialog-foot>div{margin-top:13px}}
.hero-social[aria-label="LinkedIn"] svg,.contact-social.linkedin-brand svg{fill:currentColor;stroke:none}
.form-status a{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
/* The strap stays attached while the badge swings and returns to rest. */
.portrait-wrap{touch-action:none;overflow:visible}.lanyard{transform-origin:50% 0;will-change:transform;pointer-events:none;z-index:0;border-top:5px solid #72909f}.lanyard:before{content:"";position:absolute;left:calc(50% - 10px);top:-9px;width:20px;height:8px;border-radius:3px;background:linear-gradient(90deg,#4b6472,#d0e4e9,#4b6472);box-shadow:0 1px 7px #0008}.badge-assembly{transform-origin:50% 275px;z-index:1}.badge-shine{background:radial-gradient(ellipse at var(--glare-x,50%) 22%,#b8e6ff36,transparent 42%),linear-gradient(115deg,transparent 26%,#ffffff12 38%,transparent 48%,#caeaff22 76%,transparent 84%)}.badge-hint{letter-spacing:.12em}
/* A distinct product screen follows the cursor over each work row. */
.hover-preview{width:min(470px,calc(100vw - 32px));padding:9px;border-color:#638396aa;background:#0d1925;box-shadow:0 30px 80px #000d;z-index:15}.hover-preview>div.hover-screen{display:block;position:relative;overflow:hidden;padding:0;border:1px solid #29465c;border-radius:6px;background:#0c1420;width:100%}.hover-preview .hover-screen img{position:absolute;left:0;width:100%;max-width:none;height:auto;object-fit:initial;object-position:initial;transform:none;transition:opacity .15s;border-radius:0}.hover-preview>div.hover-label{display:flex;justify-content:space-between;align-items:center;padding:11px 5px 3px;gap:10px}.hover-label span{white-space:nowrap}.work-row{cursor:default}.work-row:hover .project-identity h3{color:var(--accent)}
.expertise-end{border-top:1px solid var(--line);margin-top:30px;padding-top:28px;max-width:820px;color:var(--muted);line-height:1.7;font-size:16px}
@media(max-width:750px){.hover-preview{display:none}}
.lanyard{clip-path:none;transform:none}
/* Direct contact and inline calendar */
.contact-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(54px,7vw,115px);align-items:start}.contact-lead .section-count{display:block;margin-bottom:40px;color:var(--accent)}.contact-lead h2{font-size:clamp(2.7rem,4.2vw,4rem);font-weight:680;letter-spacing:-.065em;max-width:520px}.contact-lead>p{margin-top:22px;max-width:520px;color:var(--muted);font-size:18px;line-height:1.7}.contact-paths{margin-top:65px}.contact-path{padding:22px 0;border-bottom:1px solid var(--line)}.contact-path:first-child{border-top:1px solid var(--line)}.contact-path>span{display:block;margin-bottom:9px;font:12px DM Mono,monospace;letter-spacing:.1em;color:var(--accent)}.contact-path>a{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:18px;font-weight:580;overflow-wrap:anywhere}.contact-path>a>span{color:var(--accent)}.contact-path a:hover{color:var(--accent)}.contact-path small{display:block;margin-top:9px;font:12px DM Mono,monospace;color:var(--subtle)}.contact-path small a{text-decoration:underline;text-underline-offset:4px}
.contact-layout .contact-form{border:0;margin:0;padding:0}.contact-layout .contact-form h3{margin:4px 0 24px;font:12px DM Mono,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}.contact-layout .contact-form label{font:12px DM Mono,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}.contact-layout .contact-form input,.contact-layout .contact-form textarea{margin-top:9px;background:#1c222b;color:var(--text);border:1px solid transparent;border-radius:9px;padding:17px 20px;font:16px Inter,Arial,sans-serif;letter-spacing:0;text-transform:none}.contact-layout .contact-form input{height:64px}.contact-layout .contact-form textarea{min-height:178px;resize:vertical}.contact-layout .contact-form input:focus,.contact-layout .contact-form textarea:focus{border-color:var(--accent);outline:0}.contact-submit{width:100%;min-height:61px;border-radius:9px!important;background:#e7f1f5!important;color:#09121e!important;display:flex;justify-content:center;align-items:center;gap:12px;margin-top:6px}.contact-submit:hover{background:#abe9f0!important}.contact-submit span{padding-left:0!important}.contact-layout .form-status{min-height:24px;line-height:1.5}.light .contact-layout .contact-form input,.light .contact-layout .contact-form textarea{background:#e9eff3;border-color:#cbd5dc}
.booking{padding-top:110px}.booking-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:38px}.booking-head .section-count{display:block;color:var(--accent);padding:0;margin-bottom:25px}.booking-head h2{font-size:clamp(2.5rem,4vw,3.5rem)}.booking-head p{font-size:17px;color:var(--muted);margin-top:15px}.booking-head>a{font:12px DM Mono,monospace;color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:5px;white-space:nowrap}.cal-shell{height:730px;overflow:hidden;background:#111923;border:1px solid var(--line);border-radius:15px;padding:16px}.cal-shell #my-cal-inline-idea-to-product{width:100%;height:100%;overflow:auto}.cal-shell iframe{width:100%!important;min-height:690px!important;border:0!important}.cal-loading,.cal-error{padding:35px;color:var(--muted)}.cal-error a{color:var(--accent);text-decoration:underline}.footer{align-items:center}.footer>div{gap:17px;flex-wrap:wrap}.footer>div a:first-child{color:var(--text)}
@media(max-width:800px){.contact-layout{grid-template-columns:1fr;gap:55px}.contact-lead .section-count{margin-bottom:22px}.contact-paths{margin-top:30px}.booking{padding-top:80px}.cal-shell{height:850px}}
@media(max-width:520px){.contact-lead h2{font-size:2.75rem}.contact-lead>p{font-size:16px}.contact-path>a{font-size:16px}.booking-head{display:block}.booking-head>a{display:inline-block;margin-top:20px}.cal-shell{padding:6px;height:860px}.cal-shell iframe{min-height:840px!important}}
.contact-paths .contact-meeting{margin-top:22px;padding:23px 25px 21px;border:1px solid rgba(159,227,240,.42);border-radius:12px;background:linear-gradient(120deg,rgba(124,216,232,.12),rgba(124,216,232,.025));box-shadow:0 12px 40px rgba(0,0,0,.12)}.contact-meeting>a{font-size:clamp(19px,1.8vw,24px);font-weight:670;letter-spacing:-.025em}.meeting-platforms{display:flex;align-items:center;flex-wrap:wrap;gap:17px;margin-top:20px}.meeting-platforms span{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;font-weight:500}.meeting-platforms img{display:block;width:17px;height:17px;object-fit:contain}.booking-head>a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;background:var(--accent);border:0;border-radius:7px;color:#0c1720;font:600 14px Inter,Arial,sans-serif;text-decoration:none}.booking-head>a:hover{background:#d3faff;color:#09141c}.light .contact-paths .contact-meeting{background:#e4f4f7;border-color:#8abec8}
.hero-social.github-brand svg{fill:currentColor;stroke:none;width:21px;height:21px}.lanyard{transform-origin:50% 0!important;z-index:0}.badge-assembly{z-index:2}

/* Reading sizes and contrast across the portfolio. */
:root{--muted:#c4d0da;--subtle:#9baebd}
body.light{--muted:#405468;--subtle:#53687a}
body{font-size:17px}
.hello{font-size:14px;line-height:1.45;color:#e1fcff;border-color:#5aabb8;background:#14313d;padding:9px 15px;letter-spacing:.055em}
.greeting{font-size:17px;color:#d1e1ec}
.hero .intro{font-size:clamp(18px,1.5vw,20px);line-height:1.7;color:#f1f6fa}
.section-head p{font-size:18px;line-height:1.65;color:var(--muted)}
.section-count,.menu a span{font-size:13px;color:var(--subtle)}
.project-identity h3{font-size:20px}.project-identity p{font-size:16px;line-height:1.55;color:var(--muted)}
.row-right span{font-size:13px;line-height:1.3;color:#e2f2f6;background:#1b3341;border-color:#426779;padding:6px 9px}
.row-actions a,.row-actions button{font-size:13px;line-height:1.3;padding:7px 10px;color:#deebf3;border-color:#456174}
.row-actions .project-preview-trigger{color:#aaf3ff}
.about-prose p{font-size:19px;line-height:1.8;color:#e0eaf2}.about-prose .about-close{color:var(--text)}
.how h3{font-size:22px}.how .method p{font-size:17px;line-height:1.75;color:#d5e3ed}.how .method span{font-size:13px}
.expertise-group h3{font-size:14px}.expertise-tags span,.light .expertise-tags span{font-size:16px}.expertise-end{font-size:18px;color:var(--muted)}
.contact-lead>p{font-size:19px;color:var(--muted)}.contact-path>a{font-size:19px}.contact-path>span,.contact-layout .contact-form h3,.contact-layout .contact-form label{font-size:14px}.meeting-platforms span{font-size:14px}.booking-head p{font-size:18px}.footer{font-size:15px;color:var(--muted)}
.light .hero .intro,.light .about-prose p{color:#24384a}.light .about-prose .about-close{color:#102233}.light .how .method p{color:#354a5c}.light .row-right span{color:#193745;background:#e0eef3;border-color:#a6c5d1}.light .row-actions a,.light .row-actions button{color:#284959;border-color:#a6c5d1}.light .row-actions .project-preview-trigger{color:#006779}
@media(max-width:750px){.hero{min-height:1380px}.portrait-wrap{top:710px}}
@media(max-width:650px){.hero .intro{font-size:18px}.section-head p{font-size:17px}.row-right span{font-size:12px}.row-actions a,.row-actions button{font-size:12px}.about-prose p{font-size:18px}.how .method p{font-size:16px}}
@media(max-width:520px){.hello{font-size:12px;padding:8px 11px}.hero{min-height:1360px}.portrait-wrap{top:735px}.hero .intro{font-size:17px}.project-identity p{font-size:15px}.contact-lead>p{font-size:17px}}

/* Keep the complete first impression inside the initial desktop viewport. */
@media(min-width:751px){
  .hero{min-height:100svh;padding-top:105px;padding-bottom:28px;align-items:flex-start}
  .hero-copy{padding-top:18px}
  .hello{margin-bottom:20px}
  .hero h1{font-size:clamp(4rem,6.2vw,6rem);margin-bottom:18px}
  .hero .role{margin-bottom:18px}
  .hero .intro{line-height:1.55}
  .hero-links{margin-top:24px}
}

/* Desktop hero proportions: one complete composition in the first viewport. */
@media(min-width:1001px){
  .hero{width:min(1240px,calc(100% - 96px));min-height:100svh;padding:0;align-items:center;gap:72px}
  .hero-copy{max-width:600px;padding-top:0}
  .hello{margin-bottom:18px}
  .greeting{margin-bottom:7px}
  .hero h1{font-size:clamp(4.5rem,5.2vw,5rem);line-height:1.03;margin-bottom:20px}
  .hero .role{font-size:clamp(16px,1.35vw,19px);margin-bottom:20px}
  .hero .intro{max-width:590px;font-size:18px;line-height:1.6}
  .hero-links{margin-top:26px}
  .portrait-wrap{width:270px;height:590px}
  .portrait-wrap:before{width:370px;height:430px;top:135px}
  .lanyard{left:calc(50% - 34px);width:68px}
  .lanyard span{font-size:20px}
  .badge-connector{top:220px}
  .portrait-frame{inset:260px 0 auto 0;height:330px;border-radius:14px}
  .badge-hint{top:606px}
  .badge-caption{padding:12px 14px}
}