:root{
  --red:#d81924;
  --red-dark:#7b070d;
  --black:#030303;
  --ink:#f5f0e8;
  --paper:#f5f0e8;
  --muted:rgba(245,240,232,.62);
  --muted-dark:rgba(3,3,3,.62);
  --line:rgba(245,240,232,.16);
  --line-dark:rgba(3,3,3,.22);
}

*{box-sizing:border-box}
html{scroll-behavior:auto;overflow-x:hidden;background:var(--black)}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--black);
  color:var(--ink);
  font-family:Manrope,Arial,sans-serif;
  text-rendering:optimizeLegibility;
}
body.menu-open{overflow:hidden}
::selection{background:var(--paper);color:var(--red)}
a{color:inherit}
img{display:block;max-width:100%}

.scroll-orb{
  position:fixed;
  left:0;
  top:0;
  z-index:46;
  width:22px;
  aspect-ratio:1;
  border-radius:999px;
  pointer-events:none;
  background:
    radial-gradient(circle at 30% 24%,rgba(255,255,255,.98) 0 7%,rgba(255,249,195,.92) 12%,transparent 24%),
    radial-gradient(circle at 72% 78%,rgba(175,82,0,.46),transparent 36%),
    radial-gradient(circle at 50% 50%,#ffe96a 0 32%,#f4b51f 58%,#6f3500 100%);
  box-shadow:
    inset -7px -9px 12px rgba(89,44,0,.62),
    inset 5px 5px 11px rgba(255,255,255,.34),
    inset 0 0 0 1px rgba(255,246,178,.5),
    0 14px 26px rgba(0,0,0,.5),
    0 0 28px rgba(255,215,73,.3);
  transform:translate3d(78vw,72vh,0);
  will-change:transform;
}
.scroll-orb:after{
  content:"";
  position:absolute;
  left:50%;
  top:calc(100% + 13px);
  width:30px;
  height:7px;
  border-radius:50%;
  background:rgba(0,0,0,.28);
  filter:blur(6px);
  transform:translateX(-50%);
  opacity:.58;
}
.scroll-orb:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:.24;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.42) 0 1px,transparent 1.4px),
    radial-gradient(circle,rgba(0,0,0,.48) 0 1px,transparent 1.3px);
  background-size:7px 7px,9px 9px;
  mix-blend-mode:overlay;
}

