/* BitBaki website: page layout. Components live in components.css */
:root{--gutter:24px;--cols:4}
@media (max-width:1023px){:root{--cols:2}}
@media (max-width:639px){:root{--gutter:16px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font-sans);font-size:16px;line-height:26px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.wrap{position:relative;z-index:1;width:100%;max-width:1320px;margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:var(--space-4);top:-100px;z-index:100;padding:var(--space-3) var(--space-4);background:var(--surface-inverse);color:var(--ink-inverse);border-radius:var(--radius-pill)}
.skip:focus{top:var(--space-3)}

/* column lines, repeated on every section */
.has-grid{position:relative}
.has-grid::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);z-index:0;pointer-events:none;
  width:calc(min(1320px,100%) - 2 * var(--gutter));
  background:
    linear-gradient(var(--line),var(--line)) right top/1px 100% no-repeat,
    repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px calc(100% / var(--cols)))}
@media (max-width:639px){.has-grid::before{display:none}}

/* type */
.label{font-family:var(--font-mono);font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.display-xxl,.display-xl,.display-l,.heading-2{font-family:var(--font-display);font-weight:700}
.display-xxl{font-size:clamp(56px,11vw,144px);line-height:.92;letter-spacing:-.045em}
.display-xl{font-size:clamp(44px,6.7vw,96px);line-height:.92;letter-spacing:-.04em;max-width:15ch}
.display-xl--wide{max-width:19ch}
.display-l{font-size:clamp(40px,4.4vw,64px);line-height:.95;letter-spacing:-.03em;max-width:18ch}
.heading-2{font-size:28px;line-height:32px;letter-spacing:-.01em}
.body-l{font-size:18px;line-height:28px}
.body-s{font-size:14px;line-height:22px;color:var(--ink-muted)}
.dim{color:var(--ink-faint)}
.dot{color:var(--accent)}

/* larger hit area for text links without changing their look */
.bb-link{position:relative}
.bb-link::before{content:"";position:absolute;inset:-14px -6px}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav__inner{display:flex;align-items:center;gap:var(--space-5);min-height:64px}
.nav__logo{display:block;margin-right:auto}
.nav__logo img{width:120px;height:auto}
.nav__links{display:none;gap:var(--space-6);font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.nav__links a,.nav__panel a{text-decoration:none}
.nav__links a{position:relative;padding-block:6px}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__cta{display:none}
.nav__lang{display:inline-flex;align-items:center;padding:3px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase}
.nav__lang-item{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:36px;padding:6px 10px;border-radius:var(--radius-pill);text-decoration:none;color:var(--ink-muted);transition:background-color .2s ease,color .2s ease}
.nav__lang-item::after{content:"";position:absolute;inset:-6px -2px}
a.nav__lang-item:hover{background:var(--surface-sunken);color:var(--ink)}
.nav__lang-item.is-current{background:var(--ink);color:var(--surface)}
.nav__logo{flex:none}
@media (max-width:639px){
  .nav__inner{gap:var(--space-3)}
  .nav__logo img{width:104px}
  .nav__lang-item{min-width:30px;padding:5px 8px}
}
@media (max-width:359px){.nav .nav__wa{display:none}}
.nav__wa,.nav__menu{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:var(--ink);background:none;border:0;cursor:pointer;font:inherit}
.nav__menu-label{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.nav__panel{border-top:1px solid var(--line);background:var(--surface)}
.nav__panel .wrap{display:grid}
.nav__panel a{display:block;padding:var(--space-4) 0;border-bottom:1px solid var(--line);font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:-.01em}
@media (min-width:900px){
  .nav__logo img{width:148px}
  .nav__links{display:flex;margin-right:var(--space-5)}
  .nav__cta{display:inline-flex}
  .nav__wa,.nav__menu,.nav__panel{display:none}
}

/* hero */
.hero{isolation:isolate;overflow:hidden;padding-top:var(--space-8);padding-bottom:var(--space-8)}
.hero__orbit{position:absolute;z-index:-1;right:-14%;top:4%;width:min(760px,70vw);color:var(--line);opacity:.5;pointer-events:none}
.hero__inner{position:relative}
.hero__eyebrow{margin-bottom:var(--space-6)}
.hero__title{margin-left:-.04em}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.22em;margin-bottom:-.22em}
.hero__title .line>span{display:block}
.hero__lede{display:grid;gap:var(--space-5);margin-top:var(--space-7);max-width:520px}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5)}
.hero__cells{display:grid;grid-template-columns:1fr 1fr;margin-top:var(--space-8);border-top:1px solid var(--line)}
.hero__cells li{display:grid;gap:var(--space-1);align-content:start;padding:var(--space-4) var(--space-4) var(--space-5) 0;font-family:var(--font-display);font-weight:700;font-size:20px;line-height:26px}
.hero__cells li:nth-child(n+3){border-top:1px solid var(--line)}
.hero__cells .bb-status{font-family:var(--font-sans);font-weight:400}
@media (min-width:1024px){
  .hero{padding-top:var(--space-9)}
  .hero__cells{grid-template-columns:repeat(4,1fr)}
  .hero__cells li{padding-left:var(--space-5)}
  .hero__cells li:nth-child(n+3){border-top:0}
  .hero__lede{grid-template-columns:minmax(0,520px) auto;align-items:end;justify-content:space-between;max-width:none}
}

