/* =========================================================
   DESIGN TOKENS
========================================================= */
:root{
  --black:      #101010;
  --charcoal:   #272727;
  --gray-mid:   #565656;
  --gray-light: #AAAAAA;
  --white:      #FFFFFF;
  --ice:        #DDF6FE;
  --blue:       #1CA7E0;
  --forest:     #30382F;
  --slate:      #464746;

  --font-display: 'Benzin', 'aktiv-grotesk', Arial, sans-serif;
  --font-body:    'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;

  --gap: 2px;
  --ease: cubic-bezier(.16,.84,.44,1);
  --frame: 1280px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--black);
  color:var(--white);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; width:100%; height:100%; object-fit:cover; }
::selection{ background:var(--blue); color:var(--black); }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

/* =========================================================
   HERO
========================================================= */
.hero{
  padding:3.5vw 6vw 4vw;
  border-bottom:1px solid var(--charcoal);
  position:relative;
  overflow:hidden;
}

.hero-line-row{
  position:relative;
  left:50%;
  width:100vw;
  margin-left:-50vw;
  height:110px;
  pointer-events:none;
  margin-bottom:1.5rem;
}

.hero-line-row svg{
  width:100%;
  height:100%;
  display:block;
}

.hero .name{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2.4rem, 7vw, 5.5rem);
  letter-spacing:-0.02em;
  line-height:0.95;
  text-transform:uppercase;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.7em;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.3rem, 2.8vw, 2rem);
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--blue);
}

.eyebrow::before{
  content:"";
  width:40px;
  height:2px;
  background:var(--blue);
  display:inline-block;
}

.reel-eyebrow{
  margin-bottom:1rem;
}

.hero .tagline{
  max-width:52ch;
  margin-top:1.1rem;
  color:var(--gray-light);
  font-size:1.08rem;
  line-height:1.6;
}

/* =========================================================
   REEL STRIP — isolated best-shot clips, homepage
========================================================= */
.reel{
  padding:4rem 6vw 5rem;
  border-bottom:1px solid var(--charcoal);
}
.reel .reel-label{
  font-family:var(--font-display);
  font-weight:800;
  font-size:.85rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:1.8rem;
}
.reel-row{
  display:flex;
  gap:1.2rem;
  overflow-x:auto;
  padding-bottom:.5rem;
}
.reel-item{
  position:relative;
  flex:0 0 auto;
  width:190px;
  aspect-ratio:9/16;
  background:var(--charcoal);
  overflow:hidden;
}
.reel-item iframe{ width:100%; height:100%; border:0; }
.reel-item video{ width:100%; height:100%; object-fit:cover; display:block; }
.reel-item .reel-caption{
  position:absolute;
  bottom:0; left:0; right:0;
  padding:.8rem;
  font-size:.7rem;
  letter-spacing:.05em;
  color:var(--gray-light);
  background:linear-gradient(180deg, rgba(16,16,16,0), rgba(16,16,16,.9));
}
.reel-item .embed-placeholder{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:.4rem;
  color:var(--gray-light);
  font-size:.65rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
  padding:1rem;
}
.reel-item .embed-placeholder .n{
  color:var(--blue);
  font-size:1.4rem;
  font-family:var(--font-display);
  font-weight:800;
}

/* =========================================================
   CAPTURE STRIP — second slider, landscape clips, bottom of home
========================================================= */
.capture-strip{
  padding:4rem 6vw 5rem;
  border-top:1px solid var(--charcoal);
}
.capture-strip .reel-label{
  font-family:var(--font-display);
  font-weight:800;
  font-size:.85rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:1.8rem;
}
.capture-row{
  display:flex;
  gap:1.2rem;
  overflow-x:auto;
  padding-bottom:.5rem;
}
.capture-item{
  position:relative;
  flex:0 0 auto;
  width:190px;
  height:337px;
  aspect-ratio:auto;
  background:#000;
  overflow:hidden;
}
.capture-item video{
  width:100%; height:100%;
  object-fit:contain;
  background:#000;
}
.capture-item .capture-caption{
  position:absolute;
  bottom:0; left:0; right:0;
  padding:.6rem .9rem;
  font-size:.72rem;
  letter-spacing:.05em;
  color:var(--white);
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.85));
  pointer-events:none;
}

