/* ============================================================
   WORKFLOW CONCEPTS — DESIGN SYSTEM
   Aesthetic: yellow-accented enterprise dark
   Type: Sora (display) / Inter (body) / JetBrains Mono (labels)
   ============================================================ */

:root {
  /* Canvas — warm near-black so yellow dominates */
  --bg0: #0A0800;
  --bg1: #12100A;
  --bg2: #1A1710;
  --bg3: #232019;

  /* Lines & surfaces — yellow-tinted at low opacity */
  --line: rgba(255, 176, 0, 0.12);
  --line2: rgba(255, 176, 0, 0.24);
  --glass: rgba(255, 255, 255, 0.03);

  /* Text — warm off-white */
  --text: #F8F5EC;
  --muted: #B8B0A0;
  --faint: #7A7265;

  /* Brand — yellow family */
  --brand: #FFB000;
  --brand-hi: #FFCC4D;
  --brand-deep: #8A5E00;
  --amber: #FFB000;
  --green: #C5A000;

  /* Human accent — the counterpart to the amber "AI" family. Used wherever a
     person takes over from automation (handoff steps, the human-quote beat) so
     the eye can tell machine work from human work at a glance. */
  --human: #FF6B2C;
  --human-hi: #FF8A55;

  /* Type */
  --font-display: "Sora", "Inter", -apple-system, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Rhythm */
  --radius: 16px;
  --radius-lg: 24px;
  --container: 1200px;
  --nav-h: 72px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
section { scroll-margin-top: calc(var(--nav-h) + 8px); }
body {
  font-family: var(--font-body);
  background: var(--bg0);
  color: var(--text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: rgba(255, 176, 0, 0.35); color: #fff; }

/* Ambient aurora — fixed brand-color glow behind every page */
body::before {
  content: "";
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 44% at 85% -10%, rgba(255, 176, 0, 0.13), transparent 62%),
    radial-gradient(ellipse 50% 38% at -5% 108%, rgba(255, 138, 0, 0.09), transparent 60%),
    radial-gradient(ellipse 44% 30% at 50% 118%, rgba(255, 204, 77, 0.05), transparent 65%);
}

/* Subtle grain over everything */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.2; }
h4 { font-size: 1.1rem; line-height: 1.35; }
p { color: var(--muted); }
strong { color: var(--text); font-weight: 600; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.55; max-width: 62ch; }
.accent { color: var(--brand-hi); }
.accent-amber { color: var(--amber); }

/* Gradient word inside display headlines */
.grad {
  background: linear-gradient(100deg, var(--brand-hi) 0%, var(--brand) 45%, #FFE69C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Mono eyebrow: [ 01 ] — LABEL */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-hi);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--brand);
  box-shadow: 0 0 12px var(--brand);
}
.eyebrow.amber { color: var(--amber); }
.eyebrow.amber::before { background: var(--amber); box-shadow: 0 0 12px var(--amber); }

/* ---------- Layout ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: 880px; }
.section { padding: clamp(72px, 9vw, 128px) 0; position: relative; }
.section.alt {
  background:
    radial-gradient(ellipse 72% 52% at 50% 0%, rgba(255, 176, 0, 0.06), transparent 62%),
    var(--bg1);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head p { margin-top: 1rem; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: center; }

@media (max-width: 1020px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4, .split { grid-template-columns: 1fr; }
  .split { gap: 40px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.85em 1.7em;
  border-radius: 100px;
  border: 1px solid transparent;
  transition: transform 0.25s cubic-bezier(0.2, 0.6, 0.2, 1), box-shadow 0.25s, background 0.25s, border-color 0.25s;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; transition: transform 0.25s; }
.btn:hover svg { transform: translateX(3px); }
.btn-primary {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff;
  box-shadow: 0 2px 12px rgba(255, 176, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255, 176, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-ghost {
  border-color: var(--line2);
  color: var(--text);
  background: var(--glass);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: var(--brand); background: rgba(255, 176, 0, 0.08); transform: translateY(-2px); }
.btn-sm { padding: 0.6em 1.3em; font-size: 0.85rem; }

/* Inline arrow link */
.arrow-link {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-weight: 600; font-size: 0.95rem; color: var(--brand-hi);
}
.arrow-link svg { width: 15px; height: 15px; transition: transform 0.25s; }
.arrow-link:hover svg { transform: translateX(4px); }

/* ---------- Chips / badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.45em 1em;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--glass);
}
.chip.on, .chip:hover { color: var(--brand-hi); border-color: rgba(255, 176, 0, 0.5); }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }

.badge {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--amber);
  padding: 0.5em 1.1em;
  border: 1px solid rgba(255, 176, 0, 0.35);
  border-radius: 100px;
  background: rgba(255, 176, 0, 0.07);
}

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background 0.3s, border-color 0.3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(10, 8, 0, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--line);
}
.nav-inner {
  width: 100%; max-width: var(--container);
  margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.logo { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; }
.logo svg { width: 30px; height: 30px; }
.logo img { height: 32px; width: auto; display: block; }
.logo span em { font-style: normal; color: var(--brand-hi); }

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links > li { position: relative; }
.nav-links > li > a, .nav-links > li > button {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.92rem; font-weight: 500; color: var(--muted);
  padding: 0.6em 0.95em; border-radius: 8px;
  transition: color 0.2s, background 0.2s;
}
.nav-links > li > a:hover, .nav-links > li > button:hover,
.nav-links > li > a[aria-current], .nav-links > li.open > button { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.nav-links .caret { width: 12px; height: 12px; opacity: 0.6; transition: transform 0.2s; }
.nav-links li.open .caret { transform: rotate(180deg); }

/* Dropdown panel */
.dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 300px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: var(--radius);
  padding: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
li.open > .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown a {
  display: block; padding: 10px 14px; border-radius: 10px;
  transition: background 0.15s;
}
.dropdown a:hover { background: rgba(255, 176, 0, 0.09); }
.dropdown a b { display: block; font-size: 0.92rem; font-weight: 600; color: var(--text); }
.dropdown a small { display: block; font-size: 0.8rem; color: var(--faint); margin-top: 1px; }

.nav-cta { display: flex; align-items: center; gap: 12px; }

/* Click-to-call beside the nav CTA. David asked for the phone number to be
   visible at the top of every page, not buried in the footer, so this stays
   on screen at mobile widths where .nav-cta .btn is hidden.
   The word "Call" rides with the number so the control reads as an action and
   not as a piece of contact text, and the handset glyph is a solid fill —
   a hairline stroke disappears at 15px on a phone. */
.nav-phone {
  gap: 8px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  border-color: rgba(255, 176, 0, 0.38);
}
.nav-phone:hover { border-color: var(--brand); }
.nav-phone svg { width: 15px; height: 15px; color: var(--brand-hi); }
.nav-phone:hover svg { transform: none; }
.nav-phone .nav-phone-lead { color: var(--faint); font-weight: 500; }
.nav-phone:hover .nav-phone-lead { color: var(--muted); }

/* Mobile nav */
.nav-burger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--text); transition: transform 0.3s, opacity 0.3s; }
body.menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 920px) {
  .nav-burger { display: flex; }
  .nav-cta .btn { display: none; }
  .nav-cta .nav-phone { display: inline-flex; }
  .nav-links {
    position: fixed; inset: var(--nav-h) 0 0 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg0);
    padding: 24px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  body.menu-open .nav-links { transform: translateX(0); }
  .nav-links > li { border-bottom: 1px solid var(--line); }
  .nav-links > li > a, .nav-links > li > button { width: 100%; justify-content: space-between; padding: 18px 6px; font-size: 1.05rem; }
  .dropdown {
    position: static; transform: none; min-width: 0;
    border: none; box-shadow: none; background: transparent;
    display: none; padding: 0 0 12px;
  }
  li.open > .dropdown { display: block; opacity: 1; visibility: visible; transform: none; }
  body.menu-open { overflow: hidden; }
  /* backdrop-filter on .nav creates a containing block for its fixed descendants,
     which breaks .nav-links' full-viewport fixed positioning once .scrolled is active */
  body.menu-open .nav { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (max-width: 430px) {
  .nav-phone .nav-phone-lead,
  .nav-phone .nav-phone-num { display: none; }
  .nav-phone {
    width: 44px; height: 44px; padding: 0;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
    border-color: transparent;
    box-shadow: 0 2px 12px rgba(255, 176, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }
  .nav-phone svg { width: 19px; height: 19px; color: #fff; }
  .nav-phone:hover { border-color: transparent; }
}

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center;
  padding: calc(var(--nav-h) + 48px) 0 80px;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: -1; }
.hero-bg .glow {
  position: absolute;
  width: 900px; height: 900px;
  top: -320px; right: -180px;
  background: radial-gradient(circle, rgba(255, 176, 0, 0.26) 0%, rgba(255, 138, 0, 0.1) 40%, transparent 70%);
  filter: blur(20px);
  animation: drift 14s ease-in-out infinite alternate;
}
.hero-bg .glow.two {
  width: 700px; height: 700px;
  top: auto; right: auto; bottom: -280px; left: -200px;
  background: radial-gradient(circle, rgba(255, 138, 0, 0.14) 0%, transparent 65%);
  animation-delay: -7s;
}
/* Glowing horizon line at the base of the hero */
.hero-bg::after {
  content: "";
  position: absolute;
  left: 8%; right: 8%; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 176, 0, 0.55) 50%, transparent);
  box-shadow: 0 0 32px 4px rgba(255, 176, 0, 0.22), 0 0 90px 18px rgba(255, 138, 0, 0.12);
}
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-60px, 40px) scale(1.08); }
}
.hero-bg .grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 176, 0, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 176, 0, 0.08) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black 30%, transparent 75%);
}
.hero-content { max-width: 820px; }
/* .hero is a flexbox, so its .container is a flex item that defaults to
   min-width:auto and refuses to shrink below the logo marquee's intrinsic
   (max-content) width — blowing out the layout on mobile. Allow it to shrink. */