/* marquee: GSAP drives the track when available, CSS animation is the fallback */
.has-gsap .bb-marquee__track{animation:none}
/* solid ink band: separates the busy hero from the next section */
.bb-marquee{background:var(--surface-inverse);color:var(--ink-inverse);border-block:0;padding-block:var(--space-5)}
.bb-marquee__item::after{border-color:var(--line-strong)}

/* sections */
.section{padding-block:var(--space-8)}
.section--tight{padding-top:0}
.section__head{display:grid;gap:var(--space-5);margin-bottom:var(--space-7)}
.section__sub{color:var(--ink-muted)}
.section__note{margin-top:var(--space-7)}
.section__more{margin-top:var(--space-7)}
@media (min-width:1024px){.section{padding-block:var(--space-9)}}

/* services: offset 2-column grid, each cell has a small UI sketch */
.services{display:grid;gap:var(--space-7) var(--space-5)}
.svc{position:relative;display:grid;gap:var(--space-3);align-content:start;cursor:default}
.svc .bb-card__meta{display:flex;align-items:center;gap:var(--space-2)}
.svc .bb-card__meta::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.svc:hover .bb-card__meta::after{transform:scale(1)}
.svc__title{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3vw,40px);line-height:1.08;letter-spacing:-.02em;max-width:22ch;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.svc:hover .svc__title{transform:translateX(8px)}
.svc .bb-card__body{max-width:44ch}
@media (min-width:760px){
  .services{grid-template-columns:1fr 1fr;gap:var(--space-9) 0;padding-bottom:var(--space-9)}
  .svc{padding-left:0;padding-right:var(--space-5)}
  .svc:nth-child(even){margin-top:var(--space-9)}
}

/* service illustrations (inline SVG, stroke follows currentColor) */
.svc__viz{display:grid;place-items:center;aspect-ratio:16/10;padding:var(--space-4);border-radius:var(--radius-l);background:var(--surface-sunken);overflow:hidden;color:var(--ink);margin-bottom:var(--space-3);--bb-accent:var(--ink)}
.svc__art{display:block;width:100%;height:100%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.svc:hover .svc__viz{--bb-accent:var(--accent)}
.svc:hover .svc__art{transform:scale(1.04) translateY(-3px)}
.svc__art *{transition:fill .35s ease,stroke .35s ease}

/* work: stacked sticky cards */
.stack{display:grid;gap:var(--space-5)}
.pcard{position:relative;display:grid;gap:var(--space-5);padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-l);background:var(--surface-raised);transform-origin:center top}
.pcard::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--surface);opacity:var(--dim,0);pointer-events:none}
.pcard__media{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;border-radius:var(--radius-m);background:var(--surface-sunken);overflow:hidden;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pcard__media img{width:100%;height:100%;object-fit:cover;display:block}
.pcard:hover .pcard__media{transform:scale(.985)}
.pcard__info{display:grid;gap:var(--space-3);align-content:end;padding:var(--space-2) var(--space-2) var(--space-3)}
.pcard__title{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3vw,44px);line-height:1.05;text-wrap:balance;letter-spacing:-.03em}
.pcard__field{margin-top:calc(var(--space-1) * -1)}
.pcard .bb-card__body{color:var(--ink-muted);max-width:36ch}
.pcard .bb-card__meta{display:flex;align-items:center;gap:var(--space-2)}
.pcard .bb-card__meta::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.pcard:hover .bb-card__meta::after{transform:scale(1)}
@media (min-width:900px){
  .stack{gap:var(--space-6)}
  .pcard{position:sticky;top:calc(88px + var(--i) * 18px);grid-template-columns:7fr 5fr;gap:var(--space-6);padding:var(--space-5);min-height:min(560px,70vh)}
  .pcard__media{aspect-ratio:auto;height:100%}
  .pcard__info{padding:var(--space-4) var(--space-4) var(--space-4) 0}
}

