/* sections v3
   Loaded in numeric order: later files refine earlier ones. */
@layer site {
/* capabilities v3 */
.cg-list{display:flex;flex-direction:column;border-bottom:1px solid var(--color-fg-a12)}
.cg-row{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;padding:18px 0;border-top:1px solid var(--color-fg-a12)}
.cg-row svg{color:var(--color-fg);margin-top:2px;transition:transform .55s var(--ease-pop),color .3s ease}
.cg-row:hover svg{transform:rotate(-12deg) scale(1.12);color:var(--acct,var(--acc))}
.cg-row b{display:block;font-size:var(--fs-xl);font-weight:600;letter-spacing:-0.03em;margin-bottom:2px}
.cg-row span{display:block;font-size:var(--fs-base);color:var(--color-text-subtle)}
.cg-row .cg-get{color:var(--color-fg-a85);margin-top:4px}
.tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--color-text-muted);transition:background .3s ease,color .3s ease}
.tool:hover{background:var(--color-surface-2);color:var(--color-fg)}
.tool-ic{display:flex;transition:transform .55s var(--ease-pop)}
.tool:hover .tool-ic{transform:rotate(-12deg) scale(1.12)}
.tool-n{font:500 var(--fs-xs) var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted)}
.stroke-art{position:absolute;left:8%;right:8%;bottom:14%;width:84%;height:auto}
.fl-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.fl-chips span{padding:3px 9px;border-radius:var(--radius-pill);border:1px solid var(--color-fg-a18);font-size:var(--fs-xs);color:var(--color-fg-a70)}
.fl-list{display:flex;flex-direction:column;gap:8px}
.fl-chk{display:flex;align-items:center;gap:8px;font-size:var(--fs-base);font-weight:600;letter-spacing:-0.01em}

.mosaic.m2{width:100%;margin-left:0;grid-template-columns:.8fr 1.2fr 1.2fr .8fr;grid-template-rows:1fr 1fr}
.mosaic-clip{height:520px}
/* folded corner on sticky notes */
.note{clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%);position:relative}
.note::after{content:"";position:absolute;right:0;bottom:0;width:26px;height:26px;background:linear-gradient(135deg,var(--color-shade-a22) 0%,var(--color-shade-a08) 48%,transparent 50%);border-top-left-radius:4px}
@media (max-width:860px){.mosaic.m2{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:200px}.mosaic-clip{height:auto}}

/* hero wipe (dubbly) */
.wp{position:relative;z-index:0;display:inline-block;color:var(--color-fg);animation:wpTxt .9s linear calc(var(--intro-delay) + .7s) both}
.wp::after{content:"";position:absolute;z-index:-1;inset:-.04em -.14em;border-radius:var(--radius-md);background:var(--color-fg);transform:scaleX(0);animation:wpBlk .9s cubic-bezier(.7,0,.3,1) calc(var(--intro-delay) + .7s) both}
/* capabilities industry tiles */
.getc{display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:var(--radius-pill);border:1px solid var(--color-fg-a20);font-size:var(--fs-sm);font-weight:500;color:var(--color-fg-a85)}
.it2-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.it2{perspective:1200px;height:200px}
.it2-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:it2Flip 30s cubic-bezier(.72,0,.24,1) infinite}
.it2-f,.it2-b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--radius-lg);padding:22px;display:flex;flex-direction:column;justify-content:space-between}
.it2-f{background:var(--color-neutral-20);border:1px solid var(--color-fg-a08);transition:background .3s ease,border-color .3s ease}
.it2-f svg{color:var(--color-fg-a75);transition:transform .55s var(--ease-pop),color .3s ease}
.it2:hover .it2-f{background:var(--color-surface-2);border-color:var(--color-fg-a20)}
.it2:hover .it2-f svg{transform:rotate(-12deg) scale(1.12);color:var(--acct,var(--acc))}
.it2-f b{font-size:clamp(18px,1.5vw,22px);font-weight:600;letter-spacing:-0.025em;line-height:1.1}
.it2-b{background:var(--color-fg);color:var(--color-bg);transform:rotateY(180deg)}
.it2-b b{font-size:var(--fs-md);font-weight:600;letter-spacing:-0.02em;line-height:1.25}
@media (max-width:1024px){.it2-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.it2-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.it2{height:170px}}
@media (prefers-reduced-motion:reduce){.it2-in{animation:none !important}.wp{color:var(--color-fg)}}

