/* ===== Tokens ===== */
:root{
  --black: #0a0806;
  --charcoal: #15120e;
  --panel: #1b1712;
  --gold: #c9a24b;
  --gold-bright: #e8c878;
  --orange: #d65a1f;
  --orange-bright: #ef7a34;
  --cream: #f2ede4;
  --cream-dim: #b8b0a2;
  --line: rgba(201,162,75,0.22);
  --line-strong: rgba(201,162,75,0.45);

  --font-display: "Jost", sans-serif;
  --font-heading: "Syne", sans-serif;
  --font-numeral: "Bebas Neue", sans-serif;
  --font-body: "Inter", sans-serif;

  --container: 1240px;
  --ease: cubic-bezier(.22,.68,0,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background: var(--black);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }

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

::selection{ background: var(--gold); color: var(--black); }

/* subtle film grain overlay */
.grain{
  position: fixed; inset:0; pointer-events:none; z-index: 9998;
  opacity: 0.05; mix-blend-mode: overlay;
  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)'/%3E%3C/svg%3E");
}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

.eyebrow{
  display:flex; align-items:center; gap:.55rem;
  font-family: var(--font-display);
  font-weight:500;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--gold);
  margin: 0 0 1.1rem;
}
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%;
  background: var(--orange);
  box-shadow: 0 0 8px 1px var(--orange);
  flex: none;
}

/* ===== Shutter intro ===== */
.shutter-intro{
  position: fixed; inset:0; z-index: 9999;
  background: var(--black);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .6s var(--ease);
}
.shutter-intro.done{ opacity:0; pointer-events:none; }
.shutter-svg{ width: 140px; height:140px; }
.shutter-svg path{
  fill: var(--gold);
  transform-origin: 100px 100px;
  transition: transform .7s var(--ease), opacity .5s ease;
}

/* ===== Header ===== */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.4rem clamp(1.2rem, 4vw, 3rem);
  transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled{
  background: rgba(10,8,6,0.86);
  backdrop-filter: blur(10px);
  padding-top: .9rem; padding-bottom:.9rem;
  border-color: var(--line);
}
.brand{ display:flex; align-items:center; gap:.65rem; }
.brand-mark{ width: 30px; height:30px; }
.brand-word{
  font-family: var(--font-display);
  font-weight:400;
  letter-spacing:.18em;
  text-transform: uppercase;
  font-size: .95rem;
  color: var(--cream);
}
.brand-word em{ color: var(--gold); font-style: normal; }

.site-nav{ display:flex; gap: 2.4rem; }
.site-nav a{
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream-dim);
  position: relative;
  padding-bottom: 4px;
}
.site-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background: var(--gold); transition: right .35s var(--ease);
}
.site-nav a:hover{ color: var(--cream); }
.site-nav a:hover::after{ right:0; }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:34px; background:none; border:none; cursor:pointer; padding:0;
}
.nav-toggle span{ width:100%; height:1px; background: var(--cream); transition: transform .3s ease, opacity .3s ease; }