/* process: timeline that draws as you scroll */
.steps-wrap{position:relative}
.steps__track{position:absolute;left:9px;top:10px;bottom:10px;width:1px;background:var(--line)}
.steps__fill{position:absolute;inset:0;background:var(--ink);transform-origin:top;transform:scaleY(var(--p,1))}
.has-gsap .steps-wrap{--p:0}
.steps{position:relative;display:grid;gap:var(--space-7) 0;padding-left:var(--space-7)}
.steps .step{position:relative;gap:var(--space-3);padding:0;border-top:0}
.step::before{content:"";position:absolute;left:calc(var(--space-7) * -1);top:2px;width:19px;height:19px;border-radius:50%;border:1px solid var(--ink);background:var(--ink);transition:background-color .35s ease,border-color .35s ease}
.has-gsap .step::before{border-color:var(--line-strong);background:var(--surface)}
.has-gsap .step.is-reached::before{border-color:var(--ink);background:var(--ink)}
.has-gsap .step.is-current::before{border-color:var(--accent);background:var(--accent)}
.steps__num{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(32px,3vw,44px);line-height:1;letter-spacing:-.03em;margin-bottom:var(--space-2);transition:color .5s ease}
.has-gsap .steps__num{color:transparent;-webkit-text-stroke:1px var(--line-strong)}
.has-gsap .step.is-reached .steps__num{color:var(--ink);-webkit-text-stroke-color:var(--ink)}
@media (min-width:1024px){
  .steps-wrap{padding-top:var(--space-7)}
  .steps__track{left:0;right:0;top:9px;bottom:auto;width:auto;height:1px}
  .steps__fill{transform-origin:left;transform:scaleX(var(--p,1))}
  .steps{grid-template-columns:repeat(4,1fr);gap:0;padding-left:0}
  .steps .step{padding-right:var(--space-5)}
  .step::before{left:0;top:calc(var(--space-7) * -1)}
}

/* why: statements light up one by one as you scroll */
.reasons li{position:relative;display:grid;gap:var(--space-4);padding:var(--space-6) 0}
.reasons li::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line);transform:scaleX(var(--s,1));transform-origin:left}
.reasons li:last-child{border-bottom:1px solid var(--line)}
.reason__main{display:grid;gap:var(--space-3);align-content:start}
.reason__title{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,2.9vw,40px);line-height:1.1;letter-spacing:-.02em;max-width:20ch;transition:color .5s ease}
.reason__body{color:var(--ink-muted);max-width:40ch;transition:color .5s ease}
.has-gsap .reason:not(.is-active) .reason__title{color:var(--ink-faint)}
.has-gsap .reason.is-active .reason__body{color:var(--ink)}
@media (min-width:900px){
  .reasons li{grid-template-columns:1fr 1fr;gap:0;padding:var(--space-7) 0;align-items:end}
}

