:root{
  --black: #0A0A0A;
  --graphite: #1A1917;
  --graphite-2: #232120;
  --amber: #E8A33D;
  --amber-dim: #8a6425;
  --bone: #F0EDE6;
  --bone-dim: #9d998e;
  --steel: #2C3A46;
  --steel-light: #4a6478;
  --hair: rgba(240,237,230,0.12);
}

*{margin:0; padding:0; box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  background:var(--black);
  color:var(--bone);
  font-family:'Inter', sans-serif;
  font-weight:400;
  overflow-x:hidden;
}

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

h1,h2,h3,.display{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:700;
  letter-spacing:0.01em;
  line-height:0.95;
}

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

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:50;
  opacity:0.045; 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");
}

/* ---------- NAV ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; justify-content:space-between; align-items:center;
  padding:28px 6vw;
  mix-blend-mode:difference;
  gap:12px;
}
.nav-mark{ font-family:'Big Shoulders Display'; font-weight:900; font-size:1.3rem; letter-spacing:0.02em;}
.nav-links{ display:flex; gap:36px; font-size:0.85rem; color:var(--bone-dim);}
.nav-links a{ transition:color .3s ease; }
.nav-links a:hover{ color:var(--bone); }
.nav-links a.active{ color:var(--bone); }
@media (max-width:700px){
  nav{
    flex-direction:column; align-items:flex-start;
    padding:18px 6vw; gap:10px;
  }
  .nav-mark{ font-size:1rem; white-space:nowrap; }
  .nav-links{ gap:16px; font-size:0.72rem; flex-wrap:wrap; row-gap:6px; }
}

/* ---------- HERO / LETTERBOX (home only) ---------- */
.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
  filter:brightness(0.75) contrast(1.05);
}
.hero-scrim{
  position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.15) 30%, rgba(10,10,10,0.25) 65%, rgba(10,10,10,0.75) 100%),
    radial-gradient(ellipse 70% 55% at 50% 50%, transparent 30%, rgba(10,10,10,0.45) 100%);
}

.hero{
  position:relative;
  height:100vh;
  display:flex; align-items:center; justify-content:center;
  background:var(--black);
  overflow:hidden;
}

.letterbox{
  position:absolute; left:0; right:0; background:var(--black); z-index:20;
  animation: close-bars 1.6s cubic-bezier(.65,0,.35,1) forwards;
}
.letterbox.top{ top:0; height:50vh; animation-name: close-top; }
.letterbox.bottom{ bottom:0; height:50vh; animation-name: close-bottom; }
@keyframes close-top{ from{height:50vh;} to{height:13vh;} }
@keyframes close-bottom{ from{height:50vh;} to{height:13vh;} }

.light-streaks{
  position:absolute; inset:0; z-index:1;
}
.streak{
  position:absolute; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--amber), transparent);
  opacity:0.55; filter:blur(0.5px);
  animation: streak-move linear infinite;
}
@keyframes streak-move{
  from{ transform:translateX(-30vw) scaleX(0.6); opacity:0;}
  10%{opacity:0.6;}
  90%{opacity:0.4;}
  to{ transform:translateX(130vw) scaleX(1.4); opacity:0;}
}

