/* Vizible — vizible.lt
   Palette: ink / paper / signal (one accent). One typeface: Instrument Sans. */

@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/instrument-sans-latin-400-normal.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}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/instrument-sans-latin-ext-400-normal.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:"Instrument Sans";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/instrument-sans-latin-500-normal.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}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/instrument-sans-latin-ext-500-normal.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:"Instrument Sans";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/instrument-sans-latin-600-normal.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}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/instrument-sans-latin-ext-600-normal.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}

:root{
  --ink:#14161A;
  --ink-2:#1B1E23;
  --ink-3:#23272E;
  --tile:#1F2228;
  --paper:#F5F3EE;
  --muted:#9AA0A8;
  --faint:#646A73;
  --line:rgba(245,243,238,.11);
  --signal:#FF4F2E;
  --sans:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gutter:clamp(16px,4vw,48px);
  --nav-h:64px;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--nav-h)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--ink);color:var(--paper);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:600;text-wrap:balance}
ol,ul{list-style:none;margin:0;padding:0}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--paper);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px}

/* ---------- logo (the wordmark, rebuilt in type) ---------- */
.logo{display:inline-flex;align-items:baseline;font-weight:600;font-size:25px;letter-spacing:-.06em;line-height:1;text-decoration:none}
.logo-dot{display:inline-block;width:.22em;height:.22em;background:var(--signal);margin-left:.07em}
.logo-sm{font-size:20px}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:var(--nav-h);display:flex;align-items:center;gap:32px;padding:env(safe-area-inset-top,0) var(--gutter) 0;transition:background-color .35s,border-color .35s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(20,22,26,.92);border-color:var(--line)}
.nav-links{display:flex;gap:28px;margin-left:auto;font-size:15px}
.nav-links a{text-decoration:none;color:var(--muted);transition:color .2s}
.nav-links a:hover{color:var(--paper)}
.nav-links .nav-contact{color:var(--paper)}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;padding:3px}
.lang button{font-size:13px;font-weight:600;letter-spacing:.04em;padding:6px 11px;border-radius:999px;color:var(--faint);transition:color .2s,background-color .2s}
.lang button[aria-pressed="true"]{background:var(--paper);color:var(--ink)}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden}
.stage{position:absolute;inset:0;touch-action:pan-y}
.stage canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;outline:none}
.stage.grab canvas{cursor:grab}
.stage.dragging canvas{cursor:grabbing}
.stage.pointing canvas{cursor:pointer}

.hero-copy{position:absolute;left:var(--gutter);bottom:clamp(32px,6vh,64px);width:min(36rem,40vw);pointer-events:none}
.hero-copy a,.hero-copy button{pointer-events:auto}
.eyebrow{font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hero h1{margin-top:18px;font-size:clamp(44px,5.2vw,88px);line-height:.98;letter-spacing:-.045em}
.hero-sub{margin-top:22px;max-width:29em;font-size:18px;color:var(--muted)}

.work-list{margin-top:34px;display:grid;grid-template-columns:repeat(2,max-content);gap:6px 36px;counter-reset:w}
.work-list button{display:flex;align-items:baseline;gap:12px;padding:6px 0;text-align:left}
.work-list .n{font-size:13px;color:var(--faint);font-variant-numeric:tabular-nums}
.work-list .nm{font-size:17px;font-weight:500;border-bottom:1px solid transparent;transition:border-color .2s}
.work-list .tp{font-size:14px;color:var(--faint)}
.work-list button:hover .nm,.work-list button:focus-visible .nm{border-color:var(--paper)}

.hero-hint{position:absolute;right:var(--gutter);bottom:clamp(32px,6vh,64px);max-width:15em;text-align:right;font-size:14px;color:var(--faint);pointer-events:none}

.tile-label{position:absolute;left:0;top:0;z-index:3;pointer-events:none;display:flex;flex-direction:column;gap:1px;padding:9px 13px;border-radius:10px;background:rgba(20,22,26,.9);border:1px solid var(--line);opacity:0;transform:translate3d(-999px,0,0);transition:opacity .2s}
.tile-label.on{opacity:1}
.tile-label strong{font-size:15px;font-weight:600}
.tile-label span{font-size:13px;color:var(--muted)}

/* fallback grid (no WebGL or reduced motion) */
.work-grid{position:absolute;top:calc(var(--nav-h) + 24px);right:var(--gutter);bottom:clamp(32px,6vh,64px);left:46%;display:grid;grid-template-columns:1fr 1fr;align-content:center;gap:14px}
.work-grid[hidden]{display:none}
.work-card{display:block;text-align:left}
.work-card .img{display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--tile)}
.work-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.work-card:hover img{transform:scale(1.03)}
.work-card strong{display:block;margin-top:10px;font-size:16px;font-weight:600}
.work-card span{font-size:14px;color:var(--muted)}
.no-sphere .hero-hint,.no-sphere .work-list{display:none}