/* intro: one large statement under the marquee, words light up as it scrolls */
.intro__grid{display:grid;gap:var(--space-5)}
.intro__text{font-family:var(--font-display);font-weight:500;font-size:clamp(24px,2.8vw,42px);line-height:1.28;letter-spacing:-.02em;text-wrap:pretty}
.intro__mark{text-decoration:underline;text-decoration-skip-ink:none;text-decoration-color:var(--accent);text-decoration-thickness:.07em;text-underline-offset:.16em}
@media (min-width:900px){.intro__grid{grid-template-columns:1fr 3fr;gap:0 var(--space-5)}.intro__grid>.label{padding-top:.7em}}

/* FAQ */
.faq{display:grid;gap:var(--space-7)}
.faq__list details{border-top:1px solid var(--line)}
.faq__list details:last-child{border-bottom:1px solid var(--line)}
.faq__list summary{display:flex;justify-content:space-between;align-items:center;gap:var(--space-5);min-height:64px;padding:var(--space-4) 0;cursor:pointer;list-style:none;font-family:var(--font-display);font-weight:700;font-size:20px;line-height:26px}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary>span{display:inline-flex;align-items:center}
.faq__list summary>span{gap:var(--space-3)}
.faq__list summary>span::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.faq__list details.is-open summary>span::after{transform:scale(1)}
.faq__list summary::after{content:"+";flex:none;font-family:var(--font-mono);font-weight:400;font-size:28px;line-height:1;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.faq__list details.is-open summary::after{transform:rotate(45deg)}
.faq__a{overflow:hidden}
.faq__a p{padding-bottom:var(--space-5);max-width:60ch;color:var(--ink-muted)}
@media (min-width:1024px){.faq{grid-template-columns:1fr 1fr;gap:0}.faq .section__head{margin-bottom:0;align-content:start;padding-right:var(--space-5)}.faq__list summary{padding-inline:var(--space-5)}.faq__a p{padding-inline:var(--space-5)}}

/* contact */
.contact__grid{display:grid;gap:var(--space-8)}
.contact__intro{display:grid;gap:var(--space-5);align-content:start}
.contact__intro .body-l{color:var(--ink-muted);max-width:42ch}
.contact__info{display:grid;gap:var(--space-4);margin-top:var(--space-5)}
.contact__info li{display:grid;grid-template-columns:140px 1fr;gap:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--line);font-size:16px}
.contact__info a{text-underline-offset:4px}
.form{display:grid;gap:var(--space-5);align-content:start}
textarea.bb-input{resize:vertical;min-height:96px}
.bb-field:focus-within .bb-field__label{color:var(--ink)}
.bb-field__req{text-transform:none;letter-spacing:0;font-family:var(--font-sans);font-size:12px;margin-left:var(--space-2);color:var(--ink-muted)}
.form__choices{border:0;margin:0;padding:0;min-width:0}
.form__choices legend{padding:0;margin-bottom:var(--space-3)}
.form__chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip .bb-tag{position:relative;min-height:44px;padding:0 var(--space-5);transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.chip .bb-tag::before{content:"";position:absolute;left:9px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .25s ease}
.chip input:checked+.bb-tag{background:var(--surface-inverse);color:var(--ink-inverse);border-color:var(--surface-inverse)}
.chip input:checked+.bb-tag::before{transform:scale(1)}
.chip:hover .bb-tag{border-color:var(--ink)}
.chip input:focus-visible+.bb-tag{outline:2px solid var(--focus-ring);outline-offset:3px}
.form__trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form__submit{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4)}
.form__status{color:var(--ink)}
.form__status[data-state="error"]{color:var(--danger)}
.form__status[data-state="ok"]::before{content:"";display:inline-block;width:8px;height:8px;margin-right:var(--space-2);border-radius:50%;background:var(--accent)}
.bb-field__help[data-error]{color:var(--danger)}
.bb-field--error .bb-input{border-bottom-color:var(--danger)}
@media (min-width:1024px){.contact__grid{grid-template-columns:1fr 1fr;gap:0}.contact__intro>:not(.contact__info){padding-right:var(--space-5)}.form{padding-inline:var(--space-5)}}