.hero .container { min-width: 0; }
.hero .lede { margin: 1.6rem 0 2.4rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* Page hero (subpages) */
.page-hero {
  position: relative;
  padding: calc(var(--nav-h) + clamp(64px, 9vw, 110px)) 0 clamp(56px, 7vw, 88px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.page-hero .hero-bg .glow { width: 700px; height: 700px; top: -380px; }
.page-hero .lede { margin-top: 1.4rem; }
.page-hero .hero-ctas { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- About hero — American flag photo backdrop ----------
   Real stock photo (self-hosted asset). It's a dark, low-key image whose navy
   canton sits on the left, exactly where the copy lives — so a left-weighted
   scrim keeps the headline and lede clearly legible while the stripes stay
   visible on the right. The photo sits inside .hero-bg (z-index:-1), so hero
   copy always renders above it. */
.page-hero--flagphoto { overflow: hidden; }
.page-hero--flagphoto .grid-lines { display: none; }
/* Shared flag backdrop (used by the /about page hero and the home hero). */
.flag-photo {
  position: absolute; inset: 0;
  background: url("/assets/img/usa-flag.png") center right / cover no-repeat;
  filter: brightness(1.18) saturate(1.06);
  animation: flagIn 1.6s 0.1s ease-out backwards;
}
/* Legibility scrim: heavy on the left (behind the text), clearing toward the
   right so the (now brighter) stripes read, plus a top/bottom fade into the page. */
.page-hero--flagphoto .flag-photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(10, 8, 0, 0.93) 0%, rgba(10, 8, 0, 0.8) 30%, rgba(10, 8, 0, 0.42) 58%, rgba(10, 8, 0, 0.1) 100%),
    linear-gradient(to bottom, rgba(10, 8, 0, 0.4) 0%, transparent 24%, transparent 62%, var(--bg0) 100%);
}
/* The site-wide .grad clips an amber gradient into transparent letters; over
   this photo the hero's text-shadow bleeds through that transparent fill and
   reads muddy. Use a solid bright amber here so the shadow becomes a clean halo. */
.page-hero--flagphoto .grad {
  background: none;
  -webkit-text-fill-color: var(--brand-hi);
  color: var(--brand-hi);
}
.page-hero--flagphoto h1,
.page-hero--flagphoto .lede,
.page-hero--flagphoto .breadcrumb,
.page-hero--flagphoto .eyebrow {
  text-shadow: 0 1px 3px rgba(10, 8, 0, 0.92), 0 2px 22px rgba(10, 8, 0, 0.7);
}
/* U.S.-based / American-made caption */
.page-hero--flagphoto .flag-note {
  margin-top: 1.7rem;
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  animation: riseIn 0.8s 0.62s cubic-bezier(0.2, 0.65, 0.2, 1) backwards;
}
.page-hero--flagphoto .flag-note__star {
  color: var(--brand);
  font-size: 0.95rem;
  text-shadow: 0 0 12px rgba(255, 176, 0, 0.6);
}
@keyframes flagIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .flag-photo { animation: none;   .spine-fill { transition: none; }
}
}

/* ---------- Home hero — same American flag backdrop as /about ----------
   Taller section with the logo carousel at the bottom, so the scrim keeps the
   headline (top-left) and the faint logo labels legible over the stripes. */
.hero--flagphoto .grid-lines { display: none; }
.hero--flagphoto .flag-photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(10, 8, 0, 0.95) 0%, rgba(10, 8, 0, 0.82) 30%, rgba(10, 8, 0, 0.5) 60%, rgba(10, 8, 0, 0.28) 100%),
    linear-gradient(to bottom, rgba(10, 8, 0, 0.32) 0%, transparent 22%, transparent 66%, var(--bg0) 100%);
}
.hero--flagphoto .grad {
  background: none;
  -webkit-text-fill-color: var(--brand-hi);
  color: var(--brand-hi);
}
.hero--flagphoto .eyebrow,
.hero--flagphoto h1,
.hero--flagphoto .lede,
.hero--flagphoto .logos-label {
  text-shadow: 0 1px 3px rgba(10, 8, 0, 0.92), 0 2px 22px rgba(10, 8, 0, 0.7);
}
@media (max-width: 720px) {
  .hero--flagphoto .flag-photo::after {
    background:
      linear-gradient(to bottom, rgba(10, 8, 0, 0.72) 0%, rgba(10, 8, 0, 0.64) 45%, rgba(10, 8, 0, 0.8) 100%),
      linear-gradient(to bottom, transparent 86%, var(--bg0) 100%);
  }
}

/* Mobile: the landscape photo crops to the stripes and the copy stacks over
   it, so lean the scrim vertical to hold legibility top-to-bottom. */
@media (max-width: 720px) {
  .page-hero--flagphoto .flag-photo::after {
    background:
      linear-gradient(to bottom, rgba(10, 8, 0, 0.72) 0%, rgba(10, 8, 0, 0.62) 45%, rgba(10, 8, 0, 0.78) 100%),
      linear-gradient(to bottom, transparent 82%, var(--bg0) 100%);
  }
}
.breadcrumb {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 1.6rem;
  display: flex; gap: 0.8em; flex-wrap: wrap;
}
.breadcrumb a:hover { color: var(--brand-hi); }
.breadcrumb .sep { color: var(--faint); opacity: 0.5; }

/* ---------- Logo strip ---------- */
.logos { margin-top: clamp(56px, 7vw, 88px); }
.logos-label {
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 22px;
}
/* Two side-by-side marquees: organizations we support | technology partners */
/* Equal width so both marquees occupy the same space */
.logos--split { display: flex; gap: clamp(24px, 3vw, 48px); align-items: stretch; }
.logos--split .logo-group { min-width: 0; flex: 1 1 0; display: flex; flex-direction: column; }
/* Reserve equal label height so both marquees start on the same line even when
   one label wraps to two lines and the other stays on one. */
