/* ── BCI Redesign Stylesheet (Top Menu Navigation) ── */

:root {
  --bg: #ffffff;
  --bg-slate: #f8fafc;
  --bg-mint: #f0fdf4;
  --primary: #064e3b;      /* Deep Forest Green */
  --primary-dark: #022c22; /* Very Dark Forest Green */
  --accent: #10b981;       /* Vibrant Mint/Teal */
  --accent-light: #d1fae5;
  --ink: #0f172a;          /* Slate 900 */
  --muted: #475569;        /* Slate 600 */
  --light-muted: #94a3b8;  /* Slate 400 */
  --line: #e2e8f0;         /* Slate 200 */
  --line-light: #f1f5f9;
  
  --maxw: 1100px;
  --sans: "Inter", system-ui, sans-serif;
  --heading: "Outfit", system-ui, sans-serif;
  --mono: "IBM Plex Mono", monospace;
  --transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  --shadow-sm: 0 2px 6px rgba(6, 78, 59, 0.04);
  --shadow-md: 0 8px 24px rgba(6, 78, 59, 0.06);
  --shadow-lg: 0 16px 40px rgba(6, 78, 59, 0.1);
  --radius: 8px;

  /* Header heights */
  --ann-h: 40px;
  --hdr-h: 116px;  /* raised again (was 78px) for the 2× logo — client 2026-08 */
}

/* ── Reset & Core ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

ul {
  list-style: none;
}

/* ── Announcement Ribbon (Top-most) ── */
.ann {
  height: var(--ann-h);
  background: var(--primary-dark);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  border-bottom: 1.5px solid var(--accent);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(2, 44, 34, 0.15);
}

.ann .wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 40px;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ann-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.ann-tag .dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--accent);
}

.ann-lang {
  display: flex;
  gap: 12px;
}

.ann-lang a {
  opacity: 0.7;
}

.ann-lang a:hover, .ann-lang a.act {
  opacity: 1;
  color: var(--accent);
  font-weight: 600;
}

/* ── Main Nav Header (Horizontal Layout) ── */
.hdr {
  height: var(--hdr-h);
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  position: fixed;
  top: var(--ann-h);
  left: 0;
  right: 0;
  z-index: 99;
  box-shadow: var(--shadow-sm);
}

.nw {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 40px;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ── Brand logo (DTID master logo, 2026-08) ──
   The header carries the full lockup (globe + wordmark + descriptor); dark
   surfaces such as the footer use the globe mark on its own, because the navy
   wordmark is unreadable against them. */
.logo {
  display: flex;
  align-items: center;
}

.logo-img {
  display: block;
  height: 96px;   /* 2× the previous 52px lockup — client 2026-08 */
  width: auto;
}

/* Horizontal Link Menu */
.pnav {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 100%;
}

.ni {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.ni > a, .ni > button {
  font-size: 17px;
  font-weight: 600;
  color: var(--primary);
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  cursor: pointer;
  transition: var(--transition);
}

.ni:hover > a, .ni:hover > button, .ni.act > a {
  color: var(--accent);
}

.ni .arr {
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  transition: var(--transition);
}

.ni:hover .arr {
  transform: rotate(-135deg);
  margin-top: 2px;
}

/* Header Dropdowns */
.drop {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #ffffff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  padding: 8px 0;
  z-index: 105;
}

.ni:hover .drop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.drop a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 16px;
  color: var(--ink);
  font-weight: 500;
  transition: var(--transition);
}

.drop a:hover {
  background: var(--bg-slate);
  color: var(--accent);
}

.drop a .c {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent);
  padding: 1px 4px;
  border-radius: 3px;
}

/* Hamburger button */
.ham {
  display: none;
  font-size: 24px;
  color: var(--primary);
  cursor: pointer;
  padding: 6px;
}

/* Mobile full width menu dropdown */
.mnav {
  display: none;
  position: fixed;
  top: calc(var(--ann-h) + var(--hdr-h));
  left: 0;
  right: 0;
  background: #ffffff;
  border-bottom: 1.5px solid var(--line);
  z-index: 98;
  box-shadow: var(--shadow-lg);
  padding: 16px 24px;
  max-height: calc(100vh - var(--ann-h) - var(--hdr-h));
  overflow-y: auto;
}

.mnav.act {
  display: block;
}

.mnav-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--line-light);
}

.mnav-item:last-child {
  border-bottom: none;
}