/* bento work grid */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:120px;gap:16px}
.mv .bt{padding:22px}
.bt{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;border-radius:var(--radius-xl);overflow:hidden;text-align:left;border:1px solid var(--color-bg-a06);transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.bt:hover{transform:translateY(-6px);box-shadow:0 30px 60px var(--color-bg-a14)}
.bt.b-l{grid-column:span 7;grid-row:span 4}.bt.b-m{grid-column:span 5;grid-row:span 4}
.bt.b-s{grid-column:span 4;grid-row:span 3}
.bt.b-m2{grid-column:span 5;grid-row:span 3}.bt.b-l2{grid-column:span 7;grid-row:span 3}
.bt-art{position:absolute;inset:22px 22px 124px;display:flex;flex-direction:column;justify-content:space-between;transition:transform 1s var(--ease-out)}
.bt:hover .bt-art{transform:scale(1.03)}
.bt-art>span{height:100%}
.bt-meta{position:relative;display:flex;flex-direction:column;gap:2px}
.bt-meta b{font-size:var(--fs-xl);font-weight:600;letter-spacing:-0.03em}
.bt-meta>span{font-size:var(--fs-sm);opacity:.6}
.bt-more{position:absolute;right:0;bottom:2px;display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:600;opacity:0 !important;transform:translateX(-8px);transition:opacity .3s ease,transform .4s var(--ease-out)}
.bt:hover .bt-more{opacity:1 !important;transform:none}
.bt-badge{position:absolute;right:18px;top:18px;padding:4px 10px;border-radius:var(--radius-pill);font:600 var(--fs-xs) var(--font-mono);text-transform:uppercase;letter-spacing:.06em;background:var(--color-gray-a18)}
.bt.you{border:2px dashed var(--color-bg-a30)}
@media (max-width:860px){.bento{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}.bt{grid-column:auto !important;grid-row:auto !important;min-height:320px}}
/* capabilities: dense hover-flip grid */
.hf-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.hf{perspective:1100px;height:150px;outline:none}
.hf-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.72,0,.24,1)}
.hf:hover .hf-in,.hf:focus-visible .hf-in{transform:rotateY(180deg)}
.hf-f,.hf-b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--radius-lg);padding:18px;display:flex;flex-direction:column;justify-content:space-between}
.hf-f{background:var(--color-neutral-20);border:1px solid var(--color-fg-a08)}
.hf-f svg{color:var(--color-fg-a70)}
.hf-f b{font-size:clamp(16px,1.35vw,20px);font-weight:600;letter-spacing:-0.02em;line-height:1.1}
.hf-b{background:var(--color-fg);color:var(--color-bg);transform:rotateY(180deg)}
.hf-b b{font-size:var(--fs-base);font-weight:600;line-height:1.25;letter-spacing:-0.015em}
.hf:focus-visible .hf-f{outline:2px solid var(--acc);outline-offset:2px}
@media (max-width:1024px){.hf-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.hf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* testimonials one-at-a-time */
.tq-wrap{display:flex;flex-direction:column;gap:40px}
.tq-stage{position:relative;min-height:300px}
.tq{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:28px;opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .7s var(--ease-out);pointer-events:none}
.tq.on{opacity:1;transform:none;pointer-events:auto}
.tq blockquote{margin:0;font-size:clamp(28px,3.2vw,48px);line-height:1.18;letter-spacing:-0.03em;font-weight:500;max-width:1100px}
.tq figcaption{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-base)}
.tq figcaption span{color:var(--color-text-muted)}
.tq-nav{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:28px;border-top:1px solid var(--color-fg-a12)}
.tn{padding:0;border-radius:var(--radius-round);opacity:.45;transition:opacity .3s ease}
.tn .qav{width:52px;height:52px;border:2px solid transparent}
.tn.on{opacity:1}
.tn.on .qav{border-color:var(--color-fg)}
.tq-arr{width:48px;height:48px;border-radius:var(--radius-round);border:1.5px solid var(--color-fg-a25) !important;display:flex !important;align-items:center;justify-content:center;transition:background .25s ease,color .25s ease}
.tq-arr:hover{background:var(--color-fg) !important;color:var(--color-bg)}
@media (max-width:860px){.tq-stage{min-height:420px}}

