/* =========================
   RESET + VARIABLES
========================= */
*{ box-sizing:border-box; margin:0; padding:0; }

:root{
  --bg:#000;
  --text:#fff;
  --muted:#aaa;
  --rule:#222;

  --canvas-max:1480px;
}

html, body{ height:100%; }

body{
  font-family: Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.35;
}

a{ color: var(--muted); text-decoration:none; }
a:hover{ color: var(--text); }

/* =========================
   HEADER
========================= */
.site-header{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px 40px;
  border-bottom:1px solid var(--rule);
  overflow:hidden;
}

.site-header::after{
  content:"";
  position:absolute;
  left:-10%;
  right:-10%;
  bottom:-40px;
  height:120px;
  background: radial-gradient(
    ellipse at bottom,
    rgba(255,255,255,.12) 0%,
    rgba(255,255,255,.06) 30%,
    rgba(255,255,255,.02) 50%,
    rgba(255,255,255,0) 70%
  );
  filter: blur(18px);
  pointer-events:none;
}

.site-title{
  font-size:16px;
  font-weight:600;
  letter-spacing:.01em;
  z-index:1;
}

.site-nav a{
  font-size:14px;
  letter-spacing: 2px;
  font-weight: bold; 
  color: var(--text);
  margin-left:22px;
  z-index:1;
}


/* =========================
   FILTER NAV (CATEGORY SCROLLER)
========================= */
.filter-bar{
  padding:10px 40px 6px;
}

.filter-nav{
  display:flex;
  align-items:flex-end;
  gap:18px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  white-space:nowrap;
  scrollbar-width:none; /* Firefox */
}

.filter-nav::-webkit-scrollbar{ display:none; } /* Chrome/Safari */

.filter-nav a{
  font-size:12px;
  letter-spacing:.02em;
  padding-bottom:6px;
  border-bottom:2px solid transparent;
  color:var(--muted);
  flex:0 0 auto;
}

.filter-nav a:hover{ color:var(--text); }

.filter-nav a.is-active{
  color:var(--text);
  border-bottom-color: var(--text);
}

@media (max-width: 900px){
  .filter-bar{ padding-left:20px; padding-right:20px; }
}

@media (max-width: 600px){
  .filter-bar{ padding-left:16px; padding-right:16px; padding-top:8px; }
  .filter-nav{ gap:14px; }
  .filter-nav a{ font-size:12px; }
}

/* =========================
   FOOTER
========================= */
.site-footer{
  border-top:1px solid var(--rule);
  padding:28px 40px;
  color:var(--muted);
  font-size:13px;
}

.footer-inner{
  display:flex;
  justify-content:center;
  text-align:center;
  width:100%;
  letter-spacing:0;
  font-kerning:normal;
}

/* =========================
   PAGE
========================= */
.projects{ padding:32px 40px 56px; }
.project{ margin-bottom:64px; }

.project-canvas{
  width:min(var(--canvas-max), 100%);
  margin:0 auto;
}

/* =========================
   TOPBAR
========================= */
.project-topbar{
  display:grid;
  grid-template-columns: 1.15fr 1.85fr;
  gap:18px;
  padding:18px 0 12px;
  border-bottom:1px solid var(--rule);
  margin-bottom:18px;
}