.mnav-link {
  font-size: 17.5px;
  font-weight: 600;
  color: var(--primary);
  display: block;
  transition: var(--transition);
}

.mnav-link.act {
  color: var(--accent);
}

.mnav-sub {
  padding-left: 14px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mnav-sub a {
  font-size: 16px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.mnav-sub a.act {
  color: var(--accent);
  font-weight: 600;
}

.mnav-sub a .c {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  background: var(--accent-light);
  color: var(--primary);
  padding: 0 4px;
  border-radius: 3px;
}

/* ── Content Viewport Offsetting from Fixed Header ── */
.off {
  padding-top: calc(var(--ann-h) + var(--hdr-h));
  flex: 1;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  padding: 0 0 80px;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 40px;
}

/* ── Page Zoom-in Animation ── */
@keyframes pageExpandZoom {
  0% {
    opacity: 0;
    transform: scale(0.98) translateY(8px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.animate-fade-in {
  animation: pageExpandZoom 0.45s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
  transform-origin: center top;
}

/* ── Typography Outfit & Inter ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading);
  color: var(--primary);
  margin-top: 0;
}

h1 {
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.25;
}

h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 16px;
}

h3 {
  font-size: 18px;
  font-weight: 700;
}

p {
  color: var(--muted);
  line-height: 1.75;
}

/* ── Hero Mountain Section (Correct CSS relative image path) ── */
.hero {
  position: relative;
  /* v2.3 — new main hero image (image improvement plan, 2026-07) */
  background: url("images/hero_main.jpg") center/cover no-repeat;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* v2.6 — lighter left-dark scrim: keeps headline legible over the video/image
     while letting the footage read clearly (was 0.88/0.62/0.32). */
  background: linear-gradient(90deg, rgba(2, 44, 34, 0.72) 0%, rgba(2, 44, 34, 0.42) 52%, rgba(2, 44, 34, 0.16) 100%);
  z-index: 1;
}

/* v2.6 — full-bleed autoplay/muted/loop background video for the home hero. */
.hero .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  background: var(--primary-dark);
}

.hero-container {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
}

.hero-content {
  max-width: 680px;
  padding-top: 80px;
  padding-bottom: 60px;
  color: #ffffff;
  padding-left: 40px;
  padding-right: 40px;
}

.hbadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 20px;
  color: #ffffff;
}

.hbadge .dot {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent);
}

.hero-content h1 {
  font-size: clamp(26px, 4vw, 38px);
  color: #ffffff;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 18px;
  text-shadow: 0 2px 10px rgba(2, 44, 34, 0.3);
}

.hero-content p {
  font-size: 19px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 28px;
  line-height: 1.7;
  text-shadow: 0 1px 6px rgba(2, 44, 34, 0.3);
}

.hbtns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Overlapping Quick Cards */
.hero-overlap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  width: 100%;
  max-width: 840px;
  margin-left: auto;
  z-index: 10;
  margin-top: auto;
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius) 0 0 0;
  overflow: hidden;
}

.overlap-card {
  background: #ffffff;
  padding: 24px;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 110px;
}

.overlap-card:hover {
  background: var(--bg-slate);
}

.overlap-card .card-cat {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
}

.overlap-card h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.35;
  margin: 0;
}

.overlap-card:hover h4 {
  color: var(--accent);
}

/* ── News Serif Layout ── */
.news-title-serif {
  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.news-title-serif span {
  color: var(--accent);
}

.news-subtitle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  border-bottom: 1.5px solid var(--line);
  padding-bottom: 16px;
}

.news-subtitle {
  font-size: 19px;
  color: var(--muted);
}

.see-all-link {
  font-weight: 700;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.see-all-link:hover {
  color: var(--primary);
}

/* ── Editorial insight cards ──
   The format DTID supplied as the reference: headline above the image behind a
   rule, then the image, a short extract, and a centred "Read More →". Flat on
   the page — no frame, no shadow — so the type and the image carry the card. */
.ed-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 44px 32px;
}

.ed-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Headlines run to different lengths, which would start each image at a
   different height. Subgrid puts the four bands of every card on shared rows,
   so headlines, images, extracts and links line up straight across the row.
   Browsers without subgrid keep the flex column above and simply stack. */
@supports (grid-template-rows: subgrid) {
  .ed-grid {
    grid-auto-rows: auto auto 1fr auto;
  }

  .ed-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    row-gap: 18px;
  }

  .ed-title,
  .ed-media,
  .ed-extract {
    margin-bottom: 0;
  }

  .ed-more {
    justify-self: center;
  }
}

