@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=Instrument+Serif:ital@0;1&display=swap');
:root{--ink:#0a0b0c;--paper:#eeeee9;--line:rgba(10,11,12,.2);--white:#f6f6f2}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif;font-weight:300}a{color:inherit;text-decoration:none}img{display:block;width:100%}button{font:inherit}.topbar{position:absolute;z-index:10;top:0;left:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:24px 38px;color:white;border-bottom:1px solid rgba(255,255,255,.24)}.brand{display:block;width:145px}.brand img{height:auto}.topbar nav{display:flex;gap:32px;margin-left:auto;margin-right:38px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}.topbar nav a{opacity:.82}.header-actions{display:flex;align-items:center}.lang-switch{background:none;border:0;color:white;display:flex;align-items:center;gap:8px;font-size:.68rem;letter-spacing:.1em;padding:8px;cursor:pointer}.lang-switch span{opacity:.48}.lang-switch span.active{opacity:1}.lang-switch i{height:12px;width:1px;background:rgba(255,255,255,.5)}.menu{display:none;border:0;background:none;width:30px;padding:6px 0}.menu i{display:block;height:1px;background:white;margin:6px 0}.hero{min-height:100svh;position:relative;overflow:hidden;color:var(--white);background:#071019}.hero-media{position:absolute;inset:-3%;overflow:hidden;background:#071019}.hero-video{width:100%;height:100%;object-fit:cover;object-position:center center;animation:drift 16s ease-in-out infinite alternate}@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.085) translate3d(-1.2%,.5%,0)}}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,8,18,.5),rgba(2,8,15,.04) 60%),linear-gradient(0deg,rgba(0,5,10,.46),transparent 45%)}.hero-copy{position:absolute;left:6.4vw;top:50%;transform:translateY(-42%)}.eyebrow,.section-index{text-transform:uppercase;letter-spacing:.17em;font-size:.68rem;font-weight:400}.hero h1{font-size:clamp(4.3rem,9vw,9rem);font-weight:300;line-height:.8;letter-spacing:-.06em;margin:42px 0 58px}.hero h1 em,.case h2 em,.intro h2 em{font-family:"Instrument Serif",serif;font-weight:400}.text-link{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.7)}.text-link b{margin-left:34px}.project-caption{position:absolute;right:38px;bottom:38px;display:grid;grid-template-columns:56px 150px;gap:18px;font-size:.65rem;text-transform:uppercase;letter-spacing:.1em}.project-caption p{margin:0;font-size:.8rem;line-height:1.5}.project-caption small{opacity:.6}.scroll{position:absolute;left:38px;bottom:34px;font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;display:flex;gap:12px;align-items:center}.scroll span{width:32px;height:1px;background:white}.scroll b{font-weight:400}.case{padding:120px 3vw 150px}.case-heading{display:grid;grid-template-columns:25% 75%;padding:0 3.4vw 78px}.case-heading h2{font-size:clamp(3rem,6vw,6.2rem);line-height:.89;letter-spacing:-.05em;font-weight:300;margin:0}.case-heading>div>p{max-width:430px;margin:40px 0 0 auto;font-size:1rem;line-height:1.65}.case-viewer{position:relative;background:#d7d7d3;overflow:hidden}.case-viewer>img{aspect-ratio:16/8.8;object-fit:cover;transition:opacity .25s ease}.case-viewer.is-changing>img{opacity:.15}.case-tabs{position:absolute;right:22px;bottom:22px;display:flex;background:rgba(8,9,10,.88);backdrop-filter:blur(12px);padding:6px}.case-tabs button{border:0;background:none;color:white;padding:12px 16px;display:flex;gap:18px;align-items:center;cursor:pointer;opacity:.48;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}.case-tabs button.active{opacity:1;background:rgba(255,255,255,.1)}.case-tabs b{font-weight:400}.case-tabs span{font-size:.6rem}.case-facts{display:grid;grid-template-columns:2fr 1fr 1fr;border-top:1px solid var(--ink);margin-top:18px}.case-facts p{display:flex;flex-direction:column;gap:9px;margin:0;padding:17px 0}.case-facts span{font-size:.62rem;text-transform:uppercase;letter-spacing:.14em}.case-facts b{font-size:.78rem;font-weight:400}.intro{padding:145px 6.4vw 165px;display:grid;grid-template-columns:25% 75%;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.intro>div{max-width:1060px}.intro h2{margin:0;font-size:clamp(3rem,5.8vw,6rem);line-height:.94;letter-spacing:-.055em;font-weight:300}.studio-copy{width:68%;margin:72px 0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:55px;font-size:1rem;line-height:1.7}.studio-copy p{margin:0}.founders{width:68%;margin:70px 0 0 auto;border-top:1px solid var(--ink);display:grid;grid-template-columns:1fr 1fr;gap:55px}.founders p{display:flex;flex-direction:column;gap:7px;margin:0;padding-top:16px}.founders span{font-size:1.05rem}.founders small{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em}.work{padding:80px 3vw 160px}.section-head{display:flex;justify-content:space-between;padding:0 3.4vw 70px;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}.project figure{margin:0;overflow:hidden;background:#15191e}.project img{aspect-ratio:1.28/1;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}.project-large img{aspect-ratio:16/8.4}.project a:hover img{transform:scale(1.025)}.project-meta{display:grid;grid-template-columns:1fr 1fr auto;gap:20px;border-top:1px solid var(--ink);padding:17px 0 54px;align-items:baseline}.project-meta h3{margin:0;font-weight:400;font-size:1.3rem}.project-meta p,.project-meta span{margin:0;font-size:.7rem;text-transform:uppercase;letter-spacing:.12em}.project-row{display:grid;grid-template-columns:1fr 1fr;gap:6vw;margin-top:60px}.project-offset{margin-top:170px}.contact{min-height:78vh;background:#0a0b0c;color:var(--white);padding:90px 6.4vw;display:flex;flex-direction:column;justify-content:space-between}.quote{font-family:"Instrument Serif",serif;font-size:clamp(3.5rem,7.7vw,8rem);line-height:.91;margin:100px 0}.circle-link{align-self:flex-end;width:165px;height:165px;border:1px solid rgba(255,255,255,.6);border-radius:50%;display:flex;align-items:center;justify-content:center;gap:12px;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;transition:.3s;text-align:center}.circle-link:hover{color:#0a0b0c;background:white}footer{background:#0a0b0c;color:white;border-top:1px solid rgba(255,255,255,.2);padding:36px 6.4vw;display:grid;grid-template-columns:1fr 1fr auto;align-items:end;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em}footer p{margin:0}footer .brand{width:125px}
@media(max-width:760px){.topbar{padding:20px}.brand{width:120px}.topbar nav{display:none}.menu{display:block}.lang-switch{margin-right:10px}.hero-copy{left:20px;top:54%;right:20px}.eyebrow{max-width:280px;line-height:1.6}.hero h1{font-size:18vw;line-height:.86;margin:34px 0 48px}.project-caption{right:20px;bottom:28px}.scroll{display:none}.hero-video{object-position:66% center}.case{padding:90px 20px}.case-heading{display:block;padding:0 0 50px}.case-heading h2{margin-top:60px;font-size:14vw}.case-heading>div>p{margin-top:36px}.case-viewer>img{aspect-ratio:4/5}.case-tabs{right:10px;bottom:10px;left:10px;justify-content:space-between}.case-tabs button{padding:10px 8px;gap:7px}.case-facts{grid-template-columns:1fr}.case-facts p{border-bottom:1px solid var(--line)}.intro{padding:100px 20px;display:block}.intro h2{margin-top:70px;font-size:13vw}.studio-copy,.founders{width:100%;grid-template-columns:1fr;margin-top:50px;gap:26px}.founders{margin-top:55px}.work{padding:65px 20px 100px}.section-head{padding:0 0 50px}.project-large img,.project img{aspect-ratio:4/5}.project-row{grid-template-columns:1fr;gap:30px}.project-offset{margin:0}.project-meta{grid-template-columns:1fr auto}.project-meta p{display:none}.contact{padding:75px 20px;min-height:70vh}.quote{font-size:16vw}.circle-link{width:145px;height:145px}footer{padding:32px 20px;grid-template-columns:1fr auto}footer p:nth-child(2){display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-video{animation:none}.project img{transition:none}}
.view-switcher{position:absolute;left:22px;bottom:22px;display:flex;align-items:center;gap:4px;background:rgba(8,9,10,.88);backdrop-filter:blur(12px);padding:6px;color:white}.view-switcher>span{padding:0 12px;font-size:.65rem;text-transform:uppercase;letter-spacing:.12em;opacity:.62}.view-switcher button{width:38px;height:38px;border:0;background:transparent;color:white;cursor:pointer;font-size:.68rem;letter-spacing:.06em;opacity:.48}.view-switcher button.active{opacity:1;background:rgba(255,255,255,.12)}



/* Mobile navigation */
@media(max-width:760px){
  .topbar.menu-open{background:rgba(7,16,25,.97)}
  .topbar.menu-open nav{display:flex;position:absolute;top:100%;left:0;right:0;margin:0;padding:22px 20px 26px;background:rgba(7,16,25,.97);border-top:1px solid rgba(255,255,255,.12);flex-direction:column;gap:18px}
  .topbar.menu-open nav a{font-size:.76rem;opacity:1}
  .menu{cursor:pointer}
}

.case-heading h2{letter-spacing:-.028em;line-height:.94}.case-heading h2 em,.intro h2 em{letter-spacing:-.005em}.intro h2{letter-spacing:-.032em;line-height:1}.studio-copy{line-height:1.78}.founders small{line-height:1.45;letter-spacing:.08em}.project-meta h3{letter-spacing:-.015em}.quote{letter-spacing:-.018em;line-height:.96}
@media(max-width:760px){.case-heading h2{line-height:.98;letter-spacing:-.02em}.intro h2{line-height:1.04;letter-spacing:-.02em}.quote{line-height:1;letter-spacing:-.01em}.view-switcher{left:10px;top:10px;bottom:auto}.view-switcher>span{padding:0 8px}.view-switcher button{width:34px;height:34px}.studio-copy{line-height:1.72}}


/* Hero typography refinement */
html{font-kerning:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{letter-spacing:0}
.hero h1{margin:40px 0 56px;letter-spacing:-.052em;line-height:.86;max-width:7.2ch}
.hero .hero-line{display:block}
.hero .hero-line-main{line-height:.84}
.hero .hero-line-accent{margin-top:.08em}
.hero h1 em{display:inline-block;font-size:.76em;line-height:.96;letter-spacing:-.022em;font-style:italic}
html[lang="pl"] .hero h1{max-width:8.5ch;letter-spacing:-.036em;line-height:.88}
html[lang="pl"] .hero h1 em{font-size:.62em;letter-spacing:-.012em;line-height:1.02}
@media(max-width:760px){
  .hero h1{font-size:18vw;line-height:.9;letter-spacing:-.04em;margin:32px 0 46px;max-width:7.6ch}
  .hero .hero-line-accent{margin-top:.1em}
  .hero h1 em{font-size:.74em;letter-spacing:-.016em;line-height:1}
  html[lang="pl"] .hero h1{max-width:9ch;letter-spacing:-.02em;line-height:.94}
  html[lang="pl"] .hero h1 em{font-size:.64em;letter-spacing:-.006em}
}

/* Optical kerning fix for Polish hero — open the two rz pairs in “Przestrzenie” */
html[lang="pl"] .hero .kern-rz{display:inline-block;margin-left:.045em}

/* Hero Polish line-break fix — keep “Przestrzenie,” on one line on desktop */
@media (min-width:761px){
  html[lang="pl"] .hero h1{max-width:none;width:max-content;letter-spacing:-.032em}
  html[lang="pl"] .hero .hero-line-main{white-space:nowrap}
}

/* Keep the Polish hero compact enough on phones without splitting the word */
@media (max-width:760px){
  html[lang="pl"] .hero h1{max-width:none;width:auto;font-size:13vw;letter-spacing:-.018em}
  html[lang="pl"] .hero .hero-line-main{white-space:nowrap}
  html[lang="pl"] .hero h1 em{font-size:.72em}
}

/* Mobile image responsiveness — show full frames, no forced portrait crop */
@media (max-width:760px){
  .case-viewer>img{
    width:100%;
    height:auto;
    aspect-ratio:auto;
    object-fit:contain;
  }
  .project figure{
    background:transparent;
  }
  .project-large img,
  .project img{
    width:100%;
    height:auto;
    aspect-ratio:auto;
    object-fit:contain;
  }
}

/* Visible contact email */
.contact-actions{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
}
.contact-email{
  font-size:clamp(1.15rem,1.8vw,1.7rem);
  font-weight:300;
  letter-spacing:-.02em;
  text-transform:none;
  border-bottom:1px solid rgba(255,255,255,.45);
  padding-bottom:6px;
  transition:opacity .2s ease,border-color .2s ease;
}
.contact-email:hover{
  opacity:.72;
  border-color:rgba(255,255,255,.8);
}
.contact-actions .circle-link{
  align-self:auto;
  flex:0 0 auto;
}
@media(max-width:760px){
  .contact-actions{
    flex-direction:column;
    align-items:stretch;
    gap:42px;
  }
  .contact-email{
    align-self:flex-start;
    font-size:1.15rem;
  }
  .contact-actions .circle-link{
    align-self:flex-end;
  }
}


/* Mobile compact controls — reduce footprint of Final / Clay / Wireframe on phones */
@media (max-width:760px){
  .case-tabs{
    left:auto;
    right:8px;
    bottom:8px;
    justify-content:flex-end;
    padding:4px;
    gap:2px;
    max-width:calc(100% - 16px);
  }
  .case-tabs button{
    padding:7px 10px;
    gap:5px;
    font-size:.58rem;
    letter-spacing:.08em;
    white-space:nowrap;
  }
  .case-tabs span{
    display:none;
  }

  .view-switcher{
    left:8px;
    top:8px;
    bottom:auto;
    padding:4px;
    gap:2px;
  }
  .view-switcher > span{
    display:none;
  }
  .view-switcher button{
    width:30px;
    height:30px;
    font-size:.58rem;
  }
}


/* More compact mobile navigation */
@media (max-width:760px){
  .menu{
    width:24px;
    padding:4px 0;
  }
  .menu i{
    margin:5px 0;
  }
  .topbar.menu-open nav{
    padding:14px 20px 18px;
    gap:12px;
  }
  .topbar.menu-open nav a{
    font-size:.68rem;
    letter-spacing:.09em;
  }
}


/* Founder portraits — editorial studio presentation */
.founders{
  width:100%;
  margin:82px 0 0;
  border-top:0;
  grid-template-columns:1fr 1fr;
  gap:36px;
}
.founder-card{
  min-width:0;
}
.founder-photo{
  margin:0;
  overflow:hidden;
  background:#d9d8d2;
  aspect-ratio:4/5;
}
.founder-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.founder-card:hover .founder-photo img{
  transform:scale(1.018);
}
.founder-meta{
  border-top:1px solid var(--ink);
  margin-top:14px;
}
.founder-meta p{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin:0;
  padding-top:15px;
}
.founder-meta span{
  font-size:1.12rem;
  letter-spacing:-.015em;
}
.founder-meta small{
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.09em;
  line-height:1.45;
}
.footer-credit{
  white-space:nowrap;
}
.footer-credit .created-by{
  opacity:.68;
}
@media(max-width:760px){
  .founders{
    width:100%;
    grid-template-columns:1fr;
    gap:54px;
    margin-top:58px;
  }
  .founder-photo{
    aspect-ratio:4/5;
  }
  .founder-meta span{
    font-size:1.05rem;
  }
  footer{
    grid-template-columns:1fr auto;
    row-gap:18px;
  }
  .footer-credit{
    grid-column:1 / -1;
    white-space:normal;
    font-size:.62rem;
  }
}


/* Case study editorial description */
.case-copy{
  max-width:560px;
  margin:40px 0 0 auto;
}
.case-copy p{
  margin:0;
}
.case-description{
  font-size:1rem;
  line-height:1.72;
}
.case-process{
  margin-top:18px !important;
  font-size:.82rem;
  line-height:1.65;
  opacity:.62;
}
@media(max-width:760px){
  .case-copy{
    max-width:none;
    margin-top:34px;
  }
  .case-description{
    font-size:.98rem;
    line-height:1.7;
  }
  .case-process{
    margin-top:16px !important;
    font-size:.78rem;
  }
}


/* Founder bios */
.founder-meta{
  padding-bottom:4px;
}
.founder-meta .founder-role{
  padding-top:15px;
}
.founder-meta .founder-bio{
  display:block;
  margin:18px 0 0;
  padding:0;
  max-width:39ch;
  font-size:.88rem;
  line-height:1.68;
  opacity:.72;
}
@media(max-width:760px){
  .founder-meta .founder-bio{
    max-width:none;
    margin-top:16px;
    font-size:.9rem;
    line-height:1.68;
  }
}


/* =========================
   VISTATE — subtle motion
   ========================= */

/* Elements only become hidden after JS adds .motion-ready,
   so the page stays fully readable if JavaScript is unavailable. */
.motion-ready .reveal-on-scroll{
  opacity:0;
  transform:translate3d(0,24px,0);
  transition:
    opacity .85s cubic-bezier(.22,.61,.36,1),
    transform .95s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--reveal-delay,0ms);
  will-change:opacity,transform;
}
.motion-ready .reveal-on-scroll.reveal-soft{
  transform:translate3d(0,14px,0);
}
.motion-ready .reveal-on-scroll.is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
}

/* Image reveal: restrained mask opening instead of a flashy animation */
.motion-ready .image-reveal{
  clip-path:inset(7% 0 0 0);
  opacity:.82;
  transition:
    clip-path 1.15s cubic-bezier(.22,.61,.36,1),
    opacity .9s ease;
  will-change:clip-path,opacity;
}
.motion-ready .image-reveal.is-visible{
  clip-path:inset(0 0 0 0);
  opacity:1;
}

/* Desktop-only micro parallax.
   A tiny scale keeps the image edges outside the crop while it moves. */
@media (min-width:761px){
  .case-viewer > img{
    transform:translate3d(0,var(--parallax-y,0px),0) scale(1.022);
    transform-origin:center center;
    will-change:transform,opacity;
  }

  .project figure img{
    --image-scale:1.018;
    transform:translate3d(0,var(--parallax-y,0px),0) scale(var(--image-scale));
    transform-origin:center center;
    transition:
      transform 1s cubic-bezier(.2,.7,.2,1),
      opacity .5s ease;
    will-change:transform;
  }

  .project a:hover figure img{
    --image-scale:1.042;
  }
}

/* Mobile: no parallax, only the reveal. */
@media (max-width:760px){
  .case-viewer > img,
  .project figure img{
    transform:none !important;
  }

  .motion-ready .reveal-on-scroll{
    transform:translate3d(0,16px,0);
  }
  .motion-ready .reveal-on-scroll.is-visible{
    transform:translate3d(0,0,0);
  }
}

/* Respect accessibility / OS motion preferences */
@media (prefers-reduced-motion:reduce){
  .motion-ready .reveal-on-scroll,
  .motion-ready .image-reveal{
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
    transition:none !important;
  }

  .case-viewer > img,
  .project figure img{
    transform:none !important;
    transition:none !important;
  }
}


/* Individual contact numbers */
.contact-details{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:26px;
}
.contact-phones{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:38px;
}
.contact-person{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.contact-person span{
  font-size:.62rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  opacity:.55;
}
.contact-person a{
  font-size:.98rem;
  letter-spacing:-.01em;
  border-bottom:1px solid rgba(255,255,255,.28);
  padding-bottom:4px;
  transition:opacity .2s ease,border-color .2s ease;
}
.contact-person a:hover{
  opacity:.72;
  border-color:rgba(255,255,255,.72);
}
@media(max-width:760px){
  .contact-details{
    gap:22px;
  }
  .contact-phones{
    grid-template-columns:1fr;
    gap:18px;
  }
  .contact-person a{
    font-size:1rem;
  }
}


/* Founder portraits — slightly smaller, centered */
.founder-photo{
  width:86%;
  margin-left:auto;
  margin-right:auto;
}
.founder-meta{
  width:86%;
  margin-left:auto;
  margin-right:auto;
}

@media(max-width:760px){
  .founder-photo,
  .founder-meta{
    width:88%;
    max-width:420px;
    margin-left:auto;
    margin-right:auto;
  }
}