/* ==========================================================================
   Page-specific styles
   ========================================================================== */

/* ---- HERO (index) ---- */
.hero{
  min-height: calc(100vh - var(--nav-h));
  display:flex; flex-direction:column; justify-content:center;
  padding: 60px 0 80px;
  position: relative;
  border-bottom: 1px solid var(--border);
}
.hero-status{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-bottom: 34px;
}
.hero-status .tc{
  font-family: var(--font-mono); font-size: 13px; color: var(--text-muted);
  letter-spacing: 0.06em;
}
.hero-status .tc b{ color: var(--text); font-weight:500; }
.hero-status .rec{
  display:flex; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
  color: var(--tally); text-transform:uppercase;
}
.hero h1{
  font-size: clamp(44px, 7.4vw, 96px);
  max-width: 15ch;
}
.hero h1 .accent{ color: var(--tally); }
.hero-sub{
  margin-top: 26px;
  max-width: 620px;
  font-size: 18px;
  color: var(--text-muted);
}
.hero-sub b{ color: var(--text); font-weight:600; }
.hero-actions{ display:flex; gap:16px; margin-top: 40px; flex-wrap:wrap; }

.hero-tags{
  display:flex; gap:10px; flex-wrap:wrap; margin-top: 56px;
}
.hero-tags span{
  font-family: var(--font-mono); font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color: var(--text-faint);
  border:1px solid var(--border); padding: 6px 12px; border-radius: 2px;
}

/* ---- featured strip (index) ---- */
.featured-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
@media (max-width: 900px){ .featured-grid{ grid-template-columns: 1fr; } }

.work-card{
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow:hidden;
  background: var(--bg-elevated);
  transition: border-color .18s ease, transform .18s ease;
  cursor:pointer;
}
.work-card:hover{ border-color: var(--border-strong); transform: translateY(-3px); }
.work-thumb{
  position:relative; aspect-ratio: 16/10; background: var(--bg-elevated-2);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.work-thumb img{ width:100%; height:100%; object-fit:cover; }
.work-thumb .play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, rgba(26,26,26,0) 40%, rgba(26,26,26,0.75) 100%);
}
.play-icon{
  width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(245,245,240,0.35);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(4px);
  transition: border-color .15s ease, background .15s ease;
}
.work-card:hover .play-icon{ border-color: var(--tally); background: var(--tally-dim); }
.play-icon::after{
  content:''; width:0; height:0;
  border-top:8px solid transparent; border-bottom:8px solid transparent;
  border-left: 13px solid var(--text); margin-left:3px;
}
.work-thumb.is-photo .play{ display:none; }
.photo-badge{
  position:absolute; bottom:12px; right:12px;
  font-family: var(--font-mono); font-size:10px; letter-spacing:0.1em;
  text-transform:uppercase; color: var(--text-muted);
  background: rgba(26,26,26,0.7); border:1px solid var(--border-strong);
  padding: 5px 9px; border-radius: 2px;
}
.work-cat{
  position:absolute; top:12px; left:12px;
  font-family: var(--font-mono); font-size:10px; letter-spacing:0.1em;
  text-transform:uppercase; color: var(--text);
  background: rgba(26,26,26,0.7); border:1px solid var(--border-strong);
  padding: 5px 9px; border-radius: 2px;
}
.work-info{ padding: 18px 20px 22px; }
.work-info h3{ font-size:22px; font-family:var(--font-display); font-weight:400; }
.work-info p{ font-family: var(--font-mono); font-size:12px; color:var(--text-faint); margin-top:6px; letter-spacing:0.04em; }

.section-cta{ margin-top: 44px; }

/* ---- capabilities strip (index) ---- */
.cap-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap:1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.cap-item{ background: var(--bg); padding: 30px 26px; }
.cap-item .num{ font-family: var(--font-mono); font-size:12px; color: var(--tally); }
.cap-item h3{ font-size:22px; margin-top:14px; font-family:var(--font-display); font-weight:400; }
.cap-item p{ color:var(--text-muted); font-size:14px; margin-top:10px; }
@media (max-width: 900px){ .cap-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .cap-grid{ grid-template-columns: 1fr; } }

/* ---- PORTFOLIO page ---- */
.page-header{
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--border);
}
.page-header h1{ font-size: clamp(38px,6vw,64px); margin-top:10px; }
.page-header p{ color: var(--text-muted); margin-top:16px; max-width:560px; }

.switcher{
  display:flex; gap:10px; flex-wrap:wrap;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
}
.switcher-btn{
  font-family: var(--font-mono); font-size:12px; letter-spacing:0.06em;
  text-transform:uppercase;
  border: 1px solid var(--border-strong);
  background: transparent; color: var(--text-muted);
  padding: 10px 16px; border-radius: 3px;
  display:flex; align-items:center; gap:8px;
  transition: all .15s ease;
}
.switcher-btn .chan{ color: var(--text-faint); }
.switcher-btn:hover{ color: var(--text); border-color: var(--text-muted); }
.switcher-btn.active{
  color: #fff; border-color: var(--tally); background: var(--tally-dim);
}
.switcher-btn.active .chan{ color: var(--tally); }