.ed-title {
  margin: 0 0 20px;
  padding-left: 16px;
  border-left: 3px solid var(--primary);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.ed-title a {
  color: var(--primary-dark);
  text-decoration: none;
  transition: var(--transition);
}

.ed-title a:hover {
  color: var(--accent);
}

.ed-media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin-bottom: 18px;
  background: var(--primary-dark);
}

.ed-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

.ed-card:hover .ed-media img {
  transform: scale(1.05);
}

.ed-extract {
  margin: 0 0 24px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--muted);
}

/* Sits at the foot of every card whatever the extract length. */
.ed-more {
  margin-top: auto;
  align-self: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--primary-dark);
  text-decoration: underline;
  text-underline-offset: 5px;
  transition: var(--transition);
}

.ed-more:hover {
  color: var(--accent);
}

/* Names the destination for screen readers without repeating it on screen. */
.scr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 12px;
}

.card-tag {
  font-family: var(--mono);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--accent);
}

.card-date {
  color: var(--muted);
}

.card-body h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 10px;
  line-height: 1.4;
  transition: var(--transition);
}

.card-body h3 a {
  color: inherit;
}

.card-body h3 a:hover {
  color: var(--accent);
}

.card-body p {
  font-size: 16.5px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 16px;
  flex-grow: 1;
}

/* ── Negotiations & Operations Cards Grid ── */
.ops-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.ops-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--primary);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 180px;
}

.ops-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-top-color: var(--accent);
}

.ops-card h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 12px;
  line-height: 1.35;
}

.ops-card p {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
  flex-grow: 1;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16.5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 18px;
  color: var(--muted);
  background: #ffffff;
  cursor: pointer;
  transition: var(--transition);
}

.btn:hover {
  border-color: var(--accent);
  color: var(--primary);
  background: var(--bg-slate);
}

.btn.solid {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

.btn.solid:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.btn.secondary {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}

.btn.secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #ffffff;
}

.btn.sm {
  padding: 6px 12px;
  font-size: 12.5px;
}

/* ── Content Layout Sections ── */
section {
  padding: 60px 0;
}

section.alt {
  background: var(--bg-slate);
}

.slbl {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent);
  margin-bottom: 10px;
  display: block;
}

.sh {
  font-size: 26px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 14px;
  line-height: 1.25;
}

/* v2.6 — enlarged "Who We Are" eyebrow + "About DTID" heading per client. */
.slbl-lg {
  font-size: 16px;
  letter-spacing: 2px;
  margin-bottom: 14px;
}
.sh-lg {
  font-size: 38px;
}

.slead {
  font-size: 18px;
  color: var(--muted);
  max-width: 720px;
  margin-bottom: 36px;
  line-height: 1.7;
}

/* ── Stats bar ── */
.stats {
  background: var(--primary);
  padding: 0;
  border-bottom: 4px solid var(--accent);
}

.sin {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
}

.stat {
  flex: 1;
  padding: 24px 16px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.stat:last-child {
  border-right: none;
}

.sn {
  font-size: 32px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  margin-bottom: 4px;
}

.sl {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* ── Focus Areas Topics visual blocks ── */
.focus-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.focus-card {
  position: relative;
  height: 320px;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  background-color: var(--primary-dark);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.focus-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
  z-index: 1;
}

.focus-card::before {
  content: "";
  position: absolute;
  inset: 0;
  /* v2.6 — lighter scrim so the photo reads; darkens only toward the label. */
  background: linear-gradient(180deg, rgba(2, 44, 34, 0.05) 0%, rgba(2, 44, 34, 0.62) 100%);
  z-index: 2;
  transition: var(--transition);
}

.focus-content {
  position: relative;
  z-index: 3;
  color: #ffffff;
  width: 100%;
}

.focus-card .sc {
  display: inline-block;
  margin-bottom: 6px;
}

.focus-card h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: #ffffff;
  transition: var(--transition);
}

.focus-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.focus-card:hover img {
  transform: scale(1.08);
}

.focus-card:hover::before {
  background: linear-gradient(180deg, rgba(2, 44, 34, 0.10) 0%, rgba(2, 44, 34, 0.7) 100%);
}

.focus-card:hover h3 {
  color: var(--accent);
}

/* ── Page Header Banners (Correct CSS relative image path) ── */
.ph {
  position: relative;
  /* Replaced assets/images/ with images/ so it resolves relative to assets/styles.css location */
  background: url("images/hero_mountains_sunrise.png") center/cover no-repeat;
  /* v2.6 — taller banner so the image reads as a prominent hero, not a strip. */
  min-height: 340px;
  padding: 104px 0;
  color: #ffffff;
}

.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  /* v2.6 — much lighter scrim (was 0.85/0.75). Keeps white text legible with a
     left-to-bottom darkening while letting the photograph show through. */
  background: linear-gradient(180deg, rgba(2, 44, 34, 0.34) 0%, rgba(2, 44, 34, 0.62) 100%);
  z-index: 1;
}

