/* ═══════════════════════════════════════════════════════════════════
   site.css
   Page-specific styles for all site pages.
   Requires: base-2.css (loaded first in every HTML <head>)

   SECTION ORDER
   ─────────────────────────────────────────────────────────────────
   INDEX — Section 1   .s1, cards, tagline, powered-by
   INDEX — Section 2   .s2, diagram, action bar
   PARTNERS            .partners-page, partner cards, convergence
   DOCS                .docs-page, split card, poster lines
   ENGINUITY           .eng-page, hero image, video, caption
   ABOUT ENGINUITY     .about-page, split panel, pillars, mission

   TOKEN COMPLIANCE
   ─────────────────────────────────────────────────────────────────
   All values reference tokens.css / base-2.css tokens via var(--...).
   OPT-1: No raw rgba(61,139,212,…) — use --accent-* aliases.
   OPT-2: No hard-coded z-index — use --z-* tokens.
   OPT-3: No hard-coded transition durations — use --duration-* tokens.
   OPT-4: Page-local tokens use --page-* prefix, scoped to page
          wrapper selectors and defined at top of each section.
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   ─── INDEX — Section 1 ───
   Source: section1.css
   Page wrapper: <section class="s1">
   ═══════════════════════════════════════════════════════════════════ */

/* ── OPT-4: Page-local tokens — Index S1 ──────────────────────────
   Scoped to .s1. Card overlay gradient colors are art-direction
   values — documented exceptions per brief pattern from partners.css.
   ─────────────────────────────────────────────────────────────────── */
.s1 {
  --page-card-overlay-from: rgba(20, 30, 48, 0.88);
  --page-card-overlay-mid:  rgba(20, 30, 48, 0.30);
  --page-card-shadow-c1:    rgba(61, 139, 212, 0.32);  /* art-direction: card glow blue   */
  --page-card-shadow-c2:    rgba(91, 163, 224, 0.32);  /* art-direction: card glow c2     */
  --page-card-shadow-c3:    rgba(46, 170, 160, 0.32);  /* art-direction: card glow teal   */
  --page-card-shadow-c4:    rgba(139, 92, 246, 0.32);  /* art-direction: card glow purple */
}

/* Section wrapper */
.s1 {
  position:        relative;
  min-height:      100vh;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         calc(var(--nav-height) + var(--space-12xl)) var(--space-13xl) 72px;
  gap:             56px;
  z-index:         var(--z-base); /* OPT-2 */
}

/* Header block */
.s1 header {
  text-align: center;
  animation:  fadeUp var(--anim-enter-base) ease both;
}

/* Hero h1 — delegates to base-2.css h1 type rule; scoped overrides only */
.s1 h1 {
  font-size:      var(--fs-h1);
  font-weight:    var(--fw-light);
  font-family:    var(--font-sans);
  color:          var(--navy);
  line-height:    var(--leading-snug);
  letter-spacing: var(--tracking-tightest);
}

.s1 h1 strong {
  font-weight: var(--fw-bold);
}

/* Subtitle */
.sub {
  font-size:   var(--fs-sub);
  font-weight: var(--fw-regular);
  color:       var(--muted);
  line-height: var(--leading-xl);
  margin-top:  var(--space-2xl);
}


/* ── Card Grid ──────────────────────────────────────────────────── */
.grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--space-3xl);
  width:                 100%;
  max-width:             1080px;
}


/* ── Card Anatomy ───────────────────────────────────────────────── */
.card {
  position:        relative;
  border-radius:   var(--radius);
  overflow:        hidden;
  display:         block;
  text-decoration: none;
  aspect-ratio:    3 / 4;
  border:          1.5px solid var(--border);
  background:      var(--color-card-bg);
  box-shadow:      var(--shadow);
  transition:
    border-color var(--duration-3xslow) ease,                              /* OPT-3 */
    transform    var(--duration-4xslow) cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow   var(--duration-3xslow) ease;
}

/* Staggered entrance animations */
.card:nth-child(1) { animation: fadeUp var(--anim-enter-base) 0.05s ease both; }
.card:nth-child(2) { animation: fadeUp var(--anim-enter-base) 0.12s ease both; }
.card:nth-child(3) { animation: fadeUp var(--anim-enter-base) 0.19s ease both; }
.card:nth-child(4) { animation: fadeUp var(--anim-enter-base) 0.26s ease both; }

/* Card image */
.card-img {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center top;
  display:         block;
  filter:          brightness(0.97) saturate(0.96);
  transition:
    transform var(--duration-4xslow) ease,   /* OPT-3 */
    filter    var(--duration-3xslow) ease;
}

.card:hover .card-img {
  transform: scale(1.06);
  filter:    brightness(1) saturate(1.04);
}

/* Top shine bar — per-card accent colour set in hover states below */
.shine {
  position:      absolute;
  top:           0;
  left:          0;
  right:         0;
  height:        3px;
  border-radius: var(--radius) var(--radius) 0 0;
  opacity:       0;
  transition:    opacity var(--duration-3xslow); /* OPT-3 */
  z-index:       var(--z-base); /* OPT-2 */
}

.card:hover .shine {
  opacity: 1;
}

/* Gradient overlay revealed on hover */
.overlay {
  position:        absolute;
  inset:           0;
  z-index:         var(--z-raised); /* OPT-2: card overlay above image */
  display:         flex;
  flex-direction:  column;
  justify-content: flex-end;
  padding:         var(--space-5xl);
  background:      linear-gradient(
    to top,
    var(--page-card-overlay-from)  0%,  /* OPT-4 */
    var(--page-card-overlay-mid)  52%,
    transparent                  100%
  );
  opacity:    0;
  transition: opacity var(--duration-3xslow) ease; /* OPT-3 */
}

.card:hover .overlay {
  opacity: 1;
}

/* Card label */
.card-label {
  font-size:      var(--fs-card-label);
  font-weight:    var(--fw-bold);
  color:          var(--color-card-label-text);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  margin-bottom:  var(--space-narrow);
}

/* Card CTA arrow text */
.card-cta {
  font-size:   var(--fs-card-cta);
  font-weight: var(--fw-regular);
  color:       rgba(255, 255, 255, 0.82); /* intentional: white scrim on image overlay — no dark override needed */
  display:     flex;
  align-items: center;
  gap:         var(--space-narrow);
  transition:  gap var(--duration-base); /* OPT-3 */
}

.card:hover .card-cta {
  gap: var(--space-2xwide);
}


/* ── Card Hover States ──────────────────────────────────────────────
   Per-card accent colors for border, box-shadow, and shine bar.
   Matches --color-c1 through --color-c4 from base-2.css tokens.
   Card shadow values use --page-* tokens (OPT-4) — art-direction
   exceptions: per-card shadow alphas are brand color specific.
   ─────────────────────────────────────────────────────────────────── */

/* Card 1 — Mobile (blue) */
.card:nth-child(1):hover {
  border-color: var(--c1);
  box-shadow:   0 10px 36px var(--page-card-shadow-c1); /* OPT-4 */
  transform:    translateY(-7px);
}
.card:nth-child(1) .shine {
  background: linear-gradient(90deg, transparent, var(--c1), transparent);
}

/* Card 2 — Desktop (light blue) */
.card:nth-child(2):hover {
  border-color: var(--c2);
  box-shadow:   0 10px 36px var(--page-card-shadow-c2); /* OPT-4 */
  transform:    translateY(-7px);
}
.card:nth-child(2) .shine {
  background: linear-gradient(90deg, transparent, var(--c2), transparent);
}

/* Card 3 — Streaming (teal) */
.card:nth-child(3):hover {
  border-color: var(--c3);
  box-shadow:   0 10px 36px var(--page-card-shadow-c3); /* OPT-4 */
  transform:    translateY(-7px);
}
.card:nth-child(3) .shine {
  background: linear-gradient(90deg, transparent, var(--c3), transparent);
}

/* Card 4 — Theater (purple) */
.card:nth-child(4):hover {
  border-color: var(--c4);
  box-shadow:   0 10px 36px var(--page-card-shadow-c4); /* OPT-4 */
  transform:    translateY(-7px);
}
.card:nth-child(4) .shine {
  background: linear-gradient(90deg, transparent, var(--c4), transparent);
}


