/* Viable — neutral grey system; one accent language: round dots on a grid */
:root{
  --bg:#E6E6E2;
  --bg-2:#DCDCD7;
  --ink:#121211;
  --ink-2:#3a3a37;
  --mute:#7a7a73;
  --line:#c6c6c0;
  --neon:#7cff2e;
  --pad:clamp(16px,2.2vw,32px);
  --gap:clamp(16px,2vw,28px);
  --space:clamp(96px,11vw,168px);
  --sans:"Geist",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase}
::selection{background:var(--ink);color:var(--bg)}
a:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}

/* small pixel words: the Doto typeface, square dots, a little extra tracking so letters never touch */
.px{font-family:"Doto",var(--mono);font-weight:900;letter-spacing:.05em;word-spacing:-.35em;white-space:nowrap}
.px--t{letter-spacing:-.07em;margin-left:.05em}
/* square "typing cursor" after every pixel able: neon, blinking on/off */
.px--t::after{content:"";display:inline-block;width:.13em;height:.13em;margin-left:.12em;background:var(--neon);animation:cursor 1.05s steps(1) infinite}
@keyframes cursor{0%{opacity:1}50%{opacity:0}}
.svc__able .px--t::after{display:none}
.morph span{display:inline-block}
.morph .ins{overflow:hidden;vertical-align:bottom}
.px{perspective:600px}
.px .ch{display:inline-block}
.px .ch.op{color:var(--mute)}
/* large pixel words (drawn by dots.js) sit on the text baseline */
.dw{display:inline-block;line-height:0;white-space:nowrap;letter-spacing:0}
.dw canvas{display:inline-block}
.pix{display:block;width:72px;height:72px;border-radius:14%;box-shadow:0 5px 0 #050505,0 18px 22px -12px rgba(0,0,0,.45)}   /* hard ledge = module thickness, soft contact shadow */
.pix canvas{display:block}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:16px var(--pad);border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.nav.is-scrolled{background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--ink)}
.nav__mark{font-weight:600;font-size:26px;letter-spacing:.02em;line-height:1;white-space:nowrap}
.nav__mark .px{letter-spacing:-.06em;margin-left:.04em}
.nav__mark .px .ch.op{color:inherit}
/* logo is a 3-sided box (viable · vibe+able · vi+able) that rolls on its horizontal axis, one face per scroll gesture */
.nav__mark{justify-self:start;perspective:240px}
.mark3d{display:grid;justify-items:start;transform-style:preserve-3d;transform:translateZ(-.29em);transition:transform .8s cubic-bezier(.65,0,.35,1)}
.mark3d__f{grid-area:1/1;height:1em;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:rotateX(calc(var(--i) * -120deg)) translateZ(.29em)}
.nav__links{display:flex;gap:clamp(20px,3vw,40px);font-size:14px}
.nav__links a,.nav__cta{position:relative;padding:4px 0}
.nav__links a{color:var(--ink-2);transition:color .3s}
.nav__links a:hover,.nav__links a.is-active{color:var(--ink)}
.nav__links a::after,.nav__cta::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav__links a:hover::after,.nav__links a.is-active::after{transform:scaleX(1);transform-origin:left}
.nav__cta{justify-self:end;font-size:14px;font-weight:500}
.nav__cta::after{transform:scaleX(1)}
.nav__cta:hover::after{transform:scaleX(.3);transform-origin:left}
/* header hover: labels decode (scramble → settle, see main.js); the others step back; the current section gets a neon pixel beside its label */
.nav__links a::after,.nav__cta::after{content:none}
.nav__mark .px{position:relative;top:-1px}   /* optical: pixel "able" sits a hair low next to "vi" */
.nav__links a,.nav__cta{display:inline-block;white-space:pre}
.nav__links:hover a{color:var(--mute)}
.nav__links a:hover,.nav__links:hover a:hover{color:var(--ink)}
.nav__links a.is-active{color:var(--ink)}
.nav__links a::before{content:"";position:absolute;left:-11px;top:50%;width:5px;height:5px;margin-top:-2px;background:var(--neon);visibility:hidden}   /* sits just left of the label, out of the flow */
.nav__links a.is-active::before{visibility:visible}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:620px;display:grid;grid-template-rows:1fr auto;padding:var(--nav-h,62px) var(--pad) 22px}   /* banner starts right under the header */
.hero__stage{position:relative;min-height:0;margin-top:14px;border:1px solid var(--ink)}   /* banner boxed in a black outline, canvas flush to it */
.hero__tag{position:absolute;left:clamp(24px,5.5vw,96px);top:50%;transform:translateY(-50%);z-index:1;margin:0;width:min(7ch,52%);text-align:left;color:var(--bg);font-size:clamp(56px,10.4vw,196px);font-weight:500;letter-spacing:-.045em;line-height:1;text-wrap:balance;pointer-events:none}   /* tagline left, the big object takes the right */
#field{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;cursor:crosshair}
.hero__foot{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);padding-top:18px;align-items:start}
.hero__dict{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:baseline}   /* word + phonetic on the left, meaning on the right */
.hero__line{grid-column:1/7}
.hero__def{grid-column:7/13;justify-self:end;text-align:right}   /* anchored to the banner's right edge, mirroring the word on the left */
.hero__line{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.hero__word{font-size:clamp(20px,1.6vw,26px);line-height:1}
.hero__word,.about__word .px{letter-spacing:-.03em}   /* at caption sizes Doto's own side bearings already read as tracking */
.hero__ipa{color:var(--mute);text-transform:none;letter-spacing:.02em;font-size:12px}
.hero__def{font-size:clamp(16px,1.25vw,19px);letter-spacing:-.01em;line-height:1.4;color:var(--ink-2);max-width:44ch}
.hero__ipa .ln,.hero__def .ln{display:block}
.hero__lede{grid-column:7/13;font-size:clamp(16px,1.25vw,19px);letter-spacing:-.01em;line-height:1.4;color:var(--ink);max-width:56ch}
.m-only{display:none}

/* ---------- shared ---------- */
.section{padding:var(--space) var(--pad) 0}
.kicker{color:var(--mute);margin-bottom:28px}
.able-h{font-size:clamp(64px,13vw,210px);font-weight:500;letter-spacing:-.06em;line-height:.9;white-space:nowrap}
.able-h .stem{display:inline-block}

/* ---------- about ---------- */
.about{padding:var(--space) var(--pad) 0;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.about .kicker{grid-column:1/3;padding-top:.6em;color:var(--ink-2)}
.about .kicker span{color:var(--mute);margin-right:6px}
.about__text{grid-column:3/12;font-size:clamp(26px,3.7vw,58px);font-weight:500;letter-spacing:-.03em;line-height:1.08;text-wrap:pretty}
.about__text .word{opacity:.14}
.about__split{grid-column:3/13;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:clamp(56px,7vw,110px)}
.about__split li{display:flex;flex-direction:column;padding-top:28px;border-top:1px solid var(--line);cursor:default;position:relative}
.about__split li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--ink);transform:scaleX(var(--rule,0));transform-origin:left}   /* ink rule drawn over the grey one on scroll (main.js) */
@media (prefers-reduced-motion: reduce){.about__split li::before{transform:none}}
.about__word{display:flex;flex-direction:column;gap:10px;font-size:clamp(20px,1.6vw,24px)}
.about__word .px{line-height:1}
.about__op{font-size:.7em;line-height:1;color:var(--mute)}
.about__ipa{font-size:11px;line-height:1;color:var(--mute);text-transform:none;letter-spacing:.02em;margin-top:2px}
.about__def{font-size:14px;line-height:1.45;color:var(--ink-2);margin-top:auto;padding-top:18px}

