/* ============================================================
   Mach — Partners Page
   partners.css  v1.0.0

   Depends on software-v2.css (loaded first).
   This file ONLY adds Partners-specific components.
   All design tokens, base styles, nav, hero, stats, manifesto,
   feature grids, cells, why-grid, cta, footer, and modal are
   inherited from software-v2.css unchanged.
   ============================================================ */


/* ============================================================
   HEADING CONTRAST — mirror software-v2.css overrides for
   body.mach-partners-page class
   ============================================================ */
body.mach-partners-page h1,
body.mach-partners-page h2,
body.mach-partners-page h3,
body.mach-partners-page h4,
body.mach-partners-page h5,
body.mach-partners-page h6,
body.mach-partners-page .display,
body.mach-partners-page .cell h3,
body.mach-partners-page .cell.compact h3,
body.mach-partners-page .why h4,
body.mach-partners-page .layer .lhs .ttl,
body.mach-partners-page .stat .num,
body.mach-partners-page .feature h2,
body.mach-partners-page .manifesto h2,
body.mach-partners-page .cta h2,
body.mach-partners-page .section-head h2 {
  color: var(--text);
}

body.mach-partners-page .accent,
body.mach-partners-page .display .accent,
body.mach-partners-page .display .accent-line,
body.mach-partners-page .eyebrow,
body.mach-partners-page .stat .num .unit,
body.mach-partners-page .why .num,
body.mach-partners-page .cell-num,
body.mach-partners-page .layer .lhs .num {
  color: var(--mach);
}

body.mach-partners-page p,
body.mach-partners-page .body-lg,
body.mach-partners-page .body,
body.mach-partners-page .lede,
body.mach-partners-page .cell p,
body.mach-partners-page .cell li,
body.mach-partners-page .why p,
body.mach-partners-page .checks li {
  color: var(--text-2);
}

body.mach-partners-page p strong,
body.mach-partners-page p b,
body.mach-partners-page .checks li b,
body.mach-partners-page .cell li b {
  color: var(--text);
}


/* ============================================================
   HERO — Partners-specific ring decoration
   (stacked behind the orbit blob for additional depth)
   ============================================================ */
.partners-hero-ring {
  position: absolute;
  left: 60%;
  top: -5%;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  border: 1px solid rgba(31, 182, 240, 0.07);
  pointer-events: none;
  z-index: 0;
}

.partners-hero-ring::before {
  content: "";
  position: absolute;
  inset: 60px;
  border-radius: 50%;
  border: 1px solid rgba(31, 182, 240, 0.05);
}

.partners-hero-ring::after {
  content: "";
  position: absolute;
  inset: 140px;
  border-radius: 50%;
  border: 1px solid rgba(31, 182, 240, 0.04);
}


/* ============================================================
   PARTNER TYPE CARDS
   Extends the base .cell style — these are the 3 ecosystem
   type cards in the Ecosystem section. Subtle left-edge
   highlight distinguishes them from technical capability cards.
   ============================================================ */
.cell.partner-type {
  border-left: 2px solid transparent;
  transition:
    background .3s var(--ease),
    border-color .3s var(--ease);
}

.cell.partner-type:hover {
  border-left-color: var(--mach);
}

.cell.partner-type h3 {
  font-size: clamp(22px, 2.2vw, 32px);
}


/* ============================================================
   INDUSTRIES GRID
   3 × 2 cinematic atmospheric cards. Each card has an
   environment-specific gradient accent plus the standard
   dark surface styling.
   ============================================================ */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
}


/* ..............03-06-2026................................. */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  /* background: var(--hairline); */
  /* border: 1px solid var(--hairline); */
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0;
}

.logo-item {
  margin: 0;
  padding: 0;
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  position: relative;
  overflow: hidden;
  transition: background .25s var(--ease);
  border: 2px solid var(--hairline);
  border-style: dashed;
}

.logo-item.logo-item-cta {
  background: transparent;
  /* border: 1px dashed rgba(31, 182, 240, 0.2); */
  background: var(--hairline);
}

/* ..............03-06-2026................................. */



@media (max-width: 1020px) {
  .industries-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .industries-grid {
    grid-template-columns: 1fr;
  }
}

.industry-card {
  background: var(--bg-2);
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: hidden;
  min-height: 280px;
  transition: background .3s var(--ease);
}

/* Atmospheric top glow — unique per industry */
.industry-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60%;
  pointer-events: none;
  transition: opacity .4s var(--ease);
  opacity: 0.6;
}

.industry-card:hover::before {
  opacity: 1;
}

.industry-card:hover {
  background: var(--surface);
}

/* Agriculture — warm amber/green */
.industry-card.agri::before {
  background: radial-gradient(80% 60% at 40% 0%, rgba(180, 160, 60, 0.12), transparent 70%);
}