.topbar-item{
  font-size:14px;
  color:var(--muted);
  padding-bottom:6px;
  border-bottom:2px solid #fff;
  width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =========================
   16:9 WRAPPER
========================= */
.ratio-16x9{
  position:relative;
  width:100%;
  border:0;
  background:#000;
}

.ratio-16x9::before{
  content:"";
  display:block;
  padding-top:56.25%;
}

.ratio-16x9__inner{
  position:absolute;
  inset:0;
}

/* =========================
   GRID (LOCKED LAYOUT)
========================= */
.project-grid{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns: 2.5fr 1fr;
  gap:20px;

  /* forces both columns to share the same height */
  align-items:stretch;

  min-width:0;
  min-height:0;
}

.project-grid > *{
  min-width:0;
  min-height:0;
}

/* =========================
   LEFT BACKGROUND PANEL
========================= */
.project-left{
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;

  background-image:var(--bgimg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  overflow:hidden;
  border:0;
}

/* =========================
   VIDEO
========================= */
.video-frame{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.video-box{
  width:min(92%, 1220px);
  aspect-ratio:16/9;
  background:rgba(17,17,17,.85);
  box-shadow:0 10px 30px rgba(0,0,0,.55);
  position:relative;
  overflow:hidden;
  border:0;
}

/* Video.js fill */
.video-box .video-js{
  width:100% !important;
  height:100% !important;
}
.video-box .video-js .vjs-tech{
  width:100% !important;
  height:100% !important;
  object-fit:cover;
}

/* Poster placeholder */
.video-box.video-placeholder{
  position:relative;
  display:block;
  cursor:pointer;
  padding:0;
  border:0;
  background:rgba(17,17,17,.85);
}

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

/* Play overlay */
.video-box.video-placeholder .play-btn{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:3;
}

.video-box.video-placeholder .play-btn span{
  position:relative;
  width:72px;
  height:72px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.85);
  background:rgba(0,0,0,.35);
  box-shadow:0 8px 22px rgba(0,0,0,.45);
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}

.video-box.video-placeholder .play-btn span::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-35%, -50%);
  width:0;
  height:0;
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  border-left:18px solid rgba(255,255,255,.95);
}

.video-box.video-placeholder:hover .play-btn span{
  transform:scale(1.04);
  background:rgba(0,0,0,.45);
  border-color:rgba(255,255,255,1);
}

/* =========================
   RIGHT STACK — ALWAYS FILLS FULL HEIGHT
   (3 equal rows, full vertical height, aligned to left panel)
========================= */
.project-right{
  height:100%;
  width:100%;
  min-width:0;
  min-height:0;

  display:grid;
  gap:12px;

  /* 3 equal rows that MUST fill the full height */
  grid-template-rows: repeat(3, minmax(0, 1fr));

  align-content:stretch;
  justify-content:stretch;

  overflow:hidden;
}

.project-right img{
  width:100%;
  height:100%;
  display:block;

  /* fills each box completely */
  object-fit:cover;

  background:var(--panel);

  /* no visual chrome */
  border:0;
  outline:0;
  box-shadow:none;
}

/* =========================
   SINGLE IMAGE SECTION
========================= */
.project-single{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  background:var(--panel);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px){
  .site-header, .projects, .site-footer{
    padding-left:20px;
    padding-right:20px;
  }

  .project-grid{ gap:14px; }
  .video-frame{ padding:16px; }

  .project-right{ gap:10px; }
  .project-right{ grid-template-rows: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px){
  .site-header{ padding:16px; }
  .projects{ padding:18px 16px 44px; }
  .site-footer{ padding:20px 16px; }

  .topbar-item{ font-size:13px; }

  .project-topbar{
    gap:14px;
    margin-bottom:14px;
  }

  .project-grid{ gap:12px; }
  .video-frame{ padding:14px; }

  .project-right{ gap:10px; }
  .project-right{ grid-template-rows: repeat(3, minmax(0, 1fr)); }

  /* smaller gaps between projects on mobile */
  .projects{ padding-bottom: 24px !important; }
  .project{ margin-bottom: 22px !important; }

  .video-box.video-placeholder .play-btn span{
    width:64px;
    height:64px;
  }
  .video-box.video-placeholder .play-btn span::after{
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:16px;
  }
}

/* Ensure fullscreen button is visible on mobile */
.video-js .vjs-fullscreen-control{
  display:flex !important;
}

/* Remove captions/subtitles buttons entirely */
.video-js .vjs-subs-caps-button,
.video-js .vjs-captions-button{
  display:none !important;
}

/* =========================
   CONTACT FORM MODAL (FORMSPREE)
========================= */

.modal-form{ display:none; }
.modal-form.is-open{ display:block; }

.modal-form-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.85);
  z-index: 2000;
}