/* ── Tagline ────────────────────────────────────────────────────── */
.tagline {
  text-align: center;
  animation:  fadeUp var(--anim-enter-lg) 0.3s ease both;
}

.tagline p {
  font-size:      var(--fs-tagline);
  font-weight:    var(--fw-regular);
  font-family:    var(--font-serif);
  color:          var(--text);
  line-height:    var(--leading-xl);
  letter-spacing: var(--tracking-snug);
}

/* .hl accent spans inside tagline inherit from base-2.css .hl rule */


/* ── Powered-by line ────────────────────────────────────────────── */
.s1 .foot {
  font-size:      var(--fs-eyebrow);
  font-weight:    var(--fw-semibold);
  color:          var(--muted);
  letter-spacing: var(--tracking-ultra);
  text-transform: uppercase;
  text-align:     center;
  animation:      fadeUp var(--anim-enter-xl) 0.4s ease both;
}

.s1 .foot span {
  color: var(--accent);
}


/* ── Section 1 — Responsive ────────────────────────────────────── */

/* Tablet — 2-column card grid */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .s1 {
    gap: var(--space-11xl);
  }
}

/* Mobile */
@media (max-width: 480px) {
  .s1 {
    padding-left:  var(--space-5xl);
    padding-right: var(--space-5xl);
    gap:           var(--space-9xl);
  }

  /* 1-col hero stack at phone (4×1 per spec) */
  .grid {
    grid-template-columns: 1fr;
    max-width:             360px;
  }

  /* Reduce card aspect ratio height on mobile */
  .card {
    aspect-ratio: 4 / 3;
  }

  /* Always show overlay labels on touch (no hover) */
  @media (hover: none) {
    .overlay {
      opacity:    1;
      background: linear-gradient(
        to top,
        var(--page-card-overlay-from)  0%,  /* OPT-4 */
        var(--page-card-overlay-mid)  50%,
        transparent                  100%
      );
    }
  }
}


/* ═══════════════════════════════════════════════════════════════════
   ─── INDEX — Section 2 ───
   Source: section2.css
   Page wrapper: <section class="s2">
   ═══════════════════════════════════════════════════════════════════ */

/* ── OPT-4: Page-local tokens — Index S2 ──────────────────────────
   Scoped to .s2.
   Art-direction values: grid line, glow ring, and glow shadow colors
   are brand-specific — documented exceptions.
   ─────────────────────────────────────────────────────────────────── */
.s2 {
  --page-arch-grid-line:   rgba(61, 139, 212, 0.05);  /* OPT-4: blueprint grid line */
  --page-arch-frame-bg:    var(--accent-dot);          /* OPT-1: pill tag background */
  --page-arch-frame-border: var(--accent-border-light); /* OPT-1: pill tag border */
  --page-arch-glow-sm:     rgba(61, 139, 212, 0.08);  /* OPT-4: frame default glow */
  --page-arch-glow-ring:   var(--accent-glow-ring);   /* OPT-1: hover focus ring */
  --page-arch-glow-lg:     rgba(61, 139, 212, 0.18);  /* OPT-4: frame hover glow */
}

/* Section wrapper */
.s2 {
  position:        relative;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--space-13xl);
  padding:         80px var(--space-13xl) 96px;
  background:      var(--surface);
  z-index:         var(--z-base); /* OPT-2 */
}

/* Fine grid line overlay — technical / blueprint feel */
.s2::before {
  content:          '';
  position:         absolute;
  inset:            0;
  pointer-events:   none;
  background-image:
    linear-gradient(var(--page-arch-grid-line) 1px, transparent 1px),  /* OPT-4 */
    linear-gradient(90deg, var(--page-arch-grid-line) 1px, transparent 1px);
  background-size:  40px 40px;
  z-index:          var(--z-base); /* OPT-2: inert bg pseudo */
}


/* ── Section Header ─────────────────────────────────────────────── */
.arch-hdr {
  position:   relative;
  z-index:    var(--z-base); /* OPT-2 */
  text-align: center;
  animation:  fadeUp var(--anim-enter-lg) ease both;
}

/* Live infrastructure pill tag */
.arch-tag {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-base);
  font-size:      var(--fs-arch-tag);
  font-weight:    var(--fw-bold);
  font-family:    var(--font-mono);
  color:          var(--accent);
  background:     var(--page-arch-frame-bg);    /* OPT-4 */
  border:         1px solid var(--page-arch-frame-border); /* OPT-4 */
  border-radius:  var(--radius-pill);
  padding:        var(--space-narrow) var(--space-2xl);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  margin-bottom:  var(--space-5xl);
}

/* Animated pulse dot before tag text */
.arch-tag::before {
  content:       '';
  width:         var(--size-dot-xs);
  height:        var(--size-dot-xs);
  border-radius: var(--radius-p-circle);
  background:    var(--accent);
  animation:     pulse 2s infinite;
  flex-shrink:   0;
}

/* Section heading */
.s2 h2 {
  font-size:      var(--fs-h2);
  font-weight:    var(--fw-light);
  font-family:    var(--font-sans);
  color:          var(--navy);
  line-height:    var(--leading-snug);
  letter-spacing: var(--tracking-tightest);
}

.s2 h2 strong {
  font-weight: var(--fw-bold);
  color:       var(--accent);
}

/* Section subtitle */
.arch-sub {
  font-size:    var(--fs-arch-sub);
  color:        var(--muted);
  line-height:  var(--leading-2xl);
  margin-top:   var(--space-3xwide);
  margin-left:  auto;
  margin-right: auto;
  max-width:    500px;
}


/* ── Diagram Frame ──────────────────────────────────────────────── */
.diag-wrap {
  position:  relative;
  z-index:   var(--z-base); /* OPT-2 */
  max-width: 900px;
  width:     100%;
  animation: fadeUp var(--anim-enter-xl) 0.1s ease both;
}

.diag-frame {
  position:      relative;
  border-radius: var(--radius-p-5xl);
  border:        1.5px solid var(--border);
  overflow:      hidden;
  background:    var(--surface);
  box-shadow:    0 6px 32px var(--page-arch-glow-sm); /* OPT-4 */
  transition:
    border-color var(--duration-4xslow)  ease,  /* OPT-3 */
    box-shadow   var(--duration-4xslow)  ease;
}

.diag-frame:hover {
  border-color: var(--accent);
  box-shadow:
    0 0 0 4px  var(--page-arch-glow-ring), /* OPT-4 */
    0 16px 48px var(--page-arch-glow-lg);  /* OPT-4 */
}

/* Architecture diagram image */
.diag-frame img {
  width:      100%;
  height:     auto;
  display:    block;
  transition: transform var(--duration-4xslow) ease; /* OPT-3 */
}

.diag-frame:hover img {
  transform: scale(1.013);
}

/* Corner accent marks — revealed on hover for a targeting / technical feel */
.corner {
  position:     absolute;
  width:        16px;
  height:       16px;
  border-color: var(--accent);
  border-style: solid;
  opacity:      0;
  transition:   opacity var(--duration-4xslow) ease; /* OPT-3 */
  z-index:      var(--z-raised); /* OPT-2: corner ring above frame */
}

.c-tl { top: var(--space-2xwide); left: var(--space-2xwide);  border-width: 2px 0 0 2px; border-radius: 3px 0 0 0; }
.c-tr { top: var(--space-2xwide); right: var(--space-2xwide); border-width: 2px 2px 0 0; border-radius: 0 3px 0 0; }
.c-bl { bottom: var(--space-2xwide); left: var(--space-2xwide);  border-width: 0 0 2px 2px; border-radius: 0 0 0 3px; }
.c-br { bottom: var(--space-2xwide); right: var(--space-2xwide); border-width: 0 2px 2px 0; border-radius: 0 0 3px 0; }

.diag-frame:hover .corner {
  opacity: 1;
}


/* ── Action Bar ─────────────────────────────────────────────────── */
.action-bar {
  position:        relative;
  z-index:         var(--z-base); /* OPT-2 */
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  max-width:       900px;
  width:           100%;
  padding:         var(--space-6xl) var(--space-8xl);
  background:      var(--bg);
  border-radius:   var(--radius-p-3xl);
  border:          1px solid var(--border);
  box-shadow:      0 2px 12px var(--shadow-alpha-xs); /* intentional: neutral shadow — no accent */
  flex-wrap:       wrap;
  gap:             var(--space-5xl);
  animation:       fadeUp var(--anim-enter-2xl) 0.2s ease both;
}