/* Solar — warm orange */
.industry-card.solar::before {
  background: radial-gradient(80% 60% at 60% 0%, rgba(255, 150, 40, 0.10), transparent 70%);
}

/* Construction — earthy */
.industry-card.construction::before {
  background: radial-gradient(80% 60% at 50% 0%, rgba(200, 110, 40, 0.10), transparent 70%);
}

/* Mining — deep red */
.industry-card.mining::before {
  background: radial-gradient(80% 60% at 40% 0%, rgba(200, 60, 50, 0.10), transparent 70%);
}

/* Turf — cool green */
.industry-card.turf::before {
  background: radial-gradient(80% 60% at 60% 0%, rgba(50, 180, 90, 0.09), transparent 70%);
}

/* Defense — cold slate blue */
.industry-card.defense::before {
  background: radial-gradient(80% 60% at 50% 0%, rgba(50, 90, 180, 0.12), transparent 70%);
}

.industry-icon {
  width: 40px;
  height: 40px;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--mach);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.industry-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  position: relative;
  z-index: 1;
}

.industry-content h3 {
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0;
}

.industry-content p {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.industry-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mach);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
  margin-top: auto;
}

.industry-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mach);
  box-shadow: 0 0 8px var(--mach-glow);
}


/* ============================================================
   FEATURED PARTNERS GRID
   2 × 4 layout on desktop — premium partner cards with
   monogram placeholders, industry tags, and hover glow.
   ============================================================ */
.partners-featured-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
}

@media (max-width: 1200px) {
  .partners-featured-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .partners-featured-grid {
    grid-template-columns: 1fr;
  }
}

.partner-card {
  background: var(--bg);
  padding: clamp(24px, 2.5vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  overflow: hidden;
  min-height: 300px;
  transition: background .3s var(--ease);
}

.partner-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(500px 200px at var(--x, 50%) 0%,
      var(--mach-dim),
      transparent 60%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}

.partner-card:hover {
  background: var(--surface);
}

.partner-card:hover::before {
  opacity: 1;
}

/* Radial follow on hover (JS sets --x) */
.partner-card .partner-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.partner-logo-area {
  width: 52px;
  height: 52px;
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.02);
  flex-shrink: 0;
}

.partner-monogram {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--mach-bright);
}

.partner-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.partner-type-tag,
.partner-industry-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  white-space: nowrap;
}

.partner-type-tag {
  color: var(--mach);
  background: var(--mach-dim);
  border-color: rgba(31, 182, 240, 0.25);
}

.partner-industry-tag {
  color: var(--text-3);
  background: transparent;
}

.partner-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.partner-card-body h3 {
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0;
}

.partner-card-body p {
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0;
}

.partner-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.partner-card-foot .chip {
  font-size: 10.5px;
  padding: 4px 9px;
}


/* ============================================================
   LOGO GRID
   Image-based logo containers. Each cell holds a <figure>
   with an <img> and a text fallback (.logo-fallback) shown
   via onerror when the image file doesn't exist yet.

   Drop logo files to:
     wp-content/themes/mach-io/images/partners/<slug>.png
   Recommended: white/light SVG or PNG, transparent background.
   The cell pads and centers automatically.
   ============================================================ */
/* .logo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0;
} */

@media (max-width: 1020px) {
  .logo-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .logo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Base cell — figure resets */
/* .logo-item {
  margin: 0;
  padding: 0;
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  position: relative;
  overflow: hidden;
  transition: background .25s var(--ease);
} */

.logo-item:hover {
  background: var(--surface);
}

/* The logo image — white/light logos on dark bg */
.logo-item img {
  display: block;
  width: auto;
  height: auto;
  max-width: 65%;
  /* max-height: 44px; */
  object-fit: contain;
  /* Render coloured logos as white */
  filter: brightness(0) invert(1);
  opacity: 0.55;
  transition: opacity .25s var(--ease), filter .25s var(--ease);
}

.logo-item:hover img {
  opacity: 0.85;
}

/* Text fallback — shown via onerror when image is missing */
.logo-fallback {
  display: none;
  /* overridden inline by onerror */
  width: 100%;
  height: 100%;
  min-height: 100px;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-4);
  text-align: center;
  border: 1px dashed var(--hairline-2);
  /* Inset dashed border shows "empty slot" state */
  box-sizing: border-box;
}

/* CTA cell — "Join the ecosystem +" */
/* .logo-item.logo-item-cta {
  background: transparent;
  border: 1px dashed rgba(31, 182, 240, 0.2);
} */

.logo-item.logo-item-cta a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 20px;
  width: 100%;
  height: 100%;
  min-height: 100px;
  color: var(--mach);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  transition: color .25s var(--ease), background .25s var(--ease);
  text-decoration: none;
}

