@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500&display=swap');

:root{
  --black:#0d0c0b;
  --bone:#f2efe8;
  --accent:#8a8478;
  --red:#c8262a;
  --red-dim: rgba(200,38,42,0.55);
  --line: rgba(242,239,232,0.13);
  --dim: rgba(242,239,232,0.55);
  --dimmer: rgba(242,239,232,0.34);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--black);
  color:var(--bone);
  font-family:'Space Grotesk', sans-serif;
  overflow-x:hidden;
}
::selection{background:var(--accent); color:var(--bone);}

.display{
  font-family:'Archivo', sans-serif;
  font-weight:800;
  letter-spacing:-0.02em;
  text-transform:none;
}

.eyebrow{
  font-family:'Space Grotesk', sans-serif;
  font-size:0.72rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--dim);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

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

/* ---------- UNIFIED GATE-SECTION SYSTEM ----------
   Every full-screen video moment on the page (hero + each work panel)
   is a .gate-section. The hero and each panel are position:sticky at
   top:0, stacked in normal document flow. As the user scrolls past a
   panel's tall wrapper, JS (see script.js) drives a scroll-progress
   value that scales the NEXT panel up from a small centered "seed"
   box to a full-bleed frame, so it visually grows and lands on top
   of the previous (now-pinned, dimmed) panel underneath it. The hero
   itself never scales — it just sits pinned in the deep background. */
.gate-wrap{
  position:relative;
  /* extra scroll distance used to drive the grow animation */
  height:220vh;
}
.gate-wrap:first-of-type{
  height:100vh; /* hero has no grow-in, no extra scroll runway needed */
}
.gate-section{
  position:sticky;
  top:0;
  width:100%;
  height:100vh;
  min-height:560px;
  overflow:hidden;
  background:#000;
  will-change:transform, clip-path;
}
.gate-video{
  position:absolute;
  top:50%; left:50%;
  width:100%; height:100%;
  object-fit:cover;
  transform:translate(-50%,-50%) scale(1.06);
  filter:brightness(0.55) saturate(1.05);
}

/* Work panels start life as a small centered "seed" square that grows
   to fill the viewport. clip-path drives the shrink/grow shape, and an
   inner scale keeps the video itself from looking stretched mid-grow. */
.work-panel{
  clip-path:inset(42vh 42vw round 4px);
  transition:none; /* driven by JS via inline transform for perf */
}
.work-panel .gate-video{
  transform:translate(-50%,-50%) scale(1.4);
}
.work-panel.is-growing{
  will-change:clip-path;
}
.gate-grain{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  opacity:0.25;
  mix-blend-mode:overlay;
  pointer-events:none;
  z-index:1;
}
.gate-vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.75) 100%);
  pointer-events:none;
  z-index:1;
}

.hero-content{
  position:absolute; inset:0;
  z-index:5;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:3.2vw 3.2vw;
  pointer-events:auto;
}
.hero-nav{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  pointer-events:auto;
}
.wordmark{
  font-family:'Archivo', sans-serif;
  font-weight:700;
  font-size:1rem;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--bone);
  line-height:1;
}

.contact-link{
  font-family:'Space Grotesk', sans-serif;
  font-size:0.76rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--dim);
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:color 0.25s ease, border-color 0.25s ease;
}
.contact-link:hover{
  color:var(--bone);
  border-color:var(--dimmer);
}

/* Menu trigger button (replaces old side nav as primary nav) */
.menu-trigger{
  display:flex;
  align-items:center;
  gap:0.7rem;
  background:none;
  border:none;
  cursor:pointer;
  pointer-events:auto;
  font-family:'Space Grotesk', sans-serif;
  font-size:0.76rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--bone);
  padding:0;
}
.menu-trigger .menu-word{ line-height:1; }
.menu-trigger .menu-bars{
  display:flex;
  flex-direction:column;
  gap:5px;
  width:26px;
}
.menu-trigger .menu-bars span{
  display:block;
  height:1px;
  background:var(--bone);
  transition:transform 0.35s cubic-bezier(.6,0,.3,1), opacity 0.25s ease, background 0.3s ease;
}
.menu-trigger .menu-bars span:nth-child(1){ width:100%; }
.menu-trigger .menu-bars span:nth-child(2){ width:70%; }
body.menu-open .menu-trigger .menu-bars span{ background:var(--bone); }
body.menu-open .menu-trigger .menu-bars span:nth-child(1){ transform:translateY(3px) rotate(45deg); width:100%; }
body.menu-open .menu-trigger .menu-bars span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); width:100%; }

