header{max-width:none;position:relative;align-items:center;background:#102c36;z-index:5}.brand{font-size:15px;letter-spacing:.08em}.brand>span{display:block;font-size:8px;letter-spacing:.13em;color:#9bb8b6;margin-top:3px}.main-tabs{display:flex;padding:4px;border:1px solid #48696c;border-radius:30px;gap:4px}.main-tabs button{font:14px system-ui;border:0;background:transparent;color:#b8ceca;padding:11px 22px;border-radius:25px;cursor:pointer}.main-tabs button[aria-selected=true]{background:#d3ee9b;color:#163b46}.main-tabs button span{font-size:10px;margin-left:5px}main{max-width:none}[hidden]{display:none!important}.personal-intro{max-width:1200px;margin:auto;padding:80px 5% 50px}.personal-intro h1{max-width:1000px;font-size:clamp(40px,5.5vw,76px)}.personal-intro>p{max-width:660px;font-size:18px}.intro-bottom{display:flex;gap:25px;align-items:center;margin-top:35px;font-size:12px;color:#c4d8bc}.intro-bottom button{background:#d3ee9b;border:0;padding:12px 18px;border-radius:5px;color:#163b46;cursor:pointer;font:14px system-ui}.scroll-invite{font-size:11px;letter-spacing:.06em;color:#95b6b5;margin-top:65px}.role-story{height:720vh;background:#173b46;overflow:clip}.role-stage{position:sticky;top:0;height:100vh;min-height:680px;overflow:hidden;background:radial-gradient(ellipse at 70% 65%,#2c5963,#13323f 75%)}.role-top{position:absolute;top:26px;left:5%;right:5%;display:flex;justify-content:space-between;color:#cbe4ad;font-size:11px;letter-spacing:.14em}.role-copy{position:absolute;left:5%;top:15%;width:42%;z-index:2}.role-copy h2{font-size:clamp(28px,3.7vw,52px);margin:16px 0;max-width:550px}.role-company{color:#e2ead9;font-size:15px}.role-period{font-size:12px;color:#c6dfaa;margin-top:5px}.role-description{font-size:15px;max-width:440px;line-height:1.75}.role-copy details{font-size:12px;color:#b5cec3}.role-copy summary{cursor:pointer;color:#d3ee9b}.role-tasks{padding-left:18px;max-width:420px}.role-art{position:absolute;right:0;bottom:13%;width:61%;height:70%}.role-art svg{width:100%;height:100%}.art-text{font:11px system-ui;fill:#b6d0c4;letter-spacing:.05em}.role-task{position:absolute;bottom:18%;right:5%;width:45%;max-width:520px;text-align:center;font-size:12px;color:#c5d9c5}.role-controls{position:absolute;bottom:70px;left:5%;right:5%;display:flex;align-items:center;gap:10px}.role-controls button{font:12px system-ui;background:#214753;border:1px solid #64867d;color:#c9dfc3;border-radius:5px;padding:8px 12px;cursor:pointer}.role-controls button[aria-current=step]{background:#d3ee9b;color:#153b46}.role-controls button:disabled{opacity:.3;cursor:default}.role-dots{display:flex;gap:5px}.role-controls .role-pause{margin-left:auto}.role-note{position:absolute;bottom:25px;left:5%;font-size:10px;letter-spacing:.05em;color:#a6c1bb}.about,.career,.education,.skills,.projects{max-width:1200px;margin:auto;padding:65px 5%}.about,.career,.education,.skills{border-top:1px solid #3f6269}.timeline-role{display:grid;grid-template-columns:220px 1fr 30px;gap:20px;width:100%;border:0;border-top:1px solid #40636a;text-align:left;padding:24px 0;background:transparent;color:#edf1df;cursor:pointer;font:15px system-ui}.timeline-role:hover{background:#1d424b}.timeline-year{font-size:12px;color:#b5d0bb;padding-top:5px}.timeline-role strong{font-weight:500;font-size:19px}.timeline-company{display:block;font-size:13px;color:#a9c4bf;margin-top:7px}.education{display:grid;grid-template-columns:1fr 1fr;gap:65px}.education h3{font-size:20px;font-weight:500;margin-bottom:0}.education p{font-size:14px}.certs{padding-left:20px;color:#c0d2c4;font-size:14px;line-height:2.5;margin-top:30px}.skill-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 30px;margin-bottom:30px}.skill-grid p{padding-bottom:15px;border-bottom:1px solid #3f6269;font-size:14px}.skills button{border:0;cursor:pointer}.projects h1{font-size:clamp(40px,5vw,70px);margin-top:25px}.project-intro{max-width:680px;margin-bottom:45px}.projects .supply{animation:projectBox 4s infinite}.project-art use{display:none}.project-art svg:has(use){background:repeating-linear-gradient(0deg,transparent 0 25px,#345a61 26px)}.project-art svg{overflow:visible}footer{max-width:1200px;display:flex;justify-content:space-between;gap:25px}.float-paper{animation:docFloat 3s ease-in-out infinite}.draw-check{stroke-dasharray:120;stroke-dashoffset:120;animation:writeCheck 4s infinite}.pallet-trip{animation:palletTrip 5s ease-in-out infinite}.truck-drive{animation:truckDrive 6s ease-in-out infinite}.inspector-walk{animation:inspectWalk 5s ease-in-out infinite}.scan-sample{animation:sampleScan 3s ease-in-out infinite}.signal-light{animation:signalLight 2s ease-in-out infinite}.route-dash{animation:routeDash 3s linear infinite}.paused *{animation-play-state:paused!important}@keyframes docFloat{50%{transform:translateY(-12px)}}@keyframes writeCheck{35%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:120}}@keyframes palletTrip{0%,10%{transform:translate(0,0)}65%,85%{transform:translate(140px,-35px)}100%{transform:translate(0,0)}}@keyframes truckDrive{0%,20%{transform:translate(-15px,5px)}75%,90%{transform:translate(75px,-20px)}100%{transform:translate(-15px,5px)}}@keyframes inspectWalk{0%,10%{transform:translate(100px,40px)}40%,85%{transform:translate(0,0)}100%{transform:translate(100px,40px)}}@keyframes sampleScan{50%{transform:translateY(40px)}}@keyframes signalLight{50%{opacity:.25}}@keyframes routeDash{to{stroke-dashoffset:-64}}@media(max-width:700px){header{gap:18px}.main-tabs{width:100%;justify-content:center}.main-tabs button{flex:1;padding:10px 15px}.personal-intro{padding:45px 5% 35px}.personal-intro h1{font-size:40px}.personal-intro>p{font-size:15px}.intro-bottom{flex-wrap:wrap}.scroll-invite{margin-top:35px}.role-stage{min-height:800px}.role-copy{top:9%;width:90%}.role-copy h2{font-size:29px;max-width:350px;margin:10px 0}.role-company{font-size:12px;max-width:340px}.role-period{font-size:11px}.role-description{font-size:13px;max-width:350px;margin-bottom:10px}.role-art{width:100%;height:43%;bottom:14%;right:-1%}.role-task{width:90%;right:5%;bottom:15%;font-size:10px}.role-controls{bottom:60px;gap:5px;flex-wrap:wrap}.role-controls button{padding:7px 8px;font-size:10px}.role-dots{gap:3px}.role-controls .role-pause{padding:6px 8px}.role-note{bottom:20px;font-size:9px}.role-copy details[open]{background:#14333fec;padding:10px;border:1px solid #668079;border-radius:5px;position:relative;z-index:3}.timeline-role{grid-template-columns:1fr 25px;gap:10px}.timeline-year{grid-column:1 / -1}.timeline-role strong{font-size:17px}.education,.skill-grid{grid-template-columns:1fr;gap:25px}.about,.career,.education,.skills,.projects{padding:40px 5%}.project-grid{grid-template-columns:1fr}footer{flex-direction:column;font-size:10px}.role-controls .role-pause{margin-left:0}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Truck follows the horizontal road; wheels rotate in the driving direction. */
.profile-truck-forward{animation:truckForward 7s linear infinite}.profile-truck-forward .truck-wheel{transform-box:fill-box;transform-origin:center;animation:truckWheelRoll 7s linear infinite}@keyframes truckForward{0%,8%{transform:translateX(0);opacity:0}14%{transform:translateX(0);opacity:1}24%{transform:translateX(0);opacity:1}82%{transform:translateX(110px);opacity:1}91%,100%{transform:translateX(130px);opacity:0}}@keyframes truckWheelRoll{0%,24%{transform:rotate(0deg)}91%,100%{transform:rotate(532deg)}}@media(prefers-reduced-motion:reduce){.profile-truck-forward{animation:none;opacity:1;transform:none}.profile-truck-forward .truck-wheel{animation:none}}
.role-art .art-text{display:none}@keyframes truckForward{0%,24%{transform:translateX(0);opacity:1}82%{transform:translateX(110px);opacity:1}91%,100%{transform:translateX(130px);opacity:0}}
/* Distinct actions for each industry and responsibility. */
.legal-application{animation:legalFile 5s ease-in-out infinite}.legal-transfer{animation:routeDash 2s linear infinite}.candidate-card{animation:candidateScreen 4s ease-in-out infinite}.interview-slot{animation:interviewSlot 4s steps(1) infinite}.construction-hook{animation:hookLift 5s ease-in-out infinite}.hris-review{stroke-dasharray:85;animation:reviewBars 4s ease-in-out infinite}.hr-stamp{animation:permitStamp 3s ease-in-out infinite}.permit-document{animation:permitDocument 3s ease-in-out infinite}.stock-entry{animation:stockEntry 3s steps(1) infinite}.cost-report{animation:reportFile 5s ease-in-out infinite}.rubber-conveyor{animation:routeDash 2s linear infinite}.rubber-bale-trip{animation:baleConveyor 5s linear infinite}.sample-test{animation:samplePress 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}.test-curve{stroke-dasharray:140;animation:testPlot 4s ease-in-out infinite}.export-document{animation:exportFile 7s ease-in-out infinite}@keyframes legalFile{0%,15%,100%{transform:translate(-15px,8px)}50%,80%{transform:translate(16px,-5px)}}@keyframes candidateScreen{0%,100%{opacity:.55;transform:translateX(-12px)}40%,80%{opacity:1;transform:translateX(8px)}}@keyframes interviewSlot{0%,100%{transform:translate(0,0)}40%{transform:translate(26px,18px)}70%{transform:translate(47px,0)}}@keyframes hookLift{50%{transform:translateY(21px)}}@keyframes reviewBars{0%,100%{stroke-dashoffset:80}55%,80%{stroke-dashoffset:0}}@keyframes permitStamp{0%,65%,100%{transform:translate(503px,337px)}32%,42%{transform:translate(503px,357px)}}@keyframes permitDocument{0%,50%,100%{opacity:1}35%{opacity:.75}}@keyframes stockEntry{0%,100%{opacity:.25}30%,85%{opacity:1}}@keyframes reportFile{0%,100%{transform:translateY(5px)}65%{transform:translateY(-14px)}}@keyframes baleConveyor{0%{transform:translateX(0);opacity:0}8%{opacity:1}85%{opacity:1}100%{transform:translateX(100px);opacity:0}}@keyframes samplePress{0%,100%{transform:scaleY(1)}45%,65%{transform:scaleY(.68)}}@keyframes testPlot{0%,100%{stroke-dashoffset:140}60%,85%{stroke-dashoffset:0}}@keyframes exportFile{0%,100%{transform:translateY(7px)}25%,50%{transform:translateY(-8px)}}@media(max-width:700px){.role-task{bottom:13%;font-size:9px}.role-art{bottom:15%}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}
/* Portfolio sections: one panel at a time, with navigation always reachable. */
header{position:sticky;top:0;z-index:60;border-bottom:1px solid #3d5f67}.portfolio-subtabs{position:sticky;top:var(--header-height,90px);z-index:50;display:flex;justify-content:center;gap:8px;padding:12px 4%;background:#153640f5;border-bottom:1px solid #44666c;backdrop-filter:blur(14px)}.portfolio-subtabs button{font:12px system-ui;color:#bbd0c7;background:transparent;border:1px solid transparent;border-radius:6px;padding:10px 15px;cursor:pointer;white-space:nowrap}.portfolio-subtabs button[aria-selected=true]{color:#d3ee9b;background:#2a5056;border-color:#739773}.portfolio-section{min-height:65vh}.role-stage{top:var(--portfolio-offset,150px);height:calc(100svh - var(--portfolio-offset,150px));min-height:0}.role-copy{top:12%}.role-copy h2{font-size:clamp(27px,3.2vw,45px);margin:12px 0}.role-description{font-size:14px}.role-top{top:18px}.role-art{height:74%;bottom:12%}.role-controls{bottom:48px}.role-task{bottom:15%;font-size:11px}.role-note{bottom:13px}.back-portfolio{position:fixed;right:22px;bottom:16px;z-index:65;border:1px solid #a2bc8a;border-radius:30px;background:#d3ee9b;color:#173c46;padding:11px 17px;font:12px system-ui;cursor:pointer;box-shadow:0 5px 20px #071f3277}.welcome-note{font-size:12px!important;color:#adc6bd;margin-top:45px}.contact{max-width:1100px;margin:auto;padding:65px 5% 110px}.contact>p{max-width:600px}.contact-links{margin-top:35px;display:grid;grid-template-columns:1fr 1fr;gap:20px}.contact-links a{display:grid;grid-template-columns:1fr 25px;gap:12px;text-decoration:none;border:1px solid #5e7d79;padding:25px;border-radius:10px;background:#1c414c}.contact-links a>span:first-child{grid-column:1 / -1;color:#b3c9bd;font-size:12px}.contact-links strong{font-weight:500;font-size:19px;color:#d3ee9b;overflow-wrap:anywhere}.contact-links a:hover{border-color:#d3ee9b}.personal-intro h1{font-size:clamp(37px,5vw,68px)}footer{padding-bottom:70px}.role-copy details[open]{position:relative;z-index:3;background:#15343eee;padding:12px;border:1px solid #567a77;border-radius:7px}@media(max-width:700px){header{gap:12px;padding:13px 5%}.brand>span{font-size:7px}.main-tabs{padding:3px}.main-tabs button{padding:8px 13px}.portfolio-subtabs{gap:5px;justify-content:flex-start;overflow-x:auto;padding:9px 4%;scrollbar-width:thin}.portfolio-subtabs button{padding:9px 10px;font-size:10px}.role-copy{top:9%}.role-copy h2{font-size:26px}.role-description{font-size:12px;line-height:1.6}.role-company{font-size:11px}.role-art{height:43%;bottom:16%}.role-task{bottom:16%;font-size:9px}.role-controls{bottom:38px;gap:4px}.role-controls button{padding:6px 7px}.role-note{bottom:9px;font-size:8px}.back-portfolio{right:12px;bottom:10px;padding:9px 13px;font-size:10px}.role-pause{margin-left:auto!important}.contact-links{grid-template-columns:1fr}.contact{padding:40px 5% 90px}.personal-intro h1{font-size:36px}}
@media(min-width:701px){.role-controls{right:190px}}
/* All navigation items are equal tabs in one shared row. */
header{gap:25px;align-items:center}.main-tabs{flex:0 1 auto;overflow-x:auto;white-space:nowrap;flex-wrap:nowrap;max-width:100%;border-radius:30px;scrollbar-width:thin}.main-tabs button{flex:none;padding:11px 13px;font-size:12px}.role-controls{right:5%}@media(max-width:1100px){header{flex-wrap:wrap;gap:12px}.main-tabs{width:100%;justify-content:flex-start}.main-tabs button{flex:none}}@media(max-width:700px){header{padding:12px 4%}.main-tabs{width:100%;justify-content:flex-start}.main-tabs button{font-size:11px;padding:9px 12px}}