/* footer */
.footer{border-top:1px solid var(--line);padding-top:var(--space-8)}
.footer__grid{display:grid;gap:var(--space-6);padding-bottom:var(--space-8)}
.footer__brand{display:grid;gap:var(--space-4);max-width:36ch}
.footer__brand img{width:140px;height:auto}
.footer__col{display:grid;gap:var(--space-2);align-content:start;font-size:14px}
.footer__col .label{margin-bottom:var(--space-2)}
.footer__col a{text-decoration:none;width:max-content;padding-block:4px}
.footer__col a:hover{text-decoration:underline;text-underline-offset:4px}
.footer__legal{padding-block:var(--space-5);border-top:1px solid var(--line)}
@media (min-width:900px){.footer__grid{grid-template-columns:5fr 2fr 2fr 2fr}}

/* floating WhatsApp (mobile) */
.wa-float{position:fixed;right:var(--space-4);bottom:var(--space-4);z-index:40;display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#0A0A0A;color:#FAFAF8;border:1px solid #FAFAF8;transition:transform .2s ease}
.wa-float:hover{transform:scale(1.06)}
@media (min-width:900px){.wa-float{display:none}}

@media (max-width:639px){.contact__info li{grid-template-columns:1fr;gap:var(--space-1)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:color,background-color,border-color,opacity!important}
}

/* case study page */
.case{padding-top:var(--space-5);padding-bottom:var(--space-7)}
.case__back{margin-bottom:var(--space-7)}
.case__back::after{content:none}
.case__head{display:grid;gap:var(--space-5)}
.case__title{font-size:clamp(36px,5.4vw,80px);line-height:.98;max-width:20ch;text-wrap:balance}
.case__lede{max-width:40ch;color:var(--ink-muted)}
.facts{display:grid;grid-template-columns:1fr 1fr;margin-top:var(--space-7);border-top:1px solid var(--line)}
.facts li{display:grid;gap:var(--space-1);align-content:start;padding:var(--space-4) var(--space-4) var(--space-5) 0;font-family:var(--font-display);font-weight:700;font-size:20px;line-height:26px}
.facts li:nth-child(n+3){border-top:1px solid var(--line)}
.case__cover-wrap{padding-bottom:var(--space-8)}
.cover{margin:0;border-radius:var(--radius-l);overflow:hidden;background:var(--surface-inverse)}
.cover img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.cs,.how{display:grid;gap:var(--space-6)}
.cs__head{display:grid;gap:var(--space-5);align-content:start}
.cs__body{display:grid;gap:var(--space-4);align-content:start}
.cs__body .body-l{color:var(--ink-muted);max-width:48ch}
.how__media{margin:0;border-radius:var(--radius-l);overflow:hidden;background:var(--surface-inverse);align-self:start}
.how__media img{width:100%;height:auto}
.how__steps{display:grid;align-content:start}
.how__steps li,.list-rows li,.list-tiles li,.list-big li{display:grid;gap:var(--space-2);padding:var(--space-4) 0 var(--space-5);border-top:1px solid var(--line)}
.how__steps p,.list-rows p,.list-tiles p,.list-big p{max-width:44ch;font-size:16px;line-height:26px;color:var(--ink-muted)}
.list-rows,.list-tiles,.list-big{display:grid}
.cta__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5)}
.contact .contact__intro{max-width:720px}
@media (min-width:1024px){
  .cs,.how{grid-template-columns:1fr 1fr;gap:0}
  .cs__head{padding-right:var(--space-5)}
  .cs__body{padding-left:var(--space-5)}
  .how__media{margin-right:var(--space-5)}
  .how__steps{padding-left:var(--space-5)}
  .how__steps li:first-child{border-top:0;padding-top:0}
  .facts{grid-template-columns:repeat(4,1fr)}
  .facts li{padding-left:var(--space-5)}
  .facts li:nth-child(n+3){border-top:0}
}

/* work card links to its case study */
.pcard__link{position:static;justify-self:start;margin-top:var(--space-3)}
.pcard__link::before{inset:0;border-radius:inherit}
.pcard:has(.pcard__link:focus-visible){outline:2px solid var(--focus-ring);outline-offset:4px}
.pcard__link:focus-visible{outline:0}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.how__more{margin-top:var(--space-7);margin-bottom:var(--space-4)}