.ph-in {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 40px;
}

.breadcrumb {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.breadcrumb a {
  color: var(--accent-light);
}

.breadcrumb a:hover {
  color: #ffffff;
}

.breadcrumb .sep {
  opacity: 0.5;
}

.ph h1 {
  font-size: clamp(24px, 4vw, 32px);
  color: #ffffff;
  font-weight: 800;
  margin-bottom: 10px;
  line-height: 1.25;
}

.ph p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 780px;
  line-height: 1.6;
}

/* ── Matrix & Diagrams (Wireframe elements mapped) ── */
.matrix-container {
  position: relative;
  margin-top: 16px;
}

.matrix-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.matrix-cell {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
  position: relative;
  transition: var(--transition);
}

.matrix-cell:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.04);
}

.cell-num {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--accent);
  background: var(--bg-mint);
  padding: 2px 8px;
  border-radius: 4px;
  position: absolute;
  top: 16px;
  right: 16px;
}

.cell-title {
  margin: 0 0 8px;
  color: var(--primary);
  font-size: 17.5px;
  font-weight: 700;
  padding-right: 60px;
}

.cell-desc {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

.matrix-center-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}

.matrix-center-badge img {
  display: block;
  width: 24px;
  height: 24px;
}

/* Integration diagram */
.integration-diagram-container {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 24px;
  box-shadow: var(--shadow-sm);
  margin-top: 16px;
}

.diagram-title {
  font-family: var(--heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  text-align: center;
}

.diagram-svg-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.integration-svg {
  width: 100%;
  max-width: 440px;
  height: auto;
}

@keyframes flowLeftToRight {
  to { stroke-dashoffset: -20; }
}

.flow-line {
  animation: flowLeftToRight 2s linear infinite;
}

.node-group {
  transition: transform 0.25s ease;
  cursor: pointer;
}

.node-group:hover {
  transform: scale(1.04);
  transform-origin: center;
}

/* ── About Venn Diagram ── */
.venn-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 340px;
  position: relative;
  background: var(--bg-slate);
  border-radius: 8px;
  border: 1px solid var(--line);
  margin-top: 16px;
  overflow: hidden;
}

.venn-container {
  width: 300px;
  height: 300px;
  position: relative;
}

.venn-circle {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  transition: var(--transition);
  cursor: pointer;
}

.venn-circle:hover {
  transform: scale(1.04);
  z-index: 10 !important;
}

.venn-vision {
  background: rgba(6, 78, 59, 0.06);
  border: 1.5px solid var(--primary);
  top: 10px;
  left: 70px;
  z-index: 1;
}

.venn-mission {
  background: rgba(16, 185, 129, 0.06);
  border: 1.5px solid var(--accent);
  bottom: 20px;
  left: 10px;
  z-index: 2;
}

.venn-standards {
  background: rgba(59, 130, 246, 0.06);
  border: 1.5px solid #3b82f6;
  bottom: 20px;
  right: 10px;
  z-index: 3;
}

.venn-content h4 {
  font-size: 12px;
  margin: 0 0 4px;
  color: var(--primary);
}

.venn-content p {
  font-size: 9.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.3;
}

.venn-tag {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  color: var(--light-muted);
  margin-bottom: 2px;
  display: block;
}

.venn-intersection {
  width: 44px;
  height: 44px;
  background: var(--primary-dark);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  color: #ffffff;
}

/* About Us DG Message */
.dg-message {
  background: var(--bg-slate);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.dg-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--accent);
  box-shadow: var(--shadow-sm);
}

.dg-content {
  flex-grow: 1;
}

.dg-name {
  font-family: var(--heading);
  font-size: 19px;
  font-weight: 700;
  color: var(--primary);
}

