/* ---------- INTRO (pinned, scroll-driven) ---------- */
.intro{position:relative;--p:0;--q:clamp(0,calc((var(--p) - .3) / .7),1)}
.intro-pin{position:relative;overflow:clip}
.motion .intro.pin .intro-pin{position:sticky;top:0}
.intro-tail{height:0}
.motion .intro.pin .intro-tail{height:clamp(64px,13svh,132px)}
.mesh{position:absolute;inset:0 0 auto 0;height:78%;background:var(--m1);overflow:clip;contain:paint;-webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent);transform:scale(calc(1 + var(--p) * .06));opacity:calc(1 - var(--q) * .55);transform-origin:50% 0}
.mesh canvas{position:absolute;inset:0;width:100%;height:100%;filter:blur(40px);transform:scale(1.25)}
.mesh::after{content:"";position:absolute;inset:0;background:url("../media/banner.jpg") center/cover;opacity:.12;mix-blend-mode:overlay;pointer-events:none}
.hero{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding-block:var(--s-9) var(--s-6);transform:translateY(calc(var(--q) * -3svh)) scale(calc(1 - var(--q) * .03));opacity:calc(1 - var(--q) * .4)}
.avatar{width:144px;height:144px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 6px color-mix(in srgb,var(--bg) 55%,transparent);background:var(--chip)}
.avatar-wrap{position:relative;display:inline-block}
.v-badge{position:absolute;right:0;bottom:4px;width:32px;height:32px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.25))}
.hero h1{margin-top:var(--s-5)}
.hero .role{margin-top:var(--s-3)}
.hero .bio{margin-top:var(--s-5);max-width:30ch}
.w{display:inline-block}
.motion .intro .w{animation:rise var(--d-slow) var(--ease) backwards;animation-delay:calc(320ms + var(--k) * 32ms)}
.now{margin-top:var(--s-5);display:inline-flex;align-items:center;gap:var(--s-2);padding:6px 14px 6px 12px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--chip) 80%,transparent);font-size:var(--fs-meta);letter-spacing:-.02em;color:var(--ink-2);transition:background-color var(--d-fast) ease}
.now b{color:var(--ink-1);font-weight:600}
.now>span:last-of-type{text-wrap:balance;text-align:left}
.now .dot{flex:none}
.now-mark{height:14px;width:auto;flex:none;vertical-align:-2px;border-radius:2px}
:root[data-theme="dark"] .now-mark{filter:invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .now-mark{filter:invert(1)}}
.now:hover{background:var(--surface)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent)}100%{box-shadow:0 0 0 7px transparent}}
.tiles{display:grid;grid-template-columns:1fr;gap:10px;margin-top:var(--s-6);width:100%;max-width:720px}
.tile{height:44px;color:inherit;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:var(--s-2);font-size:14px;font-weight:600;letter-spacing:-.03em;background:color-mix(in srgb,var(--chip) 85%,transparent);transition:background-color var(--d-fast) ease}
a.tile:hover{background:var(--surface)}
.tile svg{width:18px;height:18px;flex:none}
.tile .t{font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums}
.flag{width:18px;height:auto;flex:none;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.tile .flag{width:18px;height:11px}
.loc{display:inline-flex;align-items:center;gap:8px}.loc .flag{width:16px;height:10px}

/* ---------- contact system: one primary, one secondary, one icon ---------- */
.cx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;width:100%;max-width:720px;margin-top:10px}
.cx a,.cx button{height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:600;letter-spacing:-.03em;white-space:nowrap;transition:background-color var(--d-fast) ease,transform var(--d-med) var(--ease),box-shadow var(--d-fast) ease}
.cx-call{background:var(--ink-1);color:var(--bg)}
.cx-call:hover{transform:translateY(-1px)}
.cx-call svg{width:15px;height:15px;transition:transform var(--d-med) var(--ease)}
.cx-call:hover svg{transform:rotate(45deg)}
.cx-copy{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.cx-copy:hover{background:var(--surface)}
.cx-copy svg{width:16px;height:16px;flex:none}
.cx-lbl{position:relative;display:grid;height:20px;overflow:hidden}
.cx-lbl>span{grid-area:1/1;display:inline-flex;align-items:center;gap:8px;line-height:20px;transition:transform .45s var(--ease),opacity .3s ease}
.cx-lbl>span+span{transform:translateY(110%);opacity:0;color:var(--accent)}
.cx-copy.done .cx-lbl>span:first-child{transform:translateY(-110%);opacity:0}
.cx-copy.done .cx-lbl>span+span{transform:none;opacity:1}
.cx-copy.done{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,var(--line))}
.cx-wa{background:color-mix(in srgb,var(--chip) 85%,transparent)}
.cx-wa:hover{background:var(--surface);transform:translateY(-1px)}
.cx-wa img{width:20px;height:20px}
@media (max-width:359px){.cx{grid-template-columns:1fr}}
/* ---------- shelves: Find me + Tools share one draggable, momentum carousel ---------- */
.find{padding-top:var(--s-2)}
.shelf-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);margin-bottom:var(--s-4)}
.shelf{position:relative;overflow:hidden;touch-action:pan-y;cursor:grab;padding-block:var(--s-2);margin-inline:calc(var(--s-2) * -1);padding-inline:var(--s-2);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.shelf.dragging{cursor:grabbing}
.shelf.dragging *{pointer-events:none}
.shelf:focus-visible{outline:2px solid var(--ink-1);outline-offset:4px;border-radius:16px}
.shelf-track{display:flex;gap:var(--s-3);width:max-content;will-change:transform}
.shelf.static{overflow-x:auto;cursor:auto;-webkit-mask-image:none;mask-image:none;scroll-snap-type:x mandatory;scrollbar-width:none}
.shelf.static::-webkit-scrollbar{display:none}
.shelf.static .shelf-track>*{scroll-snap-align:start}
.sym{width:44px;height:44px;border-radius:12px;background:#fff;color:#0B0B0B;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);display:grid;place-items:center;flex:none;font-weight:600;font-size:15px;letter-spacing:-.02em;transition:transform var(--d-med) var(--ease)}
.sym.logo{background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.sym img{width:56%;height:56%;object-fit:contain;-webkit-user-drag:none;filter:grayscale(1);opacity:.9;transition:filter var(--d-med) ease,opacity var(--d-med) ease}
.fm:hover .sym img,.fm:focus-visible .sym img,.fm--cta .sym img,.tool.is-center .sym img,.tool:hover .sym img,.shelf.static .sym img{filter:none;opacity:1}
.fm--cta .sym.logo{background:#fff}
/* project marks: the app icon from each product's own film, used as an identity anchor */
.picon{display:block;flex:none;width:28px;height:28px;border-radius:22.5%;box-shadow:0 0 0 1px var(--line);transition:transform var(--d-med) var(--ease)}
.pj-id{display:flex;align-items:center;gap:var(--s-3)}
.pj:hover .picon,.pj:focus-visible .picon{transform:rotate(-6deg)}
.pj--feature .picon{width:36px;height:36px}
.ch-logo{width:56px;height:56px;margin-bottom:var(--s-4)}
.tile-logo{width:20px;height:20px;border-radius:5px;flex:none}
/* social object */
.fm{display:inline-flex;align-items:center;gap:var(--s-3);height:66px;padding:10px 18px 10px 11px;border-radius:var(--r-pill);background:var(--chip);color:var(--ink-1);white-space:nowrap;user-select:none;-webkit-user-drag:none;transition:background-color var(--d-fast) ease}
.fm:hover{background:var(--surface)}
.fm-t{display:flex;flex-direction:column;gap:3px;transition:transform var(--d-med) var(--ease)}
.fm-t b{font-size:15px;line-height:18px;font-weight:600;letter-spacing:-.03em}
.fm-t span{font-size:13px;line-height:16px;color:var(--ink-2);letter-spacing:-.01em}
.fm-go{width:16px;height:16px;opacity:0;transform:translate(-6px,6px);transition:opacity var(--d-fast) ease,transform var(--d-med) var(--ease)}
.fm:hover .sym,.fm:focus-visible .sym{transform:rotate(-8deg) translateY(-1px)}
.fm:hover .fm-t,.fm:focus-visible .fm-t{transform:translateX(2px)}
.fm:hover .fm-go,.fm:focus-visible .fm-go{opacity:1;transform:none}
.fm--cta{background:var(--ink-1);color:var(--bg)}
.fm--cta:hover{background:var(--ink-1)}
.fm--cta .sym{background:#fff}
.fm--cta .fm-t span{color:color-mix(in srgb,var(--bg) 68%,transparent)}
/* tool object */
.tool{display:flex;flex-direction:column;justify-content:space-between;flex:none;width:158px;height:180px;padding:14px;border-radius:18px;background:var(--chip);user-select:none;opacity:.74;transition:opacity var(--d-med) ease,background-color var(--d-med) ease,transform var(--d-med) var(--ease)}
.shelf.static .tool,.tool.is-center,.tool:hover{opacity:1}
.tool.is-center{background:var(--surface);transform:translateY(-4px)}
.tool-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-2)}
.tool .sym{width:58px;height:58px;border-radius:16px;font-size:22px}
.tool:hover .sym{transform:rotate(-6deg)}
.tool b{font-size:16px;line-height:20px;font-weight:600;letter-spacing:-.03em}
@media (max-width:560px){.tool{width:134px;height:156px}.tool .sym{width:50px;height:50px;font-size:19px}.fm{height:60px}}

.pj{display:block;color:inherit}
.pj-media{position:relative;aspect-ratio:16/10;border-radius:var(--r-media);overflow:hidden;background:var(--stage-p,var(--stage));isolation:isolate}
.pj-media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--d-slow) var(--ease)}
.pj:hover .pj-media>video,.pj:focus-visible .pj-media>video{transform:scale(1.015)}
.pv{position:absolute;inset:0;container-type:size;transition:transform var(--d-slow) var(--ease)}
.pj-text{padding-top:var(--s-4);display:flex;flex-direction:column;gap:var(--s-1)}
.pj-title{display:flex;align-items:center;gap:var(--s-2);transition:transform var(--d-med) var(--ease)}
.pj-title svg{width:14px;height:14px;opacity:0;transform:translate(-6px,6px);transition:opacity var(--d-fast) ease,transform var(--d-med) var(--ease)}
.pj-desc{max-width:44ch}
.pj-meta{margin-top:var(--s-1);transition:color var(--d-fast) ease}
.pj:hover .pv,.pj:focus-visible .pv{transform:scale(1.015)}
.pj:hover .pj-title svg,.pj:focus-visible .pj-title svg{opacity:1;transform:none}
.pj:hover .pj-meta,.pj:focus-visible .pj-meta{color:var(--ink-1)}
.pj:focus-visible{outline-offset:6px}
/* feature: same parts, laid on the page grid */
.pj--feature .pj-media{aspect-ratio:16/10}
.pj--feature .pj-title{font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.045em}
.pj--feature .pj-desc{font-size:var(--fs-body-l);line-height:26px}
@media (min-width:1000px){
  .pj--feature{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
  .pj--feature .pj-media{grid-column:1/9}
  .pj--feature .pj-text{grid-column:9/13;align-self:end;padding:0 0 var(--s-2)}
  .work .pj:not(.pj--feature){grid-column:span 4}
  .work-more .grp{grid-column:span 6}
  .about-grid .ph{grid-column:1/6}
  .about-grid .txt{grid-column:7/13;align-self:end}
}
.work-more{margin-top:var(--s-9);row-gap:var(--s-8)}
.grp-h{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:var(--s-3);margin-bottom:var(--s-5);border-bottom:1px solid var(--line)}
.grp-h h3{font-weight:600;font-size:17px;letter-spacing:-.03em}
.grp-items{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-7) var(--gut)}
@media (min-width:560px){.grp-items{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:560px) and (max-width:999px){.work .pj:not(.pj--feature){grid-column:span 6}.work .pj:last-child{grid-column:1/-1}}

/* preview play-state: paused until hovered / in view (touch); specificity sits above the preview selectors */
.pj-media .pv *,.pj-media .pv *::before,.pj-media .pv *::after{animation-play-state:paused}
.play .pj-media .pv *,.play .pj-media .pv *::before,.play .pj-media .pv *::after{animation-play-state:running}
.pj:not(.play) .pv .gs *,.next .pv .gs *{animation-delay:-6.2s!important}

/* GSCL — identity construction: grid → globe → letters (9s) */
.gs{position:absolute;inset:0;display:grid;place-items:center}
.gs svg{width:86%;height:86%;overflow:visible}
.gs-grid{stroke:var(--skel);stroke-width:.4;animation:gs-grid 9s ease infinite}
.gs-d{fill:none;stroke:var(--ink-1);stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1}
.gs-c{animation:gs-draw 9s var(--ease-io) infinite}
.gs-m{animation:gs-draw 9s var(--ease-io) infinite;animation-delay:.5s;animation-fill-mode:backwards}
.gs-e{animation:gs-draw 9s var(--ease-io) infinite;animation-delay:.9s;animation-fill-mode:backwards}
.gs-w{font-family:var(--sans);font-weight:600;font-size:22px;letter-spacing:6px;fill:var(--ink-1);opacity:0;animation:gs-word 9s var(--ease) infinite}
.gs-tag{font-family:var(--sans);font-size:6.4px;letter-spacing:1.4px;fill:var(--ink-2);opacity:0;animation:gs-tag 9s var(--ease) infinite}
@keyframes gs-grid{0%{opacity:0}10%,74%{opacity:1}86%,100%{opacity:0}}
@keyframes gs-draw{0%,8%{stroke-dashoffset:1}34%,90%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:1}}
@keyframes gs-word{0%,46%{opacity:0;transform:translateY(4px)}56%,90%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes gs-tag{0%,56%{opacity:0}64%,90%{opacity:1}98%,100%{opacity:0}}