.logos--split .logos-label { min-height: 2.35rem; }
.logos--split .logo-group--partners { position: relative; padding-left: clamp(24px, 3vw, 48px); }
/* Prominent divider between the two strips */
.logos--split .logo-group--partners::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
  border-radius: 2px;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.22) 18%, rgba(255, 255, 255, 0.22) 82%, transparent);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.06);
}
/* Same px/sec for both: duration ∝ logo count (12 → 48s, 5 → 20s). The scoped
   selector beats the base `.logo-track` shorthand's 48s (equal specificity +
   later source order would otherwise reset it). */
.logos--split .logo-track--partners { animation-duration: 20s; }
/* Extra vertical room so the thicker borders + glow aren't clipped by the
   marquee's overflow:hidden. */
.logos--split .logo-marquee { padding-top: 20px; padding-bottom: 20px; }
/* Logos sit on light cards so their true colors show. */
.logos--split .logo-chip {
  background: #F4F1EA;
  border-color: rgba(20, 15, 0, 0.10);
}
.logos--split .logo-chip img { opacity: 1; filter: none; }
/* White-artwork logos vanish on a light card — keep them on the dark chip. */
.logos--split .logo-chip--dark { background: var(--glass); }
/* Colour-coded card borders so clients vs partners read at a glance:
   amber for the organizations we support, blue for the technology partners. */
/* Bold, high-contrast accent borders: a 3px stroke + a thin darker outer ring
   so the colour reads even against the light cards, plus a soft coloured glow. */
.logos--split .logo-group:first-child .logo-chip {
  border: 3px solid #FFB300;
  box-shadow: 0 0 0 1.5px rgba(120, 80, 0, 0.55), 0 2px 8px rgba(255, 176, 0, 0.34);
}
.logos--split .logo-group:first-child .logo-chip:hover {
  border-color: #FFCB4D;
  box-shadow: 0 0 0 1.5px rgba(120, 80, 0, 0.7), 0 3px 11px rgba(255, 176, 0, 0.5);
  background: #ffffff;
}
.logos--split .logo-group:first-child .logo-chip--dark:hover {
  background: rgba(255, 176, 0, 0.10);
}
.logos--split .logo-group--partners .logo-chip {
  border: 3px solid #1E88E5;
  box-shadow: 0 0 0 1.5px rgba(13, 71, 130, 0.5), 0 2px 8px rgba(30, 136, 229, 0.36);
}
.logos--split .logo-group--partners .logo-chip:hover {
  border-color: #5AB0F5;
  box-shadow: 0 0 0 1.5px rgba(13, 71, 130, 0.65), 0 3px 11px rgba(30, 136, 229, 0.55);
  background: #ffffff;
}
@media (max-width: 720px) {
  .logos--split { flex-direction: column; gap: 34px; }
  .logos--split .logo-group,
  .logos--split .logo-group:first-child { flex: 1 1 auto; }
  .logos--split .logo-group--partners { padding-left: 0; padding-top: 30px; }
  .logos--split .logo-group--partners::before {
    left: 10px; right: 10px; top: 0; bottom: auto; width: auto; height: 2px; border-radius: 2px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.22) 18%, rgba(255, 255, 255, 0.22) 82%, transparent);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.06);
  }
}
/* Logo marquee — seamless left-to-right scroll of client logos */
.logo-marquee {
  position: relative;
  overflow: hidden;
  /* stay within the parent; never let the wide track dictate layout width */
  width: 100%;
  min-width: 0;
  max-width: 100%;
  /* vertical room so chip borders + hover lift aren't clipped by overflow:hidden */
  padding: 10px 0;
  /* soften both edges so logos glide in and out of view */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-track {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 22px);
  width: max-content;
  animation: logo-scroll 48s linear infinite;
  will-change: transform;
}
.logo-marquee:hover .logo-track { animation-play-state: paused; }

.logo-chip {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  height: clamp(64px, 8vw, 82px);
  width: clamp(150px, 17vw, 190px);
  padding: 0 clamp(18px, 2.2vw, 26px);
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transition: border-color 0.35s, background 0.35s, transform 0.35s;
}
.logo-chip:hover {
  border-color: var(--line2);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-2px);
}
.logo-chip img {
  max-height: 60%;
  max-width: 100%;
  width: auto; object-fit: contain;
  opacity: 0.9;
  filter: saturate(0.92);
  transition: opacity 0.35s;
}
.logo-chip:hover img { opacity: 1; }
/* Full-bleed artwork (e.g. the Google CCAI banner) fills the whole chip. */
.logo-chip--fill { padding: 0; overflow: hidden; }
.logo-chip--fill img { height: 100%; width: 100%; max-height: 100%; object-fit: cover; }
/* Dark artwork (maroon/navy) is illegible on the dark chip — render as clean white */
.logo-chip img.logo-lighten {
  filter: brightness(0) invert(1);
  opacity: 0.82;
}
.logo-chip:hover img.logo-lighten { opacity: 1; }

@keyframes logo-scroll {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  .logo-marquee {
    -webkit-mask-image: none; mask-image: none;
  }
  .logo-dup { display: none; }
}

/* ---------- Team / person cards ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 320px));
  gap: 22px;
}
.person-card {
  display: flex; flex-direction: column;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.35s, transform 0.35s, box-shadow 0.35s;
}
.person-card:hover {
  border-color: var(--line2);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.person-photo { display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.person-photo img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.5s ease;
}
.person-card:hover .person-photo img { transform: scale(1.04); }
.person-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; }
.person-name { font-family: var(--font-display); font-size: 1.18rem; font-weight: 600; line-height: 1.2; }
.person-title { color: var(--muted); font-size: 0.82rem; line-height: 1.45; }
.person-link {
  margin-top: 10px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--brand);
  transition: color 0.3s;
}
.person-link svg { width: 18px; height: 18px; }
.person-link:hover { color: var(--brand-hi); }

/* ---------- Cards ---------- */
.card {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3vw, 36px);
  transition: transform 0.35s cubic-bezier(0.2, 0.6, 0.2, 1), border-color 0.35s, background 0.35s;
  overflow: hidden;
}
a.card:hover, .card.hover:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 176, 0, 0.45);
  background: var(--bg3);
}
.card h3 { margin-bottom: 0.6rem; }
.card p { font-size: 0.95rem; }
.card .arrow-link { margin-top: 1.4rem; }
.card .num {
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.15em; color: var(--faint);
  display: block; margin-bottom: 1.6rem;
}
.card .outcome {
  margin-top: 1.2rem; padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: 0.88rem; color: var(--faint);
}
.card .outcome b { color: var(--green); font-weight: 600; }

/* Icon tile inside cards */
.tile {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 176, 0, 0.16), rgba(204, 141, 0, 0.05));
  border: 1px solid rgba(255, 176, 0, 0.25);
  margin-bottom: 1.4rem;
}
.tile svg { width: 24px; height: 24px; color: var(--brand-hi); }
.tile.amber {
  background: linear-gradient(145deg, rgba(255, 176, 0, 0.14), rgba(255, 176, 0, 0.03));
  border-color: rgba(255, 176, 0, 0.3);
}
.tile.amber svg { color: var(--amber); }

/* ---------- Stats ---------- */
.stat-band {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg1);
  overflow: hidden;
}
.stat-band .stat { padding: clamp(28px, 3.5vw, 44px) clamp(20px, 3vw, 36px); border-left: 1px solid var(--line); }
.stat-band .stat:first-child { border-left: none; }
@media (max-width: 920px) {
  .stat-band { grid-template-columns: repeat(2, 1fr); }
  .stat-band .stat:nth-child(odd) { border-left: none; }
  .stat-band .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .stat-band { grid-template-columns: 1fr; }
  .stat-band .stat { border-left: none; border-top: 1px solid var(--line); }
  .stat-band .stat:first-child { border-top: none; }
}

/* Three-up variant, for bands that legitimately carry three facts rather than
   four (about.html, after its case-study counter moved to the case-studies
   page where it can be derived). */