/* Meta text block — version + status */
.act-meta {
  font-size:   var(--fs-meta);
  font-weight: var(--fw-light);
  color:       var(--muted);
  line-height: var(--leading-lg);
}

.act-meta strong {
  font-size:     var(--fs-sub);
  font-weight:   var(--fw-semibold);
  color:         var(--navy);
  display:       block;
  margin-bottom: var(--space-xs);
}

/* Stats row */
.stats {
  display:     flex;
  gap:         var(--space-5xl);
  align-items: flex-start;
}

/* Individual stat block */
.stats > div {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-xs);
}

.stat-val {
  font-size:   var(--fs-stat-val);
  font-weight: var(--fw-bold);
  font-family: var(--font-mono);
  color:       var(--accent);
  display:     block;
  white-space: nowrap;
}

.stat-lbl {
  font-size:      var(--fs-stat-lbl);
  color:          var(--muted);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-top:     var(--space-xs);
  display:        block;
  white-space:    nowrap;
}

/* Continue button — inherits .btn from base-2.css, no overrides needed */


/* ── Section 2 — Responsive ────────────────────────────────────── */

/* Tablet */
@media (max-width: 860px) {
  .s2 {
    padding: 60px var(--space-8xl) 72px;
    gap:     var(--space-10xl);
  }

  .stats {
    gap: var(--space-2xl);
  }

  .action-bar {
    padding: var(--space-4xl) var(--space-5xl);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .s2 {
    padding-left:  var(--space-5xl);
    padding-right: var(--space-5xl);
    gap:           var(--space-8xl);
  }

  /* Stack action bar vertically */
  .action-bar {
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--space-3xl);
  }

  /* Spread stats evenly when stacked */
  .stats {
    width:           100%;
    justify-content: space-between;
    gap:             var(--space-wide);
  }

  /* Full-width CTA on mobile */
  #s2-btn {
    width:           100%;
    justify-content: center;
  }

  /* Remove diagram hover zoom — distracting on touch */
  @media (hover: none) {
    .diag-frame:hover img {
      transform: none;
    }

    .diag-frame:hover .corner {
      opacity: 0;
    }
  }
}


/* ═══════════════════════════════════════════════════════════════════
   ─── PARTNERS ───
   Source: partners.css
   Page wrapper: <main class="partners-page">
   ═══════════════════════════════════════════════════════════════════ */

/* ── OPT-4: Page-local tokens — Partners ───────────────────────────
   Scoped to .partners-page.
   --p-* tokens defined here as dark defaults; light overrides at
   bottom of this section via html[data-theme="light"] .partners-page.
   Per-card --page-card-accent-* values are brand-specific — art-direction
   exceptions documented in section 5 comments below.
   ─────────────────────────────────────────────────────────────────── */
.partners-page {
  --page-bg:           var(--color-overlay-page);
  --page-heading:      var(--color-white);
  --page-text:         var(--color-overlay-text);
  --page-card-bg:      var(--color-overlay-btn-bg);
  --page-card-border:  var(--color-overlay-border);
  --page-label:        var(--color-overlay-logo-dim);
  --page-divider:      var(--color-overlay-border);
  --page-pillar-hover: var(--color-overlay-btn-hover);

  display:        flex;
  flex-direction: column;
  align-items:    center;
  min-height:     calc(100vh - var(--nav-height));
  padding:        80px var(--nav-padding-x) 96px;
  position:       relative;
  z-index:        var(--z-base); /* OPT-2 */
  background:     var(--page-bg);
  color:          var(--page-text);
}

/* Ambient radial glow — orange/blue blend — art-direction exception */
.partners-page::before {
  content:        '';
  position:       absolute;
  top:            15%;
  left:           50%;
  transform:      translateX(-50%);
  width:          80vw;
  max-width:      1000px;
  height:         50vw;
  max-height:     560px;
  background:     radial-gradient(
    ellipse at center,
    rgba(249, 115, 22, 0.07) 0%,  /* art-direction: orange — no token */
    var(--accent-dot)        40%,  /* OPT-1: was rgba(61,139,212,0.05) */
    transparent              70%
  );
  pointer-events: none;
  z-index:        var(--z-base); /* OPT-2: inert ambient pseudo */
}

.partners-container {
  position:       relative;
  z-index:        var(--z-base); /* OPT-2 */
  max-width:      1080px;
  width:          100%;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            72px;
}


/* ── Partners Hero ──────────────────────────────────────────────── */
.partners-hero {
  text-align: center;
  max-width:  680px;
  animation:  fadeUp var(--anim-enter-base) ease both;
}

.partners-eyebrow {
  font-size:      var(--fs-eyebrow);
  font-weight:    var(--fw-bold);
  font-family:    var(--font-mono);
  color:          var(--color-enginuity-accent);
  letter-spacing: var(--tracking-ultra);
  text-transform: uppercase;
  margin-bottom:  var(--space-5xl);
}

.partners-h1 {
  font-size:      var(--fs-partners-h1);
  font-weight:    var(--fw-light);
  color:          var(--page-heading);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tightest);
  margin-bottom:  var(--space-5xl);
}

.partners-h1 strong {
  font-weight: var(--fw-bold);
  color:       var(--color-enginuity-accent);
}

.partners-subtitle {
  font-size:   var(--fs-text-sub); /* 17px — between lg(15) and xl(18) */
  font-weight: var(--fw-light);
  color:       var(--page-text);
  line-height: var(--leading-2xl);
}


/* ── Partner Grid ───────────────────────────────────────────────── */
.partners-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-7xl);
  width:                 100%;
}


/* ── Partner Card ───────────────────────────────────────────────── */
.partner-card {
  position:       relative;
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  padding:        var(--space-10xl) var(--space-9xl) var(--space-9xl);
  background:     var(--page-card-bg);
  border:         1px solid var(--page-card-border);
  border-radius:  var(--radius-p-5xl);
  transition:
    border-color var(--duration-base) ease,                              /* OPT-3 */
    background   var(--duration-base) ease,
    transform    var(--duration-4xslow) cubic-bezier(0.34, 1.4, 0.64, 1),
    box-shadow   var(--duration-base) ease;
}

.partner-card:nth-child(1) { animation: fadeUp var(--anim-enter-base) 0.05s ease both; }
.partner-card:nth-child(2) { animation: fadeUp var(--anim-enter-base) 0.14s ease both; }
.partner-card:nth-child(3) { animation: fadeUp var(--anim-enter-base) 0.23s ease both; }

/* Top accent bar */
.partner-card::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  height:     3px;
  opacity:    0;
  transition: opacity var(--duration-base) ease; /* OPT-3 */
}

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

/* Role pill */
.partner-role {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-base);
  font-size:      var(--fs-eyebrow); /* 11px */
  font-weight:    var(--fw-bold);
  font-family:    var(--font-mono);
  color:          var(--page-card-accent);
  background:     var(--page-card-accent-dim);
  border:         1px solid var(--page-card-accent-border);
  border-radius:  var(--radius-pill);
  padding:        var(--space-narrow) var(--space-xl);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  margin-bottom:  var(--space-7xl);
  width:          fit-content;
}

.partner-role::before {
  content:       '';
  width:         var(--size-dot-xs);
  height:        var(--size-dot-xs);
  border-radius: var(--radius-p-circle);
  flex-shrink:   0;
  background:    var(--page-card-accent);
}

.partner-name {
  font-size:      var(--fs-text-2xl);  /* 20px */
  font-weight:    var(--fw-semibold);
  color:          var(--page-heading);
  line-height:    var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin-bottom:  var(--space-base);
}

.partner-location {
  font-size:      var(--fs-text-sm);  /* 12px */
  color:          var(--page-label);
  letter-spacing: var(--tracking-wide);
  margin-bottom:  var(--space-6xl);
}

.partner-divider {
  height:        1px;
  background:    var(--page-divider);
  margin-bottom: var(--space-6xl);
  border:        none;
}

.partner-list {
  list-style:     none;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3xwide);
  flex:           1;
  margin-bottom:  var(--space-8xl);
}