/* ---------- FULL-SCREEN MENU OVERLAY ---------- */
.menu-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  background:var(--red);
  clip-path:inset(0 0 100% 0);
  transition:clip-path 0.7s cubic-bezier(.76,0,.24,1);
  display:flex;
  flex-direction:column;
  pointer-events:none;
}
body.menu-open .menu-overlay{
  clip-path:inset(0 0 0% 0);
  pointer-events:auto;
}
.menu-overlay-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:3.2vw;
}
.menu-overlay-top .wordmark{ color:var(--black); }
.menu-close{
  background:none;
  border:none;
  cursor:pointer;
  font-family:'Space Grotesk', sans-serif;
  font-size:0.76rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--black);
}
.menu-body{
  flex:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3vw;
  padding:2vw 3.2vw 3.2vw;
  align-items:center;
}
.menu-list{
  display:flex;
  flex-direction:column;
  gap:0;
}
.menu-list-item{
  display:flex;
  align-items:baseline;
  gap:1.6rem;
  padding:1.1vw 0;
  border-bottom:1px solid rgba(13,12,11,0.18);
  cursor:pointer;
}
.menu-list-item:first-child{ border-top:1px solid rgba(13,12,11,0.18); }
.menu-list-num{
  font-family:'Space Grotesk', sans-serif;
  font-size:0.9rem;
  color:rgba(13,12,11,0.55);
  min-width:2.2ch;
}
.menu-list-label{
  font-family:'Archivo', sans-serif;
  font-weight:800;
  font-size:clamp(1.8rem, 4.4vw, 3.6rem);
  letter-spacing:-0.02em;
  text-transform:uppercase;
  color:var(--black);
  transition:opacity 0.25s ease, transform 0.4s cubic-bezier(.16,.84,.44,1);
}
.menu-list-sub{
  font-family:'Space Grotesk', sans-serif;
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(13,12,11,0.5);
  margin-left:auto;
  padding-left:1rem;
  white-space:nowrap;
  display:none;
}
@media (min-width:900px){
  .menu-list-sub{ display:block; }
}
.menu-list-item:hover .menu-list-label,
.menu-list-item.active .menu-list-label{
  transform:translateX(0.6rem);
}
.menu-preview{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:rgba(13,12,11,0.08);
  justify-self:end;
  width:min(100%, 420px);
}
.menu-preview img,
.menu-preview video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 0.5s ease;
}
.menu-preview img.active,
.menu-preview video.active{ opacity:1; }

/* Glitch / doubled-letter hover text, in the spirit of Il Capo's nav labels */
.glitch-text{
  position:relative;
  display:inline-block;
}
.glitch-text::before{
  content:attr(data-text);
  position:absolute;
  left:0; top:0;
  width:0;
  overflow:hidden;
  white-space:nowrap;
  color:var(--red);
  transition:width 0.3s steps(6,end);
}
.menu-close:hover .glitch-text::before,
.menu-trigger:hover .glitch-text::before{
  width:100%;
}
.menu-overlay-top .menu-close .glitch-text::before{ color:var(--bone); }
.menu-footer{
  display:flex;
  justify-content:space-between;
  padding:0 3.2vw 2.4vw;
  font-family:'Space Grotesk', sans-serif;
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(13,12,11,0.6);
}
@media (max-width:900px){
  .menu-body{ grid-template-columns:1fr; }
  .menu-preview{ display:none; }
  .menu-list-label{ font-size:clamp(1.6rem, 8vw, 2.4rem); }
}