/* ---------- about line ---------- */
.about{padding:clamp(96px,18vh,200px) var(--gutter) clamp(72px,12vh,140px);border-top:1px solid var(--line)}
.about-line{max-width:23em;font-size:clamp(26px,3.3vw,50px);line-height:1.12;letter-spacing:-.03em;font-weight:500;text-wrap:pretty}

/* ---------- section heads ---------- */
section h2{font-size:clamp(36px,4.6vw,72px);line-height:1;letter-spacing:-.04em}
.section-sub{font-size:17px;color:var(--muted);max-width:30em}

/* ---------- design ---------- */
.design{padding:clamp(64px,10vh,120px) var(--gutter)}
.design-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px 48px}
.tabs{display:flex;gap:28px;margin:44px 0 28px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tabs button{position:relative;flex:none;padding:12px 0 14px;font-size:16px;color:var(--faint);transition:color .2s}
.tabs button:hover{color:var(--paper)}
.tabs button[aria-selected="true"]{color:var(--paper)}
.tabs button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--paper)}
.design-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.design-grid li[hidden]{display:none}
.d-card{position:relative;display:block;width:100%;aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:var(--tile);text-align:left;transition:background-color .25s}
.d-card:hover{background:#252930}
.d-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.d-card:hover img{transform:scale(1.025)}
.d-card .ph-n{position:absolute;top:16px;left:18px;font-size:13px;color:var(--faint);font-variant-numeric:tabular-nums}
.d-card .ph-t{position:absolute;left:18px;bottom:16px;right:18px;font-size:14px;color:var(--faint)}
.d-card .ph-t b{display:block;font-weight:500;color:var(--muted)}

/* ---------- process ---------- */
.process{padding:clamp(64px,10vh,120px) var(--gutter)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);margin-top:56px;counter-reset:s}
.step{position:relative;padding:28px 40px 0 0;border-top:1px solid var(--line)}
.step::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;background:var(--paper)}
.step-n{display:block;font-size:clamp(48px,5vw,80px);font-weight:500;line-height:1;letter-spacing:-.04em;color:var(--faint);font-variant-numeric:tabular-nums}
.step h3{margin-top:28px;font-size:24px;letter-spacing:-.02em}
.step p{margin-top:10px;color:var(--muted);max-width:22em}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:48px clamp(40px,7vw,120px);padding:clamp(72px,12vh,140px) var(--gutter);border-top:1px solid var(--line)}
.contact-intro .section-sub{margin-top:20px}
.contact-or{margin-top:48px;font-size:15px;color:var(--muted)}
.contact-mail{display:block;margin-top:6px;font-size:clamp(22px,2.4vw,32px);font-weight:500;letter-spacing:-.02em;color:var(--paper);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--faint);transition:text-decoration-color .2s;overflow-wrap:anywhere}
.contact-mail:hover{text-decoration-color:var(--paper)}
.form{display:grid;gap:26px;align-content:start}
.field{display:grid;gap:8px;border:0;margin:0;padding:0;min-width:0}
.field label,.field legend{font-size:14px;color:var(--muted);padding:0}
.field input,.field textarea{width:100%;font:inherit;font-size:17px;color:var(--paper);background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 0;border-radius:0;transition:border-color .2s;resize:vertical}
.field textarea{min-height:120px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--paper)}
.field ::placeholder{color:var(--faint)}
.need{display:flex;flex-wrap:wrap;gap:10px}
.need legend{margin-bottom:8px;width:100%}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-block;padding:9px 16px;border:1px solid var(--line);border-radius:999px;font-size:15px;color:var(--muted);transition:all .2s}
.chip input:checked+span{border-color:var(--paper);color:var(--paper)}
.chip input:focus-visible+span{outline:2px solid var(--paper);outline-offset:2px}
.form-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 30px;border-radius:999px;background:var(--signal);color:var(--ink);font-weight:600;font-size:16px;transition:transform .2s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn[disabled]{opacity:.6;transform:none}
.form-status{font-size:15px;color:var(--muted)}

