/* HOME (index.html) ONLY — builds on top of site.css */

.media{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1);
  transition:transform .28s ease;
}

.hero{
  height:92vh;
  background:#000;
  position:relative;
  overflow:hidden;
}

.hero-loading-poster{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
}

.hero-loading-poster img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero-media{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.18), rgba(255,255,255,0) 40%),
    linear-gradient(135deg, #1d1d1d 0%, #3a3a3a 30%, #262626 55%, #111 100%);
}

.hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.11'/></svg>");
  mix-blend-mode:multiply;
  opacity:.55;
}

.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:0;
}

.hero-video.is-ready{
  opacity:1;
}

/* Intro animation: word flies up into the nav, then becomes the menu */

.hero-word{
  transition:left .85s cubic-bezier(.2,.75,.2,1), font-size .85s cubic-bezier(.2,.75,.2,1), transform .85s cubic-bezier(.2,.75,.2,1);
  transform-origin:center top;
  overflow:visible;
}

.hero-word.state-large{
  transform:translateY(calc(46vh - 50%));
}

.hero-word.state-menu{
  transform:translateY(0);
}

.word{
  transform:translateY(100%);
  will-change:transform;
}

.hero-word.animate-in .studio-word{
  animation:wordRise .78s cubic-bezier(.18,.8,.22,1) forwards;
}

.hero-word.animate-in .verso-word{
  animation:wordRise .78s cubic-bezier(.18,.8,.22,1) forwards .32s;
}

@keyframes wordRise{
  from{transform:translateY(100%)}
  to{transform:translateY(0)}
}

.hero-word.no-intro .word{
  transform:translateY(0);
}

.main{
  padding:var(--pad);
}

.claim{
  padding:6rem 0 12rem;
  display:flex;
  justify-content:center;
}

.claim-text{
  margin:0;
  font-weight:400;
  max-width:80vw;
  text-align:center;
  font-family:"Immortel", serif;
  font-size:5.28rem;
  line-height:1.05;
  letter-spacing:-0.01em;
  padding:0;
  text-indent:0;
}

.claim-tag{
  font-family:var(--site-font-family);
  font-size:0.36em;
  text-transform:uppercase;
  letter-spacing:0.05em;
  line-height:1;
  white-space:nowrap;
  position:relative;
  top:-0.68em;

  appearance:none;
  background:none;
  border:none;
  padding:0;
  margin:0;
  color:inherit;
  cursor:pointer;
}

.claim-tag::after{
  content:"";
  position:absolute;
  left:0;
  right:0.04em;
  bottom:-0.15em;
  height:2px;
  background:currentColor;
  opacity:0;
  transition:opacity .1s ease;
}

.claim-tag:hover::after{
  opacity:1;
}

.claim-tag.is-active::after{
  opacity:1;
}

.filter-tag{
  position:relative;
}

.claim-brand{
  font-family:var(--site-font-family);
}

.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6rem var(--gap);
}

.project{
  opacity:0;
  transform:translateY(4rem);
  transition:transform 1.05s cubic-bezier(.18,.72,.2,1), opacity 1.05s ease;
}

.project.visible{
  opacity:1;
  transform:translateY(0);
}

.project.is-return-reset,
.footer-repeat.is-return-reset{
  transition:none;
}

.project video{
  filter:contrast(1.05) saturate(0.95);
}

.project:hover video{
  filter:contrast(1.1) saturate(1);
}

.project.is-filtered-out{
  opacity:0.12;
  transform:scale(0.98);
  pointer-events:none;
  transition:opacity .28s ease, transform .28s ease;
}

.project.is-hidden{
  display:none;
}

.media-frame{
  overflow:hidden;
  position:relative;
  aspect-ratio:1.5/1;
}

.reduced-motion-poster{
  display:none;
  width:100%;
  height:100%;
}

.reduced-motion-poster img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.slideshow{
  position:relative;
}

.slideshow .media{
  position:absolute;
  inset:0;
  opacity:0;
  transform:none;
  transition:none;
}

.slideshow .media.active{
  position:relative;
  opacity:1;
}

.media::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.13'/></svg>");
  mix-blend-mode:multiply;
}

.project:hover .media{
  transform:scale(1.02) translateY(-3px);
  transition:transform .36s cubic-bezier(.25,1.3,.35,1);
}

