:root{
  color-scheme:dark;
  --ink:#0A1A2F;--signal:#16E0A3;--slate:#5B6B7F;--mist:#F5F7FA;
  --ground:#071322;--surface:#0D1F35;--surface-2:#132840;
  --fg:#E8EEF5;--fg-dim:#93A3B6;--line:rgba(232,238,245,.14);--grid:rgba(232,238,245,.06);
  --accent:#16E0A3;--accent-soft:rgba(22,224,163,.10);
  --shadow:0 26px 50px -26px rgba(0,0,0,.85);
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--fg);font-family:var(--body);font-weight:300;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:1560px;margin:0 auto;padding:0 clamp(20px,5vw,96px)}
a{color:inherit}

/* ---------- hero with 3D floor ---------- */
header{position:relative;padding:64px 0 30px;overflow:hidden}
.floor{
  position:absolute;left:-20%;right:-20%;top:0;height:120%;pointer-events:none;z-index:0;
  background:
    linear-gradient(var(--grid) 1px,transparent 1px) 0 0/100% 46px,
    linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/46px 100%;
  transform:perspective(700px) rotateX(58deg) translateY(-30%);transform-origin:50% 0;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 78%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 78%);
}
.hero{position:relative;z-index:1;transform-style:preserve-3d}
.hero3d{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:none}
header.gl .hero3d{display:block}header.gl .floor{display:none}
.lay{will-change:transform;transition:transform .12s ease-out}
.rule{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);display:flex;gap:14px;align-items:center;margin-bottom:22px;flex-wrap:wrap}
.rule::after{content:"";height:1px;flex:1;min-width:36px;background:var(--line)}
h1{font-family:var(--display);font-weight:800;font-size:clamp(44px,6.2vw,84px);line-height:.96;letter-spacing:-.03em;margin:0 0 20px;text-wrap:balance}
.role{font-family:var(--display);font-weight:400;color:var(--fg-dim);font-size:clamp(17px,2.2vw,24px);line-height:1.32;letter-spacing:-.012em;max-width:38ch;margin:0 0 22px}
.role b{color:var(--fg);font-weight:600}
.lede{font-size:17px;line-height:1.55;max-width:62ch;color:var(--fg-dim);margin:0 0 16px}.lede+.lede{margin-top:0}.lede:last-of-type{margin-bottom:28px}
.lede b{color:var(--fg);font-weight:600}
.meta{display:flex;gap:9px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px}
.meta span,.meta a,.meta button{border:1px solid var(--line);padding:7px 12px;color:var(--fg-dim);text-decoration:none;transition:.2s;background:var(--surface);font:inherit;cursor:default}
.meta a:hover,.meta button:hover{border-color:var(--accent);color:var(--accent);cursor:pointer}
.meta a:not([href^="mailto"]),.meta button{border-color:transparent;background:transparent;padding:7px 6px}
.meta a:not([href^="mailto"]):hover,.meta button:hover{border-color:transparent;text-decoration:underline;text-underline-offset:4px}
.meta a[href^="mailto"]{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);font-weight:600}
.meta .go{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.pip{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block;margin-right:7px;animation:pip 2.6s infinite}
@keyframes pip{0%{box-shadow:0 0 0 0 var(--accent-soft)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* worked-at strip */
.logos{display:flex;gap:8px 26px;flex-wrap:wrap;margin-top:30px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim)}
.logos span::before{content:"";display:inline-block;width:5px;height:5px;background:var(--accent);margin-right:9px;vertical-align:middle;transform:rotate(45deg)}

/* hero grid: text left, glance right on wide screens */
.hgrid{display:grid;grid-template-columns:1fr;gap:34px;position:relative;z-index:1}
@media (min-width:1100px){.hgrid{grid-template-columns:7fr 5fr;gap:48px;align-items:end}.hgrid .glance{grid-template-columns:1fr 1fr;margin-top:0}}
.hhead{position:relative;z-index:1}
/* recruiter glance */
.glance{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:36px}
.glance div{background:var(--surface);padding:15px 18px}
.glance dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 5px}
.glance dd{margin:0;font-size:13.5px;color:var(--fg);line-height:1.5}
.glance dd small{display:block;color:var(--fg-dim);font-size:12px;margin-top:2px}

/* counters */
.cl{margin:30px 0 12px}
.counters{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:900px){.counters{grid-template-columns:1fr 1fr}}
.ct{background:var(--surface);padding:20px 18px;transition:transform .25s,box-shadow .25s}
.ct:hover{transform:translateY(-3px);box-shadow:var(--shadow);position:relative;z-index:1}
.ct b{font-family:var(--mono);font-weight:600;font-size:clamp(24px,3.1vw,34px);color:var(--accent);display:block;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ct s{display:block;text-decoration:none;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim);margin-top:9px;font-family:var(--mono);line-height:1.5}

section{padding:68px 0 0;position:relative;z-index:1}
.sh{display:flex;align-items:baseline;gap:15px;margin-bottom:26px;flex-wrap:wrap}
.sh h2{font-family:var(--display);font-weight:600;font-size:clamp(23px,2.8vw,31px);letter-spacing:-.022em;margin:0}
.sh p{margin:0;color:var(--fg-dim);font-size:13.5px;max-width:48ch}

/* ---------- 3D ring ---------- */
.stage{position:relative;height:400px;perspective:1300px;perspective-origin:50% 42%;overflow:hidden;outline:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);cursor:grab}
.stage:active{cursor:grabbing}
.stage:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.ring{position:absolute;left:50%;top:26px;width:0;height:0;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.22,.8,.3,1)}
.ring.drag{transition:none}
.rc{
  position:absolute;left:-160px;top:0;width:320px;height:310px;background:var(--surface);border:1px solid var(--line);
  padding:22px 20px 20px;display:flex;flex-direction:column;text-align:left;color:inherit;font:inherit;
  backface-visibility:hidden;opacity:.22;transition:opacity .5s,border-color .4s,box-shadow .4s;cursor:pointer;
}
.rc.front{opacity:1;border-color:var(--accent);box-shadow:var(--shadow)}
.rc:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rc .tg{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;display:flex;justify-content:space-between;gap:8px}
.rc .tg em{font-style:normal;color:var(--fg-dim)}
.rc h3{font-family:var(--display);font-weight:600;font-size:21px;margin:0 0 8px;letter-spacing:-.02em;line-height:1.16}
.rc p{margin:0;font-size:13px;color:var(--fg-dim);flex:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}
.rc .fg{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;color:var(--fg-dim);display:flex;justify-content:space-between;align-items:center}
.rc .fg b{color:var(--fg);font-weight:600}
.rc .ar{color:var(--accent)}
.ctrl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:6px}
.ctrl button{background:var(--surface);border:1px solid var(--line);color:var(--fg);width:38px;height:38px;cursor:pointer;font-family:var(--mono);font-size:15px;transition:.2s}
.ctrl button:hover{border-color:var(--accent);color:var(--accent)}
.dots{display:flex;gap:7px}
.dots button{width:8px;height:8px;padding:0;border-radius:50%;border:0;background:var(--line);cursor:pointer;transition:.2s}
.dots button.on{background:var(--accent);transform:scale(1.3)}
.index{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;margin-top:18px;font-family:var(--mono);font-size:11px}
.index button{background:none;border:0;color:var(--fg-dim);cursor:pointer;font:inherit;padding:2px 0;border-bottom:1px solid transparent;transition:.2s}
.index button:hover,.index button.on{color:var(--accent);border-bottom-color:var(--accent)}
.mrail{display:none}
@media (max-width:760px){.stage,.ctrl,.index{display:none}.mrail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;-webkit-overflow-scrolling:touch}.mc{flex:0 0 84%;scroll-snap-align:center;background:var(--surface);border:1px solid var(--line);padding:20px 18px;text-align:left;color:inherit;font:inherit;display:flex;flex-direction:column;min-height:250px}.mc .tg{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;display:flex;justify-content:space-between}.mc .tg em{font-style:normal;color:var(--fg-dim)}.mc h3{font-family:var(--display);font-weight:600;font-size:21px;margin:0 0 8px}.mc p{margin:0;font-size:13px;color:var(--fg-dim);flex:1}.mc .fg{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;color:var(--fg-dim);display:flex;justify-content:space-between}.mc .fg b{color:var(--fg)}.mc .ar{color:var(--accent)}}
.hint{text-align:center;font-family:var(--mono);font-size:10.5px;color:var(--fg-dim);margin-top:10px;letter-spacing:.06em}