.header{
  position:fixed;
  inset:0 0 auto;
  z-index:50;
  min-height:66px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  padding:0 clamp(18px,3vw,42px);
  border-bottom:1px solid rgba(3,3,3,.12);
  background:rgba(247,241,230,.72);
  color:var(--black);
  backdrop-filter:blur(16px);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.header.scrolled{
  background:rgba(3,3,3,.76);
  color:var(--ink);
  border-color:var(--line);
}
.logo{
  width:max-content;
  text-decoration:none;
  font-size:17px;
  font-weight:800;
  letter-spacing:-.08em;
}
nav{
  display:flex;
  justify-content:center;
  gap:30px;
}
nav a,
.menu-button,
.language-switcher button,
.section-kicker,
.hero-meta,
.eyebrow,
.project-card-copy span,
.project-card-copy small,
footer span{
  text-transform:uppercase;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
}
nav a{
  color:currentColor;
  opacity:.62;
  text-decoration:none;
  transition:opacity .2s;
}
nav a:hover,
nav a.active{opacity:1}
.header-actions{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:14px;
}
.language-switcher{display:flex;gap:2px}
.language-switcher button,
.menu-button{
  font-family:inherit;
  border:0;
  background:transparent;
  color:currentColor;
  opacity:.62;
  cursor:pointer;
}
.language-switcher button{padding:7px 8px}
.language-switcher button.active{
  opacity:1;
  text-decoration:underline;
  text-underline-offset:4px;
}
.menu-button{display:none;padding:0}

main{padding-top:66px}
section{scroll-margin-top:86px}

.hero{
  min-height:calc(100svh - 66px);
  position:relative;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:42px;
  padding:34px clamp(18px,3vw,42px) 42px;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 16%,rgba(255,255,255,.72),transparent 22vw),
    radial-gradient(circle at 86% 20%,rgba(216,25,36,.34),transparent 34vw),
    radial-gradient(circle at 54% 92%,rgba(123,7,13,.2),transparent 38vw),
    linear-gradient(145deg,#f8f1e5 0%,#f0e3d0 54%,#d9c4aa 100%);
  color:var(--black);
}
.hero:before{
  content:"";
  position:absolute;
  inset:-34%;
  opacity:.72;
  pointer-events:none;
  background:
    conic-gradient(from 130deg at 50% 50%,rgba(216,25,36,.12),rgba(245,240,232,.14),rgba(3,3,3,.08),rgba(255,242,214,.18),rgba(123,7,13,.12),rgba(216,25,36,.12)),
    radial-gradient(circle at 35% 40%,rgba(255,255,255,.34),transparent 19vw),
    radial-gradient(circle at 68% 62%,rgba(216,25,36,.12),transparent 24vw);
  filter:blur(48px);
  animation:heroShimmer 13s ease-in-out infinite alternate;
}
.hero:after{
  content:"";
  position:absolute;
  right:10vw;
  bottom:10vh;
  width:clamp(150px,22vw,360px);
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(3,3,3,.12);
  opacity:.42;
  background:
    radial-gradient(circle at 50% 50%,rgba(3,3,3,.12) 0 1px,transparent 2px),
    conic-gradient(from 40deg,transparent,rgba(3,3,3,.13),transparent 34%,rgba(245,240,232,.12),transparent 72%);
  filter:blur(.2px);
}
.hero-meta,
.hero-title,
.hero-bottom{position:relative;z-index:2}
.hero-meta,
.hero-bottom{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.hero-meta{color:var(--muted-dark)}
.hero-meta span:last-child{text-align:right}
.hero-title{
  align-self:center;
  display:grid;
  gap:22px;
  justify-items:center;
  width:min(100%,1480px);
  margin-inline:auto;
  text-align:center;
}
.eyebrow{
  margin:0;
  color:var(--black);
}
.hero h1{
  margin:0;
  width:100%;
  max-width:1460px;
  font-size:clamp(82px,15.6vw,236px);
  line-height:.78;
  letter-spacing:-.105em;
  font-weight:800;
  overflow-wrap:anywhere;
}
.hero-bottom{align-items:end}
.hero-bottom p{
  grid-column:2;
  max-width:760px;
  margin:0 clamp(10px,3vw,58px) 0 auto;
  color:rgba(3,3,3,.88);
  font-size:clamp(24px,2.75vw,42px);
  line-height:.98;
  letter-spacing:-.07em;
  font-weight:800;
  text-wrap:balance;
}
.text-link{
  width:max-content;
  padding-bottom:6px;
  border-bottom:2px solid currentColor;
  color:var(--black);
  text-decoration:none;
  text-transform:uppercase;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
}

@keyframes heroShimmer{
  0%{transform:translate3d(-3%,2%,0) rotate(-8deg) scale(1)}
  100%{transform:translate3d(4%,-4%,0) rotate(7deg) scale(1.08)}
}

.about,
.work,
.lab,
.contact{
  padding:112px clamp(18px,3vw,42px);
  background:var(--black);
  border-bottom:1px solid var(--line);
}
.about{
  background-color:#f7f1e6;
  background:
    radial-gradient(circle at 12% 18%,rgba(255,255,255,.52),transparent 24vw),
    radial-gradient(circle at 84% 20%,rgba(216,25,36,.1),transparent 34vw),
    linear-gradient(180deg,#efe2cf 0%,#f7f1e6 32%,#eee4d5 100%);
  color:#030303;
  border-bottom-color:var(--line-dark);
  padding-top:clamp(136px,16vh,190px);
  padding-bottom:clamp(126px,14vh,170px);
}
.section-kicker{margin:0;color:var(--muted)}
.about-grid{
  margin-top:0;
  display:grid;
  grid-template-columns:minmax(260px,430px) minmax(0,1fr);
  gap:clamp(40px,7vw,112px);
  align-items:center;
}
.portrait{
  position:relative;
  border-top:0;
  padding-top:0;
}
.portrait img{
  width:min(118%,500px);
  max-width:none;
  margin:-10px 0 -18px -38px;
  aspect-ratio:auto;
  object-fit:contain;
  filter:drop-shadow(0 30px 48px rgba(3,3,3,.34)) contrast(1.03) saturate(1.06);
}
.about-copy{max-width:1040px}
.about-copy h2{
  margin:0 0 42px;
  font-size:clamp(42px,6vw,96px);
  line-height:.9;
  letter-spacing:-.085em;
  font-weight:800;
  color:var(--black);
}
.about-copy h2 em{
  color:#ff3945;
  font-style:normal;
}
.about-copy p{
  max-width:880px;
  margin:0 0 16px;
  color:rgba(3,3,3,.78);
  font-size:clamp(20px,2.05vw,30px);
  line-height:1.12;
  letter-spacing:-.055em;
  font-weight:700;
  text-wrap:pretty;
}
.about-copy p:first-of-type{
  max-width:980px;
  margin-bottom:28px;
  font-size:clamp(28px,3.9vw,58px);
  line-height:.96;
  letter-spacing:-.075em;
  font-weight:800;
  color:var(--black);
}
.about-copy p + p{
  color:rgba(3,3,3,.58);
  font-weight:600;
}
.credentials{
  display:flex;
  flex-wrap:wrap;
  gap:12px 28px;
  margin-top:38px;
  padding-top:18px;
  border-top:1px solid var(--line-dark);
  color:rgba(3,3,3,.48);
  text-transform:uppercase;
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
}

.section-head{
  display:block;
  margin-bottom:82px;
}
.section-head h2{
  margin:0 auto;
  max-width:1260px;
  text-align:center;
  font-size:clamp(58px,9.8vw,158px);
  line-height:.84;
  letter-spacing:-.1em;
  font-weight:800;
}
.work{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 118%,rgba(216,25,36,.26),transparent 48vw),
    radial-gradient(circle at 18% 34%,rgba(255,57,69,.12),transparent 28vw),
    var(--black);
}
.work:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.48;
  background-image:
    radial-gradient(circle,rgba(245,240,232,.82) 0 1px,transparent 1.6px),
    radial-gradient(circle,rgba(255,57,69,.6) 0 1px,transparent 1.6px);
  background-size:180px 180px,260px 260px;
  background-position:24px 18px,130px 92px;
  mask-image:linear-gradient(#000,transparent 78%);
}
.work:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-34vw;
  width:92vw;
  aspect-ratio:1;
  border-radius:50%;
  transform:translateX(-50%);
  pointer-events:none;
  opacity:.34;
  background:repeating-radial-gradient(circle,transparent 0 70px,rgba(255,57,69,.24) 71px 72px,transparent 73px 142px);
}
.work .section-head{
  position:relative;
  z-index:2;
  margin-bottom:clamp(118px,16vh,190px);
}
.orb-track{
  position:absolute;
  left:0;
  top:0;
  z-index:4;
  width:100%;
  height:100%;
  pointer-events:none;
}
.orb-pad{
  position:fixed;
  z-index:19;
  width:64px;
  height:2px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(245,240,232,.72),transparent);
  box-shadow:0 0 22px rgba(245,240,232,.18);
  transform:translate3d(-100vw,-100vh,0);
  opacity:0;
}
.orb-pad:before{
  content:"";
  position:absolute;
  left:50%;
  top:-4px;
  width:8px;
  aspect-ratio:1;
  border-radius:50%;
  background:rgba(245,240,232,.78);
  transform:translateX(-50%);
}
.project-grid{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  gap:clamp(28px,4.6vw,78px);
  width:max-content;
  padding:clamp(18px,4vh,56px) 14vw 10vh;
  will-change:transform;
}
.project-card{
  position:relative;
  flex:0 0 clamp(620px,58vw,920px);
  height:clamp(330px,48vh,520px);
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  color:var(--ink);
  text-decoration:none;
  background:#0b0b0b;
  border:1px solid var(--line);
  border-radius:34px;
  isolation:isolate;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .45s ease;
}
.project-card:hover{
  transform:translateY(-10px);
  border-color:rgba(245,240,232,.42);
}
.project-card:nth-child(even){
  margin-top:0;
}
.project-card:nth-child(3n){
  margin-top:0;
}
.project-card:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(3,3,3,0) 36%,rgba(3,3,3,.74) 100%);
}
.project-card figure{
  flex:1;
  min-height:0;
  margin:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#111;
  border-radius:inherit;
}
.project-card figure img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .7s ease;
}
.project-card:hover figure img{
  transform:scale(1.055);
  filter:contrast(1.04);
}
.project-card-copy{
  position:absolute;
  inset:auto 0 0;
  z-index:3;
  display:grid;
  gap:14px;
  padding:24px 26px;
}
.project-card-copy span,
.project-card-copy small{color:rgba(245,240,232,.62)}
.project-card h3{
  margin:0;
  max-width:680px;
  font-size:clamp(36px,4.2vw,76px);
  line-height:.88;
  letter-spacing:-.08em;
  font-weight:800;
}
.project-card p{
  max-width:560px;
  margin:0;
  color:rgba(245,240,232,.78);
  font-size:15px;
  line-height:1.45;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .35s ease,transform .35s ease;
}
.project-card:hover p,
.project-card:focus-visible p{
  opacity:1;
  transform:none;
}
.project-card-phone figure img,
.project-card-passport figure img{
  width:auto;
  height:84%;
  object-fit:contain;
}
.project-card-passport figure img{object-position:center}
.project-card-phone figure{
  background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.1),transparent 42%),#080908;
}
.project-card-passport figure{
  background:linear-gradient(135deg,#1b1b1b,#070707);
}
.project-card-wide{
  flex-basis:clamp(620px,58vw,920px);
}
.passage-collage{
  display:grid!important;
  grid-template-columns:1.1fr .9fr;
  grid-template-rows:1fr 1fr;
  gap:1px;
  background:#111;
}
.passage-collage img:first-child{grid-row:span 2}
.passage-collage img{object-fit:cover!important}

.lab-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
}
.lab{
  background:
    radial-gradient(circle at 78% 12%,rgba(216,25,36,.1),transparent 28vw),
    radial-gradient(circle at 16% 78%,rgba(255,255,255,.5),transparent 24vw),
    linear-gradient(180deg,#eee4d5 0%,#f8f1e5 100%);
  color:var(--black);
  border-bottom-color:var(--line-dark);
}
.lab .section-head h2{color:var(--black)}
.lab-grid{
  background:rgba(3,3,3,.18);
}
.lab-grid article{
  min-height:320px;
  padding:20px;
  background:rgba(255,250,242,.72);
  color:var(--black);
}
.lab-grid span{
  color:#ff3945;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
}
.lab-grid h3{
  margin:78px 0 18px;
  font-size:clamp(26px,3vw,44px);
  line-height:.95;
  letter-spacing:-.065em;
  font-weight:800;
}
.lab-grid p{
  margin:0;
  color:rgba(3,3,3,.58);
  font-size:16px;
  line-height:1.55;
}

.contact{
  padding-top:64px;
  padding-bottom:34px;
  border-bottom:0;
  background-color:#010101;
  background:
    radial-gradient(circle at 80% 10%,rgba(216,25,36,.12),transparent 30vw),
    linear-gradient(180deg,#050505 0%,#010101 100%);
  color:var(--ink);
}
footer{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  padding-top:20px;
  border-top:1px solid var(--line);
}
footer div{display:grid;gap:8px}
footer span{color:var(--muted)}
footer a,
footer p{
  margin:0;
  color:var(--ink);
  text-decoration:none;
  font-size:14px;
  overflow-wrap:anywhere;
}
footer a:hover{color:#ff3945}
.copyright{
  grid-column:1/-1;
  color:var(--muted);
}

.reveal{
  opacity:0;
  filter:blur(10px);
  transform:translateY(24px);
  transition:opacity .8s ease,filter .8s ease,transform .8s ease;
}
.reveal.visible,
.hero .reveal{
  opacity:1;
  filter:blur(0);
  transform:none;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none;filter:none}
  .scroll-orb{display:none}
}

@media (max-width:1080px){
  .project-card,
  .project-card-wide{flex-basis:clamp(560px,66vw,760px)}
}

@media (max-width:980px){
  .header{grid-template-columns:auto 1fr auto}
  nav{
    position:fixed;
    inset:66px 0 auto;
    display:none;
    grid-template-columns:1fr;
    gap:0;
    padding:0 18px;
    background:rgba(3,3,3,.96);
    color:var(--ink);
    border-bottom:1px solid var(--line);
  }
  nav.open{display:grid}
  nav a{
    padding:18px 0;
    border-top:1px solid var(--line);
    opacity:1;
  }
  .menu-button{display:block}
  .hero-meta,
  .hero-bottom,
  .section-head,
  .about-grid{
    grid-template-columns:1fr;
  }
  .hero-meta span:last-child{text-align:left}
  .hero-title{text-align:left;justify-items:start}
  .hero-bottom p{
    grid-column:auto;
    margin:0;
  }
  .lab-grid,
  footer{grid-template-columns:1fr 1fr}
}

@media (max-width:640px){
  .header{
    display:flex;
    justify-content:space-between;
    min-height:60px;
    padding:0 16px;
    gap:8px;
  }
  .header-actions{
    justify-self:auto;
    flex:0 0 auto;
    gap:8px;
  }
  .menu-button{font-size:9px}
  main{padding-top:60px}
  nav{inset:60px 0 auto}
  .language-switcher button{
    padding:6px 4px;
    font-size:9px;
  }
  .hero{
    min-height:calc(100svh - 60px);
    padding:28px 16px 34px;
    gap:62px;
  }
  .hero h1{
    font-size:clamp(54px,18vw,82px);
    line-height:.84;
    letter-spacing:-.075em;
    text-align:left;
  }
  .hero-bottom p{font-size:22px}
  .scroll-orb{
    width:18px;
    transform:translate3d(78vw,76vh,0);
  }
  .about,
  .work,
  .lab,
  .contact{padding:76px 16px}
  .about{padding-top:96px;padding-bottom:86px}
  .section-head{margin-bottom:38px}
  .section-head h2{
    font-size:clamp(52px,17vw,82px);
    text-align:left;
  }
  .work{overflow:visible}
  .project-grid{
    display:grid;
    width:auto;
    padding:0;
    gap:18px;
  }
  .project-card,
  .project-card-wide{
    width:auto;
    flex-basis:auto;
    min-height:0;
    height:430px;
    margin-top:0!important;
    border-radius:26px;
  }
  .project-card figure{min-height:0}
  .project-card h3{font-size:36px}
  .project-card p{
    opacity:1;
    transform:none;
    font-size:14px;
  }
  .about-copy h2{font-size:40px}
  .about-copy p{font-size:16px}
  .portrait img{
    width:min(112%,390px);
    margin:-8px auto 6px;
  }
  .lab-grid,
  footer{grid-template-columns:1fr}
}