:root{
  --ink:#0b0b0b;
  --paper:#ffffff;
  --acid:#d9ff43;
  --blue:#315bff;
  --orange:#ff5a2f;
  --line:rgba(11,11,11,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Inter,Arial,sans-serif;
  overflow-x:hidden;
}
a{color:inherit}
img{max-width:100%;display:block}
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:20;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:20px 28px;
  color:var(--ink);
  pointer-events:none;
}
.site-header a{pointer-events:auto}
.brand{width:270px}
.brand img{filter:none;mix-blend-mode:normal}
nav{display:flex;gap:24px;align-items:center;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
nav a{text-decoration:none}
.contact-link{border:1px solid currentColor;border-radius:999px;padding:10px 15px}
.hero{
  min-height:100vh;
  padding:120px 28px 0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.hero-kicker,.eyebrow{
  text-transform:uppercase;
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
}
.hero h1{
  margin:5vh 0 4vh;
  font-family:"Space Grotesk",Inter,sans-serif;
  font-size:clamp(64px,11vw,170px);
  line-height:.82;
  letter-spacing:-.07em;
  text-transform:uppercase;
  max-width:1500px;
}
.hero h1 span{display:block}
.hero-bottom{
  display:grid;
  grid-template-columns:minmax(280px,650px) 1fr;
  align-items:end;
  gap:40px;
  margin-bottom:46px;
}
.hero-bottom p{
  margin:0;
  font-size:clamp(18px,2vw,30px);
  line-height:1.2;
  letter-spacing:-.025em;
}
.round-link{
  justify-self:end;
  width:150px;height:150px;
  border:1px solid var(--ink);
  border-radius:50%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:24px;
  text-decoration:none;
  font-weight:700;
  transition:.25s ease;
}
.round-link:hover{background:var(--ink);color:var(--paper);transform:rotate(4deg)}
.arrow{font-size:34px;align-self:flex-end}
.ticker{
  margin:0 -28px;
  border-top:none;
  border-bottom:1px solid var(--ink);
  overflow:hidden;
  white-space:nowrap;
}
.ticker-track{
  display:inline-flex;
  gap:28px;
  align-items:center;
  padding:14px 0;
  min-width:max-content;
  font-weight:900;
  font-size:17px;
  animation:ticker 26s linear infinite;
}
.ticker i{font-style:normal}
@keyframes ticker{to{transform:translateX(-50%)}}
.section{padding:110px 28px}
.section-head{
  display:grid;
  grid-template-columns:1fr 2fr;
  border-top:1px solid var(--ink);
  padding-top:16px;
  margin-bottom:50px;
}
.section-note{margin:0;max-width:580px;font-size:22px;line-height:1.3}
.project-grid{
  display:grid;
  grid-template-columns:1.28fr .86fr .86fr;
  gap:26px;
}
.project-large{grid-row:span 2}
.project-visual{
  min-height:430px;
  position:relative;
  overflow:hidden;
  padding:22px;
  transition:transform .35s ease;
}
.project:hover .project-visual{transform:scale(.985)}
.project-large .project-visual{min-height:760px}
.project-index{font-size:12px;font-weight:800}
.vjosa{
  background:
    radial-gradient(circle at 70% 20%, rgba(255,255,255,.65), transparent 22%),
    linear-gradient(135deg,#1d4ed8,#66d9ff 48%,#c8ff84);
}
.project-word{
  position:absolute;left:-10px;bottom:-20px;
  font-family:"Space Grotesk";font-weight:900;
  font-size:clamp(90px,12vw,200px);
  letter-spacing:-.08em;color:white;
}
.connecta{background:var(--acid)}
.circle-mark{
  position:absolute;right:22px;bottom:0;
  font-family:"Space Grotesk";font-weight:900;
  font-size:300px;line-height:.8;letter-spacing:-.12em;
}
.editorial{background:var(--orange);color:#111}
.editorial-type{
  position:absolute;left:22px;bottom:20px;
  font-family:"Space Grotesk";font-size:75px;font-weight:900;
  line-height:.76;letter-spacing:-.07em;
}
.project-meta{display:flex;justify-content:space-between;gap:20px;padding:15px 0 30px}
.project-meta h2{margin:0;font-size:20px}
.project-meta p{margin:0;max-width:330px;font-size:14px;line-height:1.4}
.service-list{border-top:1px solid var(--ink)}
.service-row{
  display:grid;
  grid-template-columns:60px 1.2fr 1fr;
  gap:24px;
  padding:28px 0;
  border-bottom:1px solid var(--ink);
  align-items:start;
}
.service-row span{font-size:12px;font-weight:800}
.service-row h3{margin:0;font-size:clamp(30px,4vw,62px);letter-spacing:-.045em;line-height:.95}
.service-row p{margin:0;font-size:16px;line-height:1.55;max-width:420px}
.studio{
  background:var(--ink);
  color:var(--paper);
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:70px;
}
.studio h2{
  font-size:clamp(44px,6.5vw,100px);
  line-height:.95;
  letter-spacing:-.055em;
  margin:24px 0 0;
}
.studio-copy{align-self:end;font-size:19px;line-height:1.55}
.contact{
  min-height:82vh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.contact h2{
  font-family:"Space Grotesk";
  font-size:clamp(66px,10vw,155px);
  line-height:.88;
  letter-spacing:-.07em;
  text-transform:uppercase;
  margin:70px 0 30px;
  max-width:1200px;
}


.cursor-dot{
  width:14px;height:14px;border-radius:50%;
  background:var(--acid);position:fixed;left:0;top:0;z-index:99;
  pointer-events:none;transform:translate(-50%,-50%);
  mix-blend-mode:difference;
}
@media (max-width:800px){
  .site-header{padding:14px 16px}
  .brand{width:180px}
  nav a:not(.contact-link){display:none}
  .hero{padding:104px 16px 0}
  .hero h1{font-size:clamp(58px,17vw,100px);margin-top:10vh}
  .hero-bottom{grid-template-columns:1fr}
  .round-link{justify-self:start;width:115px;height:115px;padding:18px}
  .ticker{margin:0 -16px}
  .section{padding:80px 16px}
  .section-head{grid-template-columns:1fr;gap:20px}
  .project-grid{grid-template-columns:1fr}
  .project-large{grid-row:auto}
  .project-large .project-visual,.project-visual{min-height:460px}
  .service-row{grid-template-columns:36px 1fr}
  .service-row p{grid-column:2}
  .studio{grid-template-columns:1fr}
  .studio-copy{font-size:17px}
  
  .cursor-dot{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .ticker-track{animation:none}
  .cursor-dot{display:none}
}

/* V2 refinements */
.site-header{
  justify-content:flex-start;
}

.hero{
  padding-top:130px;
}

.project-large{
  grid-column:1;
  grid-row:1 / span 2;
}
.project:nth-child(2){grid-column:2;grid-row:1}
.project:nth-child(3){grid-column:3;grid-row:1}
.project:nth-child(4){grid-column:2;grid-row:2}
.project:nth-child(5){grid-column:3;grid-row:2}

.project-visual{
  min-height:350px;
}
.project-large .project-visual{
  min-height:760px;
}

.environmental{
  background:
    radial-gradient(circle at 78% 18%, rgba(255,255,255,.72), transparent 20%),
    linear-gradient(145deg,#1346d8 0%,#33b9e7 48%,#6bd67f 100%);
}
.environmental-word{
  font-size:clamp(60px,7.4vw,128px);
  bottom:4px;
  left:-6px;
}
.identity{
  background:#d8ff42;
}
.identity-mark{
  position:absolute;
  right:18px;
  bottom:-28px;
  font-family:"Space Grotesk";
  font-size:clamp(130px,13vw,220px);
  line-height:.8;
  font-weight:900;
  letter-spacing:-.09em;
}
.campaigns{
  background:#ff5a2f;
}
.campaign-type{
  position:absolute;
  left:22px;
  bottom:18px;
  font-family:"Space Grotesk";
  font-size:clamp(46px,4.4vw,78px);
  font-weight:900;
  line-height:.78;
  letter-spacing:-.065em;
}
.interpretation{
  background:#6a43ff;
  color:white;
}
.interpretation-ring{
  position:absolute;
  width:230px;
  height:230px;
  border:22px solid #fff;
  border-radius:50%;
  right:-30px;
  top:75px;
}
.interpretation-label{
  position:absolute;
  left:22px;
  bottom:20px;
  font-family:"Space Grotesk";
  font-size:clamp(40px,3.6vw,66px);
  font-weight:900;
  line-height:.8;
  letter-spacing:-.055em;
}
.spaces{
  background:#ffcf22;
}
.space-grid{
  position:absolute;
  inset:78px 22px 22px 22px;
  background:
    linear-gradient(90deg,transparent 49%,#111 49%,#111 51%,transparent 51%),
    linear-gradient(transparent 49%,#111 49%,#111 51%,transparent 51%);
  border:3px solid #111;
  transform:rotate(-4deg);
}
.space-label{
  position:absolute;
  left:32px;
  bottom:30px;
  font-family:"Space Grotesk";
  font-size:clamp(42px,4vw,72px);
  font-weight:900;
  line-height:.8;
  letter-spacing:-.06em;
  background:#fff;
  padding:8px 10px 4px;
}

@media (max-width:1100px){
  .project-grid{
    grid-template-columns:1fr 1fr;
  }
  .project-large{
    grid-column:1 / -1;
    grid-row:auto;
  }
  .project:nth-child(2),
  .project:nth-child(3),
  .project:nth-child(4),
  .project:nth-child(5){
    grid-column:auto;
    grid-row:auto;
  }
  .project-large .project-visual{
    min-height:650px;
  }
}
@media (max-width:800px){
  .project-grid{
    grid-template-columns:1fr;
  }
  .project-large,
  .project:nth-child(2),
  .project:nth-child(3),
  .project:nth-child(4),
  .project:nth-child(5){
    grid-column:1;
    grid-row:auto;
  }
  .project-large .project-visual,
  .project-visual{
    min-height:460px;
  }
}





@media (max-width:620px){
  
}


/* Final V6 contact footer */
.contact-footer{
  width:100%;
  margin-top:90px;
}

.email-band{
  width:100%;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  padding-top:30px;
  display:flex;
  align-items:flex-end;
}

.email{
  display:inline-block;
  color:var(--ink);
  font-size:clamp(18px,1.55vw,25px);
  font-weight:500;
  line-height:1;
  text-decoration:none;
  padding:0 0 1px;
  transform:translateY(1px);
}

.email:hover,
.email:focus-visible{
  text-decoration:underline;
  text-underline-offset:4px;
}

.copyright{
  display:flex;
  justify-content:flex-end;
  padding-top:18px;
  font-size:14px;
  font-weight:700;
  line-height:1.3;
  text-transform:uppercase;
  letter-spacing:.08em;
}

@media (max-width:800px){
  .contact-footer{
    margin-top:70px;
  }

  .email-band{
    padding-top:24px;
  }

  .copyright{
    font-size:13px;
  }
}