/* round fixes: testimonials crossfade, bubble mask, tiles mobile */
.tq{transform:none !important;filter:blur(8px);transition:opacity .7s ease,filter .7s ease}
.tq.on{filter:none}
.tq-prog{flex:1;max-width:360px;height:2px;background:var(--color-fg-a15);border-radius:2px;overflow:hidden}
.tq-prog i{display:block;height:100%;background:var(--color-fg);transform-origin:left;animation:tqp 6.5s linear infinite}
.tq-wrap:hover .tq-prog i{animation-play-state:paused}
.btxt-w{position:relative;z-index:2;text-align:center;pointer-events:none}
.btxt-g{color:var(--color-warm-500)}
.btxt-c{position:absolute;inset:0;color:var(--color-fg);clip-path:circle(0px at 50% 50%)}
.hf-ex{display:none;font-size:var(--fs-sm);color:var(--color-text-muted);line-height:1.35}
@media (hover:none){.hf-in{transform:none !important}.hf-b{display:none}.hf-ex{display:block}.hf{height:auto;min-height:150px}.hf-f{position:relative;min-height:150px;gap:12px}}

/* round: drawn wireframes, signature, soft skills, services, marquee */
.drw rect{fill:none;stroke:var(--color-fg);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1}
.scn.on .drw rect{animation:draw 1.1s cubic-bezier(.6,0,.2,1) forwards}
.scn.on .drw rect:nth-child(2){animation-delay:.15s}.scn.on .drw rect:nth-child(3){animation-delay:.3s}.scn.on .drw rect:nth-child(4){animation-delay:.45s}.scn.on .drw rect:nth-child(5){animation-delay:.7s}.scn.on .drw rect:nth-child(6){animation-delay:.8s}
.sig{margin:56px 0 0;font-family:'Bricolage Grotesque',sans-serif;font-weight:300;font-size:var(--fs-xl);line-height:1.3;letter-spacing:-0.02em;color:var(--color-fg-a75)}
.sig-n{display:block;margin-top:14px;font-weight:200;font-size:var(--fs-4xl);letter-spacing:-0.04em;color:var(--color-fg);transform:rotate(-3deg);transform-origin:left}
.soft{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.soft>div{padding:18px;border-radius:var(--radius-lg);background:var(--color-surface);border:1px solid var(--color-fg-a08);display:flex;flex-direction:column;gap:4px}
.soft b{font-size:var(--fs-lg);font-weight:600;letter-spacing:-0.02em}
.soft span{font-size:var(--fs-sm);color:var(--color-text-muted)}
.hf-ex{display:block !important;font-size:var(--fs-sm);line-height:1.35;color:var(--color-text-faint);margin-top:-6px}
.hf-f{justify-content:space-between}
.hf-f b{margin-top:auto}
.hf{height:170px}
.indus{display:flex;align-items:center;gap:20px;margin-top:40px;flex-wrap:wrap}
.indus-row{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:var(--fs-base);color:var(--color-text-subtle)}
.indus-row span+span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:var(--radius-round);background:var(--color-fg-a30);margin:0 18px 3px -11px}
.sep{border-radius:.06em}
.ctmq{animation-duration:30s !important;animation-delay:-1.2s !important}
@media (hover:none){.hf-f{gap:8px}}

