/* =========================================================
   ENHANCEMENTS LAYER — remove <link enhance.css> + <script enhance.js>
   from index.html to get back the exact Framer replica.
   ========================================================= */

/* ---------- accessibility ---------- */
:focus-visible{outline:2px solid #6c7ff0;outline-offset:3px;border-radius:8px}
::selection{background:#d8f59b;color:#111}

/* ---------- cursor label (View case / Drag / Open) ---------- */
.cursor-label{position:fixed;left:0;top:0;z-index:200;pointer-events:none;padding:9px 14px;border-radius:999px;background:#111;color:#fff;
  font:600 12.5px/1 "Inter";letter-spacing:-.01em;white-space:nowrap;display:flex;align-items:center;gap:6px;
  transform:translate3d(-50%,-50%,0) scale(0);opacity:0;transition:transform .35s var(--spring),opacity .25s;will-change:left,top}
.cursor-label.on{transform:translate3d(-50%,-50%,0) scale(1);opacity:1}
.cursor-label i{width:6px;height:6px;border-radius:50%;background:#b5f149}
[data-cursor]{cursor:none}
@media (hover:none){.cursor-label{display:none}[data-cursor]{cursor:auto}}

/* ---------- nav: scroll progress ring + active section ---------- */
.nav-avatar-wrap{position:relative;display:grid;place-items:center;width:36.5px;height:39px;margin:-2px -3px 0 -5px}
.nav-avatar-wrap .nav-avatar{margin:0}
.nav-ring{position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;transform:rotate(-90deg);opacity:0;transition:opacity .4s}
.nav.mini .nav-ring{opacity:1}
.nav-ring circle{fill:none;stroke-width:2}
.nav-ring .bg{stroke:rgba(0,0,0,.07)}
.nav-ring .fg{stroke:#8bd33c;stroke-linecap:round;stroke-dasharray:113;stroke-dashoffset:113}
.nav-links a:not(.nav-cta){position:relative}
.nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:50%;bottom:-8px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#111;transform:scale(0);transition:transform .35s var(--spring)}
.nav-links a.active::after{transform:scale(1)}

/* ---------- online chip with local time ---------- */
.chip-online .lt{color:#8a8a8a;margin-left:3px}

/* ---------- hero grid spotlight ---------- */
.hero-spot{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,#cfe9a8 1.2px,transparent 1.6px);background-size:14px 14px;
  -webkit-mask:radial-gradient(260px circle at var(--mx,-999px) var(--my,-999px),#000 0,rgba(0,0,0,.35) 45%,transparent 70%);
  mask:radial-gradient(260px circle at var(--mx,-999px) var(--my,-999px),#000 0,rgba(0,0,0,.35) 45%,transparent 70%);
  opacity:.9;transition:opacity .4s}

/* ---------- magnetic buttons ---------- */
.magnetic{transition:transform .5s var(--spring)}

/* ---------- headings: words rise in ---------- */
.split .wr{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split .wr>span{display:inline-block;transform:translateY(105%);transition:transform .9s var(--ease);transition-delay:calc(var(--i) * 45ms)}
.split.in .wr>span{transform:none}
.sec-head.reveal,.about-title.reveal,.faq-center.reveal{filter:none}

/* ---------- quote: three key ideas get their own colour ---------- */
.quote-text .k1,.quote-text .k2,.quote-text .k3{background-repeat:no-repeat;background-size:0% 3px;background-position:0 92%;transition:background-size .8s var(--ease),color .25s linear}
.quote-text .k1{background-image:linear-gradient(90deg,#6c7ff0,#a97bd6)}
.quote-text .k2{background-image:linear-gradient(90deg,#f0a82c,#ee7449)}
.quote-text .k3{background-image:linear-gradient(90deg,#8bd33c,#3fbf8f)}
.quote-text.done .k1,.quote-text.done .k2,.quote-text.done .k3{background-size:100% 3px}

/* ---------- projects: numbering + tilt ---------- */
.project{position:relative}
.project-num{position:absolute;left:-58px;top:-2px;font:500 12px/1 "Inter";letter-spacing:.04em;color:#9a9a9a;writing-mode:vertical-rl;transform:rotate(180deg);display:flex;align-items:center;gap:10px}
.project-num::after{content:"";width:1px;height:46px;background:linear-gradient(#cfcfcf,transparent)}
.project-img{border-radius:0;transition:border-radius .6s var(--ease),box-shadow .6s var(--ease),transform .6s var(--ease)}
.project:hover .project-img{border-radius:16px;box-shadow:0 30px 60px -30px rgba(20,20,40,.45)}
.project h3{transition:letter-spacing .6s var(--ease)}
.project .see{position:relative}
.project .see::after{content:"";position:absolute;left:0;bottom:-3px;height:1.5px;width:100%;background:#111;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.project:hover .see::after{transform:scaleX(1)}

/* ---------- tilt + glare (cards, tiles) ---------- */
.tilt{transform-style:preserve-3d;will-change:transform;transition:transform .6s var(--ease)}
.tilt .glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.38),transparent 45%)}
.tilt:hover .glare{opacity:1}

/* ---------- side-project tiles: original glyph illustrations ---------- */
.app-tile{position:relative;overflow:hidden;display:grid;place-items:center}
.app-tile svg{width:92px;height:92px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.18));transition:transform .7s var(--spring)}
.app:hover .app-tile svg{transform:scale(1.1) rotate(-6deg)}
.app-tile::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 20%,rgba(255,255,255,.35),transparent 55%)}
.app-tile .timer{animation:spin 6s linear infinite;transform-origin:46px 50px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- bento: count-up number ---------- */
.b1 .count{display:inline-block;min-width:1.2ch;font-variant-numeric:tabular-nums}

/* ---------- gallery: drag + lightbox ---------- */
.gallery{cursor:grab;touch-action:pan-y}
.gallery.dragging{cursor:grabbing}
.g-card img{pointer-events:none;user-select:none}
.lightbox{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:rgba(10,10,10,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .4s}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{max-width:min(86vw,560px);max-height:82vh;border-radius:20px;box-shadow:0 40px 80px rgba(0,0,0,.5);transform:scale(.92);transition:transform .5s var(--spring)}
.lightbox.open img{transform:none}
.lightbox .lb-close,.lightbox .lb-nav{position:absolute;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;font:400 22px/1 "Inter";transition:background .3s}
.lightbox .lb-close:hover,.lightbox .lb-nav:hover{background:rgba(255,255,255,.25)}
.lightbox .lb-close{top:24px;right:24px}
.lightbox .lb-prev{left:24px;top:50%;margin-top:-23px}
.lightbox .lb-next{right:24px;top:50%;margin-top:-23px}
.lightbox .lb-count{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:#bbb;font:500 12px/1 "Inter";letter-spacing:.12em}

/* ---------- footer giant name: letters ---------- */
.f-giant{display:flex}
.f-giant span{display:inline-block;transform:translateY(60%);opacity:0;transition:transform 1.1s var(--ease),opacity 1.1s var(--ease),color .4s;transition-delay:calc(var(--i) * 70ms)}
.f-giant.in span{transform:none;opacity:1}
.f-giant span:hover{color:#b5f149;transform:translateY(-10px);transition-delay:0s;transition-duration:.45s}
.f-giant{pointer-events:auto}

/* ---------- back to top ---------- */
.to-top{position:absolute;right:0;top:340px;display:flex;align-items:center;gap:8px;font:500 11.6px/1 "Inter";color:#8a8a8a;transition:color .3s}
.to-top b{width:30px;height:30px;border-radius:50%;border:1px solid #333;display:grid;place-items:center;transition:transform .4s var(--spring),background .3s,border-color .3s}
.to-top:hover{color:#fff}
.to-top:hover b{transform:translateY(-4px);background:#b5f149;border-color:#b5f149;color:#111}

@media (prefers-reduced-motion:reduce){
  .split .wr>span,.f-giant span{transform:none!important;opacity:1!important;transition:none!important}
  .cursor-label,.hero-spot{display:none}
}
@media (max-width:1060px){
  .project-num{display:none}
  .to-top{position:relative;top:auto;margin-top:20px}
  .f-giant span{opacity:1;transform:none}
}

/* =========================================================
   REDESIGNED "WHAT I BRING TO THE TABLE"
   ========================================================= */
.bring{height:auto;padding-bottom:120px;display:flow-root}
.bento2{position:relative;width:963px;margin:252px auto 0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:232px 232px 232px 78px;gap:16px}
.bx{position:relative;overflow:hidden;border-radius:22px;background:#f2f3f7;padding:22px 24px;display:block;color:#0d0d0d;isolation:isolate}
.bx .eyebrow{display:block;font:500 11.5px/1 "Inter";letter-spacing:.06em;text-transform:uppercase;color:#8b8d96}
.bx h6{font:500 29px/1.05 "Inter Tight";letter-spacing:-.045em;margin-top:10px}
.bx h6 span{color:#9aa0ab;font-weight:400}
.bx-sub{font:400 14.5px/21px "Inter";letter-spacing:-.01em;color:#5d606a;max-width:230px;margin-top:10px}
.tiny{font:400 12px/16px "Inter";color:#8b8d96}

/* 01 experience */
.bx-exp{grid-column:1/3;grid-row:1/3;background:#f2f2f6;padding:26px 28px}
.bx-exp .big{position:relative;z-index:2;font:600 150px/.9 "Outfit";letter-spacing:-.07em;margin:18px 0 0 -6px;display:flex;align-items:flex-start;
  background:linear-gradient(180deg,#0d0d0d 40%,#4a4d57);-webkit-background-clip:text;background-clip:text;color:transparent}
.bx-exp .big sup{font-size:70px;line-height:1;margin:10px 0 0 4px;background:none;-webkit-text-fill-color:#ee7449;color:#ee7449}
.bx-exp .bx-sub{position:relative;z-index:2;max-width:210px;font-size:15.5px;line-height:22px;color:#3e414a}
.career{position:absolute;left:28px;bottom:26px;z-index:2;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 20px rgba(0,0,0,.06)}
.career small{display:flex;align-items:center;gap:6px;font:500 10.5px/1 "Inter";letter-spacing:.08em;text-transform:uppercase;color:#8b8d96}
.career small::before{content:"";width:6px;height:6px;border-radius:50%;background:#83dc4c;animation:ping 2s infinite}
.career code{display:block;margin-top:7px;font:500 17px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:-.02em;color:#111;font-variant-numeric:tabular-nums}
.bx-man{position:absolute;right:-18px;bottom:0;height:330px;width:auto;z-index:1;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 22%),linear-gradient(180deg,transparent 0,#000 12%,#000 82%,transparent 100%);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent 0,#000 22%),linear-gradient(180deg,transparent 0,#000 12%,#000 82%,transparent 100%);mask-composite:intersect;transition:transform .8s var(--ease)}
.bx-exp:hover .bx-man{transform:translateY(-6px) scale(1.02)}

/* 02 approach */
.bx-think{grid-column:3/5;grid-row:1;background:#fff;box-shadow:inset 0 0 0 1px #eceef3}
.whys{position:absolute;left:24px;right:24px;bottom:24px;display:flex;align-items:center;gap:8px}
.whys i{flex:1;height:1.5px;background:repeating-linear-gradient(90deg,#d6d9e0 0 4px,transparent 4px 8px);min-width:8px}
.why{flex:none;padding:10px 12px;border-radius:12px;background:#f2f3f7;font:400 12.5px/1.25 "Inter";color:#6b6e78;width:118px;transition:background .5s,color .5s,transform .5s var(--spring),box-shadow .5s}
.why b{display:block;font:600 17px/1.1 "Inter Tight";letter-spacing:-.03em;color:#0d0d0d;margin-bottom:3px}
.why.on{transform:translateY(-6px);color:#fff;box-shadow:0 14px 26px -10px rgba(0,0,0,.35)}
.why.on b{color:#fff}
.why.c1.on{background:linear-gradient(135deg,#6c7ff0,#a97bd6)}
.why.c2.on{background:linear-gradient(135deg,#f0a82c,#ee7449)}
.why.c3.on{background:linear-gradient(135deg,#6cc53a,#2fae86)}

/* 03 complex -> simple */
.bx-simple{grid-column:3;grid-row:2}
.tangle{position:absolute;left:18px;right:18px;top:58px;width:calc(100% - 36px);height:96px;overflow:visible}
.tangle path{vector-effect:non-scaling-stroke;fill:none;stroke:#0d0d0d;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tangle circle{fill:#8bd33c}
.bx-simple h6{position:absolute;left:24px;bottom:22px;font-size:25px}

/* 04 speed */
.bx-speed{grid-column:4;grid-row:2;background:#111;color:#fff}
.bx-speed .eyebrow{color:#7d7f86}
.bx-speed h6{font-size:25px}
.bx-speed h6 span{color:#6b6e78}
.bars{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.bar{display:grid;grid-template-columns:52px 1fr 40px;align-items:center;gap:8px}
.bar em{font:500 11px/1 "Inter";font-style:normal;color:#8b8d96}
.bar span{height:10px;border-radius:99px;background:#232326;overflow:hidden}
.bar span i{display:block;height:100%;width:0;border-radius:99px;transition:width 1.6s var(--ease)}
.bar b{font:600 11.5px/1 "Inter";text-align:right}
.bar.before span i{background:#55575e}
.bar.after span i{background:#b5f149;transition-delay:.5s}
.bar.after b{color:#b5f149}
.bx-speed.in .bar.before span i{width:100%}
.bx-speed.in .bar.after span i{width:14%}
.bx-speed .tiny{position:absolute;left:24px;right:20px;bottom:20px;color:#7d7f86}

/* 05 ownership */
.bx-ship{grid-column:1/3;grid-row:3;background:#0f0f11;color:#fff;padding:24px 28px}
.bx-ship .eyebrow{color:#7d7f86}
.bx-ship h6 span{color:#6b6e78}
.bx-ship .bx-sub{color:#9a9ca3;max-width:300px}
.steps{position:absolute;left:28px;right:28px;bottom:24px;list-style:none;display:flex;justify-content:space-between}
.steps::before{content:"";position:absolute;left:6px;right:6px;top:6px;height:1.5px;background:#2b2c30}
.steps .prog{position:absolute;left:6px;top:6px;height:1.5px;width:0;background:linear-gradient(90deg,#6c7ff0,#b5f149);box-shadow:0 0 10px #b5f149}
.steps li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;font:500 12px/1 "Inter";color:#6b6e78;transition:color .4s}
.steps li:last-of-type{align-items:flex-end}
.steps li i{width:13px;height:13px;border-radius:50%;background:#0f0f11;border:1.5px solid #3a3b40;transition:background .4s,border-color .4s,box-shadow .4s}
.steps li.on{color:#fff}
.steps li.on i{background:#b5f149;border-color:#b5f149;box-shadow:0 0 0 4px rgba(181,241,73,.15)}

/* 06 business */
.bx-biz{grid-column:3;grid-row:3;padding:0}
.bx-biz img{position:absolute;left:0;top:0;width:100%;height:auto;transition:transform 1s var(--ease)}
.bx-biz:hover img{transform:translateY(-14%)}
.biz-fade{position:absolute;inset:auto 0 0 0;height:110px;background:linear-gradient(rgba(242,243,247,0),#f2f3f7 62%);z-index:1}
.bx-biz h6{position:absolute;left:22px;bottom:18px;z-index:2;font-size:24px}

/* 07 resume */
.bx-cv{grid-column:4;grid-row:3;background:#c6f36a;background-image:radial-gradient(circle,rgba(120,190,20,.35) 1px,transparent 1.5px);background-size:6px 6px}
.bx-cv .eyebrow{color:#4b6a12}
.bx-cv img{position:absolute;right:16px;top:30px;width:78px;transform:rotate(10deg);transition:transform .6s var(--spring)}
.bx-cv:hover img{transform:rotate(-4deg) translateY(-6px) scale(1.06)}
.bx-cv h6{position:absolute;left:24px;bottom:44px;font-size:25px;line-height:1.02}
.cv-meta{position:absolute;left:24px;bottom:22px;font:500 11.5px/1 "Inter";color:#4b6a12}
.cv-go{position:absolute;right:18px;bottom:18px;width:38px;height:38px;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center;transition:transform .5s var(--spring)}
.bx-cv:hover .cv-go{transform:translateY(3px)}

/* 08 industries */
.bx-ind{grid-column:1/5;grid-row:4;display:flex;align-items:center;gap:22px;padding:0 24px;background:#fff;box-shadow:inset 0 0 0 1px #eceef3}
.bx-ind ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.bx-ind li{padding:9px 14px;border-radius:99px;background:#f2f3f7;font:500 13px/1 "Inter";letter-spacing:-.01em;color:#2a2c33;transition:background .3s,color .3s,transform .4s var(--spring)}
.bx-ind li:hover{background:#111;color:#fff;transform:translateY(-2px)}

/* project tags */
.ptags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ptags span{padding:6px 10px;border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1px #e6e7ec;font:500 11.5px/1 "Inter";color:#4a4c55}

/* crossing tapes */
.tapes{position:relative;height:230px;overflow:hidden;margin-top:-120px;margin-bottom:0;z-index:2}
.tape{position:absolute;left:-5%;width:110%;height:62px;display:flex;align-items:center;overflow:hidden}
.tape-a{top:70px;background:#c6f36a;transform:rotate(-3deg);z-index:2;box-shadow:0 10px 30px -12px rgba(120,190,20,.6)}
.tape-b{top:88px;background:#0f0f11;transform:rotate(2.5deg)}
.tape-track{display:flex;white-space:nowrap;animation:tape 38s linear infinite}
.tape-b .tape-track{animation-direction:reverse;animation-duration:30s}
.tape span{font:600 26px/1 "Inter Tight";letter-spacing:-.03em;text-transform:uppercase;padding-right:12px}
.tape-a span{color:#111}
.tape-b span{color:#fff}
@keyframes tape{to{transform:translateX(-50%)}}

/* footer: spinning availability badge */
.f-badge{position:absolute;right:0;top:450px;width:128px;height:128px;display:grid;place-items:center}
.f-badge>svg{position:absolute;inset:0;animation:spin 16s linear infinite}
.f-badge text{font:600 10.2px "Inter";letter-spacing:.2em;fill:#fff;text-transform:uppercase}
.f-badge b{width:52px;height:52px;border-radius:50%;background:#b5f149;color:#111;display:grid;place-items:center;transition:transform .5s var(--spring)}
.f-badge:hover b{transform:scale(1.12) rotate(45deg)}

@media (max-width:1060px){
  .bring{padding:60px 20px}
  .bento2{width:auto;margin:30px 0 0;grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:minmax(210px,auto)}
  .bx-exp{grid-column:1/3;grid-row:auto;min-height:440px}
  .bx-think,.bx-ship,.bx-ind{grid-column:1/3;grid-row:auto}
  .bx-simple,.bx-speed,.bx-biz,.bx-cv{grid-column:auto;grid-row:auto}
  .bx-think{min-height:260px}.whys{flex-wrap:wrap}.whys i{display:none}.why{width:auto;flex:1}
  .bx-ship{min-height:250px}.bx-ind{flex-direction:column;align-items:flex-start;padding:20px;gap:12px}
  .bx-exp .big{font-size:110px}.bx-man{height:260px}
  .tape span{font-size:18px}.tapes{height:170px;margin:0}
  .f-badge{position:relative;top:auto;margin-top:30px}
}
@media (max-width:520px){.bento2{grid-template-columns:1fr}.bx-simple,.bx-speed,.bx-biz,.bx-cv{grid-column:1}.bx-exp{grid-column:1}.bx-think,.bx-ship,.bx-ind{grid-column:1}}