.logo-item.logo-item-cta:hover {
  background: var(--mach-dim);
}

.logo-item.logo-item-cta a svg {
  display: block;
  opacity: 0.7;
}


/* ============================================================
   PROCESS FLOW
   5-step horizontal connected workflow timeline.
   Collapses to a vertical stacked layout on mobile.
   ============================================================ */
.process-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
  margin-top: 16px;
}

@media (max-width: 1020px) {
  .process-flow {
    grid-template-columns: 1fr;
  }
}

.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
}

/* Horizontal connector line (desktop) */
.process-line {
  position: absolute;
  top: 28px;
  left: 50%;
  right: -50%;
  height: 1px;
  background: linear-gradient(90deg, var(--mach), rgba(31, 182, 240, 0.3));
  z-index: 0;
}

@media (max-width: 1020px) {
  .process-line {
    display: none;
  }
}

.process-step.last .process-line {
  display: none;
}

.process-node {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--mach);
  background: var(--bg);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 8px rgba(31, 182, 240, 0.06), 0 0 24px rgba(31, 182, 240, 0.15);
  flex-shrink: 0;
  margin-bottom: 24px;
}

.process-num {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--mach-bright);
}

.process-content {
  padding: 0 clamp(10px, 1.5vw, 20px);
  text-align: center;
}

.process-content h4 {
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 10px;
  line-height: 1;
  color: var(--text);
}

.process-content p {
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0;
}

/* Vertical layout on mobile */
@media (max-width: 1020px) {
  .process-step {
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    padding: 0 0 32px;
    border-left: 1px solid var(--hairline);
    padding-left: 28px;
    margin-left: 27px;
    position: relative;
  }

  .process-step.last {
    border-left-color: transparent;
    padding-bottom: 0;
  }

  .process-node {
    position: absolute;
    left: -29px;
    top: 0;
    margin-bottom: 0;
    width: 56px;
    height: 56px;
  }

  .process-content {
    padding: 0;
    text-align: left;
    padding-top: 14px;
  }
}


/* ============================================================
   SOFTWARE CROSSLINK SECTION
   Split layout: messaging left, architecture stack mini-view right.
   ============================================================ */
.software-crosslink {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  padding: clamp(48px, 6vw, 80px) clamp(40px, 5vw, 72px);
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  position: relative;
  overflow: hidden;
}

.software-crosslink::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 50% at 0% 50%,
      rgba(31, 182, 240, 0.06),
      transparent 60%);
  pointer-events: none;
}

.software-crosslink-meta {
  position: relative;
  z-index: 1;
}

.software-crosslink-visual {
  position: relative;
  z-index: 1;
}

/* Scale down the arch-stack slightly for the crosslink context */
.software-crosslink-visual .arch-stack {
  gap: 8px;
}

.software-crosslink-visual .layer {
  grid-template-columns: 160px 1fr;
}

.software-crosslink-visual .layer .lhs {
  padding: 14px 16px;
}

.software-crosslink-visual .layer .lhs .ttl {
  font-size: 16px;
}

.software-crosslink-visual .layer .rhs {
  padding: 14px 16px;
}

@media (max-width: 1020px) {
  .software-crosslink {
    grid-template-columns: 1fr;
  }

  .software-crosslink-visual {
    display: none;
  }
}


/* ============================================================
   RESPONSIVE TUNING — Partners-specific breakpoints
   ============================================================ */
@media (max-width: 880px) {

  /* Process flow node size */
  .process-node {
    width: 46px;
    height: 46px;
  }

  /* Partner card grids already handled above */
}

@media (max-width: 640px) {
  .logo-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .partner-card {
    min-height: auto;
  }

  .process-content {
    padding-top: 10px;
  }
}

@media (max-width: 375px) {
  .mono {
    font-size: 11px;
  }
}


/* 17-06-2026 */

:root {

  --gutter: clamp(20px, 4vw, 48px);
  --display: 'Bebas Neue', Impact, sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', monospace;
  --mach: #1fb6f0;


}

.quote-strip {
  background: #0d1420;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: clamp(40px, 5vw, 64px) 0;
}

.quote-strip-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.qs-quote {
  font-family: var(--display);
  font-size: clamp(22px, 2.8vw, 38px);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 24px;
}

.qs-quote .qs-accent {
  color: var(--mach);
}

.qs-attribution {
  display: flex;
  align-items: center;
  gap: 16px;
}

.qs-rule {
  width: 32px;
  height: 1px;
  background: var(--mach);
  opacity: .7;
  flex-shrink: 0;
}