/* services scroll list */
.svx{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:64px;align-items:start}
.svx-row{display:flex;flex-direction:column;gap:6px;padding:22px 0;border-top:1px solid var(--color-fg-a10);cursor:default}
.svx-row:last-child{border-bottom:1px solid var(--color-fg-a10)}
.svx-n{font-size:clamp(34px,4.2vw,64px);font-weight:600;letter-spacing:-0.04em;line-height:1;color:var(--color-fg-a20);transition:color .45s ease,transform .6s var(--ease-out)}
.svx-m{display:none;font-size:var(--fs-base);color:var(--color-text-muted)}
.svx-row.on .svx-n{color:var(--color-fg);transform:translateX(12px)}
.svx-side{position:sticky;top:20vh}
.svx-card{position:relative;height:440px;border-radius:var(--radius-xl);background:var(--color-neutral-20);border:1px solid var(--color-fg-a08);overflow:hidden}
.svx-p{position:absolute;inset:0;padding:36px;display:flex;flex-direction:column;gap:14px;opacity:0;transform:translateY(16px);transition:opacity .45s ease,transform .6s var(--ease-out)}
.svx-p.on{opacity:1;transform:none}
.svx-ic{display:flex;margin-bottom:auto;color:var(--color-fg);transition:transform .7s var(--ease-pop)}
.svx-p:not(.on) .svx-ic{transform:rotate(-30deg) scale(.6)}
.svx-p b{font-size:var(--fs-3xl);font-weight:600;letter-spacing:-0.035em;line-height:1}
.svx-p p{margin:0;font-size:var(--fs-md);line-height:1.5;color:var(--color-fg-a70)}
.svx-get{display:flex;flex-direction:column;gap:10px;padding-top:16px;border-top:1px solid var(--color-fg-a10)}
.svx-get>div{display:flex;flex-wrap:wrap;gap:6px}
.svx-get>div span{padding:6px 12px;border-radius:var(--radius-pill);background:var(--color-fg);color:var(--color-bg);font-size:var(--fs-sm);font-weight:600}
@media (max-width:860px){.svx{grid-template-columns:minmax(0,1fr)}.svx-side{display:none}.svx-m{display:block}.svx-n{color:var(--color-fg)}.svx-row.on .svx-n{transform:none}}
/* industries marquee */
.imq-wrap{display:flex;flex-direction:column;gap:14px;-webkit-mask-image:linear-gradient(90deg,transparent,var(--color-shade) 12%,var(--color-shade) 88%,transparent);mask-image:linear-gradient(90deg,transparent,var(--color-shade) 12%,var(--color-shade) 88%,transparent)}
.imq{overflow:hidden}
.imq-in{display:flex;gap:14px;width:max-content;animation:marq 40s linear infinite}
.imq.rev .imq-in{animation-direction:reverse;animation-duration:46s}
.imq-wrap:hover .imq-in{animation-play-state:paused}
.ipill{display:inline-flex;align-items:center;gap:12px;height:60px;padding:0 26px 0 20px;border-radius:var(--radius-pill);background:var(--color-neutral-19);border:0;font-family:var(--font-display);font-size:var(--fs-lg);font-weight:400;color:var(--color-fg-a82);letter-spacing:-0.03em;white-space:nowrap;transition:background .3s ease,border-color .3s ease}
.ipill svg{color:var(--color-fg-a70);transition:transform .55s var(--ease-pop),color .3s ease}
.ipill:hover{background:var(--color-surface-2)}
.ipill:hover svg{transform:rotate(-12deg) scale(1.12);color:var(--acct,var(--acc))}
@media (max-width:860px){.ipill{height:60px;font-size:var(--fs-lg)}}

/* round: about fix, levels, services sticky, equal pills */
.sig{margin-top:40px}
.lvr{display:flex;align-items:center;gap:10px;margin-top:10px}
.lvl{display:inline-flex;gap:4px}
.lvl i{width:22px;height:5px;border-radius:var(--radius-xs);background:var(--color-fg-a14)}
.lvl i.f{background:var(--color-fg)}
.lvr em{font-style:normal;font-size:var(--fs-xs);color:var(--color-text-faint);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em}
.svx{align-items:stretch !important}
.svx-side{position:-webkit-sticky;position:sticky;top:18vh;align-self:start;height:fit-content}
.svx-row{padding:30px 0}
.svx-get>div span{font-size:var(--fs-sm);padding:7px 14px}
.getc{font-size:var(--fs-sm);height:36px;padding:0 15px}
.ipill{width:260px;justify-content:center;padding:0 22px}
@media (max-width:860px){.ipill{width:240px}}

/* services card stack */
.svx-card{background:none !important;border:0 !important;overflow:visible !important;height:460px}
.svx-p{background:var(--color-neutral-20);border:1px solid var(--color-fg-a05);border-radius:var(--radius-xl);box-shadow:0 30px 70px var(--color-shade-a45);opacity:1 !important;transition:transform .75s cubic-bezier(.2,.8,.2,1),opacity .5s ease,filter .5s ease}
.svx-p[data-pos="next"]{transform:translateY(115%) rotate(4deg);opacity:0 !important}
.svx-p[data-pos="now"]{transform:none}
.svx-p[data-pos="past"]{transform:translateY(calc(var(--d) * -16px)) scale(calc(1 - var(--d) * .05));filter:brightness(calc(1 - var(--d) * .25))}
.svx-p[data-pos="past"] *{opacity:.0;transition:opacity .3s ease}
.svx-get ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.svx-get li{display:flex;align-items:center;gap:10px;font-size:var(--fs-base);color:var(--color-fg-a85)}
.svx-get li svg{color:var(--color-fg);flex:none}
}