/* ===== Hero ===== */
.hero{
  position: relative;
  height: 100svh; min-height: 560px;
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; filter: saturate(1.05) contrast(1.05);
}
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,8,6,.55) 0%, rgba(10,8,6,.35) 35%, rgba(10,8,6,.55) 70%, rgba(10,8,6,.96) 100%),
    linear-gradient(90deg, rgba(10,8,6,.5) 0%, rgba(10,8,6,0) 40%);
}
.hero-content{
  position: relative; z-index:2;
  padding: 0 clamp(1.2rem, 4vw, 3rem) 6.5rem;
  max-width: 900px;
}
.hero-title{
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -.01em;
  font-size: clamp(2.6rem, 9vw, 6.4rem);
  line-height: .96;
  margin: 0 0 1.3rem;
  color: var(--cream);
}
.hero-title em{
  font-style: normal;
  font-weight: 800;
  background: linear-gradient(100deg, var(--gold-bright), var(--gold) 45%, var(--orange) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-tagline{
  max-width: 480px;
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--cream);
  font-size: clamp(1.2rem, 2.6vw, 1.65rem);
  letter-spacing: .01em;
  margin: 0 0 2.4rem;
}
.hero-actions{ display:flex; gap: 1rem; flex-wrap: wrap; }

.btn{
  font-family: var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .82rem;
  padding: .95rem 1.9rem;
  border-radius: 2px;
  display:inline-flex; align-items:center; gap:.5rem;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .35s var(--ease), background .35s ease, border-color .35s ease, color .35s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{
  background: linear-gradient(100deg, var(--gold-bright), var(--gold) 60%, var(--orange-bright));
  color: var(--black);
}
.btn-primary:hover{ box-shadow: 0 10px 30px -8px rgba(201,162,75,.55); }
.btn-ghost{
  border-color: var(--line-strong);
  color: var(--cream);
  background: rgba(255,255,255,.02);
}
.btn-ghost:hover{ border-color: var(--gold); color: var(--gold-bright); }

.scroll-cue{
  position:absolute; right: clamp(1.2rem,4vw,3rem); bottom: 2.2rem; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  color: var(--cream-dim);
  font-family: var(--font-display); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
}
.scroll-cue i{
  width:1px; height: 46px;
  background: linear-gradient(var(--gold), transparent);
  position:relative; overflow:hidden;
}
.scroll-cue i::after{
  content:""; position:absolute; left:0; top:-40%; width:100%; height:40%;
  background: var(--gold-bright);
  animation: scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue{
  0%{ top:-40%; } 60%{ top:100%; } 100%{ top:100%; }
}

/* ===== Section shell ===== */
main > section{
  padding: clamp(5rem,10vw,8rem) clamp(1.2rem,4vw,3rem);
  position: relative;
}
.section-head{ max-width: 720px; margin: 0 auto 3.5rem; text-align:center; }
.section-head h2{
  font-family: var(--font-heading); font-weight:700; letter-spacing:0;
  font-size: clamp(2.1rem, 5vw, 3.4rem); margin: 0 0 1rem; color: var(--cream);
}
.section-lede{ color: var(--cream-dim); font-size: 1.02rem; margin:0; }

/* ===== Work grid ===== */
.work{ background: var(--black); }
.work-filters{
  max-width: var(--container); margin: 0 auto 2.4rem;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem;
}
.filter-btn{
  font-family: var(--font-display);
  font-size: .76rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--cream-dim);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: .55rem 1.1rem;
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease, background .3s ease;
}
.filter-btn:hover{ color: var(--gold-bright); border-color: var(--gold); }
.filter-btn.active{
  color: var(--black);
  background: linear-gradient(100deg, var(--gold-bright), var(--gold) 60%, var(--orange-bright));
  border-color: transparent;
}
.work-grid{
  max-width: var(--container); margin: 0 auto;
  display:grid; grid-template-columns: repeat(6, 1fr); gap: 1.1rem;
}

/* sliding 3-up reel */
.reel-carousel{ max-width: var(--container); margin: 0 auto; }
.reel-viewport{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  cursor: grab;
  touch-action: pan-y;
}
.reel-viewport.dragging{ cursor: grabbing; }
.reel-viewport.dragging .tile{ pointer-events: none; }
.reel-track{
  display:flex; gap: 1.1rem;
  will-change: transform;
  user-select: none;
}
.reel-track .tile{ flex: none; width: calc((100% - 2 * 1.1rem) / 3); }
.reel-track img{ -webkit-user-drag: none; user-drag: none; }

@media (max-width: 900px){
  .reel-track .tile{ width: calc((100% - 1.1rem) / 2); }
}
@media (max-width: 560px){
  .reel-track .tile{ width: 82%; }
}

.tile{
  position:relative; border-radius: 3px; overflow:hidden; cursor:pointer;
  aspect-ratio: 16/10;
  background: var(--panel);
  border: 1px solid var(--line);
}

.tile img{ width:100%; height:100%; object-fit: cover; transition: transform .8s var(--ease), filter .5s ease; filter: saturate(.9) brightness(.82); }
.tile:hover img{ transform: scale(1.06); filter: saturate(1.05) brightness(.62); }

.tile video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition: opacity .4s ease;
}
.tile:hover video{ opacity:1; }

.tile-hidden{ display:none; }

.tile-iris{
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition: opacity .35s ease;
  background: rgba(10,8,6,0);
}
.tile:hover .tile-iris{ opacity:1; }
.tile-iris svg{ width:46px; height:46px; filter: drop-shadow(0 0 10px rgba(201,162,75,.6)); }
.tile-iris path{ fill: var(--gold-bright); transform-origin:50px 50px; transition: transform .5s var(--ease); }
.tile:hover .tile-iris path{ transform: rotate(28deg) scale(1.15); }

/* ===== About ===== */
.about{ background: var(--charcoal); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.about-inner{
  max-width: var(--container); margin:0 auto;
  display:grid; grid-template-columns: 1fr 1fr; gap: 4rem;
  align-items:start;
}
.about-statement h2{
  font-family: var(--font-heading); font-weight:700; letter-spacing:0;
  font-size: clamp(2rem, 4.2vw, 3.1rem); margin:0; color: var(--cream);
}
.about-body p{ color: var(--cream-dim); margin: 0 0 1.2rem; max-width: 52ch; }
.tag-list{
  list-style:none; padding:0; margin: 1.6rem 0 0; display:flex; flex-wrap:wrap; gap:.6rem;
}
.tag-list li{
  border: 1px solid var(--line-strong);
  color: var(--gold);
  font-family: var(--font-display); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase;
  padding: .5rem .9rem; border-radius: 2px;
}

/* ===== Founder ===== */
.founder{ background: var(--black); }
.founder-inner{
  max-width: var(--container); margin:0 auto;
  display:grid; grid-template-columns: 1.1fr 1fr; gap: 4rem;
  align-items:center;
}
.founder-photo{
  border-radius: 3px; overflow:hidden;
  border: 1px solid var(--line);
  aspect-ratio: 3/2;
}
.founder-photo img{
  width:100%; height:100%; object-fit:cover;
  filter: grayscale(1) contrast(1.05);
}
.founder-content h2{
  font-family: var(--font-heading); font-weight:700; letter-spacing:0;
  font-size: clamp(1.9rem, 4vw, 2.8rem); margin:0 0 1.2rem; color: var(--cream);
}
.founder-content p{ color: var(--cream-dim); margin: 0 0 1.1rem; max-width: 52ch; }
.founder-content p:last-child{ margin-bottom:0; }

/* ===== Drone feature ===== */
.drone{
  position: relative;
  min-height: 640px;
  height: 82vh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  border-top:1px solid var(--line);
}
.drone-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; filter: saturate(1.05) contrast(1.05);
}
.drone-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,8,6,.35) 0%, rgba(10,8,6,.25) 30%, rgba(10,8,6,.65) 75%, rgba(10,8,6,.96) 100%);
}
.drone-content{
  position: relative; z-index:2;
  max-width: 720px;
  padding: 0 clamp(1.2rem, 4vw, 3rem) 4.5rem;
}
.drone-content h2{
  font-family: var(--font-heading); font-weight:700; letter-spacing:0;
  font-size: clamp(1.9rem, 4.6vw, 3.1rem); line-height:1.05;
  margin: 0 0 1.1rem; color: var(--cream);
}
.drone-lede{
  color: var(--cream-dim); font-size: 1.02rem; max-width: 52ch;
  margin: 0 0 1.6rem;
}
.drone-tags{
  list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.6rem;
}
.drone-tags li{
  border: 1px solid var(--line-strong);
  color: var(--gold-bright);
  font-family: var(--font-display); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  padding: .5rem .9rem; border-radius: 2px;
  background: rgba(10,8,6,.35);
}