.partner-list li {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-3xwide);
  font-size:   var(--fs-text-lg);  /* 15px */
  color:       var(--page-text);
  line-height: var(--leading-lg);
}

.partner-list li::before {
  content:     '—';
  flex-shrink: 0;
  font-weight: var(--fw-bold);
  color:       var(--page-card-accent);
  margin-top:  1px;
}

.partner-footer {
  margin-top:  auto;
  padding-top: var(--space-5xl);
  border-top:  1px solid var(--page-divider);
}

.partner-footer-label {
  font-size:      var(--fs-text-3xs);  /* 9px */
  font-weight:    var(--fw-bold);
  color:          var(--page-label);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  margin-bottom:  var(--space-base);
}

.partner-footer-role {
  font-size:   var(--fs-text-base);  /* 13px */
  font-weight: var(--fw-semibold);
  color:       var(--page-card-accent);
  line-height: var(--leading-md);
}


/* ── Card Accent Colors ─────────────────────────────────────────────
   Per-card scoped CSS custom properties.
   Brand accent rgba values are art-direction exceptions — they are
   tied to specific palette colors and cannot be normalized to the
   generic --accent-* scale without losing brand specificity.
   ─────────────────────────────────────────────────────────────────── */
.partner-card:nth-child(1) {
  --page-card-accent:        var(--c1);
  --page-card-accent-dim:    rgba(61, 139, 212, 0.12);   /* art-direction: blue alpha  */
  --page-card-accent-border: rgba(61, 139, 212, 0.3);    /* art-direction: blue border */
}
.partner-card:nth-child(1)::before {
  background: linear-gradient(90deg, transparent, var(--c1), transparent);
}

.partner-card:nth-child(2) {
  --page-card-accent:        var(--color-enginuity-accent);
  --page-card-accent-dim:    rgba(249, 115, 22, 0.10);   /* art-direction: orange alpha  */
  --page-card-accent-border: rgba(249, 115, 22, 0.3);    /* art-direction: orange border */
}
.partner-card:nth-child(2)::before {
  background: linear-gradient(90deg, transparent, var(--color-enginuity-accent), transparent);
}

.partner-card:nth-child(3) {
  --page-card-accent:        var(--c3);
  --page-card-accent-dim:    rgba(46, 170, 160, 0.10);   /* art-direction: teal alpha  */
  --page-card-accent-border: rgba(46, 170, 160, 0.3);    /* art-direction: teal border */
}
.partner-card:nth-child(3)::before {
  background: linear-gradient(90deg, transparent, var(--c3), transparent);
}

.partner-card:hover {
  background:   var(--page-card-accent-dim);
  border-color: var(--page-card-accent-border);
  transform:    translateY(-6px);
  box-shadow:
    0 0 0 1px var(--page-card-accent-border),
    0 20px 60px var(--shadow-alpha-md);
}


/* ── Convergence Statement ──────────────────────────────────────── */
.partners-convergence {
  width:      100%;
  text-align: center;
  animation:  fadeUp var(--anim-enter-lg) 0.3s ease both;
}

.convergence-heading {
  font-size:      var(--fs-convergence-hd);
  font-weight:    var(--fw-light);
  color:          var(--page-text);
  letter-spacing: var(--tracking-tight);
  line-height:    var(--leading-md);
  margin-bottom:  var(--space-11xl);
}

.convergence-heading strong {
  font-weight: var(--fw-semibold);
  color:       var(--page-heading);
}

/* Same gap as .partners-grid so columns align */
.convergence-pillars {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-7xl);
  width:                 100%;
}

.convergence-pillar {
  position:       relative;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-3xwide);
  padding:        var(--space-9xl) var(--space-8xl) var(--space-8xl);
  background:     var(--page-card-bg);
  border:         1px solid var(--page-card-border);
  border-radius:  var(--radius-sm);
  text-align:     center;
  transition:     background var(--duration-slow) ease, border-color var(--duration-slow) ease; /* OPT-3 */
}

.convergence-pillar:hover {
  background: var(--page-pillar-hover);
}

/*
  Bidirectional arrow — fills the 24px column gap.
  Thick orange bar with left + right arrowheads via clip-path.
*/
.convergence-pillar:nth-child(2)::before,
.convergence-pillar:nth-child(3)::before {
  content:        '';
  position:       absolute;
  left:           -24px;
  top:            50%;
  transform:      translateY(-50%);
  width:          24px;
  height:         20px;
  background:     var(--color-enginuity-accent);
  clip-path: polygon(
    0%   50%,
    30%  0%,
    30%  30%,
    70%  30%,
    70%  0%,
    100% 50%,
    70%  100%,
    70%  70%,
    30%  70%,
    30%  100%
  );
  pointer-events: none;
}

.pillar-icon {
  font-size:     var(--fs-text-5xl);  /* 28px */
  line-height:   var(--leading-none);
  height:        36px;
  display:       flex;
  align-items:   center;
  margin-bottom: var(--space-tight);
}

.pillar-label {
  font-size:      var(--fs-text-xs);   /* 11px */
  font-weight:    var(--fw-bold);
  color:          var(--page-label);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.pillar-value {
  font-size:      var(--fs-pillar-value);
  font-weight:    var(--fw-bold);
  color:          var(--page-heading);
  letter-spacing: var(--tracking-tight);
  line-height:    var(--leading-tight);
}

.convergence-pillar:nth-child(1) .pillar-value { color: var(--c1); }
.convergence-pillar:nth-child(2) .pillar-value { color: var(--color-enginuity-accent); }
.convergence-pillar:nth-child(3) .pillar-value { color: var(--c3); }


/* ── Partners — Responsive ──────────────────────────────────────── */
@media (max-width: 900px) {
  .partners-grid { grid-template-columns: repeat(2, 1fr); }

  .partner-card:nth-child(3) {
    grid-column: 1 / -1;
    max-width:   480px;
    margin:      0 auto;
    width:       100%;
  }
}

@media (max-width: 860px) {
  .partners-page      { padding: 64px 28px 80px; }
  .partners-container { gap: 56px; }
}

@media (max-width: 600px) {
  .partners-page      { padding: 48px 20px 72px; }
  .partners-container { gap: 44px; }

  .partners-grid                { grid-template-columns: 1fr; }
  .partner-card:nth-child(3)    { grid-column: auto; max-width: none; }

  .convergence-pillars          { grid-template-columns: 1fr; gap: 20px; }

  .convergence-pillar {
    padding:         20px 18px;
    flex-direction:  row;
    justify-content: flex-start;
    gap:             16px;
    text-align:      left;
  }

  /* On mobile, rotate arrow to point downward */
  .convergence-pillar:nth-child(2)::before,
  .convergence-pillar:nth-child(3)::before {
    left:      50%;
    top:       -20px;
    transform: translateX(-50%) rotate(90deg);
    width:     20px;
    height:    20px;
  }

  .pillar-icon { height: auto; font-size: var(--fs-text-icon); margin-bottom: 0; }  /* 22px */

  .partners-logo-mark { /* sizing handled by enginuity-logo.css .ep-sm */ }
}


/* ── Partners — Theme Overrides ─────────────────────────────────────
   Light variant: overrides --page-* tokens declared on .partners-page.
   Per-card --page-card-accent-* scoped properties are unchanged
   (brand colors — documented art-direction exceptions).
   ─────────────────────────────────────────────────────────────────── */
html[data-theme="light"] .partners-page {
  --page-bg:           var(--color-bg);
  --page-heading:      var(--color-navy);
  --page-text:         var(--color-text);
  --page-card-bg:      var(--color-surface);
  --page-card-border:  var(--color-border);
  --page-label:        var(--color-muted);
  --page-divider:      var(--color-border);
  --page-pillar-hover: var(--accent-hover); /* OPT-1: was rgba(61,139,212,0.06) */
}


/* ═══════════════════════════════════════════════════════════════════
   ─── DOCS ───
   Source: docs.css
   Page wrapper: <div class="docs-page">
   ═══════════════════════════════════════════════════════════════════ */

/* ── OPT-4: Page-local tokens — Docs ───────────────────────────────
   Docs uses base-2.css semantic tokens directly — no page-scoped
   token block required. All colors reference --bg, --surface,
   --border, --navy, --accent, --muted, --text from :root.
   ─────────────────────────────────────────────────────────────────── */

/* Page wrapper */
.docs-page {
  min-height:  100vh;
  background:  var(--bg);
  padding-top: var(--nav-height);
}

.docs-container {
  max-width: 1080px;
  margin:    0 auto;
  padding:   72px var(--space-13xl) 96px;
}


/* ── Hero Block — left-aligned ──────────────────────────────────── */
.docs-hero {
  text-align:    left;
  margin-bottom: var(--space-13xl);
  animation:     fadeUp var(--anim-enter-base) ease both;
}

/* → .eyebrow from base-2.css — used directly on docs-eyebrow element */

.docs-h1 {
  font-size:      var(--fs-h1);
  font-weight:    var(--fw-light);
  font-family:    var(--font-sans);
  color:          var(--navy);
  line-height:    var(--leading-snug);
  letter-spacing: var(--tracking-tightest);
  margin-bottom:  var(--space-3xwide);
}

.docs-h1 .h1-light  { font-weight: var(--fw-light); }
.docs-h1 strong     { font-weight: var(--fw-bold);  }

.docs-subtitle {
  font-size:   var(--fs-sub);
  font-weight: var(--fw-regular);
  color:       var(--muted);
  line-height: var(--leading-xl);
}


/* ── Split Card ─────────────────────────────────────────────────── */
.docs-split-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  box-shadow:    var(--shadow);
  overflow:      hidden;
  animation:     fadeUp var(--anim-enter-lg) 0.1s ease both;
}

