/* ──────────────────────────────────────────────────────────────
   OPERATION US-ONE — page-specific styles
   Extracted from inline <style> block; adds image-capable hero.
────────────────────────────────────────────────────────────── */


/* ── HERO ─────────────────────────────────────────────────── */
.project-hero {
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}

/* Background image — sits at bottom of stack.
   If the src is missing or fails to load, the dark .project-hero
   background shows through and the rest of the decorative layers
   still render correctly. */
.project-hero .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .85;
  z-index: 0;
}

/* Dark gradient concentrated at the bottom where text sits.
   Top of image stays visible; only the text zone darkens. */
.project-hero .hero-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(44,26,14,0) 0%,
    rgba(44,26,14,.1) 45%,
    rgba(44,26,14,.65) 78%,
    rgba(44,26,14,.92) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Content sits above all decorative layers */
.project-hero-content {
  position: relative;
  z-index: 4;
}

/* Hero title teal em */
.project-hero-title em { color: var(--teal-light); }


/* ── STATUS BADGE ROW ─────────────────────────────────────── */
.op-status-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
}
.op-badge {
  font-size: 10px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--teal-light);
  padding: 3px 10px 2px;
  border-radius: 2px;
}
.op-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal-light);
  animation: op-pulse 2.4s ease-out infinite;
  flex-shrink: 0;
}
@keyframes op-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(91,184,168,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(91,184,168,0); }
  100% { box-shadow: 0 0 0 0 rgba(91,184,168,0); }
}
.op-status-label {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal-light);
}


/* ── TECH STACK CARDS ─────────────────────────────────────── */
.tech-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px;
  margin-top: 32px;
}
@media (max-width: 860px) { .tech-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .tech-grid { grid-template-columns: 1fr; } }

.tech-card {
  background: var(--terra-dark);
  border: 1px solid rgba(245,237,228,.07);
  border-radius: 4px;
  padding: 24px 22px;
  position: relative; overflow: hidden;
}
.tech-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--teal-light);
}
.tech-card-label {
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(245,237,228,.3);
  margin-bottom: 10px;
}
.tech-card-name {
  font-family: 'Fraunces', serif; font-size: 18px; font-weight: 800;
  color: var(--cream); margin-bottom: 8px; line-height: 1.1;
}
.tech-card-name em { color: var(--teal-light); font-style: normal; }
.tech-card-desc {
  font-size: 13px; color: rgba(245,237,228,.55); line-height: 1.65;
}


/* ── PIPELINE STEPS ───────────────────────────────────────── */
.pipeline {
  display: flex; flex-direction: column; gap: 0;
  margin-top: 32px;
  background: var(--ink);
  border-radius: 12px;
  padding: 16px 32px;
}
@media (max-width: 540px) {
  .pipeline { padding: 8px 20px; }
}
.pipeline-step {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(245,237,228,.06);
}
.pipeline-step:last-child { border-bottom: none; }
.pipeline-num {
  font-family: 'Fraunces', serif;
  font-size: 36px; font-weight: 900; line-height: 1;
  color: rgba(91,184,168,.2);
  letter-spacing: -.04em;
  flex-shrink: 0; width: 44px; text-align: right;
  padding-top: 2px;
}
.pipeline-title {
  font-size: 14px; font-weight: 700; color: var(--cream);
  letter-spacing: .04em; margin-bottom: 6px;
}
.pipeline-desc {
  font-size: 14px; color: rgba(245,237,228,.55); line-height: 1.65;
}
.pipeline-desc em { color: var(--teal-light); font-style: normal; }


/* ── EXTENSION REPO LINK ────────────────────────────────────── */
.extension-repo-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal-light);
  text-decoration: none;
  padding: 12px 18px;
  border: 1px solid rgba(91,184,168,.35);
  border-radius: 3px;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.extension-repo-link:hover {
  background: rgba(91,184,168,.08);
  border-color: var(--teal-light);
  transform: translateX(2px);
}
.extension-repo-link svg { flex-shrink: 0; }