/* ---------- footer ---------- */
.footer{display:flex;align-items:center;gap:24px;padding:28px var(--gutter) calc(28px + env(safe-area-inset-bottom,0));border-top:1px solid var(--line);font-size:14px;color:var(--faint)}
.footer .logo{color:var(--paper)}
.footer a{margin-left:auto;text-decoration:none}
.footer a:hover{color:var(--paper)}

/* ---------- reveal (calm) ---------- */
.js .reveal{opacity:0;transform:translate3d(0,28px,0);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- website viewer ---------- */
.viewer{position:fixed;inset:0;z-index:100}
.viewer[hidden]{display:none}
.viewer-backdrop{position:absolute;inset:0;background:rgba(12,13,16,.9);opacity:0;transition:opacity .45s}
.viewer.open .viewer-backdrop{opacity:1}
.win{position:fixed;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:#0E0F12;box-shadow:0 40px 120px -20px rgba(0,0,0,.7),0 0 0 1px var(--line);transform-origin:0 0;will-change:transform}
.win-bar{flex:none;display:flex;align-items:center;gap:16px;height:50px;padding:0 10px 0 16px;background:var(--ink-2);border-bottom:1px solid var(--line);opacity:0;transition:opacity .3s}
.viewer.open .win-bar{opacity:1}
.win-dots{display:flex;gap:7px}
.win-dots i{width:10px;height:10px;border-radius:50%;background:#353A42}
.win-meta{display:flex;align-items:baseline;gap:10px;white-space:nowrap;min-width:0}
.win-meta strong{font-size:15px;font-weight:600}
.win-meta span{font-size:13px;color:var(--muted)}
.win-url{flex:1;max-width:440px;margin:0 auto;padding:6px 14px;border-radius:8px;background:var(--ink);font-size:13px;color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;transition:background-color .2s}
.win-btn:hover{background:var(--ink-3)}
.win-close{width:36px;padding:0;justify-content:center;font-size:15px}
.win-body{position:relative;flex:1;min-height:0;background:var(--ink)}
.win-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.win-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#0E0F12;opacity:0;transition:opacity .45s}
.win-body iframe.loaded{opacity:1}
.win-loading{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);padding:8px 14px;border-radius:999px;background:rgba(20,22,26,.85);font-size:13px;color:var(--muted);opacity:0;transition:opacity .3s}
.viewer.loading .win-loading{opacity:1}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:110;background:rgba(10,11,13,.97);display:grid;place-items:center;touch-action:pan-y pinch-zoom}
.lb[hidden]{display:none}
.lb-stage{width:min(92vw,1100px);height:min(80vh,900px);display:grid;place-items:center;overflow:hidden;touch-action:pan-y}
.lb-item{max-width:100%;max-height:100%;display:grid;place-items:center;will-change:transform}
.lb-item img{max-width:min(92vw,1100px);max-height:min(80vh,900px);width:auto;height:auto;object-fit:contain;border-radius:4px;user-select:none;-webkit-user-drag:none}
.lb-ph{height:min(80vh,900px);aspect-ratio:4/5;max-width:92vw;border-radius:6px;background:var(--tile);display:grid;place-items:center;color:var(--faint);font-size:15px}
.lb-btn{position:absolute;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:18px;background:rgba(20,22,26,.6);transition:background-color .2s}
.lb-btn:hover{background:var(--ink-3)}
.lb-prev{left:var(--gutter);top:50%;margin-top:-26px}
.lb-next{right:var(--gutter);top:50%;margin-top:-26px}
.lb-close{top:calc(16px + env(safe-area-inset-top,0));right:var(--gutter)}
.lb-cap{position:absolute;left:0;right:0;bottom:calc(20px + env(safe-area-inset-bottom,0));display:flex;justify-content:center;gap:16px;font-size:14px;color:var(--muted)}
.lb-cap #lb-count{color:var(--faint);font-variant-numeric:tabular-nums}
.no-scroll{overflow:hidden}

/* ---------- tablet ---------- */
@media (max-width:1000px){
  .design-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1100px){
  .hero-copy{width:min(32rem,46vw)}
}

/* ---------- phone ---------- */
@media (max-width:760px){
  :root{--nav-h:58px}
  .nav{gap:16px}
  .nav-links a:not(.nav-contact){display:none}
  .logo{font-size:23px}
  .hero{height:auto;min-height:0;padding-bottom:40px}
  .stage{position:relative;height:min(112vw,66svh);margin-top:var(--nav-h)}
  .hero-copy{position:static;width:auto;padding:4px var(--gutter) 0}
  .hero h1{margin-top:14px;font-size:clamp(38px,11vw,48px)}
  .hero-sub{margin-top:16px;font-size:17px}
  .work-list{grid-template-columns:1fr 1fr;gap:4px 16px;margin-top:24px}
  .work-list button{flex-direction:column;gap:0;padding:8px 0}
  .work-list .tp{font-size:13px}
  .hero-hint{position:static;text-align:left;max-width:none;padding:18px var(--gutter) 0;font-size:13px}
  .no-sphere .stage{height:auto;padding:16px var(--gutter) 28px}
  .work-grid{position:static;grid-template-columns:1fr 1fr;gap:16px 12px}
  .work-card strong{font-size:15px}
  .work-card span{font-size:13px}
  .about{padding:80px var(--gutter) 64px}
  .about-line{font-size:26px}
  .design-head{grid-template-columns:1fr}
  .tabs{gap:22px;margin:32px calc(var(--gutter) * -1) 20px;padding:0 var(--gutter)}
  .design-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .d-card .ph-n{top:12px;left:12px}
  .d-card .ph-t{left:12px;bottom:12px;font-size:13px}
  .steps{grid-template-columns:1fr;margin-top:40px;gap:40px}
  .step{padding:22px 0 0}
  .step h3{margin-top:18px}
  .contact{grid-template-columns:1fr;gap:40px;padding:72px var(--gutter)}
  .contact-or{margin-top:28px}
  .footer{flex-wrap:wrap;gap:8px 20px}
  .win{border-radius:12px}
  .win-bar{height:52px;gap:6px;padding:0 6px 0 14px}
  .win-dots,.win-url,.win-btn [data-i18n]{display:none}
  .win-meta{flex-direction:column;gap:0;margin-right:auto;line-height:1.25}
  .win-btn{width:40px;height:40px;padding:0;justify-content:center;font-size:17px}
  .lb-prev,.lb-next{top:auto;bottom:calc(64px + env(safe-area-inset-bottom,0));margin:0}
  .lb-stage{height:70vh}
  .lb-item img{max-height:70vh}
  .lb-ph{height:auto;width:84vw}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .js .reveal{opacity:1;transform:none}
}