@font-face{font-family:Outfit;src:url('./fonts/Outfit-Variable.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{--canvas:#000;--ink:#f3f3f3;--soft:#a8a8a8;--glass:rgb(255 255 255 / .08);--edge:rgb(255 255 255 / .06);--field:rgb(255 255 255 / .055);--sc-canvas:var(--canvas);--sc-ink:var(--ink);--sc-ink-soft:var(--soft);--sc-font-display:'Outfit',Arial,sans-serif;--sc-font-text:'Outfit',Arial,sans-serif;--sc-accent:#ddd;--radius:32px;--ease:cubic-bezier(.23,1,.32,1);color-scheme:dark}
:root[data-theme=light]{--canvas:#f3f3f3;--ink:#111;--soft:#535353;--glass:rgb(0 0 0 / .075);--edge:rgb(0 0 0 / .05);--field:rgb(0 0 0 / .055);color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:auto}body.crysta{margin:0;background:var(--canvas);color:var(--ink);font:400 16px/1.55 'Outfit',Arial,sans-serif;letter-spacing:0;overflow-x:clip;cursor:auto}body.crysta::before,body.crysta::after{display:none}
body.crysta :is(h1,h2,h3,h4,p,figure){margin:0}body.crysta :is(h1,h2,h3,h4){font-family:inherit;font-weight:500;text-transform:none}body.crysta a{color:inherit;text-decoration:none;cursor:pointer}body.crysta button,body.crysta input,body.crysta textarea{font:inherit}body.crysta button{cursor:pointer}body.crysta img{max-width:100%;display:block}body.crysta video{max-width:100%;display:block}body.crysta a:hover{color:inherit}body.crysta :focus-visible{outline:2px solid var(--ink);outline-offset:5px}body.crysta button:active{transform:translateY(1px)}body.crysta ::selection{background:var(--ink);color:var(--canvas)}
.grain{position:fixed;inset:0;z-index:50;pointer-events:none;background:url('./reference/grain.png') repeat;background-size:64px auto;opacity:.08}
html:has(.home){scrollbar-width:none}
html:has(.home)::-webkit-scrollbar{width:0}
.site-header{height:76px;padding:24px;display:grid;grid-template-columns:max-content 1fr max-content 20px;align-items:center;column-gap:120px;font-size:16px;letter-spacing:-.02em;position:relative;z-index:10}
.identity{display:flex;align-items:center;gap:8px;width:max-content}.identity>.arrow{transform:rotate(180deg);width:14px;height:14px}.site-header .role{white-space:nowrap}.locale{font-variant-numeric:tabular-nums;white-space:nowrap}.theme-switch{border:0;background:transparent;padding:0;width:20px;height:28px;display:grid;place-items:center;border-radius:20px;color:inherit}.theme-switch>span{width:14px;height:14px;background:var(--ink);border-radius:50%;display:block}
.roll{display:block;position:relative;overflow:hidden;line-height:1.4}.roll>span{display:block;transition:transform .35s var(--ease)}.roll>span+span{position:absolute;inset:0;transform:translateY(120%) skewY(10deg)}
@media(hover:hover) and (pointer:fine){a:hover .roll>span:first-child{transform:translateY(-125%) skewY(-10deg)}a:hover .roll>span+span{transform:translateY(0) skewY(0)}a:hover .arrow{transform:translate(2px,-2px) rotate(-45deg)}.identity:hover>.arrow{transform:translateX(-2px) rotate(180deg)}}
a:focus-visible .roll>span:first-child{transform:translateY(-125%)}a:focus-visible .roll>span+span{transform:translateY(0)}
.glass{background:var(--glass);box-shadow:inset 0 1px 0 1px var(--edge);border-radius:var(--radius);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.home-title{position:absolute;top:92px;left:16px;right:16px;text-align:center;font-size:160px;line-height:1;letter-spacing:-.04em;pointer-events:none;white-space:nowrap}.home-title span{display:block}.headline-in{animation:headline-in .38s var(--ease)}@keyframes headline-in{from{opacity:.3;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.home-grid{position:relative;margin:116px 16px 16px;height:calc(100svh - 208px);min-height:500px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:16px}
.home-card{position:relative;overflow:hidden}.home-card:active{transform:scale(.995)}.about-card{grid-column:1;grid-row:1/3}.portfolio-card{grid-column:2/5;grid-row:1/3}.contact-card{grid-column:1/3;grid-row:3/5}.portrait-card{grid-column:3;grid-row:3/5;overflow:hidden;border-radius:var(--radius);position:relative}.portrait-card :is(img,video){width:100%;height:100%;object-fit:cover;object-position:50% 37%;transition:transform .6s var(--ease)}.tools-card{grid-column:4;grid-row:3;overflow:hidden;display:flex;align-items:center}.resume-card{grid-column:4;grid-row:4}
.card-label{position:absolute;inset:auto 32px 32px;display:flex;justify-content:space-between;align-items:center;font-size:18px;line-height:1.4}.arrow{width:18px;height:18px;transform:rotate(-45deg);transition:transform .25s var(--ease)}[data-theme=light] .arrow{filter:invert(1)}
.tool-track,.tool-copy{display:flex;gap:16px;align-items:center;width:max-content;flex-shrink:0}.tool-track{animation:tool-drift 18s linear infinite;will-change:transform;margin-left:32px}.tool{width:72px;height:72px;border-radius:18px;display:grid;place-items:center;background:var(--field);flex-shrink:0}.tool img{width:38px;height:38px;object-fit:contain;border-radius:9px}@keyframes tool-drift{to{transform:translateX(var(--tool-step,-176px))}}
.home-utilities{display:flex;gap:24px;padding:12px 32px 24px;justify-content:flex-end;align-items:center;font-size:13px;color:var(--soft)}.home-copyright{margin-right:auto}.motion-toggle{border:0;padding:0;background:none;color:inherit;font-size:13px!important;min-height:28px}
@media(max-width:700px){.home-utilities{flex-wrap:wrap;row-gap:8px}.home-copyright{flex-basis:100%}}
.page-intro{padding:80px 32px 48px}.page-intro h1{font-size:48px;line-height:1.2;letter-spacing:-.04em;max-width:1080px;text-wrap:initial}.page-intro .tag{font-size:20px;color:var(--soft);margin-top:12px;text-transform:none;letter-spacing:-.02em}.site-footer{margin:120px 32px 0;padding:24px 0 36px;border-top:1px solid var(--edge);display:grid;grid-template-columns:1fr 1fr;gap:36px;font-size:24px;line-height:1.6}.footer-social{display:flex;flex-direction:column;align-items:flex-start}.footer-nav{display:flex;gap:24px;flex-wrap:wrap;font-size:14px;position:static!important;background:none!important;padding:0!important;border:0!important;height:auto!important;backdrop-filter:none!important}.site-footer .motion-toggle{justify-self:start;align-self:start;color:var(--soft)}.footer-email{align-self:start;overflow-wrap:anywhere}
.bio-intro{padding:80px 32px 0}.approved-bio{font-size:48px;line-height:1.2;letter-spacing:-.04em}.approved-bio strong{font-weight:700}.approved-bio p+p{margin-top:48px!important}.bio-word{color:var(--ink);opacity:.5;transition:opacity .16s linear}.bio-word.is-read{opacity:1}.about-portrait{width:35%;margin:80px 32px 80px auto!important}.about-portrait img{width:100%;height:auto}.experience,.toolkit{padding:0 32px}.experience h2,.toolkit h2,.logofolio h2{font-size:36px;margin-bottom:80px!important;letter-spacing:-.04em}.experience-row{display:grid;grid-template-columns:24% 1fr;gap:0;padding-bottom:64px;max-width:1000px}.experience-row>p{color:var(--soft)}.experience-row h3,.timeline-org{font-size:20px}.toolkit{padding-top:32px}.toolkit h2{margin-bottom:32px!important}.software-row{display:flex;gap:24px;flex-wrap:wrap;max-width:1100px}.software-chip{display:flex;align-items:center;gap:10px}.software-icon{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-size:14px}.marquee{overflow:hidden;margin-top:96px;padding:0 0 16px;white-space:nowrap;font-size:80px;letter-spacing:-.04em}.marquee>div{width:max-content;animation:marquee 32s linear infinite}@keyframes marquee{to{transform:translateX(-50%)}}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0 32px}.project-card{padding:16px;min-width:0;overflow:hidden;border-radius:24px}.project-image{aspect-ratio:1800/923;overflow:hidden;border-radius:16px;background:var(--field)}.project-image img{width:100%;height:100%;object-fit:contain}.project-label{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 24px 8px}.project-label h2{font-size:20px;min-width:0}.project-label>span{font-size:16px;color:var(--soft);text-align:right;max-width:45%}.project-label .roll{overflow:visible}.project-label .roll>span+span{display:none}
@media(hover:hover) and (pointer:fine){.portrait-card:hover :is(img,video){transform:scale(1.035)}.project-card:hover .roll>span:first-child{transform:none}.tools-card:hover .tool-track{animation-play-state:paused}}
.logofolio{padding:96px 32px}.logofolio h2{margin-bottom:16px!important}.logofolio p{color:var(--soft);margin-bottom:32px!important}.logofolio img{width:100%;border-radius:24px}
.contact-layout{display:grid;grid-template-columns:40% 60%;margin:32px 32px 0}.contact-direct{display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-size:24px;padding-right:24px;overflow-wrap:anywhere}.contact-form{padding:48px;display:flex;flex-direction:column;gap:40px;min-width:0}.contact-form>label{display:flex;flex-direction:column;gap:12px}.contact-form :is(input:not([type=checkbox]):not([type=radio]),textarea){width:100%;border:1px solid var(--edge);background:var(--field);border-radius:16px;color:var(--ink);padding:16px;outline-offset:3px;min-height:52px}.contact-form textarea{resize:vertical;min-height:140px}.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--soft);opacity:1}.form-options{display:grid;grid-template-columns:1.2fr 1fr;gap:32px}.contact-form fieldset{border:0;padding:0;margin:0;min-width:0}.contact-form legend{margin-bottom:18px;padding:0}.choice{display:flex;gap:12px;align-items:center;margin:10px 0;min-height:28px}.choice input{appearance:auto;width:20px;height:20px;accent-color:var(--ink);flex-shrink:0;margin:0}.contact-form button,.download-resume,.open-email{padding:16px 40px;background:var(--glass);box-shadow:inset 0 1px 0 1px var(--edge);border:0;border-radius:12px;color:var(--ink);align-self:start;min-height:52px}.form-note{font-size:14px;color:var(--soft)}.email-preview{padding-top:24px;border-top:1px solid var(--edge)}.email-preview h2{font-size:24px}.email-preview pre{font:inherit;white-space:pre-wrap;overflow-wrap:anywhere;margin-bottom:24px}.email-preview p{font-size:13px;color:var(--soft);margin-top:24px!important}.open-email,.download-resume{display:inline-block}.resume-bio{max-width:850px;padding:32px 0}.resume-bio p+p{margin-top:12px!important}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip-link{position:fixed!important;top:-100px!important;left:16px!important;z-index:200!important;background:var(--ink)!important;color:var(--canvas)!important;padding:14px!important}.skip-link:focus{top:10px!important}
/* Retained project/reel/gallery markup receives the same measured skin. */
.crysta.legacy{--accent:var(--ink);--bg:var(--canvas);--bg2:var(--canvas);--surface:var(--glass);--text:var(--ink);--text2:var(--soft);--max:1600px;--border:var(--edge);--red:var(--ink)}
.legacy #main-content{padding-top:0!important}.legacy .case-intro{margin:0;max-width:none}.legacy .case-intro h1{font-size:48px!important;line-height:1.2!important;max-width:none}.legacy .case-hero{margin:0 32px!important;padding:0!important;width:auto!important;max-width:none!important;height:auto!important;min-height:0!important}.legacy .case-hero-frame{width:100%;height:auto!important;min-height:0;aspect-ratio:auto!important;border-radius:32px;overflow:hidden}.legacy .case-hero-frame::after,.legacy .case-hero::after{display:none}.legacy .case-hero-frame :is(img,video){display:block;width:100%;height:auto;object-fit:contain}.legacy .case-meta{max-width:none!important;width:auto!important;padding:64px 80px!important;display:grid;grid-template-columns:1fr 1fr;gap:24px 12%;margin:0!important}.legacy .case-desc{max-width:600px!important;font-size:16px!important;line-height:1.5!important}.legacy .case-hook{font-size:24px!important;line-height:1.4!important}.legacy .case-credits{font-size:16px!important;color:var(--soft)!important;letter-spacing:-.02em!important}.legacy .case-gallery{margin:0 32px!important;padding:0!important;gap:24px!important;max-width:none!important}.legacy .case-gallery a{border-radius:24px;overflow:hidden}.legacy .case-gallery img{width:100%;height:auto!important;object-fit:contain}.legacy .case-links{padding:0 80px 64px!important;max-width:none!important}.legacy .case-link-item{border-color:var(--edge)!important;background:var(--glass)!important;border-radius:12px;color:var(--ink)!important}.legacy :is(.page-hero,.section,.section-head){padding:64px 32px!important;max-width:none!important}.legacy .page-hero{padding-top:80px!important;min-height:0!important}.legacy .section-title{font-size:48px!important;line-height:1.2!important;letter-spacing:-.04em!important;max-width:none!important;color:var(--ink)!important}.legacy .accent{color:var(--ink)!important}.legacy .tag{color:var(--soft)!important;font:500 16px/1.4 'Outfit',sans-serif!important;letter-spacing:-.02em!important}.legacy .tag::before{display:none}.legacy .btn{background:var(--glass)!important;border:1px solid var(--edge)!important;border-radius:12px!important;color:var(--ink)!important;text-transform:none!important;font:500 16px/1.4 'Outfit',sans-serif!important;letter-spacing:-.02em!important}.legacy :is(.reel-frame,.video-frame,.film-frame,.video-wrap){border-radius:24px;overflow:hidden}.legacy :is(.section-sub,.case-desc p){color:var(--soft)!important}.legacy #cursor-dot,.legacy #cursor-ring{display:none!important}.legacy .site-header{position:relative!important;background:transparent!important}.legacy .site-footer{background:none!important}.legacy .site-footer a{font-family:inherit!important;text-transform:none!important;letter-spacing:inherit!important}.legacy :is(.reveal,.reveal-scale,.reveal-stagger){opacity:1!important;transform:none!important}.legacy .site-footer .footer-social{display:flex;gap:0}.legacy :is(.case-nav,.more-nav){padding:64px 32px!important}.legacy video{background:#080808}
html.sc-ready .crysta [data-sc-in]{opacity:.5;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease)}html.sc-ready .crysta [data-sc-in].sc-in{opacity:1;transform:none}.crysta [data-sc-in]:focus-within{opacity:1!important;transform:none!important}
.motion-off *{animation:none!important;scroll-behavior:auto!important;transition:none!important}.motion-off .bio-word{opacity:1!important}.motion-off [data-sc-in]{opacity:1!important;transform:none!important}.tab-hidden *{animation-play-state:paused!important}
@media(max-width:1199px) and (min-width:701px){.site-header{column-gap:48px}.home-title{font-size:100px;top:92px}.home-grid{margin-top:76px;height:calc(100svh - 200px);min-height:660px;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:1fr 1fr 200px}.about-card{grid-column:1/4;grid-row:1}.portfolio-card{grid-column:4/7;grid-row:1}.contact-card{grid-column:1/5;grid-row:2}.portrait-card{grid-column:5/7;grid-row:2}.tools-card{grid-column:1/4;grid-row:3}.resume-card{grid-column:4/7;grid-row:3}.contact-layout{grid-template-columns:35% 65%}.contact-form{padding:32px}.contact-direct{font-size:20px}.project-label{padding:16px 4px 8px;gap:16px}.project-label>span{font-size:13px}.page-intro h1,.approved-bio{font-size:40px}}
@media(max-width:700px){:root{--radius:24px}.site-header{height:60px;padding:16px;grid-template-columns:max-content 1fr 32px;column-gap:24px;font-size:14px}.locale{display:none}.theme-switch{width:32px;height:20px;background:var(--glass);padding:3px;justify-items:start}.theme-switch span{width:14px;height:14px}[data-theme=light] .theme-switch{justify-items:end}.site-header .role{font-size:12px;line-height:1.2;white-space:normal;letter-spacing:-.03em}.grain{opacity:.08}.home-title{top:90px;font-size:48px;line-height:1;letter-spacing:-.04em}.home-grid{margin:60px 16px 16px;height:calc(100svh - 136px);min-height:650px;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr)) 140px;gap:12px}.about-card{grid-column:1/3;grid-row:1}.portfolio-card{grid-column:1/3;grid-row:2}.contact-card{grid-column:1;grid-row:3}.portrait-card{grid-column:2;grid-row:3}.tools-card{grid-column:1;grid-row:4}.resume-card{grid-column:2;grid-row:4}.card-label{inset:auto 24px 24px;font-size:16px}.arrow{width:16px;height:16px}.tool-track,.tool-copy{gap:10px}.tool-track{margin-left:20px;--tool-step:-124px}.tool{width:52px;height:52px;border-radius:12px}.tool img{width:28px;height:28px}.home-utilities{padding:8px 24px 24px;font-size:12px;gap:20px}.page-intro{padding:60px 16px 32px}.page-intro h1{font-size:26px;line-height:1.2;letter-spacing:-.04em}.site-footer{margin:64px 16px 0;grid-template-columns:1fr;font-size:20px;gap:32px;padding:24px 0}.footer-nav{gap:20px;font-size:13px}.bio-intro{padding:60px 16px 0}.approved-bio{font-size:26px;line-height:1.2;letter-spacing:-.04em}.approved-bio p+p{margin-top:32px!important}.about-portrait{width:auto;margin:48px 16px!important}.experience,.toolkit{padding:0 16px}.experience h2,.toolkit h2{font-size:26px;margin-bottom:48px!important}.experience-row{grid-template-columns:minmax(0,45fr) minmax(0,55fr);padding-bottom:40px;font-size:14px;gap:12px}.experience-row h3,.timeline-org{font-size:16px}.software-row{gap:20px;font-size:14px}.marquee{font-size:44px;margin-top:64px}.project-grid{grid-template-columns:1fr;margin:0 16px;gap:12px}.project-card{padding:8px;border-radius:16px}.project-image{border-radius:12px}.project-label{padding:14px 16px 16px;align-items:start;gap:12px}.project-label h2{font-size:16px}.project-label>span{font-size:12px;max-width:42%}.logofolio{padding:64px 16px}.logofolio h2{font-size:26px}.contact-layout{margin:0 16px;grid-template-columns:1fr;gap:32px}.contact-direct{font-size:18px;gap:6px;padding:0}.contact-form{padding:24px;gap:28px;border-radius:24px;font-size:14px}.form-options{grid-template-columns:1fr;gap:28px}.contact-form :is(input:not([type=checkbox]):not([type=radio]),textarea){font-size:16px}.contact-form button{width:100%;padding:16px}.choice{margin:12px 0;min-height:32px}.legacy .case-intro h1{font-size:30px!important}.legacy .case-hero{margin:0 16px!important}.legacy .case-hero-frame{border-radius:20px;aspect-ratio:auto}.legacy .case-hero-frame :is(img,video){height:auto;min-height:0}.legacy .case-meta{padding:32px 24px!important;grid-template-columns:1fr;gap:20px}.legacy .case-hook{font-size:20px!important}.legacy .case-gallery{margin:0 16px!important;grid-template-columns:1fr!important}.legacy .case-links{padding:0 16px 32px!important;grid-template-columns:1fr!important}.legacy :is(.page-hero,.section,.section-head){padding:40px 16px!important}.legacy .section-title{font-size:30px!important}.legacy :is(.case-nav,.more-nav){padding:32px 16px!important}}
@media(prefers-reduced-motion:reduce){.crysta *{animation:none!important;transition:none!important;scroll-behavior:auto!important}.crysta .bio-word{opacity:1!important}.crysta [data-sc-in]{opacity:1!important;transform:none!important}}
@media print{.site-header,.site-footer,.grain,.download-resume,.skip-link{display:none!important}body.crysta{background:#fff;color:#000}.page-intro,.experience{padding:0}.experience-row{break-inside:avoid;padding:12px 0}.resume-bio{padding:20px 0}.experience-row>p{color:#333}}

/* Prevent the retained legacy navigation backdrop from covering case pages. */
.crysta .footer-nav{z-index:auto!important;inset:auto!important}.crysta .footer-nav::before,.crysta .footer-nav::after{display:none!important}.crysta .motion-toggle{text-transform:none;letter-spacing:inherit}

.crysta.legacy :is(.case-hook,.case-credits,.case-link-item span,.section-label,.video-title,.video-badge){font-family:inherit!important;text-transform:none!important;letter-spacing:inherit!important}
.crysta.legacy #main-content :is(h1,h2,h3,p,a,button){font-family:inherit!important}
.legacy .cinema-case-hero{min-height:0!important;height:auto!important;padding:80px 32px 0!important;display:flex;flex-direction:column;gap:32px;background:none}
.legacy .cinema-case-hero>video{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;border-radius:32px;order:1}
.legacy .cinema-case-hero-shade,.legacy .cinema-case-hero::before,.legacy .cinema-case-hero::after{display:none}
.legacy .cinema-case-hero-copy{position:static;padding:0;max-width:1080px;width:auto;order:0}
.legacy .cinema-case-hero h1{font-size:48px!important;line-height:1.2!important;letter-spacing:-.04em!important;max-width:none}
.legacy .cinema-case-role{font-size:16px!important;letter-spacing:-.02em!important;text-transform:none!important;color:var(--soft);margin-top:16px!important}
.legacy .cinema-case-hero-copy>p:not(.cinema-case-role){max-width:760px;margin-top:24px!important}
.legacy .cinema-hero-toggle{position:static;order:2;align-self:start;font-size:14px;border-radius:12px;letter-spacing:inherit;text-transform:none;color:var(--ink);background:var(--glass);padding:14px 24px}
.legacy :is(.services-button,.services-button-primary){background:var(--glass)!important;color:var(--ink)!important;border:1px solid var(--edge)!important;border-radius:12px!important;text-transform:none!important;letter-spacing:inherit!important;font-size:16px!important}
.legacy :is(.cinema-case-intro,.cinema-film-chapter,.cinema-film-pair,.cinema-gallery-section){padding:64px 32px;background:var(--canvas)!important;color:var(--ink)}
.legacy :is(.cinema-case-intro,.cinema-film-chapter,.cinema-film-pair,.cinema-gallery-section) h2{font-size:36px;line-height:1.2;letter-spacing:-.04em}
.legacy .project-cta{padding:96px 32px 48px}.legacy .project-cta h2{font-size:48px;line-height:1.2;letter-spacing:-.04em;margin-bottom:24px}.legacy .project-cta p{color:var(--soft);margin-bottom:24px}
@media(max-width:700px){.legacy .cinema-case-hero{padding:60px 16px 0!important;gap:24px}.legacy .cinema-case-hero h1{font-size:30px!important}.legacy .cinema-case-hero>video{border-radius:20px}.legacy :is(.cinema-case-intro,.cinema-film-chapter,.cinema-film-pair,.cinema-gallery-section){padding:48px 16px}.legacy :is(.cinema-case-intro,.cinema-film-chapter,.cinema-film-pair,.cinema-gallery-section) h2{font-size:26px}.legacy .project-cta{padding:64px 16px 32px}.legacy .project-cta h2{font-size:30px}}.crysta.legacy{--font-display:'Outfit',Arial,sans-serif;--font-body:'Outfit',Arial,sans-serif;--font-editorial:'Outfit',Arial,sans-serif;--text-dim:var(--soft);--gold:var(--soft);--accent-readable:var(--ink);--line:var(--edge);--glass-border:var(--edge);--radius-panel:24px}
.legacy .services-intro-stage{background:var(--canvas);height:auto;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:48px 32px;padding:80px 32px 48px}
.legacy .services-intro-stage::after,.legacy .services-path-dock::before{display:none}
.legacy .services-hero-copy{position:static;width:auto;align-self:center}.legacy .services-hero-copy h1{font-size:48px;line-height:1.2;letter-spacing:-.04em;white-space:normal}
.legacy .services-hero-reel{position:relative;inset:auto;width:100%;height:360px;overflow:hidden;border-radius:24px;background:var(--glass)}
.legacy .services-hero-frame{box-shadow:none;border-radius:16px}
.legacy .services-path-dock{position:relative;inset:auto;grid-column:1/-1;padding:56px 16px 16px;min-height:0;z-index:auto;background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--edge);border-radius:24px;gap:12px}
.legacy .services-path-dock>a{padding:16px;grid-template-columns:32px 1fr auto;gap:12px;font-size:16px;line-height:1.3;letter-spacing:inherit;text-transform:none;background:var(--field);border-color:var(--edge);color:var(--ink)}
.legacy .services-path-dock svg{width:24px;height:24px}.legacy .services-path-label{top:24px;left:32px}
.legacy :is(.services-kicker,.services-chapter-kicker,.services-path-label,.services-word-loop-label){color:var(--soft);font-size:13px;text-transform:none;letter-spacing:inherit}
.legacy .services-chapter-preview{position:static;grid-column:1/-1;width:auto;padding:0;background:none}
.legacy :is(.services-chapter-preview h2,.services-chapter-head h2){font-size:36px;line-height:1.2;letter-spacing:-.04em}
.legacy :is(.services-service-band,.services-chapter){padding:64px 32px;background:var(--canvas)}
.legacy .services-word-loop{background:var(--glass);border-radius:24px}.legacy .services-word-loop-word{font:700 36px/1.2 'Outfit',sans-serif;text-transform:none}.legacy .services-service-title h3{font-size:28px;line-height:1.3}.legacy .services-compact-list h3{font-size:24px;line-height:1.3}
.legacy .services-chapter-preview-copy>a span{font-size:16px;letter-spacing:inherit;text-transform:none}.legacy :is(.services-service-actions a,.services-compact-list a){text-transform:none;letter-spacing:inherit;font-size:14px}
.motion-off .services-word-loop-word{opacity:0;transform:none}.motion-off .services-word-loop-word:first-child{opacity:1}
@media(max-width:900px){.legacy .services-intro-stage{grid-template-columns:1fr}.legacy .services-path-dock{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.legacy .services-intro-stage{padding:60px 16px 32px;gap:32px}.legacy .services-hero-copy h1{font-size:30px}.legacy .services-hero-reel{height:300px}.legacy .services-path-dock{grid-template-columns:1fr}.legacy :is(.services-chapter-preview h2,.services-chapter-head h2){font-size:26px}.legacy :is(.services-service-band,.services-chapter){padding:48px 16px}.legacy .services-service-title h3{font-size:24px}.legacy .services-compact-list h3{font-size:20px}.legacy .services-word-loop-word{font-size:28px}}.legacy .video-grid{margin:0 32px;padding:0;max-width:none;grid-template-columns:1fr}.legacy .video-card{padding:16px;background:var(--glass);border-radius:24px;border:1px solid var(--edge)}.legacy .video-info{padding:20px 16px 8px}.legacy .video-controls{top:12px;bottom:auto}.legacy .section-label{padding:0 32px 24px;color:var(--soft)}.legacy .video-badge{color:var(--soft);border-color:var(--edge)}.legacy #main-content.not-found{padding:80px 32px!important;min-height:65svh}.legacy .not-found h1{font-size:48px;line-height:1.2}
@media(max-width:700px){.legacy .video-grid{margin:0 16px}.legacy .video-card{padding:8px;border-radius:20px}.legacy .section-label{padding:0 16px 24px}.legacy .video-info{padding:16px 8px 8px;font-size:13px}.legacy .not-found h1{font-size:30px}}.footer-email .roll>span+span{transform:translateY(120%)}.footer-email:hover .roll>span:first-child,.footer-email:focus-visible .roll>span:first-child{transform:translateY(-125%)}.footer-email:hover .roll>span+span,.footer-email:focus-visible .roll>span+span{transform:translateY(0)}
.legacy .case-gallery-item{aspect-ratio:auto!important;min-width:0;height:auto!important}
@media(max-width:700px){.legacy .case-gallery{grid-template-columns:minmax(0,1fr)!important}.legacy .case-gallery>*{grid-column:auto!important;min-width:0}}.legacy .case-gallery .case-gallery-youtube{aspect-ratio:auto!important;display:block;padding:16px 20px;background:var(--glass);border:0;border-radius:0;color:var(--ink);height:auto!important;min-height:0;letter-spacing:inherit;text-transform:none}
.legacy .case-gallery-video{border-radius:24px;overflow:hidden;background:var(--glass)}.legacy .case-gallery-video video{width:100%;height:auto;object-fit:contain}.legacy .case-gallery-portrait video{max-height:75svh}/* The original hands loop is keyed frame by frame; this layer has real alpha. */
.portfolio-art{position:absolute;inset:20px 32px 66px;display:grid;place-items:center;pointer-events:none}
.portfolio-motion{width:100%;height:100%;min-height:0;object-fit:contain;pointer-events:none}
.portfolio-card .card-label{z-index:1}
@media(max-width:700px){.portfolio-art{inset:10px 16px 46px}}
/* Generated hand loops share the existing hero's alpha and still-image playback. */
.hand-art{position:absolute;inset:16px 24px 58px;display:grid;place-items:center;pointer-events:none}
.hand-motion{width:100%;height:100%;min-height:0;object-fit:contain;pointer-events:none}
.about-card .hand-motion{transform:scale(.765)}
.contact-card .hand-motion{transform:translateY(28px) scale(.99)}
[data-theme=light] :is(.hand-art,.portfolio-art){visibility:hidden}
.resume-card .hand-motion{transform:translateY(.4cm)}
.tools-card{display:grid;grid-template-rows:repeat(2,minmax(0,72px));gap:16px;padding:10px 0;align-items:stretch;align-content:center}
.tools-card .tool-row{min-width:0;min-height:0;display:flex;align-items:center;overflow:hidden}
.tools-card .tool-track{height:100%;max-height:72px;min-width:200%;margin-left:0;gap:0;animation-name:toolkit-drift;animation-duration:24s}
.tools-card .tool-row:nth-child(2) .tool-track{animation-direction:reverse}
.tools-card .tool-set{height:100%;display:flex;gap:10px;padding-right:10px;align-items:center;flex-shrink:0;flex-grow:1;justify-content:space-around}
.tools-card .tool{width:auto;height:100%;aspect-ratio:1;background:none;border:0;border-radius:0;box-shadow:none}
.tools-card .tool img{width:64%;height:64%;border-radius:0}
.tools-card .tool--figma img{width:106%;height:106%;max-width:none}
.tools-card .tool--chatgpt img{width:78%;height:78%;max-width:none}
[data-theme=light] .tools-card .tool--chatgpt img{filter:invert(1)}
@keyframes toolkit-drift{to{transform:translateX(-50%)}}
.home-card .card-label{z-index:1}
.contact-card .hand-art{inset:20px 32px 58px}
.resume-card .hand-art{inset:10px 18px 58px}
@media(max-width:700px){.hand-art{inset:12px 18px 46px}.contact-card .hand-art{inset:12px 12px 46px}.resume-card .hand-art{inset:10px 12px 44px}.resume-card .card-label{bottom:18px}.home-grid{grid-template-rows:repeat(3,minmax(0,1fr)) 190px;min-height:760px}}
/* Outfit hierarchy: expressive display, clear labels, comfortable reading. */
body.crysta :is(h1,h2,h3,h4,h5,h6){text-wrap:balance;letter-spacing:-.025em}
body.crysta h1,.crysta.legacy #main-content h1{font-weight:800}
body.crysta h2,.crysta.legacy #main-content h2{font-weight:700;line-height:1.2}
body.crysta :is(h3,h4,h5,h6),.crysta.legacy #main-content :is(h3,h4,h5,h6){font-weight:600}
.crysta :is(.site-header,.site-footer,.home-utilities,.project-label>span){font-weight:500}
.crysta :is(.card-label,.contact-form>label,.contact-form legend,.contact-form button,.download-resume,.open-email){font-weight:600}
.crysta :is(.contact-form input,.contact-form textarea,.choice){font-weight:400}
.crysta .approved-bio{font-weight:500;line-height:1.3;letter-spacing:-.02em}
.crysta .marquee{font-weight:700}
.crysta .resume-bio{max-width:68ch;line-height:1.65}
.crysta .project-label h2{font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.crysta .site-header{letter-spacing:0}

.resume .experience-row>div{display:flex;flex-direction:column;min-width:0}.resume .experience-row .timeline-org{font-size:24px;font-weight:700;line-height:1.3;color:var(--ink)}.resume .experience-row h3{font-size:16px;font-weight:400;color:var(--soft);margin-bottom:6px}.resume .experience-row .timeline-org+.timeline-org{margin-top:4px}
@media(max-width:700px){.resume .experience-row .timeline-org{font-size:20px}.resume .experience-row h3{font-size:14px}}

.photography-gallery{margin:0 32px 64px}.photography-gallery h2{font-size:32px;font-weight:700;letter-spacing:-.03em;margin-bottom:28px!important}.photo-gallery-grid{display:flex;flex-wrap:wrap;gap:20px;align-items:start}.photo-gallery-item{display:block;min-width:0;flex:var(--photo-ratio) 1 calc(var(--photo-ratio)*260px)}.photo-gallery-item--wide{flex-basis:100%}.photo-gallery-item img{display:block;width:100%;height:auto;border-radius:12px}.photo-gallery-item:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:12px}@media(max-width:700px){.photography-gallery{margin:0 16px 40px}.photography-gallery h2{font-size:26px;margin-bottom:20px!important}.photo-gallery-grid{gap:16px}.photo-gallery-item{flex-basis:100%}}

/* Mobile: swap Contact and Portrait without changing either grid slot. */
@media (max-width:700px) {
  .home .portfolio-card { grid-row:1; }
  .home .about-card { grid-row:3; }
  .home .portrait-card { grid-column:1; grid-row:2; }
  .home .contact-card { grid-column:2; grid-row:2; }
  .home .tools-card, .home .resume-card { grid-row:4; }
}
@media (min-width:701px) and (max-width:1199px) and (any-pointer:coarse) {
  .home .portfolio-card { grid-column:1/7; grid-row:1; }
  .home .about-card { grid-column:1/7; grid-row:3; }
  .home .tools-card, .home .resume-card { grid-row:4; }
  .home .portrait-card { grid-column:1/5; grid-row:2; }
  .home .contact-card { grid-column:5/7; grid-row:2; }
}
/* Mobile artwork sizing; card dimensions remain unchanged. */
@media (max-width:700px), (max-width:1199px) and (any-pointer:coarse) {
  .home .resume-card .hand-motion { transform:translateY(.4cm) scale(.8); }
  .home .contact-card .hand-motion { transform:translateY(28px) scale(1.25235); }
}
/* Use the recovered mobile spacing for larger cards, without a taller grid. */
@media (max-width:700px) {
  .home .home-grid {
    margin-left:10px; margin-right:10px; gap:6px;
    grid-template-rows:repeat(3,minmax(0,1fr)) 196px;
  }
}
@media (min-width:701px) and (max-width:1199px) and (any-pointer:coarse) {
  .home .home-grid {
    margin-left:10px; margin-right:10px; gap:8px;
    grid-template-rows:repeat(3,minmax(0,1fr)) 208px;
  }
}
@media (max-width:700px), (max-width:1199px) and (any-pointer:coarse) {
  .home .home-utilities { flex-wrap:wrap; row-gap:8px; justify-content:center; }
  .home .home-copyright { order:1; flex-basis:100%; margin-right:0; text-align:center; }
}
@media (max-width:700px), (max-width:1199px) and (any-pointer:coarse) {
  .home .about-card .hand-motion { transform:translateY(.5cm) scale(.9945); }
}
/* Desktop Services: keep the five rotating frames inside their display area. */
@media (min-width:901px) and (hover:hover) and (pointer:fine) {
  .legacy .services-hero-reel { height:320px; background:transparent; }
  .legacy .services-hero-frame { top:9%; left:33%; width:34%; height:82%; }
}
@media (max-width:700px), (max-width:1199px) and (any-pointer:coarse) {
  .legacy .services-hero-reel { background:transparent; border-radius:0; }
}
/* Desktop home: exchange Contact and Services while retaining the grid slots. */
@media (min-width:1200px) {
  .home .contact-card { grid-column:1; grid-row:1/3; }
  .home .about-card { grid-column:1/3; grid-row:3/5; }
}
@media (min-width:701px) and (max-width:1199px) and (hover:hover) and (pointer:fine) {
  .home .contact-card { grid-column:1/4; grid-row:1; }
  .home .about-card { grid-column:1/5; grid-row:2; }
}