:root{--bg:#f5f7fa;--card:#fff;--ink:#101a33;--mute:#56607a;--line:#dde3ee;--blue:#2457d6;--blue-t:#e6edff;--ok:#127a4b;--ok-t:#dcf5e8;--amber:#f2b134}
:root[data-theme=dark]{--bg:#0d1426;--card:#151e36;--ink:#eaf0ff;--mute:#9aa6c4;--line:#26314f;--blue:#7da2ff;--blue-t:#1c2a52;--ok:#6fe0a8;--ok-t:#12382a}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 "DM Sans",system-ui,sans-serif}
h1,h2,h3{font-family:"Bricolage Grotesque","DM Sans",sans-serif;line-height:1.15;margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:8px;padding:12px 5vw;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.logo{font:800 1.15rem "Bricolage Grotesque",sans-serif;text-decoration:none;background:var(--ink);color:var(--bg);padding:2px 10px;border-radius:6px;margin-right:auto}
nav{display:flex;gap:4px}nav a{text-decoration:none;padding:6px 12px;border-radius:99px;color:var(--mute);font-weight:500;font-size:.95rem}
nav a:hover{background:var(--blue-t);color:var(--blue)}
.bar button{border:1px solid var(--line);background:var(--card);color:var(--ink);width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:1rem}
#menu{display:none}
main,footer{max-width:1080px;margin:0 auto;padding:0 5vw}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;min-height:calc(100vh - 64px);padding:48px 0}
.hello{margin:0 0 4px;color:var(--mute)}
h1{font-size:clamp(2.4rem,6vw,4rem);font-weight:800;letter-spacing:-.02em}
.role{font:600 clamp(1.2rem,3vw,1.6rem) "Bricolage Grotesque",sans-serif;margin:14px 0;color:var(--blue)}
.caret{display:inline-block;width:2px;height:1.1em;background:var(--blue);margin-left:3px;vertical-align:-3px;animation:b 1s steps(1) infinite}
@keyframes b{50%{opacity:0}}
.lead{max-width:52ch;color:var(--mute);font-size:1.08rem}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.btn{display:inline-block;border:2px solid var(--ink);background:var(--ink);color:var(--bg);padding:11px 22px;border-radius:10px;font:700 1rem "DM Sans",sans-serif;text-decoration:none;cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink)}
.btn:hover{transform:translateY(-2px)}
.ticket{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:8px 8px 0 var(--blue-t)}
.t-head{display:flex;justify-content:space-between;align-items:center}
.t-sub{font-style:italic;color:var(--mute);margin:10px 0 14px}
.pill{display:inline-block;font-size:.8rem;font-weight:700;padding:2px 12px;border-radius:99px;background:var(--blue-t);color:var(--blue)}
.pill.live,#status.done{background:var(--ok-t);color:var(--ok)}
.steps{list-style:none;margin:0;padding:0}
.steps li{position:relative;padding:8px 0 8px 32px;border-top:1px dashed var(--line);color:var(--mute);transition:color .3s}
.steps li::before{content:"";position:absolute;left:2px;top:12px;width:16px;height:16px;border-radius:50%;border:2px solid var(--line);transition:.3s}
.steps li.on{color:var(--ink)}
.steps li.on::before{background:var(--ok);border-color:var(--ok);box-shadow:inset 0 0 0 3px var(--card)}
.t-foot{display:flex;justify-content:space-between;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:.85rem;font-weight:700;color:var(--ok)}
.sec{padding:72px 0 8px}
.sec h2{font-size:clamp(1.8rem,4vw,2.5rem);margin-bottom:28px;padding-left:16px;border-left:6px solid var(--amber)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.left>p{font-size:1.15rem;margin:0 0 20px}
.stats{display:grid;gap:12px}
.stats div{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 18px}
.stats b{font:800 2rem "Bricolage Grotesque",sans-serif;color:var(--blue);min-width:70px}
.stats span{color:var(--mute);font-size:.95rem}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px}
.card h3{font-size:1.15rem;margin-bottom:12px}
.card p{margin:0 0 12px;color:var(--mute)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{background:var(--blue-t);color:var(--blue);font-size:.85rem;font-weight:500;padding:3px 12px;border-radius:99px}
.job{display:grid;grid-template-columns:170px 1fr;gap:24px;padding:26px 0;border-top:1px solid var(--line)}
.job:last-child{border-bottom:1px solid var(--line)}
.meta{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
time{color:var(--mute);font-size:.9rem;font-weight:500}
.job h3{font-size:1.4rem}.org{margin:2px 0 12px;color:var(--blue);font-weight:700}
.job ul{margin:0;padding-left:20px;color:var(--mute)}.job li{margin-bottom:6px}
.tag{font-weight:700;color:var(--ok)!important;font-size:.9rem}
.proj{border-top:5px solid var(--blue)}
.contact>p{color:var(--mute);max-width:56ch}
form{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:680px;margin:24px 0}
label{display:grid;gap:6px;font-weight:700;font-size:.9rem}.full{grid-column:1/-1}
input,textarea{font:400 1rem "DM Sans",sans-serif;padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
form .btn{justify-self:start}
.links{display:flex;flex-wrap:wrap;gap:8px 24px}.links a{font-weight:700;color:var(--blue)}
footer{padding:48px 5vw 32px;color:var(--mute);font-size:.9rem}
@media(max-width:820px){
 #menu{display:block}
 nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--bg);padding:10px 5vw 16px;border-bottom:1px solid var(--line)}
 nav.open{display:flex}
 .hero,.two,.grid3,.grid2,form{grid-template-columns:1fr}
 .hero{min-height:0;gap:32px}
 .job{grid-template-columns:1fr;gap:10px}
 .meta{flex-direction:row;align-items:center;gap:12px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.photo{margin:0;justify-self:center;max-width:400px;width:100%}
.photo img{display:block;width:100%;height:auto;border-radius:18px;border:3px solid var(--ink);box-shadow:10px 10px 0 var(--amber)}
@media(max-width:820px){.photo{max-width:320px;justify-self:start}}

.co{display:block;width:150px;max-width:100%;height:84px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px}
.co.photo-box{object-fit:cover;padding:0}
.co.round{width:84px;border-radius:50%;object-fit:cover;padding:0}
.btn.amber{background:var(--amber);border-color:var(--amber);color:#101a33}
nav a.rnav{background:var(--blue-t);color:var(--blue);font-weight:700}
@media(max-width:820px){.co{width:120px;height:68px}.co.round{width:68px}}