.docs-split {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  align-items:           start;
}

.docs-split__left {
  padding:      var(--space-13xl) var(--space-11xl) var(--space-13xl) var(--space-13xl);
  border-right: 1px solid var(--border);
}

.docs-split__right {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-8xl);
  padding:        var(--space-13xl) var(--space-13xl) var(--space-13xl) var(--space-11xl);
}


/* ── Left Column — section label + numbered poster lines ────────── */
.docs-col-label {
  font-size:      var(--fs-eyebrow);
  font-weight:    var(--fw-semibold);
  color:          var(--muted);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  margin-bottom:  var(--space-7xl);
}

.docs-poster {
  display:        flex;
  flex-direction: column;
}

.poster-line {
  display:       flex;
  align-items:   baseline;
  gap:           var(--space-3xl);
  opacity:       0;
  transform:     translateY(var(--space-5xl));
  padding:       var(--space-2xl) 0;
  border-bottom: 1px solid var(--border);
  transition:
    opacity   var(--duration-xl)  ease,                              /* OPT-3 */
    transform var(--duration-xl)  cubic-bezier(0.22, 1, 0.36, 1);
}

.poster-line:first-child {
  border-top: 1px solid var(--border);
}

.poster-line.visible {
  opacity:   1;
  transform: translateY(0);
}

/* Two-digit counter injected by renderer.js */
.poster-num {
  font-size:      var(--fs-text-xs);   /* 11px */
  font-weight:    var(--fw-regular);
  font-family:    var(--font-mono);
  color:          var(--muted);
  letter-spacing: var(--tracking-wide);
  flex-shrink:    0;
  min-width:      20px;
  opacity:        0.6;
}

.poster-text {
  font-size:      var(--fs-poster-text);
  font-weight:    var(--fw-light);
  font-family:    var(--font-sans);
  color:          var(--text);
  line-height:    var(--leading-base);
  letter-spacing: var(--tracking-snug);
}


/* ── Poster Highlights ──────────────────────────────────────────── */
.poster-hl { font-weight: var(--fw-bold); color: var(--accent); }

.poster-line:nth-child(1) .poster-hl { color: var(--accent); }
.poster-line:nth-child(2) .poster-hl { color: var(--c1);  text-decoration: underline; text-underline-offset: 3px; }
.poster-line:nth-child(3) .poster-hl { color: var(--c2); }
.poster-line:nth-child(4) .poster-hl { color: var(--c3); }
.poster-line:nth-child(5) .poster-hl { color: var(--c4); }


/* ── Right Column — callout hero + icon pills ───────────────────── */
.docs-callout-hero {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-base);
}

.docs-callout-kicker {
  font-size:      var(--fs-eyebrow);
  font-weight:    var(--fw-semibold);
  color:          var(--accent);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.docs-callout-headline {
  font-size:      var(--fs-callout-headline);
  font-weight:    var(--fw-bold);
  font-family:    var(--font-sans);
  color:          var(--navy);
  letter-spacing: var(--tracking-tightest);
  line-height:    var(--leading-tight);
}

.docs-callout-sub {
  font-size:   var(--fs-sub);
  font-weight: var(--fw-light);
  color:       var(--text);
  line-height: var(--leading-xl);
}

/* Icon pills */
.docs-icon-pills {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3xwide);
}

.docs-icon-pill {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2xl);
  padding:       var(--space-2xl) var(--space-3xl);
  background:    var(--color-card-bg);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
}

.docs-icon-pill-icon {
  width:           34px;
  height:          34px;
  border-radius:   var(--radius-p-lg);
  background:      var(--navy);
  color:           var(--color-white);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       var(--fs-p-xl);  /* 16px */
  flex-shrink:     0;
}

.docs-icon-pill-text {
  font-size:   var(--fs-sub);
  color:       var(--text);
  line-height: var(--leading-md);
}

.docs-icon-pill-text strong {
  font-weight: var(--fw-semibold);
  color:       var(--navy);
}


/* ── Closing + Welcome ──────────────────────────────────────────── */
.docs-welcome-block {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-5xl);
  padding-top:    var(--space-3xl);
  border-top:     1px solid var(--border);
  margin-top:     var(--space-wide);
}

.docs-welcome {
  font-size:      var(--fs-docs-welcome);
  font-weight:    var(--fw-semibold);
  font-family:    var(--font-sans);
  color:          var(--accent);
  letter-spacing: var(--tracking-snug);
}


/* ── Logo Placement ─────────────────────────────────────────────── */
.docs-logo {
  /* inline in welcome block on desktop — no override needed */
}

.docs-split-logo {
  display:    none;
  margin-top: 32px;
}


/* ── Docs — Responsive ──────────────────────────────────────────── */
@media (max-width: 860px) {
  .docs-container    { padding: 56px 28px 72px; }
  .docs-split__left  { padding: 36px 28px 36px 32px; }
  .docs-split__right { padding: 36px 32px 36px 28px; }
  .docs-hero         { margin-bottom: 36px; }
}

@media (max-width: 600px) {
  .docs-container { padding: 40px 20px 64px; }

  .docs-split {
    grid-template-columns: 1fr;
  }

  .docs-split__left {
    border-right:  none;
    border-bottom: 1px solid var(--border);
    padding:       32px 24px;
  }

  .docs-split__right { padding: 32px 24px; }

  .docs-hero { margin-bottom: 28px; }

  .docs-logo       { display: none; }
  .docs-split-logo { display: flex; }

  .poster-text { font-size: var(--fs-poster-text-mobile); }
}


/* ── Docs — Dark Theme ──────────────────────────────────────────────
   base-2.css tokens remap surface/border/text automatically.
   Only docs-specific component overrides needed here.
   ─────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .docs-split-card {
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

html[data-theme="dark"] .docs-icon-pill {
  background: var(--color-card-bg);
}

html[data-theme="dark"] .poster-line {
  border-color: var(--border);
}

html[data-theme="dark"] .docs-callout-headline {
  color: var(--color-navy);
}

html[data-theme="dark"] .docs-icon-pill-text strong {
  color: var(--color-navy);
}


/* ═══════════════════════════════════════════════════════════════════
   ─── ENGINUITY ───
   Source: enginuity.css
   Page wrapper: <div class="eng-page">
   ═══════════════════════════════════════════════════════════════════ */

/* ── OPT-4: Page-local tokens — Enginuity ──────────────────────────
   Scoped to .eng-page. Dark defaults; light overrides at bottom.
   Art-direction exceptions: image shadows, gradient ring, and radial
   glow values are not tokenized — they are fixed visual compositions.
   ─────────────────────────────────────────────────────────────────── */
.eng-page {
  --page-bg:      var(--color-overlay-page);
  --page-text:    var(--color-overlay-text);
  --page-heading: var(--color-white);
  --page-divider: var(--color-overlay-border);

  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  min-height:      calc(100vh - var(--nav-height));
  padding:         64px var(--nav-padding-x) 80px;
  gap:             var(--space-13xl);
  position:        relative;
  z-index:         var(--z-base); /* OPT-2 */
  background:      var(--page-bg);
  color:           var(--page-text);
}