/* ---------- experience ---------- */
.exp__head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--gap);flex-wrap:wrap}
/* 3D cube word swap: faces roll upward around an axis set behind the text */
.cube{display:inline-block;position:relative;perspective:700px;vertical-align:bottom;white-space:nowrap}
.cube__face{display:inline-block;backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform}
/* heading is one sentence set like the Services title, the rolling word + pixel "able" closing it */
.exp__h{font-size:clamp(48px,8.6vw,148px);font-weight:500;letter-spacing:-.05em;line-height:.95;text-wrap:balance;flex:1 1 auto;max-width:14ch}
.exp__word{white-space:nowrap}
.exp__word .stem{display:inline-block}
.exp__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:start;margin-top:clamp(40px,5vw,72px)}
.exp__years{grid-column:1/6}
.exp__num{font-size:clamp(110px,12vw,190px);line-height:0}
.exp__cv{display:block;image-rendering:pixelated;margin-left:calc(var(--px, 6px) * -2)}   /* face aligns with the caption; extrusion may overhang */
.exp__cap{max-width:30ch;font-size:15px;color:var(--ink-2);margin-top:18px}
.exp__list{grid-column:5/13;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.exp__list li{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:10px;padding:clamp(16px,1.6vw,24px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);cursor:default;transition:color .45s var(--ease);min-height:clamp(150px,13vw,210px)}
/* active cell: ink rises from the bottom, a neon halftone glow sits in the bottom-right corner */
.exp__list li::before{content:"";position:absolute;inset:0;background:var(--ink);clip-path:inset(100% 0 0 0);transition:clip-path .6s var(--ease);z-index:-2}
.exp__glow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;clip-path:inset(100% 0 0 0);transition:clip-path .6s var(--ease)}
.exp__top{display:flex;justify-content:flex-start;align-items:baseline}
.exp__top em{font-style:normal;color:var(--mute);transition:color .45s}
.exp__able{font-size:12px;color:var(--mute);transition:color .45s}
.exp__name{margin-top:auto;font-size:clamp(28px,2.8vw,44px);font-weight:500;letter-spacing:-.035em;line-height:1}
.exp__eg{font-size:13px;line-height:1.4;color:var(--ink-2);max-width:22ch;transition:color .45s}
.exp__list li.is-on{color:var(--bg);z-index:1;border-color:var(--ink);box-shadow:-1px -1px 0 var(--ink);transition:color .45s var(--ease),border-color 0s,box-shadow 0s}   /* all four edges go ink the moment the cell is hovered (left/top via a shadow over the neighbours' lines) */
.exp__list li.is-on::before{clip-path:inset(0)}
.exp__list li.is-on .exp__glow{clip-path:inset(0)}
.exp__list li.is-on .exp__able{color:var(--neon)}
.exp__list li.is-on .exp__eg,.exp__list li.is-on em{color:#a9a9a2}
/* desktop: heading + list + 10+ fit one screen; rows stretch to fill it */
@media (min-width:1025px){
  .exp{padding-top:calc(var(--space) * .5)}
  .exp__fold{min-height:100svh;display:flex;flex-direction:column;padding:88px 0 var(--pad)}
  .exp__grid{flex:1;align-items:stretch;min-height:0}
  .exp__years{grid-column:1/5;align-self:end}
  .exp__list{grid-column:5/13}
}
.clients{margin-top:clamp(96px,11vw,160px)}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.marquee__track{display:flex;align-items:center;width:max-content;will-change:transform}
.marquee img{height:clamp(84px,9vw,136px);width:auto;margin-right:clamp(16px,2.4vw,40px);filter:grayscale(1) contrast(1.5) brightness(.85);mix-blend-mode:multiply;opacity:.9;transition:filter .4s,opacity .4s}
.marquee img:hover{filter:none;opacity:1}

/* ---------- services ---------- */
.svc__head{margin-bottom:clamp(40px,5vw,72px)}
.svc__title{font-size:clamp(48px,8.6vw,148px);font-weight:500;letter-spacing:-.05em;line-height:.95;text-wrap:balance}
.svc__pin{position:relative}
.svc__track{display:flex;flex-direction:column;gap:clamp(48px,8vw,80px)}
.svc__panel{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.svc__able{font-size:clamp(48px,13vw,110px);font-weight:500;letter-spacing:-.055em;line-height:.9;white-space:nowrap}
.svc__body{max-width:44ch}
.svc__body h3{font-size:18px;font-weight:600;letter-spacing:-.015em;margin-bottom:8px}
.svc__body p{color:var(--ink-2);font-size:15px}
.svc__bar{display:none}
@media (min-width:900px){
  .svc.is-h .svc__pin{height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;padding-top:calc(var(--nav-h,62px) + 28px);padding-bottom:calc(var(--pad) + 40px)}   /* title sits where every other menu jump lands it; panels fill the rest */
  .svc.is-h .svc__track{flex:1 1 auto;min-height:0;flex-direction:row;width:max-content;gap:0;will-change:transform}
  .svc.is-h .svc__head{margin-bottom:clamp(72px,8vw,136px)}   /* title rides in the pin, right above the panels */
  .svc.is-h .svc__panel{width:max(66vw,calc(var(--w,0px) + 16vw));flex:none;justify-content:space-between;padding:8px clamp(32px,4vw,64px) 32px clamp(28px,3vw,48px);border-left:1px solid var(--line)}
  .svc.is-h .svc__able{font-size:clamp(88px,9.4vw,168px)}
  .svc.is-h .pix{width:96px;height:96px}
  .svc.is-h .svc__body{max-width:40ch;align-self:flex-end}
  .svc.is-h .svc__bar{display:block;position:absolute;left:0;right:0;bottom:calc(var(--pad) + 8px);height:2px;background:color-mix(in srgb,var(--ink) 10%,transparent)}
  .svc.is-h .svc__bar span{display:block;height:100%;background:var(--ink);transform-origin:left;transform:scaleX(0)}
}

/* ---------- work ---------- */
.work__head{margin-bottom:clamp(24px,3vw,48px)}
.work__sub,.team__sub{max-width:40ch;font-size:clamp(18px,1.5vw,22px);line-height:1.35;letter-spacing:-.01em;margin:28px 0 0 auto;color:var(--ink-2)}
.work__scroll{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);position:relative}
.work__list{grid-column:1/5;position:relative;padding-bottom:30svh}   /* lets the last project sit centred while the stage is still pinned */
.proj{min-height:78svh;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:40px 0;color:var(--mute);transition:color .2s steps(2)}
.proj.is-on{color:var(--ink)}
.proj__n{color:var(--mute)}
.proj__field{font-size:clamp(26px,2.4vw,40px);line-height:1}
.proj h3{font-size:clamp(34px,3.4vw,54px);font-weight:500;letter-spacing:-.04em;line-height:1}
.proj p{font-size:15px;max-width:34ch;color:inherit;opacity:.85}
.proj__tag{padding-top:14px;border-top:1px solid var(--line);max-width:34ch}
.proj__thumb{display:none}
.work__stage{grid-column:5/13;position:sticky;top:0;height:100svh;display:flex;align-items:center}
@media (min-width:901px){.work__scroll{margin-top:-14svh}}   /* the sticky stage centres its frame; pull it up so the first project sits close under the heading */
.work__frame{position:relative;width:100%;aspect-ratio:1062/690;overflow:hidden;background:var(--bg-2);border:1px solid var(--ink)}   /* black outline, as on the hero box */
.work__cv{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.work__frame{cursor:crosshair}
.work__real{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;visibility:hidden}
.work__real.on{visibility:visible}

/* ---------- team ---------- */
.team__head{margin-bottom:clamp(48px,6vw,88px)}
.team__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);text-align:center}
.person{display:flex;flex-direction:column;align-items:center}
.person__img{position:relative;width:100%;aspect-ratio:1;margin-bottom:22px;cursor:crosshair}
.person__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.person__img.has-dots img{visibility:hidden}
.person__img canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.person__img.has-dots.is-reveal img{visibility:visible}
.person__img.has-dots.is-reveal canvas{visibility:hidden}