.hero-mid{
  text-align:left;
  margin-top:auto;
  margin-bottom:auto;
  max-width:1200px;
  width:100%;
}
.hero-meta-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:1.8rem;
  padding-bottom:1.4rem;
  border-bottom:1px solid var(--line);
}
.hero-eyebrow{
  font-size:0.72rem;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--accent);
}
.hero-meta-right{
  font-size:0.72rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:rgba(242,239,232,0.5);
}
.hero-title{
  font-family:'Archivo', sans-serif;
  font-size:clamp(3.2rem, 9.5vw, 10rem);
  line-height:0.88;
  font-weight:900;
  letter-spacing:-0.03em;
  text-transform:uppercase;
  position:relative;
}
.hero-title::before{
  content:'';
  position:absolute;
  left:-1.4vw;
  top:0.1em;
  bottom:0.1em;
  width:4px;
  background:var(--red);
}
.hero-title{ padding-left:1.4vw; }
.hero-sub-row{
  display:flex;
  justify-content:flex-end;
  margin-top:1.8rem;
}
.hero-sub{
  font-family:'Space Grotesk', sans-serif;
  font-size:1.02rem;
  letter-spacing:0.01em;
  color:rgba(242,239,232,0.72);
  max-width:34ch;
  text-align:right;
  padding-right:0.2rem;
  border-right:1px solid var(--line);
  padding-right:1.4rem;
}

.hero-foot{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  font-size:0.7rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(242,239,232,0.5);
}
.scroll-cue{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.6rem;
}
.scroll-line{
  width:1px; height:38px;
  background:linear-gradient(to bottom, var(--accent), transparent);
  animation:pulse-line 2.2s ease-in-out infinite;
}

@keyframes pulse-line{
  0%,100%{ opacity:0.3; }
  50%{ opacity:1; }
}

/* ---------- CONTENT SECTIONS ---------- */
.content{
  position:relative;
  z-index:5;
  background:var(--black);
}

.section{
  padding:9vw 6vw;
  border-top:1px solid var(--line);
}

/* ---------- WORK SECTION — panels reuse .gate-section for the same
   open/close transition as the hero; only their content differs. ---------- */
.work-section{
  position:relative;
  background:var(--black);
}
.work-panel{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.work-panel:nth-child(odd){ background:var(--black); }
.work-panel:nth-child(even){ background:var(--red); }

.work-panel:nth-child(even) .gate-vignette{
  background:radial-gradient(ellipse at center, transparent 30%, rgba(30,4,4,0.75) 100%);
}

.work-panel-num{
  position:absolute;
  left:2.4vw;
  bottom:2.4vw;
  z-index:5;
  font-family:'Space Grotesk', sans-serif;
  font-size:0.85rem;
  letter-spacing:0.1em;
  color:var(--bone);
  opacity:0;
  transition:opacity 0.4s ease;
}
.work-panel-title{
  position:relative;
  z-index:5;
  font-family:'Archivo', sans-serif;
  font-weight:800;
  font-size:clamp(2.6rem, 7vw, 7.5rem);
  line-height:0.95;
  letter-spacing:-0.02em;
  text-transform:uppercase;
  color:var(--red);
  text-shadow:0 2px 40px rgba(0,0,0,0.4);
  opacity:0;
  transform:translateY(24px);
  transition:opacity 0.5s ease, transform 0.6s cubic-bezier(.16,.84,.44,1);
}
.work-panel:nth-child(even) .work-panel-title{ color:var(--black); }
.work-panel.is-revealed .work-panel-title{
  opacity:1;
  transform:translateY(0);
}
.work-panel.is-revealed .work-panel-num{
  opacity:1;
}

/* Eyebrow label (client/project name) shown above the panel as it grows,
   matching the reference: text sits in the black gap before the panel
   below arrives, then the panel itself rises up over it. */
.work-panel-eyebrow{
  position:absolute;
  top:50%;
  left:0; right:0;
  transform:translateY(-50%);
  text-align:center;
  font-family:'Space Grotesk', sans-serif;
  font-size:0.78rem;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--red);
  z-index:1;
  pointer-events:none;
}

@media (max-width:700px){
  .gate-section{ height:80vh; min-height:460px; }
  .gate-wrap{ height:180vh; }
  .gate-wrap:first-of-type{ height:80vh; }
}

@media (prefers-reduced-motion: reduce){
  .gate-wrap{ height:auto !important; }
  .gate-section{ position:relative; }
  .work-panel{ clip-path:none !important; }
  .work-panel .gate-video{ transform:translate(-50%,-50%) scale(1.06); }
  .work-panel-title, .work-panel-num{ opacity:1 !important; transform:none !important; }
}