.stat-band--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 920px) { .stat-band--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .stat-band--3 { grid-template-columns: 1fr; } }
.stat .stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1;
  color: var(--text);
}
.stat .stat-num em { font-style: normal; color: var(--amber); }
.stat .stat-label { margin-top: 0.7rem; font-size: 0.88rem; color: var(--muted); }
.stat .stat-src { display: block; margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }

/* ---------- Checklist ---------- */
.check-list { display: grid; gap: 14px; }
.check-list li { display: flex; gap: 14px; align-items: flex-start; color: var(--muted); font-size: 0.98rem; }
.check-list li b { color: var(--text); }
.check-list .check {
  flex: none; width: 22px; height: 22px; margin-top: 2px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 176, 0, 0.12);
  border: 1px solid rgba(255, 176, 0, 0.4);
}
.check-list .check svg { width: 11px; height: 11px; color: var(--green); }

/* ---------- Steps / process (01 02 03) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: step; }
@media (max-width: 920px) { .steps { grid-template-columns: 1fr; } }
.step {
  position: relative;
  padding: 32px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg1);
}
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--font-mono);
  font-size: 0.8rem; letter-spacing: 0.15em;
  color: var(--brand-hi);
  display: inline-block;
  padding: 0.4em 0.9em;
  border: 1px solid rgba(255, 176, 0, 0.35);
  border-radius: 100px;
  margin-bottom: 1.4rem;
}
.step h4 { margin-bottom: 0.5rem; }
.step p { font-size: 0.92rem; }

/* Crawl → Walk → Run phases */
.phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; }
@media (max-width: 920px) { .phases { grid-template-columns: 1fr; } }
.phase {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  background: var(--bg2);
  position: relative;
}
.phase .phase-tag {
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  display: inline-block; padding: 0.45em 1em;
  border-radius: 100px; margin-bottom: 1.3rem;
}
.phase:nth-child(1) .phase-tag { color: var(--muted); border: 1px solid var(--line2); }
.phase:nth-child(2) .phase-tag { color: var(--brand-hi); border: 1px solid rgba(255, 176, 0, 0.4); background: rgba(255, 176, 0, 0.07); }
.phase:nth-child(3) .phase-tag { color: var(--amber); border: 1px solid rgba(255, 176, 0, 0.4); background: rgba(255, 176, 0, 0.06); }
.phase h4 { margin-bottom: 0.6rem; }
.phase ul { margin-top: 1rem; display: grid; gap: 8px; }
.phase ul li { font-size: 0.9rem; color: var(--muted); padding-left: 1.2em; position: relative; }
.phase ul li::before { content: "→"; position: absolute; left: 0; color: var(--brand); font-family: var(--font-mono); font-size: 0.8em; top: 0.25em; }

/* ---------- Workflow diagram (node → node) ---------- */
.flow {
  display: flex; align-items: stretch; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
}
.flow-node {
  flex: 1; min-width: 130px;
  text-align: center;
  padding: 24px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg2);
  position: relative;
  transition: border-color 0.3s, transform 0.3s;
}
.flow-node:hover { border-color: rgba(255, 176, 0, 0.5); transform: translateY(-3px); }
.flow-node .tile { margin: 0 auto 14px; width: 44px; height: 44px; }
.flow-node .tile svg { width: 20px; height: 20px; }
.flow-node b { display: block; font-size: 0.9rem; font-weight: 600; }
.flow-node small { display: block; font-size: 0.75rem; color: var(--faint); margin-top: 3px; }
.flow-arrow {
  align-self: center; flex: none;
  color: var(--brand); opacity: 0.7;
  display: grid; place-items: center;
}
.flow-arrow svg { width: 20px; height: 20px; }
@media (max-width: 860px) {
  .flow { flex-direction: column; }
  .flow-arrow svg { transform: rotate(90deg); }
}

/* Animated dashes for SVG connector lines */
.dash-line { stroke-dasharray: 6 8; animation: dashmove 1.6s linear infinite; }
@keyframes dashmove { to { stroke-dashoffset: -14; } }

/* ---------- Carousel ---------- */
.carousel-wrap { position: relative; }
.carousel {
  display: flex; gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 20px;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel > * {
  flex: none;
  width: min(380px, 82vw);
  scroll-snap-align: start;
}
.carousel-nav { display: flex; gap: 10px; margin-top: 8px; }
.carousel-btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line2);
  display: grid; place-items: center;
  color: var(--muted);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.carousel-btn:hover { border-color: var(--brand); color: var(--brand-hi); background: rgba(255, 176, 0, 0.08); }
.carousel-btn svg { width: 18px; height: 18px; }

/* ---------- Case study / results ---------- */
.case-card {
  display: flex; flex-direction: column;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3vw, 34px);
  transition: transform 0.35s cubic-bezier(0.2, 0.6, 0.2, 1), border-color 0.35s;
}
.case-card:hover { transform: translateY(-5px); border-color: rgba(255, 176, 0, 0.45); }
.case-card .case-metric {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1;
  color: var(--amber);
}
.case-card .case-metric .accent--word { font-size: clamp(1.8rem, 2.8vw, 2.4rem); }
.case-card .case-metric-label { font-size: 0.85rem; color: var(--muted); margin-top: 0.5rem; }
.case-card h4 { margin-top: 1.6rem; }
.case-card p { font-size: 0.92rem; margin-top: 0.5rem; }
.case-card h4 + p { flex: 1; }
.case-card .chip-row { margin-top: 1.3rem; }

/* Before / after comparison */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
@media (max-width: 720px) { .ba { grid-template-columns: 1fr; } }
.ba > div { padding: clamp(26px, 3vw, 38px); }
.ba .before { background: var(--bg1); border-right: 1px solid var(--line); }
.ba .after { background: linear-gradient(160deg, rgba(255, 176, 0, 0.09), rgba(204, 141, 0, 0.02)); }
@media (max-width: 720px) { .ba .before { border-right: none; border-bottom: 1px solid var(--line); } }
.ba .ba-tag {
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 1.2rem; display: block;
}
.ba .before .ba-tag { color: var(--faint); }
.ba .after .ba-tag { color: var(--brand-hi); }
.ba ul { display: grid; gap: 10px; }
.ba li { font-size: 0.94rem; color: var(--muted); display: flex; gap: 10px; }
.ba .before li::before { content: "✕"; color: #E5646E; font-family: var(--font-mono); font-size: 0.8em; margin-top: 0.3em; }
.ba .after li::before { content: "✓"; color: var(--green); font-family: var(--font-mono); font-size: 0.8em; margin-top: 0.3em; }

/* Quote / testimonial */
.quote {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg2);
  padding: clamp(30px, 4vw, 48px);
  position: relative;
}
.quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 500; line-height: 1.4; letter-spacing: -0.01em;
  color: var(--text);
}
.quote .quote-by { margin-top: 1.6rem; display: flex; align-items: center; gap: 14px; }
.quote .quote-by .avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: #fff;
}
.quote .quote-by b { display: block; font-size: 0.92rem; }
.quote .quote-by small { color: var(--faint); font-size: 0.8rem; }

/* ---------- Tier cards (managed services) ---------- */
.tier {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg1);
  padding: clamp(28px, 3vw, 38px);
  position: relative;
}
.tier.featured {
  background: linear-gradient(170deg, rgba(255, 176, 0, 0.1), var(--bg2) 55%);
  border-color: rgba(255, 176, 0, 0.45);
  box-shadow: 0 20px 60px rgba(204, 141, 0, 0.18);
}
.tier .tier-flag {
  position: absolute; top: -13px; left: 28px;
  font-family: var(--font-mono); font-size: 0.65rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  background: var(--brand); color: #fff;
  padding: 0.45em 1.1em; border-radius: 100px;
}
.tier h3 { margin-bottom: 0.3rem; }
.tier .tier-tag { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-bottom: 1.4rem; }
.tier .tier-price {
  font-family: var(--font-display); font-size: 1.45rem; font-weight: 800;
  color: var(--brand-hi); letter-spacing: -0.02em; margin-bottom: 0.35rem;
}
.tier .tier-price small { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; color: var(--faint); letter-spacing: 0.08em; text-transform: uppercase; margin-left: 0.55em; white-space: nowrap; }
.tier .check-list { margin: 1.2rem 0 1.8rem; flex: 1; }
.tier .sla {
  border-top: 1px solid var(--line);
  padding-top: 1.2rem; margin-bottom: 1.6rem;
  font-size: 0.85rem; color: var(--muted);
  display: grid; gap: 6px;
}
.tier .sla b { color: var(--brand-hi); font-family: var(--font-mono); font-weight: 500; font-size: 0.8rem; }

