@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--bg:#f5f4ef;--ink:#181c19;--muted:#666c66;--line:#d9dbd5;--lime:#dbf475;--forest:#1e3028;--soft:#eceee6;--radius:16px;--max:1440px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;font-size:16px;-webkit-font-smoothing:antialiased}::selection{background:var(--lime);color:var(--ink)}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{cursor:pointer}img{max-width:100%}section[id]{scroll-margin-top:94px}.container{width:min(calc(100% - 96px),var(--max));margin-inline:auto}.micro{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}.muted{color:var(--muted)}.display,.section-title,h1,h2,h3{font-family:'Space Grotesk',Arial,sans-serif;letter-spacing:-.055em}.site-header{position:sticky;top:0;z-index:50;background:rgba(245,244,239,.93);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.nav{display:flex;align-items:center;justify-content:space-between;min-height:77px;gap:20px}.brand{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;letter-spacing:-.055em}.brand span{display:inline-block;width:9px;height:9px;background:#82ad3c;border-radius:50%;margin-left:3px}.nav-links{display:flex;gap:29px;align-items:center;font-size:13px;font-weight:700}.nav-links a{transition:opacity .2s}.nav-links a:hover{opacity:.55}.nav-cta,.pill-link{background:var(--ink);color:#fff;border-radius:999px;padding:13px 20px;white-space:nowrap;display:inline-flex;align-items:center;gap:18px;font-weight:700;font-size:13px}.nav-cta:hover,.pill-link:hover{background:#375343}.menu-toggle{display:none;border:1px solid var(--line);background:transparent;border-radius:12px;padding:11px}.hero{position:relative;overflow:hidden;padding:84px 0 0}.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 28px}.eyebrow:before{content:'';width:9px;height:9px;background:#89b442;border-radius:50%}.hero h1{font-size:clamp(90px,13.5vw,218px);line-height:.76;letter-spacing:-.092em;margin:0 0 33px;font-weight:700;white-space:nowrap}.hero h1 .second{display:block;margin-left:clamp(30px,9vw,150px)}.hero h1 .period{color:#93bd50}.hero-bottom{display:grid;grid-template-columns:1fr minmax(300px,440px);gap:40px;align-items:end;padding-bottom:60px}.hero-bottom .left-note{max-width:265px;font-size:12px;line-height:1.6;color:var(--muted)}.hero-statement{font-family:'Space Grotesk';font-size:clamp(22px,2.65vw,38px);line-height:1.21;letter-spacing:-.045em;margin:0}.hero-actions{display:flex;gap:10px;margin-top:25px;flex-wrap:wrap}.outlined{background:transparent;border:1px solid #a6aaa3;color:var(--ink)}.outlined:hover{background:var(--soft)}.hero-art{height:155px;border-top:1px solid var(--line);position:relative;overflow:hidden}.art-orbit{position:absolute;width:360px;height:360px;border:1px solid #cfd2c8;border-radius:50%;top:25px;left:calc(50% - 180px)}.art-orbit:before,.art-orbit:after{content:'';position:absolute;border:1px solid #d7d9d1;border-radius:50%;inset:24px}.art-orbit:after{inset:49px}.art-dot{position:absolute;width:15px;height:15px;background:#b2da65;border-radius:50%;left:calc(50% + 124px);top:37px}.logos-wrap{background:#e9ece3;padding:29px 0 33px;border-top:1px solid #d8ddd3;border-bottom:1px solid #d8ddd3}.logos-inner{display:flex;justify-content:space-between;gap:24px;align-items:center}.logos-wrap .micro{color:#687265;min-width:150px}.logos{display:grid;grid-template-columns:repeat(4,1fr);align-items:center;gap:32px;flex:1}.logo-word{justify-self:center;background:var(--forest);opacity:.64;-webkit-mask:no-repeat center/contain;mask:no-repeat center/contain;transition:opacity .25s ease}.logo-word.cisco{width:116px;height:48px;-webkit-mask-image:url(assets/images/cisco.svg);mask-image:url(assets/images/cisco.svg)}.logo-word.snap{width:29px;height:29px;-webkit-mask-image:url(assets/images/snap.svg);mask-image:url(assets/images/snap.svg)}.logo-word.meta{width:39px;height:39px;-webkit-mask-image:url(assets/images/meta.svg);mask-image:url(assets/images/meta.svg)}.logo-word.logi{width:88px;height:44px;-webkit-mask-image:url(assets/images/logitech.svg);mask-image:url(assets/images/logitech.svg)}.section{padding:122px 0;border-bottom:1px solid var(--line)}.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;margin-bottom:56px}.section-head .micro{padding-top:13px}.section-title{font-size:clamp(58px,7.2vw,120px);line-height:.96;margin:0;font-weight:600}.intro-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.5fr);gap:7vw}.about-lead{font-family:'Space Grotesk';font-size:clamp(29px,3.5vw,53px);line-height:1.2;letter-spacing:-.055em;margin:0 0 28px}.about-copy{max-width:650px;line-height:1.85;font-size:16px;color:#566058}.stats{border-left:1px solid var(--line);padding-left:45px}.stat{padding:22px 0 30px;border-bottom:1px solid var(--line)}.stat:first-child{padding-top:0}.stat strong{display:block;font-family:'Space Grotesk';font-size:clamp(45px,5vw,76px);line-height:1.08;letter-spacing:-.06em}.stat span{font-size:12px;color:var(--muted)}.career-heading{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:32px}.career-heading p{max-width:370px;line-height:1.6;color:var(--muted);margin:0}.timeline{border-top:1px solid var(--ink)}.job{display:grid;grid-template-columns:190px minmax(160px,.55fr) minmax(0,1fr);gap:25px;padding:31px 0 35px;border-bottom:1px solid var(--line)}.job .date{font-size:13px;color:#687169;padding-top:8px}.job h3{font-size:clamp(24px,2.9vw,40px);margin:0 0 5px;line-height:1;letter-spacing:-.06em}.job-role{font-size:13px;color:#566058;line-height:1.5;max-width:240px}.job-desc{font-size:14px;line-height:1.85;color:#454c45;max-width:700px}.job-desc p{margin:0}.job-desc ul{margin:10px 0 0;padding-left:17px}.job-desc li{margin-bottom:5px}.resume-action{display:flex;justify-content:flex-end;margin-top:24px}.dark-section{background:var(--forest);color:#f7f8f0;border-color:#33463c}.dark-section .muted{color:#a9b8a9}.dark-section .section-head .micro{color:#b5c1b3}.projects-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.project{border:1px solid #4e5d52;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;min-height:455px;background:#273c31}.project-visual{height:235px;position:relative;overflow:hidden;background:#33463a}.project-visual .field{position:absolute;inset:0;background:radial-gradient(circle at 72% 35%,#c4e375 0 2%,transparent 2.2%),repeating-radial-gradient(circle at 65% 38%,transparent 0 29px,#77907960 30px 31px,transparent 32px 58px)}.project-visual:before{content:'';position:absolute;width:300px;height:300px;left:-60px;top:62px;border-radius:50%;background:#c1df73;filter:blur(1px);opacity:.95}.project:nth-child(2) .project-visual{background:#cbd7ba}.project:nth-child(2) .project-visual:before{background:#21372d;left:60%;top:-105px}.project:nth-child(3) .project-visual{background:#dfe3d5}.project:nth-child(3) .project-visual:before{background:#94b66e;width:450px;height:450px;left:-120px;top:80px}.project:nth-child(4) .project-visual{background:#a0b999}.project:nth-child(4) .project-visual:before{background:#e9efcf;left:50%;top:55px}.project-code{position:absolute;right:18px;top:17px;font-size:10px;letter-spacing:.12em;font-weight:700;color:#1d2b22;z-index:1}.project-inner{padding:27px 29px 30px;display:flex;flex-direction:column;flex:1}.project-inner h3{font-size:29px;line-height:1.08;margin:10px 0 11px}.project-inner p{font-size:14px;line-height:1.65;color:#bccbbb;margin:0}.project-tag{color:#b1ca9a;font-size:11px;letter-spacing:.12em;text-transform:uppercase}.project-arrow{align-self:flex-end;margin-top:auto;padding-top:20px;font-size:23px}.focus-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.focus-card{padding:28px 23px;min-height:228px;border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;justify-content:space-between}.focus-card span{font-size:12px;color:var(--muted)}.focus-card h3{font-size:24px;line-height:1.15;margin:0}.impact-layout{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center}.impact-graphic{min-height:425px;background:#dce8b5;border-radius:20px;position:relative;overflow:hidden}.impact-graphic:before{content:'IMPACT';font-family:'Space Grotesk';font-size:clamp(65px,10vw,155px);letter-spacing:-.09em;font-weight:700;position:absolute;bottom:-20px;left:-15px;transform:rotate(-90deg) translate(0,100%);transform-origin:left bottom;color:#254134}.impact-graphic:after{content:'';position:absolute;height:300px;width:300px;border-radius:50%;border:46px solid #789e5e;right:-65px;top:-77px}.impact-layout h2{font-size:clamp(50px,5vw,82px);line-height:1;margin:12px 0 20px}.impact-layout p{line-height:1.85;color:#545c55}.impact-points{padding-left:20px;color:#354538;line-height:2}.writing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.writing-card{border-top:1px solid var(--ink);padding-top:20px;display:flex;flex-direction:column;min-height:275px}.writing-card .micro{color:#687167}.writing-card h3{font-size:clamp(25px,2.45vw,39px);line-height:1.15;margin:22px 0 14px}.writing-card p{font-size:13px;color:#657067;line-height:1.65;margin:0}.writing-card a{margin-top:auto;padding-top:25px;font-size:13px;font-weight:700}.contact{background:var(--lime);padding:100px 0 70px}.contact h2{font-size:clamp(70px,11vw,168px);line-height:.83;margin:17px 0 35px;max-width:1150px}.contact .contact-row{display:flex;align-items:end;justify-content:space-between;gap:30px}.contact p{max-width:440px;line-height:1.7}.contact a.email{border-bottom:1px solid currentColor;font-size:clamp(15px,2vw,25px);font-weight:700}.site-footer{background:#19271f;color:#e7eee2;padding:35px 0}.footer-inner{display:flex;justify-content:space-between;gap:18px;align-items:center;font-size:12px}.footer-links{display:flex;gap:24px;flex-wrap:wrap}.article{max-width:820px;margin:100px auto 130px;padding:0 24px}.article h1{font-size:clamp(55px,7vw,96px);line-height:1.01;margin:15px 0 30px}.article h2{font-size:34px;margin-top:48px}.article p,.article li{font-size:18px;line-height:1.85;color:#465149}.article .back{display:inline-block;margin-bottom:30px;font-size:13px;font-weight:700}.article .draft-note{border-left:3px solid #8daf57;padding:12px 20px;background:#e9efdc;font-size:14px}/* Signature logo mark (recolored per context via mask) */
.brand{display:inline-flex;align-items:center;gap:7px}
.brand .brand-mark{display:block;width:118px;height:40px;background:var(--ink);border-radius:0;-webkit-mask:url(assets/images/logo.svg) no-repeat left center/contain;mask:url(assets/images/logo.svg) no-repeat left center/contain}
.brand:after{content:'';width:9px;height:9px;background:#82ad3c;border-radius:50%;display:inline-block;flex:none}
.footer-brand{display:flex;flex-direction:column;gap:12px}
.footer-mark{display:block;width:104px;height:35px;background:#e7eee2;-webkit-mask:url(assets/images/logo.svg) no-repeat left center/contain;mask:url(assets/images/logo.svg) no-repeat left center/contain}
/* Real product imagery */
.project-visual .field{display:none}
.project-visual:before{display:none}
.project-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.project-visual:after{content:'';position:absolute;inset:0;background:linear-gradient(145deg,rgba(30,48,40,.28),rgba(30,48,40,.04) 42%,rgba(14,22,18,.5));z-index:1}
.project-code{z-index:2;color:#f1f5e8;background:rgba(20,30,24,.55);padding:4px 9px;border-radius:999px;backdrop-filter:blur(2px)}
.hero-art{background:#0c1820}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero-art:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,rgba(245,244,239,.55) 20%,rgba(245,244,239,0) 46%,rgba(30,48,40,.35) 100%);z-index:1}
.hero-art .art-dot{z-index:2}
.impact-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;z-index:0}
.impact-tint{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,32,26,.64) 0%,rgba(18,32,26,.27) 28%,rgba(18,32,26,.08) 58%,rgba(18,32,26,0) 100%);z-index:1}
.impact-graphic:before{z-index:2;color:#eef3d9}
.impact-graphic:after{z-index:2;border-color:rgba(120,158,94,.5);right:-100px;top:-110px}
/* Contact form */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:start;margin-top:4px}
.contact-intro p{max-width:420px;line-height:1.7;margin:0 0 26px}
.contact-direct{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.contact-direct a{font-weight:700}
.contact-form{display:flex;flex-direction:column;gap:16px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-form .field{display:flex;flex-direction:column;gap:7px}
.contact-form .field>span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#38482e}
.contact-form input,.contact-form textarea{font:inherit;color:var(--ink);caret-color:#2f4a3b;background:rgba(255,255,255,.55);border:1px solid #9bb45a;border-radius:12px;padding:13px 15px;transition:border-color .25s ease,background .25s ease,box-shadow .25s ease}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#5c6a4a}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--ink);background:#fff;box-shadow:0 0 0 3px rgba(24,28,25,.14)}
.contact-form textarea{resize:vertical;min-height:122px}
.form-submit{align-self:flex-start;border:none;margin-top:2px}
.form-status{font-size:13px;color:#38482e;min-height:1.1em;margin:2px 0 0;font-weight:600}
.form-status.error{color:#8a2b1e}
@media(max-width:760px){.contact-grid,.field-row{grid-template-columns:1fr}.contact-grid{gap:34px}}
/* Browser surfaces themed to the palette */
html{scrollbar-color:#a7afa4 var(--bg);scrollbar-width:thin}
::-webkit-scrollbar{width:13px;height:13px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#aeb6ac;border:3px solid var(--bg);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:#8b9785}
.dark-section ::-webkit-scrollbar-thumb{background:#4e5d52;border-color:var(--forest)}
/* ===== Motion: authored hero entrance + purposeful feedback ===== */
@keyframes heroLineIn{from{clip-path:inset(0 0 104% 0);transform:translateY(.3em)}to{clip-path:inset(0 0 -14% 0);transform:translateY(0)}}
@keyframes heroRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes stampIn{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes stripIn{from{opacity:0;clip-path:inset(0 0 0 38%)}to{opacity:1;clip-path:inset(0 0 0 0)}}
.hero .eyebrow{animation:heroRise .5s cubic-bezier(.16,1,.3,1) .6s both}
.hero h1 .first{display:inline-block;animation:heroLineIn .6s cubic-bezier(.16,1,.3,1) .1s both}
.hero h1 .second{animation:heroLineIn .6s cubic-bezier(.16,1,.3,1) .2s both}
.hero h1 .period{display:inline-block;animation:stampIn .5s cubic-bezier(.16,1,.3,1) .8s both}
.hero .left-note{animation:heroRise .55s cubic-bezier(.16,1,.3,1) .34s both}
.hero-statement{animation:heroRise .55s cubic-bezier(.16,1,.3,1) .4s both}
.hero-actions{animation:heroRise .55s cubic-bezier(.16,1,.3,1) .5s both}
.hero-art .hero-photo{animation:stripIn .8s cubic-bezier(.16,1,.3,1) .45s both}
.hero-art .art-dot{animation:stampIn .5s cubic-bezier(.16,1,.3,1) .95s both}
/* Feedback: project cards zoom under their frame, arrow advances */
.project-photo{transition:transform .6s cubic-bezier(.16,1,.3,1)}
.project:hover .project-photo,.project:focus-visible .project-photo{transform:scale(1.055)}
.project-arrow{transition:transform .4s cubic-bezier(.16,1,.3,1)}
.project:hover .project-arrow,.project:focus-visible .project-arrow{transform:translate(5px,-5px)}
/* Feedback: advancing arrows */
.pill-link span{display:inline-flex;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.pill-link:hover span,.pill-link:focus-visible span{transform:translate(3px,-3px)}
/* Staggered list reveals so a list reads as a list */
.projects-grid>.reveal:nth-child(2){transition-delay:.08s}
.projects-grid>.reveal:nth-child(3){transition-delay:.16s}
.projects-grid>.reveal:nth-child(4){transition-delay:.24s}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}.reveal.visible{opacity:1;transform:translateY(0)}:focus-visible{outline:3px solid #7ba947;outline-offset:4px}@media(max-width:1000px){.container{width:min(calc(100% - 54px),var(--max))}.nav-links{gap:15px}.hero h1{font-size:clamp(70px,13vw,135px)}.job{grid-template-columns:120px minmax(150px,.55fr) minmax(0,1fr)}.focus-grid{grid-template-columns:repeat(2,1fr)}.logos{gap:25px}}@media(max-width:700px){.container{width:calc(100% - 36px)}.nav{min-height:68px}.nav-links{display:none;position:absolute;top:67px;left:0;right:0;background:var(--bg);padding:22px 18px 30px;flex-direction:column;align-items:stretch;border-bottom:1px solid var(--line)}.nav-links.is-open{display:flex}.nav-links .nav-cta{justify-content:center}.menu-toggle{display:block}.hero{padding:70px 0 0}.hero h1{font-size:clamp(62px,13.9vw,98px);white-space:normal;line-height:.86}.hero h1 .second{margin-left:0}.hero-bottom{grid-template-columns:1fr;gap:17px;padding-bottom:40px}.hero-bottom .left-note{order:2}.hero-statement{max-width:480px}.hero-art{height:100px}.logos-inner{display:block}.logos-wrap .micro{display:block;margin-bottom:25px}.logos{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}.section{padding:78px 0}.section-head{display:block;margin-bottom:35px}.section-head .micro{padding:0 0 19px;display:block}.section-title{font-size:clamp(54px,12vw,88px)}.intro-grid{grid-template-columns:1fr}.stats{display:grid;grid-template-columns:repeat(3,1fr);border-left:0;padding:10px 0 0;gap:12px}.stat{padding:12px 0}.stat strong{font-size:42px}.career-heading{display:block}.career-heading p{margin-top:18px}.job{grid-template-columns:1fr;gap:8px;padding:27px 0}.job .date{padding:0}.job-role{max-width:none}.job-desc{margin-top:8px}.resume-action{justify-content:flex-start}.projects-grid,.impact-layout{grid-template-columns:1fr}.project{min-height:410px}.project-visual{height:205px}.focus-grid{grid-template-columns:1fr 1fr}.focus-card{min-height:190px;padding:19px}.focus-card h3{font-size:21px}.impact-graphic{min-height:280px;order:2}.writing-grid{grid-template-columns:1fr}.writing-card{min-height:210px}.contact{padding:85px 0 55px}.contact h2{font-size:clamp(69px,14vw,110px)}.contact .contact-row{align-items:flex-start;flex-direction:column}.footer-inner{flex-direction:column;align-items:flex-start}.article{margin-top:66px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}
