@font-face{
  font-family:'DecimaMonoPro';
  src:url('./fonts/DecimaMonoPro 400.otf') format('opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --lime:#BED530;
  --black:#231F20;
  --max:1320px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--lime);
  color:var(--black);
  font-family:'DecimaMonoPro',Arial,sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* =========================================================
   BACKGROUND TEXTURE
   ========================================================= */

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:10;
  opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

a{
  color:inherit;
  text-decoration:none;
}

.container{
  width:min(calc(100% - 48px),var(--max));
  margin:0 auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--black);
  color:var(--lime);
  border-bottom:1px solid var(--black);
}

.header-inner{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  color:var(--lime);
  font-size:.98rem;
  font-weight:600;
  letter-spacing:-.02em;
}

.nav{
  display:flex;
  gap:24px;
  color:var(--lime);
  font-size:.9rem;
}

.nav a{
  color:var(--lime);
  transition:opacity .2s ease;
}

.nav a:hover{
  opacity:.55;
}

.nav a.active{
  color:var(--lime);
}

.language-switcher{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--lime);
  font-size:.8rem;
}

.language-switcher a{
  color:var(--lime);
}

.language-switcher a:hover{
  opacity:.55;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.eyebrow,
.section-kicker{
  margin:0 0 16px;
  color:var(--black);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

h1,
h2,
h3{
  margin:0;
  color:var(--black);
  font-weight:400;
}

h1,
h2{
  letter-spacing:-.05em;
}

h1{
  font-size:clamp(3rem,7vw,6.5rem);
  line-height:.98;
  max-width:1000px;
}

#headline{
  white-space:nowrap;
}

h2{
  font-size:clamp(2rem,4vw,3.6rem);
  line-height:1;
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
  min-height:calc(100vh - 230px);
  padding:100px 0 80px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.hero-copy{
  max-width:720px;
  margin:28px 0 0;
  color:var(--black);
  font-size:1.05rem;
}

.service-focus{
  margin:18px 0 0;
  color:var(--black);
  font-size:.82rem;
  letter-spacing:.01em;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.section{
  position:relative;
  padding:96px 0;
  background:var(--lime);
  color:var(--black);
}

.section-kicker{
  display:none;
}

.section + .section::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:min(calc(100% - 48px),var(--max));
  height:1px;
  background:var(--black);
  transform:translateX(-50%);
}

.hero + .section::before{
  display:none;
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.section-top{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  margin-bottom:34px;
}

.section-note{
  margin:0;
  color:var(--black);
  font-size:.82rem;
}

.service-focus-block{
  max-width:980px;
}

.focus-copy{
  max-width:880px;
  margin:0;
  color:var(--black);
  font-size:1.08rem;
}


/* =========================================================
   PROJECTS
   ========================================================= */

.project-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

.project-card{
  background:var(--black);
  border:1px solid var(--black);
  border-radius:16px;
  overflow:hidden;
  color:var(--lime);
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.project-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 30px rgba(35,31,32,.15);
}

.video-wrap{
  position:relative;
  z-index:20;
  aspect-ratio:16/9;
  background:var(--black);
}

.video-wrap iframe{
  width:100%;
  height:100%;
  display:block;
  border:0;
}

.project-body{
  padding:18px 18px 20px;
  background:var(--black);
}

.project-title{
  margin:0 0 6px;
  color:var(--lime);
  font-size:.98rem;
  font-weight:400;
}

.project-meta{
  margin:0;
  color:var(--lime);
  font-size:.8rem;
  line-height:1.5;
}

.project-link{
  display:inline-flex;
  margin-top:14px;
  color:var(--lime);
  font-size:.78rem;
  text-decoration:underline;
  text-underline-offset:3px;
}

.project-link:hover{
  opacity:.55;
}


/* =========================================================
   ABOUT
   ========================================================= */

.two-col{
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:48px;
}

.about-photo{
  width:260px;
  height:260px;
  overflow:hidden;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.about-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transform:scale(1.2);
}

.copy{
  max-width:760px;
}

.copy p{
  margin:0 0 18px;
  color:var(--black);
}


/* =========================================================
   SERVICES
   ========================================================= */

.service-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.service{
  background:transparent;
  border:none;
  border-radius:0;
  padding:28px 0;
  min-height:240px;
}

.service-number{
  color:var(--black);
  font-size:.72rem;
}

.service h3{
  margin:70px 0 10px;
  color:var(--black);
  font-size:1.08rem;
}

.service p{
  margin:0;
  color:var(--black);
  font-size:.9rem;
}


/* =========================================================
   CONTACT
   ========================================================= */

.contact-lead{
  max-width:700px;
  margin:0 0 26px;
  color:var(--black);
  font-size:clamp(1.8rem,3.5vw,3.2rem);
  line-height:1;
  letter-spacing:-.05em;
}

.contact-info{
  display:flex;
  flex-direction:column;
  gap:22px;
}

#contact .two-col > div:last-child{
  justify-self:end;
  width:30%;
}

.contact-email,
.contact-phone{
  display:flex;
  flex-direction:column;
  gap:5px;
  color:var(--black);
  font-size:1.05rem;
}

.contact-email a,
.contact-phone a{
  display:block;
  width:max-content;
  color:var(--black);
  text-decoration:underline;
  text-underline-offset:4px;
}

.contact-socials{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  margin-top:0;
}

.contact-socials a{
  color:var(--black);
  font-size:1.05rem;
  text-decoration:underline;
  text-underline-offset:4px;
}

.contact-email a:hover,
.contact-phone a:hover,
.contact-socials a:hover{
  opacity:.55;
}


/* =========================================================
   CONTACT — MOBILE
   ========================================================= */

@media(max-width:720px){

  #contact .two-col{
    grid-template-columns:1fr;
    gap:24px;
  }

  #contact .two-col > div:last-child{
    justify-self:start;
    width:100%;
    max-width:none;
  }
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer{
  background:var(--black);
  color:var(--lime);
}

.footer-inner{
  min-height:92px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--lime);
  font-size:.78rem;
}

.footer-inner a{
  color:var(--lime);
}

.footer-inner a:hover{
  opacity:.55;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1000px){

  .project-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .service-grid{
    grid-template-columns:1fr;
  }
}


@media(max-width:720px){

  .container{
    width:min(calc(100% - 30px),var(--max));
  }

  .header-inner{
    min-height:64px;
  }

  .nav{
    gap:14px;
    font-size:.8rem;
  }

  .language-switcher{
    font-size:.72rem;
  }

  .hero{
    padding:88px 0 84px;
  }

  .project-grid{
    grid-template-columns:1fr;
  }

  .two-col{
    grid-template-columns:1fr;
    gap:24px;
  }

  .section{
    padding:72px 0;
  }

  .section + .section::before{
    width:calc(100% - 30px);
  }

  .footer-inner{
    min-height:76px;
  }
}

h1,
h2,
h3,
a,
button,
nav,
.brand,
.project-title,
.project-meta,
.service h3,
.service p,
.contact-info,
.footer-inner,
.hero-copy,
.service-focus,
.focus-copy,
#bio,
#bio * {
  text-transform: uppercase;
}