/* ---------- Accordion ---------- */
.accordion { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.acc-item + .acc-item { border-top: 1px solid var(--line); }
.acc-head {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 26px;
  text-align: left;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  transition: background 0.2s;
}
.acc-head:hover { background: rgba(255, 255, 255, 0.02); }
.acc-head .acc-icon {
  flex: none; width: 28px; height: 28px;
  border: 1px solid var(--line2); border-radius: 50%;
  display: grid; place-items: center;
  transition: transform 0.3s, border-color 0.3s;
}
.acc-head .acc-icon svg { width: 12px; height: 12px; color: var(--brand-hi); }
.acc-item.open .acc-icon { transform: rotate(45deg); border-color: var(--brand); }
.acc-body { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.acc-body-inner { padding: 0 26px 24px; font-size: 0.95rem; color: var(--muted); }

/* ---------- Table (SLA / KPI) ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
table.table { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 560px; }
.table th {
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); font-weight: 500;
  text-align: left; padding: 16px 22px;
  background: var(--bg1);
  border-bottom: 1px solid var(--line);
}
.table td { padding: 16px 22px; border-bottom: 1px solid var(--line); color: var(--muted); }
.table tr:last-child td { border-bottom: none; }
.table td:first-child { color: var(--text); font-weight: 500; }

/* ---------- Mock dashboard window ---------- */
.window {
  border: 1px solid var(--line2);
  border-radius: var(--radius);
  background: var(--bg1);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.window-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg2);
}
.window-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line2); }
.window-bar i:first-child { background: rgba(229, 100, 110, 0.7); }
.window-bar i:nth-child(2) { background: rgba(255, 176, 0, 0.7); }
.window-bar i:nth-child(3) { background: rgba(255, 176, 0, 0.7); }
.window-bar span { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--faint); margin-left: 8px; }
.window-body { padding: clamp(18px, 2.5vw, 28px); }

