/* Tavlio styles. Fonts and globals first (from the Claude Design bundle), then the rules for the runtime (site.js)
and the layout hooks the template uses. build.mjs appends the generated hover/focus classes to dist only. */
/* == fonts: Inter variable (weights 100-900 in one file per subset; SIL OFL) == */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/fonts/inter-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/fonts/inter-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* == tokens: Apple dark (docs/superpowers/specs/2026-11-06-apple-dark-redesign-design.md) == */
:root{
--font:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
--bg:#000;--text:#F5F5F7;--text-2:#A1A1A6;--text-3:#86868B;--text-4:#6E6E73;
--tile:#161617;--line:#2C2C2E;--line-2:#6E6E73; /* control borders: 3:1 on #000 and #161617 (WCAG 1.4.11) */
--r-tile:22px;--r-pill:980px;--r-field:12px;
--ease:cubic-bezier(.16,1,.3,1);
--fs-hero:clamp(54px,7.8vw,112px);--fs-h2:clamp(40px,4.5vw,64px);--fs-h3:clamp(28px,3vw,48px);
--fs-lede:clamp(19px,1.6vw,23px);--fs-body:17px;--fs-small:15px;--fs-label:13px;
--pad-x:clamp(20px,2.8vw,40px);--sec-y:clamp(96px,11vw,160px);
}
html,body{margin:0;background:#000;}
*{box-sizing:border-box;}
a{color:inherit;text-decoration:none;}
a:hover{color:inherit;opacity:.75;}
::selection{background:#F5F5F7;color:#000;}
input,textarea{font:inherit;color:inherit;}
input::placeholder,textarea::placeholder{color:#86868B;}
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms !important;animation-delay:0s !important;transition-duration:.01ms !important;transition-delay:0s !important;}}
/* == layout helpers == */
html{scroll-behavior:smooth;scroll-padding-top:100px;scroll-padding-bottom:110px} /* focus scrolling keeps the focused element clear of the fixed header and FAB */
[hidden]{display:none !important}
/* desk = desktop only, mob = mobile only (820px). Inline display was removed from these elements so the class owns it */
@media (min-width:820px){.desk{display:flex}.mob{display:none !important}}
@media (max-width:819.98px){.desk{display:none !important}.mob{display:flex}}
/* == mobile menu: opens via :target, closes. visibility waits for the clip-path to finish on close == */
#menu{transition:clip-path .9s cubic-bezier(.7,0,.2,1),visibility 0s}
#menu:not(:target){visibility:hidden;clip-path:circle(0% at calc(100% - 60px) 40px);transition-delay:0s,.9s}
#menu:target{clip-path:circle(150% at calc(100% - 60px) 40px)}
html:has(#menu:target){overflow:hidden}
@media (min-width:820px){#menu{display:none} html:has(#menu:target){overflow:auto}}
@media (max-width:819.98px){
#menu{display:flex}
html:has(#menu:target) header .mob{visibility:hidden}
html:has(#menu:target) header{pointer-events:none}
header .mob,header .mob.btn-pill,#menu a[href="#_"]{min-height:44px}
#menu>div:first-child{position:absolute;top:20px;right:clamp(20px,4vw,56px)}
}
#menu nav{counter-reset:m}
.mnum::before{counter-increment:m;content:"0" counter(m)}
/* == shared components (Apple dark) == */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;color:var(--text);background:rgba(0,0,0,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(255,255,255,.08);transition:transform .6s var(--ease)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;height:52px;padding:0 var(--pad-x)}
.nav-logo{display:flex;align-items:center;gap:10px;min-height:44px}
.nav-links{align-items:center;gap:clamp(18px,2.6vw,36px);font-size:var(--fs-label)}
.nav-links a{color:var(--text-2);padding:8px 0;transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current=page]{color:var(--text);opacity:1}
.nav-right{align-items:center;gap:18px;font-size:var(--fs-label)}
.nav-lang{display:flex;align-items:center;color:var(--text-3)}
.nav-lang a{padding:8px 4px}
.btn-pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 26px;border-radius:var(--r-pill);background:var(--text);color:#000;font-size:var(--fs-body);font-weight:500;transition:transform .3s var(--ease),background .2s}
.btn-pill:hover{opacity:1;color:#000;background:#fff;transform:scale(1.02)}
.btn-pill.btn-sm{min-height:32px;padding:0 15px;font-size:var(--fs-label)}
.btn-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--text);font-size:var(--fs-body)}
.btn-link::after{content:"\203A";font-size:1.15em;transition:transform .3s var(--ease)}
.btn-link:hover{opacity:1}.btn-link:hover::after{transform:translateX(3px)}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--pad-x)}
.sec{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
.eyebrow{font-size:clamp(15px,1.3vw,19px);font-weight:600;color:var(--text-3);letter-spacing:-.005em}
.headline{margin:0;font-weight:700;font-size:var(--fs-hero);line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
.headline .muted{color:var(--text-4)}
.h2{margin:0;font-weight:700;font-size:var(--fs-h2);line-height:1.06;letter-spacing:-.025em;text-wrap:balance}
.lede{margin:0;font-size:var(--fs-lede);line-height:1.45;color:var(--text-2);letter-spacing:-.005em;text-wrap:balance}
.tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.tile{background:var(--tile);border-radius:var(--r-tile);padding:clamp(28px,3vw,40px) clamp(28px,2.6vw,36px);display:flex;flex-direction:column;gap:14px}
.tile-n{font-size:var(--fs-small);font-weight:500;color:var(--text-3)}
.tile h3{margin:0;font-weight:700;font-size:var(--fs-h3);letter-spacing:-.02em;line-height:1.08}
.tile p{margin:0;font-size:clamp(17px,1.3vw,19px);line-height:1.45;color:var(--text-2)}
/* inactive language: full-opacity grey (AA); active: white */
.nav-lang .lang-link,.foot-lang .lang-link{color:var(--text-3)}
.lang-link:hover{opacity:1;color:var(--text)}
html[lang=en] .lang-link[hreflang=en],html[lang=id] .lang-link[hreflang=id]{color:var(--text)}
.lang-pill{background:transparent;color:#F5F5F7}
html[lang=en] .lang-pill[hreflang=en],html[lang=id] .lang-pill[hreflang=id]{background:#F5F5F7;color:#000}
/* == motion: "Cinematic" (spec 06-11-2026). Composite-only: transform + opacity; blur only on the hero headline.
Everything is visible without JS (CSS animations end in their final state) and under reduced motion (no animation). == */
/* the top-of-page entrances start at .01, not 0: Chrome skips opacity-0 elements as LCP candidates, which delayed LCP by
about 0.5 s. Scroll reveals stay at 0: below the fold they are not LCP, and at .01 Lighthouse audits them as low contrast */
@keyframes heroFocus{from{opacity:.01;transform:scale(1.08);filter:blur(14px)}to{opacity:1;transform:none;filter:none}}
@keyframes riseIn{from{opacity:.01;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
[data-hero]{animation:heroFocus 1.3s var(--ease) .2s backwards}
.hero-in{animation:riseIn 1s var(--ease) var(--d,0s) backwards}
}
/* reveal on scroll: site.js adds .in and sets transition-delay from data-reveal */
html.js [data-reveal]{transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
/* an element holding the LCP image (fetchpriority=high) is never hidden: hiding it until deferred site.js runs cost ~1.3 s of mobile LCP */
html.js [data-reveal]:not(.in):not(:has(img[fetchpriority=high])){opacity:0;transform:translateY(40px) scale(.96)}
/* safety net: site.js adds html.rv on start; if it never runs (404, blocked, throws first), hidden reveals appear after 3 s */
@keyframes tvReveal{to{opacity:1;transform:none}}
html.js:not(.rv) [data-reveal]:not(.in){animation:tvReveal 0s 3s forwards}
/* statement words: site.js sets each word's opacity from scroll position */
[data-word]{transition:opacity .25s linear}
html:not(.js) [data-word]{opacity:1 !important}
/* == floating action button: .show past 80vh, .open for the menu == */
/* visibility keeps the hidden controls out of the tab order (also without JS); the delay lets the fade finish first */
.fab{opacity:0;visibility:hidden;transform:translateY(24px) scale(.9);pointer-events:none;transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1),visibility 0s .5s !important}
/* the FAB box includes its hidden menu (220px wide) and caught taps on the row links on phones under ~340px, so even
when shown only the button and the open menu take clicks */
.fab.show{opacity:1 !important;visibility:visible;transform:none !important;pointer-events:none !important;transition-delay:0s !important}
.fab.show>button{pointer-events:auto}
.fab-menu{opacity:0;visibility:hidden;transform:translateY(10px) scale(.96);pointer-events:none;transition:opacity .3s,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s .3s !important}
.fab.open .fab-menu{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s !important}
[data-action=fab]>span:first-child{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.fab.open [data-action=fab]>span:first-child{transform:rotate(45deg)}
/* == faq == */
details.faq summary{list-style:none;cursor:pointer}
details.faq summary::-webkit-details-marker{display:none}
details.faq .plus{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
details.faq[open] .plus{transform:rotate(45deg)}
/* == chips (radio pills) and the projects filter == */
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip input:checked+span{background:#F5F5F7;color:#000}
.chip input:focus-visible+span{outline:2px solid #F5F5F7;outline-offset:3px}
.projects:has(#pf-build:checked) .card:not([data-cat=build]){display:none !important}
.projects:has(#pf-automate:checked) .card:not([data-cat=automate]){display:none !important}
/* == forms == */
@supports selector(:has(a)){form .call-fields{display:none !important}} /* without :has() the fields stay visible; site.js only requires phone when they show */
form:has(input[name=follow_up][value=call]:checked) .call-fields{display:grid !important}
.js-fmt,.js-sent{display:flex}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
[data-form] [type=submit]:disabled{opacity:.6;cursor:progress}
#contact input::placeholder,#contact textarea::placeholder{color:#86868B}
[data-form] input,[data-form] textarea{scroll-margin-top:120px} /* focus/validation scroll: clear the 84px fixed header + the label */
[data-form] input:focus-visible,[data-form] textarea:focus-visible{outline:2px solid #F5F5F7 !important;outline-offset:4px}
[data-form=newsletter] input:focus-visible{outline-color:#F5F5F7 !important}
/* inline validation (site.js fills #err-