*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink:    #0A0A09;
  --mid:    #6B6B6B;
  --dim:    #666;
  --rule:   #E8E8E6;
  --accent: #005FA8;
  --sans:   'Inter', system-ui, sans-serif;
}

html {
  /* Stop iPhone Safari enlarging text it judges too small in wide blocks (it was
     blowing up the SafeWatch permissions table's group headings). Pinch-zoom and
     the user's own text-size settings are unaffected. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Reserve space for the 56px fixed nav so anchor targets and focused
     elements are never hidden beneath it (WCAG 2.4.11 Focus Not Obscured). */
  scroll-padding-top: 5rem;
}

body {
  font-family: var(--sans);
  background: #fff;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }

/* ════════════════════════════════════
   FOCUS STYLES
   Visible focus for keyboard navigation
   ════════════════════════════════════ */
:focus-visible {
  outline: 3px solid #005FA8;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Hero / blue-bg contexts: white focus ring */
.cs-hero-wrap :focus-visible,
.about-hero-wrap :focus-visible,
.hero-wrap :focus-visible {
  outline-color: #ffffff;
}

/* Nav unscrolled state: white text on transparent bg — white focus ring */
#site-nav:not(.scrolled) :focus-visible {
  outline-color: #ffffff;
}

/* Skip link — visually hidden until focused */
.skip-link {
  position: absolute;
  top: -100%;
  left: 8px;
  z-index: 9999;
  padding: 10px 20px;
  background: #005FA8;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 0 0 6px 6px;
  text-decoration: none;
  transition: top 0.1s;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

/* ════════════════════════════════════
   REDUCED MOTION
   ════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ════════════════════════════════════
   NAV
   ════════════════════════════════════ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 56px;
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s;
}

nav.scrolled {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--rule);
}

.nav-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  transition: color 0.3s;
}

nav.scrolled .nav-name { color: var(--ink); }

.nav-r {
  display: flex; align-items: center; gap: 24px;
}

.nav-r a {
  font-size: 13px;
  color: #fff;
  transition: color 0.3s, opacity 0.3s;
}
.nav-r a:hover { opacity: 0.8; }
/* Text links (not the LinkedIn pill) underline on hover as well. */
.nav-r a:not(.nav-resume):hover { text-decoration: underline; text-underline-offset: 4px; }

nav.scrolled .nav-r a { color: var(--mid); opacity: 1; }
nav.scrolled .nav-r a:hover { color: var(--ink); }

.nav-resume {
  font-size: 13px;
  font-weight: 500;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.6);
  padding: 6px 16px;
  border-radius: 100px;
  transition: background 0.3s, border-color 0.3s, color 0.3s !important;
}
.nav-resume:hover { background: rgba(255,255,255,0.15); }

nav.scrolled .nav-resume {
  color: var(--ink) !important;
  border-color: var(--ink) !important;
  background: transparent;
}
nav.scrolled .nav-resume:hover {
  background: var(--ink) !important;
  color: #fff !important;
}

/* Hamburger button — hidden by default, shown at small breakpoint */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}
.nav-hamburger:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
nav.scrolled .nav-hamburger:focus-visible {
  outline-color: var(--accent);
}
.nav-hamburger-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: background 0.3s;
}
nav.scrolled .nav-hamburger-bar { background: var(--ink); }

/* Mobile nav drawer */
@media (max-width: 680px) {
  .nav-hamburger { display: flex; }

  .nav-r {
    display: none;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--rule);
    padding: 8px 0 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  }

  .nav-r.nav-open { display: flex; }

  .nav-r a {
    color: var(--mid) !important;
    font-size: 15px;
    padding: 12px 24px;
  }
  .nav-r a:hover { color: var(--ink) !important; opacity: 1; }

  .nav-resume {
    margin: 0;
    padding: 12px 24px !important;
    text-align: left;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--mid) !important;
  }
  .nav-resume:hover {
    background: transparent !important;
    color: var(--ink) !important;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}


/* ════════════════════════════════════
   INDEX HERO
   ════════════════════════════════════ */
.hero-wrap { background: var(--accent); }

.hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: 136px 48px 88px;
}

.hero-eyebrow {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #C8DEFF;
  margin-bottom: 28px;
}

.hero-hed {
  font-size: clamp(40px, 6.5vw, 88px);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin-bottom: 44px;
  color: #fff;
}

.hero-hed .light { color: #A8CFFF; }
.hero-hed .strong { max-width: 600px; }

.hero-foot { display: block; }

.hero-sub {
  font-size: 24px;
  font-weight: 300;
  color: #C8DEFF;
  line-height: 1.8;
  max-width: 800px;
  margin-bottom: 32px;
}
.hero-sub strong { font-weight: 500; color: #fff; }

.hero-actions {
  display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap;
}

.avail-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 500;
  color: #C8DEFF;
}
.avail-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ADE80;
  animation: blink 2.4s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

.btn-dark {
  background: #fff; color: var(--accent);
  font-size: 13px; font-weight: 500;
  padding: 10px 22px; border-radius: 100px;
  display: inline-flex; align-items: center; gap: 7px;
  transition: opacity 0.12s;
}
.btn-dark:hover { opacity: 0.85; }

.btn-ghost {
  font-size: 13px; color: #C8DEFF;
  padding: 10px 22px; border-radius: 100px;
  /* 0.6 opacity → 3.4:1 on blue bg (WCAG 1.4.11 non-text contrast) */
  border: 1px solid rgba(255,255,255,0.6);
  transition: border-color 0.12s, color 0.12s;
}
.btn-ghost:hover { border-color: #fff; color: #fff; }


/* ════════════════════════════════════
   SECTIONS / LAYOUT
   ════════════════════════════════════ */
.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 72px 48px 96px;
}

.section-hd {
  display: flex; align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 18px;
  margin-bottom: 32px;
}

.section-title {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.section-title .light { color: var(--mid); }

.section-meta {
  font-size: 12px;
  color: var(--dim);
}


/* ════════════════════════════════════
   CARD GRID (index)
   ════════════════════════════════════ */
.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.card {
  /* The stat row adapts to the card's own width (see .card-impact below). */
  container-type: inline-size;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 12px;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  overflow: hidden;
  transition: border-color 0.14s;
  position: relative;
}
.card:hover { border-color: #ccc; }

.card-header {
  display: flex; align-items: flex-start;
  justify-content: space-between;
  padding: 22px 24px 14px;
  gap: 14px;
}

.card-meta { display: flex; flex-direction: column; gap: 8px; }

.card-tags { display: flex; flex-wrap: wrap; gap: 5px; }

.card-tag {
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--dim);
}

.card-title {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--ink);
}

.card-title a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.13s;
}

.card:hover .card-title a {
  color: var(--accent);
  text-decoration: underline;
}

.card:hover .card-title .light {
  color: var(--accent);
}

.card-title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.card-title .light { color: var(--mid); }

.card-arrow {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); flex-shrink: 0;
  transition: background 0.13s, color 0.13s;
}
.card:hover .card-arrow { background: var(--accent); color: #fff; }

.card-thumb-ph {
  width: 100%; aspect-ratio: 16/9;
  background: #F2F1EE;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--dim);
  text-transform: uppercase;
}

.card-impact {
  display: flex;
  border-top: 1px solid var(--rule);
}

.impact-chip {
  flex: 1;
  padding: 14px;
  border-right: 1px solid var(--rule);
}
.impact-chip:last-child { border-right: none; }

.impact-num {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 3px;
}

.impact-desc {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--mid);
  line-height: 1.35;
}
.impact-desc span {
  display: block;
  color: var(--dim);
}

/* Each description is a label line and a detail line, never more. When the
   card is too narrow for three stats side by side, they stack as rows with
   the number on the left, so both lines keep their full width. */
@container (max-width: 500px) {
  /* A shared two-column grid, so every description in the card starts at the
     same point however wide its number is. */
  .card-impact { display: grid; grid-template-columns: minmax(64px, max-content) 1fr; }
  .impact-chip {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    column-gap: 16px;
    /* Each number sits at the vertical centre of its two-line description. */
    align-items: center;
    padding: 12px 16px;
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }
  .impact-chip:last-child { border-bottom: none; }
  .impact-num { white-space: nowrap; margin-bottom: 0; line-height: 1.2; }
  .impact-desc { min-width: 0; }
}


/* ════════════════════════════════════
   FOOTER
   ════════════════════════════════════ */
/* Three columns with equal outer tracks, so the note sits at the true centre
   whatever the width of the name and links on either side. */
footer {
  border-top: 1px solid var(--rule);
  padding: 24px 48px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.footer-name { justify-self: start; }
.footer-note { justify-self: center; text-align: center; }
.footer-links-group { justify-self: end; display: flex; align-items: center; gap: 16px; }
.footer-name {
  font-size: 13px; font-weight: 700;
  letter-spacing: -0.02em;
}
.footer-note { font-size: 12px; color: var(--dim); }
.footer-changelog {
  font-size: 11px;
  color: var(--dim);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.12s;
  /* 24px tall target (WCAG 2.5.8) */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.footer-changelog:hover { color: var(--accent); }


/* ════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════ */
@keyframes up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-wrap { animation: up 0.45s ease both; }
.wrap      { animation: up 0.45s 0.05s ease both; }


/* ════════════════════════════════════
   ABOUT PAGE
   ════════════════════════════════════ */
.about-hero-wrap { background: var(--accent); }

.about-hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: 136px 48px 88px;
}

.about-eyebrow {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #C8DEFF;
  margin-bottom: 28px;
}

.about-hed {
  font-size: clamp(40px, 6.5vw, 88px);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 40px;
}

.about-hed .light { color: #A8CFFF; }

.about-lede {
  font-size: 20px;
  font-weight: 300;
  color: #C8DEFF;
  line-height: 1.75;
  max-width: 740px;
}
.about-lede strong { font-weight: 500; color: #fff; }

.about-bio-wrap {
  border-bottom: 1px solid var(--rule);
}

.about-bio {
  max-width: 1120px;
  margin: 0 auto;
  padding: 72px 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.about-bio-col p {
  font-size: 15px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.85;
  margin-bottom: 20px;
}
.about-bio-col p:last-child { margin-bottom: 0; }

.about-bio-col p strong {
  font-weight: 500;
  color: var(--ink);
}

.about-bio-col a {
  color: var(--accent);
  text-decoration: none;
  font-style: italic;
  transition: opacity 0.12s;
}
.about-bio-col a:hover { opacity: 0.75; }

.about-principles {
  padding-top: 40px;
}
/* About principles section header */
.about-principles-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 48px 96px;
}

.about-principles-hd {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 18px;
  margin-bottom: 0;
  padding-top: 72px;
}

@media (max-width: 860px) {
  .about-principles-wrap { padding: 0 24px 72px; }
}


.principles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.principle-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  padding: 40px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.principle-row:first-child { border-top: none; }

.principle-row:last-child { border-bottom: none;}

.principle-claim {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--ink);
}

.principle-body {
  font-size: 15px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.8;
}

/* About — Skills section */
.about-skills-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 48px 80px;
}

.about-skills {
  padding-top: 40px;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-top: 40px;
}

.skill-group-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
}

.skill-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.skill-list li {
  font-size: 14px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.6;
  padding: 5px 0;
  border-bottom: 1px solid var(--rule);
}

.skill-list li:last-child { border-bottom: none; }

/* Case study hero — CTA actions */
.cs-hero-actions {
  margin-top: 25px;
  display: flex;
}

.btn-ghost--hero {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  /* 0.6 opacity → 3.4:1 on blue bg (WCAG 1.4.11 non-text contrast) */
  border: 1px solid rgba(255,255,255,0.6);
  padding: 8px 14px;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}

.btn-ghost--hero:hover {
  color: #fff;
  border-color: #fff;
}


/* ════════════════════════════════════
   CASE STUDY — SHARED
   ════════════════════════════════════ */
.cs-hero-wrap { background: var(--accent); }
.cs-hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: 88px 48px 56px;
}

.cs-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  color: #C8DEFF;
  text-decoration: none;
  margin-bottom: 28px;
  transition: color 0.14s;
}
.cs-back:hover { color: #fff; }

.cs-hero-tags {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 20px;
}

/* #C8DEFF on blue bg → 4.61:1 ✓ */
.cs-hero-tag {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #ffffff;
  background: rgba(255,255,255,0.12);
  padding: 4px 10px;
  border-radius: 4px;
}

.cs-hero-title {
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 0;
}

/* ── Meta strip ── */
.cs-meta-strip {
  border-bottom: 1px solid var(--rule);
}

.cs-meta-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.cs-meta-item {
  padding: 22px 0;
  border-right: 1px solid var(--rule);
  padding-right: 24px;
  margin-right: 24px;
  /* Let grid columns shrink at 320px instead of pushing the page sideways (WCAG 1.4.10) */
  min-width: 0;
  overflow-wrap: anywhere;
}
.cs-meta-item:last-child { border-right: none; margin-right: 0; }

.cs-meta-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dim);
  margin-bottom: 5px;
}

.cs-meta-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* ── Two-column layout ── */
.cs-layout {
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px 48px 96px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 64px;
  align-items: start;
}

/* ── Sticky sidenav ── */
.cs-sidenav {
  position: sticky;
  top: 80px;
}

.cs-sidenav-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--dim);
  margin-bottom: 16px;
}

.cs-sidenav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-sidenav-links a {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--mid);
  padding: 6px 10px;
  min-height: 24px;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  text-decoration: none;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  line-height: 1.3;
}
.cs-sidenav-links a:hover {
  background: #F2F1EE;
  color: var(--ink);
}
.cs-sidenav-links a.active {
  color: var(--accent);
  font-weight: 500;
  background: transparent;
  border-left: 2px solid var(--accent);
  padding-left: 8px;
  margin-left: -2px;
}

/* ── Main content ── */
.cs-content { min-width: 0; }

.cs-impact-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 64px;
}

.cs-impact-cell {
  background: #fff;
  padding: 20px 22px;
}

.cs-impact-num {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 5px;
}

.cs-impact-desc {
  font-size: 12px;
  color: var(--mid);
  line-height: 1.4;
}
.cs-impact-desc span {
  display: block;
  color: var(--dim);
  font-size: 11px;
  margin-top: 1px;
}

.cs-h2 {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 12px;
}

.cs-h3 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 20px;
}

.cs-p {
  font-size: 15px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.85;
  margin-bottom: 20px;
}
.cs-p strong { font-weight: 500; color: var(--ink); }

.cs-section { margin-bottom: 64px; }

.cs-img-full {
  width: 100%;
  margin-bottom: 64px;
  background: #F2F1EE;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--rule);
}
.cs-img-full img { width: 100%; display: block; }

.cs-img-full-ph {
  width: 100%;
  aspect-ratio: 16/6;
  background: #F2F1EE;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dim);
}

.cs-img {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
  background: #F2F1EE;
  border: 1px solid var(--rule);
}
.cs-img img { width: 100%; display: block; }

.cs-img-ph {
  width: 100%;
  aspect-ratio: 4/3;
  background: #F2F1EE;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dim);
}

.cs-img-caption {
  font-size: 11.5px;
  color: var(--dim);
  text-align: center;
  margin-bottom: 40px;
  line-height: 1.5;
}

.cs-img-2up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.cs-img-2up .cs-img { margin-bottom: 0; }

.cs-callout {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 24px;
  margin: 40px 0;
}

.cs-callout-text {
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.55;
  letter-spacing: -0.01em;
}

.cs-exec-summary {
  background: #f2f3f5;
  border-radius: 8px;
  padding: 24px 28px;
  margin: 40px 0;
}

.cs-exec-summary-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dim);
  margin-bottom: 10px;
}

.cs-exec-summary-text {
  font-size: 16px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.7;
  margin-bottom: 12px;
}

.cs-list {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
}
.cs-list li {
  font-size: 15px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.75;
  padding-left: 18px;
  position: relative;
  margin-bottom: 6px;
}
.cs-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--dim);
  font-weight: 300;
}

.cs-next {
  border-top: 1px solid var(--rule);
  margin-top: 80px;
  padding-top: 40px;
  display: flex;
  gap: 50px;
}

.cs-next-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--dim);
  margin-bottom: 8px;
}