/* Radial glow — art-direction: blue ambient behind hero image */
.eng-page::before {
  content:        '';
  position:       absolute;
  top:            20%;
  left:           50%;
  transform:      translateX(-50%);
  width:          70vw;
  max-width:      900px;
  height:         40vw;
  max-height:     480px;
  background:     radial-gradient(
    ellipse at center,
    var(--accent-hover-dark) 0%,   /* OPT-1: was rgba(61,139,212,0.12) */
    transparent 70%
  );
  pointer-events: none;
  z-index:        var(--z-base); /* OPT-2: inert glow pseudo */
}


/* ── Hero Image ─────────────────────────────────────────────────── */
.eng-img-wrap {
  position:     relative;
  z-index:      var(--z-base); /* OPT-2 */
  width:        100%;
  aspect-ratio: 16 / 9;
  animation:    fadeUp var(--anim-enter-base) 0.1s ease both;
}

/* Outer glow ring — art-direction: gradient of blue + orange */
.eng-img-wrap::before {
  content:       '';
  position:      absolute;
  inset:         -2px;
  border-radius: var(--radius-p-6xl);
  background:    linear-gradient(
    135deg,
    var(--accent-border),        /* OPT-1: was rgba(61,139,212,0.35) */
    rgba(249, 115, 22, 0.2),     /* art-direction: orange — no accent token */
    var(--accent-glow-ring)      /* OPT-1: was rgba(61,139,212,0.1) */
  );
  z-index:    var(--z-base); /* OPT-2: inert glow ring pseudo */
  opacity:    0;
  transition: opacity var(--duration-xl) ease; /* OPT-3 */
}

.eng-img-wrap:hover::before {
  opacity: 1;
}

.eng-img {
  position:      relative;
  z-index:       var(--z-base); /* OPT-2 */
  width:         100%;
  height:        auto;
  display:       block;
  border-radius: var(--radius);
  box-shadow:    0 24px 80px var(--shadow-alpha-dark-xl); /* art-direction: dark image shadow */
  transition:    transform var(--duration-xl) ease, box-shadow var(--duration-xl) ease; /* OPT-3 */
}

.eng-img-wrap:hover .eng-img {
  transform:  translateY(-4px);
  box-shadow: 0 32px 96px var(--shadow-alpha-dark-2xl); /* art-direction */
}

/* Embedded logo in hero line 3 */
.eng-hero-line3 {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-wrap:       wrap;
  gap:             var(--space-wide);
  font-weight:     var(--fw-bold);
}

.eng-hero-line3 .ep-logo {
  gap:         var(--space-xl);
  font-weight: var(--fw-bold);
}

.eng-hero-line3 .ep-cluster {
  transform:        scale(1.25);
  transform-origin: center;
  margin:           0 var(--space-3xwide);
}

.eng-hero-line3 .ep-logo-wordmark {
  font-size:   inherit;
  font-weight: var(--fw-bold);
  color:       var(--color-white) !important;
  text-shadow: 0 1px 8px var(--shadow-alpha-dark-xl);
}

/* Repositioned CTA button */
.eng-hero-cta-wrap {
  position:  absolute;
  bottom:    var(--space-13xl);
  left:      50%;
  transform: translateX(-50%);
  z-index:   var(--z-raised); /* OPT-2: local float above hero image layers */
}

/* Overrides absolute positioning when video is playing */
.eng-hero-cta-wrap.video-mode {
  position:   relative;
  bottom:     auto;
  left:       auto;
  transform:  none;
  margin-top: var(--space-8xl);
}

/* Hero text overlay — tight matte box fitted around text block */
.eng-hero-overlay {
  position:        absolute;
  left:            50%;
  top:             50%;
  transform:       translate(-50%, -50%);
  z-index:         var(--z-base); /* OPT-2 */
  width:           100%;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-base);
  text-align:      center;
  pointer-events:  none;
  background:      rgba(8, 12, 22, 0.52); /* art-direction: dark overlay */
  box-shadow:      0 8px 22px var(--shadow-alpha-dark-xl);
  padding:         var(--space-12xl) var(--space-12xl) var(--space-13xl);
}

.eng-hero-line1,
.eng-hero-line3 {
  margin:         0;
  font-size:      var(--fs-eng-hero);
  font-weight:    var(--fw-bold);
  font-family:    var(--font-sans);
  color:          var(--color-white);
  line-height:    var(--leading-base);
  letter-spacing: var(--tracking-none);
  text-shadow:    0 1px 8px var(--shadow-alpha-dark-xl);
}

.eng-hero-hl-line {
  margin:          0;
  display:         flex;
  align-items:     baseline;
  justify-content: center;
  gap:             0.25em;
  flex-wrap:       wrap;
  font-weight:     var(--fw-bold);
}

.eng-hero-hl {
  font-size:      var(--fs-eng-hero-hl);
  font-weight:    var(--fw-bold);
  font-family:    var(--font-sans);
  color:          var(--color-enginuity-accent);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  text-shadow:    0 2px 20px rgba(249, 115, 22, 0.45); /* art-direction: orange glow */
}

.eng-hero-line2 {
  font-size:      var(--fs-eng-hero);
  font-weight:    var(--fw-bold);
  font-family:    var(--font-sans);
  color:          var(--color-white);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-none);
  text-shadow:    0 1px 8px var(--shadow-alpha-dark-xl);
}


/* ── Video Frame ────────────────────────────────────────────────── */
.eng-video-wrap {
  display:       none;
  position:      absolute;
  inset:         0;
  z-index:       var(--z-raised); /* OPT-2: video letterbox above image */
  background:    #000; /* intentional: video letterbox — pure black, not a design token */
  overflow:      hidden;
}

.eng-video-wrap.eng-video--active {
  display: block;
}

/* Both player types fill the wrap 100% */
.eng-video-native,
.eng-video-frame {
  width:      100%;
  height:     100%;
  border:     none;
  display:    block;
  background: #000; /* intentional: video letterbox — pure black, not a design token */
}

.eng-caption {
  position:   relative;
  z-index:    var(--z-base); /* OPT-2 */
  text-align: center;
  max-width:  680px;
  animation:  fadeUp var(--anim-enter-lg) 0.2s ease both;
}

/* Main caption text */
.eng-body-text {
  font-size:      var(--fs-overlay-body);
  font-family:    var(--font-serif);
  color:          var(--page-text);
  line-height:    var(--leading-2xl);
  letter-spacing: var(--tracking-snug);
}

/* Highlighted phrase within caption — Enginuity orange */
.ov-hl {
  color:      var(--color-enginuity-accent);
  font-style: italic;
}

/* Divider line between caption text and return link */
.eng-caption-divider {
  width:      var(--space-13xl);
  height:     1px;
  background: var(--page-divider);
  margin:     var(--space-8xl) auto;
  border:     none;
}

/* Return-to-platform link */
.eng-return {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-wide);
  padding:         13px var(--space-8xl);
  font-size:       var(--fs-overlay-link);
  font-weight:     var(--fw-semibold);
  font-family:     var(--font-sans);
  color:           var(--color-white);
  background:      var(--color-enginuity-link-bg);
  border-radius:   var(--radius-sm);
  border:          2px solid transparent;
  text-decoration: none;
  letter-spacing:  var(--tracking-wide);
  box-shadow:      0 4px 18px var(--color-enginuity-link-shadow);
  transition:      all var(--duration-slow) ease; /* OPT-3 */
}

.eng-return:hover {
  background:   transparent;
  color:        var(--accent);
  border-color: var(--accent);
  box-shadow:
    0 0 0 4px var(--accent-glow-ring),  /* OPT-1 */
    0 6px 24px var(--accent-shadow-xl); /* OPT-1 */
  transform: translateY(-2px);
}

/* Arrow icon inside return link */
.eng-return .arr {
  font-style: normal;
  transition: transform var(--duration-slow) ease; /* OPT-3 */
}

.eng-return:hover .arr {
  transform: translateX(-3px);
}


