/* ============================================================
   VINOVE — Companies Index Page
   VNV-VIS-001 v1.0 · VNV-VOX-001 v4.1

   §0  Header           — dark hero with brand dot strip
   §1  Company sections — alternating 5 companies
   §2  Endorsement      — dark bridge to standard
   §3  CTA              — three-path light close
   ============================================================ */


/* ╔═══════════════════════════════════════════════════════╗
   §0  HEADER
   ╚═══════════════════════════════════════════════════════╝ */

#co-header {
  background: var(--ink);
  padding-top: calc(var(--nav-h) + clamp(4rem, 8vw, 7rem));
  padding-bottom: clamp(4rem, 8vw, 6rem);
  padding-inline: var(--gutter);
  overflow: hidden;
  position: relative;
}

/* ── Hero background image & overlay ── */
.page-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.page-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(160deg, rgba(9,12,21,.9) 0%, rgba(9,12,21,.6) 45%, rgba(9,12,21,.82) 100%),
    linear-gradient(to right, rgba(9,12,21,.6) 0%, transparent 65%);
}

/* Subtle radial glow in background */
#co-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 60% 40%, rgba(200, 85, 61, .07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 2;
}

.co-header-inner {
  max-width: var(--max);
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

.co-header-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 1.75rem;
}

.co-header-eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: var(--terra);
  flex-shrink: 0;
}

.co-header-h1 {
  font-family: var(--font);
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--ink-text-strong);
  max-width: 20ch;
  margin-bottom: 1.75rem;
}

.co-header-h1 em {
  font-style: normal;
  color: var(--terra);
}

.co-header-sub {
  font-family: var(--font);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.65;
  color: var(--ink-text-body);
  max-width: 56ch;
  margin-bottom: 3.5rem;
}

/* ── Brand dot strip ── */
.co-brand-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.5rem;
}

.co-brand-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-text-strong);
  letter-spacing: -.01em;
  transition: color .2s var(--ease);
}

.co-brand-item:hover {
  color: var(--terra);
}

.co-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--r-full);
  flex-shrink: 0;
}

.co-brand-sep {
  width: 1px;
  height: 16px;
  background: var(--ink-border);
}


/* ╔═══════════════════════════════════════════════════════╗
   §1  COMPANY SECTIONS
   ╚═══════════════════════════════════════════════════════╝ */

.co-section {
  padding-block: clamp(5rem, 9vw, 8rem);
  padding-inline: var(--gutter);
}

/* Backgrounds */
.co-section--paper   { background: var(--paper); }
.co-section--dark    { background: var(--ink); }
.co-section--surface { background: var(--surface-2); }
.co-section--deep    { background: #0D1525; }

/* PixelCrayons: cool faint blue-white replaces warm grey surface */
/* Warm #F1F0EF fights electric blue #0400F5 — cool #F3F4FF harmonises */
.co-section--pxl { background: #F3F4FF; }

.co-section--agentra {
  background: #0F1117;
  position: relative;
  overflow: hidden;
}

.co-section--agentra::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 55% at 70% 50%, rgba(225, 29, 116, .12) 0%, transparent 65%),
    radial-gradient(ellipse 35% 40% at 30% 60%, rgba(225, 29, 116, .06) 0%, transparent 60%);
  pointer-events: none;
}

.co-section-inner {
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ── Left: identity column ── */
.co-identity {
  border-left: 6px solid var(--co-color);
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
  transition: transform .3s var(--ease);
}

.co-section:hover .co-identity {
  transform: translateX(3px);
}

.co-category {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--co-color);
  margin-bottom: 1.25rem;
}

.co-name {
  font-family: var(--font);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--co-color);
  margin-bottom: 1rem;
}

.co-tagline {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--co-color);
  opacity: .8;
}

/* Light section: name and labels in brand colour */
.co-section--paper   .co-name,
.co-section--surface .co-name {
  color: var(--co-color);
}

.co-section--paper   .co-category,
.co-section--paper   .co-tagline,
.co-section--surface .co-category,
.co-section--surface .co-tagline {
  color: var(--co-color);
}

/* Dark sections: name always white — brand colour only for accents/bars */
.co-section--dark    .co-name,
.co-section--deep    .co-name,
.co-section--agentra .co-name {
  color: #fff;
}

/* Category/tagline on dark: use brand colour only if it has adequate contrast,
   otherwise fall back to muted white */
.co-section--dark    .co-category,
.co-section--dark    .co-tagline,
.co-section--deep    .co-category,
.co-section--deep    .co-tagline {
  color: var(--co-color);
  /* For dark brand colours on dark bg, boost opacity */
  filter: brightness(1.8) saturate(1.2);
}

/* ── Right: content column ── */
.co-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.co-desc {
  font-family: var(--font);
  font-size: clamp(.9375rem, 1.2vw, 1.0625rem);
  line-height: 1.7;
}

.co-section--paper   .co-desc,
.co-section--surface .co-desc { color: var(--text-body); }

.co-section--dark    .co-desc,
.co-section--deep    .co-desc,
.co-section--agentra .co-desc { color: var(--ink-text-body); }