.cs-next-title {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.cs-next-arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
  transition: background 0.14s, color 0.14s;
  text-decoration: none;
}
.cs-next-arrow:hover { background: var(--accent); color: #fff; }

/* ── Graphic wrapper (shared by audiogram + cova) ── */
.cs-graphic {
  margin: 0 0 48px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  background: #FAFAF9;
}

.cs-graphic-label {
  display: block;
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 0.04em;
  line-height: 1.5;
  padding: 10px 20px;
  border-top: 1px solid var(--rule);
  background: #fff;
  margin: 0;
}

/* ── Phase table (shared by audiogram + cova) ── */
.cs-phase-table {
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 40px;
}

.cs-phase-header {
  background: var(--accent);
  padding: 11px 20px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #C8DEFF;
}

.cs-phase-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  border-bottom: 1px solid var(--rule);
}
.cs-phase-row--last { border-bottom: none; }

.cs-phase-label {
  padding: 18px 16px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
  background: #FAFAF9;
  border-right: 1px solid var(--rule);
  line-height: 1.4;
}

.cs-phase-items {
  list-style: none;
  padding: 14px 18px;
  margin: 0;
}
.cs-phase-items li {
  font-size: 13.5px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.65;
  padding-left: 16px;
  position: relative;
  margin-bottom: 5px;
}
.cs-phase-items li:last-child { margin-bottom: 0; }
.cs-phase-items li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 11px;
  font-weight: 400;
  top: 1px;
}


/* ════════════════════════════════════
   BEYOND THE AUDIOGRAM — CASE STUDY
   ════════════════════════════════════ */