/* ── Enginuity Logo Mark ─────────────────────────────────────────── */
.eng-logo {
  position:    relative;
  z-index:     var(--z-base); /* OPT-2 */
  display:     flex;
  align-items: center;
  gap:         var(--space-4xl);
  animation:   fadeUp var(--anim-enter-2xl) 0.3s ease both;
}

/* 2×3 dot grid — colors injected inline by renderer.js */
.eng-logo-mark {
  display:               grid;
  grid-template-columns: repeat(3, 14px);
  gap:                   var(--space-narrow);
}

.eng-logo-mark .dot {
  width:         14px;
  height:        14px;
  border-radius: var(--radius-p-circle);
  transition:    transform var(--duration-base) ease, opacity var(--duration-base) ease; /* OPT-3 */
}

.eng-logo:hover .eng-logo-mark .dot {
  animation: dotPop var(--duration-4xslow) ease both;
}

/* Stagger dot pop on logo hover */
.eng-logo-mark .dot:nth-child(1) { animation-delay: 0.00s; }
.eng-logo-mark .dot:nth-child(2) { animation-delay: 0.04s; }
.eng-logo-mark .dot:nth-child(3) { animation-delay: 0.08s; }
.eng-logo-mark .dot:nth-child(4) { animation-delay: 0.12s; }
.eng-logo-mark .dot:nth-child(5) { animation-delay: 0.16s; }
.eng-logo-mark .dot:nth-child(6) { animation-delay: 0.20s; }

.eng-logo-text {
  font-size:      var(--fs-text-icon);  /* 22px */
  font-weight:    var(--fw-medium);
  color:          var(--page-heading);
  letter-spacing: var(--tracking-mono);
  opacity:        0.9;
}


/* ── Local Keyframes — Enginuity page only ──────────────────────── */
@keyframes dotPop {
  0%   { transform: scale(1);    opacity: 1;   }
  40%  { transform: scale(1.45); opacity: 0.9; }
  100% { transform: scale(1);    opacity: 1;   }
}


/* ── Enginuity — Responsive ─────────────────────────────────────── */

/* Tablet */
@media (max-width: 860px) {
  .eng-page {
    padding: 48px 28px 64px;
    gap:     36px;
  }

  .eng-body-text {
    font-size: var(--fs-body-lg); /* OPT-3: 1.1rem tablet override */
  }

  .eng-hero-line3 .ep-cluster {
    transform: scale(0.85);
    margin:    0 -14px;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .eng-page {
    padding: 40px 20px 56px;
    gap:     28px;
  }

  .eng-img {
    border-radius: var(--radius-p-3xl);
  }

  .eng-img-wrap::before {
    border-radius: var(--radius-p-4xl);
  }

  .eng-video-wrap {
    border-radius: var(--radius-p-3xl);
    overflow:      hidden;
  }

  .eng-body-text {
    font-size: var(--fs-body-md); /* OPT-3: 1.0rem mobile override */
  }

  /* Full-width return/CTA button on mobile */
  .eng-return {
    width:           100%;
    justify-content: center;
  }

  /* Reduce logo mark dot size */
  .eng-logo-mark {
    grid-template-columns: repeat(3, 12px);
    gap:                   4px;
  }

  .eng-logo-mark .dot {
    width:  12px;
    height: 12px;
  }

  .eng-logo-text {
    font-size: var(--fs-text-xl);  /* 18px */
  }

  .eng-hero-line3 .ep-cluster {
    transform: scale(0.6);
    margin:    0 -10px;
  }

  .eng-hero-line3 .ep-logo {
    gap: 6px;
  }

  /* Suppress glow on touch */
  @media (hover: none) {
    .eng-img-wrap:hover::before {
      opacity: 0;
    }

    .eng-img-wrap:hover .eng-img {
      transform:  none;
      box-shadow: 0 24px 80px var(--shadow-alpha-dark-xl);
    }
  }
}


/* ── Enginuity — Theme Overrides ────────────────────────────────────
   Light variant: overrides --page-* tokens declared on .eng-page.
   Art-direction exceptions (glow, gradient ring, image shadows)
   are not tokenized — they remain at their fixed visual values.
   ─────────────────────────────────────────────────────────────────── */
html[data-theme="light"] .eng-page {
  --page-bg:      var(--color-bg);
  --page-text:    var(--color-text);
  --page-heading: var(--color-navy);
  --page-divider: var(--color-border);
}

/* Ambient radial glow — reduced opacity in light theme (art direction) */
html[data-theme="light"] .eng-page::before {
  background: radial-gradient(
    ellipse at center,
    var(--accent-hover) 0%,   /* OPT-1: was rgba(61,139,212,0.06) */
    transparent 70%
  );
}


/* ═══════════════════════════════════════════════════════════════════
   ─── ABOUT ENGINUITY ───
   Source: about-enginuity.css
   Page wrapper: <div class="about-page">
   ═══════════════════════════════════════════════════════════════════ */

/* ── OPT-4: Page-local tokens — About Enginuity ────────────────────
   Scoped to .about-page. Light defaults; dark overrides at bottom.
   --a-* renamed to --page-* per OPT-4.
   ─────────────────────────────────────────────────────────────────── */
.about-page {
  --page-bg:             var(--color-bg);
  --page-surface:        var(--color-surface);
  --page-heading:        var(--color-navy);
  --page-text:           var(--color-text);
  --page-muted:          var(--color-muted);
  --page-border:         var(--color-border);
  --page-card-bg:        var(--color-surface);
  --page-card-bg-inner:  var(--color-card-bg);
  --page-label:          var(--color-muted);
  --page-divider:        var(--color-border);
  --page-pillar-hover:   var(--accent-hover); /* OPT-1: was rgba(61,139,212,0.06) */

  display:        flex;
  flex-direction: column;
  align-items:    stretch;
  min-height:     calc(100vh - var(--nav-height));
  position:       relative;
  z-index:        var(--z-base); /* OPT-2 */
  background:     var(--page-bg);
  color:          var(--page-text);
}


/* ── Container ──────────────────────────────────────────────────── */
.about-container {
  max-width: 1080px;
  width:     100%;
  margin:    0 auto;
}


/* ── Hero Strip ─────────────────────────────────────────────────── */
.about-hero {
  background:    var(--page-surface);
  border-bottom: 1px solid var(--page-border);
  padding:       52px var(--nav-padding-x) 48px;
  position:      relative;
  overflow:      hidden;
  animation:     fadeUp var(--anim-enter-sm) ease both;
}

/* Subtle radial glow — orange tint at top — art-direction exception */
.about-hero::before {
  content:        '';
  position:       absolute;
  top:            0;
  left:           50%;
  transform:      translateX(-50%);
  width:          700px;
  height:         220px;
  background:     radial-gradient(
    ellipse at top,
    rgba(249, 115, 22, 0.06) 0%,  /* art-direction: orange — no token */
    var(--accent-dot)        50%,  /* OPT-1: was rgba(61,139,212,0.03) */
    transparent              80%
  );
  pointer-events: none;
  z-index:        var(--z-base); /* OPT-2: inert ambient pseudo */
}

.about-hero-inner {
  position:  relative;
  z-index:   var(--z-base); /* OPT-2 */
  max-width: 1080px;
  margin:    0 auto;
}

/* Breadcrumb */
.about-breadcrumb {
  font-size:      var(--fs-eyebrow);
  font-weight:    var(--fw-bold);
  font-family:    var(--font-mono);
  color:          var(--page-muted);
  display:        flex;
  align-items:    center;
  gap:            var(--space-wide);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  margin-bottom:  var(--space-6xl);
}

.about-breadcrumb-chevron {
  font-size: var(--fs-text-sm); /* 12px */
  opacity:   0.4;
}

.about-breadcrumb-current {
  color: var(--color-enginuity-accent);
}

/* Split: headline left, subtitle right */
.about-hero-row {
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
  gap:             var(--space-13xl);
}

.about-hero-h1 {
  font-size:      var(--fs-about-h1);
  font-weight:    var(--fw-light);
  color:          var(--page-heading);
  flex:           1;
  max-width:      560px;
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tightest);
}

.about-hero-h1 em {
  font-style:  normal;
  font-weight: var(--fw-bold);
  color:       var(--color-enginuity-accent);
}