/* ---------- inside the builds: one list ---------- */
.xs{position:relative;max-width:980px;padding:12px 0}
.xs-side{position:relative;z-index:1;display:flex;flex-direction:column;min-height:0}
.xs-tabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px;font-family:var(--mono);font-size:10px}
.xs-tabs button{background:var(--surface);border:1px solid var(--line);color:var(--fg-dim);padding:5px 9px;cursor:pointer;font:inherit;letter-spacing:.06em;transition:.2s}
.xs-tabs button.on,.xs-tabs button:hover{border-color:var(--accent);color:var(--accent)}
.xs-side h3{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.025em;margin:0 0 2px}
.xs-side .xm{font-family:var(--mono);font-size:10.5px;color:var(--fg-dim);letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.xl{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.xl-row{background:var(--surface);padding:11px 14px;display:grid;grid-template-columns:24px 1fr;gap:10px;opacity:.6;transition:opacity .22s,background .22s;text-align:left;border:0;color:inherit;font:inherit;cursor:pointer;width:100%}
.xl-row:hover{opacity:.9}
.xl-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.xl-row .n{font-family:var(--mono);font-size:10px;color:var(--accent);padding-top:3px}
.xl-row h4{font-family:var(--display);font-weight:600;font-size:15.5px;margin:0 0 4px;letter-spacing:-.01em}
.xl-row .pc{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.xl-row .pc b{font-family:var(--mono);font-weight:400;font-size:10.5px;border:1px solid var(--line);padding:3px 7px;color:var(--fg);background:var(--surface)}
.xl-row .kv{display:none;grid-template-columns:auto 1fr;gap:3px 10px;font-size:12.5px;line-height:1.5;margin-top:4px;margin-bottom:0}
.xl-row.cur .kv{display:grid}
.xl-row.cur{opacity:1;background:var(--accent-soft)}
.xl-row .kv dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim);padding-top:2px}
.xl-row .kv dd{margin:0;color:var(--fg-dim)}
.xl-row .kv dd b{color:var(--fg);font-weight:600}
@media (max-width:860px){
  .xs{grid-template-columns:1fr;gap:6px;min-height:0}
  .xl-row .kv{grid-template-columns:1fr}.xl-row .kv dt{display:none}
  /* single column on phones: let the panel run to natural height and scroll the page */
}
@media print{.xs{display:block}.xs-tabs{display:none}.xl-row{opacity:1}.xl-row .kv{display:grid}}

/* ---------- cross-functional tiles ---------- */
.teams{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 18px;perspective:1400px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.teams .team{flex:0 0 min(360px,86vw);scroll-snap-align:start}
.rail-hint{font-family:var(--mono);font-size:10.5px;color:var(--fg-dim);letter-spacing:.08em;text-transform:uppercase;margin-top:-6px}
@media print{.teams{display:grid;grid-template-columns:1fr 1fr;overflow:visible}}
.team{background:var(--surface);border:1px solid var(--line);padding:22px 20px;transform-style:preserve-3d;transition:border-color .3s,box-shadow .4s;will-change:transform;position:relative}
.team::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),var(--accent-soft),transparent 60%)}
.team:hover::before{opacity:1}
.team:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.team h3{font-family:var(--display);font-weight:600;font-size:19px;margin:0 0 4px;letter-spacing:-.018em;transform:translateZ(18px)}
.team .for{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.team ul{margin:0;padding-left:15px;font-size:13px;color:var(--fg-dim)}
.team li{margin-bottom:5px}
.team li b{color:var(--fg);font-weight:600}

/* ---------- receipts ---------- */
.ct a{color:inherit;text-decoration:none;display:block}
.ct a:hover b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.ct .st{position:absolute;top:10px;right:10px;width:6px;height:6px;border-radius:50%;background:var(--line);transition:background .3s}
.ct .st.on{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.ct{position:relative}
.rcpt{font-family:var(--mono);font-size:10px;color:var(--fg-dim);letter-spacing:.06em;margin-top:8px}
.rcpt a{color:var(--accent);text-decoration:none}
/* ---------- offer ---------- */
.offer{margin-top:72px;border:1px solid var(--accent);background:var(--surface);padding:38px 36px;display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center;position:relative;overflow:hidden}
.offer::before{content:"";position:absolute;inset:0;background:radial-gradient(600px circle at 90% 50%,var(--accent-soft),transparent 60%);pointer-events:none}
.offer h2{font-family:var(--display);font-weight:800;font-size:clamp(26px,3.6vw,40px);letter-spacing:-.03em;line-height:1.05;margin:0 0 12px;text-wrap:balance;position:relative}
.offer p{margin:0;font-size:14.5px;color:var(--fg-dim);max-width:52ch;position:relative}
.offer p b{color:var(--fg);font-weight:600}
.offer .cta{position:relative;display:flex;flex-direction:column;gap:9px;align-items:stretch;min-width:0}
.offer>div{min-width:0}
.offer label{display:flex;flex-direction:column;gap:4px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim)}
.offer input,.offer textarea{width:100%;min-width:0;box-sizing:border-box;font:inherit;font-family:var(--body);font-size:13px;color:var(--fg);background:var(--ground);border:1px solid var(--line);padding:8px 10px;resize:vertical;letter-spacing:0;text-transform:none}
.offer input:focus,.offer textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.offer .iq{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.offer .ib{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin-top:4px}
.offer .cta button{font-family:var(--mono);font-size:12px;letter-spacing:.06em;padding:13px 18px;border:1px solid var(--accent);color:var(--ground);background:var(--accent);cursor:pointer;transition:.2s}
.offer .cta button:hover{filter:brightness(1.08);transform:translateY(-2px)}
.offer .cta small{font-family:var(--mono);font-size:10px;color:var(--fg-dim);letter-spacing:.06em}
@media (max-width:760px){.offer{grid-template-columns:1fr;padding:28px 22px}.offer .iq{grid-template-columns:1fr}}
@media print{.offer .cta{display:none!important}}

/* ---------- off the clock ---------- */
.offbox{display:block;border:1px solid var(--line);background:var(--surface);overflow:hidden}
.offclip{position:relative;background:var(--ground);min-height:260px}
.offclip video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:saturate(.85) contrast(1.05)}
.offclip::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 70%,var(--surface));pointer-events:none}
.offtext{padding:30px 34px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.officons{display:flex;gap:18px;color:var(--accent)}
.officons svg{width:34px;height:34px;opacity:.9}
.offtext h3{font-family:var(--display);font-weight:600;font-size:22px;margin:0;letter-spacing:-.02em}
.offtext p{margin:0;font-size:15px;color:var(--fg-dim);line-height:1.6;max-width:62ch}
@media (max-width:760px){.offtext{padding:22px 20px}}

.obar{height:3px;background:var(--line);margin-top:14px;position:relative}
.obar i{position:absolute;left:0;top:0;bottom:0;background:var(--accent)}

/* ---------- colophon ---------- */
.colophon{margin-top:22px;border:1px solid var(--line);background:var(--surface);padding:22px 26px}
.colophon .ch{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.colophon p{margin:0;font-size:13.5px;color:var(--fg-dim);max-width:78ch}
.colophon .cintro{margin-bottom:10px}
.brain{margin:6px 0 14px;border:1px solid var(--line);background:var(--ground);overflow:hidden}
.brain svg{width:100%;height:auto;display:block}
.brain{position:relative}
.brain canvas#brain3d{display:none;width:100%;height:560px;cursor:grab}
.brain.gl canvas#brain3d{display:block}.brain.gl svg{display:none}
.blabels{position:absolute;inset:0;pointer-events:none;display:none}.brain.gl .blabels{display:block}
.bl{position:absolute;left:0;top:0;will-change:transform;font-family:var(--mono);font-size:10.5px;color:var(--fg-dim);white-space:nowrap;letter-spacing:.03em;transition:opacity .25s,color .25s;background:var(--ground);padding:1px 5px;border:1px solid transparent}
.bl.hub{font-family:var(--display);font-weight:600;font-size:12.5px;color:var(--fg);border-color:var(--line);background:var(--surface)}
.bl.leaf{opacity:.5;font-size:10px}.bl.dim{opacity:.12}.bl.on{opacity:1;color:var(--fg);border-color:var(--accent);background:var(--surface)}
@media print{.hero3d,#brain3d,.blabels,.globe{display:none!important}}
.brain .ln{stroke:var(--line);stroke-width:1.2;transition:stroke .3s,stroke-width .3s}
.brain .ln.hub{stroke:var(--accent);stroke-width:1.6;opacity:.7}
.brain .nd{fill:var(--surface);stroke:var(--line);stroke-width:1.2;transition:.3s}
.brain .nd.hub{stroke:var(--accent);stroke-width:1.6}
.brain .nd.core{fill:var(--accent);stroke:var(--accent)}
.brain text{font-family:var(--mono);font-size:10.5px;fill:var(--fg-dim);letter-spacing:.03em;transition:.3s;pointer-events:none}
.brain text.hl{font-family:var(--display);font-weight:600;font-size:12.5px;fill:var(--fg);letter-spacing:-.01em}
.brain text.cl{fill:var(--ground);font-family:var(--display);font-weight:700;font-size:12px;text-anchor:middle}
.brain g.h{cursor:pointer}
.brain.focus g.leaf:not(.on) text{opacity:.28}.brain.focus g.leaf:not(.on) .nd{opacity:.4}.brain.focus .ln.lf:not(.on){opacity:.25}
.brain g.leaf.on .nd{stroke:var(--accent);fill:var(--accent-soft)}.brain g.leaf.on text{fill:var(--fg)}.brain .ln.lf.on{stroke:var(--accent)}
@media print{.brain{display:none}}
.colophon p b{color:var(--fg);font-weight:600}

/* ---------- how I work ---------- */
.how{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:stretch}
.loop{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--line);background:var(--surface);perspective:1200px}
.step{padding:20px 14px 18px;border-right:1px solid var(--line);position:relative;transition:.3s;transform-style:preserve-3d}
.step:last-child{border-right:0}
.step::after{content:"→";position:absolute;right:-8px;top:22px;font-family:var(--mono);font-size:12px;color:var(--accent);background:var(--surface);padding:0 2px;z-index:1}
.step:last-child::after{content:"↺";right:12px;top:20px;background:none}
.step:hover{background:var(--accent-soft);transform:translateZ(14px)}
.step .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--accent);margin-bottom:8px}
.step h4{font-family:var(--display);font-weight:700;font-size:16px;margin:0 0 6px;letter-spacing:-.015em;line-height:1.15}
.step p{margin:0;font-size:11.5px;color:var(--fg-dim);line-height:1.5}
.creed{border:1px solid var(--accent);background:var(--surface);padding:24px 26px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.creed blockquote{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(20px,2.4vw,27px);letter-spacing:-.025em;line-height:1.2;text-wrap:balance}
.creed blockquote em{font-style:normal;color:var(--accent)}
.creed p{margin:0;font-size:13.5px;color:var(--fg-dim)}
.creed p b{color:var(--fg);font-weight:600}
@media (max-width:900px){.how{grid-template-columns:1fr}.loop{grid-template-columns:1fr 1fr}.step:nth-child(2n){border-right:0}.step{border-bottom:1px solid var(--line)}.step::after{display:none}}
@media (max-width:520px){.loop{grid-template-columns:1fr}.step{border-right:0}}

/* ---------- client marks ---------- */
.clients{border:1px solid var(--line);background:var(--surface);padding:22px 24px;margin-top:4px}
.clients .ch{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.clients .cs{font-size:13px;color:var(--fg-dim);margin:0 0 18px;max-width:66ch}
.cmarks{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;perspective:900px}
.cmarks .cm{flex:0 1 150px;min-width:120px;text-decoration:none;color:inherit}
.cmarks a.cm:hover{border-color:var(--accent)}
.cmarks a.cm:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cm{
  border:1px solid var(--line);background:var(--ground);padding:16px 12px;display:flex;
  flex-direction:column;align-items:center;gap:10px;transition:.35s;transform-style:preserve-3d;
}
.cm:hover{border-color:var(--accent);transform:translateY(-4px) rotateX(6deg);box-shadow:var(--shadow)}
.cm img{width:72px;height:56px;object-fit:contain;display:block;filter:grayscale(1);opacity:.85;transition:.3s}
.cm:hover img{filter:none;opacity:1}
.cm{background:var(--mist)}
.cm .wm{font-family:var(--display);font-weight:700;font-size:13px;color:#0A1A2F;text-align:center;line-height:1.2;height:56px;display:flex;align-items:center}
.cm .cl{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#5B6B7F;text-align:center;line-height:1.5}
.cm:hover .cl{color:var(--accent)}
.cnote{font-family:var(--mono);font-size:10px;color:var(--fg-dim);margin-top:14px;letter-spacing:.05em}

/* ---------- tools ---------- */
.tools{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;perspective:1400px}
@media (max-width:900px){.tools{grid-template-columns:1fr}}
.tg{background:var(--surface);border:1px solid var(--line);padding:22px 20px;transform-style:preserve-3d;transition:border-color .3s,box-shadow .4s;will-change:transform;position:relative}
.tg::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),var(--accent-soft),transparent 60%)}
.tg:hover::before{opacity:1}
.tg:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.tg .for{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.tl-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:13px;transform:translateZ(16px)}
.tl-chips b{font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.04em;border:1px solid var(--line);padding:4px 8px;color:var(--fg);background:var(--ground);transition:.2s}
.tg:hover .tl-chips b{border-color:var(--accent-soft)}
.tg p{margin:0;font-size:12.5px;color:var(--fg-dim);line-height:1.55}
.tg p b{color:var(--fg);font-weight:600}

/* ---------- timeline ---------- */
.tl{border-left:1px solid var(--line);margin-left:5px}
.row{position:relative;padding:14px 16px 20px 26px;margin-left:2px;transition:background .25s,transform .25s}
.row:hover{background:var(--surface);transform:translateX(4px)}
.row::before{content:"";position:absolute;left:-7.5px;top:22px;width:8px;height:8px;border-radius:50%;background:var(--fg-dim);box-shadow:0 0 0 4px var(--ground)}
.row.now::before{background:var(--accent)}
.row .yr{font-family:var(--mono);font-size:10.5px;color:var(--fg-dim);letter-spacing:.1em;text-transform:uppercase}
.row h4{font-family:var(--display);font-weight:600;font-size:17.5px;margin:5px 0 3px;letter-spacing:-.012em}
.row h4 em{font-style:normal;color:var(--accent);font-weight:400}
.row .pl{font-size:12px;color:var(--fg-dim);font-family:var(--mono);margin-bottom:8px}
.row ul{margin:0;padding-left:16px;font-size:13.5px;color:var(--fg-dim);max-width:70ch}
.row li{margin-bottom:5px}
.row li b{color:var(--fg);font-weight:600}
.row .why{font-size:12px;color:var(--fg-dim);margin-top:8px;font-style:italic}

/* caps */
.caps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.cap{background:var(--surface);padding:17px 20px;display:grid;grid-template-columns:186px 1fr;gap:20px;align-items:start}
.cap dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin:0}
.cap dd{margin:0;font-size:13.5px;color:var(--fg-dim)}