@media (max-width: 560px){
  .drone{ height:auto; min-height:520px; padding-top: 5rem; }
}

/* ===== Collaborations ===== */
.collabs{ background: var(--black); border-top:1px solid var(--line); }
.collabs .work-grid:empty{ display:none; }
.collabs-placeholder{
  max-width: var(--container); margin: 0 auto;
  border: 1px dashed var(--line-strong);
  border-radius: 3px;
  padding: 3.5rem 1.5rem;
  text-align:center;
  color: var(--cream-dim);
}
.collabs-placeholder-mark{
  display:block; color: var(--orange); font-size: .6rem; margin-bottom: 1rem;
  letter-spacing: .3em;
}
.collabs-placeholder p{
  font-family: var(--font-display); letter-spacing:.08em; text-transform:uppercase; font-size:.85rem;
  margin:0;
}
#collabsGrid .tile{ grid-column: span 3; aspect-ratio: 16/10; }

@media (max-width: 900px){
  #collabsGrid .tile{ grid-column: span 1; }
}

/* ===== Reviews ===== */
.reviews{ background: var(--charcoal); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.reviews-carousel{
  position: relative;
  max-width: 760px; margin: 0 auto;
}
.reviews-quote-mark{
  position:absolute; top:-3.4rem; left:50%; transform:translateX(-50%);
  font-family: var(--font-numeral);
  font-size: 6rem; line-height:1;
  color: var(--gold);
  opacity: .35;
  pointer-events:none;
}
.reviews-viewport{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.reviews-track{
  display:flex;
  will-change: transform;
}
.review-slide{
  flex: none; width:100%;
  text-align:center;
  padding: 0 clamp(0, 3vw, 2rem);
}
.review-quote{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.55;
  color: var(--cream);
  margin: 0 0 1.6rem;
}
.review-author{
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin:0;
}
.review-author::before{
  content:"";
  display:inline-block;
  width: 28px; height:1px;
  background: var(--orange);
  vertical-align: middle;
  margin-right: .7rem;
}
/* ===== Contact ===== */
.contact{ background: var(--black); }
.contact-inner{ max-width: var(--container); margin:0 auto; }
.contact h2{
  font-family: var(--font-heading); font-weight:700; letter-spacing:0;
  font-size: clamp(2.3rem, 6vw, 4rem); margin: 0 0 3rem; color: var(--cream);
}
.contact h2 em{ font-style:normal; font-weight:800; color: var(--gold); }

.contact-grid{ display:grid; grid-template-columns: .8fr 1.2fr; gap: 4rem; }

.contact-links{ display:flex; flex-direction:column; gap: 1.6rem; }
.contact-link{
  border-bottom: 1px solid var(--line);
  padding-bottom: 1.2rem;
  display:flex; flex-direction:column; gap:.3rem;
  transition: border-color .3s ease;
}
.contact-link:hover{ border-color: var(--gold); }
.contact-label{
  font-family: var(--font-display); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color: var(--cream-dim);
}
.contact-value{ font-size: 1.15rem; color: var(--cream); transition: color .3s ease; }
.contact-link:hover .contact-value{ color: var(--gold-bright); }

.contact-form{ display:flex; flex-direction:column; gap: 1.3rem; }
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field label{
  font-family: var(--font-display); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color: var(--cream-dim);
}
.field input, .field textarea{
  background: transparent;
  border: none; border-bottom: 1px solid var(--line-strong);
  color: var(--cream); font-family: var(--font-body); font-size: 1rem;
  padding: .6rem 0; resize: vertical;
  transition: border-color .3s ease;
}
.field input:focus, .field textarea:focus{ border-color: var(--gold); outline:none; }
.contact-form .btn{ align-self: flex-start; margin-top:.5rem; border:none; }
.form-note{ font-size:.85rem; color: var(--gold-bright); min-height:1.2em; margin:0; }

/* ===== Footer ===== */
.site-footer{
  display:flex; align-items:center; justify-content:center; gap: 1.4rem;
  padding: 2.4rem clamp(1.2rem,4vw,3rem);
  border-top: 1px solid var(--line);
  color: var(--cream-dim); font-size: .85rem;
  flex-wrap: wrap;
}
.footer-mark{ width:20px; height:20px; opacity:.8; }
.site-footer a{ color: var(--gold); }
.site-footer a:hover{ color: var(--gold-bright); }

/* ===== Lightbox ===== */
.lightbox{
  position: fixed; inset:0; z-index: 2000;
  background: rgba(6,5,4,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition: opacity .35s ease;
  padding: 2rem;
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox-inner{ width:100%; max-width: 1100px; }
.lightbox-inner video{ width:100%; max-height: 76vh; background:#000; border-radius:3px; }
.lightbox-caption{ margin-top:1rem; }
.lightbox-genre{
  font-family: var(--font-display); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color: var(--gold);
}
.lightbox-close{
  position:absolute; top: 1.6rem; right: clamp(1.2rem,4vw,2.4rem);
  background:none; border:none; color: var(--cream); font-size: 2.2rem; line-height:1;
  cursor:pointer; transition: color .3s ease, transform .3s ease;
}
.lightbox-close:hover{ color: var(--gold-bright); transform: rotate(90deg); }

/* ===== Reveal-on-scroll ===== */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ===== Responsive ===== */
@media (max-width: 900px){
  .about-inner, .contact-grid, .founder-inner{ grid-template-columns: 1fr; gap: 2.4rem; }
  .work-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px){
  .site-nav{
    position: fixed; top:0; right:0; height:100svh; width: min(78vw, 320px);
    background: rgba(10,8,6,.98); backdrop-filter: blur(12px);
    flex-direction: column; align-items:flex-start; justify-content:center;
    gap: 2rem; padding: 2rem 2.4rem;
    transform: translateX(100%); transition: transform .4s var(--ease);
    border-left: 1px solid var(--line);
  }
  .site-nav.open{ transform: translateX(0); }
  .nav-toggle{ display:flex; }
  .nav-toggle.open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
}

@media (max-width: 560px){
  .work-grid{ grid-template-columns: 1fr; }
  .hero-content{ padding-bottom: 5rem; }
  .contact-inner .contact-grid{ gap: 2.4rem; }
}