.co-proof {
  font-family: var(--font);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.5;
  font-style: italic;
}

.co-section--paper   .co-proof,
.co-section--surface .co-proof { color: var(--text-strong); }

.co-section--dark    .co-proof,
.co-section--deep    .co-proof,
.co-section--agentra .co-proof { color: var(--ink-text-strong); }

.co-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: .5rem;
}

/* Primary CTA — brand color fill */
.co-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font);
  font-size: .875rem;
  font-weight: 600;
  padding: .65rem 1.25rem;
  border-radius: var(--r-full);
  background: var(--co-color);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
  white-space: nowrap;
}

.co-btn-primary:hover {
  opacity: .85;
  transform: translateY(-1px);
}

.co-btn-primary svg {
  width: 12px; height: 12px;
  stroke: #fff;
  stroke-width: 2;
  fill: none;
  flex-shrink: 0;
}

/* Secondary link */
.co-btn-learn {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-family: var(--font);
  font-size: .875rem;
  font-weight: 600;
  color: var(--co-color);
  transition: gap var(--dur-base) var(--ease);
}

.co-btn-learn:hover { gap: .625rem; }

.co-btn-learn svg {
  width: 12px; height: 12px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  flex-shrink: 0;
}

/* Light sections: learn more inherits brand color already set above */
.co-section--dark    .co-btn-learn,
.co-section--deep    .co-btn-learn,
.co-section--agentra .co-btn-learn { color: var(--co-color); }


/* ╔═══════════════════════════════════════════════════════╗
   §2  ENDORSEMENT
   ╚═══════════════════════════════════════════════════════╝ */

#co-endorsement {
  background: var(--ink);
  padding-block: clamp(5rem, 9vw, 8rem);
  padding-inline: var(--gutter);
  position: relative;
  overflow: hidden;
}

#co-endorsement::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(200, 85, 61, .06) 0%, transparent 70%);
  pointer-events: none;
}

.co-endorsement-inner {
  max-width: var(--max);
  margin-inline: auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.co-endorsement-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-text-muted);
  margin-bottom: 1.5rem;
}

.co-endorsement-label::before,
.co-endorsement-label::after {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--ink-border);
}

.co-endorsement-quote {
  font-family: var(--font);
  font-size: clamp(1.375rem, 2.8vw, 2rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.025em;
  color: var(--ink-text-strong);
  max-width: 40ch;
  margin-inline: auto;
  margin-bottom: 2.5rem;
}

.co-endorsement-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font);
  font-size: .875rem;
  font-weight: 600;
  color: var(--terra);
  border: 1.5px solid rgba(200, 85, 61, .35);
  border-radius: var(--r-full);
  padding: .65rem 1.5rem;
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), gap var(--dur-base) var(--ease);
}

.co-endorsement-cta:hover {
  background: rgba(200, 85, 61, .08);
  border-color: var(--terra);
  transform: translateY(-1px);
  gap: .75rem;
}

.co-endorsement-cta svg {
  width: 13px; height: 13px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  flex-shrink: 0;
}


/* ╔═══════════════════════════════════════════════════════╗
   §3  CTA
   ╚═══════════════════════════════════════════════════════╝ */

#co-cta {
  background: var(--paper);
  padding-block: clamp(5rem, 9vw, 8rem);
  padding-inline: var(--gutter);
  border-top: 1px solid var(--border-subtle);
}

.co-cta-inner {
  max-width: var(--max);
  margin-inline: auto;
}

.co-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.co-cta-eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: var(--border-strong);
}

.co-cta-heading {
  font-family: var(--font);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text-strong);
  margin-bottom: 3rem;
  max-width: 30ch;
}

.co-cta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.co-cta-card {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .875rem;
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.co-cta-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 4px 20px rgba(14, 19, 32, .07);
  transform: translateY(-2px);
}

.co-cta-card-label {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.co-cta-card-title {
  font-family: var(--font);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text-strong);
}

.co-cta-card-desc {
  font-family: var(--font);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--text-body);
  flex: 1;
}

.co-cta-card-link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-family: var(--font);
  font-size: .875rem;
  font-weight: 600;
  color: var(--terra);
  margin-top: .5rem;
  transition: gap var(--dur-base) var(--ease);
}

.co-cta-card-link:hover { gap: .625rem; }

.co-cta-card-link svg {
  width: 13px; height: 13px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  flex-shrink: 0;
}


/* ╔═══════════════════════════════════════════════════════╗
   RESPONSIVE
   ╚═══════════════════════════════════════════════════════╝ */

@media (max-width: 900px) {
  .co-section-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 640px) {
  .co-brand-strip {
    gap: .5rem 1rem;
  }

  .co-brand-sep { display: none; }

  .co-cta-grid {
    grid-template-columns: 1fr;
  }

  .co-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .co-brand-item {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .co-btn-primary,
  .co-endorsement-cta,
  .co-cta-card,
  .co-btn-learn,
  .co-brand-item,
  .co-identity { transition: none; }

  .co-section:hover .co-identity { transform: none; }
}