/* case study lists: three different rhythms */
.list-rows li{gap:var(--space-1)}
.list-rows .label{margin-bottom:var(--space-1)}
.list-rows p{max-width:52ch}
.list-tiles li{padding-top:var(--space-4);gap:var(--space-1)}
.list-tiles h3{font-size:20px;line-height:26px}
.list-big li{padding-block:var(--space-5) var(--space-6);gap:var(--space-3)}
.list-big h3{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,2.9vw,40px);line-height:1;letter-spacing:-.03em}
.list-big p{font-size:18px;line-height:28px;max-width:34ch}
@media (min-width:640px){
  .list-tiles{grid-template-columns:1fr 1fr;column-gap:var(--space-5)}
}
@media (min-width:900px){
  .list-rows li{grid-template-columns:72px minmax(0,1fr) minmax(0,1.2fr);align-items:start;column-gap:var(--space-5);padding-block:var(--space-5)}
  .list-rows .label{margin:0;padding-top:8px}
  .list-rows h3{font-size:clamp(24px,2.2vw,32px);line-height:1.05;letter-spacing:-.02em}
  .list-rows p{padding-top:6px}
}
@media (min-width:1024px){
  .list-tiles{grid-template-columns:repeat(3,1fr);column-gap:0}
  .list-tiles li{padding-inline:var(--space-5)}
  .list-tiles li:nth-child(3n+1){padding-left:0}
  .list-big{grid-template-columns:1fr 1fr;column-gap:0}
  .list-big li{padding-inline:var(--space-5)}
  .list-big li:nth-child(odd){padding-left:0}
}
.list-big .tick{display:inline-block;width:.8em;height:.8em;margin-left:.15em;vertical-align:-.08em;color:var(--accent)}
.list-big .tick path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .7s cubic-bezier(.2,.7,.2,1) .25s}
.list-big li.is-in .tick path,html:not(.has-gsap) .list-big .tick path{stroke-dashoffset:0}

/* testimonial */
.quote{margin:0;display:grid;gap:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--line)}
.quote__text{margin:0}
.quote__text p{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3vw,44px);line-height:1.08;letter-spacing:-.03em;max-width:30ch}
.quote__by{display:grid;gap:var(--space-1)}
.quote__name{font-family:var(--font-display);font-weight:700;font-size:20px;line-height:26px}
@media (min-width:1024px){
  .quote{grid-template-columns:1fr 3fr;gap:0 var(--space-5);align-items:start}
  .quote > .label{grid-row:1/3}
  .quote__text{grid-column:2}
  .quote__by{grid-column:2;margin-top:var(--space-5)}
}

/* footer social icons */
.footer__social{display:flex;gap:var(--space-1);margin-left:-10px}
.footer__social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;color:var(--ink);transition:color .2s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.footer__social a:hover{transform:translateY(-3px)}
.footer__social a[aria-disabled="true"]{cursor:default}

/* oversized wordmark, cropped at the page bottom */
.footer__mark{aspect-ratio:305.9/48;overflow:hidden;margin-top:var(--space-5)}
.footer__art{display:block;width:100%;aspect-ratio:305.9/73;
  background:radial-gradient(circle 130px at var(--mx,-999px) var(--my,-999px),var(--accent) 0 98%,transparent 100%),var(--ink);
  -webkit-mask:url("../assets/logo/bitbaki-wordmark.svg") top left/100% 100% no-repeat;
  mask:url("../assets/logo/bitbaki-wordmark.svg") top left/100% 100% no-repeat}

/* reading progress */
.progress{position:fixed;top:0;left:0;right:0;z-index:60;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

/* cursor label over linked work cards */
.cursor{position:fixed;top:0;left:0;z-index:70;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--surface);color:var(--ink);font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;pointer-events:none;opacity:0;scale:.4;transition:opacity .2s ease,scale .35s cubic-bezier(.2,.7,.2,1)}
.cursor.is-on{opacity:1;scale:1}
.has-cursor .pcard,.has-cursor .pcard a{cursor:none}
@media (prefers-reduced-motion:reduce){.cursor{transition:opacity .2s ease}}