/* =========================================================
   GRID — uniform squares, 2 columns, full color, blue wash on hover
========================================================= */
.grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--gap);
  background:var(--black);
}

.tile{
  position:relative;
  display:block;
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--charcoal);
}

.tile .tile-media{
  position:absolute; inset:0;
  transition:transform .7s var(--ease);
}

.tile .tile-blue-wash{
  position:absolute; inset:0;
  background:var(--blue);
  mix-blend-mode:color;
  opacity:0;
  transition:opacity .5s var(--ease);
}

.tile:hover .tile-media{ transform:scale(1.06); }
.tile:hover .tile-blue-wash{ opacity:.55; }

.tile .tile-overlay{
  position:absolute; inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:1.6rem;
  background:linear-gradient(180deg, rgba(16,16,16,0) 45%, rgba(16,16,16,.92) 100%);
}

.tile .tile-index{
  position:absolute;
  top:1.4rem; left:1.6rem;
  font-size:.7rem;
  letter-spacing:.15em;
  color:var(--white);
}

.tile .tile-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.3rem, 2.6vw, 2.2rem);
  text-transform:uppercase;
  letter-spacing:-0.01em;
  line-height:1.1;
  max-width:16ch;
  transform:translateY(10px);
  transition:transform .4s var(--ease);
}

.tile:hover .tile-title{ transform:translateY(0); }

.tile .tile-cta{
  margin-top:.6rem;
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--white);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .35s var(--ease) .05s, transform .35s var(--ease) .05s;
}

.tile:hover .tile-cta{ opacity:1; transform:translateY(0); }

@media (max-width:560px){
  .grid{ grid-template-columns:1fr; }
}

/* =========================================================
   FOOTER
========================================================= */
.site-footer{
  padding:3rem 6vw;
  color:var(--gray-mid);
  font-size:.8rem;
  letter-spacing:.05em;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem;
}

/* =========================================================
   PROJECT PAGE
========================================================= */
.project-hero{
  position:relative;
  height:64vh;
  min-height:400px;
  overflow:hidden;
}

.project-hero .tile-media{
  position:absolute; inset:0;
  filter:brightness(.7);
}

.project-hero .project-hero-overlay{
  position:absolute; inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:3.5rem 6vw;
  background:linear-gradient(180deg, rgba(16,16,16,.1) 30%, rgba(16,16,16,.92) 100%);
}

.back-link{
  position:absolute;
  top:2.2rem; left:6vw;
  z-index:2;
  font-size:.75rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--white);
  display:inline-flex;
  align-items:center;
  gap:.5em;
}

.back-link:hover{ color:var(--blue); }

.project-hero .project-tag{
  font-size:.75rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:1rem;
}

.project-hero .project-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2rem, 5.5vw, 4.2rem);
  text-transform:uppercase;
  letter-spacing:-0.01em;
  max-width:24ch;
}

.project-body{
  max-width:var(--frame);
  margin:0 auto;
  padding:6rem 6vw 4rem;
}

.project-meta{
  font-size:.85rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gray-light);
  margin-bottom:.6rem;
}
.project-meta span{ color:var(--blue); }

.project-credits{
  font-size:.78rem;
  letter-spacing:.05em;
  color:var(--gray-mid);
  margin-bottom:2.5rem;
}
.project-credits span{ color:var(--gray-light); }

.stat-group{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  text-align:center;
  gap:2.5rem;
  margin:1rem 0 2rem;
  padding:2rem 1.5rem;
  background:rgba(28,167,224,0.06);
  border-radius:4px;
}
.stat-item{
  min-width:140px;
}
.stat-item .stat-number{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.6rem, 3.2vw, 2.4rem);
  color:var(--blue);
  line-height:1;
}
.stat-item .stat-label{
  margin-top:.5rem;
  color:var(--blue);
  font-size:.82rem;
  line-height:1.5;
  max-width:22ch;
  margin-left:auto;
  margin-right:auto;
}

