@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;800&display=swap');
:root{--ink:#111412;--paper:#f4f5ee;--lime:#d9fa85;--muted:#a5ada5;--line:rgba(255,255,255,.15);--font:'DM Sans',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:105px}body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--font);font-size:16px;line-height:1.6}a{color:inherit;text-decoration:none}button,summary{font:inherit}a,button,summary{-webkit-tap-highlight-color:transparent}::selection{background:var(--lime);color:var(--ink)}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #97b550;outline-offset:6px}.skip{position:fixed;top:-80px;z-index:100;background:var(--lime);color:var(--ink);padding:12px}.skip:focus{top:0}.glass{background:rgba(240,248,239,.065);border:1px solid rgba(255,255,255,.19);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 16px 50px #0002;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px)}.nav{position:absolute;z-index:10;left:4%;right:4%;top:25px;border-radius:18px;height:84px;padding:0 30px;display:flex;align-items:center;justify-content:space-between}.brand{font-family:Manrope,sans-serif;font-weight:800;font-size:38px;line-height:1;letter-spacing:-4px;display:flex;align-items:center}.brand>span:first-child{color:var(--lime)}.brand-name{font:600 11px/1.4 var(--font);letter-spacing:1.3px;margin-left:20px;border-left:1px solid #ffffff40;padding-left:20px}.nav nav{display:flex;gap:38px;align-items:center;font-size:14px}.nav nav a:last-child{background:#ffffff0d;border:1px solid #fff3;border-radius:50px;padding:10px 20px}.nav sup{font-size:10px;color:var(--lime);margin-left:3px}.hero{min-height:810px;position:relative;display:grid;grid-template-columns:1.1fr 1fr;overflow:hidden;padding:185px 6% 60px;isolation:isolate}.hero-grid{position:absolute;inset:0;z-index:-2;background-image:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px);background-size:85px 85px}.hero-copy{position:relative;z-index:2}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:600;margin:0 0 30px}.tiny-cross{color:var(--lime);font-size:21px;margin-right:10px}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:Manrope,var(--font);font-weight:500;letter-spacing:-.055em}h1{font-size:clamp(64px,7.1vw,110px);line-height:1.06;margin:40px 0 27px}em{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.05em}h1 em{color:var(--lime)}.intro{font-size:18px;color:#bfc6bd;max-width:415px;line-height:1.75}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:45px;border-radius:50px;padding:15px 24px;font-size:14px;font-weight:600;transition:transform .25s,background .25s}.button:hover{transform:translateY(-3px)}.button.lime{background:var(--lime);color:var(--ink);margin-top:15px}.button span{font-size:24px;line-height:1}.hero-foot{margin-top:65px;display:flex;gap:38px;font-size:10px;letter-spacing:1.5px;color:#9ba598}.hero-art{position:relative;min-width:0}.orb{position:absolute;width:440px;height:440px;border-radius:50%;top:30px;left:0;background:radial-gradient(ellipse at 45% 40%,#c8f58720,transparent 65%);filter:blur(20px)}.glass-label{position:absolute;z-index:3;bottom:72px;right:0;border-radius:18px;padding:20px 28px;transform:rotate(-5deg);width:300px}.label-index{font-size:10px;letter-spacing:2px;color:#bec7b8}.glass-label p{font-size:24px;line-height:1.3;margin:18px 0 0}.glass-label em{color:var(--lime)}.art-note{position:absolute;right:-25px;top:130px;writing-mode:vertical-rl;font-size:10px;letter-spacing:2.5px;color:#a5afa1}.proof{background:var(--paper);color:var(--ink);display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;padding:36px 6%;gap:30px;border-bottom:1px solid #11141224;align-items:center}.proof p{font-size:14px;margin:0;color:#666d64}.proof strong{color:var(--ink)}.proof>div{border-left:1px solid #11141226;padding-left:35px;display:flex;flex-direction:column}.proof>div strong{font-family:Manrope,sans-serif;font-size:42px;line-height:1.3;font-weight:500;letter-spacing:-2px}.proof>div span{font-size:12px;color:#62695e}.section{padding:100px 6%}.work{background:var(--paper);color:var(--ink)}.section-head{display:grid;grid-template-columns:1fr 1fr;align-items:end;margin-bottom:55px}.section-head .eyebrow{grid-column:1/-1}.section-head h2,h2{font-size:clamp(42px,5vw,72px);line-height:1.12;margin-bottom:0}.section-head>p:last-child{justify-self:end;color:#61675f;font-size:15px;margin:0 0 6px}.about{background:#18201b}.about-intro{max-width:680px;margin:30px 0 0;font-size:21px;color:#b4bdb1}.contact{background:var(--lime);color:var(--ink)}.contact h2{font-size:clamp(60px,8vw,112px)}.email{display:inline-block;font-size:clamp(20px,3vw,36px);margin-top:40px;border-bottom:1px solid #11141266;padding-bottom:8px;letter-spacing:-1px}.footer-bottom{display:flex;justify-content:space-between;gap:20px;font-size:11px;letter-spacing:1px;border-top:1px solid #11141240;margin-top:100px;padding-top:25px}@media(max-width:800px){.nav{top:16px;padding:0 20px;height:70px}.brand-name{display:none}.nav nav{gap:20px;font-size:13px}.nav nav a:last-child{padding:7px 12px}.hero{padding-top:145px;grid-template-columns:1fr;min-height:auto}.hero-copy{z-index:2}h1{font-size:clamp(46px,17vw,76px);margin-top:25px}.hero-art{height:330px}.glass-label{bottom:25px;right:5%;width:255px}.hero-foot{gap:20px;font-size:9px;margin-top:40px}.art-note{right:0;top:25px}.proof{grid-template-columns:1fr 1fr;gap:28px;padding:30px 6%}.proof>div{padding-left:20px}.proof>div strong{font-size:36px}.section{padding:70px 6%}.section-head{display:block}.section-head>p:last-child{margin-top:20px}.footer-bottom{display:grid;grid-template-columns:1fr 1fr;font-size:10px;margin-top:70px}.about-intro{font-size:18px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
.sculpture{position:absolute;width:850px;max-width:none;height:625px;object-fit:cover;left:-205px;top:-80px;mix-blend-mode:screen;transform:translate(var(--mx,0px),var(--my,0px));transition:transform .6s ease;pointer-events:none}.hero-art .orb{display:none}.hero-art{isolation:isolate}.glass-label{background:linear-gradient(130deg,#e0eed220,#25312735)}.featured{background:#fff;border:1px solid #1b27141f;border-radius:24px;margin-bottom:28px;overflow:hidden;box-shadow:0 7px 24px #26331504}.feature-main{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:34px}.feature-copy{padding:12px 6px 0}.project-category{font-size:11px;letter-spacing:1.4px;font-weight:600;color:#63715d;margin-bottom:24px}.feature-copy h3{font-size:46px;line-height:1.1;margin-bottom:20px}.feature-intro{max-width:420px;color:#646d5f;font-size:16px;line-height:1.7}.tags{display:flex;flex-wrap:wrap;gap:6px;margin:22px 0}.tags span{border:1px solid #28351e22;border-radius:5px;padding:4px 9px;font-size:12px;color:#55624c;line-height:1.5;background:#fafbf6}.project-result{display:flex;align-items:center;gap:18px;margin-top:24px;border-top:1px solid #1720151a;padding-top:18px}.project-result strong{font-family:Manrope,sans-serif;font-size:45px;letter-spacing:-2px;font-weight:500;line-height:1.2}.project-result>span{font-size:12px;max-width:145px;line-height:1.5;color:#596351}.diagram{min-height:385px;border-radius:16px;position:relative;padding:24px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.diagram-caption,.diagram-bottom{display:flex;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:1.1px}.diagram-contract{background:radial-gradient(ellipse at 75% 15%,#445432,transparent 65%),#18231c;color:#e1e9db}.diagram-contract .diagram-caption{color:#c4d0bb}.pipeline{padding:16px 5px 20px;display:flex;flex-direction:column;align-items:center}.pipeline-node{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;font-size:14px}.pipeline-node small{font-size:11px;color:#b6c5ab}.node-symbol{font-size:10px;letter-spacing:1px;padding:2px 7px;border:1px solid #e1e9db50;border-radius:3px;line-height:1.5}.connector{font-size:20px;color:#9fba89;line-height:1.3;margin:4px}.node-ai{width:85%;padding:15px;border-radius:12px;position:relative;background:#eeffe00b}.spark{position:absolute;left:20px;top:15px;color:var(--lime);font-size:25px}.pipeline-pair{display:flex;align-items:center;gap:20px;width:100%;justify-content:center}.pipeline-pair .pipeline-node{padding:10px 12px;border:1px solid #d6e7ca25;border-radius:8px;min-width:125px}.diagram-bottom{color:#bfceb4;border-top:1px solid #fff2;padding-top:14px;align-items:center}.diagram-bottom>span:last-child{font-size:12px}.diagram-ads{background:#e9edde;background-image:linear-gradient(#4d632c06 1px,transparent 1px),linear-gradient(90deg,#4d632c06 1px,transparent 1px);background-size:22px 22px;color:#293719}.diagram-ads .diagram-bottom{color:#45572e;border-color:#34481f25}.operator-core{margin:18px auto 12px;text-align:center;width:85%;max-width:350px}.operator-core>span{font-size:10px;letter-spacing:1.5px;color:#5b6b47}.loop-grid{display:grid;grid-template-columns:1fr 30px 1fr;gap:15px 8px;align-items:center;margin-top:15px}.loop-grid>div{background:#ffffffa3;border:1px solid #fff;border-radius:12px;text-align:left;padding:12px 18px;font-size:10px;color:#5b6c4e;box-shadow:0 10px 20px #4b612d08}.loop-grid strong{display:block;font-size:17px;color:#2b3a21;font-weight:500;margin-top:2px}.reversal{display:flex;gap:14px;align-items:center;align-self:center;border-color:#fff;background:#ffffff82;border-radius:10px;padding:10px 20px;margin-bottom:18px;box-shadow:0 7px 18px #3545270b}.reversal-icon{font-size:32px}.reversal strong,.reversal div>span{display:block}.reversal strong{font-size:13px;font-weight:500}.reversal div>span{font-size:11px;color:#657256}.diagram-travel{background:radial-gradient(ellipse at 100% 0,#526a61,transparent 85%),#1a2924;color:#e2ece3}.travel-flow{margin:22px 0;display:flex;flex-direction:column;align-items:center;gap:15px}.mail-node{display:flex;flex-direction:column;text-align:center;gap:5px;padding:13px;width:82%;border-radius:10px}.mail-node>span{font-size:9px;letter-spacing:1px;color:#c5d7c8}.mail-node>strong{font-size:16px;font-weight:400}.source-pair{display:flex;align-items:center;gap:18px;width:100%;justify-content:center}.source-pair>div{display:flex;flex-direction:column;background:#ffffff08;border:1px solid #d6ead625;border-radius:8px;padding:12px;min-width:125px;text-align:center}.source-pair small{font-size:9px;color:#c5d7c8;letter-spacing:1px}.source-pair strong{font-weight:400;font-size:14px;margin-top:5px}.source-pair div>span{font-size:10px;color:#adbdaf}.guardrail{font-size:12px;color:#d8efa2;border:1px solid #b3cf8644;border-radius:50px;padding:6px 20px}.draft-node{font-size:14px;border-top:1px solid #fff2;padding-top:10px;text-align:center}.draft-node>span{display:block;color:#acbdaf;font-size:11px}.case-details>summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;border-top:1px solid #17201515;padding:17px 40px;font-size:14px;font-weight:500;transition:background .2s}.case-details>summary:hover{background:#edf4e1}.toggle-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:32px;height:32px;border:1px solid currentColor;border-radius:50%;font-weight:400;font-size:22px;line-height:1;transition:transform .25s}details[open]>summary .toggle-icon{transform:rotate(45deg)}summary::-webkit-details-marker{display:none}.case-body{padding:32px 40px 40px;max-width:1100px}.case-body h4{font-size:14px;margin:0 0 8px;font-weight:600;color:#344d22}.case-body p{color:#596352;font-size:16px;line-height:1.8;margin-bottom:25px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 36px}.case-body .outcome{border-left:3px solid #aacd6c;padding:8px 22px;background:#f2f6eb;margin-bottom:25px}.case-body .outcome p{margin-bottom:8px}.project-link{display:inline-flex;gap:25px;align-items:center;border-bottom:1px solid #7a8b69;font-size:14px;padding:4px 0}.project-link:hover{color:#486b22}.archive-heading{position:relative;margin:100px 0 35px}.archive-heading .eyebrow{margin-bottom:18px}.archive-heading h3{font-size:42px;line-height:1.2}.archive-heading>span{position:absolute;right:0;bottom:5px;font-size:11px;letter-spacing:1px;color:#697760}.archive{border-top:1px solid #17201535}.archive-item{border-bottom:1px solid #17201535}.archive-item>summary{display:flex;align-items:center;gap:30px;padding:30px 0;list-style:none;cursor:pointer}.archive-number{font-size:13px;color:#727e69;min-width:42px;align-self:flex-start;padding-top:3px}.archive-title{flex:1;display:flex;flex-direction:column}.archive-title .project-category{font-size:10px;margin-bottom:8px}.archive-title strong{font-family:Manrope,sans-serif;font-size:28px;font-weight:500;letter-spacing:-1px}.archive-short{font-size:14px;color:#626e58;margin-top:6px}.archive-item summary:hover strong{color:#607d35}.archive-item summary .toggle-icon{color:#6b7e56;width:42px;height:42px;margin-left:20px}.archive-content{padding-left:72px;max-width:1000px}.archive-content .case-body{padding:15px 0 30px}.source-note{color:#76816e;font-size:12px;margin:28px 0 0}.about-top{display:flex;align-items:center;justify-content:space-between;gap:40px}.about h2 em{color:#bbd6a1}.identity{display:flex;align-items:center;gap:18px;border-radius:15px;padding:20px}.identity img{border-radius:50%;width:76px;height:76px;object-fit:cover;filter:saturate(.75)}.identity strong{display:block;font-size:16px;font-weight:500;margin-bottom:4px}.identity span{display:block;font-size:12px;color:#b2beac}.about-story{display:grid;grid-template-columns:1fr 1fr;gap:65px;margin-top:48px;max-width:1100px}.about-story p{font-size:19px;line-height:1.8;color:#bac4b5}.about-story p:first-child{color:#ecf1e7}.practice-line{display:flex;justify-content:space-between;align-items:center;gap:18px;border-top:1px solid #d6e6cb25;border-bottom:1px solid #d6e6cb25;padding:25px 0;margin:20px 0 90px}.practice-line>span{font-size:11px;color:#a9c18f;display:flex;gap:14px;align-items:center}.practice-line strong{font-size:14px;font-weight:400;color:#e1e9dc}.practice-line i{font-style:normal;color:#8c9b7e}.experience-heading h3,.toolkit h3{font-size:40px;line-height:1.2;margin-bottom:35px}.experience-heading .eyebrow,.toolkit .eyebrow{color:#b0c89a;margin-bottom:15px}.role{border-top:1px solid #ffffff23}.role:last-child{border-bottom:1px solid #ffffff23}.role summary{display:grid;grid-template-columns:190px 1fr 210px 32px;gap:24px;list-style:none;align-items:center;padding:25px 0;cursor:pointer}.role-date{font-size:12px;color:#a8b29f}.role strong{display:block;font-size:20px;font-weight:450;letter-spacing:-.4px}.company{display:block;font-size:13px;color:#aebba5;margin-top:4px}.role-place{font-size:12px;color:#a8b29f;text-align:right}.role .toggle-icon{border-color:#a1b19180;color:#bad39e;width:28px;height:28px;font-size:19px}.role>p{margin:0 60px 25px 214px;max-width:700px;color:#b3c0aa;font-size:16px}.role summary:hover strong{color:var(--lime)}.toolkit{margin:90px 0 60px}.skills-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}.skills-grid>div{border-top:1px solid #e0efd22f;padding-top:16px}.skill-number{font-size:11px;color:#b7c5aa}.skills-grid h4{font:500 27px Manrope,sans-serif;margin:20px 0 15px;letter-spacing:-1px}.skills-grid p{font-size:14px;color:#adbaa4;line-height:1.9}.education{border:1px solid #ffffff25;border-radius:12px;background:#ffffff03}.education>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:20px 25px;cursor:pointer;font-size:16px}.education .toggle-icon{width:27px;height:27px;font-size:18px;color:#aec599}.education-grid{padding:12px 25px;display:grid;grid-template-columns:1fr 1fr;gap:25px}.education-grid strong{display:block;font-size:14px;font-weight:500}.education-grid span{display:block;font-size:13px;color:#a9b79f;margin-top:5px}.education-grid a{font-size:12px;color:var(--lime)}.languages{font-size:13px;color:#bbc9b1;padding:0 25px;margin-top:15px}.nav nav a:hover{color:var(--lime)}.contact .eyebrow{color:#455d25}.contact .email:hover{color:#456222}.hero-foot span,.label-index,.art-note,.diagram-caption,.diagram-bottom,.project-category,.footer-bottom,.archive-title .project-category,.mail-node>span,.source-pair small{font-size:12px}.hero-foot{gap:20px;letter-spacing:1px}.brand-name{font-size:12px;letter-spacing:.8px}.node-symbol,.pipeline-node small,.reversal div>span,.source-pair div>span,.draft-node>span,.operator-core>span,.loop-grid>div,.skill-number{font-size:12px}.diagram{min-height:420px}.diagram-caption,.diagram-bottom{letter-spacing:.7px}.mail-node>span,.source-pair small{font-size:11px}.diagram-bottom>span{font-size:10px}.hero-art .art-note{font-size:10px}.reversal strong{font-size:14px}.pipeline-node{font-size:15px}.project-category{font-size:11px}.archive-heading>span{font-size:12px}@media(min-width:1600px){.hero,.section{padding-left:max(6%,calc((100vw - 1440px)/2));padding-right:max(6%,calc((100vw - 1440px)/2))}.hero{min-height:870px}.sculpture{left:-150px}.nav{left:max(4%,calc((100vw - 1520px)/2));right:max(4%,calc((100vw - 1520px)/2))}}@media(max-width:1100px){.feature-main{gap:20px;padding:24px}.feature-copy h3{font-size:40px}.diagram{padding:20px 16px}.pipeline-pair .pipeline-node,.source-pair>div{min-width:105px}.about-top{align-items:flex-start}.identity{padding:15px;gap:12px}.identity img{width:58px;height:58px}.identity strong{font-size:14px}.role summary{grid-template-columns:150px 1fr 150px 28px;gap:20px}.role>p{margin-left:170px}.diagram-caption{font-size:10px}.hero-foot{font-size:10px;flex-wrap:wrap;gap:8px 24px}.hero-foot span{font-size:10px}.practice-line strong{font-size:13px}.practice-line>span{gap:8px}.skills-grid{grid-template-columns:1fr 1fr}.sculpture{left:-230px}.art-note{display:none}}@media(max-width:800px){.hero{padding-bottom:20px}.hero-art{height:340px}.sculpture{width:680px;height:455px;left:50%;top:-65px;transform:translateX(-50%);object-fit:contain}.glass-label{bottom:30px;right:0;padding:17px 23px;width:265px}.glass-label p{font-size:24px}.hero-foot{margin-top:35px}.feature-main{grid-template-columns:1fr;padding:24px;gap:26px}.feature-copy{padding:0}.feature-copy h3{font-size:43px}.feature-intro{max-width:100%}.diagram{min-height:385px}.diagram-caption{font-size:11px}.project-result{margin-top:20px}.project-result strong{font-size:38px}.project-result>span{max-width:220px}.case-details>summary{padding:17px 24px}.case-body{padding:25px 24px}.detail-grid{grid-template-columns:1fr;gap:0}.archive-heading{margin-top:65px}.archive-heading h3{font-size:34px}.archive-heading>span{position:static}.archive-item>summary{gap:14px;padding:24px 0}.archive-number{min-width:22px;font-size:12px}.archive-title strong{font-size:24px}.archive-short{font-size:14px}.archive-item summary .toggle-icon{width:31px;height:31px;margin-left:0;font-size:20px}.archive-content{padding-left:0}.about-top{display:block}.identity{margin-top:30px;display:inline-flex;padding:15px 20px}.identity img{width:65px;height:65px}.identity strong{font-size:16px}.about-story{grid-template-columns:1fr;gap:0;margin-top:28px}.about-story p{font-size:18px}.practice-line{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:65px}.practice-line i{display:none}.role summary{grid-template-columns:1fr 28px;gap:8px;padding:23px 0}.role-date{grid-column:1;grid-row:1}.role summary>span:nth-child(2){grid-column:1;grid-row:2}.role-place{grid-column:1;grid-row:3;text-align:left;font-size:12px}.role summary>.toggle-icon{grid-column:2;grid-row:1/4}.role strong{font-size:20px}.role>p{margin:0 0 25px}.toolkit{margin-top:65px}.experience-heading h3,.toolkit h3{font-size:33px}.skills-grid{gap:24px}.skills-grid h4{font-size:24px}.education-grid{grid-template-columns:1fr}.email{letter-spacing:-.7px}.footer-bottom{letter-spacing:.4px}.footer-bottom>span,.footer-bottom>a{font-size:10px}.diagram-bottom>span{font-size:10px}.source-note{font-size:12px}}@media(max-width:380px){h1{font-size:62px}.hero .eyebrow{font-size:10px;letter-spacing:1.5px}.nav{padding:0 14px}.nav nav{gap:13px}.brand{font-size:32px}.feature-main{padding:20px}.diagram{padding:18px 12px}.pipeline-pair,.source-pair{gap:10px}.source-pair>div{min-width:100px}.feature-copy h3{font-size:37px}.skills-grid{grid-template-columns:1fr}.email{font-size:19px}}
/* Blend the glass into the opening instead of exposing the image bounds. */
.hero-art{isolation:auto}.sculpture{mask-image:radial-gradient(ellipse at 58% 48%,#000 42%,transparent 74%);-webkit-mask-image:radial-gradient(ellipse at 58% 48%,#000 42%,transparent 74%)}
@media(max-width:800px){.node-ai .spark{display:none}.pipeline-pair .pipeline-node{flex:1;min-width:0}.pipeline-pair{gap:12px}.pipeline-node small{line-height:1.5}}

/* ---- screenshots, collections and cards ---- */
.shot-frame{min-height:385px;border-radius:16px;overflow:hidden;position:relative;background:#e7ebe0;border:1px solid #1b27141f}
.shot-frame .shot-img{width:100%;height:100%;min-height:385px;object-fit:cover;object-position:top center;display:block}
.shot-tag{position:absolute;left:14px;bottom:14px;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;padding:6px 11px;border-radius:50px;background:#111412d9;color:#eef3e7;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.shot-frame-blank,.shot-blank{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:radial-gradient(ellipse at 70% 20%,#e4ecd2,transparent 60%),#eef1e7}
.shot-blank{width:100%;height:100%}
.shot-mark{font-family:Manrope,sans-serif;font-size:40px;font-weight:500;letter-spacing:-3px;color:#5c6a51}
.shot-kind{font-size:10px;letter-spacing:2px;color:#5c6653}

.collection{margin-top:54px}
.collection-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 26px;padding-bottom:18px;margin-bottom:26px;border-bottom:1px solid #1b271426}
.collection-head h3{font-size:30px;margin:0;letter-spacing:-.05em}
.collection-head p{margin:0;font-size:14px;color:#646d5f;flex:1 1 320px;line-height:1.6}
.collection-head span{font-size:10px;letter-spacing:1.6px;color:#656f5e;white-space:nowrap}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(325px,1fr));gap:20px;align-items:start}
.card{background:#fff;border:1px solid #1b27141f;border-radius:18px;overflow:hidden;box-shadow:0 7px 24px #26331504;transition:box-shadow .25s,transform .25s}
.card:hover{box-shadow:0 12px 34px #2633150f;transform:translateY(-2px)}
.card[open]{grid-column:1/-1;transform:none}
.card>summary{list-style:none;cursor:pointer;display:block}
.card>summary::-webkit-details-marker{display:none}
.card .shot{display:block;aspect-ratio:16/10;overflow:hidden;background:#e7ebe0;border-bottom:1px solid #1b271418}
.card .shot-img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .5s}
.card:hover .shot-img{transform:scale(1.025)}
.card[open] .shot{aspect-ratio:auto;max-height:430px}
.card-body{display:block;padding:20px 22px 22px}
.card-body .project-category{display:block;margin-bottom:12px}
.card-body strong{display:block;font-family:Manrope,sans-serif;font-size:21px;font-weight:550;letter-spacing:-.04em;line-height:1.25;margin-bottom:9px}
.card-short{display:block;font-size:14px;line-height:1.6;color:#646d5f}
.card-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:17px}
.card .toggle-icon{flex:none}
.card-content{padding:0 22px 8px;border-top:1px solid #1b271418;margin:0 0 4px}
.card-content .tags{margin:20px 0 4px}

.status{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;padding:5px 10px;border-radius:50px;border:1px solid #1b271433;color:#5c6a51;background:#fafbf6;white-space:nowrap}
.status-live{border-color:#7ea03f5c;background:#f2f9e2;color:#4e6a1f}
.status-shipped{border-color:#7ea03f3d;background:#f6faee;color:#576d3b}
.status-in-progress{border-color:#b9903f4d;background:#fdf7e8;color:#7d611f}
.status-prototype,.status-internal{border-color:#1b271426;background:#f6f7f2;color:#64705c}
.case-note{font-size:13px;color:#77816f;font-style:italic;margin:16px 0 0}

@media(max-width:900px){
  .shot-frame,.shot-frame .shot-img{min-height:250px}
  .collection-head h3{font-size:25px}
  .grid{grid-template-columns:1fr;gap:16px}
  .card[open] .shot{max-height:260px}
}

/* open-card refinements */
.card[open] .shot{aspect-ratio:auto;height:330px}
.card[open] .shot-img{height:100%;object-position:top center}
.card-content .case-body{padding:4px 0 26px;max-width:none}
.card-content .detail-grid{grid-template-columns:1fr 1fr;gap:0 36px}
.card-content .case-date{margin-top:0}
@media(max-width:900px){
  .card[open] .shot{height:200px}
  .card-content .detail-grid{grid-template-columns:1fr}
}
.card .shot{position:relative}.card .shot .shot-tag{left:12px;bottom:12px;font-size:9px;padding:5px 9px}

/* focus: cards and case studies clip their own outline, so draw it inside */
.card>summary:focus-visible,.case-details>summary:focus-visible{outline-offset:-3px}
.source-note{color:#5f6a58}

/* featured stat: the number is the hook, so give it room and let the label breathe */
.project-result{gap:22px;margin-top:28px;padding-top:22px;align-items:baseline}
.project-result strong{font-size:56px;letter-spacing:-3px;line-height:1}
.project-result>span{font-size:13px;max-width:260px;line-height:1.45;color:#4e5847}
@media(max-width:900px){
  .project-result strong{font-size:42px;letter-spacing:-2px}
  .project-result>span{max-width:none;font-size:12.5px}
}

/* cards are links to their own case study now, not inline accordions */
.card{display:block;text-decoration:none;color:inherit}
.card .toggle-icon{border-color:#a1b19180;color:#5f6b53;transition:transform .25s,background .25s}
.card:hover .toggle-icon{transform:translateX(3px);background:#eef3e4}
.case-open{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:22px 34px;border-top:1px solid #1b271418;font-size:15px;font-weight:550;
  transition:background .25s}
.case-open:hover{background:#f7f9f2}
.case-open .toggle-icon{transition:transform .25s}
.case-open:hover .toggle-icon{transform:translateX(4px)}
@media(max-width:900px){.case-open{padding:18px 22px}}

/* social profiles — also the rel="me" links that tie the entity together.
   These sit in the lime contact panel, so they are inked, not lightened. */
.socials{display:flex;flex-wrap:wrap;gap:10px;margin:48px 0 0;padding-top:30px;border-top:1px solid #11141230}
.socials a{font-size:13px;font-weight:550;padding:10px 18px;border-radius:50px;
  border:1px solid #11141242;color:var(--ink);background:#ffffff2e;
  transition:background .25s,border-color .25s,transform .25s}
.socials a:hover{background:var(--ink);border-color:var(--ink);color:var(--lime);transform:translateY(-2px)}
@media(max-width:700px){.socials{gap:8px;margin-top:36px}.socials a{font-size:12px;padding:8px 14px}}


/* ---- the reel: every project on a rolling arch ---- */
.reel{position:relative;height:340vh;margin:0 -6% 40px}
.reel-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.reel-head{position:absolute;top:11%;left:0;right:0;z-index:950;text-align:center;padding:0 6%;pointer-events:none}
.reel-head .eyebrow{color:#6d7568;margin-bottom:14px}
.reel-head h2{font-size:clamp(34px,4.4vw,62px);line-height:1.08;margin:0 0 14px}
.reel-head h2 em{color:#7ea03f}
.reel-hint{margin:0;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#7b836f}
.reel-track{position:absolute;inset:0;transform-style:preserve-3d}
.reel-card{position:absolute;left:50%;top:50%;width:150px;height:188px;margin:-94px 0 0 -75px;
  will-change:transform,opacity;transform-origin:50% 50%;text-decoration:none;color:inherit;perspective:900px}
.reel-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.reel-card:hover .reel-inner,.reel-card:focus-visible .reel-inner{transform:rotateY(180deg)}
.reel-face{position:absolute;inset:0;border-radius:15px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 12px 30px #11141226,0 2px 6px #1114121f;border:1px solid #11141216;background:var(--paper)}
.reel-front{display:flex;flex-direction:column}
.reel-shot{display:block;height:104px;background:#e9ece2;position:relative;flex:none}
.reel-img{width:100%;height:100%;object-fit:cover;display:block}
.reel-mark{position:absolute;inset:0;display:grid;place-items:center;font-family:Manrope,sans-serif;
  font-size:26px;font-weight:700;letter-spacing:-1px;color:#8a937f;background:linear-gradient(150deg,#eef1e7,#e2e7da)}
.reel-meta{display:block;padding:10px 11px 0;min-width:0}
.reel-meta strong{display:block;font-size:12.5px;font-weight:600;line-height:1.25;letter-spacing:-.01em;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.reel-meta span{display:block;margin-top:5px;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#7b836f;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.reel-back{transform:rotateY(180deg);background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;justify-content:center;gap:9px;padding:16px 14px;text-align:center}
.reel-back-kick{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.reel-back strong{font-size:13px;font-weight:600;line-height:1.3}
.reel-back-go{font-size:10px;color:#b9c3b3;line-height:1.4}
.reel-card:focus-visible{outline:3px solid #97b550;outline-offset:5px;border-radius:15px}
@media(max-width:760px){.reel{height:300vh}.reel-card{width:122px;height:156px;margin:-78px 0 0 -61px}.reel-shot{height:84px}}

/* No motion: no runway, no sticky, no transforms — the same cards as a plain grid. */
@media(prefers-reduced-motion:reduce){
  .reel{height:auto;margin:0 0 50px}
  .reel-stage{position:static;height:auto;overflow:visible;display:block}
  .reel-head{position:static;text-align:left;padding:0;margin-bottom:34px}
  .reel-track{position:static;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px}
  .reel-card{position:static;width:auto;height:auto;margin:0;perspective:none}
  .reel-inner{position:static;transform:none!important}
  .reel-face{position:static;inset:auto}
  .reel-back{display:none}
  .reel-shot{height:104px}
  .reel-meta{padding:11px 12px 13px}
}

/* ---- testimonials: three columns drifting at different speeds ---- */
.praise{background:#eef1e7;color:var(--ink);padding:110px 6% 120px}
.praise .section-head{margin-bottom:54px}
.praise h2{font-size:clamp(38px,4.6vw,64px);line-height:1.1;margin:22px 0 18px}
.praise h2 em{color:#4f6b23}
.praise .section-head>p.lede{font-size:17px;color:#5a6551;max-width:52ch;margin:0;justify-self:start}
.praise .eyebrow{color:#5a6452}
.marquee{display:flex;justify-content:center;gap:22px;max-height:720px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent)}
.mcol{flex:0 1 350px;min-width:0}
.mtrack{display:flex;flex-direction:column;gap:22px;animation:drift-up var(--dur,26s) linear infinite;will-change:transform}
@keyframes drift-up{from{transform:translateY(0)}to{transform:translateY(-50%)}}

.quote{border-radius:22px;padding:30px 30px 26px;
  background:linear-gradient(152deg,rgba(217,250,133,.62),rgba(198,236,120,.30));
  border:1px solid rgba(255,255,255,.62);
  backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 14px 34px rgba(17,20,18,.10)}
.quote p{margin:0;font-size:15.5px;line-height:1.7;color:#1b2417}
.quote figcaption{display:flex;align-items:center;gap:13px;margin-top:22px;padding-top:20px;border-top:1px solid rgba(17,20,18,.14)}
.qavatar{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  font-family:Manrope,sans-serif;font-size:14px;font-weight:600;letter-spacing:-.5px;
  background:rgba(255,255,255,.55);border:1px solid rgba(17,20,18,.12);color:#31401f}
.qwho{min-width:0}
.qwho strong{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.02em;color:#141a12}
.qwho span{display:block;font-size:12.5px;color:#4e5a46;line-height:1.45;margin-top:2px}
.quote figcaption{display:flex;align-items:center;gap:13px;margin-top:22px;padding-top:20px;border-top:1px solid #ffffff14}
.praise-note{margin:44px auto 0;font-size:12px;color:#57624f;text-align:center;max-width:60ch;line-height:1.6}
.praise-note a{border-bottom:1px solid rgba(17,20,18,.3)}
/* Below 1100px three drifting columns no longer fit. The original design hid the
   surplus columns, which is fine for interchangeable praise but not here: each card
   is a distinct piece of evidence, and hiding columns dropped 10 of 16 on a phone.
   Flatten to a single stacked list instead, so every card stays reachable. */
.praise-more{display:none;margin:34px auto 0;padding:13px 26px;border-radius:50px;
  background:rgba(255,255,255,.6);border:1px solid rgba(17,20,18,.16);color:var(--ink);
  font-family:var(--font);font-size:13px;font-weight:600;line-height:1;cursor:pointer;transition:background .2s}
.praise-more:hover{background:rgba(255,255,255,.9)}
/* only bites where the columns flatten; the desktop drift is capped by the mask */
@media(max-width:1100px){.marquee.clamped .mtrack>.quote:nth-of-type(n+5){display:none}.praise-more{display:block}}
@media(prefers-reduced-motion:reduce){.marquee.clamped .mtrack>.quote:nth-of-type(n+5){display:none}.praise-more{display:block}}
@media(max-width:1100px){
  .marquee{flex-direction:column;align-items:center;max-height:none;-webkit-mask-image:none;mask-image:none}
  .mcol,.mtrack{display:contents}
  .quote.dup{display:none}
  .quote{width:100%;max-width:560px}
}
@media(max-width:760px){.praise{padding:80px 6% 90px}.quote{padding:26px 24px 22px}}
@media(prefers-reduced-motion:reduce){.mtrack{animation:none}.marquee{max-height:none;-webkit-mask-image:none;mask-image:none;align-items:start}.quote.dup{display:none}}

/* the identity statement — the sentence an assistant can quote */
.about-lead{font-size:18px;line-height:1.7;color:#e3e9dc;border-left:2px solid var(--lime);padding-left:22px;margin-bottom:26px}
@media(max-width:700px){.about-lead{font-size:16.5px;padding-left:16px}}

/* ---- hero: full-bleed, type anchored to the floor ------------------------- */
/* Appended last and written at .hero <descendant> specificity so it beats the
   earlier hero rules, including the ones inside media queries — media queries add
   no specificity, so (0,2,0) wins over (0,1,0) wherever it appears. */
.hero{position:relative;display:block;min-height:100vh;min-height:100svh;
  padding:0;overflow:hidden;isolation:isolate;background:var(--ink);color:var(--paper)}
.hero .hero-art{position:absolute;inset:0;z-index:-3;height:auto;width:auto;min-width:0;isolation:auto}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;
  opacity:1;pointer-events:none;
  transform:translate3d(var(--mx,0px),var(--my,0px),0) scale(1.04);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity 1.1s ease}
/* the poster is the video's own graded first frame, so there is no colour jump when it starts */
.hero-video[poster]{background:var(--ink) center/cover no-repeat}
.hero .orb{position:absolute;top:auto;left:50%;bottom:-24%;width:min(120vw,1500px);height:min(70vh,760px);
  margin-left:min(-60vw,-750px);border-radius:50%;filter:blur(40px);
  background:radial-gradient(ellipse at 50% 55%,#d9fa8526,transparent 66%)}
.hero-noise{position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-size:170px 170px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,#111412b8 0%,#11141240 26%,#11141200 44%,#111412cc 76%,#111412 100%)}

.hero-bottom{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:grid;grid-template-columns:minmax(0,7.4fr) minmax(0,4.6fr);gap:34px;align-items:end;
  padding:0 5% 36px}
.hero .hero-lead{min-width:0}
.hero .eyebrow{color:#a9b3a1;margin:0 0 20px}
.hero .tiny-cross{color:var(--lime)}
.hero-name{font-family:Manrope,var(--font);font-weight:500;color:var(--paper);margin:0;
  font-size:clamp(54px,13.6vw,244px);line-height:.85;letter-spacing:-.07em;
  display:flex;flex-wrap:wrap;align-items:baseline}
.hero-name .w{display:inline-block;position:relative;white-space:pre}
.hero-name .w:last-child{margin-right:0}
.hero-name .ast{position:absolute;top:.1em;right:-.36em;font-size:.26em;color:var(--lime);letter-spacing:0}

.hero-side{display:flex;flex-direction:column;align-items:flex-start;gap:17px;
  justify-self:end;max-width:430px;padding-bottom:12px}
.hero .hero-side .intro{margin:0;max-width:42ch;font-size:15.5px;line-height:1.5;color:#c9d1c3}
.hero .hero-side .intro em{color:var(--lime);font-family:Georgia,'Times New Roman',serif}
.hero-cta{display:inline-flex;align-items:center;gap:11px;background:var(--lime);color:var(--ink);
  border-radius:50px;padding:5px 5px 5px 21px;font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  transition:gap .25s cubic-bezier(.2,.7,.2,1)}
.hero-cta:hover{gap:17px}
.cta-dot{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--ink);color:var(--lime);font-size:15px;transition:transform .25s}
.hero-cta:hover .cta-dot{transform:scale(1.09)}
.hero-note{margin:0;font-size:11.5px;letter-spacing:.055em;color:#9aa492;line-height:1.5}
.ast-key{color:var(--lime);margin-right:4px}

/* word pull-up: the text is in the HTML; motion is added only once the script runs */
.hero-name[data-pullup] .w{opacity:0;transform:translateY(.42em)}
.hero-name.pull-in .w{opacity:1;transform:none;
  transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d,0s)}

@media(max-width:1000px){
  .hero-bottom{grid-template-columns:1fr;gap:24px;padding:0 6% 30px}
  .hero-side{justify-self:start;max-width:none;padding-bottom:0}
  .hero-name{font-size:clamp(48px,16.5vw,150px)}
  .hero .eyebrow{margin-bottom:14px}
}
@media(max-width:560px){
  .hero .hero-side .intro{font-size:14.5px}
  .hero-name{letter-spacing:-.055em}
}
/* Nothing here is motion-dependent: without it the words are simply present. */
@media(prefers-reduced-motion:reduce){
  .hero-name[data-pullup] .w{opacity:1;transform:none}
  .hero-video{transform:none}
}

/* ---- the button on the video, and the bar that arrives after it ----------- */
/* Glass over the footage, so it reads as sitting inside the video rather than on
   a bar above it. */
.hero-connect{position:absolute;z-index:6;top:clamp(18px,3.2vw,38px);right:clamp(16px,5%,62px);
  display:inline-flex;align-items:center;gap:10px;padding:9px 9px 9px 20px;border-radius:50px;
  font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--paper);
  background:rgba(244,245,238,.10);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 34px rgba(0,0,0,.28);
  transition:background .25s,gap .25s cubic-bezier(.2,.7,.2,1)}
.hero-connect:hover{background:rgba(244,245,238,.19);gap:14px}
.connect-dot{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--lime);color:var(--ink);font-size:13px;font-weight:700;flex:none;transition:transform .25s}
.hero-connect:hover .connect-dot,.sitebar .connect:hover .connect-dot{transform:scale(1.1)}

.sitebar{position:fixed;z-index:60;top:14px;left:50%;width:min(1180px,92vw);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:9px 9px 9px 15px;border-radius:50px;
  background:rgba(17,20,18,.74);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 16px 44px rgba(0,0,0,.34);
  transform:translate(-50%,-150%);opacity:0;pointer-events:none;
  transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .35s ease}
.sitebar.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.sitebar-id{display:inline-flex;align-items:center;gap:11px;color:var(--paper);min-width:0}
.sitebar-id strong{font-family:Manrope,var(--font);font-size:15px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.sitebar .connect{display:inline-flex;align-items:center;gap:9px;padding:7px 7px 7px 18px;border-radius:50px;
  font-size:13.5px;font-weight:600;color:var(--ink);background:var(--lime);flex:none;
  transition:gap .25s cubic-bezier(.2,.7,.2,1)}
.sitebar .connect:hover{gap:13px}
.sitebar .connect .connect-dot{width:28px;height:28px;background:var(--ink);color:var(--lime)}

/* the mark: a mesh built from drifting blobs clipped to the shape, since the shader
   library the reference uses is a React dependency and this renders at ~22px anyway */
.mark{height:30px;width:auto;flex:none;display:block;overflow:visible}
.mark-mesh{animation:mark-drift 14s ease-in-out infinite alternate;transform-origin:50% 50%}
.mark .mb1{animation:mark-b1 11s ease-in-out infinite alternate}
.mark .mb2{animation:mark-b2 13s ease-in-out infinite alternate}
.mark .mb3{animation:mark-b3 9s ease-in-out infinite alternate}
@keyframes mark-drift{from{transform:rotate(-6deg) scale(1)}to{transform:rotate(7deg) scale(1.08)}}
@keyframes mark-b1{from{transform:translate(0,0)}to{transform:translate(42px,30px)}}
@keyframes mark-b2{from{transform:translate(0,0)}to{transform:translate(-46px,-34px)}}
@keyframes mark-b3{from{transform:translate(0,0)}to{transform:translate(26px,-40px)}}
/* eyes follow the pointer as a group; each blinks on its own */
.mark-eyes{transform:translate(var(--ex,0px),var(--ey,0px));transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.mark .eye{transform-box:fill-box;transform-origin:center;animation:mark-blink 5.2s infinite ease-in-out}
.mark .eye:nth-child(2){animation-delay:.06s}
@keyframes mark-blink{0%,92%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.08)}}

@media(max-width:700px){
  .sitebar{top:10px;width:94vw;padding:7px 7px 7px 13px}
  .sitebar-id strong{font-size:14px}
  .sitebar .connect span:first-child{display:none}
  .sitebar .connect{padding:7px;gap:0}
  .mark{height:26px}
  .hero-connect{font-size:13px;padding:8px 8px 8px 16px}
}
/* motion off: the bar still arrives, because that is navigation, not decoration —
   it just stops sliding, and the mark holds still */
@media(prefers-reduced-motion:reduce){
  .sitebar{transition:opacity .2s ease}
  .sitebar.on{transform:translate(-50%,0)}
  .mark-mesh,.mark .mb1,.mark .mb2,.mark .mb3,.mark .eye{animation:none}
  .mark-eyes{transition:none;transform:none}
}