.dg-title {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.qb {
  border-left: 3px solid var(--accent);
  padding-left: 14px;
  margin-bottom: 12px;
}

.qb p {
  font-style: italic;
  font-size: 17px;
  color: var(--primary);
  line-height: 1.6;
}

/* ── Project Implementation Details ── */
.prw {
  height: 6px;
  background: var(--line-light);
  border-radius: 3px;
  overflow: hidden;
  margin: 8px 0 16px;
}

.prf {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}

.sbdg {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.sa { background: #d1fae5; color: #065f46; } /* Active */
.sp { background: #fef3c7; color: #92400e; } /* Pilot */
.sc2 { background: #e0f2fe; color: #0369a1; } /* Completed */
.sd { background: #f1f5f9; color: #475569; } /* Design */

/* ── Tabs & Search (Insights) ── */
.btab {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
  border: 1px solid var(--line);
  background: #ffffff;
  transition: var(--transition);
}

.btab:hover, .btab.act {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

.sbar {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #ffffff;
  padding: 6px 16px;
  width: 260px;
}

.sbar input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 16.5px;
  color: var(--ink);
  background: transparent;
}

/* ── Form Inputs ── */
.fb {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow-sm);
}

.fi {
  margin-bottom: 16px;
}

.fi label {
  font-size: 16px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 6px;
  display: block;
}

.fi input, .fi select, .fi textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 16.5px;
  background: #ffffff;
  color: var(--ink);
  font-family: var(--sans);
  transition: var(--transition);
}

.fi input:focus, .fi select:focus, .fi textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.fi textarea {
  height: 96px;
  resize: vertical;
}

.fck {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 16px;
  color: var(--muted);
}

.fck input {
  accent-color: var(--accent);
  margin-top: 3px;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.aok {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg-mint);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: var(--radius);
  padding: 16px;
  font-size: 16.5px;
  color: var(--primary);
  margin-bottom: 20px;
}

.aok svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Contact Hubs ── */
.hub {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: var(--transition);
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}

.hub:hover {
  border-color: var(--accent);
}

.hico {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: var(--bg-slate);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 17px;
  flex-shrink: 0;
  border: 1px solid var(--line);
}

.hnm {
  font-family: var(--heading);
  font-size: 18.5px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 2px;
}

.had {
  font-size: 16px;
  color: var(--muted);
  margin-bottom: 4px;
}

.hem {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
}

.aff {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 18px;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--primary);
  background: var(--bg-slate);
  transition: var(--transition);
}

.aff:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: #ffffff;
}

/* ── Leadership LC cards ── */
.lc {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.lc:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.lc-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 19px;
  margin-bottom: 12px;
  object-fit: cover;
  border: 2px solid var(--line);
}

.lnm {
  font-family: var(--heading);
  font-size: 19px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 4px;
}

.lrl {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.lbio {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* ── Standard Footer ── */
.ftr {
  background: var(--primary-dark);
  color: rgba(255, 255, 255, 0.7);
  padding: 60px 0 40px;
  border-top: 4px solid var(--accent);
}

.ftr-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.ftr-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  margin-bottom: 16px;
}

.ftr-mark {
  display: block;
  width: 44px;
  height: 44px;
  flex: none;
}

.ftr-logo-title {
  font-family: var(--heading);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.ftr-desc {
  font-size: 16.5px;
  line-height: 1.6;
  max-width: 320px;
}

.ftr h4 {
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

.ftr-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ftr-links a {
  font-size: 16.5px;
  color: rgba(255, 255, 255, 0.7);
}

.ftr-links a:hover {
  color: var(--accent);
  padding-left: 4px;
}

.ftr-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  flex-wrap: wrap;
  gap: 16px;
}

.ftr-bottom-links {
  display: flex;
  gap: 20px;
}

.ftr-bottom-links a {
  color: rgba(255, 255, 255, 0.7);
}

.ftr-bottom-links a:hover {
  color: var(--accent);
}

/* ── Cards Grid ── */
.cgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 20px;
}

.card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.card-img-wrap {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: var(--primary-dark);
}

.card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

.card:hover .card-img-wrap img {
  transform: scale(1.06);
}

/* ── Focus Area grid ── */
.fg {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: start;
}

/* ── Responsive Styling ── */
@media (max-width: 992px) {
  /* v2.6 — shorter header bar on mobile for the enlarged logo. */
  :root { --hdr-h: 92px; }

  .pnav {
    display: none;
  }

  .ham {
    display: block;
  }
  
  .wrap {
    padding: 0 24px;
  }
  
  .nw {
    padding: 0 24px;
  }
  
  .ann .wrap {
    padding: 0 24px;
  }
  
  .off {
    padding-top: calc(var(--ann-h) + var(--hdr-h));
  }
  
  .fg, .ftr-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .cgrid {
    grid-template-columns: 1fr 1fr;
  }
  
  .ed-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px 28px;
  }

  .hero-overlap-grid {
    grid-template-columns: 1fr;
    margin-bottom: 0;
    position: static;
    margin-top: 24px;
    border-radius: var(--radius);
  }
  
  .ops-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .focus-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .matrix-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  .matrix-center-badge {
    display: none;
  }
}

@media (max-width: 640px) {
  section { padding: 40px 0; }
  .cgrid { grid-template-columns: 1fr; }
  .ops-grid { grid-template-columns: 1fr; }
  .focus-grid { grid-template-columns: 1fr; }
  .ed-grid { grid-template-columns: 1fr; gap: 36px; }
  .ed-title { font-size: 19px; }
  
  .sin {
    flex-wrap: wrap;
  }
  .stat {
    flex: 1 1 50%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .stat:nth-child(even) {
    border-right: none;
  }
  .stat:nth-child(3), .stat:nth-child(4) {
    border-bottom: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ── Premium Redesign & Layout Adjustments ── */
.dg-message-expanded {
  background: var(--bg-slate);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.dg-message-expanded:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}
.spotlight-card {
  transition: var(--transition);
}
.spotlight-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-left-color: var(--primary) !important;
}
.cta-section {
  transition: var(--transition);
}
.cta-section:hover {
  box-shadow: 0 20px 48px rgba(6, 78, 59, 0.18);
}
.standards-section {
  transition: var(--transition);
}
.standards-section:hover {
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-md);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.spotlight-card:hover .spotlight-img-wrap img {
  transform: scale(1.04);
}

@media (max-width: 768px) {
  .spotlight-card {
    flex-direction: column !important;
  }
  .spotlight-img-wrap {
    width: 100% !important;
    height: 160px !important;
    order: -1;
  }
}

/* =========================================================================
   Homepage v2.2 — client copy revision (2026-07)
   New sections: About, Impact at a Glance, Areas of Focus cards, CTA bands.
   Appended so existing rules above are untouched.
   ====================================================================== */

/* Hero without the overlap cards — centre the content in the band */
.hero.no-cards {
  min-height: 460px;
}
.hero.no-cards .hero-container {
  justify-content: center;
}
.hero.no-cards .hero-content {
  padding-top: 64px;
  padding-bottom: 64px;
}

/* ── About DTID ── */
.about-body {
  max-width: 860px;
}
.about-body p {
  font-size: 18.5px;
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: 16px;
}
.about-body p:last-child {
  margin-bottom: 0;
}

/* ── Impact at a Glance ── */
.impact {
  background: var(--primary);
  border-top: 4px solid var(--accent);
  border-bottom: 4px solid var(--accent);
  padding: 48px 0;
}
.impact .sh-invert {
  color: #ffffff;
  font-family: var(--heading);
  font-size: 34px;   /* v2.6 — larger (was 24px) per client */
  font-weight: 800;
  margin-bottom: 32px;
  text-align: center;
}
.impact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 32px;
}
.impact-item {
  text-align: center;
  padding: 0 8px;
}
.impact-n {
  font-family: var(--heading);
  font-size: 52px;   /* v2.6 — larger headline figures (was 34px) per client */
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 10px;
}
.impact-l {
  font-size: 18px;   /* v2.6 — was 16.5px */
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

/* ── Areas of Focus cards (reuses .cgrid/.card look) ── */
a.fa-card {
  text-decoration: none;
  color: inherit;
}
a.fa-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}
.fa-card .card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.fa-card .fa-code {
  display: inline-block;
  background: var(--accent);
  color: var(--primary-dark);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 10px;
  align-self: flex-start;
}
.fa-card h3 {
  font-size: 19.5px;
  line-height: 1.35;
  color: var(--primary);
  margin-bottom: 10px;
}
.fa-card p {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: 16px;
}
.fa-more {
  margin-top: auto;
  align-self: flex-start;
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
  transition: var(--transition);
}
a.fa-card:hover .fa-more {
  color: var(--accent);
}

/* ── CTA bands (Projects / Join / Contact) ── */
.cta-band {
  padding: 56px 0;
  text-align: center;
}
.cta-band.tinted {
  background: var(--bg-slate);
}
.cta-band.dark {
  background: var(--primary-dark);
}
.cta-band h2 {
  font-family: var(--heading);
  font-size: 26px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 12px;
}
.cta-band.dark h2 {
  color: #ffffff;
}
.cta-band p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 680px;
  margin: 0 auto 24px;
}
.cta-band.dark p {
  color: rgba(255, 255, 255, 0.82);
}

/* ── Insights heading row (reuses news grid below) ── */
.sec-head-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

/* ── Simplified footer (v2.2) ── */
.ftr-simple {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding-bottom: 26px;
}
.ftr-simple .ftr-tag {
  font-size: 16.5px;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}
.ftr-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 12.5px;
}
.ftr-legal a {
  color: rgba(255, 255, 255, 0.75);
  transition: var(--transition);
}
.ftr-legal a:hover {
  color: var(--accent);
}
.ftr-copy {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  padding-top: 14px;
}

/* ── Responsive ── */
@media (max-width: 992px) {
  .impact-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .impact-grid { grid-template-columns: 1fr; gap: 22px; }
  .impact-n { font-size: 42px; }   /* v2.6 — was 30px */
  .cta-band { padding: 44px 0; }
  .cta-band h2 { font-size: 22px; }
  .hero.no-cards { min-height: 380px; }
  .logo-img { height: 64px; }      /* v2.6 — was 38px (2× logo) */
  .sh-lg { font-size: 30px; }      /* v2.6 — About heading on mobile */
  .ftr-mark { width: 36px; height: 36px; }
}

/* ── Home intro video banner (v2.6) ──
   Covers the homepage on arrival and is dismissed by the close button, the
   backdrop, Escape, or the end of the clip; the site underneath is untouched.
   The source clip is 416x240, so it is presented as a contained panel rather
   than a full-bleed background — upscaling it edge-to-edge would look soft. */
.intro-veil {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 28px;
  background: radial-gradient(ellipse at center, #063a30 0%, #011a14 70%, #000000 100%);
  opacity: 1;
  transition: opacity 0.45s ease;
}

/* Dismissed state — faded out, then removed from the flow by .intro-gone. */
.intro-veil.is-closing {
  opacity: 0;
}

.intro-gone {
  display: none !important;
}

/* Hold the page still while the banner is up. */
body.intro-lock {
  overflow: hidden;
}

.intro-brand {
  display: block;
  height: 72px;
  width: auto;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}

.intro-frame {
  position: relative;
  width: min(760px, 100%);
  aspect-ratio: 416 / 240;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000000;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.intro-frame video,
.intro-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* Shown only when the browser refuses muted autoplay (app.js unhides it). */
.intro-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.intro-play[hidden] {
  display: none;
}

.intro-play-icon {
  display: block;
  width: 0;
  height: 0;
  margin-left: 6px;
  border-style: solid;
  border-width: 17px 0 17px 28px;
  border-color: transparent transparent transparent #ffffff;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

.intro-play:hover .intro-play-icon {
  border-left-color: var(--accent);
}

/* Shown when the clip cannot be loaded at all. */
.intro-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 24px;
  background: rgba(0, 0, 0, 0.72);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--sans);
  font-size: 14.5px;
  text-align: center;
}

.intro-fallback[hidden] {
  display: none;
}

.intro-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.intro-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: transparent;
  color: #ffffff;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.intro-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.intro-btn.solid {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--primary-dark);
  font-weight: 700;
}

.intro-btn.solid:hover {
  background: #0ea371;
  border-color: #0ea371;
  color: #ffffff;
}

/* Corner dismiss control. */
.intro-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
}

.intro-close:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--accent);
  color: var(--accent);
}

/* Before app.js runs the banner stays hidden, so browsers with JS disabled
   never get stranded on an overlay they cannot dismiss. */
.intro-veil {
  display: none;
}

.js-ready .intro-veil {
  display: flex;
}

@media (max-width: 640px) {
  .intro-veil { gap: 16px; padding: 20px; }
  .intro-brand { height: 40px; }
  .intro-close { top: 12px; right: 14px; width: 36px; height: 36px; font-size: 17px; }
  .intro-btn { padding: 10px 18px; font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-veil { transition: none; }
}