.hero-inner{
  position:relative; z-index:10;
  text-align:center;
  padding:0 6vw;
}
.hero-eyebrow{
  font-size:0.8rem; color:var(--amber); letter-spacing:0.08em;
  margin-bottom:18px; font-family:'Inter'; font-weight:500;
}
.hero h1{
  font-size:clamp(3.2rem, 11vw, 9rem);
  color:var(--bone);
}
.hero h1 span{ display:block; }
.hero-sub{
  max-width:520px; margin:26px auto 0; color:var(--bone-dim);
  font-size:1.05rem; line-height:1.6; font-weight:300;
}
.hero-cta{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:38px; padding:14px 28px;
  border:1px solid var(--hair); border-radius:2px;
  font-size:0.9rem; letter-spacing:0.02em; color:var(--bone);
  transition:border-color .3s ease, background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.hero-cta:hover{
  border-color:var(--amber); background:rgba(232,163,61,0.06);
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(232,163,61,0.12);
}

.scroll-cue{
  position:absolute; bottom:16vh; left:50%; transform:translateX(-50%);
  z-index:10; width:1px; height:50px; background:var(--hair);
}
.scroll-cue::after{
  content:''; position:absolute; top:0; left:-2px; width:5px; height:12px;
  background:var(--amber); animation: cue-drop 2s ease-in-out infinite;
}
@keyframes cue-drop{
  0%{ top:0; opacity:0; } 20%{opacity:1;} 90%{ top:38px; opacity:0;} 100%{top:38px; opacity:0;}
}

/* ---------- PAGE HEADER (interior pages) ---------- */
.page-header{
  padding:170px 6vw 90px;
  background:var(--black);
  border-bottom:1px solid var(--hair);
  position:relative;
}
.page-header.photo{
  background-image:
    linear-gradient(180deg, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0.55) 55%, rgba(10,10,10,0.92) 100%),
    var(--header-img);
  background-size:cover;
  background-position:center;
  padding-top:200px;
  padding-bottom:110px;
}
.page-header .eyebrow{
  font-size:0.85rem; color:var(--amber); letter-spacing:0.03em;
  margin-bottom:16px; font-weight:500;
}
.page-header h1{
  font-size:clamp(2.8rem, 8vw, 5.4rem); color:var(--bone);
}
.page-header p{
  color:var(--bone-dim); max-width:480px; margin-top:22px;
  font-size:1.05rem; font-weight:300; line-height:1.6;
}
.page-header.photo p{ color:#d8d4cb; }

/* ---------- SECTION BASE ---------- */
section, .content-section{ padding:120px 6vw; position:relative; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:64px; gap:24px; flex-wrap:wrap;
  border-bottom:1px solid var(--hair); padding-bottom:28px;
}
.section-head h2{ font-size:clamp(2.2rem, 5vw, 3.6rem); }
.section-head p{ color:var(--bone-dim); max-width:340px; font-size:0.95rem; line-height:1.6; font-weight:300; }

/* ---------- HOME / EXPLORE GRID ---------- */
.explore{ background:var(--black); padding:100px 6vw 140px; }
.explore-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:2px;
  border-top:1px solid var(--hair);
}
.explore-card{
  padding:40px 26px; min-height:220px;
  display:flex; flex-direction:column; justify-content:space-between;
  border-right:1px solid var(--hair); border-bottom:1px solid var(--hair);
  transition:background .3s ease, transform .3s ease;
}
.explore-card:hover{ background:rgba(240,237,230,0.03); transform:translateY(-4px); }
.explore-card .explore-name{ transition:color .3s ease; }
.explore-card:hover .explore-name{ color:var(--amber); }
.explore-card:last-child{ border-right:1px solid var(--hair); }
.explore-num{ font-size:0.8rem; color:var(--bone-dim); }
.explore-name{ font-family:'Big Shoulders Display'; font-size:1.8rem; font-weight:600; color:var(--bone); }
.explore-desc{ color:var(--bone-dim); font-size:0.85rem; font-weight:300; margin-top:8px; }
@media (max-width:900px){ .explore-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:520px){ .explore-grid{ grid-template-columns:1fr; } }

/* ---------- ABOUT ---------- */
.about{ background:var(--graphite); }
.about-grid{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:80px; align-items:start;
}
.about-grid p{
  font-size:1.15rem; line-height:1.75; color:var(--bone); font-weight:300; max-width:60ch;
  margin-bottom:20px;
}
.about-grid p:first-child{font-size:1.4rem; color:var(--bone);}
.stat-list{ display:flex; flex-direction:column; gap:0; }
.stat{ padding:22px 0; border-bottom:1px solid var(--hair); display:flex; justify-content:space-between; align-items:baseline;}
.stat:first-child{ padding-top:0; }
.stat .num{ font-family:'Big Shoulders Display'; font-size:2.4rem; color:var(--amber); }
.stat .label{ color:var(--bone-dim); font-size:0.85rem; max-width:180px; text-align:right; }
@media (max-width:800px){ .about-grid{ grid-template-columns:1fr; gap:48px; } }