.person h3{font-size:clamp(26px,2.4vw,36px);font-weight:500;letter-spacing:-.035em;line-height:1}
.person__role{color:var(--mute);margin:10px 0 14px}
.person>p:last-child{color:var(--ink-2);font-size:15px;max-width:34ch}

/* ---------- contact ---------- */
.contact{margin-top:var(--space);background:var(--ink);color:var(--bg);padding:clamp(52px,6vw,96px) var(--pad) calc(var(--pad) + env(safe-area-inset-bottom))}
.contact__main{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:center}
.contact__text{grid-column:1/8;display:flex;flex-direction:column;gap:clamp(28px,3.4vw,48px)}
.contact .kicker{color:#8d8d86;margin:0}
.contact__title{font-size:clamp(52px,7.6vw,132px);font-weight:500;letter-spacing:-.05em;line-height:.95}
.contact__mail{align-self:flex-start;display:inline-flex;align-items:center;gap:14px;font-size:clamp(22px,2.4vw,36px);letter-spacing:-.025em;transition:gap .5s var(--ease)}
.contact__mail:hover{gap:22px}
/* one pixel arrow: points ↗ at rest, rotates to → in neon on hover */
.pxarrow{width:.55em;height:.55em;transform:rotate(-45deg);transition:transform .5s var(--ease),color .3s,filter .3s}
.contact__mail:hover .pxarrow{transform:none;color:var(--neon);filter:drop-shadow(0 0 .12em var(--neon))}
.ht3d__wrap{grid-column:8/13;display:flex;flex-direction:column;align-items:center;gap:14px}
.ht3d{width:100%;aspect-ratio:1;color:var(--bg);cursor:pointer;image-rendering:pixelated;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* tooltip that follows the pointer over the toy; on/off only (8-bit, no fades) */
.ht3d{position:relative}
.ht3d__tip{position:absolute;left:0;top:0;z-index:2;pointer-events:none;white-space:nowrap;background:var(--ink);color:var(--bg);border:1px solid #55554f;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:6px 8px;visibility:hidden}
.ht3d__tip.on{visibility:visible}
.ht3d__tip.is-done{color:var(--neon);border-color:var(--neon)}
.ht3d canvas{display:block}
.contact__row{display:flex;justify-content:space-between;color:#8d8d86;padding-top:18px;margin-top:clamp(28px,4vw,56px);border-top:1px solid #2c2c2a}
.contact__row a:hover{color:var(--bg)}

/* ---------- tablet ---------- */
@media (max-width:1024px){
  .nav__links{display:none}
  .nav{grid-template-columns:1fr auto}
  .hero__dict{grid-column:1/-1;display:flex;flex-direction:column;gap:12px}.hero__def{text-align:left}.hero__lede{grid-column:1/-1}
  .about .kicker{grid-column:1/-1;padding-top:0}
  .about__text{grid-column:1/-1}
  .about__text,.about__split{grid-column:1/-1}
  .exp__years,.exp__list{grid-column:1/-1}
  .exp__years{margin-top:48px;order:2}
  .contact__text,.ht3d__wrap{grid-column:1/-1}
  .ht3d__wrap{max-width:420px;width:100%;justify-self:center;order:-1}
}

/* work: stacked with inline images on tablet / phone */
@media (max-width:900px){
  .work__list{grid-column:1/-1;padding-bottom:0}
  .work__stage{display:none}
  .proj{min-height:0;color:var(--ink);padding:0 0 64px}
  .proj__thumb{display:block;width:100%;aspect-ratio:1062/690;object-fit:cover;order:-1;margin-bottom:8px;border:1px solid var(--ink)}
}

/* ---------- phone ---------- */
@media (max-width:640px){
  body{font-size:15px}
  .hero{padding-top:var(--nav-h,58px);min-height:600px}
  .hero__foot{padding-top:16px;gap:18px}
  .hero__tag{top:auto;bottom:clamp(20px,6vw,32px);transform:none;width:calc(100% - 48px);font-size:17vw}   /* object up top, tagline bottom-left */
  .about__split{grid-template-columns:1fr;gap:44px}
  .able-h{font-size:13.5vw}
  .exp__list{grid-template-columns:repeat(2,1fr)}
  .exp__list li{min-height:150px;padding:14px}
  .exp__name{font-size:clamp(22px,6.4vw,30px)}
  .exp__able{font-size:10px}
  .marquee img{height:72px}
  .svc__title{font-size:12.5vw}
  .exp__h{font-size:12.5vw}
  .team__grid{grid-template-columns:1fr;gap:56px}
  .person__img{max-width:320px}
  .work__sub,.team__sub{margin-left:0}
  .contact__title{font-size:13vw}
  .ht3d__wrap{max-width:300px}
  .contact__row{flex-direction:column;gap:6px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .px--t::after{animation:none}
  .about__text .word{opacity:1}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .person__img canvas{display:none}
}