.about-hero-sub {
  font-size:   var(--fs-text-sub); /* 17px */
  font-weight: var(--fw-light);
  color:       var(--page-text);
  line-height: var(--leading-2xl);
  max-width:   310px;
  flex-shrink: 0;
}


/* ── Content Body ───────────────────────────────────────────────── */
.about-body {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-5xl);
  padding:        var(--space-12xl) var(--nav-padding-x) 80px;
}


/* ── Split Panel — two-column card ─────────────────────────────── */
.about-split {
  display:        grid;
  grid-template-columns: 1fr 1fr;
  background:     var(--page-card-bg);
  border:         1px solid var(--page-border);
  border-radius:  var(--radius);
  overflow:       hidden;
  box-shadow:     var(--shadow);
  animation:      fadeUp var(--anim-enter-base) 0.1s ease both;
}

.about-split-left {
  padding:      var(--space-13xl) var(--space-11xl);
  border-right: 1px solid var(--page-border);
}

.about-split-right {
  padding: var(--space-13xl) var(--space-11xl);
}

/* Section label — mono, uppercase, small */
.about-section-label {
  font-size:      var(--fs-text-base);  /* 13px */
  font-weight:    var(--fw-bold);
  font-family:    var(--font-mono);
  color:          var(--page-label);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  margin-bottom:  var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom:  1px solid var(--page-divider);
}


/* ── Origin Column (left) ───────────────────────────────────────── */
.about-origin {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-5xl);
  font-size:      var(--fs-text-md);  /* 14px */
  font-weight:    var(--fw-regular);
  color:          var(--page-text);
  line-height:    2; /* single use — not tokenized */
}

.about-origin .hl {
  font-weight: var(--fw-medium);
  color:       var(--page-heading);
}


/* ── Pillars Column (right) ─────────────────────────────────────── */
.about-pillars {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-5xl);
}

.about-pillar {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--space-2xl);
  padding:       var(--space-4xl) var(--space-5xl);
  background:    transparent;
  border:        1px solid var(--page-border);
  border-radius: var(--radius-sm);
  transition:    background var(--duration-slow) ease, border-color var(--duration-slow) ease; /* OPT-3 */
}

.about-pillar:hover {
  background:   var(--page-pillar-hover);
  border-color: var(--page-pillar-accent-border, var(--accent-glow-ring)); /* OPT-1 */
  box-shadow:   0 0 0 1px var(--page-pillar-accent-border, var(--accent-glow-ring));
}

/* Per-pillar accent hover — matches Partners page card pattern */
.about-pillar:nth-child(1) {
  --page-pillar-accent:        var(--c1);
  --page-pillar-accent-dim:    rgba(61, 139, 212, 0.08);   /* art-direction: blue alpha  */
  --page-pillar-accent-border: rgba(61, 139, 212, 0.28);   /* art-direction: blue border */
}

.about-pillar:nth-child(2) {
  --page-pillar-accent:        var(--color-enginuity-accent);
  --page-pillar-accent-dim:    rgba(249, 115, 22, 0.08);   /* art-direction: orange alpha  */
  --page-pillar-accent-border: rgba(249, 115, 22, 0.28);   /* art-direction: orange border */
}

.about-pillar:nth-child(3) {
  --page-pillar-accent:        var(--c3);
  --page-pillar-accent-dim:    rgba(46, 170, 160, 0.08);   /* art-direction: teal alpha  */
  --page-pillar-accent-border: rgba(46, 170, 160, 0.28);   /* art-direction: teal border */
}

.about-pillar:nth-child(1):hover,
.about-pillar:nth-child(2):hover,
.about-pillar:nth-child(3):hover {
  background:   var(--page-pillar-accent-dim);
  border-color: var(--page-pillar-accent-border);
  box-shadow:   0 0 0 1px var(--page-pillar-accent-border);
}

/* Colored left bar */
.about-pillar-bar {
  width:         3px;
  flex-shrink:   0;
  align-self:    stretch;
  min-height:    40px;
  border-radius: var(--radius-p-2xs);
}

.about-pillar-bar--blue   { background: var(--c1); }
.about-pillar-bar--orange { background: var(--color-enginuity-accent); }
.about-pillar-bar--teal   { background: var(--c3); }

.about-pillar-content { /* layout hook — no styles needed */ }

.about-pillar-title {
  font-size:      var(--fs-text-lg);  /* 15px */
  font-weight:    var(--fw-semibold);
  color:          var(--page-heading);
  letter-spacing: var(--tracking-snug);
  margin-bottom:  var(--space-tight);
}

.about-pillar-desc {
  font-size:   var(--fs-text-md);  /* 14px */
  color:       var(--page-text);
  line-height: var(--leading-lg);
}


/* ── Mission Strip ──────────────────────────────────────────────── */
.about-mission {
  background:    var(--page-card-bg);
  border:        1px solid var(--page-border);
  border-left:   4px solid var(--color-enginuity-accent);
  border-radius: var(--radius-sm);
  padding:       var(--space-9xl) var(--space-10xl);
  box-shadow:    0 4px 20px rgba(249, 115, 22, 0.07); /* art-direction: orange glow */
  animation:     fadeUp var(--anim-enter-base) 0.2s ease both;
}

.about-mission-label {
  font-size:      var(--fs-text-base);  /* 13px */
  font-weight:    var(--fw-bold);
  font-family:    var(--font-mono);
  color:          var(--color-enginuity-accent);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  margin-bottom:  var(--space-3xwide);
}

.about-mission-text {
  font-size:   var(--fs-text-5xl);  /* 28px */
  font-weight: var(--fw-light);
  color:       var(--page-text);
  font-style:  italic;
  line-height: var(--leading-2xl);
}

/* Three colorized mission phrases */
.about-mission-hl1 {
  font-style:  normal;
  font-weight: var(--fw-semibold);
  color:       var(--c1);
}

.about-mission-hl2 {
  font-style:  normal;
  font-weight: var(--fw-semibold);
  color:       var(--color-enginuity-accent);
}

.about-mission-hl3 {
  font-style:  normal;
  font-weight: var(--fw-semibold);
  color:       var(--c3);
}


/* ── Logo Footer ────────────────────────────────────────────────── */
.about-logo-footer {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding-top:     var(--space-5xl);
  border-top:      1px solid var(--page-divider);
  margin-top:      var(--space-5xl);
  animation:       fadeUp var(--anim-enter-lg) 0.3s ease both;
}


/* ── About Enginuity — Responsive ───────────────────────────────── */

/* Tablet — collapse hero to stacked, split to single column */
@media (max-width: 900px) {
  .about-hero { padding: 48px 32px 40px; }
  .about-body { padding: 36px 32px 64px; }

  .about-hero-row {
    flex-direction: column;
    align-items:    flex-start;
    gap:            24px;
  }

  .about-hero-sub { max-width: 100%; }

  .about-split {
    grid-template-columns: 1fr;
  }

  .about-split-left {
    border-right:  none;
    border-bottom: 1px solid var(--page-border);
  }
}

@media (max-width: 600px) {
  .about-hero { padding: 40px 20px 36px; }
  .about-body { padding: 28px 20px 56px; gap: 20px; }

  .about-split-left,
  .about-split-right { padding: 24px 20px; }

  .about-mission { padding: 18px 20px; }

  .about-logo-footer { padding-top: 32px; }
}


/* ── About Enginuity — Dark Theme ───────────────────────────────────
   Overrides --page-* tokens declared on .about-page.
   Brand accent colors (--color-enginuity-accent, --c1, --c3) are
   unchanged — globally overridden by base-2.css dark block.
   ─────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .about-page {
  --page-bg:             var(--color-overlay-page);
  --page-surface:        rgba(255, 255, 255, 0.04);
  --page-heading:        var(--color-white);
  --page-text:           var(--color-overlay-text);
  --page-muted:          var(--color-overlay-logo-dim);
  --page-border:         var(--color-overlay-border);
  --page-card-bg:        var(--color-overlay-btn-bg);
  --page-card-bg-inner:  rgba(255, 255, 255, 0.04);
  --page-label:          var(--color-overlay-logo-dim);
  --page-divider:        var(--color-overlay-border);
  --page-pillar-hover:   var(--color-overlay-btn-hover);
}

/* Dark: restore hero surface to a slightly lighter overlay card */
html[data-theme="dark"] .about-hero {
  background: var(--color-overlay-btn-bg);
}