.caption{
  border-bottom:none;
  padding:1rem 0 0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.meta{
  font-family:var(--site-font-family);
  font-size:2.5rem;
  font-weight:400;
  line-height:1.08;
  letter-spacing:-0.015em;
  text-transform:none;
  text-wrap:balance;
}

.cat{
  margin-top:0.85rem;
  font-family:var(--site-font-family);
  font-size:0.92rem;
  line-height:1;
  letter-spacing:0.06em;
  text-transform:uppercase;
}

.footer-repeat{
  padding:7.5rem 0 5.75rem;
  font-family:var(--site-font-family);
  font-weight:400;
  font-size:1.5rem;
  line-height:1.1;
  letter-spacing:-0.0075em;
  text-transform:none;
  white-space:normal;
  text-align:center;
  margin:0 auto;
  max-width:65rem;
}

.footer-repeat.visible{
  opacity:1;
  transform:translateY(0);
}

.footer-repeat .footer-repeat-line{
  display:inline;
}

.footer-repeat .footer-link{
  position:relative;
  display:inline;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:0.22em;
  text-decoration-color:transparent;
  transition:text-decoration-color .18s ease;
}

.footer-repeat .footer-link:hover,
.footer-repeat .footer-link:focus-visible{
  text-decoration-color:currentColor;
}

.footer-meta{
  display:grid;
  grid-template-columns:0.25fr 1.75fr 1fr auto;
  column-gap:2rem;
  align-items:start;
  padding-top:1rem;
  font-size:inherit;
  line-height:1.1;
  letter-spacing:0.03em;
  color:inherit;
}

.footer-col{
  text-align:left;
}

.footer-legal{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:0.28rem;
}

.footer-legal > div:first-child{
  text-align:left;
  white-space:nowrap;
}

.footer-legal > div:last-child{
  text-align:right;
}

.footer-contact{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0.28rem;
}

.footer-contact .footer-link{
  position:relative;
  display:inline-block;
  text-decoration:none;
  padding-bottom:0.12em;
}

.footer-contact .footer-link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-0.08em;
  height:1px;
  background:currentColor;
  opacity:0;
  transition:opacity .1s ease;
}

.footer-contact .footer-link:hover::after,
.footer-contact .footer-link:focus-visible::after{
  opacity:1;
}

.footer-address-link{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.1;
  text-decoration:none;
}

.footer-address-link span{
  position:relative;
  display:inline-block;
  padding-bottom:0.12em;
}

.footer-address-link span + span{
  margin-top:0.25rem;
}

.footer-address-link span::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-0.08em;
  height:1px;
  background:currentColor;
  opacity:0;
  transition:opacity .1s ease;
}

.footer-address-link:hover span::after,
.footer-address-link:focus-visible span::after{
  opacity:1;
}

/* RESPONSIVE (homepage-only; nav/menu breakpoints live in site.css) */

@media (max-width:1500px){
  .footer-repeat{
    font-size:1.5rem;
  }
}

@media (max-width:1100px){
  .hero{
    height:68vh;
  }

  .claim-text{
    padding:0 3vw 0 0;
    font-size:4.8rem;
  }

  .claim-tag{
    font-size:0.42em;
    top:-0.61em;
  }

  .grid{
    row-gap:5rem;
  }

  .footer-meta{
    grid-template-columns:0.7fr 1.4fr 1fr auto;
    column-gap:1.5rem;
  }
}

@media (max-width:900px){
  .hero{
    height:62vh;
  }

  .claim{
    padding:4.5rem 0 8rem;
  }

  .hero-word.state-large{
    font-size:calc((100vw - (var(--pad) * 2)) / 5.5);
  }

  .claim-text{
    font-size:4.2rem;
    padding:0 3vw 0 0;
  }

  .claim-tag{
    font-size:0.4em;
    top:-0.62em;
  }

  .grid{
    grid-template-columns:1fr;
    gap:4.5rem;
  }

  .grid,
  .grid *{
    cursor:default !important;
  }

  .caption{
    padding-top:0.9rem;
  }

  .meta{
    font-size:2rem;
  }

  .footer-repeat{
    font-size:1.5rem;
    line-height:1.1;
    letter-spacing:-0.0075em;
    white-space:normal;
  }

  .claim-tag{
    cursor:pointer;
  }
}