/* ---- GOAL / APPROACH / WORK / RESULT block ----
   Video sits directly beside the text as an equal column.
   .goal-block.flip swaps which side the media sits on. */
.goal-block{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3.5rem;
  align-items:start;
  padding:4rem 0;
  border-bottom:1px solid var(--charcoal);
}
.goal-block:first-child{ padding-top:2rem; }
.goal-block:last-child{ border-bottom:none; }
.goal-block.flip .text-col{ order:2; }
.goal-block.flip .media-col{ order:1; }

.text-col h3{
  font-family:var(--font-display);
  font-weight:800;
  font-size:.8rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:.9rem;
}
.text-col h3:not(:first-child){ margin-top:2rem; }
.text-col p{
  color:var(--gray-light);
  line-height:1.75;
  font-size:1.1rem;
  margin-bottom:.5rem;
  max-width:56ch;
}

.approach-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.text-col h3.stat-heading{ text-align:center; }
.approach-list li{
  color:var(--gray-light);
  line-height:1.6;
  font-size:1.05rem;
  padding-left:1.3rem;
  position:relative;
  max-width:56ch;
}
.approach-list li::before{
  content:"\2014";
  position:absolute;
  left:0;
  color:var(--blue);
}

.media-col{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem;
  align-content:flex-start;
}

.embed-slot{
  position:relative;
  flex:1 1 44%;
  min-width:170px;
  max-width:260px;
  aspect-ratio:9/16;
  background:var(--charcoal);
  overflow:hidden;
}
.embed-slot iframe{ width:100%; height:100%; border:0; }
.embed-slot video{ width:100%; height:100%; object-fit:cover; display:block; }
.embed-slot.photo, .embed-slot.tweet{
  aspect-ratio:4/5;
}
.embed-slot.solo{
  flex:1 1 100%;
  max-width:340px;
}
.embed-slot.landscape{
  aspect-ratio:16/9;
  flex-basis:92%;
  max-width:460px;
}
.embed-slot.landscape video, .embed-slot.landscape iframe{
  object-fit:contain;
  background:#000;
}

.embed-slot.tweet-embed{
  aspect-ratio:auto;
  height:auto;
  min-height:250px;
  background:transparent;
  display:flex;
  align-items:center;
}

.slot-link{
  position:absolute;
  bottom:0; left:0; right:0;
  padding:.7rem .9rem;
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--blue);
  background:linear-gradient(180deg, rgba(16,16,16,0), rgba(16,16,16,.92));
  text-align:center;
}
.slot-link:hover{ color:var(--white); }
.embed-placeholder{
  position:absolute; inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:.5rem;
  color:var(--gray-light);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
  padding:1rem;
}
.embed-placeholder .n{
  color:var(--blue);
  font-size:1.8rem;
  font-family:var(--font-display);
  font-weight:800;
}

@media (max-width:820px){
  .goal-block{ grid-template-columns:1fr; gap:2rem; }
  .goal-block.flip .text-col, .goal-block.flip .media-col{ order:initial; }
}

.gallery{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gap);
  margin:0 auto 3.2rem;
  max-width:var(--frame);
  padding:0 6vw;
}

.gallery .g-item{
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--charcoal);
}

.project-nav{
  display:flex;
  justify-content:space-between;
  padding:2.5rem 6vw 4.5rem;
  max-width:var(--frame);
  margin:0 auto;
  font-size:.75rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--gray-light);
}

.project-nav a:hover{ color:var(--blue); }

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

/* Drop real Benzin font files in /assets/fonts and uncomment:
@font-face{
  font-family:'Benzin';
  src:url('assets/fonts/Benzin-Bold.woff2') format('woff2');
  font-weight:800;
  font-display:swap;
}
*/