:root {
  --brand-cyan:#23c9d8;
  --brand-blue:#448fc8;
  --brand-purple:#9740bd;
  --bg:#f3f6ff;
  --ink:#16192b;
  --muted:#626c83;
  --line:rgba(76,97,145,.17);
  --accent:#087f99;
  --accent-hover:#7350a9;
  --soft-text:#5b667e;
  --strong-text:#3b486c;
  --subtitle:#68518b;
  --surface:rgba(255,255,255,.48);
  --surface-hover:rgba(255,255,255,.75);
  --surface-border:rgba(255,255,255,.72);
  --glass:rgba(255,255,255,.48);
  --glass-strong:rgba(250,252,255,.73);
  --glass-highlight:rgba(255,255,255,.7);
  --glass-border:rgba(255,255,255,.8);
  --glass-border-hover:rgba(68,143,200,.4);
  --glass-shadow:0 16px 55px rgba(50,67,126,.08),inset 0 1px 0 rgba(255,255,255,.8);
  --glass-dialog:rgba(246,249,255,.94);
  --preview-gradient:linear-gradient(135deg,rgba(35,201,216,.09),rgba(151,64,189,.10));
  --text-gradient:linear-gradient(110deg,#087f99 5%,#5068bf 53%,#8d3cad 98%);
  --button-bg:#46cddf;
  --button-ink:#091426;
  --button-hover:#73dce6;
  --art-label:rgba(255,255,255,.65);
  --art-label-border:rgba(255,255,255,.9);
  --project-label:#55617a;
  --project-open:rgba(255,255,255,.66);
  --project-open-hover:rgba(255,255,255,.9);
  --node-border:rgba(68,143,200,.26);
  --node-end:rgba(35,201,216,.18);
  --workflow-line:rgba(68,143,200,.5);
  --monogram:rgba(35,201,216,.6);
  --monogram-strong:#8651b1;
  --tag-border:rgba(87,108,156,.2);
  --dialog-border:rgba(255,255,255,.8);
  --contact-ink:#16192b;
  --orb-opacity:.30;
  --badge-aura-opacity:.43;
  --grain-opacity:.045;
}
html[data-theme="dark"] {
  --bg:#080a12;
  --ink:#f3f5ff;
  --muted:#a5aec7;
  --line:rgba(196,209,255,.14);
  --accent:#60d5e2;
  --accent-hover:#c185e0;
  --soft-text:#b1bad0;
  --strong-text:#d7ddf5;
  --subtitle:#bca4e0;
  --surface:rgba(25,31,51,.44);
  --surface-hover:rgba(45,52,78,.56);
  --surface-border:rgba(221,231,255,.14);
  --glass:rgba(24,30,49,.4);
  --glass-strong:rgba(21,27,45,.72);
  --glass-highlight:rgba(200,218,255,.07);
  --glass-border:rgba(212,226,255,.14);
  --glass-border-hover:rgba(92,207,230,.38);
  --glass-shadow:0 20px 65px rgba(0,0,0,.2),inset 0 1px 0 rgba(237,245,255,.045);
  --glass-dialog:rgba(12,16,30,.92);
  --preview-gradient:linear-gradient(135deg,rgba(35,201,216,.065),rgba(151,64,189,.12));
  --text-gradient:linear-gradient(110deg,#49d5e3 5%,#8b9ce6 53%,#c076df 98%);
  --art-label:rgba(29,38,61,.56);
  --art-label-border:rgba(217,237,255,.18);
  --project-label:#b2bfd7;
  --project-open:rgba(38,48,74,.66);
  --project-open-hover:rgba(58,71,106,.8);
  --node-border:rgba(114,172,225,.3);
  --node-end:rgba(35,201,216,.17);
  --workflow-line:rgba(99,182,220,.45);
  --monogram:rgba(35,201,216,.55);
  --monogram-strong:#b373d6;
  --tag-border:rgba(174,193,235,.22);
  --dialog-border:rgba(217,229,255,.17);
  --contact-ink:#f3f5ff;
  --orb-opacity:.43;
  --badge-aura-opacity:.67;
  --grain-opacity:.06;
}

html{scroll-padding-top:128px}
body{isolation:isolate}
body>header,body>main,body>footer{position:relative;z-index:1}
.ambient-backdrop{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--bg)}
.ambient-orb{position:absolute;border-radius:50%;opacity:var(--orb-opacity);filter:blur(90px);will-change:transform}
.orb-cyan{width:66vw;height:66vw;max-width:950px;max-height:950px;left:-20%;top:24%;background:radial-gradient(ellipse,var(--brand-cyan),transparent 68%);animation:drift-cyan 18s ease-in-out infinite alternate}
.orb-blue{width:70vw;height:70vw;max-width:1050px;max-height:1050px;left:16%;top:-30%;background:radial-gradient(ellipse,var(--brand-blue),transparent 67%);animation:drift-blue 22s ease-in-out infinite alternate}
.orb-purple{width:70vw;height:75vw;max-width:1100px;max-height:1150px;right:-18%;top:0;background:radial-gradient(ellipse,var(--brand-purple),transparent 68%);animation:drift-purple 16s ease-in-out infinite alternate}
.ambient-grain{position:absolute;inset:0;background:url('assets/grain.svg') repeat;opacity:var(--grain-opacity);mix-blend-mode:normal}
@keyframes drift-cyan{to{transform:translate3d(30vw,-24vh,0) scale(1.18)}}
@keyframes drift-blue{to{transform:translate3d(-12vw,35vh,0) scale(.85)}}
@keyframes drift-purple{to{transform:translate3d(-30vw,30vh,0) scale(1.22)}}
[data-motion="paused"] .ambient-orb,[data-motion="paused"] .badge-aura{animation-play-state:paused}
.scene-inactive .badge-aura{animation-play-state:paused}

body>.site-header{position:sticky;top:18px;z-index:20;height:76px;margin-top:24px;padding:0 26px;border:1px solid var(--glass-border);border-radius:24px;background:var(--glass-strong);backdrop-filter:blur(24px) saturate(145%);-webkit-backdrop-filter:blur(24px) saturate(145%);box-shadow:var(--glass-shadow)}
.wordmark-dot{color:var(--brand-cyan)}
.desktop-nav{gap:30px}
.header-contact{font-size:12px}
.theme-toggle{background:var(--glass);border-color:var(--glass-border);height:38px;width:38px}
.hero{padding-top:35px}
.hero-topline{gap:20px}
.hero-topline>.eyebrow{font-size:10px;letter-spacing:.13em}
.availability{border:1px solid var(--glass-border);background:var(--glass);border-radius:999px;padding:7px 12px;font-size:10px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.availability i,.tiny-dot{background:var(--brand-cyan);box-shadow:0 0 12px rgba(35,201,216,.35)}
.hero-grid{gap:35px;grid-template-columns:1.05fr 1fr;min-height:650px}
.serif{font-family:Manrope,Arial,sans-serif;font-style:normal;font-weight:500;letter-spacing:-.055em}
.hero h1{font-weight:500;line-height:1.02}
.hero h1 .serif,.section-heading h2 .serif,.about-copy h2 .serif,.experience-intro h2 .serif,.contact-section h2 .serif{background:var(--text-gradient);background-clip:text;-webkit-background-clip:text;color:transparent}
.hero h1 .serif{font-size:1em;letter-spacing:-.075em}
.accent-dot{color:var(--brand-purple)}
.hero-description{font-size:14px;line-height:1.9}
.hero-actions{gap:14px}
.button{border-radius:999px;padding:16px 23px;font-size:12px;gap:28px}
.button-dark{background:linear-gradient(115deg,#48d4df,#7c94ef);color:#091426;box-shadow:0 6px 28px rgba(35,201,216,.13),inset 0 1px 0 rgba(255,255,255,.45)}
.button-dark:hover{background:linear-gradient(115deg,#6ce2e8,#9aabf3);box-shadow:0 9px 34px rgba(35,201,216,.2)}
.hero-actions>.text-button{border:1px solid var(--glass-border);background:var(--glass);height:51px;padding:0 20px;border-radius:999px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:11px}
.hero-art{height:550px;border:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;overflow:visible;isolation:auto;z-index:auto}
.hero-topline,.hero-footer,main>section:not(.hero){position:relative;z-index:2}
.art-grid{display:none}
.sculpture-halo{width:100%;height:125%;background:none;filter:none;opacity:var(--badge-aura-opacity);overflow:clip;pointer-events:none;mask-image:radial-gradient(ellipse,#000 25%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse,#000 25%,transparent 72%)}
.sculpture-halo:after{content:'';inset:0;width:100%;height:100%;border-radius:0;background:url('assets/grain.svg') repeat;opacity:.09;filter:none;mix-blend-mode:soft-light}
.badge-aura{position:absolute;width:78%;height:68%;border-radius:50%;filter:blur(42px);will-change:transform}
.aura-cyan{left:-6%;top:19%;background:radial-gradient(ellipse,var(--brand-cyan),transparent 72%);animation:aura-cyan 10s ease-in-out infinite}
.aura-blue{left:18%;top:1%;background:radial-gradient(ellipse,var(--brand-blue),transparent 72%);animation:aura-blue 13s ease-in-out infinite}
.aura-purple{left:30%;top:34%;background:radial-gradient(ellipse,var(--brand-purple),transparent 72%);animation:aura-purple 11s ease-in-out infinite}
@keyframes aura-cyan{0%,100%{transform:translate3d(-12%,12%,0) scale(.88) rotate(-18deg)}40%{transform:translate3d(40%,-22%,0) scale(1.16) rotate(55deg)}75%{transform:translate3d(12%,30%,0) scale(1.04) rotate(100deg)}}
@keyframes aura-blue{0%,100%{transform:translate3d(10%,-12%,0) scale(.9)}45%{transform:translate3d(-24%,35%,0) scale(1.2)}80%{transform:translate3d(25%,18%,0) scale(1.04)}}
@keyframes aura-purple{0%,100%{transform:translate3d(12%,4%,0) scale(1.08) rotate(15deg)}35%{transform:translate3d(-40%,-30%,0) scale(.94) rotate(-45deg)}70%{transform:translate3d(-20%,22%,0) scale(1.2) rotate(35deg)}}
.sculpture:focus-visible{outline:0}
.sculpture:focus-visible~.art-bottom #art-instruction{outline:2px solid var(--brand-cyan);outline-offset:7px;border-radius:4px}
.sculpture{position:fixed;inset:0;z-index:0;cursor:default;pointer-events:none}
.lens-flare{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;opacity:0;mix-blend-mode:screen;contain:strict;transition:opacity .1s linear}
.lens-flare[hidden]{display:none}
.lens-flare *{pointer-events:none}
.lens-source{position:absolute;left:0;top:0;width:0;height:0;will-change:transform}
.lens-source>i{position:absolute;left:0;top:0;display:block;transform:translate(-50%,-50%)}
.lens-bloom{width:190px;height:190px;background:radial-gradient(circle,#fff 0 1.5px,rgba(255,244,219,.96) 2.5px,rgba(188,226,255,.65) 5px,rgba(91,186,255,.16) 19px,rgba(147,125,240,.04) 48px,transparent 78px)}
.lens-streak{width:min(80vw,640px);height:2px;background:linear-gradient(90deg,transparent,rgba(52,184,255,.04) 12%,rgba(82,194,255,.25) 39%,rgba(176,227,255,.8) 48%,#fff 50%,rgba(176,227,255,.8) 52%,rgba(82,194,255,.25) 61%,rgba(52,184,255,.04) 88%,transparent);filter:blur(.35px)}
.lens-star{width:2px;height:94px;background:linear-gradient(transparent,rgba(184,220,255,.18) 22%,#fff 50%,rgba(184,220,255,.18) 78%,transparent);filter:blur(.3px)}
.lens-halo{width:106px;height:106px;border-radius:50%;background:radial-gradient(circle,transparent 61%,rgba(125,183,255,.075) 64%,rgba(199,125,235,.10) 66%,transparent 69%)}
.lens-ghost{position:absolute;left:0;top:0;display:block;will-change:transform}
.lens-ghost-one{width:58px;height:58px;border-radius:50%;background:radial-gradient(circle,rgba(121,232,255,.025) 35%,rgba(121,232,255,.13) 61%,rgba(121,232,255,.025) 66%,transparent 71%)}
.lens-ghost-two{width:116px;height:116px;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:radial-gradient(circle,rgba(147,112,223,.025) 35%,rgba(225,176,111,.075) 68%,rgba(150,143,225,.12));box-shadow:inset 0 0 24px rgba(194,141,218,.06)}
.lens-ghost-three{width:29px;height:29px;border-radius:50%;background:radial-gradient(circle,rgba(239,166,217,.14),rgba(171,150,235,.05) 45%,transparent 70%)}
html.badge-over body{cursor:grab}
html.badge-dragging,html.badge-dragging *{cursor:grabbing!important;user-select:none;-webkit-user-select:none}
.sculpture.over-badge{cursor:grab}
.sculpture.dragging{cursor:grabbing}
.sculpture-fallback{opacity:0;filter:drop-shadow(10px 25px 20px rgba(45,75,145,.18))}
.sculpture-fallback img{width:100%;height:100%;object-fit:contain}
.badge-unavailable .sculpture-fallback{opacity:1}
.callout-design{--callout-color:#087d91}
.callout-development{--callout-color:#4269bb}
.callout-automation{--callout-color:#8943ac}
html[data-theme="dark"] .callout-design{--callout-color:#5de1ea}
html[data-theme="dark"] .callout-development{--callout-color:#9eafff}
html[data-theme="dark"] .callout-automation{--callout-color:#d99af2}
.art-label{display:grid;gap:5px;width:160px;padding:13px 14px 12px;border:1px solid color-mix(in srgb,var(--callout-color) 38%,var(--line));border-radius:5px 16px 5px 16px;background:linear-gradient(125deg,color-mix(in srgb,var(--callout-color) 8%,transparent),transparent 75%),color-mix(in srgb,var(--bg) 93%,transparent);color:var(--ink);box-shadow:inset 0 1px 0 var(--glass-highlight),0 8px 28px rgba(0,0,0,.08);backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:auto;text-decoration:none;transition:border-color .2s,box-shadow .2s,background-color .2s}
.art-label:before{content:'';position:absolute;left:-1px;top:23px;width:2px;height:23px;background:var(--callout-color);border-radius:2px}
.callout-code{color:var(--callout-color);font:9px/1.3 'Courier New',monospace;letter-spacing:.09em;text-transform:uppercase;padding-right:22px}
.art-label strong{font-size:15px;font-weight:650;line-height:1.35;letter-spacing:-.025em;margin-top:6px}
.callout-detail{font-size:9px;line-height:1.5;color:var(--muted);padding-right:10px}
.callout-icon{position:absolute;right:12px;top:12px;width:22px;height:22px;fill:none;stroke:var(--callout-color);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.callout-arrow{position:absolute;right:12px;bottom:10px;color:var(--callout-color);font-size:14px;line-height:1}
.art-label:hover,.art-label:focus-visible{border-color:var(--callout-color);background:linear-gradient(125deg,color-mix(in srgb,var(--callout-color) 22%,transparent),transparent 90%),var(--bg);box-shadow:0 0 0 1px color-mix(in srgb,var(--callout-color) 25%,transparent),0 0 26px color-mix(in srgb,var(--callout-color) 30%,transparent),0 8px 36px color-mix(in srgb,var(--callout-color) 15%,transparent),inset 0 1px 0 var(--glass-highlight)}
.art-label:focus-visible{outline:2px solid var(--callout-color);outline-offset:4px}
.label-design{left:0;top:25px}
.label-development{right:0;top:46%}
.label-automation{left:0;bottom:74px}
.badge-connections{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1;opacity:0}
.sculpture-ready .badge-connections{opacity:1}
.scene-inactive .badge-connections,.badge-unavailable .badge-connections{visibility:hidden}
.callout-leader{fill:none;stroke:var(--callout-color);stroke-width:var(--leader-width,1);stroke-linecap:round;stroke-linejoin:round;opacity:var(--leader-opacity,.48);filter:var(--leader-glow,none);transition:opacity .2s,stroke-width .2s}
.callout-pin{fill:var(--bg);stroke:var(--callout-color);stroke-width:var(--pin-width,1);opacity:var(--pin-opacity,.8);filter:var(--leader-glow,none);transition:opacity .2s,stroke-width .2s}
.callout-pin circle+circle{fill:var(--callout-color);stroke:none}
.badge-connections>g{transition:opacity .15s}
.hero-art:has(.label-design:is(:hover,:focus-visible)) .badge-connections>.callout-design,
.hero-art:has(.label-development:is(:hover,:focus-visible)) .badge-connections>.callout-development,
.hero-art:has(.label-automation:is(:hover,:focus-visible)) .badge-connections>.callout-automation{--leader-opacity:1;--leader-width:2;--pin-opacity:1;--pin-width:1.5;--leader-glow:drop-shadow(0 0 4px var(--callout-color))}
@media(prefers-reduced-motion:reduce){.art-label,.callout-leader,.callout-pin{transition:none}}
.expertise-list article:target{border-color:var(--accent);box-shadow:0 0 28px color-mix(in srgb,var(--brand-cyan) 14%,transparent)}
.art-bottom{left:22px;right:22px;bottom:17px;font-size:10px;z-index:4}
.art-bottom button{font-size:10px}
.badge-controls{display:flex;align-items:center;gap:12px}
.art-bottom #phone-tilt[hidden]{display:none}
.art-bottom #phone-tilt{min-height:36px;padding:6px 12px;border:1px solid var(--glass-border);border-radius:999px;background:var(--glass);backdrop-filter:blur(16px);white-space:nowrap;color:var(--ink)}
.art-bottom #phone-tilt[aria-pressed="true"]{border-color:var(--brand-cyan);color:var(--brand-cyan)}
.art-bottom #phone-tilt:disabled{opacity:.5}
.art-bottom:has(#phone-tilt:not([hidden])){align-items:center;flex-wrap:wrap;gap:4px 10px;bottom:-16px}
.art-bottom>.phone-tilt-status{display:none}
.art-bottom:has(#phone-tilt:not([hidden]))>.phone-tilt-status{display:block;flex-basis:100%;font-size:10px;line-height:1.5;text-align:right;min-height:15px}
.hero-footer{border:1px solid var(--glass-border);border-radius:18px;padding:17px 20px;background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);font-size:10px;box-shadow:var(--glass-shadow)}
.section-pad{padding-top:100px;padding-bottom:100px}
.section-heading h2,.experience-intro h2{font-weight:500;letter-spacing:-.06em}
.section-heading p{font-size:12px}
.section-index{font-size:10px}
.company-header{padding:7px 0 24px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;box-shadow:none;margin-bottom:26px}
.company-header:before{top:12px}
.company-header h3{font-size:38px;letter-spacing:-.055em}
.company-identity>.eyebrow{font-size:10px;letter-spacing:.09em}
.company-identity>.eyebrow>span{padding:0 10px;color:var(--accent)}
.company-scope p{font-size:12px}
.company-scope>span{font-size:10px}
.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.project-shell{min-width:0;perspective:1600px;isolation:isolate}
.project-shell-featured{grid-column:1/-1}
.project{position:relative;min-width:0;height:100%;padding:10px;border:1px solid var(--glass-border);border-radius:26px;background:var(--glass);box-shadow:var(--glass-shadow);backdrop-filter:blur(20px) saturate(125%);-webkit-backdrop-filter:blur(20px) saturate(125%);transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .5s var(--ease),border-color .25s,box-shadow .35s}
.project:after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(460px circle at var(--glow-x,50%) var(--glow-y,50%),color-mix(in srgb,var(--project-accent) 20%,transparent),transparent 72%);transition:opacity .3s}
.project:focus-within{border-color:color-mix(in srgb,var(--project-accent) 65%,transparent);box-shadow:0 15px 45px color-mix(in srgb,var(--project-accent) 12%,transparent)}
@media(hover:hover) and (pointer:fine){
  .project-shell:hover>.project{border-color:color-mix(in srgb,var(--project-accent) 65%,transparent);box-shadow:0 22px 65px color-mix(in srgb,var(--project-accent) 20%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--project-accent) 12%,transparent)}
  .project-shell:hover>.project:after{opacity:1}
  .project-shell.is-tracking>.project{transition:transform .14s ease-out,border-color .25s,box-shadow .35s}
}
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){.project-shell>.project{transform:none;transition:none}.project:after{transition:none}}
[data-motion="paused"] .project-shell>.project{transform:none;transition:none}
.project-featured{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:center}
.project-visual,[data-theme="dark"] .project-visual{height:auto;border:1px solid var(--line);border-radius:17px;background:radial-gradient(ellipse at 65% 60%,color-mix(in srgb,var(--project-accent) 22%,transparent),transparent 70%),var(--preview-gradient);isolation:isolate}
.project-visual:before{content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(transparent,rgba(0,0,0,.45));pointer-events:none}
.project-number{top:19px;left:22px;display:flex;align-items:center;gap:12px;border:0;border-radius:0;background:none;padding:0;color:var(--ink);font-size:9px;letter-spacing:.08em;max-width:calc(100% - 85px)}
.project-number b{font-size:22px;font-weight:500;letter-spacing:-.05em;color:var(--accent);line-height:1}
.project-number>span{border-left:1px solid var(--line);padding-left:12px;line-height:1.5}
.project-open{top:16px;right:18px;border:1px solid var(--glass-border);width:32px;height:32px;font-size:16px}
.project .device-scene{position:relative;inset:auto;display:block;width:100%;aspect-ratio:16/11;perspective:none;transform:none;transition:none}
.project .browser-frame{top:18%;left:5.5%;width:83%;height:auto;border-width:1px;border-radius:9px;transform:none;box-shadow:0 20px 35px -15px rgba(0,0,0,.5);transition:translate .35s var(--ease)}
.project .browser-bar{height:22px;padding:0 9px;gap:4px}
.project .browser-bar i{width:4px;height:4px}
.project .browser-bar>span{left:50%;transform:translateX(-50%);font-size:7px;white-space:nowrap}
/* The viewport alone is 16:9; browser chrome never takes away image height. */
.browser-screen{display:block;width:100%;aspect-ratio:16/9;overflow:hidden}
.browser-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.project .phone-frame{top:auto;bottom:8%;right:4.5%;width:19%;height:auto;aspect-ratio:9/19.5;transform:rotate(4deg);transition:translate .35s var(--ease)}
.project .project-caption{display:flex;flex-direction:column;align-items:flex-start;padding:22px 16px 16px;margin:0;gap:14px}
.project-caption-index{display:none;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.project .project-caption h4{font-size:27px;line-height:1.2;letter-spacing:-.045em}
.project .project-caption p{max-width:none;font-size:12px;line-height:1.8;margin-top:10px}
.project .project-kind{display:flex;flex-wrap:wrap;gap:6px;max-width:none;padding:0;text-align:left;font-size:9px;line-height:1.4}
.project-kind>span{padding:6px 9px;border:1px solid var(--line);border-radius:999px;color:var(--soft-text)}
.project-case-link{display:flex;align-items:center;gap:24px;padding:8px 0 2px;font-size:11px;font-weight:600;line-height:1.5}
.project-case-link>span{color:var(--accent);font-size:19px;transition:translate .2s}
.project-case-link:hover>span{translate:3px -3px}
.project-featured .project-caption{padding:32px;gap:22px}
.project-featured .project-caption-index{display:block}
.project-featured .project-caption h4{font-size:clamp(29px,3.4vw,48px)}
.project-featured .project-caption p{font-size:14px;max-width:29ch;margin-top:15px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.project-visual:hover .browser-frame{translate:0 -5px}.project-visual:hover .phone-frame{translate:0 -8px}}
@media(max-width:1000px){.project-featured .project-caption{padding:22px;gap:17px}.project-featured .project-caption p{font-size:12px}}
@media(max-width:800px){.project-grid{grid-template-columns:minmax(0,1fr);gap:22px}.project-featured{display:block}.project-featured .project-caption-index{display:none}.project .project-caption{padding:22px 16px 16px;gap:14px}.project .project-caption h4{font-size:27px}.project .project-caption p{font-size:12px;max-width:none}.project-company{padding-left:17px}.company-header:before{left:-22px}}
@media(max-width:600px){.project{padding:7px;border-radius:22px}.project-company{padding-left:12px}.company-header{padding:5px 0 20px;border-radius:0}.company-header:before{left:-17px;top:10px}.company-header h3{font-size:30px}.project-visual,[data-theme="dark"] .project-visual{border-radius:15px}.project-number{top:14px;left:13px;gap:8px;font-size:7px}.project-number b{font-size:18px}.project-number>span{padding-left:8px}.project-open{top:11px;right:12px;width:28px;height:28px;font-size:14px}.project .browser-bar{height:16px;padding:0 6px;gap:3px}.project .browser-bar i{width:3px;height:3px}.project .browser-bar>span{font-size:5px}.project .project-caption{padding:19px 12px 13px;gap:12px}.project .project-caption h4{font-size:24px}.project .project-caption p{font-size:11px}.project .project-kind{font-size:8px}.project-case-link{font-size:11px}}
@media(prefers-reduced-motion:reduce){.project,.project .browser-frame,.project .phone-frame,.project-case-link>span{transition:none}}
.automation-case{border:1px solid var(--glass-border);border-radius:26px;background:linear-gradient(120deg,rgba(35,201,216,.06),rgba(151,64,189,.08)),var(--glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:var(--glass-shadow)}
.automation-case:hover{background:linear-gradient(120deg,rgba(35,201,216,.11),rgba(151,64,189,.13)),var(--glass)}
.workflow-node{border-radius:13px;background:var(--glass-strong)}
.node-end{background:var(--node-end)}
.automation-title .serif{color:var(--subtitle)}
.about-section{background:transparent}
.about-grid{padding:48px;border:1px solid var(--glass-border);border-radius:32px;background:var(--glass);box-shadow:var(--glass-shadow);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);gap:9%;grid-template-columns:1fr 1.25fr}
.about-copy p{font-size:13px}
.about-monogram>i{color:var(--brand-blue)}
.expertise-list{border-top:0}
.expertise-list article{padding:28px 24px;border:1px solid var(--glass-border);border-radius:22px;margin-top:13px;background:var(--glass);box-shadow:var(--glass-shadow);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.expertise-list p{font-size:12px}
.expertise-icon{color:var(--brand-blue)}
.experience-section{padding-top:0}
.experience-grid{gap:8%;grid-template-columns:1fr 1.8fr}
.experience-list article,.experience-list article:first-child{padding:23px;border:1px solid var(--glass-border);border-radius:20px;margin-bottom:13px;background:var(--glass);box-shadow:var(--glass-shadow);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.experience-list .experience-description{font-size:12px;max-width:none}
.experience-list .role{font-size:11px;color:var(--subtitle)}
.experience-meta time{font-size:10px}
.education-row,.languages-row{padding:18px 20px;border:1px solid var(--glass-border);border-radius:18px;background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);grid-template-columns:86px minmax(0,1fr);gap:16px;margin-top:15px}
.languages-row p{font-size:11px;gap:10px 14px}
.languages-row small{font-size:9px}
.education-row p{font-size:11px}
.education-row h3{font-size:12px}
.contact-section{background:transparent;color:var(--ink);padding:0 0 30px}
.contact-section>.wrap{border:1px solid var(--glass-border);border-radius:36px;padding:40px 48px;background:linear-gradient(125deg,rgba(35,201,216,.08),rgba(151,64,189,.12)),var(--glass-strong);box-shadow:var(--glass-shadow);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px)}
.contact-top>.eyebrow,.contact-top .availability,.contact-bottom p{color:var(--muted)}
.contact-section h2{font-size:clamp(43px,6vw,86px);margin-top:48px}
.contact-top .availability{font-size:10px}
.contact-top .availability i{background:var(--brand-cyan)}
.contact-link{border-color:var(--line)}
.contact-link:hover{color:var(--accent)}
.site-footer{min-height:115px}
.detail-dialog{border-radius:28px;background:var(--glass-dialog);border:1px solid var(--dialog-border);box-shadow:0 30px 120px rgba(0,0,0,.3),inset 0 1px 0 var(--glass-highlight);backdrop-filter:blur(32px) saturate(140%);-webkit-backdrop-filter:blur(32px) saturate(140%)}
.detail-dialog::backdrop{background:rgba(5,8,20,.48);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.case-image{width:100%;height:auto;max-height:none;aspect-ratio:16/9;object-fit:cover;object-position:center top;border-radius:14px;border:1px solid var(--line)}
.tags span{border-radius:999px;background:var(--glass);padding:6px 10px}
.case-flow{border-radius:16px;border:1px solid var(--glass-border);background:var(--glass)}
.cv-title-role{color:var(--subtitle)}
[data-theme="dark"] ::selection{background:rgba(151,64,189,.42);color:#fff}
::selection{background:rgba(35,201,216,.25);color:var(--ink)}

@supports not (backdrop-filter:blur(1px)){
  .project,.company-header,.experience-list article,.about-grid,.expertise-list article,.education-row,.languages-row{background:var(--glass-strong)}
}
@media(min-width:1600px){.hero-art{height:620px}}
@media(max-width:1100px){
  .hero-grid{gap:25px;min-height:590px}
  .hero-art{height:490px}

  .about-grid{padding:34px;gap:6%}
  .company-scope p{font-size:11px}
  .education-row,.languages-row{grid-template-columns:70px minmax(0,1fr);padding:16px;gap:12px}
}
@media(max-width:800px){
  html{scroll-padding-top:122px}
  body>.site-header{padding:0 20px;height:72px;border-radius:22px}
  .hero-grid{gap:20px;min-height:535px}
  .hero-art{height:425px;border-radius:28px}
  .hero h1{font-size:clamp(55px,8.6vw,72px)}
  .hero-description{font-size:12px}
  .hero-actions{gap:10px}
  .hero-actions>.text-button{padding:0 13px;font-size:10px;height:46px}
  .button{font-size:11px;padding:14px 17px;gap:15px}
  .art-label{width:132px;padding:10px}
  .art-label strong{font-size:13px}
  .callout-code{font-size:8px;letter-spacing:.02em}
  .callout-icon{width:17px;height:17px;right:9px;top:9px}
  .callout-detail{font-size:8px}
  .label-design{top:12px;left:0}
  .label-development{right:0}
  .label-automation{left:0;bottom:65px}
  .art-bottom{font-size:8px;left:15px;right:15px}
  .art-bottom button{font-size:8px}
  .hero-footer{font-size:9px;padding:15px}
  .hero-topline>.eyebrow{font-size:8px}
  .hero-topline .availability{font-size:8px;padding:6px 9px}

  .company-scope p{font-size:10px}
  .company-scope>span{font-size:9px}
  .about-grid{padding:28px}
  .about-copy h2{font-size:29px}
  .about-monogram{font-size:150px;letter-spacing:-20px;width:190px}
  .about-monogram>span{font-size:175px}
  .about-copy p{font-size:12px}
  .expertise-list article{padding:23px 18px}
  .expertise-list p{font-size:11px}
  .experience-grid{grid-template-columns:1fr 1.9fr;gap:6%}
  .experience-list article,.experience-list article:first-child{padding:20px}
  .experience-list .experience-description{font-size:11px}
  .experience-meta{align-items:flex-start;flex-direction:column;gap:4px}
  .experience-meta time{font-size:9px}
  .education-row,.languages-row{grid-template-columns:1fr;gap:9px}
  .contact-section>.wrap{padding:32px}
  .contact-top .availability{font-size:8px}
}
@media(min-width:601px) and (max-width:1100px){
  /* A narrow desktop column also needs clear space around the identity. */
  .art-label{width:calc((100% - 14px)/3);top:-6px;bottom:auto;padding:10px 8px;gap:4px}
  .label-design{left:0}
  .label-development{left:calc((100% + 7px)/3);right:auto}
  .label-automation{left:calc((100% + 7px)*2/3)}
  .callout-code{font-size:8px;letter-spacing:0;padding-right:0}
  .callout-icon{position:static;width:20px;height:20px;margin:3px 0 1px}
  .art-label strong{font-size:clamp(10px,1.4vw,14px);margin-top:0}
  .callout-detail{font-size:clamp(7px,.95vw,9px);padding-right:0;white-space:nowrap}
  .callout-arrow{top:34px;right:9px;bottom:auto;font-size:12px}
}
@media(max-width:900px),(any-pointer:coarse){
  /* A stable large viewport avoids reallocating a sharp canvas each time
     the phone browser's address bar expands or collapses during scroll. */
  .sculpture{bottom:auto;height:100vh;height:100lvh}
  /* Gradients already provide soft edges; no large animated blur surfaces
     are needed on phone GPUs, including in landscape orientation. */
  .ambient-orb{filter:none;will-change:auto;animation:none}
  .badge-aura{filter:none;will-change:auto;animation-duration:18s}
  .sculpture-halo:after{display:none}
  .art-label,.availability,.hero-footer,.hero-actions>.text-button,.art-bottom #phone-tilt,
  .project,.automation-case,.about-grid,.expertise-list article,.experience-list article,
  .education-row,.languages-row,.contact-section>.wrap{backdrop-filter:none;-webkit-backdrop-filter:none}
  .lens-flare{mix-blend-mode:normal}
  .lens-ghost{display:none}
  .lens-streak,.lens-star{filter:none}
}
@media(max-width:600px){
  html{scroll-padding-top:110px}
  body>.site-header{width:calc(100% - 32px);height:68px;top:10px;margin-top:12px;padding:0 17px;border-radius:21px}
  .header-actions{gap:12px}
  .header-actions .header-contact{font-size:10px;gap:8px}
  .header-contact span{font-size:18px}
  .theme-toggle{width:32px;height:32px}
  .mobile-nav{position:fixed;top:90px;left:16px;right:16px;z-index:21;border:1px solid var(--glass-border);border-radius:20px;background:var(--glass-strong);padding:22px;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);box-shadow:var(--glass-shadow)}
  .orb-cyan{width:110vw;height:140vw;left:-65%;top:25%}
  .orb-blue{width:120vw;height:120vw;left:-35%;top:-22%}
  .orb-purple{width:130vw;height:160vw;right:-65%;top:4%}
  .hero{padding-top:28px}
  .hero-topline{gap:10px;align-items:center;z-index:3}
  .hero-topline>.eyebrow{font-size:7px;max-width:175px;line-height:1.8;letter-spacing:.09em}
  .hero-topline .availability{font-size:7px;padding:6px 8px;gap:5px}
  .hero-grid{gap:0;min-height:0}
  .hero-copy{padding-top:35px}
  /* Cover the mobile header/topline too, with no upper fade or rounded edge.
     Keep the blur, but reduce the previous 94% peak tint by 75% to 23.5%. */
  .hero-copy:before{content:'';position:absolute;inset:-220px -20px -10px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 23.5%,transparent) 76%,color-mix(in srgb,var(--bg) 10%,transparent));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);mask-image:linear-gradient(#000 calc(100% - 80px),transparent);-webkit-mask-image:linear-gradient(#000 calc(100% - 80px),transparent)}
  .hero h1{font-size:clamp(64px,16.5vw,94px);line-height:1.02}
  .hero-description{font-size:12px;margin-top:22px}
  .hero-actions{gap:10px;flex-wrap:wrap}
  .hero-actions .button{font-size:11px;padding:14px 19px;gap:22px}
  .hero-actions>.text-button{padding:0 16px;height:47px;font-size:10px}
  .hero-art{height:500px;margin:23px 0 22px;border-radius:28px}
  .sculpture-halo{width:100%;max-height:none}
  .hero-art:has(#phone-tilt:not([hidden])){margin-bottom:46px}
  /* Keep the pass/photo unobstructed: three compact annotations above it.
     Their leaders attach to the upper edge instead of crossing the print. */
  .art-label{width:calc((100% - 14px)/3);top:14px;bottom:auto;padding:12px 8px 10px;gap:5px;border-radius:4px 13px 4px 13px}
  .label-design{left:0}
  .label-development{left:calc((100% + 7px)/3);right:auto}
  .label-automation{left:calc((100% + 7px)*2/3)}
  .callout-code{font-size:8px;letter-spacing:0;padding-right:0}
  .callout-icon{position:static;width:20px;height:20px;margin:3px 0 1px}
  .art-label strong{font-size:clamp(10px,2.9vw,14px);margin-top:0}
  .callout-detail{font-size:clamp(7px,1.9vw,9px);padding-right:0;white-space:nowrap}
  .callout-arrow{top:37px;right:9px;bottom:auto;font-size:12px}
  .art-bottom{bottom:16px}
  .hero-footer{font-size:8px;padding:15px 13px;border-radius:16px}
  .section-pad{padding-top:65px;padding-bottom:65px}
  .section-heading h2,.experience-intro h2{font-size:36px}
  .section-heading p{font-size:11px}
  .section-index{font-size:9px}

  .automation-case{padding:26px 23px 44px;border-radius:25px}
  .automation-title{font-size:25px}
  .about-grid{padding:27px 23px;border-radius:27px}
  .about-copy h2{font-size:31px;line-height:1.28}
  .about-copy p{font-size:12px}
  .expertise-list article{padding:24px 18px;border-radius:22px}
  .expertise-list h3{font-size:20px}
  .expertise-list p{font-size:11px}
  .experience-section{padding-top:0}
  .experience-grid{display:flex;gap:27px}
  .experience-list article,.experience-list article:first-child{padding:21px;border-radius:21px}
  .experience-meta{flex-direction:row;align-items:baseline;gap:15px}
  .experience-meta h3{font-size:14px}
  .experience-meta time{font-size:9px}
  .experience-list .role{font-size:11px}
  .experience-list .experience-description{font-size:11px;line-height:1.85}
  .education-row,.languages-row{padding:18px 20px;grid-template-columns:1fr;gap:11px}
  .languages-row p{font-size:11px;gap:9px 14px}
  .languages-row small{font-size:9px}
  .contact-section{padding-bottom:20px}
  .contact-section>.wrap{padding:28px 25px;border-radius:28px}
  .contact-top .availability{font-size:8px;margin-top:13px}
  .contact-section h2{font-size:clamp(38px,9.7vw,58px);margin-top:28px;margin-bottom:26px;line-height:1.13}
  .contact-bottom p{font-size:11px}
  .contact-link{font-size:15px;gap:16px}
  .site-footer{min-height:105px}
  .detail-dialog{border-radius:24px;padding:46px 24px 30px}
}
@media(max-width:360px){.hero-topline>.eyebrow{font-size:6px}.hero-topline .availability{font-size:6px}.experience-meta{flex-direction:column;gap:4px}}
@media(prefers-reduced-motion:reduce){.ambient-orb,.badge-aura{animation:none;will-change:auto}.lens-flare{transition:none}.project:hover{transform:none}}
@media print{
  .ambient-backdrop{display:none!important}
  html,html[data-theme="dark"]{--bg:#fff;--ink:#151a23;--muted:#4b5365;--soft-text:#4b5365;--strong-text:#151a23;--subtitle:#4b5365;--glass-dialog:#fff;--line:#d5d9e3}
  .detail-dialog{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff;border-radius:0}
}