/* ===== v3 (Oct 14 2026): tab structure. Home | Product Design | Web3 Designs | AI. Same palette & fonts. ===== */
.tb-site{--hh:113px}
html{scroll-padding-top:var(--hh)}
.tb-site [id]{scroll-margin-top:calc(var(--hh) + 12px)}

/* HEADER */
.tb-head{position:sticky;top:0;z-index:60;background:rgba(10,10,10,.84);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line)}
.tb-bar{height:68px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--pad);max-width:1440px;margin:0 auto}
.tb-brand{display:flex;align-items:center;gap:12px;min-width:0}
.tb-logo{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;border:1px solid rgba(196,160,255,.55);box-shadow:0 0 0 3px rgba(196,160,255,.08);background:#000}
.tb-name{font-family:var(--serif);font-variation-settings:"SOFT" 100,"opsz" 32;font-size:20px;line-height:1;color:#fff;white-space:nowrap}
.tb-name em{color:#fff}
.tb-name small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--lilac);margin-top:5px}
.tb-hire{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 18px 0 16px;border-radius:999px;background:#161616;border:1px solid rgba(196,160,255,.5);color:#fff;font-size:13.5px;font-weight:600;letter-spacing:.01em;white-space:nowrap;flex:none;transition:background .3s,color .3s,border-color .3s}
.tb-hire:hover{background:var(--lilac);border-color:var(--lilac);color:#0a0a0a}
.tb-dot{width:7px;height:7px;border-radius:50%;background:var(--lilac);box-shadow:0 0 10px var(--lilac);transition:background .3s}
.tb-hire:hover .tb-dot{background:#0a0a0a;box-shadow:none}
.tb-tabs{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tb-tabs::-webkit-scrollbar{display:none}
.tb-tabs-in{display:flex;gap:34px;padding:0 var(--pad);max-width:1440px;margin:0 auto;width:max-content;min-width:100%}
.tb-tabs a{position:relative;display:block;padding:11px 0 13px;font-size:14.5px;font-weight:600;color:var(--ink3);white-space:nowrap;transition:color .25s}
.tb-tabs a:hover{color:#fff}
.tb-tabs a.on{color:#fff}
.tb-tabs a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--lilac);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.19,1,.22,1)}
.tb-tabs a.on::after{transform:scaleX(1)}
.tb-tabs a:not(.on):hover::after{transform:scaleX(.35);opacity:.6}

/* shared */
.tb-site .card,.tb-site .vtile{opacity:1;transform:none}
.tb-site .eyebrow.left{text-align:left}
.tb-page{max-width:1240px;margin:0 auto;padding:72px var(--pad) 0;box-sizing:content-box}
.tb-phead{max-width:820px}
.tb-title{font-family:var(--serif);font-variation-settings:"SOFT" 100,"opsz" 144;font-weight:400;font-size:clamp(48px,7.4vw,105px);line-height:1;letter-spacing:.005em;color:var(--ink);margin-top:4px}
.tb-intro{margin-top:20px;color:var(--ink3);font-size:16px;line-height:1.6;max-width:560px}
.tb-page .cards.tb-cards{margin:64px 0 0;padding:0;max-width:none;gap:56px}
.tb-cards-tight{margin-top:28px!important}
.tb-sub{display:flex;gap:22px;align-items:flex-start;padding-top:28px;border-top:1px solid var(--line)}
.tb-sub-n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--lilac);padding-top:12px;min-width:22px}
.tb-sub-t{font-family:var(--serif);font-variation-settings:"SOFT" 100,"opsz" 144;font-weight:400;font-size:clamp(38px,5vw,64px);line-height:1.02;color:var(--ink)}
.tb-sub-i{margin-top:12px;color:var(--ink3);font-size:15px;line-height:1.6;max-width:560px}
.tb-subsec{padding-top:110px}
.tb-page .vgrid.tb-vgrid{margin:40px 0 0;padding:0;max-width:none}
.tb-page .vgrid.tb-solo{grid-template-columns:1fr;max-width:860px}
.tb-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.tb-chips a{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:9px 16px;font-size:13px;font-weight:600;color:var(--ink2);transition:border-color .3s,color .3s}
.tb-chips a:hover{border-color:var(--lilac);color:#fff}

/* HOME: hero */
.tb-hero{position:relative;overflow:hidden;padding:110px var(--pad) 90px;min-height:min(78vh,760px);max-width:1440px;margin:0 auto;box-sizing:border-box}
.tb-hero .tb-orb{opacity:1;right:40px;top:40px;width:520px;height:520px}
.tb-hero-h{position:relative;z-index:2;font-family:var(--serif);font-variation-settings:"SOFT" 100,"opsz" 144;font-weight:400;font-size:clamp(40px,5.8vw,80px);line-height:1.14;color:var(--ink);max-width:1120px;letter-spacing:-.005em;text-shadow:0 2px 24px rgba(10,10,10,.5);animation:tbUp 1s cubic-bezier(.19,1,.22,1) both}
.tb-widget{position:relative;z-index:2;display:inline-flex;gap:40px;margin-top:56px;background:#111;border:1px solid var(--line);border-radius:14px;padding:16px 20px;animation:tbUp 1s .15s cubic-bezier(.19,1,.22,1) both}
@keyframes tbUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

/* HOME: about */
.tb-about{padding:90px var(--pad) 40px}
.tb-photos{position:relative;max-width:420px}
.tb-photos .about-photo{margin:0}
.tb-ph2{position:absolute;right:-26px;bottom:-26px;width:132px;margin:0;border-radius:24px;overflow:hidden;border:1.5px solid var(--line);background:#000;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.tb-ph2 img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.tb-ph2 figcaption{position:absolute;left:10px;bottom:8px;font-size:8.5px;color:var(--lilac)}
.tb-about .facts li b{font-size:13px;color:var(--ink3);font-weight:500}

/* HOME: experience */
.tb-exp{max-width:1240px;margin:0 auto;padding:110px var(--pad) 0;box-sizing:content-box}
.tb-exp-list{list-style:none;margin-top:36px;border-top:1px solid var(--line)}
.tb-exp-list a{display:grid;grid-template-columns:170px 1fr 40px;gap:24px;align-items:center;padding:26px 6px;border-bottom:1px solid var(--line);transition:background .3s}
.tb-exp-list a:hover{background:#0f0f0f}
.tb-exp-y{color:var(--lilac)!important}
.tb-exp-m{display:flex;flex-direction:column;gap:5px}
.tb-exp-o{font-family:var(--serif);font-variation-settings:"SOFT" 100,"opsz" 72;font-size:28px;line-height:1.1;color:#fff}
.tb-exp-r{font-size:14px;font-weight:600;color:var(--ink2)}
.tb-exp-n{font-size:14px;color:var(--ink3);line-height:1.5}
.tb-exp-a{font-size:20px;color:var(--ink3);justify-self:end;transition:transform .4s cubic-bezier(.19,1,.22,1),color .3s}
.tb-exp-list a:hover .tb-exp-a{transform:translateX(6px);color:var(--lilac)}

/* HOME: reel */
.tb-reel{max-width:1240px;margin:0 auto;padding:110px var(--pad) 0;box-sizing:content-box}
.tb-reel-m{border-radius:28px;overflow:hidden;border:1.5px solid var(--line);background:#000;aspect-ratio:16/9}
.tb-reel-m video{width:100%;height:100%;object-fit:cover;display:block}
.tb-reel-c{display:flex;justify-content:space-between;gap:16px;margin-top:14px;font-size:14px;color:var(--ink2)}

/* HOME: explore */
.tb-explore{max-width:1240px;margin:0 auto;padding:110px var(--pad) 0;box-sizing:content-box}
.tb-ex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px}
.tb-ex{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1.5px solid var(--line);border-radius:24px;padding:12px 12px 20px;transition:border-color .4s}
.tb-ex:hover{border-color:rgba(196,160,255,.5)}
.tb-ex-img{display:block;border-radius:14px;overflow:hidden;aspect-ratio:16/10;background:#000;margin-bottom:8px}
.tb-ex-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.19,1,.22,1)}
.tb-ex:hover .tb-ex-img img{transform:scale(1.04)}
.tb-ex-t{font-family:var(--serif);font-variation-settings:"SOFT" 100,"opsz" 72;font-size:26px;color:#fff;padding:0 6px}
.tb-ex-t i{font-style:normal;color:var(--lilac);font-family:var(--sans);font-size:18px}
.tb-ex-d{font-size:13px;color:var(--ink3);padding:0 6px}

/* HOME: contact */
.tb-contact{position:relative;overflow:hidden;text-align:center;padding:150px var(--pad) 40px;margin-top:110px;border-top:1px solid var(--line);min-height:620px;display:flex;flex-direction:column;align-items:center}
.tb-contact>*{position:relative;z-index:1}
.tb-contact .foot-orb{position:absolute;z-index:0}
.tb-contact-t{font-family:var(--serif);font-variation-settings:"SOFT" 100,"opsz" 144;font-weight:400;font-size:clamp(40px,6vw,84px);line-height:1.05;color:var(--ink);max-width:900px;margin-top:8px}
.tb-contact-b{margin-top:20px;color:var(--ink2);font-size:16px;line-height:1.6;max-width:520px}
.tb-mail{margin-top:34px!important;font-size:16px}
.tb-socials{justify-content:center;margin-top:26px}
.tb-contact .rights{margin-top:auto;padding-top:120px}

/* small footer on the other tabs */
.tb-foot{max-width:1240px;margin:130px auto 0;padding:44px var(--pad) 44px;box-sizing:content-box;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.tb-foot .foot-label{margin-bottom:14px}
.tb-hire.big{height:48px;padding:0 24px 0 20px;font-size:15px}
.tb-foot-r{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.tb-foot-r .socials{margin-top:0}
.tb-foot-r .rights{margin-top:6px}

/* case pages under the new header */
.case-page.tb-site .case{padding-top:56px}

/* MOBILE */
@media (max-width:900px){
  .tb-site{--hh:105px}
  .tb-bar{height:62px;padding:0 16px 0 18px}
  .tb-logo{width:34px;height:34px}
  .tb-name{font-size:17px}
  .tb-name small{font-size:8.5px;margin-top:4px}
  .tb-hire{height:36px;padding:0 14px 0 12px;font-size:13px;gap:7px}
  .tb-tabs-in{gap:24px;padding:0 18px}
  .tb-tabs a{font-size:14px;padding:10px 0 12px}
  .tb-page{padding-top:44px}
  .tb-intro{font-size:15px}
  .tb-page .cards.tb-cards{margin-top:40px;gap:36px}
  .tb-subsec{padding-top:80px}
  .tb-sub{gap:14px}
  .tb-sub-n{min-width:auto}
  .tb-page .vgrid.tb-vgrid{margin-top:28px}
  .tb-hero{padding:64px var(--pad) 60px;min-height:0}
  .tb-hero .tb-orb{width:280px;height:280px;right:-90px;top:auto;bottom:-40px;opacity:.75}
  .tb-hero-h{font-size:40px;line-height:1.16}
  .tb-widget{flex-direction:row;gap:26px;margin-top:40px;padding:14px 16px}
  .tb-about{padding:60px var(--pad) 20px}
  .tb-photos{max-width:300px}
  .tb-ph2{width:104px;right:-18px;bottom:-18px;border-radius:18px}
  .tb-exp,.tb-reel,.tb-explore{padding-top:80px}
  .tb-exp-list a{grid-template-columns:1fr 24px;gap:8px 12px;padding:22px 2px}
  .tb-exp-y{grid-column:1 / -1}
  .tb-exp-o{font-size:24px}
  .tb-reel-m{border-radius:18px}
  .tb-reel-c{flex-direction:column;gap:4px}
  .tb-ex-grid{grid-template-columns:1fr;gap:16px}
  .tb-contact{padding:110px var(--pad) 30px;margin-top:80px;min-height:540px}
  .tb-foot{margin-top:90px;flex-direction:column;align-items:flex-start}
  .tb-foot-r{align-items:flex-start}
  .case-page.tb-site .case{padding-top:36px}
}
@media (max-width:380px){
  .tb-name small{display:none}
  .tb-tabs-in{gap:20px}
}

/* ===== v4 (Oct 16 2026): About | UI/UX Designs | AI / Motion Designs | Brand Designs | Video Edits. Same palette & fonts as v3. ===== */

/* ABOUT: hero = ONE big-font sentence again (v5, her 2:19 PM voice note: "exactly like that ... in a big font"); desktop uses the v3 .tb-hero-h rule above */
.tb-swapped .tb-hero-h,.tb-swapped .tb-widget{animation:none}

/* ABOUT: the loop that replaces the photo */
.tb-loop{max-width:1240px;margin:0 auto;padding:10px var(--pad) 0;box-sizing:content-box}
.tb-loop-m{max-width:880px;border-radius:28px;overflow:hidden;border:1.5px solid var(--line);background:#000;aspect-ratio:16/9;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.tb-loop-m video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}

/* ABOUT: text */
.tb-about{max-width:1240px;margin:0 auto;padding:90px var(--pad) 0;box-sizing:content-box}
.tb-about-b{font-family:var(--serif);font-variation-settings:"SOFT" 100,"opsz" 72;font-weight:400;font-size:clamp(26px,3vw,40px);line-height:1.3;color:var(--ink);max-width:900px;margin-top:14px}
.tb-about-h{display:inline-block;margin-top:22px;font-family:var(--mono);font-size:13px;letter-spacing:.14em;color:var(--lilac)}

/* ABOUT: experience, short form, nothing clickable */
.tb-exp-list li{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:start;padding:26px 6px;border-bottom:1px solid var(--line)}
.tb-exp-y{padding-top:8px;font-size:12px;letter-spacing:.08em}
.tb-exp-m{gap:8px}
.tb-exp-r{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:15px;font-weight:600;color:var(--ink2);line-height:1.45}
.tb-exp-d{font-weight:500;color:var(--ink3);font-size:13.5px;white-space:nowrap}

/* ABOUT: explore my categories (4 tiles) */
.tb-ex-grid{grid-template-columns:repeat(2,1fr)}
.tb-ex-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;background:radial-gradient(60% 70% at 50% 50%,rgba(196,160,255,.16),rgba(10,10,10,0) 70%),#0d0d0d;color:var(--ink3);font-size:11px;letter-spacing:.22em}
.tb-ex-ph .soon-orb{position:static}

@media (max-width:900px){
  /* v5 MOBILE HERO like teslimalabi.com's mobile hero (her 2:30 PM ask): one 43px serif sentence, line-height 1.15,
     an iridescent glass bubble behind it on the right, and the dark gradient "Working out of / Local Time" bubble card. Styling only, her words. */
  .tb-hero{padding:84px 20px 56px}
  .tb-hero-h{font-size:43px;line-height:1.15;letter-spacing:normal;color:#dfe1e4;text-shadow:none}
  .tb-hero .tb-orb{width:416px;height:416px;right:-206px;top:118px;bottom:auto;opacity:1;z-index:1}
  .tb-hero .tb-orb .orb{backdrop-filter:none;-webkit-backdrop-filter:none}
  .tb-hero .tb-orb .orb-core{background:
     radial-gradient(circle at 34% 30%, rgba(255,255,255,.10) 0, rgba(255,255,255,0) 22%),
     radial-gradient(circle at 30% 55%, rgba(150,160,180,.12) 0, rgba(0,0,0,0) 30%),
     radial-gradient(circle at 62% 64%, rgba(70,110,160,.18) 0, rgba(40,60,90,.08) 30%, rgba(0,0,0,0) 58%),
     radial-gradient(circle at 50% 50%, rgba(18,20,26,.30) 0, rgba(12,13,18,.55) 62%, rgba(10,10,10,0) 71%);
     box-shadow:none}
  .tb-hero .tb-orb .orb-ring{inset:0;padding:0;filter:blur(4px);opacity:.9;
     background:conic-gradient(from 0deg, #6d6bff 0deg, #4fc8ff 70deg, #5fe8c0 140deg, #b8f06a 190deg, #ffd84d 215deg, #ff9a3c 240deg, #ff4d6d 268deg, #d05bff 305deg, #6d6bff 360deg);
     -webkit-mask:radial-gradient(circle, transparent 0 52%, rgba(0,0,0,.35) 60%, #000 67.5%, #000 69.5%, transparent 71%), linear-gradient(95deg, #000 0%, rgba(0,0,0,.8) 35%, rgba(0,0,0,.22) 70%, rgba(0,0,0,.08) 100%);
     -webkit-mask-composite:source-in;
     mask:radial-gradient(circle, transparent 0 52%, rgba(0,0,0,.35) 60%, #000 67.5%, #000 69.5%, transparent 71%), linear-gradient(95deg, #000 0%, rgba(0,0,0,.8) 35%, rgba(0,0,0,.22) 70%, rgba(0,0,0,.08) 100%);
     mask-composite:intersect;
     animation:none}
  .tb-hero .tb-orb .orb-gloss{left:20%;top:12%;width:34%;height:16%;background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.22),rgba(255,255,255,0) 70%);filter:blur(6px)}
  .tb-widget{display:flex;width:max-content;max-width:100%;box-sizing:border-box;gap:30px;margin-top:30px;padding:20px;border:0;border-radius:14px;
     background:linear-gradient(180deg, rgb(61,61,61) 0%, rgb(31,31,31) 11%, rgb(10,10,10) 100%)}
  .tb-widget::after{content:"";position:absolute;inset:0;border-radius:14px;border:1px solid rgb(38,38,38);pointer-events:none}
  .tb-widget .w-item{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"l l" "i v";column-gap:8px;row-gap:8px;align-items:center;padding-right:10px}
  .tb-widget .w-item > div{display:contents}
  .tb-widget .w-item svg{grid-area:i;margin:0;width:16px;height:16px;color:rgba(255,255,255,.8)}
  .tb-widget .w-label{grid-area:l;font-family:Manrope,sans-serif;font-size:13px;line-height:1.3;color:rgba(255,255,255,.5)}
  .tb-widget .w-value{grid-area:v;margin:0;font-family:Manrope,sans-serif;font-size:15px;font-weight:600;line-height:18px;color:rgba(255,255,255,.8)}
  .tb-loop{padding-top:0}
  .tb-loop-m{border-radius:20px}
  .tb-about{padding-top:64px}
  .tb-about-b{font-size:25px}
  .tb-exp-list li{grid-template-columns:1fr;gap:8px;padding:22px 2px}
  .tb-exp-y{padding-top:0}
  .tb-exp-o{font-size:24px}
  .tb-exp-r{flex-direction:column;gap:2px;font-size:14.5px}
  .tb-exp-d{white-space:normal}
  .tb-ex-grid{grid-template-columns:1fr}
}


/* ===== v6 (Oct 16 2026) ===== */
/* 2. DESKTOP HERO = MOBILE LOOK: iridescent glass bubble (no purple) + dark gradient location/time card */
@media (min-width:901px){
  .tb-hero .tb-orb .orb{backdrop-filter:none;-webkit-backdrop-filter:none}
  .tb-hero .tb-orb .orb-core{background:
     radial-gradient(circle at 34% 30%, rgba(255,255,255,.10) 0, rgba(255,255,255,0) 22%),
     radial-gradient(circle at 30% 55%, rgba(150,160,180,.12) 0, rgba(0,0,0,0) 30%),
     radial-gradient(circle at 62% 64%, rgba(70,110,160,.18) 0, rgba(40,60,90,.08) 30%, rgba(0,0,0,0) 58%),
     radial-gradient(circle at 50% 50%, rgba(18,20,26,.30) 0, rgba(12,13,18,.55) 62%, rgba(10,10,10,0) 71%);
     box-shadow:none}
  .tb-hero .tb-orb .orb-ring{inset:0;padding:0;filter:blur(4px);opacity:.9;
     background:conic-gradient(from 0deg, #6d6bff 0deg, #4fc8ff 70deg, #5fe8c0 140deg, #b8f06a 190deg, #ffd84d 215deg, #ff9a3c 240deg, #ff4d6d 268deg, #d05bff 305deg, #6d6bff 360deg);
     -webkit-mask:radial-gradient(circle, transparent 0 52%, rgba(0,0,0,.35) 60%, #000 67.5%, #000 69.5%, transparent 71%), linear-gradient(95deg, #000 0%, rgba(0,0,0,.8) 35%, rgba(0,0,0,.22) 70%, rgba(0,0,0,.08) 100%);
     -webkit-mask-composite:source-in;
     mask:radial-gradient(circle, transparent 0 52%, rgba(0,0,0,.35) 60%, #000 67.5%, #000 69.5%, transparent 71%), linear-gradient(95deg, #000 0%, rgba(0,0,0,.8) 35%, rgba(0,0,0,.22) 70%, rgba(0,0,0,.08) 100%);
     mask-composite:intersect;
     animation:none}
  .tb-hero .tb-orb .orb-gloss{left:20%;top:12%;width:34%;height:16%;background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.22),rgba(255,255,255,0) 70%);filter:blur(6px)}
  .tb-widget{border:0;background:linear-gradient(180deg, rgb(61,61,61) 0%, rgb(31,31,31) 11%, rgb(10,10,10) 100%);padding:20px}
  .tb-widget::after{content:"";position:absolute;inset:0;border-radius:14px;border:1px solid rgb(38,38,38);pointer-events:none}
  .tb-widget .w-item{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"l l" "i v";column-gap:8px;row-gap:8px;align-items:center;padding-right:10px}
  .tb-widget .w-item > div{display:contents}
  .tb-widget .w-item svg{grid-area:i;margin:0;width:16px;height:16px;color:rgba(255,255,255,.8)}
  .tb-widget .w-label{grid-area:l;font-family:Manrope,sans-serif;font-size:13px;line-height:1.3;color:rgba(255,255,255,.5)}
  .tb-widget .w-value{grid-area:v;margin:0;font-family:Manrope,sans-serif;font-size:15px;font-weight:600;line-height:18px;color:rgba(255,255,255,.8)}
  /* 3. DESKTOP ABOUT: video + text span the full content width (same box as the nav bar) */
  .tb-loop,.tb-about{max-width:1440px;box-sizing:border-box;padding-left:var(--pad);padding-right:var(--pad)}
  .tb-loop-m{max-width:none;width:100%}
  .tb-about-b{max-width:none}
}
/* clock: blinking colon */
.tb-colon{animation:tbBlink 1s steps(1,end) infinite}
@keyframes tbBlink{50%{opacity:0}}
/* 1. MOTION (only when JS adds .tb-motion, never with reduced motion) */
.tb-motion .tb-hero-h.tb-split{animation:none}
.tb-w{display:inline-block;opacity:0;transform:translateY(.45em);will-change:transform,opacity}
.tb-go .tb-w{animation:tbWord .9s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i) * 40ms)}
@keyframes tbWord{to{opacity:1;transform:none}}
.tb-motion .tb-widget.tb-rise{animation:tbRise 1s .45s cubic-bezier(.22,1,.36,1) both}
@keyframes tbRise{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
.tb-l{display:inline-block;opacity:0;filter:blur(10px);will-change:filter,opacity}
.tb-in .tb-l{animation:tbBlur .7s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i) * 18ms)}
@keyframes tbBlur{to{opacity:1;filter:blur(0)}}
.tb-nw{white-space:nowrap}
.tb-rv{opacity:0;transform:translateY(36px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0ms)}
.tb-tilt{opacity:0;transform:perspective(1200px) translateY(50px) scale(.92) rotateX(18deg);transform-origin:50% 100%;transition:opacity .9s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0ms)}
.tb-rv.tb-in,.tb-tilt.tb-in{opacity:1;transform:none}
.tb-now,.tb-now .tb-l,.tb-now .tb-w{transition:none!important;animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
@media (prefers-reduced-motion:reduce){.tb-w,.tb-l,.tb-rv,.tb-tilt{opacity:1!important;transform:none!important;filter:none!important;animation:none!important;transition:none!important}.tb-colon{animation:none}}


/* ===== BIG BUBBLE (Oct 16 2026, her voice note: "make it do exactly like that Teslim thingy, it expands like some sort of way").
   Same mechanism as teslimalabi.com's hero bubble (a WebGL scene): spins in once (252deg -> 0, 5 s, easeInOutQuad, 1 s delay,
   2 s linear fade), then sits still; the cursor drags a liquid smear through it that springs back. bubble.js draws it on the
   canvas below; the CSS bubble stays underneath as the fallback. No layout change; pointer-events:none. */
.tb-hero .tb-orb .orb{animation:none}
.tb-hero .tb-orb .tb-orb-gl{position:absolute;left:50%;top:50%;width:258%;height:129%;transform:translate(-50%,-50%);pointer-events:none;display:block;opacity:0}
.tb-hero .tb-orb.tb-gl-on .orb>*{visibility:hidden}
@media (prefers-reduced-motion:no-preference){
  .tb-hero .tb-orb.tb-orb-intro:not(.tb-gl-on) .orb{animation:tbOrbSpin 5s cubic-bezier(.455,.03,.515,.955) 1s both,tbOrbFade 2s linear 1s both}
}
@media (prefers-reduced-motion:reduce){.tb-hero .tb-orb .tb-orb-gl{display:none}}
@keyframes tbOrbSpin{from{transform:rotate(252deg)}to{transform:none}}
@keyframes tbOrbFade{from{opacity:0}to{opacity:1}}
/* the small follower bubble: same iridescent glass, smaller */
#tb-bf{position:fixed;left:0;top:0;width:52px;height:52px;margin:-26px 0 0 -26px;pointer-events:none;z-index:55;opacity:0;transform:translate3d(-300px,-300px,0);will-change:transform,opacity}
#tb-bf .bf-in{position:absolute;inset:0;border-radius:50%;animation:tbBfBreathe 3.4s ease-in-out infinite}
#tb-bf .bf-core{position:absolute;inset:0;border-radius:50%;background:
   radial-gradient(circle at 34% 30%, rgba(255,255,255,.16) 0, rgba(255,255,255,0) 26%),
   radial-gradient(circle at 62% 64%, rgba(70,110,160,.26) 0, rgba(40,60,90,.10) 32%, rgba(0,0,0,0) 60%),
   radial-gradient(circle at 50% 50%, rgba(18,20,26,.10) 0, rgba(12,13,18,.24) 62%, rgba(10,10,10,0) 71%)}
#tb-bf .bf-ring{position:absolute;inset:0;border-radius:50%;filter:blur(.8px);opacity:.95;
   background:conic-gradient(from 0deg, #6d6bff 0deg, #4fc8ff 70deg, #5fe8c0 140deg, #b8f06a 190deg, #ffd84d 215deg, #ff9a3c 240deg, #ff4d6d 268deg, #d05bff 305deg, #6d6bff 360deg);
   -webkit-mask:radial-gradient(circle, transparent 0 50%, rgba(0,0,0,.35) 58%, #000 64%, #000 69%, transparent 71%), linear-gradient(95deg, #000 0%, rgba(0,0,0,.85) 35%, rgba(0,0,0,.35) 70%, rgba(0,0,0,.18) 100%);
   -webkit-mask-composite:source-in;
   mask:radial-gradient(circle, transparent 0 50%, rgba(0,0,0,.35) 58%, #000 64%, #000 69%, transparent 71%), linear-gradient(95deg, #000 0%, rgba(0,0,0,.85) 35%, rgba(0,0,0,.35) 70%, rgba(0,0,0,.18) 100%);
   mask-composite:intersect;animation:tbBfSpin 9s linear infinite}
#tb-bf .bf-gloss{position:absolute;left:22%;top:14%;width:36%;height:20%;border-radius:50%;background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.45),rgba(255,255,255,0) 70%);filter:blur(1.5px)}
@keyframes tbBfBreathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.07,1.03)}}
@keyframes tbBfSpin{to{transform:rotate(360deg)}}
@media (hover:none),(pointer:coarse){#tb-bf{width:36px;height:36px;margin:-18px 0 0 -18px}}
@media (prefers-reduced-motion:reduce){#tb-bf{display:none!important}}

/* Oct 16 4:25 PM: location on the right of each experience org */
.tb-exp-oh{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.tb-exp-l{font-size:13.5px;font-weight:500;color:var(--lilac);white-space:nowrap;letter-spacing:.02em}
@media (max-width:760px){.tb-exp-l{font-size:12.5px}}

/* hide iOS native play overlay on muted loops */
video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none;opacity:0!important}
video::-webkit-media-controls{display:none!important}
video::-webkit-media-controls-panel{display:none!important}

/* Oct 18: card title purple, role line removed (her ask) */
h3.outcome{color:#C4A0FF !important}
h3.outcome + p.role{display:none !important}

/* Oct 18: tag pills all white (her ask) */
.badge,.badge.accent{color:#fff !important;border-color:rgba(255,255,255,.4) !important;background:transparent !important}

/* Oct 18 12:39 her ask: card titles white, bold, thicker, Title Case, all sections */
h3.outcome{color:#fff !important;font-family:var(--sans,"General Sans",Inter,sans-serif) !important;font-weight:700 !important;font-variation-settings:normal !important;text-transform:capitalize !important;letter-spacing:-0.01em}

/* Oct 18 12:52 her ask: lower opacity on card descriptions for hierarchy, all sections */
.desc,p.desc{color:rgba(255,255,255,.58) !important}

.tb-ex-img video{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.19,1,.22,1)}.tb-ex:hover .tb-ex-img video{transform:scale(1.04)}

/* Oct 18 2026 3:07 PM her ask: UI/UX page in doubles, left column one group, right column the other (no labels), desktop + mobile */
body[data-tab="uiux"] .tb-page .cards.tb-split{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;max-width:1240px}
body[data-tab="uiux"] .tb-split .tb-col{display:flex;flex-direction:column;gap:32px;min-width:0}
body[data-tab="uiux"] .tb-split .card{gap:26px;padding:16px 16px 26px;border-radius:26px}
body[data-tab="uiux"] .tb-split .card-body{grid-template-columns:1fr;gap:16px;padding:0 8px}
body[data-tab="uiux"] .tb-split .card-media{border-radius:14px}
@media (max-width:820px){
 body[data-tab="uiux"] .tb-page .cards.tb-split{gap:10px;padding:0 12px}
 body[data-tab="uiux"] .tb-split .tb-col{gap:10px}
 body[data-tab="uiux"] .tb-split .card{gap:10px;padding:7px 7px 12px;border-radius:16px}
 body[data-tab="uiux"] .tb-split .card-media{border-radius:10px}
 body[data-tab="uiux"] .tb-split .card-body{gap:6px;padding:0 3px}
 body[data-tab="uiux"] .tb-split .brand{font-size:8px;letter-spacing:1.2px}
 body[data-tab="uiux"] .tb-split .brand-row{gap:5px;margin-bottom:5px}
 body[data-tab="uiux"] .tb-split .outcome{font-size:13px;line-height:16px}
 body[data-tab="uiux"] .tb-split .role,body[data-tab="uiux"] .tb-split .badges,body[data-tab="uiux"] .tb-split .desc{display:none}
 body[data-tab="uiux"] .tb-split .card-cta{font-size:9px;letter-spacing:.08em}
}

/* Oct 18 2026 3:16 PM her ask: phone 2-col was ugly, take it back -> 1 column on phone */
@media (max-width:820px){
 body[data-tab="uiux"] .tb-page .cards.tb-split{display:flex;flex-direction:column;gap:24px;padding:0}
 body[data-tab="uiux"] .tb-split .tb-col{gap:24px}
 body[data-tab="uiux"] .tb-split .card{gap:18px;padding:14px 14px 22px;border-radius:24px}
 body[data-tab="uiux"] .tb-split .brand{font-size:11px;letter-spacing:2px}
 body[data-tab="uiux"] .tb-split .outcome{font-size:20px;line-height:26px}
 body[data-tab="uiux"] .tb-split .badges,body[data-tab="uiux"] .tb-split .desc{display:flex}
 body[data-tab="uiux"] .tb-split .desc{display:block}
 body[data-tab="uiux"] .tb-split .card-cta{font-size:12px}
}

/* Oct 18 2026 3:30 PM her ask: location aligned with the date row on phone */
.tb-exp-l2{display:none}
@media (max-width:900px){.tb-exp-yr{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.tb-exp-l1{display:none}.tb-exp-l2{display:inline}}

/* Oct 18 2026 3:50 PM her ask: hm right after warblelive on phone (single column) */
body[data-tab="uiux"] .tb-split .tb-cw{display:flex;flex-direction:column;min-width:0}
@media (max-width:820px){body[data-tab="uiux"] .tb-split .tb-col{display:contents}body[data-tab="uiux"] .tb-split .tb-cw{order:var(--o)}}

/* Oct 18 2026 3:51 PM her ask: every card frame glassmorphism across the site (desktop + mobile) */
.tb-page .card,.tb-page .mp-case,.tb-page .tb-cards .card{background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.02))!important;border:1px solid rgba(255,255,255,.14)!important;-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 18px 50px rgba(0,0,0,.45),0 0 0 1px rgba(196,160,255,.04)!important}
.tb-page .card:hover,.tb-page .mp-case:hover{border-color:rgba(196,160,255,.32)!important}

/* Oct 18 2026 3:58 PM her rule: visual hierarchy, 3 clear opacity levels everywhere (title 100 / sub 72 / meta 45) */
.tb-exp-o,.card .outcome,.tb-page h2,.case-title{color:#fff!important}
.tb-exp-r,.card .role{color:rgba(255,255,255,.72)!important}
.tb-exp-d,.tb-exp-r .tb-exp-d{color:rgba(255,255,255,.42)!important;font-weight:400!important}
.tb-exp-n,.card .desc{color:rgba(255,255,255,.55)!important}
.card .brand{opacity:.6}

/* Oct 18 2026 8:39 PM her ask: desktop UI/UX frames aligned row by row (equal heights, CTAs lined up) */
@media (min-width:821px){
 body[data-tab="uiux"] .tb-page .cards.tb-split{grid-auto-flow:row dense;align-items:stretch;row-gap:32px}
 body[data-tab="uiux"] .tb-split .tb-col{display:contents}
 body[data-tab="uiux"] .tb-split .tb-col:first-child>.tb-cw{grid-column:1}
 body[data-tab="uiux"] .tb-split .tb-col:last-child>.tb-cw{grid-column:2}
 body[data-tab="uiux"] .tb-split .tb-cw>.card{height:100%;display:flex;flex-direction:column}
 body[data-tab="uiux"] .tb-split .tb-cw>.card .card-body{flex:1;display:flex;flex-direction:column}
 body[data-tab="uiux"] .tb-split .tb-cw>.card .card-side{flex:1}
 body[data-tab="uiux"] .tb-split .tb-cw>.card .card-cta{margin-top:auto}
}
 body[data-tab="uiux"] .tb-split .tb-cw:not(:has(.card)){display:none}

/* Oct 18 10:06 PM her ask: hero bubble replaces the purple foot glow, rising from bottom centre; LinkedIn icon only */
.tb-contact .foot-orb{background:none;filter:none;opacity:1;transform:none;animation:none;left:calc(50% - 360px);width:720px;height:720px;bottom:-430px}
.tb-contact .foot-orb .orb-core,.tb-contact .foot-orb .orb-ring,.tb-contact .foot-orb .orb-gloss{opacity:1}
.li-ico{display:inline-flex;align-items:center;color:#0A66C2;transition:opacity .2s}
.li-ico:hover{color:#0A66C2;opacity:.8}
@media (max-width:760px){.tb-contact .foot-orb{width:92vw;height:92vw;left:4vw;bottom:-48vw}}
.tb-contact .foot-orb .orb-core{box-shadow:inset -50px -60px 140px rgba(10,5,30,.8), inset 40px 40px 90px rgba(255,255,255,.08)}
.tb-contact .foot-orb .orb-gloss{opacity:.55}

/* Oct 18 10:14 PM her asks: hero bubble shows at once on load (no delay/fade); less space above Contact */
@media (prefers-reduced-motion:no-preference){.tb-hero .tb-orb.tb-orb-intro:not(.tb-gl-on) .orb{animation:tbOrbSpin 5s cubic-bezier(.455,.03,.515,.955) 0s both}}
.tb-contact{margin-top:56px;padding-top:80px}
@media (max-width:760px){.tb-contact{margin-top:24px;padding-top:44px}}

/* Oct 18 10:17 PM her asks: footer LinkedIn icon bigger and sitting above (outside) the bubble */
.tb-contact .tb-socials{margin-top:26px}
.tb-contact .rights{padding-top:300px}
@media (max-width:760px){.tb-contact .rights{padding-top:calc(44vw + 24px)}}

/* Oct 18 10:53 PM her fix: "too big, follow the drawing" = dome edge to edge of the screen, top just under the LinkedIn icon */
.tb-contact{padding-bottom:110px}
.tb-contact .foot-orb{left:calc(50% - 500px);width:1000px;height:1000px;bottom:-600px}
@media (max-width:760px){.tb-contact{padding-bottom:4vw}.tb-contact .foot-orb{width:100vw;height:100vw;left:0;bottom:-50vw}}

/* Oct 19 10:55 AM her ask (desktop only): on wide screens the tabs ran past the content and the page looked like a big frame around small content. Tabs now line up with the logo; content widens on big screens. Mobile untouched. */
@media (min-width:761px){.tb-tabs-in{min-width:0;width:auto}}
@media (min-width:1600px){
  .tb-bar,.tb-tabs-in,.tb-hero,.foot-row{max-width:1680px}
  .tb-page,.tb-exp,.tb-reel,.tb-explore,.tb-foot,.cards,.card,.case,.vgrid,.back-row,.about-grid{max-width:1480px}
  .tb-loop,.tb-about{max-width:1680px}
  .tb-hero-h{max-width:1320px}
}

/* Oct 19 11:05 AM her ask: UI/UX page like the motion page: one big card first (WarbleLive), then the rest in doubles, filling the full width (no empty gap on the right). Desktop only; phone unchanged. */
@media (min-width:821px){
 body[data-tab="uiux"] .tb-page .cards.tb-split{max-width:none;width:100%;grid-auto-flow:row}
 body[data-tab="uiux"] .tb-split .tb-col{display:contents}
 body[data-tab="uiux"] .tb-split .tb-col>.tb-cw{grid-column:auto!important;order:var(--o)}
 body[data-tab="uiux"] .tb-split .tb-col>.tb-cw[style*="--o:0"]{grid-column:1/-1!important}
}

/* Oct 19 11:10 AM her ask: "take that down" = footer copyright lower inside the dome. Desktop only. */
@media (min-width:761px){.tb-contact .rights{padding-top:370px}}

/* Oct 20 2026 8:21 PM her ask "there should be space": breathing room between the tag pills and VIEW PROJECT on every project card (cards with no description) */
.card .card-side:has(>.card-cta:first-child){padding-top:22px}
@media (max-width:600px){.card .card-side:has(>.card-cta:first-child){padding-top:20px}}