@media (max-width:640px){
  .hero{
    height:100vh;
  }

  .hero-word.state-large{
    transform:translateY(calc(50svh - 50% - 1rem));
  }

  .claim{
    padding-top:3rem;
    padding-bottom:6rem;
  }

  .claim-text{
    font-size:3rem;
    line-height:1.06;
    padding:0;
  }

  .claim-tag{
    font-size:0.4em;
  }

  .caption{
    padding-top:0.8rem;
  }

  .grid{
    gap:3.75rem;
  }

  .meta{
    font-size:1.82rem;
  }

  .cat{
    margin-top:0.65rem;
    font-size:0.8rem;
    letter-spacing:0.055em;
  }

  .footer-repeat{
    font-size:1.5rem;
    line-height:1.1;
    letter-spacing:-0.015em;
    padding:7.25rem 0 3rem;
    white-space:normal;
  }

  .footer-meta{
    display:block;
    padding-top:0.75rem;
    line-height:1.25;
  }

  .footer-col,
  .footer-address,
  .footer-contact,
  .footer-legal,
  .footer-note{
    display:inline;
    width:auto;
    text-align:left;
  }

  .footer-note{
    display:none;
  }

  .footer-address-link{
    display:inline;
    line-height:1.1;
  }

  .footer-address-link span{
    display:inline;
    white-space:normal;
    padding-bottom:0;
  }

  .footer-address-link span::after{
    content:none;
  }

  .footer-address-link span + span::before{
    content:" ";
  }

  .footer-contact{
    display:inline;
  }

  .footer-contact > div{
    display:inline;
  }

  .footer-contact > div + div::before{
    content:" | ";
    margin:0 0.25em;
  }

  .footer-legal{
    display:inline;
  }

  .footer-legal > div{
    display:inline;
  }

  .footer-legal > div + div::before{
    content:" | ";
    margin:0 0.25em;
  }

  .footer-address::after,
  .footer-contact::after{
    content:" | ";
    margin:0 0.25em;
  }

  .footer-prefix{
    white-space:nowrap;
  }

  .footer-contact > div:first-child{
    white-space:nowrap;
  }

  .footer-contact .footer-link::after,
  .footer-address-link span::after,
  .footer-address-link::after{
    display:none !important;
  }
}

@media (max-width:430px){
  .hero{
    height:100svh;
  }

  .mask{
    position:static;
  }

  .hero-word.state-large{
    transform:translateY(calc(50svh - 50% - .85rem));
    font-size:calc((100vw - (var(--pad) * 2)) / 5.8);
  }

  .claim{
    padding-top:2.4rem;
    padding-bottom:4.8rem;
  }

  .claim-text{
    font-size:2.35rem;
    line-height:1.06;
    padding:0;
  }

  .claim-tag{
    font-size:0.4em;
    top:-0.62em;
  }

  .grid{
    gap:3rem;
  }

  .caption{
    padding:0.7rem 0 0;
  }

  .meta{
    font-size:1.6rem;
  }

  .cat{
    margin-top:0.55rem;
    font-size:0.735rem;
    letter-spacing:0.05em;
  }

  .footer-repeat{
    font-size:1.5rem;
    line-height:1.2;
    letter-spacing:-0.015em;
    padding:6.75rem 0 2.6rem;
    white-space:normal;
  }

  .footer-meta{
    font-size:0.92rem;
    line-height:1.2;
    padding-top:0.55rem;
  }

  .footer-address::after,
  .footer-contact::after{
    margin:0 0.18em;
  }

  .footer-contact > div + div::before,
  .footer-legal > div + div::before{
    margin:0 0.18em;
  }
}

@media (prefers-reduced-motion:reduce){
  .hero-loading-poster{
    display:none;
  }

  .hero-word,
  .word,
  .project,
  .footer-repeat,
  .media{
    animation:none !important;
    transition:none !important;
  }

  .word{
    transform:translateY(0);
  }

  .project,
  .footer-repeat{
    opacity:1;
    transform:none;
  }

  .media-frame > video.media{
    display:none;
  }

  .media-frame > .reduced-motion-poster{
    display:block;
  }

  .hero > .hero-video{
    display:none;
  }

  .hero > .hero-reduced-motion-poster{
    display:block;
    position:absolute;
    inset:0;
  }
}