@font-face{font-family:Poppins;src:url('assets/fonts/poppins-regular.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:Poppins;src:url('assets/fonts/poppins-bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{--paper:#f0f2f1;--blue:#395ab3;--yellow:#ffb60d;--mint:#82dac3;--ink:#22252c}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:30px;overflow-x:hidden}body{margin:0;background:var(--paper);color:var(--ink);font-family:Poppins,Arial,sans-serif;overflow-x:hidden;width:100%;min-width:320px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}a:focus-visible,button:focus-visible{outline:3px solid #e87922;outline-offset:5px}p{line-height:1.6}h1,h2,h3,p{margin-top:0}h2{font-size:clamp(28px,3.82vw,66px);line-height:1.12;letter-spacing:-.045em}h3{font-size:clamp(20px,1.8vw,31px);line-height:1.25}.wrap{width:85.54%;max-width:1478px;margin-inline:auto}.eyebrow{font:700 clamp(10px,1.04vw,18px)/1.5 Arial,sans-serif;letter-spacing:.035em;color:var(--blue)}.muted{color:#666d75;font-size:clamp(15px,1.39vw,24px)}.skip{position:absolute;left:20px;top:-100px;z-index:20;background:white;padding:12px}.skip:focus{top:10px}.intro{position:relative;container-type:inline-size;max-width:1728px;margin:auto;height:min(96.4vw,1665px);overflow:hidden}.hero-blue{position:absolute;left:7.22%;right:7.22%;top:5.56%;height:55.96%;background:var(--blue);border-radius:4.63cqw;overflow:hidden}.hero-grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff15 1px,transparent 1px),linear-gradient(90deg,#ffffff15 1px,transparent 1px);background-size:6.43cqw 6.43cqw;mask-image:radial-gradient(ellipse,black,transparent 75%)}nav{position:absolute;z-index:5;left:18.05%;top:9.91%;width:63.9%;min-height:6.25cqw;background:var(--yellow);padding:1.39cqw;border-radius:999px;display:flex;align-items:center;justify-content:space-between;gap:1cqw}.brand{font-size:2.05cqw;font-weight:700;color:var(--blue);letter-spacing:-.08em}#nav-links{display:flex;align-items:center;gap:3.18cqw;font-size:1.389cqw;white-space:nowrap}.pill{display:inline-block;background:var(--paper);padding:.58cqw 1.85cqw;border-radius:99px}.resume-link{padding:0;border:0;background:none}.menu-toggle{display:none}@keyframes menu-drop{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}h1{position:absolute;z-index:2;top:20.5%;left:23%;width:54%;font-size:8.64cqw;line-height:.93;letter-spacing:-.04em;color:white;text-align:center;font-weight:700}.letter-o{position:relative}.letter-o img{position:absolute;width:4.09cqw;height:auto;top:.73em;left:.035em;transform:translateY(-50%)}.sticky{position:absolute;z-index:2;top:32.2%;left:12.6%;width:15.68cqw;height:14.52cqw;padding:2.6cqw 1.5cqw;background:#ffe6ad;transform:rotate(-11.8deg);font-size:2.315cqw;line-height:1.05;letter-spacing:-.04em;color:#111}.sticky:before{content:'';position:absolute;background:var(--mint);width:8.2cqw;height:2.23cqw;left:3.9cqw;top:-1.05cqw;transform:rotate(-7.53deg)}.role{position:absolute;left:36.1%;top:43.8%;padding:.925cqw 1.389cqw;border-radius:99px;background:var(--mint);font-size:1.85cqw;line-height:1;transform:rotate(-7.94deg)}.pin{position:absolute;left:73.8%;top:36%;width:6.36cqw;height:auto;transform:rotate(15deg)}.camera{position:absolute;z-index:3;left:62.9%;top:46.3%;width:48.85cqw;height:auto;transform:rotate(-26.8deg) scaleX(-1);pointer-events:none}.pencil{position:absolute;z-index:4;left:3%;top:47.9%;width:34.77cqw;height:3.5cqw;transform:rotate(35.61deg);transform-origin:0 50%}.pencil img{position:absolute;width:100%;height:auto;left:0;top:0}.pencil img:nth-child(2){width:97.52%;left:1.24%;top:11.3%}.pencil img:nth-child(3){width:97.63%;left:1.18%;top:30.87%;mix-blend-mode:overlay}.who{position:absolute;top:67%;left:7%;color:#d7dad8;font-size:17.59cqw;line-height:.81;letter-spacing:-.04em;margin:0}.about{display:grid;grid-template-columns:49.1% 37.2%;justify-content:space-between;align-items:start;gap:5%;padding-bottom:13.3vw}.notebook{position:relative;aspect-ratio:725.767/845.262;background:url('assets/figma/imgGroup8.svg') center/100% 100% no-repeat;padding:9% 13.8% 30%;font-size:clamp(16px,1.62vw,28px)}.notebook h2{font-size:clamp(22px,2.31vw,40px);font-weight:400;text-align:center;margin-bottom:9%;letter-spacing:-.04em}.notebook p{font-family:Arial,sans-serif;line-height:1.5;margin-bottom:6%}.notebook strong{font-size:clamp(13px,1.39vw,24px);color:var(--blue)}.coffee{position:absolute;width:42.45%;height:auto;left:-3.86%;bottom:1.6%}.portrait{position:absolute;width:27.89%;height:29.9%;object-fit:cover;right:1.5%;bottom:7%;border:5px solid #131313;transform:rotate(11.66deg)}.approach{padding-top:4.5%;font-family:Arial,sans-serif}.approach h2{font-size:clamp(28px,2.43vw,42px);letter-spacing:-.03em;margin:1.65vw 0 1.75vw}.approach p{font-size:clamp(15px,1.27vw,22px);line-height:1.55}.approach ol{padding:0;list-style:none;margin-top:2vw}.approach li{background:url('assets/figma/imgVector1.svg') center/100% 100% no-repeat;padding:1.05vw 1.6vw;margin-bottom:1.15vw;min-height:6.36vw}.approach li:nth-child(2){background-image:url('assets/figma/imgVector2.svg')}.approach li:nth-child(3){background-image:url('assets/figma/imgVector3.svg')}.approach li strong,.approach li span{display:block}.approach li strong{font-size:clamp(16px,1.39vw,24px);margin-bottom:.5vw}.approach li span{font-size:clamp(12px,1.04vw,18px)}.work h2,.archive h2{margin:1.15vw 0 .75vw}.work>.muted{margin-bottom:3.6vw}.projects{display:grid;grid-template-columns:1fr 1fr;gap:3.4%}.project-preview{display:flex;flex-direction:column;position:relative;padding:2.2vw;border-radius:26px;overflow:hidden;aspect-ratio:714/660;transition:transform .25s}.project-preview:hover{transform:translateY(-6px)}.sage{background:#dce7dd;color:#2e483a}.lilac{background:#e7e1f1;color:#49375a}.project-preview .eyebrow{color:inherit}.project-preview h3{font-size:clamp(25px,2.55vw,44px);margin:1.6vw 0;letter-spacing:-.035em}.project-preview video{width:100%;height:53%;object-fit:cover;object-position:top;border-radius:10px;background:#fff}.project-open{font-size:clamp(12px,1vw,17px);margin-top:auto;padding-top:12px;font-weight:700}.projects article>h3{margin:1.6vw 0 .6vw}.projects article>h3 a{display:flex;justify-content:space-between}.projects article>p,.project-note{font:clamp(13px,1.04vw,18px)/1.5 Arial,sans-serif;color:#666d75}.project-note{margin-top:25px}.play{margin-top:6vw;display:flex;align-items:center;justify-content:space-between;background:#ffe6ad;border-radius:28px;padding:3vw 2.6vw;gap:2vw}.play h2{font-size:clamp(28px,2.31vw,40px);margin:.6vw 0 1vw}.play p{font-size:clamp(14px,1.27vw,22px);color:#665b42;margin:0}.play .eyebrow{color:#886427}.play img{width:10vw;max-width:174px;height:auto;transform:rotate(12deg);transition:transform .3s}.play a:hover img{transform:rotate(-8deg)}.archive{padding-top:7.5vw}.archive-heading{display:flex;align-items:end;justify-content:space-between;gap:25px}.archive-heading>span{white-space:nowrap;font:13px Arial,sans-serif;color:#666d75;margin-bottom:24px}.filters{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0}.filters button{border:1px solid #d0d5d2;background:transparent;padding:12px 19px;border-radius:30px;font-size:14px}.filters button span{opacity:.65;margin-left:5px}.filters .active{background:var(--blue);color:white;border-color:var(--blue)}.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 22px}.gallery-item{min-width:0}.gallery-item[hidden]{display:none}.gallery-item button{border:0;display:block;width:100%;padding:0;background:#e4e7e4;border-radius:16px;overflow:hidden;position:relative}.gallery-item img,.gallery-item video{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;transition:transform .35s}.gallery-item button:hover img{transform:scale(1.035)}.gallery-item h3{font-size:16px;margin:12px 0 3px;font-weight:400}.gallery-item p{font-size:10px;letter-spacing:.09em;color:#6c726f;margin:0}.video-play{position:absolute;inset:0;display:grid;place-items:center;font-size:34px;color:white;background:#0002;text-shadow:0 1px 10px #000}.contact{margin-top:8vw;position:relative;overflow:hidden;background:var(--blue) url('assets/figma/imgVector19.svg') center/100% 100% no-repeat;border-radius:55px;padding:5vw 4.34vw;min-height:36.46vw;display:flex;align-items:center}.contact-grid{position:absolute;inset:0;background-image:url('assets/figma/imgVector20.svg'),url('assets/figma/imgVector21.svg');background-repeat:repeat-x,repeat-y;background-size:5.78vw 100%,100% 5.78vw;opacity:.7;pointer-events:none}.contact-copy{position:relative}.contact .eyebrow{color:#a3e3ce}.contact h2{font:700 clamp(32px,4.05vw,70px)/1.2 Arial,sans-serif;letter-spacing:-.03em;color:white;margin:1.5vw 0 3vw}.hello{border:0;border-radius:99px;background:var(--yellow) url('assets/figma/imgVector22.svg') center/100% 100% no-repeat;font-size:clamp(19px,1.73vw,30px);padding:1.2vw 2.6vw;display:flex;gap:3vw;align-items:center;width:fit-content}.contact p{color:#dce4ff;font-size:clamp(12px,1.04vw,18px);margin-top:2.4vw}.contact-smile{position:absolute;right:7.5%;top:26%;width:10.7vw;max-width:185px;height:auto;transform:rotate(12deg)}footer{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:4vw 0;color:#56606a;font:clamp(12px,1.1vw,19px)/1.5 Arial,sans-serif}dialog{border:0;border-radius:22px;background:var(--paper);padding:50px 24px 24px;max-width:min(1050px,94vw);max-height:94vh;box-shadow:0 25px 90px #0006}dialog::backdrop{background:#132039c9;backdrop-filter:blur(8px)}.close-dialog{position:absolute;right:18px;top:12px;border:0;background:transparent;padding:7px;font-size:15px}#viewer-content img,#viewer-content video{display:block;max-width:100%;max-height:76vh;margin:auto}#viewer-caption{text-align:center;margin:16px 0 0;font-size:14px}#info-dialog{width:500px;padding:60px 32px 35px}#info-dialog h2{font-size:30px}#info-dialog .pill{background:var(--yellow);padding:12px 20px}
/* Tools of My Trade Section */
.tools{padding-bottom:8vw}
.tools h2{margin:1.15vw 0 .75vw}
.tools>.muted{margin-bottom:2.8vw;max-width:680px}
.tools-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.tool-item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:26px 14px 22px;min-height:150px;background:rgba(255,255,255,0.6);border:1px solid rgba(34,37,44,0.08);border-radius:20px;box-sizing:border-box;color:var(--ink);cursor:default;transition:translate 260ms cubic-bezier(0.16,1,0.3,1),background-color 260ms ease,border-color 260ms ease,box-shadow 260ms ease;overflow:hidden;user-select:none;-webkit-user-select:none}
.tool-item::before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 35%,rgba(57,90,179,0.08) 0%,rgba(57,90,179,0.02) 60%,transparent 80%);opacity:0;transition:opacity 260ms ease;pointer-events:none}
.tool-item:hover,.tool-item:focus-visible{translate:0 -4px;background:#ffffff;border-color:rgba(57,90,179,0.35);box-shadow:0 12px 24px -10px rgba(57,90,179,0.12),0 3px 6px -2px rgba(34,37,44,0.04)}
.tool-item:hover::before,.tool-item:focus-visible::before{opacity:1}
.tool-item:focus-visible{outline:3px solid #e87922;outline-offset:4px}
.tool-icon-wrap{width:52px;height:52px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;transition:transform 260ms cubic-bezier(0.16,1,0.3,1);will-change:transform}
.tool-item:hover .tool-icon-wrap,.tool-item:focus-visible .tool-icon-wrap{transform:scale(1.08)}
.tool-svg{display:block;max-width:42px;max-height:42px;width:auto;height:auto;object-fit:contain}
.tool-name{font-size:clamp(13px,1.05vw,15px);font-weight:600;line-height:1.25;color:var(--ink);letter-spacing:-0.01em;text-wrap:balance;max-width:130px}
.tool-item.tool-featured{background:#ffffff;border-color:rgba(57,90,179,0.22);box-shadow:0 4px 16px -4px rgba(57,90,179,0.08)}
.tool-item.tool-featured::before{background:radial-gradient(circle at 50% 35%,rgba(130,218,195,0.15) 0%,rgba(57,90,179,0.05) 60%,transparent 80%);opacity:0.65}
.tool-item.tool-featured:hover::before,.tool-item.tool-featured:focus-visible::before{opacity:1}
.tool-badge{position:absolute;top:10px;right:10px;background:var(--mint);color:#123e30;font-size:9.5px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:3px 8px;border-radius:99px;line-height:1;pointer-events:none}
@media(max-width:1024px) and (min-width:701px){
  .tools-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .tools>.muted{margin-bottom:24px}
}
@media(min-width:1728px){.about{padding-bottom:230px}.tools{padding-bottom:140px}.contact{min-height:630px}.intro{height:1665px}}
@media(max-width:700px){
  .wrap{width:90%}
  .intro{height:720px;max-height:190vw;min-height:580px}
  .hero-blue{left:3%;right:3%;top:16px;height:68%;border-radius:28px}
  nav{left:4%;right:4%;width:92%;top:28px;padding:10px 16px;min-height:52px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,0.08)}
  .brand{font-size:19px}
  .menu-toggle{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:6px 14px;border-radius:999px;border:0;background:rgba(0,0,0,0.06);font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
  #nav-links{display:none;position:absolute;left:0;right:0;top:calc(100% + 10px);padding:20px 16px;background:var(--yellow);border-radius:22px;flex-direction:column;align-items:stretch;text-align:center;gap:14px;font-size:16px;font-weight:600;box-shadow:0 16px 36px rgba(0,0,0,0.18);z-index:100}
  #nav-links.open{display:flex;animation:menu-drop .22s cubic-bezier(.16,1,.3,1) both}
  #nav-links a,#nav-links button{display:block;width:100%;padding:12px 16px;min-height:44px;border-radius:12px;font:inherit;font-size:16px;font-weight:600;text-align:center;transition:background .2s}
  #nav-links a:active,#nav-links button:active{background:rgba(0,0,0,0.08)}
  #nav-links .pill{background:var(--paper);color:var(--ink);padding:12px 20px;border-radius:999px;margin-top:2px}
  h1{top:105px;left:5%;width:90%;font-size:clamp(34px,11cqw,48px);line-height:1.02}
  .letter-o img{width:clamp(20px,5.5cqw,28px)}
  .sticky{top:40%;left:7%;width:clamp(105px,28cqw,135px);height:clamp(98px,26cqw,125px);padding:18px 12px;font-size:clamp(13px,3.8cqw,15px);line-height:1.1;min-width:100px}
  .sticky:before{width:50%;height:18px;left:25%;top:-8px}
  .role{top:36%;right:7%;left:auto;font-size:clamp(11px,3.2cqw,13px);padding:7px 14px;border-radius:999px}
  .pin{top:48%;right:10%;left:auto;width:clamp(28px,9cqw,40px)}
  .pencil{top:56%;left:1%;width:clamp(110px,36cqw,155px)}
  .camera{left:52%;top:52%;width:clamp(150px,52cqw,215px)}
  .who{top:74%;font-size:clamp(52px,19cqw,78px);left:6%;line-height:.85}
  .about{grid-template-columns:1fr;padding-bottom:60px;gap:45px}
  .notebook{aspect-ratio:auto;min-height:420px;padding:36px 30px 125px;font-size:clamp(14px,3.8vw,17px);background-size:100% 100%}
  .notebook h2{font-size:clamp(24px,6vw,30px);margin-bottom:18px}
  .notebook p{margin-bottom:14px;line-height:1.5}
  .notebook br{display:none}
  .notebook strong{display:block;font-size:clamp(14px,3.6vw,17px);margin-top:14px}
  .coffee{width:clamp(110px,36%,145px);bottom:0;left:-2%}
  .portrait{width:clamp(80px,26%,110px);height:auto;right:3%;bottom:5%;border-width:4px}
  .approach{padding:0}
  .eyebrow{font-size:11px}
  .approach h2{font-size:clamp(26px,7vw,36px);margin:14px 0 16px}
  .approach p{font-size:16px;line-height:1.55}
  .approach ol{margin-top:24px}
  .approach li{padding:16px 20px;margin-bottom:12px;min-height:auto;border-radius:14px}
  .approach li strong{font-size:17px;margin-bottom:4px}
  .approach li span{font-size:14px;line-height:1.4}
  .tools{padding-bottom:50px}
  .tools h2{font-size:clamp(28px,7.5vw,38px);margin:12px 0 10px}
  .tools>.muted{font-size:clamp(15px,4vw,18px);margin-bottom:22px}
  .tools-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .tool-item{padding:20px 10px 16px;min-height:124px;border-radius:16px}
  .tool-icon-wrap{width:44px;height:44px;margin-bottom:10px}
  .tool-svg{max-width:36px;max-height:36px}
  .tool-name{font-size:13px;max-width:120px}
  .tool-badge{top:8px;right:8px;font-size:8.5px;padding:2px 6px}
  .work h2{font-size:clamp(28px,7.5vw,38px);margin:12px 0 10px}
  .work>.muted{font-size:clamp(15px,4vw,18px);margin-bottom:26px}
  .projects{grid-template-columns:1fr;gap:32px}
  .project-preview{aspect-ratio:auto;min-height:380px;padding:24px 20px 20px;border-radius:22px}
  .project-preview .eyebrow{font-size:11px}
  .project-preview h3{font-size:clamp(24px,6.5vw,32px);margin:12px 0 18px;line-height:1.15}
  .project-preview video{width:100%;height:190px;object-fit:cover;border-radius:12px}
  .project-open{font-size:14px;margin-top:18px;padding-top:0;font-weight:700;display:inline-flex;align-items:center;gap:6px}
  .projects article>h3{font-size:20px;margin:14px 0 4px}
  .projects article>p{font-size:14px}
  .project-note{font-size:13px;margin-top:20px}
  .play{margin-top:40px;padding:24px 20px;border-radius:22px;flex-direction:row;align-items:center;gap:16px}
  .play h2{font-size:clamp(22px,5.8vw,28px);margin:6px 0 8px}
  .play p{font-size:14px;line-height:1.45}
  .play img{width:clamp(65px,18vw,85px);height:auto;flex-shrink:0}
  .archive{padding-top:50px}
  .archive h2{font-size:clamp(28px,7.5vw,38px);margin:12px 0 8px}
  .archive-heading{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
  .archive-heading>span{margin:4px 0 14px;font-size:13px}
  .filters{display:flex;gap:8px;margin:16px 0 24px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 0 8px}
  .filters::-webkit-scrollbar{display:none}
  .filters button{flex-shrink:0;padding:9px 15px;font-size:13px;min-height:40px;border-radius:999px;display:inline-flex;align-items:center}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
  .gallery-item h3{font-size:13px;margin:8px 0 2px}
  .gallery-item p{font-size:9px}
  .contact{margin-top:50px;border-radius:28px;padding:36px 20px 30px;min-height:auto;flex-direction:column;align-items:flex-start}
  .contact h2{font-size:clamp(26px,7.5vw,40px);margin:14px 0 22px;line-height:1.15}
  .hello{font-size:17px;padding:12px 24px;gap:16px;border-radius:999px;width:fit-content}
  .contact p{max-width:100%;margin:20px 0 0;font-size:14px}
  .contact p a{word-break:break-all;overflow-wrap:anywhere}
  .contact-smile{position:static;margin-top:24px;width:48px;align-self:flex-end}
  footer{flex-direction:column;align-items:center;text-align:center;font-size:13px;padding:32px 0 40px;gap:10px}
  footer a{padding:8px 16px;min-height:44px;display:inline-flex;align-items:center;border-radius:999px;background:rgba(0,0,0,0.04)}
  dialog{padding:44px 16px 20px;max-width:92vw;width:92vw;max-height:88vh;border-radius:20px}
  .close-dialog{right:12px;top:10px;width:38px;height:38px;display:grid;place-items:center;font-size:18px;border-radius:50%;background:rgba(0,0,0,0.06)}
  #info-dialog{width:90vw;max-width:440px;padding:48px 20px 28px}
  #info-dialog h2{font-size:24px}
  #info-dialog p{font-size:14px;margin:14px 0 22px}
  #viewer-content img,#viewer-content video{max-height:65vh}
  .desktop{display:none}
}
@media(max-width:380px){
  .gallery{grid-template-columns:1fr;gap:20px}
  h1{font-size:32px}
  .sticky{width:100px;height:95px;padding:14px 8px;font-size:12px}
  .tools-grid{gap:10px}
  .tool-item{padding:16px 8px 14px;min-height:114px}
  .tool-name{font-size:12px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}.tool-item:hover,.tool-item:focus-visible{translate:none!important}.tool-item:hover .tool-icon-wrap,.tool-item:focus-visible .tool-icon-wrap{transform:none!important}}