/* ── Journey diagram ── */
.jd-wrap {
  padding: 20px 20px 0;
  background: #FAFAF9;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.jd-phase {
  border-radius: 8px;
  padding: 16px 16px 20px;
  border: 1px solid var(--rule);
}
.jd-phase--pre  { background: #F2F1EE; }
.jd-phase--surg { background: #EEF2F8; border-color: #C8D8EE; }
.jd-phase--post { background: #F2F1EE; }

.jd-phase-label {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mid);
  margin-bottom: 14px;
  text-align: center;
}

.jd-arrow--v {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #B0AFA8;
  height: 28px;
  flex-shrink: 0;
}

.jd-row {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.jd-row--3 { gap: 0; }
.jd-row--3 .jd-stage { flex: 1; }

.jd-row--center { justify-content: center; }
.jd-row--center .jd-stage {
  max-width: 480px;
  width: 100%;
}

.jd-arrow--h {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #B0AFA8;
  flex-shrink: 0;
  padding: 0 6px;
  align-self: center;
}

.jd-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}
.jd-col .jd-stage { width: 100%; }
.jd-col .jd-arrow--v { height: 24px; }

.jd-stage {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 12px 14px;
  position: relative;
}
.jd-phase--surg .jd-stage { border-color: #C8D8EE; }

.jd-stage--hot {
  background: #FFF8F6;
  border-color: #D85A30;
  border-width: 1.5px;
}

.jd-stage-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 3px;
  letter-spacing: -0.01em;
}

.jd-stage-sub {
  font-size: 11.5px;
  color: var(--mid);
  line-height: 1.4;
  margin-bottom: 2px;
}
.jd-stage-sub--hot { color: #993C1D; }

.jd-stage-note {
  font-size: 10.5px;
  color: var(--dim);
  line-height: 1.4;
  margin-top: 2px;
}
.jd-stage-note--hot { color: #B05535; }

.jd-additions {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  border-top: 1px solid #F0EFED;
  padding-top: 7px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.jd-additions li {
  font-size: 10.5px;
  color: var(--accent);
  line-height: 1.4;
  padding-left: 12px;
  position: relative;
}
.jd-additions li::before {
  content: '+';
  position: absolute;
  left: 0;
  font-weight: 500;
  color: var(--accent);
}

.jd-hot-badge {
  position: absolute;
  top: -9px;
  right: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #D85A30;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}

.jd-spine {
  margin-top: 16px;
  background: #E6F2EE;
  border: 1px solid #9FD8C4;
  border-radius: 5px;
  padding: 9px 16px;
  font-size: 10px;
  font-weight: 500;
  color: #0F6E56;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.jd-checkin {
  margin-top: 6px;
  background: #F2F1EE;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 7px 16px;
  font-size: 10px;
  color: var(--dim);
  text-align: center;
  letter-spacing: 0.04em;
}

.jd-source {
  font-size: 10px;
  color: var(--dim);
  margin: 12px 0 16px;
  line-height: 1.4;
}

.jd-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 0 16px;
}
.jd-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--dim);
}
.jd-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.jd-legend-swatch--hot  { background: #FFF8F6; border: 1.5px solid #D85A30; }
.jd-legend-swatch--peer { background: #E6F2EE; border: 1px solid #9FD8C4; }
.jd-legend-swatch--add  { background: #fff;    border: 1px solid var(--accent); }

/* ── Quote pair ── */
.cs-quote-2up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 64px;
}
.cs-quote-card {
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 22px 22px 18px;
  background: #FAFAF9;
}
.cs-quote-card p {
  font-size: 14px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.7;
  margin-bottom: 12px;
  font-style: italic;
}
.cs-quote-card cite {
  font-size: 11px;
  font-weight: 500;
  font-style: normal;
  color: var(--dim);
  letter-spacing: 0.06em;
}

/* ── Theme grid ── */
.cs-theme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 20px;
  background: #FAFAF9;
}
.cs-theme-phase {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 16px 18px;
}
.cs-theme-phase-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 14px;
}
.cs-theme-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.cs-theme-row:last-child { margin-bottom: 0; }
.cs-theme-pct {
  font-size: 10px;
  font-weight: 500;
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 4px;
  line-height: 1.5;
  margin-top: 1px;
}
.cs-pct-full  { background: #E6F0FB; color: #185FA5; }
.cs-pct-high  { background: #EEF6F2; color: #1D7A4E; }
.cs-pct-mid   { background: #F5F5F0; color: #5A5A52; }
.cs-theme-name {
  font-size: 12.5px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.5;
}

/* ── Sky case study block ── */
.cs-sky-block {
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 64px;
}
.cs-sky-header {
  background: var(--ink);
  padding: 16px 24px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.cs-sky-eyebrow {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.74);
  flex-shrink: 0;
}
.cs-sky-name {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.01em;
}
.cs-sky-body {
  padding: 28px 28px 8px;
  background: #FAFAF9;
}
.cs-sky-body .cs-p { font-size: 14.5px; }
.cs-sky-body .cs-callout { margin-top: 24px; margin-bottom: 24px; }


/* ════════════════════════════════════
   COVA DESIGN SYSTEM — CASE STUDY
   ════════════════════════════════════ */

/* ── Palette audit diagram ── */
.cova-palette-audit {
  padding: 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cpa-row {
  display: grid;
  grid-template-columns: 1fr 32px 1fr 1fr;
  align-items: center;
  gap: 12px;
}
.cpa-swatch {
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 72px;
  justify-content: flex-end;
  position: relative;
}
.cpa-fail { border: 2px solid #C0392B; }
.cpa-pass { border: 2px solid #1D7A4E; }
.cpa-label {
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  font-family: 'Inter', monospace;
  letter-spacing: 0.02em;
}
.cpa-ratio {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;
  align-self: flex-start;
}
.cpa-ratio--fail { background: rgba(192, 57, 43, 0.85); color: #fff;}
.cpa-ratio--pass { background: rgba(29, 122, 78, 0.85); color: #fff;}
.cpa-arrow {
  text-align: center;
  font-size: 16px;
  color: var(--dim);
  font-weight: 300;
}
.cpa-arrow--keep {
  color: #1D7A4E;
  font-size: 18px;
  font-weight: 700;
}
.cpa-note {
  font-size: 11.5px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.5;
}

/* ── Terminal 4 architecture diagram ── */
.cova-t4-diagram {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cova-t4-row {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  align-items: center;
  gap: 0;
}
.cova-t4-box {
  border-radius: 8px;
  padding: 16px 18px;
  border: 1px solid var(--rule);
}
.cova-t4-box--cms       { background: #F2F1EE; border-color: var(--rule); }
.cova-t4-box--output    { background: #FFF5F5; border-color: #E8BFBF; }
.cova-t4-box--output-pass { background: #F0F8F4; border-color: #9FD8C4; }
.cova-t4-box--solution  { background: #EEF4FB; border-color: #C8DEFF; }
.cova-t4-label {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--dim);
  margin-bottom: 6px;
}
.cova-t4-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 5px;
}
.cova-t4-detail {
  font-size: 11.5px;
  color: var(--mid);
  line-height: 1.4;
  font-weight: 300;
}
.cova-t4-detail code {
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 11px;
  background: rgba(0,0,0,0.06);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--ink);
}
.cova-t4-detail--warn { color: #993C1D; font-weight: 400; }
.cova-t4-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
}
.cova-t4-connector-line {
  display: block;
  width: 100%;
  height: 1px;
  background: #C0392B;
  opacity: 0.4;
}
.cova-t4-connector--solution .cova-t4-connector-line { background: var(--accent); }
.cova-t4-connector-label {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #993C1D;
  white-space: nowrap;
}
.cova-t4-connector--solution .cova-t4-connector-label { color: var(--accent); }
.cova-t4-insight {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 16px 20px;
}
.cova-t4-insight-hed {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #993C1D;
  margin-bottom: 8px;
}
.cova-t4-insight-body {
  font-size: 13px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.7;
}
.cova-t4-insight-body em {
  font-style: italic;
  color: var(--ink);
}


/* ════════════════════════════════════
   COMING SOON PAGE
   ════════════════════════════════════ */
body.coming-soon {
  --cs-bg:     #005FA8;
  --cs-text-1: #FFFFFF;
  --cs-text-2: #C8DEFF;
  --cs-text-3: #A0C4FF;
  --cs-border: #1E78C2;
  height: 100%;
  background: var(--cs-bg);
  color: var(--cs-text-1);
}
body.coming-soon .page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.coming-soon nav {
  position: static;
  height: auto;
  padding: 28px 52px;
  background: transparent;
  border-bottom: none;
  transition: none;
}
body.coming-soon .nav-name {
  color: var(--cs-text-1);
  transition: none;
}
body.coming-soon .nav-email {
  font-size: 13px;
  color: var(--cs-text-2);
  transition: color 0.12s;
}
body.coming-soon .nav-email:hover { color: var(--cs-text-1); }
body.coming-soon .hero {
  flex: 1;
  display: flex;
  align-items: center;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 52px 80px;
  animation: up 0.5s ease both;
}
body.coming-soon .hero-eyebrow { color: var(--cs-text-2); margin-bottom: 24px; }
body.coming-soon .hero-hed {
  font-size: clamp(40px, 6vw, 84px);
  line-height: 0.97;
  margin-bottom: 32px;
  color: var(--cs-text-1);
}
body.coming-soon .hero-hed .light { color: var(--cs-text-3); }
body.coming-soon .hero-lede {
  font-size: 24px;
  font-weight: 300;
  color: var(--cs-text-2);
  line-height: 1.7;
  max-width: 700px;
  margin-bottom: 36px;
}
body.coming-soon .hero-lede .highlight {
  color: var(--cs-text-1);
  font-weight: 500;
}
body.coming-soon .hero-sub {
  font-size: 15px;
  font-weight: 300;
  color: var(--cs-text-2);
  line-height: 1.75;
  max-width: 520px;
  margin-bottom: 40px;
}
body.coming-soon .soon-pill {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid var(--cs-border);
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cs-text-2);
}
body.coming-soon footer {
  padding: 20px 52px;
  border-top: 1px solid var(--cs-border);
  border-bottom: none;
  flex-shrink: 0;
}
body.coming-soon .footer-copy {
  font-size: 13px;
  font-weight: 400;
  color: var(--cs-text-2);
  letter-spacing: 0;
}
body.coming-soon .footer-links a {
  font-size: 13px;
  color: var(--cs-text-2);
  transition: color 0.12s;
}
body.coming-soon .footer-links a:hover { color: var(--cs-text-1); }


/* ════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════ */
@media (max-width: 860px) {
  nav    { padding: 0 24px; }
  footer { padding: 20px 24px; grid-template-columns: 1fr; gap: 4px; }
  .footer-name, .footer-note, .footer-links-group { justify-self: center; text-align: center; }

  .hero         { padding: 110px 24px 64px; }
  .wrap         { padding-left: 24px; padding-right: 24px; }

  .about-hero   { padding: 110px 24px 64px; }
  .about-bio    { padding: 56px 24px; grid-template-columns: 1fr; gap: 0; }
  .about-bio-col:first-child { margin-bottom: 24px; }
  .about-principles { padding: 56px 24px 72px; }
  .about-skills-wrap { padding: 0 24px 56px; }
  .skills-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .principle-row    { grid-template-columns: 1fr; gap: 16px; }

  .cs-hero      { padding: 80px 24px 48px; }
  .cs-meta-inner { grid-template-columns: 1fr 1fr; padding: 0 24px; }
  .cs-meta-item  { padding: 18px 0; margin-right: 16px; padding-right: 16px; }
  .cs-meta-item:nth-child(2n) { border-right: none; margin-right: 0; padding-right: 0; }
  .cs-layout     { grid-template-columns: 1fr; padding: 48px 24px 72px; gap: 0; }
  .cs-sidenav    { display: none; }
  .filter-bar    { display: none; }
  .cs-impact-row { grid-template-columns: 1fr; }

  /* Journey diagram */
  .jd-row--3           { flex-direction: column; }
  .jd-row--3 .jd-arrow--h { transform: rotate(90deg); height: 24px; padding: 0; align-self: center; }
  .jd-col              { max-width: 100%; }
  .jd-row--center .jd-stage { max-width: 100%; }

  /* Audiogram components */
  .cs-quote-2up  { grid-template-columns: 1fr; }
  .cs-theme-grid { grid-template-columns: 1fr; padding: 12px; }
  .cs-phase-row  { grid-template-columns: 1fr; }
  .cs-phase-label { border-right: none; border-bottom: 1px solid var(--rule); }

  /* COVA components */
  .cpa-row  { grid-template-columns: 1fr 24px 1fr; }
  .cpa-note { grid-column: 1 / -1; }
  .cova-t4-row { grid-template-columns: 1fr 48px 1fr; }

  body.coming-soon nav    { padding: 24px; }
  body.coming-soon footer { padding: 20px 24px; flex-direction: column; align-items: flex-start; gap: 12px; }
  body.coming-soon .hero  { padding: 32px 24px 64px; }
  body.coming-soon .hero-lede { font-size: 16px; }
}

@media (max-width: 560px) {
  .hero-hed   { font-size: 36px; }
  .about-hed  { font-size: 36px; }
  .card-grid  { grid-template-columns: 1fr; }
  .cs-meta-inner { grid-template-columns: 1fr 1fr; }
  .cs-img-2up { grid-template-columns: 1fr; }
  .skills-grid { grid-template-columns: 1fr; }
  .cs-sky-header { flex-direction: column; gap: 4px; }
  .jd-wrap  { padding: 14px 14px 0; }
  .jd-phase { padding: 12px 12px 16px; }

  .cova-palette-audit { padding: 16px 16px 8px; }
  .cpa-row  { grid-template-columns: 1fr 24px 1fr; }
  .cpa-note { display: none; }
  .cova-t4-diagram { padding: 16px; }
  .cova-t4-row { grid-template-columns: 1fr; gap: 8px; }
  .cova-t4-connector { flex-direction: row; padding: 0; }
  .cova-t4-connector-line { height: 1px; width: 100%; }
}

@media (max-width: 480px) {
  body.coming-soon .hero-hed { font-size: 38px; }
}


/* ════════════════════════════════════
   WRITING PAGE
   ════════════════════════════════════ */

/* ── Archive bar ── */
.writing-archive-bar {
  background: #F2F1EE;
  border-bottom: 1px solid var(--rule);
}
.writing-archive-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 13px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.writing-archive-note {
  font-size: 12px;
  color: var(--mid);
}
.writing-archive-link {
  font-weight: 500;
  color: var(--accent);
  white-space: nowrap;
  transition: opacity 0.12s;
}
/* On narrow screens the label wraps rather than widening the page (WCAG 1.4.10). */
@media (max-width: 480px) {
  .writing-archive-link { white-space: normal; }
}
.writing-archive-link:hover { opacity: 0.75; }

/* ── AI response comparison cards ── */
.writing-ai-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 28px 0;
}
.writing-ai-card {
  background: #F2F1EE;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 18px 20px;
}
.writing-ai-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dim);
  margin-bottom: 10px;
}
.writing-ai-card p {
  font-size: 13.5px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.75;
  font-style: italic;
}

/* ── References list ── */
.cs-refs {
  border-top: 1px solid var(--rule);
  margin-top: 64px;
  padding-top: 40px;
}
.cs-refs-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--dim);
  margin-bottom: 20px;
}
.cs-refs ol {
  list-style: none;
  padding: 0;
  counter-reset: refs;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cs-refs ol li {
  font-size: 12.5px;
  font-weight: 300;
  color: var(--dim);
  line-height: 1.65;
  padding-left: 20px;
  position: relative;
}
.cs-refs ol li::before {
  content: counter(refs);
  counter-increment: refs;
  position: absolute;
  left: 0;
  font-size: 10px;
  font-weight: 500;
  color: var(--accent);
  top: 2px;
}
.cs-refs a {
  /* Long DOIs and URLs may break anywhere, or they push the page sideways on phones. */
  overflow-wrap: anywhere;
  color: var(--accent);
  /* Underlined so a reference link doesn't rely on colour alone (WCAG 1.4.1) */
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.12s;
}
.cs-refs a:hover { opacity: 0.75; }

/* Inline links in body prose - underlined so they don't rely on color alone */
.cs-p a,
.cs-callout-text a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.12s;
}
.cs-p a:hover,
.cs-callout-text a:hover { opacity: 0.75; }

/* ── Color-pinning: prevent animation fill-mode bleed ── */
.cs-layout        { color: var(--ink); animation: none; }
.cs-content       { color: var(--ink); }

@media (max-width: 860px) {
  .writing-archive-inner { padding: 13px 24px; }
  .writing-ai-grid { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════
   CASE STUDY — VT2 PLAYER RETROSPECTIVE
   ════════════════════════════════════ */

/* Findings grid */
.vt2-findings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 40px;
}

.vt2-finding {
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
}

.vt2-finding--full { grid-column: 1 / -1; }

.vt2-finding-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule);
}

.vt2-finding-header--positive { background: rgba(45, 122, 69, 0.06); }
.vt2-finding-header--negative  { background: rgba(192, 57, 43, 0.06); }
.vt2-finding-header--mixed     { background: rgba(123, 74, 160, 0.06); }

.vt2-finding-content {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.vt2-finding-verdict {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 4px;
}

.vt2-finding-verdict--positive { color: #297340; background: rgba(45, 122, 69, 0.10); }
.vt2-finding-verdict--negative { color: #AF3427; background: rgba(192, 57, 43, 0.10); }
.vt2-finding-verdict--mixed    { color: #7B4AA0; background: rgba(123, 74, 160, 0.10); }

.vt2-finding-body {
  font-size: 13px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.7;
  padding: 14px 16px 0;
}

.vt2-finding-signal {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 10px 16px 14px;
  margin-top: 12px;
}

.vt2-signal-label {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dim);
  white-space: nowrap;
  flex-shrink: 0;
}

.vt2-signal-text {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.5;
  font-style: italic;
}

@media (max-width: 860px) {
  .vt2-findings-grid { grid-template-columns: 1fr; }
  .vt2-finding--full { grid-column: 1; }
}


/* ════════════════════════════════════
   CASE STUDY — DARKTIDE ALPHA PLAYTEST
   ─────────────────────────────────────
   Participant group palette:
     Live Hardcore   #005FA8  (accent blue)
     Modded Hardcore #2D7A45  (green — 4.52:1 on white ✓ AA)
     Influencers     #7B4AA0  (purple — 4.52:1 on white ✓ AA)
     All groups      #0A0A09  (ink)
   ════════════════════════════════════ */

.dt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule);
}

.dt-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 400;
  color: var(--mid);
}

.dt-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.dt-swatch--lh  { background: #005FA8; }
.dt-swatch--mh  { background: #2D7A45; }
.dt-swatch--inf { background: #7B4AA0; }
.dt-swatch--all { background: #0A0A09; }

.dt-schedule { display: flex; flex-direction: column; }

.dt-schedule-header {
  display: grid;
  grid-template-columns: 80px 1fr 1fr 120px;
  background: #F2F1EE;
  border-bottom: 1px solid var(--rule);
}

.dt-schedule-header > div {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--dim);
  padding: 9px 14px;
  border-right: 1px solid var(--rule);
}
.dt-schedule-header > div:last-child { border-right: none; }

.dt-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr 140px;
  border-bottom: 1px solid var(--rule);
  min-height: 80px;
}

.dt-row--last { border-bottom: none; }

.dt-cell-day {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px;
  border-right: 1px solid var(--rule);
  background: #FAFAF9;
}

.dt-day-num {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.dt-day-label {
  font-size: 10px;
  font-weight: 400;
  color: var(--dim);
  margin-top: 2px;
}

.dt-cell-block {
  padding: 10px 12px;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dt-cell-block--span { grid-column: 2 / 4; }

.dt-cell-note {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 12px;
  font-size: 11.5px;
  color: var(--dim);
  min-width: 0;
  word-break: break-word;
  overflow-wrap: break-word;
}

.dt-session {
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dt-session--lh  { background: rgba(0, 95, 168, 0.07);   border-left: 3px solid #005FA8; }
.dt-session--mh  { background: rgba(45, 122, 69, 0.07);  border-left: 3px solid #2D7A45; }
.dt-session--inf { background: rgba(123, 74, 160, 0.07); border-left: 3px solid #7B4AA0; }
.dt-session--all { background: rgba(10, 10, 9, 0.04);    border-left: 3px solid #0A0A09; }

.dt-session-group {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  line-height: 1.3;
}

.dt-session--lh  .dt-session-group { color: #005FA8; }
.dt-session--mh  .dt-session-group { color: #2D7A45; }
.dt-session--inf .dt-session-group { color: #7B4AA0; }
.dt-session--all .dt-session-group { color: #0A0A09; }

.dt-session-name {
  font-size: 11.5px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.45;
}

.dt-evening-tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}

.dt-evening-sub {
  font-size: 10.5px;
  font-weight: 300;
  color: var(--dim);
  margin-top: 2px;
}

.dt-session-key {
  padding: 12px 16px;
  background: #FAFAF9;
  border-top: 1px solid var(--rule);
}

.dt-session-key-label {
  display: block;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dim);
  margin-bottom: 8px;
}

.dt-session-key-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.dt-chip {
  font-size: 11px;
  font-weight: 400;
  color: var(--mid);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 3px 9px;
}

@media (max-width: 860px) {
  .dt-schedule-header,
  .dt-row { grid-template-columns: 64px 1fr 1fr; }
  /* Hide the evening column header and empty dash cells; keep cells with real content */
  .dt-schedule-header > div:last-child { display: none; }
  .dt-cell-note:not(:has(.dt-evening-tag)) { display: none; }
  /* When the note has real content, render it as a full-width row below the two blocks */
  .dt-cell-note:has(.dt-evening-tag) {
    grid-column: 1 / -1;
    border-top: 1px solid var(--rule);
    padding: 8px 12px;
  }
  .dt-cell-block--span { grid-column: 2 / 4; }
}

@media (max-width: 560px) {
  .dt-legend { gap: 12px; }
  /* Stack the schedule: day col spans all rows, AM/PM/Evening stack in col 2 */
  .dt-schedule-header { display: none; }
  .dt-row {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto auto;
    min-height: auto;
  }
  .dt-cell-day {
    grid-column: 1;
    grid-row: 1 / 4;
  }
  .dt-cell-block {
    grid-column: 2;
    border-right: none;
  }
  .dt-cell-block:nth-child(2) { grid-row: 1; }
  .dt-cell-block:nth-child(3) {
    display: flex;
    grid-row: 2;
    border-top: 1px solid var(--rule);
  }
  .dt-cell-block--span {
    grid-column: 2;
    grid-row: 1 / 3;
  }
  /* Show evening note, but collapse it when it only contains a dash */
  .dt-cell-note {
    display: flex;
    grid-column: 2;
    grid-row: 3;
    border-top: 1px solid var(--rule);
  }
  /* Override the 860px rule that spans this full-width — at 560px it stacks in col 2 */
  .dt-cell-note:has(.dt-evening-tag) {
    grid-column: 2;
    grid-row: 3;
  }
  .dt-cell-note:not(:has(.dt-evening-tag)) {
    display: none;
  }
  .dt-session-key-chips { flex-direction: column; gap: 4px; }
  .cs-phase-row { grid-template-columns: 1fr; }
  .cs-phase-label { border-right: none; border-bottom: 1px solid var(--rule); }
}

/* ════════════════════════════════════
   CARD FILTER SYSTEM
   ════════════════════════════════════ */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.filter-btn {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--dim);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 100px;
  padding: 5px 14px;
  cursor: pointer;
  transition: border-color 0.13s, color 0.13s, background 0.13s;
  line-height: 1;
  min-height: 35px !important;
}

.filter-btn:hover {
  border-color: #bbb;
  color: var(--ink);
}

.filter-btn[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* Hidden cards */
.card[hidden] {
  display: none;
}

@media (max-width: 860px) {
  .filter-bar { display: none; }
}

/* ════════════════════════════════════
   CARD LOCK BADGE
   ════════════════════════════════════ */
.card-lock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--dim);
  margin-top: 6px;
  width: fit-content;
  white-space: nowrap;
}

.card-lock svg { flex-shrink: 0; color: var(--dim); }


/* ════════════════════════════════════
   PASSWORD PAGE
   ════════════════════════════════════ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.password {
  --cs-bg:     #005FA8;
  --cs-text-1: #FFFFFF;
  --cs-text-2: #C8DEFF;
  --cs-text-3: #A0C4FF;
  --cs-border: #1E78C2;
  height: 100%;
  background: var(--cs-bg);
  color: var(--cs-text-1);
}

body.password .page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.password nav {
  position: fixed;
  height: 56px;
  padding: 0 48px;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: none;
}

body.password .nav-name {
  color: #fff;
  transition: none;
}

body.password .nav-r a {
  color: #fff;
  transition: none;
}

body.password .nav-resume {
  color: #fff !important;
  border-color: rgba(255,255,255,0.6);
}

body.password .nav-resume:hover {
  background: rgba(255,255,255,0.15);
}

/* The mobile drawer is white, so the white pill text above would vanish there. */
@media (max-width: 680px) {
  body.password .nav-resume { color: var(--mid) !important; }
  body.password .nav-resume:hover {
    background: transparent;
    color: var(--ink) !important;
  }
}

body.password main {
  flex: 1;
  display: flex;
  align-items: center;
}

body.password .pw-inner {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding: 112px 52px 80px;
  animation: up 0.5s ease both;
}

body.password .pw-eyebrow {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cs-text-2);
  margin-bottom: 24px;
}

body.password .pw-hed {
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 500;
  line-height: 0.97;
  letter-spacing: -0.03em;
  color: var(--cs-text-1);
  margin-bottom: 28px;
}

body.password .pw-hed .light { color: var(--cs-text-3); }

body.password .pw-lede {
  font-size: 18px;
  font-weight: 300;
  color: var(--cs-text-2);
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: 36px;
}

body.password .pw-lede a {
  color: var(--cs-text-1);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.password .pw-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 360px;
  margin-bottom: 16px;
}

body.password .pw-label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--cs-text-2);
  letter-spacing: 0.04em;
}

body.password .pw-input {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--cs-text-1);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid var(--cs-border);
  border-radius: 8px;
  padding: 11px 14px;
  width: 100%;
  transition: border-color 0.13s, background 0.13s;
}

body.password .pw-input::placeholder { color: rgba(200, 222, 255, 0.45); }

body.password .pw-input:focus {
  /* Real outline, matching .pw-submit. The previous 20%-opacity white glow
     resolved to 1.52:1 against the page background (WCAG 2.4.7 / 1.4.11 need 3:1). */
  outline: 3px solid #ffffff;
  outline-offset: 2px;
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.14);
}

body.password .pw-input[aria-invalid="true"] {
  border-color: #FBCBCB;
}

body.password .pw-error {
  font-size: 12px;
  font-weight: 400;
  color: #FBCBCB;
  min-height: 18px;
}

body.password .pw-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

body.password .pw-submit {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--cs-bg);
  background: var(--cs-text-1);
  border: none;
  border-radius: 100px;
  padding: 10px 22px;
  cursor: pointer;
  transition: opacity 0.13s;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

body.password .pw-submit:hover { opacity: 0.88; }

body.password .pw-submit:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

body.password .pw-submit:disabled { opacity: 0.5; cursor: default; }

body.password .pw-back {
  font-size: 13px;
  color: var(--cs-text-2);
  text-decoration: none;
  transition: color 0.12s;
}

body.password .pw-back:hover { color: var(--cs-text-1); }

body.password .pw-success-msg {
  font-size: 13.5px;
  color: var(--cs-text-2);
  font-style: italic;
}

body.password footer {
  padding: 20px 48px;
  border-top: 1px solid var(--cs-border);
  flex-shrink: 0;
}

body.password .footer-name {
  font-size: 13px;
  color: var(--cs-text-2);
}

body.password .footer-note {
  font-size: 12px;
  color: var(--cs-text-2);
}

body.password .footer-changelog {
  color: #ffffff;
}

body.password .footer-changelog:hover {
  color: rgba(255,255,255,0.7);
}

body.password :focus-visible { outline-color: #ffffff; }

@media (max-width: 640px) {
  body.password nav    { padding: 0 24px; }
  body.password footer { padding: 20px 24px; grid-template-columns: 1fr; gap: 12px; }
  body.password .footer-name, body.password .footer-note, body.password .footer-links-group { justify-self: center; text-align: center; }
  body.password .pw-inner { padding: 96px 24px 64px; }
  body.password .pw-lede  { font-size: 16px; }
  body.password .pw-form-group,
  body.password .pw-actions { max-width: 100%; }
}


/* ════════════════════════════════════
   DARKTIDE — LISTENING TOUR GRAPHIC
   ════════════════════════════════════ */

.lt-fig {
  margin-bottom: 40px;
}

/* Outer surface */
.lt-surface {
  padding: 32px 24px 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Center hub */
.lt-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #D8D7D2;
  border-radius: 8px;
  min-width: 260px;
  text-align: center;
  padding: 12px;
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

.lt-center-eyebrow {
  font-size: 8px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--dim);
  line-height: 1;
  margin-bottom: 4px;
}

.lt-center-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.lt-center-sub {
  font-size: 9px;
  font-weight: 400;
  color: var(--dim);
  margin-top: 4px;
  line-height: 1.3;
}

/* Team cards row */
.lt-teams {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  width: 100%;
  margin-top: 20px;
  position: relative;
  z-index: 1;
}

.lt-team {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #D8D7D2;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.lt-team-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #EDECE8;
}

.lt-team-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lt-team-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.lt-team-qs {
  list-style: none;
  margin: 0;
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.lt-team-qs li {
  font-size: 11px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.5;
  padding-left: 10px;
  position: relative;
}

.lt-team-qs li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--dim);
}

/* Output node */
.lt-output {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  border-radius: 8px;
  padding: 12px 24px;
  margin-top: 16px;
  position: relative;
  z-index: 1;
  text-align: center;
  min-width: 260px;
}

.lt-output-label {
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.01em;
}

.lt-output-sub {
  font-size: 10px;
  font-weight: 300;
  color: #fff;
  margin-top: 3px;
  line-height: 1.4;
}

/* Responsive */
@media (max-width: 760px) {
  .lt-teams {
    grid-template-columns: 1fr;
  }

  .lt-connectors {
    display: none;
  }

  .lt-center {
    min-width: 0;
    width: 100%;
  }

  .lt-output {
    min-width: 0;
    width: 100%;
  }
}


/* ════════════════════════════════════
   DARKTIDE — AFFINITY BOARD GRAPHIC
   ════════════════════════════════════ */

.ab-fig {
  margin-bottom: 40px;
}

.ab-board {
  background: #F5F4F0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--rule);
}

/* ── Column headers ── */
.ab-col-headers {
  display: grid;
  grid-template-columns: 80px 1fr 1fr 1fr 0.85fr;
  border-bottom: 2px solid rgba(0,0,0,0.08);
}

.ab-col-header {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  padding: 9px 12px;
  text-align: center;
  color: #fff;
}

/* Skip the row-label column */
.ab-col-headers::before {
  content: '';
  grid-column: 1;
  background: #F5F4F0;
}

.ab-col-header--lh    { background: #005FA8; }
.ab-col-header--mh    { background: #2D7A45; }
.ab-col-header--inf   { background: #7B4AA0; }
.ab-col-header--synth { background: #3A3A38; }

/* ── Rows ── */
.ab-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr 1fr 0.85fr;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  min-height: 120px;
}

.ab-row--last {
  border-bottom: none;
}

/* Row label */
.ab-row-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dim);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 6px;
  border-right: 1px solid rgba(0,0,0,0.07);
  background: #EDECE8;
}

/* ── Swim lanes ── */
.ab-swim {
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-right: 1px solid rgba(0,0,0,0.06);
}

.ab-swim--lh    { background: rgba(0, 95, 168, 0.06); }
.ab-swim--mh    { background: rgba(45, 122, 69, 0.06); }
.ab-swim--inf   { background: rgba(123, 74, 160, 0.06); }
.ab-swim--synth { background: rgba(58, 58, 56, 0.05); border-right: none; }

/* ── Clusters ── */
.ab-cluster {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ab-cluster-label {
  font-size: 8.5px;
  font-weight: 500;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  line-height: 1.2;
}

/* ── Notes grid ── */
.ab-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: flex-start;
}

.ab-notes--synth {
  gap: 5px;
}

/* ── Individual sticky notes ── */
.ab-note {
  border-radius: 2px;
  box-shadow: 1px 2px 3px rgba(0,0,0,0.13);
  flex-shrink: 0;
  position: relative;
}

/* Size variants */
.ab-note--s { width: 28px; height: 26px; }
.ab-note--m { width: 36px; height: 30px; }
.ab-note--l { width: 44px; height: 34px; }

/* Swim lane note colors — warm yellow */
.ab-swim--lh  .ab-note { background: #FDE98A; }
.ab-swim--mh  .ab-note { background: #FDE98A; }
.ab-swim--inf .ab-note { background: #FDE98A; }

/* Synthesis notes — slightly different tint */
.ab-note--synth { background: #C8E6C9; }

/* Subtle fold corner on each note */
.ab-note::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 7px;
  height: 7px;
  background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.08) 50%);
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .ab-col-headers {
    grid-template-columns: 40px 1fr 1fr 1fr 0.85fr;
  }
  .ab-row {
    grid-template-columns: 40px 1fr 1fr 1fr 0.85fr;
  }
  .ab-note--s { width: 22px; height: 20px; }
  .ab-note--m { width: 28px; height: 24px; }
  .ab-note--l { width: 34px; height: 28px; }
}

@media (max-width: 600px) {
  .ab-col-headers {
    display: none;
  }
  .ab-row {
    grid-template-columns: 36px 1fr;
    grid-template-rows: auto auto auto auto;
  }
  .ab-row-label {
    grid-row: 1 / 5;
  }
  .ab-swim {
    border-right: none;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }
  .ab-swim--lh    { grid-column: 2; }
  .ab-swim--mh    { grid-column: 2; }
  .ab-swim--inf   { grid-column: 2; }
  .ab-swim--synth { grid-column: 2; border-bottom: none; }
}
/* ════════════════════════════════════
   CROSS-BROWSER & MOBILE IMPROVEMENTS
   ════════════════════════════════════ */

/* Ensure touch targets are at least 44x44px (WCAG 2.5.5) */
.nav-r a,
.filter-btn,
.cs-back,
.cs-sidenav-links a {
  min-height: 30px;
  display: flex;
  align-items: center;
}

.cs-sidenav-links a {
  min-height: 36px; /* sidenav can be smaller, still usable */
}

/* Nav: ensure links are never hidden from keyboard users on any scroll state */
#site-nav {
  /* Ensure nav always receives pointer/keyboard events */
  pointer-events: auto;
}

/* Mobile: better card tap area */
@media (max-width: 560px) {
  .card { touch-action: manipulation; }
  .filter-btn { touch-action: manipulation; }
  .pw-submit  { touch-action: manipulation; }
}

/* Safari: ensure backdrop-filter degrades gracefully */
@supports not (backdrop-filter: blur(1px)) {
  nav.scrolled {
    background: rgba(255,255,255,0.98);
  }
}

/* Ensure card-thumb images maintain aspect ratio cross-browser */
.card-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* IE/old-Edge fallback: aspect-ratio not supported */
@supports not (aspect-ratio: 16/9) {
  .card-thumb {
    height: 200px;
  }
}



/* ════════════════════════════════════
   COVA DESIGN SYSTEM — CASE STUDY
   Companion styles. Load AFTER style.css.
   All cova- prefixed; no overrides to base.
   ════════════════════════════════════ */

/* ─────────────────────────────────────
   SHARED FIGURE PRIMITIVES
   ───────────────────────────────────── */
.cova-fig-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cova-fig-label-row {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dim);
  padding: 14px 20px 8px;
}

/* ─────────────────────────────────────
   FIG 2 — SHARED COMPONENTS OVERVIEW
   (VITA + VDACS header / page header)
   ───────────────────────────────────── */
.cova-fig-overview {
  background: #FAFAF9;
  padding: 0 0 16px;
}

.cova-fig-2col {
  padding: 0 16px;
}

/* Site header mockup */
.cova-fig-header {
  background: #fff;
  border: 1px solid var(--rule);
  padding: 0 14px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 4px;
}

.cova-fig-hbrand {
  font-size: 15px;
  font-weight: 700;
  color: #1A1A19;
  white-space: nowrap;
}

.cova-fig-header--vita .cova-fig-hbrand span  { color: #14888F; }
.cova-fig-header--vdacs .cova-fig-hbrand span { color: #3C7224; }

.cova-fig-hsearch {
  border: 1px solid #BFBDB6;
  padding: 4px 10px;
  font-size: 12px;
  color: #BFBDB6;
  border-radius: 2px;
  flex: 1;
  max-width: 160px;
}

.cova-fig-hnav {
  display: flex;
  gap: 14px;
  margin-left: auto;
}

.cova-hnav-l {
  font-size: 12px;
  color: #4A4A47;
  padding-bottom: 2px;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}

.cova-hnav-l--vita  {
  color: #14888F;
  border-bottom-color: #14888F;
  font-weight: 600;
}

.cova-hnav-l--vdacs {
  color: #3C7224;
  border-bottom-color: #3C7224;
  font-weight: 600;
}

/* Page header band mockup */
.cova-fig-pagehead {
  padding: 20px 18px;
  border-radius: 4px;
}

.cova-fig-pagehead--vita  { background: #14888F; }
.cova-fig-pagehead--vdacs { background: #234D1B; }

.cova-fig-rule {
  height: 4px;
  width: 36px;
  margin-bottom: 10px;
  border-radius: 0;
}

.cova-fig-rule--vita  { background: #F2B632; }
.cova-fig-rule--vdacs { background: #D89A2B; }

.cova-fig-pagehead-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  line-height: 1.2;
}

.cova-fig-pagehead-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  line-height: 1.4;
  max-width: 40ch;
}


/* ─────────────────────────────────────
   FIG 3 — USWDS BASELINE vs COVA
   ───────────────────────────────────── */
.cova-approach-col {
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  background-color: #fff;
}

.cova-approach-col-head {
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cova-approach-col-head--uswds { background: #1B3A6B; }
.cova-approach-col-head--cova  { background: var(--accent); }

.cova-approach-eye {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
}

.cova-approach-sub {
  font-size: 10px;
  color: #fff;
}

.cova-approach-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cova-approach-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.4;
}

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

.cova-approach-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 1px;
}

.cova-approach-badge--keep     { background: #E2F4EC; color: #1D7A4E; }
.cova-approach-badge--rebuild  { background: #FDE8E8; color: #993C1D; }
.cova-approach-badge--extended { background: #EEF4FB; color: var(--accent); }


/* ─────────────────────────────────────
   FIG 5 — AGENCY THEME PALETTE GRID
   ───────────────────────────────────── */
.cova-palette-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 20px;
  background: #FAFAF9;
}

.cova-theme-card {
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}

/* Theme card header */
.cova-theme-head {
  padding: 10px 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.cova-theme-head--vdacs { background: #234D1B; }
.cova-theme-head--vita  { background: #062628; }
.cova-theme-head--dbhds { background: #1E2638; }

.cova-theme-agency {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}

.cova-theme-url {
  font-size: 9px;
  color: rgba(255,255,255,0.5);
  font-family: monospace;
  letter-spacing: 0.02em;
}

/* Swatches */
.cova-theme-swatches {
  display: flex;
  height: 52px;
}

.cova-sw {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 4px 5px;
  gap: 1px;
}

.cova-sw--light {
  border: 1px solid var(--rule);
}

.cova-sw-name {
  font-size: 8px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  line-height: 1.2;
}

.cova-sw-hex {
  font-size: 7.5px;
  color: rgba(255,255,255,0.6);
  font-family: monospace;
}

.cova-sw--light .cova-sw-name,
.cova-sw--light .cova-sw-hex { color: var(--dim); }

/* Theme preview */
.cova-theme-preview {
  flex: 1;
}

.cova-theme-preview--vdacs { background: #234D1B; }
.cova-theme-preview--vita  { background: #fff; border-top: 1px solid var(--rule); }
.cova-theme-preview--dbhds { background: #1E2638; }

.cova-preview-hero {
  padding: 14px;
}

.cova-preview-hero--vita {
  background: #14888F;
  padding: 12px 14px;
}

.cova-preview-hero--dbhds {
  background: #1E2638;
  padding: 14px;
}

.cova-preview-eye {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.65);
  margin-bottom: 4px;
}

.cova-preview-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 4px;
}

.cova-preview-rule {
  height: 4px;
  width: 28px;
  margin: 6px 0;
}

.cova-preview-rule--gold { background: #D89A2B; }
.cova-preview-rule--lime { background: #82C341; }

.cova-preview-body {
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  line-height: 1.4;
  margin-bottom: 10px;
}

.cova-preview-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.cova-preview-btn {
  font-size: 11px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 2px;
  cursor: default;
  display: inline-block;
}

.cova-preview-btn--vdacs-green { background: #3C7224; color: #fff; }
.cova-preview-btn--vdacs-gold  { background: #D89A2B; color: #fff; }
.cova-preview-btn--outline     { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.6); }
.cova-preview-btn--vita-magenta { background: #A2107C; color: #fff; }
.cova-preview-btn--dbhds-lime  { background: #82C341; color: #1E2638; }
.cova-preview-btn--dbhds-blue  { background: #1577BC; color: #fff; }

.cova-preview-pagehead-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.cova-preview-vita-cards {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cova-preview-vita-card {
  background: #fff;
  border: 1px solid var(--rule);
  padding: 10px 12px;
  border-radius: 2px;
}

.cova-preview-vita-card--alert {
  background: #FFFBEA;
  border-color: #E8D080;
}

.cova-preview-card-eye {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.cova-preview-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #1A1A19;
  line-height: 1.3;
  margin-bottom: 4px;
}

.cova-preview-card-link {
  font-size: 11px;
  font-weight: 600;
  text-decoration: underline;
}

.cova-preview-card {
  background: #fff;
  border: 1px solid var(--rule);
  padding: 12px 14px;
  border-radius: 2px;
  margin: 10px;
}

.cova-preview-dbhds-stat {
  background: #1E2638;
  padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.cova-preview-stat-num {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}

.cova-preview-stat-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #82C341;
  margin-top: 2px;
}

/* Contrast row */
.cova-theme-contrast {
  border-top: 1px solid var(--rule);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cova-contrast-item {
  font-size: 10px;
  color: var(--dim);
  line-height: 1.3;
}

.cova-contrast-pass::before {
  content: '✓ ';
  color: #1D7A4E;
  font-weight: 700;
}

.cova-contrast-warn::before {
  content: '△ ';
  color: #9B6B00;
  font-weight: 700;
}


/* ─────────────────────────────────────
   FIG 6 — COMPONENT SPEC + T4 SCHEMA
   ───────────────────────────────────── */
.cova-fig-t4-2up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: #FAFAF9;
}

.cova-spec-panel {
  border-right: 1px solid var(--rule);
}

.cova-spec-panel:last-child { border-right: none; }

.cova-spec-panel-head {
  background: #1B3A6B;
  color: #C8DEFF;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 9px 16px;
}

.cova-spec-panel-head--t4 { background: #2E2E2C; color: #ccc; }

.cova-spec-body {
  padding: 14px 16px;
  background: #fff;
}

.cova-spec-body--t4 { background: #FAFAF9; padding: 12px; }

.cova-spec-label-row {
  display: grid;
  grid-template-columns: 80px 100px 90px 1fr;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 4px;
}

.cova-spec-col-h {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
}

.cova-spec-row {
  display: grid;
  grid-template-columns: 80px 100px 90px 1fr;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
  align-items: center;
}

.cova-spec-row:last-child { border-bottom: none; }

.cova-spec-row--highlight { background: #F2F1EE; margin: 0 -16px; padding: 7px 16px; }

.cova-spec-variant {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 2px;
}

.cova-spec-variant--1 { background: #E8EFF8; color: #1B3A6B; }
.cova-spec-variant--2 { background: #EEF4FB; color: var(--accent); }
.cova-spec-variant--3 { background: #E8F4F0; color: #1D7A4E; }
.cova-spec-variant--4 { background: #F2F1EE; color: var(--dim); }

.cova-spec-code {
  font-family: monospace;
  font-size: 11px;
  background: #F2F1EE;
  color: var(--accent);
  padding: 2px 5px;
  border-radius: 2px;
}

.cova-spec-size {
  font-size: 11px;
  color: var(--mid);
}

.cova-spec-use {
  font-size: 11px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.35;
}

.cova-spec-note {
  margin-top: 10px;
  background: #FFF8F5;
  border: 1px solid #F0C0A8;
  border-radius: 4px;
  padding: 8px 10px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 11px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.5;
}

.cova-spec-note-icon {
  width: 16px;
  height: 16px;
  background: #D85A30;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* T4 field schema */
.cova-t4-field-chrome {
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}

.cova-t4-field-bar {
  background: #2a3a4a;
  padding: 7px 12px;
}

.cova-t4-field-ct {
  font-size: 10px;
  color: #9FC2E6;
  font-family: monospace;
  letter-spacing: 0.02em;
}

.cova-t4-field-form {
  background: #fff;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cova-t4-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cova-t4-field--locked { opacity: 0.85; }

.cova-t4-field-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
}

.cova-t4-req { color: #C8102E; }

.cova-t4-field-input {
  border: 1px solid var(--rule);
  padding: 6px 9px;
  font-size: 11.5px;
  color: var(--ink);
  border-radius: 2px;
  background: #fff;
}

.cova-t4-field-input--locked {
  background: #F2F1EE;
  color: 545454;
  font-family: monospace;
  font-size: 11px;
}

.cova-t4-field-select {
  border: 1px solid var(--accent);
  padding: 6px 9px;
  font-size: 11.5px;
  color: var(--accent);
  border-radius: 2px;
  background: #EEF4FB;
  font-weight: 600;
}

.cova-t4-field-hint {
  font-size: 10px;
  color: var(--dim);
  font-style: italic;
  margin-top: 1px;
}

.cova-t4-field-hint--warn { color: #993C1D; font-style: normal; }

.cova-t4-field-check {
  display: flex;
  align-items: center;
  gap: 7px;
}

.cova-t4-checkbox {
  width: 14px;
  height: 14px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  flex-shrink: 0;
}

.cova-t4-checkbox--checked {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}


/* ─────────────────────────────────────
   FIG 7 — VDACS + VITA SITE COMPARISON
   ───────────────────────────────────── */
.cova-fig-sitecmp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: #FAFAF9;
}

.cova-site {
  border-right: 1px solid var(--rule);
}

.cova-site:last-child { border-right: none; }

/* Branding bar */
.cova-site-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  font-size: 11px;
  color: #fff;
}

.cova-site-bar--vdacs { background: #16322B; }
.cova-site-bar--vita  { background: #062628; }

.cova-site-bar strong { font-size: 11px; font-weight: 700; display: block; }

.cova-site-seal {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.cova-site-sub {
  display: block;
  font-size: 9px;
  color: rgba(255,255,255,0.5);
}

/* Site header */
.cova-site-header {
  background: #fff;
  border-bottom: 1px solid var(--rule);
  padding: 0 14px;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cova-site-logo {
  font-size: 15px;
  font-weight: 700;
  color: #1A1A19;
}

.cova-site-nav {
  display: flex;
  gap: 12px;
  margin-left: auto;
}

.cova-site-nav-l {
  font-size: 11px;
  color: var(--mid);
  padding-bottom: 2px;
  border-bottom: 2.5px solid transparent;
  white-space: nowrap;
}

.cova-site-nav-l--vdacs {
  color: #3C7224;
  border-bottom-color: #3C7224;
  font-weight: 600;
}

.cova-site-nav-l--vita {
  color: #14888F;
  border-bottom-color: #14888F;
  font-weight: 600;
}

/* Page header */
.cova-site-pagehead {
  padding: 18px 14px;
}

.cova-site-pagehead--vdacs { background: #234D1B; }
.cova-site-pagehead--vita  { background: #14888F; }

.cova-site-rule {
  height: 4px;
  width: 30px;
  margin-bottom: 8px;
}

.cova-site-rule--gold { background: #D89A2B; }

.cova-site-pagehead-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 4px;
}

.cova-site-pagehead-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  line-height: 1.4;
  margin-bottom: 12px;
  max-width: 36ch;
}

.cova-site-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.cova-site-btn {
  font-size: 11px;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: 2px;
  display: inline-block;
  cursor: default;
}

.cova-site-btn--vdacs-green { background: #3C7224; color: #fff; }
.cova-site-btn--vdacs-gold  { background: #D89A2B; color: #fff; }
.cova-site-btn--vita        { background: #A2107C; color: #fff; }

/* Service grid */
.cova-site-svcgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px;
  background: #F2F1EE;
}

.cova-svc {
  padding: 10px 12px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 2px;
  min-height: 44px;
}

.cova-svc--vdacs { background: #3C7224; color: #fff; }

/* VITA cards */
.cova-site-vita-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: #F2F1EE;
}

.cova-vita-card {
  background: #fff;
  border: 1px solid var(--rule);
  padding: 12px 14px;
}

.cova-vita-card-eye {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 4px;
}

.cova-vita-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 4px;
}

.cova-vita-card-body {
  font-size: 11px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.45;
  margin-bottom: 8px;
}

/* Site comparison legend */
.cova-sitecmp-legend {
  padding: 10px 16px;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--rule);
}

.cova-sitecmp-tag {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 3px;
}

.cova-sitecmp-tag--shared  { background: #EEF4FB; color: var(--accent); }
.cova-sitecmp-tag--diff    { background: #F2F1EE; color: var(--dim); }


/* ─────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────── */
@media (max-width: 860px) {
  .cova-fig-2col          { grid-template-columns: 1fr; }
  .cova-palette-grid      { grid-template-columns: 1fr; padding: 12px; }
  .cova-fig-t4-2up        { grid-template-columns: 1fr; }
  .cova-spec-panel        { border-right: none; border-bottom: 1px solid var(--rule); }
  .cova-fig-sitecmp       { grid-template-columns: 1fr; }
  .cova-site              { border-right: none; border-bottom: 1px solid var(--rule); }
  .cova-spec-label-row,
  .cova-spec-row          { grid-template-columns: 70px 90px 1fr; }
  .cova-spec-use          { display: none; }
}

@media (max-width: 560px) {
  .cova-theme-swatches    { height: 40px; }
  .cova-sw-hex            { display: none; }
  .cova-spec-label-row,
  .cova-spec-row          { grid-template-columns: 70px 1fr; }
  .cova-spec-size         { display: none; }
}


/* ─────────────────────────────────────
   FIG 1 — VIRGINIA.GOV CODED UI
   ───────────────────────────────────── */
.cova-f1 {
  background: #fff;
  border-bottom: 1px solid var(--rule);
}

/* Branding bar */
.cova-f1-brandbar {
  background: #1B1B1B;
  padding: 7px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cova-f1-brand-l {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cova-f1-seal {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.cova-f1-brand-name {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.cova-f1-brand-sub {
  font-size: 10px;
  color: #999;
  margin-top: 1px;
}

.cova-f1-brand-r {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cova-f1-lang {
  background: #333;
  color: #fff;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 2px;
}

.cova-f1-resource {
  font-size: 11px;
  color: #bbb;
}

/* Site header */
.cova-f1-header {
  background: #fff;
  border-bottom: 1px solid var(--rule);
  padding: 0 20px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.cova-f1-logo {
  font-size: 20px;
  font-weight: 700;
  color: #1A1A19;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.cova-f1-logo span { color: #0079BA; }

.cova-f1-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--rule);
  padding: 0 10px;
  height: 36px;
  flex: 1;
  max-width: 340px;
  border-radius: 2px;
}

.cova-f1-search-text {
  font-size: 13px;
  color: #BFBDB6;
}

.cova-f1-search-btn {
  width: 26px;
  height: 26px;
  background: #C8102E;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border-radius: 2px;
  flex-shrink: 0;
}

.cova-f1-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
}

.cova-f1-nav-l {
  font-size: 14px;
  color: #4A4A47;
  padding-bottom: 3px;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}

.cova-f1-nav-l--active {
  color: #0B5C8C;
  border-bottom-color: #0079BA;
  font-weight: 600;
}

/* Hero */
.cova-f1-hero {
  background: #fff;
  padding: 32px 20px 40px;
  text-align: center;
}

.cova-f1-hero-title {
  font-size: 28px;
  font-weight: 700;
  color: #102A4C;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.cova-f1-hero-sub {
  font-size: 15px;
  font-weight: 300;
  color: #6B6B6B;
  margin-bottom: 20px;
}

.cova-f1-hero-btns {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cova-f1-btn {
  font-size: 13px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 2px;
  display: inline-block;
}

.cova-f1-btn--red     { background: #D83933; color: #fff; }
.cova-f1-btn--outline { background: transparent; color: #0B5C8C; box-shadow: inset 0 0 0 2px #0B5C8C; }

/* Navy service band */
.cova-f1-svcband {
  background: #102A4C;
  padding: 20px 20px 24px;
}

.cova-f1-svc-title {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 14px;
}

.cova-f1-svcgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.cova-f1-svc {
  background: #1B3A6B;
  color: #fff;
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  min-height: 52px;
  border-radius: 2px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.cova-f1-svc span {
  opacity: 0.6;
  font-weight: 400;
}

/* Alert */
.cova-f1-alertwrap {
  background: #0B2249;
  padding: 0 20px 16px;
}

.cova-f1-alert {
  background: #fff;
  box-shadow: 0 6px 18px rgba(10,27,51,0.12);
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-radius: 2px;
}

.cova-f1-alert-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0B5C8C;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cova-f1-alert-hed {
  font-size: 14px;
  font-weight: 700;
  color: #1A1A19;
  margin-bottom: 3px;
}

.cova-f1-alert-sub {
  font-size: 12px;
  font-weight: 300;
  color: #6B6B6B;
  line-height: 1.5;
}


/* ─────────────────────────────────────
   FIG 4 — SWATCH TABLE (row per theme)
   ───────────────────────────────────── */
.cova-swatch-table {
  background: #FAFAF9;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cova-swatch-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  border-bottom: 1px solid var(--rule);
  align-items: stretch;
}

.cova-swatch-row--last { border-bottom: none; }

.cova-swatch-agency {
  padding: 12px 14px 12px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  border-right: 1px solid var(--rule);
  margin-right: 14px;
}

.cova-swatch-agency-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.cova-swatch-agency-theme {
  font-size: 9px;
  font-family: monospace;
  color: var(--dim);
  letter-spacing: 0.02em;
}

.cova-swatch-chips {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 12px 0;
  flex-wrap: wrap;
}

.cova-sw-chip {
  min-width: 64px;
  flex: 1;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  max-width: 90px;
  overflow: hidden;
}

.cova-sw-chip-color {
  height: 48px;
  width: 100%;
  background: inherit;
}

.cova-sw-chip--light {
  border: 1px solid var(--rule);
}

.cova-sw-chip-foot {
  padding: 4px 5px 3px;
  background: #fff;
  border: 1px solid var(--rule);
  border-top: none;
}

.cova-sw-chip-name {
  font-size: 8px;
  font-weight: 600;
  color: #666;
  line-height: 1.2;
  display: block;
}

.cova-sw-chip-hex {
  font-size: 7.5px;
  color: #666;
  font-family: monospace;
  display: block;
}

.cova-sw-chip--light .cova-sw-chip-name,
.cova-sw-chip--light .cova-sw-chip-hex { color: #666; }


/* ─────────────────────────────────────
   FIG 6 — VIRGINIA.GOV COLORS
   (adds to existing .cova-site-* classes)
   ───────────────────────────────────── */
.cova-site-bar--cova { background: #1B1B1B; }

.cova-site-nav-l--cova {
  color: #0B5C8C;
  border-bottom-color: #0079BA;
  font-weight: 600;
}

.cova-site-pagehead--cova {
  background: #102A4C;
  padding: 18px 14px;
}

.cova-site-rule--red      { background: #C8102E; height: 4px; width: 30px; margin-bottom: 8px; }
.cova-site-rule--vita-gold { background: #F2B632; height: 4px; width: 30px; margin-bottom: 8px; }

.cova-site-btn--cova-red {
  background: #D83933;
  color: #fff;
}

.cova-site-btn--cova-outline {
  background: transparent;
  color: #fff;
}

.cova-site-svcgrid--cova {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px;
  background: #F2F1EE;
}

.cova-svc--cova {
  background: #1B3A6B;
  color: #fff;
}


/* ─────────────────────────────────────
   RESPONSIVE — additions
   ───────────────────────────────────── */
@media (max-width: 860px) {
  .cova-f1-svcgrid        { grid-template-columns: repeat(2, 1fr); }
  .cova-f1-nav            { display: none; }
  .cova-swatch-row        { grid-template-columns: 90px 1fr; }
  .cova-swatch-chips      { gap: 4px; }
  .cova-sw-chip           { min-width: 48px; }
}

@media (max-width: 560px) {
  .cova-f1-svcgrid        { grid-template-columns: 1fr 1fr; }
  .cova-f1-hero-title     { font-size: 20px; }
  .cova-swatch-row        { grid-template-columns: 1fr; }
  .cova-swatch-agency     { border-right: none; border-bottom: 1px solid var(--rule); padding: 10px 0; margin-right: 0; }
  .cova-sw-chip-hex       { display: none; }
}


/* ─────────────────────────────────────
   FIG 1 & FIG 6 — THEME FIGURE FORMAT
   (swatches + applied components)
   ───────────────────────────────────── */

/* Outer wrapper */
.cova-theme-fig {
  background: #fff;
}

/* Header row */
.cova-theme-fig-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--rule);
  background: #fff;
}

.cova-theme-fig-head--dbhds {
  background: #1E2630;
  border-bottom-color: #3C4654;
}

.cova-theme-fig-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.cova-theme-fig-head--dbhds .cova-theme-fig-title { color: #fff; }

.cova-theme-fig-meta {
  font-size: 11px;
  font-family: monospace;
  color: var(--dim);
  letter-spacing: 0.02em;
}

.cova-theme-fig-head--dbhds .cova-theme-fig-meta { color: #93A0AD; }

/* Swatch row */
.cova-theme-fig-swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  background: #F7F7F5;
  border-bottom: 1px solid var(--rule);
}

.cova-theme-fig-swatches--panel {
  border-bottom: 1px solid var(--rule);
}

.cova-theme-fig-sw {
  padding: 0 0 8px;
}

.cova-theme-fig-sw-block {
  height: 64px;
  width: 100%;
  display: block;
  margin-bottom: 6px;
}

.cova-theme-fig-sw-block--light {
  border-bottom: 1px solid var(--rule);
}

.cova-theme-fig-sw-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink);
  padding: 0 8px;
  line-height: 1.3;
}

.cova-theme-fig-sw-hex {
  font-size: 10px;
  font-family: monospace;
  color: var(--dim);
  padding: 0 8px;
}

/* Applied label */
.cova-theme-fig-applied-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dim);
  padding: 10px 20px;
  background: #F7F7F5;
  border-bottom: 1px solid var(--rule);
}

.cova-theme-fig-applied-label--dark {
  background: #141A21;
  color: #93A0AD;
  border-bottom-color: #3C4654;
}

/* Two-column component preview (Fig 1) */
.cova-theme-fig-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: #F7F7F5;
}

.cova-theme-fig-left {
  border-right: 1px solid var(--rule);
}

.cova-theme-fig-right {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #fff;
}

/* Hero block */
.cova-theme-fig-hero {
  padding: 20px 20px 0;
}

.cova-theme-fig-hero--cova {
  background: #102A4C;
}

.cova-theme-fig-hero--dbhds {
  background: #1E2630;
  padding: 16px;
}

.cova-theme-fig-eyebrow {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
  margin-bottom: 8px;
}

.cova-theme-fig-eyebrow--lime {
  color: #82C341;
}

.cova-theme-fig-hero-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 0;
}

.cova-theme-fig-hero-title--white { color: #fff; }

.cova-theme-fig-rule {
  height: 4px;
  width: 36px;
  margin: 12px 0;
}

.cova-theme-fig-rule--red  { background: #C8102E; }
.cova-theme-fig-rule--lime { background: #82C341; }

.cova-theme-fig-hero-body {
  font-size: 12px;
  font-weight: 300;
  color: rgba(255,255,255,0.7);
  line-height: 1.55;
  margin-bottom: 0;
  padding-bottom: 16px;
}

.cova-theme-fig-hero-body--muted { color: #93A0AD; }

/* Buttons row — sits below the hero, outside its bg */
.cova-theme-fig-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: #fff;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.cova-theme-fig-hero--dbhds + .cova-theme-fig-btns,
.cova-theme-fig-hero--dbhds ~ .cova-theme-fig-btns {
  background: #1E2630;
  border-color: #3C4654;
}

.cova-theme-fig-btn {
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 2px;
  display: inline-block;
  cursor: default;
  white-space: nowrap;
}

.cova-theme-fig-btn--red          { background: #D83933; color: #fff; }
.cova-theme-fig-btn--navy         { background: #102A4C; color: #fff; }
.cova-theme-fig-btn--outline-red  { background: transparent; color: #D83933; box-shadow: inset 0 0 0 2px #D83933; }
.cova-theme-fig-btn--dbhds-lime   { background: #82C341; color: #1E2630; border-radius: 100px; }
.cova-theme-fig-btn--dbhds-outline { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.5); border-radius: 100px; }

/* Feature band (transport) */
.cova-theme-fig-feature {
  padding: 14px 20px;
}

.cova-theme-fig-feature--cova {
  background: #0B2E4E;
}

.cova-theme-fig-feature-eyebrow {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.55);
  margin-bottom: 4px;
}

.cova-theme-fig-feature-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  line-height: 1.3;
}

.cova-theme-fig-feature-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
}

/* Content cards (right column) */
.cova-theme-fig-card {
  padding: 16px 18px;
  background: #fff;
  border-bottom: 1px solid var(--rule);
  flex: 1;
}

.cova-theme-fig-card--tint-cova {
  background: #E7F1F8;
}

.cova-theme-fig-card--dark {
  background: #283039;
  border-color: #3C4654;
}

.cova-theme-fig-card-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}

.cova-theme-fig-card-eyebrow--cova { color: #0079BA; }
.cova-theme-fig-card-eyebrow--teal { color: #46A6CC; }
.cova-theme-fig-card-eyebrow--amber { color: #EBA81E; }

.cova-theme-fig-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 6px;
}

.cova-theme-fig-card-title--white { color: #fff; }

.cova-theme-fig-card-rule {
  height: 3px;
  width: 32px;
  margin: 8px 0;
}

.cova-theme-fig-card-rule--red  { background: #C8102E; }
.cova-theme-fig-card-rule--lime { background: #82C341; }

.cova-theme-fig-card-body {
  font-size: 12px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.55;
  margin-bottom: 10px;
}

.cova-theme-fig-card-body--muted { color: #93A0AD; }

.cova-theme-fig-card-link {
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cova-theme-fig-card-link--cova { color: #1B6CB5; }
.cova-theme-fig-card-link--teal { color: #46A6CC; }

/* Link lists */
.cova-theme-fig-link-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.cova-theme-fig-link {
  font-size: 12px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  line-height: 1.4;
}

.cova-theme-fig-link--cova   { color: #1B6CB5; }
.cova-theme-fig-link--dbhds  { color: #56B0E6; }

/* Tab strip */
.cova-theme-fig-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.cova-theme-fig-tab {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 100px;
  color: var(--mid);
  background: #fff;
}

.cova-theme-fig-tab--alert {
  border-color: #C8102E;
  color: #C8102E;
}

.cova-theme-fig-tab--active-cova {
  background: #102A4C;
  color: #fff;
  border-color: #102A4C;
}

/* ── Fig 6 compare layout ── */
.cova-theme-compare {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  background: #fff;
}

.cova-theme-compare-divider {
  background: var(--rule);
}

.cova-theme-compare-panel {
  display: flex;
  flex-direction: column;
  background: #fff;
}

.cova-theme-compare-panel--dark {
  background: #1E2630;
}

.cova-theme-compare-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}

.cova-theme-compare-body--dark {
  background: #1E2630;
}

/* In compare mode, hero btns need dark bg */
.cova-theme-compare-panel--dark .cova-theme-fig-btns {
  background: #1E2630;
  border-color: #3C4654;
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .cova-theme-fig-preview     { grid-template-columns: 1fr; }
  .cova-theme-fig-left        { border-right: none; border-bottom: 1px solid var(--rule); }
  .cova-theme-compare         { grid-template-columns: 1fr; }
  .cova-theme-compare-divider { height: 1px; width: 100%; }
  .cova-theme-fig-swatches    { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
  .cova-theme-fig-swatches    { grid-template-columns: repeat(3, 1fr); }
  .cova-theme-fig-sw-block    { height: 44px; }
  .cova-theme-fig-sw-hex      { display: none; }
  .cova-theme-fig-hero-title  { font-size: 16px; }
}


/* ═══════════════════════════════════════════
   CTF — COVA THEME FIGURE
   Used for Fig 1 (single) and Fig 6 (compare)
   Prefix: ctf-
   ═══════════════════════════════════════════ */

/* ── Outer shell ── */
.ctf {
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
}

/* ── Title row ── */
.ctf-titlerow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 16px 20px 14px;
  background: #fff;
  border-bottom: 1px solid #E8E8E6;
}

.ctf-titlerow--dark {
  background: #1A2028;
  border-bottom-color: #3C4654;
}

.ctf-title {
  font-size: 15px;
  font-weight: 700;
  color: #0A0A09;
  letter-spacing: -0.01em;
}

.ctf-title--light { color: #fff; }

.ctf-meta {
  font-size: 11px;
  font-family: monospace;
  color: #666;
  letter-spacing: 0.02em;
}

.ctf-meta--muted { color: #5A6472; }

/* ── Swatch row ── */
.ctf-swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  background: #fff;
  border-bottom: 1px solid #E8E8E6;
}

.ctf-swatches--dark {
  background: #1A2028;
  border-bottom-color: #3C4654;
}

.ctf-sw {
  display: flex;
  flex-direction: column;
}

.ctf-sw-color {
  height: 72px;
  width: 100%;
}

.ctf-sw-color--light {
  border-bottom: 1px solid #E8E8E6;
}

.ctf-sw-foot {
  padding: 8px 10px 10px;
  background: #fff;
  border-right: 1px solid #E8E8E6;
  flex: 1;
}

.ctf-sw:last-child .ctf-sw-foot { border-right: none; }

.ctf-sw-foot--dark {
  background: #1A2028;
  border-right-color: #3C4654;
}

.ctf-sw-name {
  font-size: 11px;
  font-weight: 600;
  color: #0A0A09;
  line-height: 1.3;
  margin-bottom: 2px;
}

.ctf-sw-foot--dark .ctf-sw-name { color: #C7CDD4; }

.ctf-sw-foot--dark .ctf-sw-hex { color: #8A96A3 !important; }

.ctf-sw-hex {
  font-size: 11px;
  font-family: monospace;
  color: #6B757F !important;
}

.ctf-sw-foot--dark .ctf-sw-hex { color: #5A6472; }

/* ── Applied label ── */
.ctf-applied {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #666;
  padding: 10px 20px;
  background: #F2F1EE;
  border-bottom: 1px solid #E8E8E6;
}

.ctf-applied--dark {
  background: #141A21;
  color: #5A6472;
  border-bottom-color: #3C4654;
}

/* ── Component preview body ── */
.ctf-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #F2F1EE;
}

.ctf-body--dark {
  background: #1E2630;
}

/* ── Left column ── */
.ctf-left {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #E8E8E6;
}

.ctf-body--dark .ctf-left {
  border-right-color: #3C4654;
}

/* ── Hero block ── */
.ctf-hero {
  padding: 24px 24px 20px;
  flex: 1;
}

.ctf-hero--cova  { background: #102A4C; }
.ctf-hero--dbhds { background: #1E2630; }

.ctf-eyebrow {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.55);
  margin-bottom: 10px;
}

.ctf-eyebrow--lime { color: #82C341; }

.ctf-hero-hed {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 0;
}

.ctf-hero-hed--white { color: #fff; }

.ctf-rule {
  height: 4px;
  width: 44px;
  margin: 14px 0;
}

.ctf-rule--red  { background: #C8102E; }
.ctf-rule--lime { background: #82C341; }

.ctf-hero-body {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
}

.ctf-hero-body--muted { color: #93A0AD; }

/* ── Buttons row ── */
.ctf-btns-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 24px;
  background: #fff;
  border-top: 1px solid #E8E8E6;
  border-bottom: 1px solid #E8E8E6;
}

.ctf-btns-row--dark {
  background: #1E2630;
  border-color: #3C4654;
}

.ctf-btn {
  font-size: 13px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 2px;
  display: inline-block;
  cursor: default;
  white-space: nowrap;
  line-height: 1;
  
}

.ctf-btn--red          { background: #D83933; color: #fff; }
.ctf-btn--navy         { background: #102A4C; color: #fff; }
.ctf-btn--outline-red  { background: transparent; color: #C8102E; box-shadow: inset 0 0 0 2px #D83933; }

/* Hover states for applied component button demos */
.ctf-btn--red:hover          { background: #b82e28; }
.ctf-btn--navy:hover         { background: #091f3a; }
.ctf-btn--outline-red:hover  { background: #D83933; color: #fff; }
.ctf-btn--dbhds-lime:hover   { background: #6aaa2f; }
.ctf-btn--dbhds-outline:hover { background: #2c3d50; }

.ctf-btn--dbhds-lime   { background: #82C341; color: #1E2630; border-radius: 100px; padding: 9px 18px; }
.ctf-btn--dbhds-outline { background: #1E2630; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.45); border-radius: 100px; padding: 9px 18px; }

/* ── Feature band ── */
.ctf-feature {
  padding: 16px 24px;
}

.ctf-feature--cova { background: #0B2E50; }

.ctf-feature-eye {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
  margin-bottom: 5px;
}

.ctf-feature-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 4px;
}

.ctf-feature-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  line-height: 1.4;
}

/* ── Stat block (DBHDS) ── */
.ctf-stat-block {
  padding: 18px 24px;
  background: #1E2630;
  border-top: 1px solid #3C4654;
  flex: 1;
}

.ctf-stat-num {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 4px;
}

.ctf-stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #82C341;
  margin-bottom: 4px;
}

.ctf-stat-sub {
  font-size: 11px;
  color: #93A0AD;
  line-height: 1.4;
}

/* ── Right column ── */
.ctf-right {
  display: flex;
  flex-direction: column;
  background: #fff;
}

.ctf-right--dark {
  background: #1E2630;
}

/* ── Content cards ── */
.ctf-card {
  padding: 20px 22px;
  background: #fff;
  border-bottom: 1px solid #E8E8E6;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ctf-card:last-child { border-bottom: none; }

.ctf-card--tint-blue {
  background: #E7F1F8;
  position: relative;
}

.ctf-card--dark {
  background: #1E2630;
  border-color: #3C4654;
}

/* Blue left border accent on Popular services */
.ctf-card-border-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #0B5C8C;
}

.ctf-card-inner {
  padding-left: 4px;
}

.ctf-card-eye {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 7px;
}

.ctf-card-eye--blue  { color: #0079BA; }
.ctf-card-eye--teal  { color: #46A6CC; }
.ctf-card-eye--amber { color: #EBA81E; }

.ctf-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #0A0A09;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 0;
}

.ctf-card-title--white { color: #fff; }

.ctf-card-body {
  font-size: 13px;
  font-weight: 300;
  color: #6B6B6B;
  line-height: 1.6;
  margin-bottom: 12px;
  flex: 1;
}

.ctf-card-body--muted { color: #93A0AD; }

.ctf-card-link {
  font-size: 13px;
  font-weight: 600;
  margin-top: auto;
}

.ctf-card-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ctf-card-link--blue { color: #1B6CB5; }
.ctf-card-link--teal { color: #46A6CC; }

/* ── Link lists ── */
.ctf-link {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 8px;
  line-height: 1.4;
  display: block;
}

.ctf-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ctf-link--blue   { color: #1B6CB5; }
.ctf-link--dbhds  { color: #56B0E6; }

/* ── Tab strip ── */
.ctf-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.ctf-tab {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border: 1px solid #D9D8D3;
  border-radius: 100px;
  color: #6B6B6B;
  background: #fff;
  white-space: nowrap;
}

.ctf-tab--alert {
  border-color: #C8102E;
  color: #C8102E;
}

/* Dark tab variants */
.ctf-tabs--dark .ctf-tab { background: transparent; border-color: #3C4654; color: #93A0AD; }
.ctf-tab--dark-lime    { background: #82C341 !important; border-color: #82C341 !important; color: #1E2630 !important; }
.ctf-tab--dark-active  { background: #1577BC  !important; border-color: #1577BC  !important; color: #fff !important; }
.ctf-tab--dark-outline { background: #1E2630 !important; border-color: #3C4654 !important; color: #93A0AD !important; }
.ctf-tab--active {color: #fff !important;}

/* ── Fig 6 compare layout ── */
.ctf-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.ctf--half {
  min-width: 0;
}

.ctf--dark {
  background: #1E2630;
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .ctf-compare          { grid-template-columns: 1fr; gap: 20px; }
  .ctf-body             { grid-template-columns: 1fr; }
  .ctf-left             { border-right: none; border-bottom: 1px solid #E8E8E6; }
  .ctf-body--dark .ctf-left { border-bottom-color: #3C4654; }
  .ctf-swatches         { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
  .ctf-swatches         { grid-template-columns: repeat(3, 1fr); }
  .ctf-sw-color         { height: 48px; }
  .ctf-sw-hex           { display: none; }
  .ctf-hero-hed         { font-size: 18px; }
  .ctf-card-title       { font-size: 15px; }
}


/* ─────────────────────────────────────
   CTF WRAPPER — floating panel in gray area
   Caption lives in the white cs-graphic footer
   ───────────────────────────────────── */

/* Override cs-graphic to be the white outer box */
.cs-graphic--fig {
  background: #fff;
  padding: 0;
  overflow: hidden;
}

/* Gray area that holds the floating panel */
.ctf-wrap,
.ctf-1col {
  background: #EDECE8;
  padding: 28px;
}

/* The floating panel */
.ctf {
  box-shadow: 0 4px 24px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
}

/* 1-column stacked layout for Fig 6 */
.ctf-1col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ctf-1col .ctf {
  box-shadow: 0 4px 24px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
}

/* 10px gap between component sections */
.ctf-gap {
  height: 10px;
  background: #F2F1EE;
  flex-shrink: 0;
}

.ctf-gap--dark {
  background: #1E2630;
}

/* Left/right columns — no hard borders between sections, gap handles spacing */
.ctf-left,
.ctf-right {
  background: transparent;
}

.ctf-left {
  border-right: 1px solid #E8E8E6;
}

.ctf-body--dark .ctf-left {
  border-right-color: #3C4654;
}

/* Remove old border-bottom from cards since gap handles spacing */
.ctf-card {
  border-bottom: none;
}

/* Keep right column cards on white / dark bg */
.ctf-right .ctf-card       { background: #fff; }
.ctf-right--dark .ctf-card { background: #283039; }

/* Tint card stays tinted */
.ctf-right .ctf-card--tint-blue { background: #E7F1F8; }


/* ─────────────────────────────────────
   CTF COLUMN SPACING + COMPONENT SCALE
   Override previous rules at the bottom
   to add column gap and reduce padding
   ───────────────────────────────────── */

.ctf-body {
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
  padding: 0 20px 0 0;
  background: #F2F1EE;
  box-sizing: border-box;
}

.ctf-body--dark {
  padding: 0 20px 0 0;
  background: #1E2630;
}

/* Left column — no right border, gap handles separation */
.ctf-left {
  border-right: none;
  display: flex;
  flex-direction: column;
}

.ctf-body--dark .ctf-left {
  border-right: none;
}

/* Right column */
.ctf-right {
  display: flex;
  flex-direction: column;
  background: transparent;
}

.ctf-right--dark {
  background: transparent;
}

/* Scale down hero padding + type */
.ctf-hero {
  padding: 16px 18px 14px;
  flex: none;
}

.ctf-hero-hed {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.ctf-eyebrow {
  font-size: 9px;
  margin-bottom: 7px;
}

.ctf-eyebrow--lime { color: #82C341; }

.ctf-rule {
  margin: 10px 0;
}

.ctf-hero-body {
  font-size: 12px;
  line-height: 1.5;
}

/* Scale down buttons row */
.ctf-btns-row {
  padding: 12px 18px;
  gap: 8px;
  background: transparent;
  border-top: none;
  border-bottom: none;
}

.ctf-btns-row--dark {
  background: #1E2630;
}

.ctf-btn {
  font-size: 11px;
  padding: 8px 12px;
}

/* Scale down feature band */
.ctf-feature {
  padding: 12px 18px;
}

.ctf-feature-eye   { font-size: 9px; margin-bottom: 4px; }
.ctf-feature-title { font-size: 13px; margin-bottom: 3px; }
.ctf-feature-sub   { font-size: 11px; }

/* Scale down stat block */
.ctf-stat-block {
  padding: 14px 18px;
  background: #16202A;
  border-top: none;
  flex: 1;
}

.ctf-stat-num   { font-size: 26px; margin-bottom: 3px; }
.ctf-stat-label { font-size: 9px; margin-bottom: 3px; }
.ctf-stat-sub   { font-size: 10px; }

/* Scale down cards */
.ctf-card {
  padding: 14px 16px;
  background: #fff;
  border-bottom: none;
  flex: none;
}

.ctf-card--dark    { background: #1E2630 !important; }
.ctf-card--tint-blue { background: #E7F1F8; position: relative; }

.ctf-card-eye  { font-size: 9px; margin-bottom: 5px; }

.ctf-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #0A0A09;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 0;
}

.ctf-card-title--white { color: #fff; }

.ctf-card-body {
  font-size: 11px;
  line-height: 1.55;
  margin-bottom: 10px;
  flex: none;
}

.ctf-card-body--muted { color: #93A0AD; }

.ctf-card-link { font-size: 11px; }

.ctf-card-inner { padding-left: 6px; }

/* Scale down links */
.ctf-link { font-size: 11px; margin-bottom: 6px; }

/* Scale down tabs */
.ctf-tab { font-size: 10px; padding: 4px 9px; }

/* Gap spacers stay 10px */
.ctf-gap      { height: 10px; background: #F2F1EE; flex-shrink: 0; }
.ctf-gap--dark { height: 10px; background: #1E2630; flex-shrink: 0; }

/* Responsive */
@media (max-width: 860px) {
  .ctf-body         { grid-template-columns: 1fr; gap: 0; padding: 0; }
  .ctf-body--dark   { padding: 0; }
}


/* ─────────────────────────────────────
   CTF COMPONENTS ON GRAY SURFACE
   Remove the white panel container.
   Each component floats on #EDECE8
   with its own drop shadow.
   ───────────────────────────────────── */

/* The ctf panel itself has no bg or shadow — it's transparent */
.ctf {
  background: transparent;
  box-shadow: none !important;
  border-radius: 0;
  overflow: visible;
}

/* The wrap/1col still provides the gray surface */
.ctf-wrap,
.ctf-1col {
  background: #EDECE8;
  padding: 28px;
}

/* Title row — no shadow, just sits on gray */
.ctf-titlerow {
  background: transparent;
  border-bottom: none;
  padding: 0 0 14px 0;
}

.ctf-titlerow--dark {
  background: transparent;
  border-bottom: none;
}

/* Swatch row — floats as its own card */
.ctf-swatches {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  border-radius: 4px;
  overflow: hidden;
  border-bottom: none;
  margin-bottom: 10px;
}

.ctf-swatches--dark {
  background: #1A2028;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.15);
  border-bottom: none;
}

/* Applied label — plain text on gray, no bg */
.ctf-applied {
  background: transparent;
  border-bottom: none;
  padding: 0 0 12px 0;
  color: #6B6B6B;
}

.ctf-applied--dark {
  background: transparent;
  border-bottom: none;
  color: #5A6472;
}

/* Body — gray surface, no bg panel */
.ctf-body {
  background: transparent;
  gap: 0 16px;
  padding: 0;
  align-items: start;
}

.ctf-body--dark {
  background: transparent;
  padding: 0;
}

/* Each component gets its own shadow and radius */
.ctf-hero {
  box-shadow: 0 2px 8px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
  border-radius: 4px;
  overflow: hidden;
}

.ctf-btns-row {
  border-radius: 4px;
  border-top: none;
  border-bottom: none;
}

.ctf-btns-row--dark {
  background: #1A2028;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.15);
}

.ctf-feature {
  box-shadow: 0 2px 8px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
  border-radius: 4px;
  overflow: hidden;
}

.ctf-stat-block {
  box-shadow: 0 2px 8px rgba(0,0,0,0.20), 0 1px 2px rgba(0,0,0,0.12);
  background: #1E2630 !important;
  border-radius: 4px;
  border-top: none;
  flex: none;
}

.ctf-card {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  border-radius: 4px;
  border-bottom: none;
}

.ctf-card--tint-blue {
  background: #E7F1F8;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
}

.ctf-card--dark {
  background: #283039;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 1px 2px rgba(0,0,0,0.14);
}

/* Right column — transparent, no bg */
.ctf-right       { background: transparent; }
.ctf-right--dark { background: transparent; }

/* Left column — no border, gap handles separation */
.ctf-left { border-right: none; }
.ctf-body--dark .ctf-left { border-right: none; }

/* Gap spacers are transparent on gray surface */
.ctf-gap       { background: transparent; }
.ctf-gap--dark { background: transparent; }

/* cs-graphic--fig white outer box: just for the caption strip */
.cs-graphic--fig {
  background: #fff;
  padding: 0;
  overflow: hidden;
}


/* ════════════════════════════════════
   ITC REMEDIATION REGISTER — CASE STUDY
   Companion styles. Load AFTER style.css.
   All irf- prefixed (itc-register-fig); no overrides to base.

   Tier palette:
     Tier 1  #C0392B  (red   — 5.12:1 on white ✓ AA)
     Tier 2  #B07D00  (amber — 4.52:1 on white ✓ AA)
     Tier 3  #2D7A45  (green — 4.52:1 on white ✓ AA)

   State palette (DevOps):
     New         #6B6B6B  (--mid)
     Active      #005FA8  (--accent)
     Resolved    #2D7A45  (green)
     Under Rem.  #7B4AA0  (purple — 4.52:1 on white ✓ AA)
   ════════════════════════════════════ */


/* ─────────────────────────────────────
   SHARED SURFACE
   ───────────────────────────────────── */
.irf-wrap {
  background: #EDECE8;
  padding: 24px;
}

.irf-panel {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.09), 0 1px 2px rgba(0,0,0,0.05);
  overflow: hidden;
}

.irf-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  background: #F7F6F3;
  border-bottom: 1px solid #E8E8E6;
}

.irf-panel-title {
  font-size: 11px;
  font-weight: 700;
  color: #0A0A09;
  letter-spacing: -0.01em;
}

.irf-panel-meta {
  font-size: 10px;
  color: #666;
  font-family: monospace;
  letter-spacing: 0.02em;
}

/* Tag / badge */
.irf-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 3px;
  white-space: nowrap;
  line-height: 1.5;
}

.irf-tag--t1     { background: rgba(192,57,43,0.10);  color: #A02820; }
.irf-tag--t2     { background: rgba(176,125,0,0.12);  color: #8A6200; }
.irf-tag--t3     { background: rgba(45,122,69,0.10);  color: #1E6135; }
.irf-tag--new    { background: rgba(107,107,107,0.10); color: #4A4A4A; }
.irf-tag--active { background: rgba(0,95,168,0.10);   color: #004D8C; }
.irf-tag--resolved { background: rgba(45,122,69,0.10); color: #1E6135; }
.irf-tag--under  { background: rgba(123,74,160,0.10); color: #5A3480; }
.irf-tag--ess    { background: rgba(0,95,168,0.10);   color: #004D8C; }
.irf-tag--pub    { background: rgba(20,136,143,0.10); color: #0C5E62; }
.irf-tag--vend   { background: rgba(107,107,107,0.10); color: #4A4A4A; }

/* Icon: work item type */
.irf-wi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  flex-shrink: 0;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
}

.irf-wi-icon--system { background: #0074E8; color: #fff; } /* filled square = Epic-equiv */
.irf-wi-icon--issue  { background: #C0392B; color: #fff; } /* bug-equiv */

/* State dot */
.irf-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.irf-dot--new      { background: #9E9E9E; }
.irf-dot--active   { background: #005FA8; }
.irf-dot--resolved { background: #2D7A45; }
.irf-dot--under    { background: #7B4AA0; }


/* ═══════════════════════════════════════
   FIG 1 — PRIORITIZATION SCORING MODEL
   ═══════════════════════════════════════ */

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

/* Left: criteria table */
.irf-criteria-table {
  width: 100%;
  border-collapse: collapse;
}

.irf-criteria-table thead th {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #666;
  padding: 9px 14px;
  text-align: left;
  background: #F7F6F3;
  border-bottom: 2px solid #E8E8E6;
}

.irf-criteria-table thead th:last-child {
  text-align: center;
}

.irf-criteria-row {
  border-bottom: 1px solid #F2F1EE;
}

.irf-criteria-row:last-child {
  border-bottom: none;
}

.irf-criteria-num {
  font-size: 10px;
  font-weight: 700;
  color: #005FA8;
  width: 28px;
  padding: 10px 0 10px 14px;
  vertical-align: top;
}

.irf-criteria-name {
  font-size: 12px;
  font-weight: 600;
  color: #0A0A09;
  padding: 10px 8px 4px;
  vertical-align: top;
  line-height: 1.3;
}

.irf-criteria-desc {
  font-size: 10.5px;
  font-weight: 300;
  color: #6B6B6B;
  padding: 0 8px 10px;
  line-height: 1.45;
}

.irf-criteria-score {
  font-size: 10px;
  font-weight: 600;
  color: #6B6B6B;
  padding: 10px 14px;
  text-align: center;
  vertical-align: top;
  white-space: nowrap;
}

/* combined name+desc cell */
.irf-criteria-cell {
  vertical-align: top;
  padding: 0;
}

/* Right: scoring outcomes */
.irf-outcomes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.irf-outcomes-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #666;
  margin-bottom: 2px;
}

.irf-tier-card {
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid transparent;
}

.irf-tier-card--t1 {
  border-color: rgba(192,57,43,0.20);
}
.irf-tier-card--t2 {
  border-color: rgba(176,125,0,0.20);
}
.irf-tier-card--t3 {
  border-color: rgba(45,122,69,0.20);
}

.irf-tier-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}

.irf-tier-head--t1 { background: rgba(192,57,43,0.08); }
.irf-tier-head--t2 { background: rgba(176,125,0,0.08); }
.irf-tier-head--t3 { background: rgba(45,122,69,0.08); }

.irf-tier-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.irf-tier-label--t1 { color: #A02820; }
.irf-tier-label--t2 { color: #8A6200; }
.irf-tier-label--t3 { color: #1E6135; }

.irf-tier-range {
  font-size: 10px;
  font-weight: 600;
  color: #666;
  margin-left: auto;
  font-family: monospace;
  letter-spacing: 0.03em;
}

.irf-tier-body {
  padding: 10px 14px 12px;
  background: #fff;
  font-size: 11.5px;
  font-weight: 300;
  color: #6B6B6B;
  line-height: 1.55;
  border-top: 1px solid;
}

.irf-tier-card--t1 .irf-tier-body { border-color: rgba(192,57,43,0.12); }
.irf-tier-card--t2 .irf-tier-body { border-color: rgba(176,125,0,0.12); }
.irf-tier-card--t3 .irf-tier-body { border-color: rgba(45,122,69,0.12); }

.irf-scoring-footnote {
  font-size: 10px;
  color: #666;
  font-style: italic;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #E8E8E6;
  text-align: right;
}

@media (max-width: 860px) {
  .irf-scoring-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════
   FIG 2 — DEVOPS REGISTER (BACKLOG LIST)
   ═══════════════════════════════════════ */

.irf-register-header {
  display: grid;
  grid-template-columns: 24px 32px 1fr minmax(90px,110px) minmax(120px,160px) 60px minmax(100px,140px);
  padding: 8px 14px;
  background: #F7F6F3;
  border-bottom: 1px solid #E8E8E6;
  align-items: center;
  gap: 8px;
}

.irf-register-col-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.irf-register-row {
  display: grid;
  grid-template-columns: 24px 32px 1fr minmax(90px,110px) minmax(120px,160px) 60px minmax(100px,140px);
  padding: 8px 14px;
  align-items: start;
  gap: 8px;
  border-bottom: 1px solid #F2F1EE;
  min-height: 40px;
}

.irf-register-row:last-child {
  border-bottom: none;
}

/* Alternating row tint for system rows */
.irf-register-row--system {
  background: #FAFAF9;
}

.irf-register-row--issue {
  background: #fff;
}

.irf-register-id {
  font-size: 10px;
  font-weight: 500;
  color: #666;
  font-family: monospace;
}

.irf-register-title {
  font-size: 12px;
  font-weight: 500;
  color: #005FA8;
  line-height: 1.35;
}

.irf-register-title--system {
  color: #0A0A09;
  font-weight: 600;
}

.irf-register-state {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #4A4A4A;
  padding-top: 1px;
}

.irf-register-owner {
  font-size: 11px;
  color: #6B6B6B;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.irf-register-tier {
  padding-top: 1px;
}

.irf-register-tags {
  display: flex;
  gap: 4px;
  row-gap: 4px;
  flex-wrap: wrap;
  align-items: flex-start;
}

@media (max-width: 860px) {
  .irf-register-header {
    grid-template-columns: 24px 32px 1fr 90px;
  }
  .irf-register-row {
    grid-template-columns: 24px 32px 1fr 90px;
  }
  /* Hide owner, tier, tags on narrow screens */
  .irf-register-header > *:nth-child(n+5),
  .irf-register-row   > *:nth-child(n+5) {
    display: none;
  }
}


/* ═══════════════════════════════════════
   FIG 3 — TRIAGE BACKLOG (KANBAN-STYLE)
   ═══════════════════════════════════════ */

.irf-kanban {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.irf-lane {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.irf-lane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 4px 4px 0 0;
}

.irf-lane-head--new      { background: #F2F1EE; }
.irf-lane-head--active   { background: rgba(0,95,168,0.07); }
.irf-lane-head--under    { background: rgba(123,74,160,0.07); }
.irf-lane-head--resolved { background: rgba(45,122,69,0.07); }

.irf-lane-name {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #0A0A09;
}

.irf-lane-count {
  font-size: 10px;
  font-weight: 600;
  color: #5b5b5b;
  background: rgba(0,0,0,0.06);
  border-radius: 10px;
  padding: 1px 7px;
  font-family: monospace;
}

.irf-lane-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.irf-card {
  background: #fff;
  border: 1px solid #E8E8E6;
  border-radius: 4px;
  padding: 10px 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.irf-card-id {
  font-size: 9px;
  font-weight: 500;
  color: #666;
  font-family: monospace;
  margin-bottom: 4px;
}

.irf-card-title {
  font-size: 11.5px;
  font-weight: 600;
  color: #0A0A09;
  line-height: 1.35;
  margin-bottom: 8px;
}

.irf-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}

.irf-card-system {
  font-size: 9.5px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

/* Tier bar: left border accent */
.irf-card--t1 { border-left: 3px solid #C0392B; }
.irf-card--t2 { border-left: 3px solid #B07D00; }
.irf-card--t3 { border-left: 3px solid #2D7A45; }

@media (max-width: 860px) {
  .irf-kanban {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

@media (max-width: 540px) {
  .irf-kanban {
    grid-template-columns: 1fr;
  }
}


/* ═══════════════════════════════════════
   FIG 4 — WORK ITEM DETAIL
   ═══════════════════════════════════════ */

.irf-detail-layout {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 0;
  align-items: stretch;
}

/* Left: main content */
.irf-detail-main {
  padding: 16px 18px;
  border-right: 1px solid #E8E8E6;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.irf-detail-breadcrumb {
  font-size: 9.5px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 5px;
}

.irf-detail-breadcrumb-link {
  color: #005FA8;
  font-weight: 500;
}

.irf-detail-breadcrumb-sep {
  color: #BFBDB6;
}

.irf-detail-title-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.irf-detail-title {
  font-size: 14px;
  font-weight: 700;
  color: #0A0A09;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.irf-detail-section-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #666;
  margin-bottom: 6px;
}

.irf-detail-desc {
  font-size: 12px;
  font-weight: 300;
  color: #6B6B6B;
  line-height: 1.65;
}

.irf-detail-justification {
  background: #FAFAF9;
  border: 1px solid #E8E8E6;
  border-radius: 4px;
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 400;
  color: #4A4A4A;
  line-height: 1.6;
}

/* Children list */
.irf-children {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.irf-child-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 6px 8px;
  background: #FAFAF9;
  border: 1px solid #F2F1EE;
  border-radius: 3px;
}

.irf-child-id {
  font-size: 9.5px;
  font-weight: 600;
  color: #005FA8;
  font-family: monospace;
  flex-shrink: 0;
  padding-top: 1px;
}

.irf-child-title {
  font-size: 11px;
  color: #0A0A09;
  font-weight: 500;
  flex: 1;
  line-height: 1.35;
  min-width: 0; /* allows flex child to shrink and wrap */
}

.irf-child-state {
  font-size: 9px;
  color: #666;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: 2px;
  white-space: nowrap;
}

.irf-children-more {
  font-size: 10.5px;
  color: #005FA8;
  font-weight: 500;
  padding: 3px 8px;
}

/* Right: metadata sidebar */
.irf-detail-sidebar {
  padding: 16px;
  background: #FAFAF9;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.irf-meta-section {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid #E8E8E6;
}

.irf-meta-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.irf-meta-section-title {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #666;
  margin-bottom: 10px;
}

.irf-meta-field {
  margin-bottom: 9px;
}

.irf-meta-field:last-child {
  margin-bottom: 0;
}

.irf-meta-key {
  font-size: 9.5px;
  font-weight: 500;
  color: #666;
  margin-bottom: 2px;
  letter-spacing: 0.02em;
}

.irf-meta-val {
  font-size: 11.5px;
  font-weight: 500;
  color: #0A0A09;
  line-height: 1.35;
}

.irf-meta-val--muted {
  color: #666;
  font-weight: 400;
}

/* Scoring table */
.irf-score-table {
  width: 100%;
  border-collapse: collapse;
}

.irf-score-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid #F2F1EE;
}

.irf-score-row:last-child {
  border-bottom: none;
}

.irf-score-criterion {
  font-size: 10.5px;
  font-weight: 400;
  color: #6B6B6B;
}

.irf-score-val {
  font-size: 11px;
  font-weight: 600;
  color: #0A0A09;
  font-family: monospace;
}

.irf-score-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0 0;
  margin-top: 4px;
  border-top: 2px solid #E8E8E6;
}

.irf-score-total-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #0A0A09;
}

.irf-score-total-val {
  font-size: 14px;
  font-weight: 700;
  color: #0A0A09;
  font-family: monospace;
}

@media (max-width: 860px) {
  .irf-detail-layout {
    grid-template-columns: 1fr;
  }
  .irf-detail-main {
    border-right: none;
    border-bottom: 1px solid #E8E8E6;
  }
}


/* ═══════════════════════════════════════
   FIG A — HB 2541 GAP ANALYSIS
   ═══════════════════════════════════════ */

.irf-gap-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0;
}

.irf-gap-divider {
  background: #E8E8E6;
  width: 1px;
  align-self: stretch;
}

.irf-gap-col {
  display: flex;
  flex-direction: column;
}

.irf-gap-col-head {
  padding: 14px 20px 12px;
  border-bottom: 1px solid #E8E8E6;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.irf-gap-col--req .irf-gap-col-head { background: rgba(45,122,69,0.05); }
.irf-gap-col--gap .irf-gap-col-head { background: rgba(192,57,43,0.04); }

.irf-gap-col-eye {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.irf-gap-col--req .irf-gap-col-eye { color: #1E6135; }
.irf-gap-col--gap .irf-gap-col-eye { color: #A02820; }

.irf-gap-col-sub {
  font-size: 10px;
  font-weight: 400;
  color: #666;
}

.irf-gap-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.irf-gap-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid #F2F1EE;
  font-size: 12.5px;
  font-weight: 400;
  color: #0A0A09;
  line-height: 1.5;
}

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

.irf-gap-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.irf-gap-item--req .irf-gap-icon { color: #2D7A45; }
.irf-gap-item--gap .irf-gap-icon { color: #C0392B; }

.irf-gap-item--req { background: #fff; }
.irf-gap-item--gap { background: #fff; }

/* Alternating tint */
.irf-gap-item:nth-child(even) { background: #FAFAF9; }

@media (max-width: 700px) {
  .irf-gap-grid {
    grid-template-columns: 1fr;
  }
  .irf-gap-divider {
    width: auto;
    height: 1px;
    align-self: auto;
  }
}


/* ═══════════════════════════════════════
   FIG B — INBOX CHAOS (BEFORE STATE)
   ═══════════════════════════════════════ */

.irf-inbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid #E8E8E6;
}

.irf-inbox-col {
  display: flex;
  flex-direction: column;
}

.irf-inbox-col:first-child {
  border-right: 1px solid #E8E8E6;
}

.irf-inbox-col-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 700;
  border-bottom: 1px solid #E8E8E6;
  letter-spacing: -0.01em;
}

.irf-inbox-col-head--teams {
  background: #EEF2FF;
  color: #3B4FC8;
}

.irf-inbox-col-head--email {
  background: #F2F1EE;
  color: #3A3A38;
}

.irf-inbox-app-icon {
  flex-shrink: 0;
}

.irf-inbox-messages {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #FAFAF9;
}

/* ── Teams message style ── */
.irf-teams-msg {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.irf-teams-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.irf-teams-sender {
  font-size: 10.5px;
  font-weight: 700;
  color: #0A0A09;
}

.irf-teams-time {
  font-size: 9.5px;
  color: #666;
}

.irf-teams-bubble {
  font-size: 11.5px;
  font-weight: 300;
  color: #3A3A38;
  line-height: 1.55;
  background: #fff;
  border: 1px solid #E8E8E6;
  border-radius: 0 6px 6px 6px;
  padding: 8px 11px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* ── Email message style ── */
.irf-email-msg {
  background: #fff;
  border: 1px solid #E8E8E6;
  border-radius: 4px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.irf-email-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.irf-email-from {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
  min-width: 0;
}

.irf-email-sender {
  font-size: 11px;
  font-weight: 700;
  color: #0A0A09;
  white-space: nowrap;
}

.irf-email-addr {
  font-size: 9.5px;
  color: #666;
  font-family: monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.irf-email-time {
  font-size: 9.5px;
  color: #666;
  white-space: nowrap;
  flex-shrink: 0;
}

.irf-email-subject {
  font-size: 11px;
  font-weight: 600;
  color: #0A0A09;
  line-height: 1.3;
}

.irf-email-preview {
  font-size: 11px;
  font-weight: 300;
  color: #6B6B6B;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 700px) {
  .irf-inbox-grid {
    grid-template-columns: 1fr;
  }
  .irf-inbox-col:first-child {
    border-right: none;
    border-bottom: 1px solid #E8E8E6;
  }
}


/* ════════════════════════════════════
   VITA WEBSITE REDESIGN — CASE STUDY
   Companion styles. Load AFTER style.css.
   All vrf- prefixed (vita-redesign-fig); no overrides to base.
   ════════════════════════════════════ */

/* ─────────────────────────────────────
   SHARED: Gray surface + floating panels
   (matches ctf-wrap pattern from COVA)
   ───────────────────────────────────── */
.vrf-wrap {
  background: #EDECE8;
  padding: 28px;
}

.vrf-label-sm {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #666;
}

/* ─────────────────────────────────────
   FIG A — STYLE TILE
   VITA brand: teal #14888F, magenta #A2107C,
   dark navy #062628, white body
   ───────────────────────────────────── */
.vrf-tile {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
  border-radius: 4px;
  overflow: hidden;
}

.vrf-tile-titlerow {
  padding: 14px 20px 12px;
  border-bottom: 1px solid #E8E8E6;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.vrf-tile-title {
  font-size: 13px;
  font-weight: 700;
  color: #0A0A09;
  letter-spacing: -0.01em;
}

.vrf-tile-meta {
  font-size: 10px;
  color: #666;
  font-family: monospace;
  letter-spacing: 0.02em;
}

/* Color swatches row */
.vrf-swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-bottom: 1px solid #E8E8E6;
}

.vrf-sw {
  display: flex;
  flex-direction: column;
}

.vrf-sw-color {
  height: 56px;
}

.vrf-sw-foot {
  padding: 6px 8px;
  background: #fff;
  border-right: 1px solid #E8E8E6;
}

.vrf-sw:last-child .vrf-sw-foot {
  border-right: none;
}

.vrf-sw-name {
  font-size: 9px;
  font-weight: 600;
  color: #0A0A09;
  line-height: 1.3;
  display: block;
  margin-bottom: 2px;
}

.vrf-sw-hex {
  font-size: 9px;
  color: #666;
  font-family: monospace;
  display: block;
}

/* Type scale */
.vrf-type-row {
  padding: 18px 20px;
  border-bottom: 1px solid #E8E8E6;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vrf-type-specimen {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.vrf-type-meta {
  font-size: 10px;
  color: #666;
  white-space: nowrap;
  min-width: 130px;
  flex-shrink: 0;
}

.vrf-type-h1 {
  font-size: 26px;
  font-weight: 700;
  color: #062628;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.vrf-type-h2 {
  font-size: 18px;
  font-weight: 700;
  color: #062628;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.vrf-type-body {
  font-size: 15px;
  font-weight: 400;
  color: #0A0A09;
  line-height: 1.5;
}

.vrf-type-label {
  font-size: 12px;
  font-weight: 600;
  color: #14888F;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Component previews row */
.vrf-components {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.vrf-comp-col {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vrf-comp-col:first-child {
  border-right: 1px solid #E8E8E6;
}

.vrf-comp-col-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #666;
  margin-bottom: 4px;
}

/* Buttons */
.vrf-btn-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.vrf-btn {
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 2px;
  cursor: default;
  display: inline-block;
}

.vrf-btn--primary   { background: #14888F; color: #fff; }
.vrf-btn--magenta   { background: #A2107C; color: #fff; }
.vrf-btn--outline   { background: transparent; color: #14888F; box-shadow: inset 0 0 0 1.5px #14888F; }
.vrf-btn--dark      { background: #062628; color: #fff; }

.vrf-btn--primary:hover   { background: #0f6f75; }
.vrf-btn--magenta:hover   { background: #850d66; }
.vrf-btn--outline:hover   { background: rgba(20,136,143,0.08); }
.vrf-btn--dark:hover      { background: #041d1f; }


/* Nav mockup */
.vrf-nav-mock {
  background: #062628;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
}

.vrf-nav-brand {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  border-right: 1px solid rgba(255,255,255,0.2);
  padding-right: 10px;
  white-space: nowrap;
}

.vrf-nav-brand span {
  color: #14888F;
}

.vrf-nav-links {
  display: flex;
  gap: 10px;
  flex: 1;
  flex-wrap: wrap;
}

.vrf-nav-link {
  font-size: 10px;
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
}

.vrf-nav-link--active {
  color: #fff;
  font-weight: 600;
  border-bottom: 2px solid #14888F;
  padding-bottom: 1px;
}

/* Page header mockup */
.vrf-pagehead {
  background: #14888F;
  padding: 12px 14px;
  border-radius: 4px;
}

.vrf-pagehead-eyebrow {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
  margin-bottom: 4px;
}

.vrf-pagehead-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.vrf-rule-teal {
  height: 4px;
  width: 32px;
  background: #A2107C;
  margin: 6px 0 0;
  border-radius: 0;
}

/* Alert / badge strip */
.vrf-badge-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.vrf-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 2px;
  cursor: default;
}

.vrf-badge--teal     { background: #E2F4F4; color: #0C5E62; }
.vrf-badge--magenta  { background: #F7E3F2; color: #7A0C5D; }
.vrf-badge--warn     { background: #FEF3CD; color: #7A5000; }
.vrf-badge--dark     { background: #062628; color: #fff; }

/* Card */
.vrf-card {
  background: #fff;
  border: 1px solid #E8E8E6;
  border-radius: 4px;
  padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.vrf-card-eye {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #14888F;
  margin-bottom: 4px;
}

.vrf-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #062628;
  margin-bottom: 4px;
  line-height: 1.3;
}

.vrf-card-body {
  font-size: 11px;
  color: #6B6B6B;
  line-height: 1.5;
}

.vrf-card-link {
  font-size: 11px;
  font-weight: 600;
  color: #14888F;
  margin-top: 6px;
  display: block;
}


/* ─────────────────────────────────────
   FIG B — NAV LABELS BEFORE vs AFTER
   ───────────────────────────────────── */
.vrf-nav-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.vrf-nav-col {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
  border-radius: 4px;
  overflow: hidden;
}

.vrf-nav-col-head {
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vrf-nav-col-head--before { background: #1B5E5F; }
.vrf-nav-col-head--after  { background: #062628; }

.vrf-nav-col-eye {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
}

.vrf-nav-col-sub {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
}

.vrf-nav-strip {
  padding: 10px 14px 6px;
  background: #14888F;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.vrf-nav-strip--dark {
  background: #062628;
}

.vrf-nav-strip-item {
  font-size: 10px;
  color: rgba(255,255,255,0.8);
  white-space: nowrap;
  padding-bottom: 4px;
}

.vrf-nav-strip-item--active {
  color: #fff;
  font-weight: 700;
  border-bottom: 2px solid rgba(255,255,255,0.9);
}

/* Megamenu panel (before) */
.vrf-mega-panel {
  background: #0C4E50;
  padding: 12px 16px 14px;
}

.vrf-mega-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.vrf-mega-group-title {
  font-size: 9.5px;
  font-weight: 700;
  color: #A2D9DB;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.vrf-mega-item {
  font-size: 11px;
  color: rgba(255,255,255,0.78);
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  gap: 4px;
}

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

.vrf-mega-unknown {
  font-size: 9px;
  background: rgba(255,200,0,0.15);
  color: #FFD966;
  padding: 1px 5px;
  border-radius: 2px;
  font-weight: 600;
  flex-shrink: 0;
}

/* After: landing page categories */
.vrf-after-body {
  padding: 14px 16px;
  background: #fff;
}

.vrf-after-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #666;
  margin-bottom: 8px;
}

.vrf-after-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.vrf-after-card {
  background: #F2F1EE;
  border-radius: 4px;
  padding: 10px 12px;
  border: 1px solid #E8E8E6;
}

.vrf-after-card-title {
  font-size: 12px;
  font-weight: 700;
  color: #14888F;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.vrf-after-card-title svg {
  flex-shrink: 0;
}

.vrf-after-card-body {
  font-size: 10px;
  color: #6B6B6B;
  line-height: 1.4;
}

/* Left sidenav (after) */
.vrf-sidenav-wrap {
  display: flex;
  gap: 0;
  border-top: 1px solid #E8E8E6;
}

.vrf-sidenav {
  width: 130px;
  flex-shrink: 0;
  border-right: 1px solid #E8E8E6;
  background: #F7F7F5;
}

.vrf-sidenav-item {
  font-size: 11px;
  padding: 9px 12px;
  border-bottom: 1px solid #E8E8E6;
  color: #6B6B6B;
}

.vrf-sidenav-item--active {
  color: #062628;
  font-weight: 700;
  border-left: 3px solid #14888F;
  background: #fff;
}

.vrf-sidenav-item--parent {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #14888F;
  background: #E2F4F4;
}

.vrf-content-preview {
  flex: 1;
  padding: 14px;
  background: #fff;
}

.vrf-breadcrumb {
  font-size: 10px;
  color: #666;
  margin-bottom: 8px;
  display: flex;
  gap: 4px;
  align-items: center;
}

.vrf-breadcrumb-link { color: #14888F; }

.vrf-content-title {
  font-size: 16px;
  font-weight: 700;
  color: #062628;
  margin-bottom: 6px;
  line-height: 1.2;
}

.vrf-content-body {
  font-size: 11px;
  color: #6B6B6B;
  line-height: 1.6;
}


/* ─────────────────────────────────────
   FIG C — SITE ARCHITECTURE
   ───────────────────────────────────── */
.vrf-arch {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
  border-radius: 4px;
  overflow: hidden;
  padding: 20px 20px 16px;
}

.vrf-arch-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 0;
}

/* Root node */
.vrf-arch-root {
  background: #062628;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 4px;
  text-align: center;
  display: inline-block;
}

/* Level connector lines */
.vrf-arch-lines {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 8px 0 0;
}

.vrf-arch-connector-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 140px;
}

.vrf-arch-line-down {
  width: 1px;
  height: 16px;
  background: #BFBDB6;
  flex-shrink: 0;
}

.vrf-arch-line-across {
  height: 1px;
  background: #BFBDB6;
  width: 100%;
}

/* L1 nav items */
.vrf-arch-l1 {
  background: #127980;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 4px;
  text-align: center;
  width: 100%;
}

/* L2 sub-items */
.vrf-arch-children {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  margin-top: 4px;
}

.vrf-arch-l2 {
  background: #E2F4F4;
  color: #0C5E62;
  font-size: 10px;
  font-weight: 500;
  padding: 5px 8px;
  border-radius: 3px;
  text-align: center;
  border-left: 3px solid #14888F;
}

/* Connector row: root → L1 spread */
.vrf-arch-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}

.vrf-arch-trunk {
  width: 1px;
  height: 16px;
  background: #BFBDB6;
}

.vrf-arch-branch-row {
  display: flex;
  width: 100%;
  justify-content: center;
  position: relative;
}

.vrf-arch-branch-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: #BFBDB6;
}

.vrf-arch-branch {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 130px;
  padding: 0 5px;
}

.vrf-arch-branch-line {
  width: 1px;
  height: 14px;
  background: #BFBDB6;
}

.vrf-arch-legend {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #E8E8E6;
  justify-content: flex-end;
}

.vrf-arch-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #666;
}

.vrf-arch-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  flex-shrink: 0;
}

@media (max-width: 860px) {
  .vrf-nav-compare { grid-template-columns: 1fr; }
  .vrf-swatches { grid-template-columns: repeat(3, 1fr); }
  .vrf-components { grid-template-columns: 1fr; }
  .vrf-arch-branch-row { flex-wrap: wrap; }
  .vrf-arch-branch-row::before { display: none; }
  .vrf-mega-cols { grid-template-columns: 1fr; }
  .vrf-after-cards { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  /* IA diagram: single stacked column, no connectors */
  .vrf-arch { padding: 16px 12px 12px; }
  .vrf-arch-trunk,
  .vrf-arch-branch-line,
  .vrf-arch-branch-row::before { display: none; }
  .vrf-arch-branch-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .vrf-arch-branch {
    max-width: 100%;
    padding: 0;
  }
  .vrf-arch-l1 { border-radius: 4px; }
  .vrf-arch-children { margin-top: 6px; }
  .vrf-arch-legend { justify-content: flex-start; flex-wrap: wrap; gap: 12px; }
}


/* ─────────────────────────────────────
   FIG B — LABEL COMPARISON TABLE
   ───────────────────────────────────── */
.vrf-label-compare {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
  border-radius: 4px;
  overflow: hidden;
}

/* Column headers */
.vrf-lc-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.vrf-lc-col-head {
  padding: 10px 18px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.03em;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vrf-lc-col-head span {
  font-size: 10px;
  font-weight: 400;
  color: #fff;
  letter-spacing: 0;
}

.vrf-lc-col-head--before { background: #1B5E5F; }
.vrf-lc-col-head--after  { background: #062628; }

/* Section group header */
.vrf-lc-group-head {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #666;
  padding: 12px 18px 6px;
  background: #F7F7F5;
  border-top: 1px solid #E8E8E6;
  border-bottom: 1px solid #E8E8E6;
}

/* Row */
.vrf-lc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #F2F1EE;
}

.vrf-lc-row:last-child {
  border-bottom: none;
}

.vrf-lc-before,
.vrf-lc-after {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: #6B6B6B;
}

.vrf-lc-before {
  border-right: 1px solid #E8E8E6;
  background: #FAFAF9;
}

/* Flagged "confusing" items */
.vrf-lc-before--flag {
  padding-left: 26px;
  position: relative;
}

.vrf-lc-before--flag::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: #A2107C;
  border-radius: 2px;
}

.vrf-lc-after {
  color: #0A0A09;
  font-weight: 500;
  background: #fff;
}

@media (max-width: 600px) {
  .vrf-lc-row { grid-template-columns: 1fr; }
  .vrf-lc-before { border-right: none; border-bottom: 1px solid #E8E8E6; }
  .vrf-lc-header { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────
   FIG C — flat L1 nodes (no submenu)
   IT Support and Service Portal are
   direct links, not section parents
   ───────────────────────────────────── */
.vrf-arch-l1--flat {
  font-style: italic;
}