.qs-source {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ///////////////////////////////// */
/* ── DEPLOYMENT SHOWCASE ── */
.deployments {
  padding-top: var(--sy);
  padding-bottom: var(--sy);
  background: var(--bg-2);
  border-bottom: 1px solid var(--hairline);
}

/* header */
.dep-header {
  margin-bottom: clamp(32px, 4vw, 48px);
}

.dep-header h2 {
  margin: 12px 0 16px;
}

.dep-header p {
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--text-2);
  line-height: 1.75;
  max-width: 68ch;
}

/* card grid */
.dep-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.dep-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
  position: relative;
}

.dep-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--mach);
  opacity: 0;
  transition: opacity .3s var(--ease);
  z-index: 2;
}

.dep-card:hover {
  border-color: rgba(31, 182, 240, .4);
  transform: translateY(-4px);
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, .6), 0 0 0 1px rgba(31, 182, 240, .15), 0 0 40px -8px rgba(31, 182, 240, .08);
}

.dep-card:hover::before {
  opacity: 1;
}

/* video — increased to ~56% of card height via aspect-ratio */
.dep-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  /* taller than 16/9 — increases video share */
  overflow: hidden;
  background: var(--bg);
  cursor: pointer;
  display: block;
  flex-shrink: 0;
}

.dep-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease), filter .5s var(--ease);
  filter: brightness(.82) saturate(.9);
}

.dep-card:hover .dep-thumb img {
  transform: scale(1.05);
  filter: brightness(.68) saturate(.85);
}

/* gradient: heavier at bottom-left for logo legibility */
.dep-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(4, 7, 13, .0) 35%, rgba(4, 7, 13, .7) 100%),
    linear-gradient(to right, rgba(4, 7, 13, .5) 0%, transparent 50%);
}

/* partner logo overlay — top-left corner of video */
.dep-logo-overlay {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(4, 7, 13, .78);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 6px;
  padding: 7px 11px;
}

.dep-logo-initials {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--mach);
  line-height: 1;
}

.dep-logo-name {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* play button */
.dep-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(31, 182, 240, .9);
  border: 2px solid rgba(31, 182, 240, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s var(--ease), background .2s, box-shadow .2s;
  z-index: 1;
  pointer-events: none;
}

.dep-play svg {
  width: 20px;
  height: 20px;
  fill: #021019;
  margin-left: 4px;
}

.dep-thumb:hover .dep-play {
  transform: translate(-50%, -50%) scale(1.12);
  background: var(--mach-bright);
  box-shadow: 0 0 0 8px rgba(31, 182, 240, .15);
}

/* duration badge */
.dep-duration {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--text);
  background: rgba(4, 7, 13, .85);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 3px;
  padding: 3px 7px;
}

/* card body */
.dep-body {
  padding: 20px 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

/* headline — slightly larger */
.dep-headline {
  font-family: var(--display);
  font-size: clamp(18px, 1.8vw, 24px);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.05;
  margin: 0;
}

/* description */
.dep-desc {
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.65;
  flex: 1;
  margin: 0;
}

/* proof tags — distinct from product tags */
.dep-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.dep-tag {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--hairline-2);
  border-radius: 2px;
  padding: 3px 7px;
}

/* CTA row */
.dep-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-top: 1px solid var(--hairline);
  transition: background .2s;
}

.dep-card:hover .dep-cta {
  background: rgba(31, 182, 240, .03);
}

.dep-story-link {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mach);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: gap .2s;
  text-decoration: none;
}

.dep-card:hover .dep-story-link {
  gap: 12px;
}

.dep-story-link svg {
  width: 12px;
  height: 12px;
  stroke: var(--mach);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

/* deployment status badge — operational semantics */
.dep-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 3px 8px;
}

.dep-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: depPulse 2.4s ease-in-out infinite;
}

@keyframes depPulse {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .3
  }
}

.dep-status.green {
  color: #22c55e;
  background: rgba(34, 197, 94, .08);
  border: 1px solid rgba(34, 197, 94, .2);
}

.dep-status.green .dep-status-dot {
  background: #22c55e;
}

.dep-status.blue {
  color: var(--mach);
  background: var(--mach-dim);
  border: 1px solid rgba(31, 182, 240, .2);
}

.dep-status.blue .dep-status-dot {
  background: var(--mach);
}

/* youtube modal */
.yt-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(4, 7, 13, .92);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}

.yt-modal.open {
  display: flex;
}

.yt-modal-inner {
  position: relative;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16/9;
}

.yt-modal-inner iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
}

.yt-close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--elevated);
  border: 1px solid var(--hairline-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .2s;
}

.yt-close:hover {
  border-color: var(--hairline-strong);
}

.yt-close svg {
  width: 14px;
  height: 14px;
  stroke: var(--text-2);
  fill: none;
  stroke-width: 2;
}