/* KPI mini-tiles inside windows */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.kpi {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; background: var(--bg2);
}
.kpi b { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; display: block; }
.kpi small { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.kpi .up { color: var(--green); } .kpi .down { color: #E5646E; }

/* Simple CSS bar chart */
.bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; margin-top: 16px; }
.bars i {
  flex: 1; border-radius: 6px 6px 2px 2px;
  background: linear-gradient(to top, rgba(255, 176, 0, 0.25), var(--brand));
  min-height: 12%;
  animation: barup 1s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
.bars i.hot { background: linear-gradient(to top, rgba(255, 176, 0, 0.3), var(--amber)); }
@keyframes barup { from { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Forms ---------- */
.form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.field label {
  display: block;
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 8px;
}
.field input, .field textarea, .field select {
  width: 100%;
  font: inherit; font-size: 0.95rem;
  color: var(--text);
  background: var(--bg1);
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 13px 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(255, 176, 0, 0.18);
}
.field textarea { resize: vertical; min-height: 130px; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2396A3BE' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  border-top: 1px solid var(--line);
  overflow: hidden;
  padding: clamp(80px, 10vw, 130px) 0;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 80% at 50% 110%, rgba(255, 176, 0, 0.28), transparent 65%),
    radial-gradient(ellipse 34% 40% at 50% 118%, rgba(255, 204, 77, 0.18), transparent 60%),
    var(--bg0);
}
.cta-band h2 { max-width: 700px; margin: 0 auto; }
.cta-band p { max-width: 560px; margin: 1.2rem auto 2.4rem; }
.cta-band .hero-ctas { justify-content: center; }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  background: var(--bg1);
  padding: clamp(56px, 7vw, 80px) 0 36px;
  font-size: 0.9rem;
}
.footer-grid {
  display: grid;
  /* Solutions carries the most entries and the longest labels ("AI Roadmap &
     Assessment"), so its track is widened to keep every link on one line. */
  grid-template-columns: 1.45fr 1.15fr 0.95fr 1.25fr;
  gap: clamp(28px, 4vw, 56px);
  margin-bottom: 56px;
  align-items: start;
}
/* Collapse to two columns before the four-column layout gets tight enough to
   wrap either the longest Solutions label ("AI Roadmap & Assessment", which
   broke around 950px) or the street address, which spills to a third line
   below ~1050px. Measured, not guessed. */
@media (max-width: 1060px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer .logo { margin-bottom: 18px; }
.footer-about p { color: var(--faint); font-size: 0.88rem; max-width: 34ch; }
.footer h5 {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 18px;
}
.footer-col ul { display: grid; gap: 10px; }
.footer-col a { color: var(--muted); transition: color 0.2s; }
.footer-col a:hover { color: var(--brand-hi); }
.footer-contact { display: grid; gap: 12px; color: var(--muted); }
.footer-contact a:hover { color: var(--brand-hi); }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 28px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  font-size: 0.8rem; color: var(--faint);
}
.footer-bottom .mono { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; }

/* ---------- Video modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 2000;
  display: grid; place-items: center;
  background: rgba(10, 8, 0, 0.85);
  backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  padding: 24px;
}
.modal.open { opacity: 1; visibility: visible; }
.modal-box {
  width: min(960px, 100%);
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--line2);
  border-radius: var(--radius);
  overflow: hidden;
  transform: scale(0.96);
  transition: transform 0.3s;
}
.modal.open .modal-box { transform: scale(1); }
.modal-box iframe { width: 100%; height: 100%; border: none; }
.modal-close {
  position: absolute; top: 24px; right: 28px;
  width: 44px; height: 44px;
  border: 1px solid var(--line2); border-radius: 50%;
  display: grid; place-items: center;
  color: var(--muted); background: var(--bg2);
  transition: color 0.2s, border-color 0.2s;
}
.modal-close:hover { color: var(--text); border-color: var(--brand); }

/* ---------- Reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.65, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.65, 0.2, 1);
}
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.1s; }
.reveal.d2 { transition-delay: 0.2s; }
.reveal.d3 { transition-delay: 0.3s; }
.reveal.d4 { transition-delay: 0.4s; }

/* Hero load-in sequence */
@keyframes riseIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.hero .eyebrow { animation: riseIn 0.9s 0.1s cubic-bezier(0.2, 0.65, 0.2, 1) backwards; }
.hero h1 { animation: riseIn 0.9s 0.25s cubic-bezier(0.2, 0.65, 0.2, 1) backwards; }
.hero .lede { animation: riseIn 0.9s 0.4s cubic-bezier(0.2, 0.65, 0.2, 1) backwards; }
.hero .hero-ctas { animation: riseIn 0.9s 0.55s cubic-bezier(0.2, 0.65, 0.2, 1) backwards; }
.hero .logos { animation: riseIn 0.9s 0.75s cubic-bezier(0.2, 0.65, 0.2, 1) backwards; }
.page-hero .breadcrumb { animation: riseIn 0.8s 0.05s cubic-bezier(0.2, 0.65, 0.2, 1) backwards; }
.page-hero .eyebrow { animation: riseIn 0.8s 0.15s cubic-bezier(0.2, 0.65, 0.2, 1) backwards; }
.page-hero h1 { animation: riseIn 0.8s 0.25s cubic-bezier(0.2, 0.65, 0.2, 1) backwards; }
.page-hero .lede { animation: riseIn 0.8s 0.38s cubic-bezier(0.2, 0.65, 0.2, 1) backwards; }
.page-hero .hero-ctas { animation: riseIn 0.8s 0.5s cubic-bezier(0.2, 0.65, 0.2, 1) backwards; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Utilities ---------- */
.mt-1 { margin-top: 12px; } .mt-2 { margin-top: 24px; } .mt-3 { margin-top: 40px; } .mt-4 { margin-top: 64px; }
.mb-2 { margin-bottom: 24px; } .mb-3 { margin-bottom: 40px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.mono { font-family: var(--font-mono); }
.flex-between { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* ============================================================
   LANDING PAGE — combined design (Tuan + Andie)
   Sections: philosophy · problems · journey · statement ·
             capabilities (variations A/B/C) · analytics · ROI · CTA
   ============================================================ */

/* ---------- Keyword scroll highlight ----------
   Headline words that ignite in brand colour as the heading scrolls into
   view. `.kw--human` uses the human accent so the handoff beat resolves
   in the same colour the spine used for the human step. */
.kw {
  color: inherit;
  transition: color 0.7s cubic-bezier(0.2, 0.65, 0.2, 1),
              text-shadow 0.7s cubic-bezier(0.2, 0.65, 0.2, 1);
}
.kw.lit { color: var(--brand-hi); text-shadow: 0 0 34px rgba(255, 176, 0, 0.42); }
.kw--human.lit { color: var(--human-hi); text-shadow: 0 0 34px rgba(255, 107, 44, 0.42); }
@media (prefers-reduced-motion: reduce) {
  .kw { color: var(--brand-hi); }
  .kw--human { color: var(--human-hi); }
}

/* Eyebrow without the leading square marker (used on centred statements) */
.eyebrow--plain::before { display: none; }
.eyebrow--plain { color: var(--faint); letter-spacing: 0.28em; }

/* ---------- 1. Philosophy hero ----------
   Centred statement over the flag, so the scrim has to be radial rather
   than the left-weighted one the old hero used. */
.hero--philosophy { text-align: center; min-height: 100vh; }
.hero--philosophy .flag-photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 74% 58% at 50% 42%, rgba(10, 8, 0, 0.93) 0%, rgba(10, 8, 0, 0.78) 45%, rgba(10, 8, 0, 0.5) 72%, rgba(10, 8, 0, 0.3) 100%),
    linear-gradient(to bottom, rgba(10, 8, 0, 0.55) 0%, transparent 26%, transparent 58%, var(--bg0) 100%);
}
.philosophy-statement { max-width: 940px; margin: 0 auto; }
.hero--philosophy .eyebrow { justify-content: center; }
.hero--philosophy h1 {
  font-size: clamp(2.6rem, 6.4vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 800;
  margin-top: 1.1rem;
}
.hero--philosophy .lede {
  margin: 1.8rem auto 0;
  max-width: 52ch;
  color: var(--muted);
}
.hero--philosophy .hero-ctas { margin-top: 2.4rem; justify-content: center; }
.hero--philosophy .flag-note {
  margin-top: 2.2rem;
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
  animation: riseIn 0.9s 0.62s cubic-bezier(0.2, 0.65, 0.2, 1) backwards;
}
.hero--philosophy .flag-note__star { color: var(--brand); text-shadow: 0 0 12px rgba(255, 176, 0, 0.6); }
.hero--philosophy .eyebrow,
.hero--philosophy h1,
.hero--philosophy .lede,
.hero--philosophy .flag-note,
.hero--philosophy .logos-label {
  text-shadow: 0 1px 3px rgba(10, 8, 0, 0.92), 0 2px 22px rgba(10, 8, 0, 0.7);
}
@media (max-width: 720px) {
  .hero--philosophy .flag-photo::after {
    background:
      linear-gradient(to bottom, rgba(10, 8, 0, 0.78) 0%, rgba(10, 8, 0, 0.7) 45%, rgba(10, 8, 0, 0.84) 100%),
      linear-gradient(to bottom, transparent 86%, var(--bg0) 100%);
  }
}

/* ---------- 3. Journey — spine + phone ---------- */
.journey-chips { margin-bottom: clamp(36px, 4.5vw, 56px); }
.journey-chips .chip.on {
  background: linear-gradient(180deg, var(--brand-hi), var(--brand));
  border-color: transparent;
  color: #1A1200;
  font-weight: 600;
  box-shadow: 0 0 22px rgba(255, 176, 0, 0.28);
}
.journey-stage {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 380px);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

/* The spine: a vertical rail whose nodes light as the step becomes active */
.spine { position: relative; padding-left: 46px; }
.spine::before {
  content: ""; position: absolute; left: 13px; top: 12px; bottom: 12px;
  width: 1px; background: var(--line2);
}
.spine-step { position: relative; padding-bottom: clamp(40px, 5.5vw, 76px); }
.spine-step:last-child { padding-bottom: 0; }
.spine-step::before {
  content: ""; position: absolute; left: -39px; top: 5px;
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--line2);
  background: var(--bg0);
  transition: border-color 0.45s, background 0.45s, box-shadow 0.45s, transform 0.45s;
}
.spine-step::after {
  content: ""; position: absolute; left: -34px; top: 10px;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--faint);
  transition: background 0.45s;
}
.spine-role {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--faint);
  transition: color 0.45s;
}
.spine-title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 0.35rem;
  color: var(--muted);
  transition: color 0.45s;
}
.spine-step.on::before {
  border-color: var(--brand);
  box-shadow: 0 0 18px rgba(255, 176, 0, 0.75);
  transform: scale(1.1);
}
.spine-step.on::after { background: var(--brand); }
.spine-step.on .spine-role { color: var(--brand); }
.spine-step.on .spine-title { color: var(--text); }
/* The human handoff step resolves in orange, not amber */
.spine-step.is-human.on::before { border-color: var(--human); box-shadow: 0 0 18px rgba(255, 107, 44, 0.75); }
.spine-step.is-human.on::after { background: var(--human); }
.spine-step.is-human.on .spine-role { color: var(--human); }

/* Numbered top-down variant of the spine, for a standalone method flow with no
   journey player driving it: the step number sits inside the node and each step
   lights as it scrolls in. Restores the original AI-roadmap method diagram. */
.spine--numbered { counter-reset: spinestep; max-width: 760px; padding-left: 56px; }
.spine--numbered::before { left: 21px; top: 16px; bottom: 16px; }
.spine--numbered .spine-step {
  counter-increment: spinestep;
  padding-bottom: clamp(30px, 3.8vw, 52px);
}
.spine--numbered .spine-step::before {
  content: counter(spinestep);
  left: -48px; top: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.72rem; line-height: 1;
  color: var(--faint);
  transition: border-color 0.45s, color 0.45s, box-shadow 0.45s;
}
.spine--numbered .spine-step::after { display: none; }
.spine-desc { margin-top: 0.6rem; color: var(--muted); font-size: 0.95rem; max-width: 58ch; transition: color 0.45s; }

/* Lit state for the numbered variant. The original method diagram lit each step
   fully as it was reached — glowing node, amber label, brighter body copy — and
   ran a gradient fill up the rail behind them, so the flow reads as progress
   rather than four separate items. */