/* modal */
.scrim{position:fixed;inset:0;background:rgba(7,19,34,.8);backdrop-filter:blur(6px);z-index:60;display:flex;align-items:center;justify-content:center;padding:22px;opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{background:var(--surface);border:1px solid var(--accent);max-width:640px;width:100%;max-height:84vh;overflow-y:auto;padding:36px 34px;transform:translateY(14px) scale(.987);transition:transform .3s;position:relative}
.scrim.on .sheet{transform:none}
.sheet h3{font-family:var(--display);font-weight:700;font-size:28px;margin:0 0 5px;letter-spacing:-.028em}
.sheet .sb{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:20px}
.sheet p{font-size:14.5px;color:var(--fg-dim);margin:0 0 14px}
.sheet ul{margin:0 0 16px;padding-left:17px;color:var(--fg-dim);font-size:14px}
.sheet li{margin-bottom:7px}
.sheet li b,.sheet p b{color:var(--fg);font-weight:600}
.sheet code,.xl-row code{font-family:var(--mono);font-size:.9em;background:var(--ground);border:1px solid var(--line);padding:1px 5px}
.sheet .src{font-family:var(--mono);font-size:11px;color:var(--fg-dim);border-top:1px solid var(--line);padding-top:12px;margin-top:16px;line-height:1.9}
.sheet .src a,.sheet p a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;transition:.2s}
.sheet .src a:hover,.sheet p a:hover{border-bottom-color:var(--accent)}
.shut{position:absolute;top:14px;right:14px;background:none;border:1px solid var(--line);color:var(--fg-dim);width:31px;height:31px;cursor:pointer;font-size:16px;line-height:1;transition:.2s;font-family:var(--mono)}
.shut:hover{border-color:var(--accent);color:var(--accent)}
.stack{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.stack i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.07em;border:1px solid var(--line);padding:4px 8px;color:var(--fg-dim)}