/* ---------- WORK / FILM STRIP ---------- */
.work{ background:var(--black); }
.strip{
  display:flex; gap:2px; overflow-x:auto; padding-bottom:20px;
  scroll-snap-type:x mandatory;
  -ms-overflow-style:none; scrollbar-width:none;
}
.strip::-webkit-scrollbar{ display:none; }
.frame{
  position:relative; flex:0 0 auto;
  width:min(72vw, 460px); aspect-ratio:16/10;
  scroll-snap-align:start;
  border:1px solid var(--hair);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:24px;
  overflow:hidden;
}
.frame::before{
  content:''; position:absolute; inset:0; z-index:0;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
  background-size:cover; background-position:center;
}
.frame::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,10,10,0.05) 0%, rgba(10,10,10,0.15) 45%, rgba(10,10,10,0.85) 100%);
}
.frame:hover::before{ transform:scale(1.06); }
.frame-content{ position:relative; z-index:2; }
.frame-tag{ font-size:0.75rem; color:var(--amber); margin-bottom:8px; font-weight:500; }
.frame h3{ font-size:1.8rem; color:var(--bone); font-weight:600; }

.frame.video video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
.frame.photo::before{ background-image:var(--frame-img); }

.frame.has-video{ cursor:pointer; }
.frame.has-video .play-badge{
  position:absolute; top:16px; right:16px; z-index:3;
  width:42px; height:42px; border-radius:50%;
  background:rgba(10,10,10,0.55); border:1px solid rgba(240,237,230,0.35);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(2px);
  transition:transform .3s ease, background .3s ease;
}
.frame.has-video:hover .play-badge{ transform:scale(1.1); background:var(--amber); border-color:var(--amber); }
.frame.has-video .play-badge svg{ width:14px; height:14px; fill:var(--bone); margin-left:2px; }
.frame.has-video:hover .play-badge svg{ fill:var(--black); }

.video-lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(10,10,10,0.92);
  display:none; align-items:center; justify-content:center;
  padding:5vh 4vw;
}
.video-lightbox.open{ display:flex; }
.video-lightbox video{
  max-width:100%; max-height:90vh; width:auto;
  border:1px solid var(--hair);
  background:#000;
}
.video-lightbox-close{
  position:absolute; top:24px; right:24px; z-index:201;
  width:44px; height:44px; border-radius:50%;
  background:rgba(240,237,230,0.08); border:1px solid var(--hair);
  color:var(--bone); font-size:1.3rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.25s;
}
.video-lightbox-close:hover{ background:var(--amber); border-color:var(--amber); color:var(--black); }

.f5.frame{ display:flex; align-items:center; justify-content:center; text-align:left; border-style:dashed; }
.f5 h3{ font-size:1.4rem; }
.f5 p{ color:var(--bone-dim); font-size:0.9rem; margin-top:10px; max-width:26ch; font-weight:300;}

.strip-hint{ margin-top:18px; font-size:0.8rem; color:var(--bone-dim); }

/* ---------- WORK FILTER TOGGLE ---------- */
.filter-bar{
  display:flex; gap:10px; margin-bottom:48px; flex-wrap:wrap;
}
.filter-btn{
  padding:10px 20px; border:1px solid var(--hair); border-radius:2px;
  font-size:0.85rem; color:var(--bone-dim); background:transparent;
  cursor:pointer; transition:color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease; font-family:'Inter';
}
.filter-btn:hover{ color:var(--bone); border-color:var(--bone-dim); transform:translateY(-2px); }
.filter-btn.active{ color:var(--black); background:var(--amber); border-color:var(--amber); font-weight:600; }
.filter-btn.active:hover{ transform:translateY(-2px); }