/* Reveal on scroll */
.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:opacity 0.9s cubic-bezier(.16,.84,.44,1), transform 0.9s cubic-bezier(.16,.84,.44,1);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ---------- VIEW MORE BAR ---------- */
.view-more{
  margin:0 6vw;
  padding:1.3rem;
  text-align:center;
  background:transparent;
  border:1px solid var(--line);
  font-family:'Space Grotesk', sans-serif;
  font-size:0.8rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--dim);
  cursor:pointer;
  transition:background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.view-more:hover{
  background:rgba(242,239,232,0.04);
  color:var(--bone);
  border-color:rgba(242,239,232,0.3);
}

/* ---------- CONTACT ---------- */
.contact-section{
  padding:9vw 6vw 5vw;
  border-top:1px solid var(--line);
  margin-top:4vw;
}
.contact-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:3rem;
}
@media (min-width:900px){
  .contact-grid{ grid-template-columns:1fr 1fr; }
}
.contact-lead{
  font-family:'Archivo', sans-serif;
  font-weight:800;
  font-size:clamp(2.1rem, 4.6vw, 3.6rem);
  line-height:1.06;
  letter-spacing:-0.02em;
  text-transform:uppercase;
  max-width:14ch;
}
.contact-form{
  display:flex;
  flex-direction:column;
  gap:1.6rem;
}
.field{
  display:flex;
  flex-direction:column;
  gap:0.5rem;
}
.field label{
  font-family:'Space Grotesk', sans-serif;
  font-size:0.78rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--dim);
}
.field input, .field textarea{
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  padding:0.6rem 0;
  color:var(--bone);
  font-family:'Space Grotesk', sans-serif;
  font-size:1.05rem;
  outline:none;
  resize:none;
  transition:border-color 0.25s ease;
}
.field input:focus, .field textarea:focus{
  border-color:var(--accent);
}
.form-foot{
  display:flex;
  align-items:center;
  gap:1.4rem;
  margin-top:0.6rem;
  flex-wrap:wrap;
}
.send-btn{
  border:1px solid var(--bone);
  background:transparent;
  color:var(--bone);
  padding:0.85rem 2.2rem;
  font-family:'Space Grotesk', sans-serif;
  font-size:0.95rem;
  letter-spacing:0.04em;
  cursor:pointer;
  transition:background 0.25s ease, color 0.25s ease;
}
.send-btn:hover{
  background:var(--bone);
  color:var(--black);
}
.consent-text{
  font-size:0.82rem;
  line-height:1.5;
  color:var(--dimmer);
  max-width:32ch;
}
.consent-text a{
  color:var(--accent);
  text-decoration:underline;
}

/* ---------- FOOTER ---------- */
.site-footer{
  border-top:1px solid var(--line);
  padding:5vw 6vw 3vw;
  background:var(--black);
}
.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:2rem;
  margin-bottom:4vw;
}
.footer-wordmark{
  font-family:'Archivo', sans-serif;
  font-weight:800;
  font-size:1.3rem;
  color:var(--bone);
  letter-spacing:-0.01em;
  text-transform:uppercase;
}
.footer-cols{
  display:flex;
  gap:5vw;
  flex-wrap:wrap;
}
.footer-col h5{
  font-family:'Space Grotesk', sans-serif;
  font-size:0.72rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--dimmer);
  margin-bottom:1rem;
}
.footer-col a, .footer-col p{
  display:block;
  font-size:0.98rem;
  color:rgba(242,239,232,0.8);
  margin-bottom:0.5rem;
  line-height:1.5;
  transition:color 0.25s ease;
}
.footer-col a:hover{ color:var(--accent); }

.credits-roll{
  padding-top:3vw;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:'Space Grotesk', sans-serif;
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--dimmer);
  flex-wrap:wrap;
  gap:1rem;
}

@media (max-width: 700px){
  .hero-nav{ align-items:center; }
  .panel{ grid-template-columns:1fr; }
  .hero-meta-row{ flex-direction:column; align-items:flex-start; gap:0.5rem; }
  .hero-sub-row{ justify-content:flex-start; }
  .hero-sub{ text-align:left; border-right:none; padding-right:0; border-left:1px solid var(--line); padding-left:1rem; }
  .hero-foot{ flex-wrap:wrap; gap:1rem; }
}