.wink{font-family:var(--mono);font-size:12px;color:var(--fg-dim);text-align:center;margin:40px 0 -50px;letter-spacing:.04em}
footer{margin-top:76px;padding:30px 0 50px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;color:var(--fg-dim);letter-spacing:.04em;position:relative;z-index:1}
footer a{color:var(--accent);text-decoration:none}
footer a:hover{text-decoration:underline}

@media (max-width:820px){.glance{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .glance{grid-template-columns:1fr}.cap{grid-template-columns:1fr;gap:6px}.sheet{padding:28px 20px}header{padding:42px 0 24px}
  .stage{height:350px}.rc{width:260px;left:-130px;height:280px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- print: a clean two-page CV ---------- */
@media print{
  :root{color-scheme:light;--ground:#fff;--surface:#fff;--surface-2:#EDF1F6;--fg:#000;--fg-dim:#333;--line:#bbb;--accent:#0B7A5A;--accent-soft:rgba(11,122,90,.08);--shadow:none;--grid:transparent}
  body{font-size:11.5px}
  .floor,.stage,.ctrl,.hint,.meta .go,.meta button,.scrim,.pip{display:none!important}
  header{padding:0 0 12px}.logos{margin-top:12px}
  section{padding:22px 0 0;break-inside:avoid}
  .print-builds{display:block!important}
  .index{display:none}
  .team,.ct,.row{box-shadow:none!important;transform:none!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9px;color:#555}
}
.print-builds{display:none}
.print-builds .pb{border-top:1px solid var(--line);padding:9px 0}
.print-builds .pb b{font-family:var(--display)}
.print-builds .pb small{display:block;color:var(--fg-dim);font-size:11px}

/* availability, promoted */
.avail{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px;line-height:1.5;margin:0 0 18px;padding:9px 14px;border:1px solid var(--accent);background:var(--accent-soft);color:var(--fg);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.avail .pip{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(22,224,163,.18)}
.avail b{color:var(--accent);font-weight:600}
@media (max-width:640px){.avail{display:flex;font-size:11px;letter-spacing:.06em;padding:9px 12px}.avail .sep{display:none}.avail b{flex-basis:100%}}