/* ---------- INDUSTRIES ---------- */
.industries{ background:var(--graphite-2); }
.industry-list{ display:flex; flex-direction:column; }
.industry-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:30px 4px; border-bottom:1px solid var(--hair);
  transition:padding-left .3s ease;
}
.industry-row:hover{ padding-left:16px; }
.industry-row:first-child{ border-top:1px solid var(--hair); }
.industry-name{ font-family:'Big Shoulders Display'; font-size:clamp(1.6rem,4vw,2.6rem); font-weight:600; }
.industry-status{ font-size:0.85rem; color:var(--bone-dim); text-align:right; }
.industry-status.active{ color:var(--amber); }

/* ---------- CONTACT ---------- */
.contact{
  background:var(--black); text-align:center;
  padding:160px 6vw 180px;
}
.contact.photo{
  background-image:
    linear-gradient(180deg, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0.45) 45%, rgba(10,10,10,0.85) 100%),
    var(--contact-img);
  background-size:cover;
  background-position:center 38%;
}
.contact h2{
  font-size:clamp(2.6rem, 9vw, 6.5rem); color:var(--bone); margin-bottom:26px;
}
.contact p{ color:var(--bone-dim); max-width:460px; margin:0 auto 40px; font-weight:300; line-height:1.6;}
.contact-actions{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.btn{
  padding:16px 34px; border-radius:2px; font-size:0.95rem;
  transition:all .3s ease; border:1px solid transparent;
}
.btn-solid{ background:var(--amber); color:var(--black); font-weight:600; }
.btn-solid:hover{ background:#f4b657; transform:translateY(-3px); box-shadow:0 10px 24px rgba(232,163,61,0.25); }
.btn-outline{ border-color:var(--hair); color:var(--bone); }
.btn-outline:hover{ border-color:var(--bone-dim); transform:translateY(-3px); }

footer{
  padding:36px 6vw; display:flex; justify-content:space-between;
  color:var(--bone-dim); font-size:0.8rem; border-top:1px solid var(--hair);
  flex-wrap:wrap; gap:12px;
}

/* ---------- SCROLL REVEALS ---------- */
[data-reveal]{
  opacity:0; transform:translateY(36px);
  transition:opacity 0.9s cubic-bezier(.16,.8,.24,1), transform 0.9s cubic-bezier(.16,.8,.24,1);
  will-change:opacity, transform;
}
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }

[data-reveal="left"]{ transform:translateX(-46px); }
[data-reveal="left"].is-visible{ transform:translateX(0); }

[data-reveal="scale"]{ transform:scale(0.94); }
[data-reveal="scale"].is-visible{ transform:scale(1); }

[data-reveal="line"]{
  overflow:hidden;
}
[data-reveal="line"] .line-inner{
  display:inline-block;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1s cubic-bezier(.16,.8,.24,1);
}
[data-reveal="line"].is-visible .line-inner{ clip-path:inset(0 0 0 0); }

.stat[data-reveal]{ transition-delay:calc(var(--i, 0) * 90ms); }
.frame[data-reveal]{ transition-delay:calc(var(--i, 0) * 110ms); }
.industry-row[data-reveal]{ transition-delay:calc(var(--i, 0) * 90ms); }
.explore-card[data-reveal]{ transition-delay:calc(var(--i, 0) * 90ms); }

/* hero parallax layers */
.hero-inner, .light-streaks{
  transition:transform 0.05s linear;
}

@media (prefers-reduced-motion: reduce){
  .letterbox, .streak, .scroll-cue::after{ animation:none !important; }
  .letterbox.top{ height:13vh; } .letterbox.bottom{ height:13vh; }
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  [data-reveal="line"] .line-inner{ clip-path:none !important; transition:none !important; }
  .hero-inner, .light-streaks{ transform:none !important; }
}

a:focus-visible, .hero-cta:focus-visible, .btn:focus-visible, .filter-btn:focus-visible{
  outline:2px solid var(--amber); outline-offset:3px;
}