.spine--numbered .spine-step.on::before { color: var(--brand); }
.spine--numbered .spine-step.on .spine-desc { color: #D8D0C2; }
.spine-fill {
  position: absolute;
  left: 21px; top: 16px; width: 1px;
  height: var(--spine-fill, 0px);
  background: linear-gradient(180deg, var(--brand-hi), var(--brand));
  box-shadow: 0 0 9px rgba(255, 176, 0, 0.55);
  transition: height 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}
@media (max-width: 560px) {
  .spine--numbered { padding-left: 44px; }
  .spine--numbered::before,
  .spine--numbered .spine-fill { left: 15px; }
  .spine--numbered .spine-step::before { left: -37px; width: 24px; height: 24px; font-size: 0.66rem; }
}

/* The phone */
.phone { position: sticky; top: calc(var(--nav-h) + 32px); }
.phone-frame {
  border: 1px solid var(--line2);
  border-radius: 28px;
  background: linear-gradient(180deg, var(--bg2), var(--bg1));
  padding: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 0 6px rgba(255, 255, 255, 0.02);
}
.phone-head {
  display: flex; align-items: center; gap: 11px;
  padding: 4px 4px 14px;
  border-bottom: 1px solid var(--line);
}
.phone-avatar {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(180deg, var(--brand-hi), var(--brand));
  color: #1A1200; font-weight: 700; font-size: 0.95rem;
}
.phone-who { flex: 1; min-width: 0; }
.phone-who b { display: block; font-size: 0.92rem; font-weight: 600; }
.phone-who small { display: block; font-family: var(--font-mono); font-size: 0.68rem; color: var(--faint); }
.phone-live {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted);
}
.phone-live i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 8px var(--brand);
  animation: pulseDot 1.8s ease-in-out infinite;
}
@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.phone-body {
  padding: 16px 4px 6px;
  display: grid; gap: 10px;
  min-height: 420px;
  align-content: start;
}
.pm { opacity: 0; transform: translateY(10px); animation: pmIn 0.45s forwards; }
@keyframes pmIn { to { opacity: 1; transform: none; } }
.pm-out {
  justify-self: end;
  max-width: 82%;
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: 14px 14px 4px 14px;
  padding: 9px 13px;
  font-size: 0.88rem;
}
.pm-task {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 0.74rem;
  color: var(--muted);
}
.pm-task .pm-mark { color: var(--brand); width: 12px; flex: none; }
.pm-task.pending .pm-mark { color: var(--faint); }
.pm-pill {
  justify-self: center;
  font-family: var(--font-mono); font-size: 0.7rem;
  color: var(--human-hi);
  border: 1px solid rgba(255, 107, 44, 0.42);
  background: rgba(255, 107, 44, 0.08);
  border-radius: 999px;
  padding: 4px 12px;
}
.pm-pill--amber { color: var(--brand-hi); border-color: rgba(255, 176, 0, 0.42); background: rgba(255, 176, 0, 0.08); }
.pm-human {
  border: 1px solid rgba(255, 107, 44, 0.4);
  background: rgba(255, 107, 44, 0.07);
  border-radius: 14px 14px 14px 4px;
  padding: 11px 13px;
  max-width: 92%;
}
.pm-human-tag {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--human-hi);
  margin-bottom: 6px;
}
.pm-human-tag em {
  font-style: normal;
  border: 1px solid rgba(255, 107, 44, 0.45);
  border-radius: 4px; padding: 1px 5px;
  font-size: 0.92em;
}
.pm-human p { font-size: 0.88rem; color: var(--text); }
.pm-sys {
  display: flex; align-items: center; gap: 8px;
  justify-self: end;
  font-family: var(--font-mono); font-size: 0.7rem;
  color: var(--brand-hi);
  border: 1px solid rgba(255, 176, 0, 0.38);
  background: rgba(255, 176, 0, 0.06);
  border-radius: 999px;
  padding: 4px 12px;
}

@media (max-width: 940px) {
  .journey-stage { grid-template-columns: 1fr; }
  .phone { position: static; max-width: 380px; margin: 8px auto 0; width: 100%; }
}

/* ---------- 4. Statement beat ---------- */
.statement {
  padding: clamp(110px, 15vw, 200px) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: var(--bg0);
}
.statement::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 60% 60% at 72% 55%, rgba(255, 107, 44, 0.11) 0%, transparent 68%);
  pointer-events: none;
}
.statement .container { position: relative; z-index: 1; }
.statement-inner { max-width: 940px; margin: 0 auto; }
.statement .eyebrow { justify-content: center; }
.statement h2 {
  font-size: clamp(2.1rem, 5.2vw, 4.2rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 800;
  margin-top: 1.1rem;
}
.statement .lede { margin: 1.7rem auto 0; max-width: 54ch; color: var(--muted); }

/* ---------- 5. Capabilities — variation A (merged card), locked in ---------- */
.caps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cap {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--bg2), var(--bg1));
  padding: 24px;
  transition: border-color 0.35s, transform 0.35s, box-shadow 0.35s;
  outline: none;
}
.cap:hover, .cap:focus-visible, .cap.on {
  border-color: rgba(255, 176, 0, 0.42);
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4), 0 0 26px rgba(255, 176, 0, 0.08);
}
.cap-num { display: block; font-size: 0.72rem; color: var(--faint); letter-spacing: 0.1em; }
.cap-viz {
  margin: 16px 0 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.28);
  aspect-ratio: 200 / 90;
  overflow: hidden;
}
.cap-viz svg { width: 100%; height: 100%; display: block; }
.cap h3 { font-size: 1.16rem; letter-spacing: -0.02em; margin-bottom: 0.55rem; }
.cap p { font-size: 0.92rem; color: var(--muted); }
.cap .outcome {
  margin-top: 1.1rem; padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem; color: var(--muted);
}
.cap .outcome b { color: var(--brand-hi); font-weight: 600; }
.cap .arrow-link { margin-top: 1.2rem; }
.cap--cta { border-color: rgba(255, 176, 0, 0.28); }

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

/* ---------- Capability micro-visuals ----------
   Each animates only while its card is live (hover / focus / selected), so
   the section is still at rest when you're reading it. */
.cap-viz [class^="v-"], .cap-viz [class*=" v-"] { transition: opacity 0.4s; }
.cap-viz svg text {
  font-family: var(--font-mono); font-size: 13px; fill: var(--muted);
}
.v-bot-box, .v-screen, .v-pop, .v-stop rect, .v-tiles rect {
  fill: rgba(255, 176, 0, 0.06); stroke: rgba(255, 176, 0, 0.34); stroke-width: 1.5;
}
.v-bot-eye, .v-bot-tip, .v-node, .v-dot { fill: var(--brand); }
.v-bot-ant, .v-track { stroke: rgba(255, 176, 0, 0.34); stroke-width: 1.5; fill: none; }
.v-wave rect, .v-bars rect, .v-row, .v-poprow { fill: rgba(255, 176, 0, 0.5); }
.v-layer { fill: rgba(255, 176, 0, 0.08); stroke: rgba(255, 176, 0, 0.36); stroke-width: 1.5; }
.v-dot { opacity: 0; }

/* Idle → live */
.cap.is-live .v-bot-eye { animation: vBlink 2.4s ease-in-out infinite; }
.cap.is-live .v-wave rect { animation: vWave 1.1s ease-in-out infinite; }
.cap.is-live .v-pop { animation: vPop 2.6s ease-in-out infinite; }
.cap.is-live .v-row { animation: vRow 2.6s ease-in-out infinite; }
.cap.is-live .v-layer { animation: vLayer 2.8s ease-in-out infinite; }
.cap.is-live .v-dot { animation: vTravel 2.6s cubic-bezier(0.5, 0, 0.5, 1) infinite; }
.cap.is-live .v-stop rect { animation: vStop 2.6s ease-in-out infinite; }
.cap.is-live .v-bars rect { animation: vBar 1.9s ease-in-out infinite; transform-origin: 50% 74px; }
.cap.is-live .v-tiles rect { animation: vTile 2.2s ease-in-out infinite; }

.v-d2 { animation-delay: 0.16s !important; }
.v-d3 { animation-delay: 0.32s !important; }
.v-d4 { animation-delay: 0.48s !important; }
.v-d5 { animation-delay: 0.64s !important; }
.v-d6 { animation-delay: 0.8s !important; }