.modal-form-card{
  position:fixed;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 32px));
  background: #0b0b0b;
  border: 1px solid var(--rule);
  padding: 28px;
  z-index: 2001;
}

.modal-form-title{
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.modal-form-close{
  position:absolute;
  top:12px;
  right:14px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.modal-form-close:hover{ color: var(--text); }

.modal-form-card input,
.modal-form-card textarea{
  width:100%;
  background:#000;
  border:1px solid var(--rule);
  color:var(--text);
  padding:14px;
  margin-bottom:14px;
  font-family:inherit;
  font-size:14px;
}

.modal-form-card input:focus,
.modal-form-card textarea:focus{
  outline:none;
  border-color:#444;
}

.modal-form-card textarea{
  min-height:140px;
  resize:vertical;
}

.modal-form-card button[type="submit"]{
  width:100%;
  padding:14px;
  background: var(--text);
  color:#000;
  border:0;
  cursor:pointer;
  font-size:13px;
  letter-spacing:1px;
}

.modal-form-card button[type="submit"]:hover{ filter: brightness(0.9); }

.modal-form-card button[type="submit"]:disabled{
  opacity:0.65;
  cursor:default;
}

.form-status{
  margin-top:10px;
  font-size:13px;
  color: var(--muted);
}

.hp{ display:none !important; }


/* =========================
   FIXED HEADER + FIXED FILTER BAR
   (Overrides only — keeps all other layout/styles intact)
========================= */

:root{
  --header-h:84px;
  /* Slightly generous to avoid content hiding under the fixed bar */
  --filter-h:54px;
}

/* Header stays fixed (as before) */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:3000;
  background: var(--bg);

  /* lock height so spacing stays consistent */
  height:var(--header-h);

  /* replace vertical padding with fixed height */
  padding:0 40px;
}

/* Filter bar also fixed, directly below header */
.filter-bar{
  position:fixed;
  top:var(--header-h);
  left:0;
  right:0;
  z-index:2999;
  background: var(--bg);
  border-bottom:1px solid var(--rule);

  /* keep your existing internal padding/spacing */
  padding:10px 40px 6px;
  margin-top:0; /* override the old margin-top hack */
}

/* Push ONLY the main content down so nothing sits under the fixed bars */
.projects{
  padding-top: calc(32px + var(--header-h) + var(--filter-h));
}

/* Responsive */
@media (max-width: 900px){
  .site-header{ padding:0 20px; }
  .filter-bar{ padding:10px 20px 6px; }
}

@media (max-width: 600px){
  :root{
    --header-h:72px;
    --filter-h:50px;
  }
  .site-header{ padding:0 16px; }
  .filter-bar{
    padding:8px 16px 6px;
  }
}

/* Auto height for contain-based single images */
.ratio-16x9.ratio-auto{
  position:relative;
}

.ratio-16x9.ratio-auto::before{
  display:none; /* remove forced 16:9 height */
}

.ratio-16x9.ratio-auto .ratio-16x9__inner{
  position:relative;
  inset:auto;
}

.ratio-16x9.ratio-auto .project-single{
  position:relative;
  width:100%;
  height:auto;
  object-fit:contain;
}


/* ABOUT PAGE: stack the 2-column about block on smaller screens */
@media (max-width: 900px){
  .about-grid{
    grid-template-columns: 1fr !important;
  }
  .about-grid > div:last-child{
    min-height: 420px;
  }
}

@media (max-width: 600px){
  .about-grid > div:last-child{
    min-height: 360px;
  }
}

/* =========================
   SINGLE IMAGES: AUTO HEIGHT FOR object-fit: contain
   Removes forced 16:9 box to avoid top/bottom gaps.
========================= */
.ratio-16x9.ratio-auto::before{
  display:none;
}

.ratio-16x9.ratio-auto .ratio-16x9__inner{
  position:relative;
  inset:auto;
}

.ratio-16x9.ratio-auto .project-single{
  position:relative;
  inset:auto;
  height:auto;
  object-fit:contain;
}