/* ============================================================
   PROJECTS
   Dark video hero (projects) — deliberately distinct from the
   cream editorial services hero. Cards share base.css cs-featured.
   ============================================================ */

/* ——— hero shell ——— */
.page-hero--projects{
  background:var(--black);
  color:var(--white);
  padding:112px 0 78px;
  position:relative; overflow:hidden;
}
.page-hero--projects::before{ content:none; }

.hero-video-bg{
  position:absolute; inset:0; z-index:0;
  display:flex; overflow:hidden;
}
.hero-video-bg video{
  width:100%; height:100%; object-fit:cover; display:block;
}
.hero-video-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
}
.page-hero--projects .hero-video-overlay{
  background:
    radial-gradient(760px 340px at 16% -8%, rgba(149,80,201,.35), transparent 58%),
    radial-gradient(560px 300px at 92% 108%, rgba(44,22,166,.5), transparent 55%),
    linear-gradient(90deg, rgba(10,9,16,.88) 0%, rgba(10,9,16,.72) 42%, rgba(10,9,16,.55) 100%);
}
.page-hero--projects .hero-video-overlay::after{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 76px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 76px);
  -webkit-mask-image:radial-gradient(120% 120% at 20% 0%, #000, transparent 72%);
  mask-image:radial-gradient(120% 120% at 20% 0%, #000, transparent 72%);
}

/* ——— left copy ——— */
.page-hero--projects .page-hero-copy{ position:relative; z-index:2; max-width:560px; }
.page-hero--projects .page-hero-copy .eyebrow{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  color:#CFC2FF;
  padding:8px 14px; border-radius:999px;
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.12em;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.page-hero--projects .page-hero-copy .eyebrow::before{ background:#B79EFF; }
.page-hero--projects .page-hero-copy .eyebrow .lucide{ width:14px; height:14px; }
.page-hero--projects .page-hero-copy h1{ letter-spacing:-0.025em; }
.page-hero--projects .page-hero-copy h1 .hl{ color:#A78BFA; }
.page-hero--projects .page-hero-copy p{ color:rgba(255,255,255,.7); }

.page-hero--projects .page-hero-actions .btn-ghost-white{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.28); }
.page-hero--projects .page-hero-actions .btn-ghost-white:hover{ background:rgba(255,255,255,.14); color:var(--white); }

.page-hero--projects .hero-proof{
  display:flex; align-items:center; gap:12px; margin-top:28px;
  font-size:13.5px;
}
.page-hero--projects .hero-proof .avatars{ display:flex; }
.page-hero--projects .hero-proof .avatars span{
  width:32px; height:32px; border-radius:50%;
  border:2.5px solid #1A1526;
  background:linear-gradient(135deg,var(--purple),var(--purple-deep));
  margin-left:-9px; box-shadow:0 6px 14px -6px rgba(0,0,0,.6);
}
.page-hero--projects .hero-proof .avatars span:first-child{ margin-left:0; }
.page-hero--projects .hero-proof .avatars span:nth-child(2){ background:linear-gradient(135deg,#B79EFF,var(--purple-deep)); }
.page-hero--projects .hero-proof .avatars span:nth-child(3){ background:linear-gradient(135deg,var(--purple-deep),#2A1740); }
.page-hero--projects .hero-proof strong{ display:block; color:var(--white); font-weight:600; }
.page-hero--projects .hero-proof small{ color:rgba(255,255,255,.5); }

/* ——— hero image (right panel) ——— */
.page-hero--projects .hero-shot{
  position:relative; z-index:2;
  width:100%; max-width:560px; margin-left:auto;
}
.page-hero--projects .hero-shot img{
  width:100%; aspect-ratio:16/11; min-height:480px; object-fit:cover;
  border-radius:24px; display:block;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8), 0 0 80px -30px rgba(120,80,255,.4);
  filter:saturate(1.05) contrast(1.02);
}
.page-hero--projects .hero-shot-chip{
  position:absolute; bottom:18px; left:18px;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px; border-radius:999px;
  background:rgba(12,10,18,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.16);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.04em;
  color:rgba(255,255,255,.9);
}
.page-hero--projects .hero-shot-chip .lucide{ width:14px; height:14px; color:#B79EFF; }

/* ——— project cards (base cs-featured + polish) ——— */
.cs-featured{ align-items:stretch; gap:48px; margin-bottom:56px; padding-bottom:56px; }
.cs-featured-media{ aspect-ratio:auto; height:100%; min-height:0; }
.cs-featured-media img{ transition:transform .6s ease, filter .6s ease; }
.cs-featured-media:hover img{ transform:scale(1.045); }
.cs-featured-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(10,9,16,.18), transparent 45%);
}
.cs-featured-tag{ box-shadow:0 8px 20px -8px rgba(28,15,107,.6); letter-spacing:.04em; }

/* ——— tighter copy rhythm ——— */
.cs-featured-copy h2{ margin:12px 0 14px; }
.cs-featured-copy p{ font-size:15px; line-height:1.65; margin-bottom:18px; }
.cs-featured-meta{ gap:26px; margin-bottom:18px; }
.cs-featured-meta > div{ min-width:130px; }
.cs-meta-label{ margin-bottom:3px; }

/* ============ RESPONSIVE — PROJECTS ============ */
@media (max-width:1100px){
  .page-hero--projects{ padding:100px 0 64px; }
}
@media (max-width:980px){
  .page-hero--projects .hero-shot{ margin-left:0; max-width:100%; }
}
@media (max-width:768px){
  .page-hero--projects{ padding:96px 0 56px; }
  .page-hero--projects .page-hero-copy{ max-width:100%; }
}
@media (max-width:640px){
  .page-hero--projects{ padding:88px 0 48px; }
  .page-hero--projects .hero-shot img{ aspect-ratio:16/10; min-height:0; }
}