@keyframes vBlink { 0%, 44%, 52%, 100% { opacity: 1; } 48% { opacity: 0.15; } }
@keyframes vWave { 0%, 100% { transform: scaleY(0.6); } 50% { transform: scaleY(1.25); } }
@keyframes vPop { 0%, 18% { opacity: 0; transform: translateX(12px); } 34%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(12px); } }
@keyframes vRow { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes vLayer { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@keyframes vTravel { 0% { opacity: 0; transform: translateX(34px); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateX(166px); } }
@keyframes vStop { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes vBar { 0%, 100% { transform: scaleY(0.62); } 50% { transform: scaleY(1); } }
@keyframes vTile { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

.v-wave rect { transform-origin: 50% 47px; }

@media (prefers-reduced-motion: reduce) {
  .cap.is-live [class^="v-"], .cap.is-live [class*=" v-"] { animation: none !important; }
  .v-dot { opacity: 1; }
}

/* ---------- 6. Live analytics dashboard ---------- */
.dash {
  border: 1px solid var(--line2);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--bg2), var(--bg1));
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}
.dash-head {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.22);
}
.dash-dots { display: flex; gap: 6px; }
.dash-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 176, 0, 0.45); }
.dash-title { font-size: 0.76rem; color: var(--muted); flex: 1; }
.dash-live { display: flex; align-items: center; gap: 7px; font-size: 0.72rem; color: var(--muted); }
.dash-live i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 9px var(--brand);
  animation: pulseDot 1.8s ease-in-out infinite;
}
.dash-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: clamp(18px, 2.4vw, 28px);
}
.dash-tiles { grid-column: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dash-tile {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.24);
  padding: 16px;
}
.dash-tile b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1;
}
.dash-tile-label { display: block; margin-top: 0.55rem; font-size: 0.8rem; color: var(--muted); }
.dash-delta { display: block; margin-top: 0.4rem; font-family: var(--font-mono); font-size: 0.7rem; color: var(--brand); }
.dash-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.24);
  padding: 16px;
}
.dash-panel--bars { grid-column: 1; }
.dash-panel--trend { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; }
.dash-panel-label { display: block; font-size: 0.82rem; color: var(--muted); margin-bottom: 14px; }
.dash-bars { display: flex; align-items: flex-end; gap: clamp(6px, 1.2vw, 14px); height: 130px; }
.dash-bars i {
  flex: 1;
  height: var(--h);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--brand-hi), rgba(255, 176, 0, 0.35));
  transform-origin: 50% 100%;
  transform: scaleY(0);
  transition: transform 0.9s cubic-bezier(0.2, 0.65, 0.2, 1);
}
.reveal.in .dash-bars i { transform: scaleY(1); }
.dash-bars i:nth-child(2) { transition-delay: 0.06s; }
.dash-bars i:nth-child(3) { transition-delay: 0.12s; }
.dash-bars i:nth-child(4) { transition-delay: 0.18s; }
.dash-bars i:nth-child(5) { transition-delay: 0.24s; }
.dash-bars i:nth-child(6) { transition-delay: 0.3s; }
.dash-bars i:nth-child(7) { transition-delay: 0.36s; }
.dash-bars i:nth-child(8) { transition-delay: 0.42s; }
.dash-trend { flex: 1; width: 100%; min-height: 190px; }
.dash-trend-line { stroke: var(--brand); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.reveal .dash-trend-line { stroke-dasharray: 420; stroke-dashoffset: 420; }
.reveal.in .dash-trend-line { transition: stroke-dashoffset 1.6s 0.2s ease-out; stroke-dashoffset: 0; }
.reveal .dash-trend-fill { opacity: 0; }
.reveal.in .dash-trend-fill { transition: opacity 0.9s 0.9s ease-out; opacity: 1; }

@media (max-width: 900px) {
  .dash-body { grid-template-columns: 1fr; }
  .dash-panel--bars, .dash-tiles { grid-column: 1; }
  .dash-panel--trend { grid-column: 1; grid-row: auto; }
  .dash-tiles { grid-template-columns: 1fr; }
}

/* ---------- 8. CTA keyword ---------- */
.cta-band h2 .kw.lit { color: var(--brand-hi); }

/* ---------- Landing page — refinements ---------- */

/* Anchored sections shouldn't hide under the fixed nav */
#problems, #interaction, #handoff, #capabilities, #analytics, #roi, #cta {
  scroll-margin-top: calc(var(--nav-h) + 16px);
}

/* Spine: steps already passed stay lit so the journey reads as a completed
   path, not just a single moving dot. */
.spine-step.done::before { border-color: rgba(255, 176, 0, 0.5); }
.spine-step.done::after { background: rgba(255, 176, 0, 0.6); }
.spine-step.done .spine-role { color: rgba(255, 176, 0, 0.7); }
.spine-step.done .spine-title { color: var(--text); }
.spine-step.is-human.done::before { border-color: rgba(255, 107, 44, 0.55); }
.spine-step.is-human.done::after { background: rgba(255, 107, 44, 0.65); }
.spine-step.is-human.done .spine-role { color: rgba(255, 107, 44, 0.78); }

/* ---------- System / connector name chips ----------
   Static labels, not controls — deliberately flatter than .chip so they don't
   read as clickable filters. */
.sys-chips {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-top: 1.2rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.sys-chips li {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  border: 1px solid var(--line2);
  border-radius: 6px;
  padding: 4px 9px;
  background: rgba(255, 176, 0, 0.04);
}

/* ---------- Video placeholder ----------
   Stands in for a demo/training video that hasn't been produced yet. Reads as
   deliberately unfinished (dashed edge + "pending" tag) so nobody mistakes it
   for a broken player. Swap the div for <a class="vid-ph" data-video="ID"> to
   wire it to the modal in main.js. */
.vid-ph {
  position: relative;
  display: grid; place-items: center; gap: 12px;
  aspect-ratio: 16 / 9;
  margin-bottom: 18px;
  border: 1px dashed var(--line2);
  border-radius: 14px;
  background:
    radial-gradient(ellipse 70% 70% at 50% 45%, rgba(255, 176, 0, 0.07), transparent 70%),
    rgba(0, 0, 0, 0.28);
  transition: border-color 0.3s;
}
.card:hover .vid-ph { border-color: rgba(255, 176, 0, 0.42); }
.vid-ph-play {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 176, 0, 0.4);
  background: rgba(255, 176, 0, 0.1);
  color: var(--brand-hi);
}
.vid-ph-play svg { width: 20px; height: 20px; margin-left: 2px; }
.vid-ph-tag {
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--faint);
}
a.vid-ph { cursor: pointer; }

/* ---------- Static partner logo grid (Partners page) ---------- */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  align-items: stretch;
}
.partner-grid .logo-chip {
  width: auto; min-height: 104px;
  border-color: rgba(46, 142, 255, 0.4);
  background: #F4F6F8;
}
.partner-grid .logo-chip img { opacity: 1; filter: none; max-height: 46px; }
.partner-grid .logo-chip:hover { border-color: rgba(46, 142, 255, 0.75); transform: translateY(-3px); }
@media (max-width: 900px) { .partner-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .partner-grid { grid-template-columns: repeat(2, 1fr); } }

/* Cards that end in a system-chip list: push the list to the card's bottom so
   the divider rules line up across a row of unequal-length copy. */
.card:has(.sys-chips) { display: flex; flex-direction: column; }
.card:has(.sys-chips) .sys-chips { margin-top: auto; }
.card:has(.sys-chips) > p:last-of-type { margin-bottom: 1.2rem; }

/* The pending-video tag is a review marker — keep it readable, not decorative. */
.vid-ph-tag { color: var(--muted); }

/* A card that spans its whole grid row — used when the last item in a grid is
   a different kind of thing (a summary or a capability strip) rather than one
   more peer, and would otherwise sit alone in a short row. */
.card--wide { grid-column: 1 / -1; }
.card--wide .sys-chips { margin-top: 1.2rem; }
@media (min-width: 681px) {
  .card--wide { display: grid; grid-template-columns: auto 1fr; gap: 4px 22px; align-items: start; }
  .card--wide .tile { grid-row: 1 / span 3; }
  .card--wide .sys-chips { border-top: none; padding-top: 0; margin-top: 0.9rem; }
}