.portfolio-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap:24px;
  padding: 44px 0 20px;
}
@media (max-width: 980px){ .portfolio-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .portfolio-grid{ grid-template-columns: 1fr; } }
.work-card.hidden{ display:none; }

/* ---- video modal ---- */
.modal-overlay{
  position:fixed; inset:0; background: rgba(14,14,14,0.94);
  display:flex; align-items:center; justify-content:center;
  z-index: 200; padding: 24px;
  opacity:0; pointer-events:none; transition: opacity .18s ease;
}
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal-box{ width:100%; max-width: 960px; }
.modal-frame{ position:relative; width:100%; aspect-ratio:16/9; background:#000; }
.modal-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.modal-close{
  display:flex; justify-content:flex-end; margin-bottom:12px;
  font-family: var(--font-mono); font-size:12px; letter-spacing:0.08em;
  text-transform:uppercase; color: var(--text-muted);
  background:none; border:none;
}
.modal-close:hover{ color: var(--tally); }

/* ---- ABOUT page ---- */
.about-hero{ padding: 56px 0 20px; border-bottom:1px solid var(--border); }
.about-hero h1{ font-size: clamp(38px,6vw,64px); margin-top:10px; max-width:14ch; }
.about-grid{
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px;
  padding: 72px 0;
}
@media (max-width: 900px){ .about-grid{ grid-template-columns:1fr; gap:40px; } }
.about-copy p{ color: var(--text-muted); font-size:16px; margin-bottom:20px; }
.about-copy p b{ color: var(--text); font-weight:600; }
.about-stats{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--border); }
.stat-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding: 22px 0; border-bottom:1px solid var(--border);
}
.stat-row .label{ font-family:var(--font-mono); font-size:12px; color:var(--text-muted); letter-spacing:0.06em; text-transform:uppercase; }
.stat-row .value{ font-family: var(--font-display); font-size:30px; }

.gear-section{ padding: 20px 0 90px; border-top:1px solid var(--border); }
.gear-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border); border:1px solid var(--border); margin-top:36px; }
@media (max-width:860px){ .gear-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .gear-grid{ grid-template-columns: 1fr; } }
.gear-item{ background: var(--bg); padding: 24px 22px; }
.gear-item .cat{ font-family:var(--font-mono); font-size:10px; color:var(--tally); letter-spacing:0.1em; text-transform:uppercase; }
.gear-item .name{ font-size:15px; margin-top:10px; color:var(--text); }

/* ---- CONTACT page ---- */
.contact-wrap{ padding: 70px 0 110px; display:grid; grid-template-columns: 1fr 1fr; gap:64px; }
@media (max-width:900px){ .contact-wrap{ grid-template-columns:1fr; gap:44px; } }
.contact-copy h1{ font-size: clamp(38px,5.6vw,58px); margin-top:10px; }
.contact-copy p{ color:var(--text-muted); margin-top:20px; max-width:46ch; }
.contact-channels{ margin-top:40px; display:flex; flex-direction:column; gap:0; }
.channel{
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 0; border-top:1px solid var(--border);
}
.contact-channels .channel:last-child{ border-bottom:1px solid var(--border); }
.channel .ch-name{ font-family:var(--font-mono); font-size:12px; color:var(--text-muted); letter-spacing:0.08em; text-transform:uppercase; }
.channel .ch-value{ font-size:17px; margin-top:4px; }
.channel-arrow{ font-family: var(--font-mono); color: var(--text-faint); transition: color .15s ease, transform .15s ease; }
.channel:hover .channel-arrow{ color: var(--tally); transform: translateX(3px); }

.contact-panel{
  border:1px solid var(--border); border-radius:4px; background: var(--bg-elevated);
  padding: 34px; align-self:start;
}
.contact-panel .eyebrow{ margin-bottom:18px; }
.availability{
  display:flex; align-items:center; gap:9px; margin-top:6px;
}
.availability .dot{ width:7px; height:7px; border-radius:50%; background: var(--signal); box-shadow:0 0 0 0 rgba(62,207,106,0.5); animation: pulse-g 2s ease-in-out infinite; }
@keyframes pulse-g{ 0%{ box-shadow:0 0 0 0 rgba(62,207,106,0.45);} 70%{ box-shadow:0 0 0 6px rgba(62,207,106,0);} 100%{ box-shadow:0 0 0 0 rgba(62,207,106,0);} }
.availability span{ font-family:var(--font-mono); font-size:12px; color:var(--signal); letter-spacing:0.06em; text-transform:uppercase; }
.contact-panel .service-list{ margin-top:24px; }
.contact-panel .service-list li{
  font-size:14px; color:var(--text-muted); padding:10px 0; border-top:1px solid var(--border);
  display:flex; gap:10px; align-items:baseline;
}
.contact-panel .service-list li::before{ content:'—'; color: var(--tally); }
.contact-panel .btn{ width:100%; justify-content:center; margin-top:26px; }