/* =====================================================================
   VELASTEGUI VENTURES — Unified Site Stylesheet
   ===================================================================== */

/* ---------- Shared base, layout, and components ---------- */

:root {
  --bg-dark:#000000;
  --bg-dark-2:#2b2b2b;
  --hairline: rgba(255,255,255,0.14);
  --paper:#ffffff;
  --paper-2:#e8edf0;
  --ink:#000000;
  --ink-soft:#434343;
  --off-white:#ffffff;
  --muted-on-dark:#c9c9c9;
  --accent:#183eeb;
  --accent-soft:#d3ebff;
  --accent-2:#6d4be9;
  --senary:#d3ebff;
  /* Lighter tints of the two accents for text on the dark sections, where the
     accents themselves fall below 4.5:1 (#8fa3ff is 7.9:1, #a995ff 7.5:1) */
  --accent-on-dark:#8fa3ff;
  --accent-2-on-dark:#a995ff;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Manrope',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}

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

.eyebrow {
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  font-weight:600;
  color:var(--accent);
}

.hero .eyebrow {
  color:var(--accent-on-dark); font-size:.8rem;
}

.wrap {
  max-width:1120px; margin:0 auto; padding:0 32px;
}

header.site-nav {
  background:var(--paper);
  border-bottom:1px solid rgba(0,0,0,0.1);
}

.nav-row {
  display:flex; align-items:center; justify-content:space-between;
  padding-block:22px; /* not `padding:22px 0` -- that zeroed .wrap's side padding */
}

.brand {
  display:flex;
  align-items:center;
  font-family:'Manrope',sans-serif;
  font-weight:800;
  font-size:1rem;
  letter-spacing:.06em;
  color:var(--ink);
  text-transform:uppercase;
}

.brand img {
  height:80px;
  width:auto;
  display:block;
}

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

nav.links {
  display:flex; align-items:center; gap:34px;
}

nav.links a {
  color:var(--ink-soft); font-size:.97rem; letter-spacing:.02em; transition:color .2s ease; white-space:nowrap;
}

nav.links a:hover, nav.links a:focus-visible {
  color:var(--ink);
}

nav.links a.current {
  color:var(--ink); border-bottom:1px solid var(--accent); padding-bottom:4px;
}

.nav-dropdown {
  position:relative;
}

.nav-dropdown-trigger {
  background:none; border:none; padding:0; margin:0; cursor:pointer;
  font-family:'Manrope',sans-serif; color:var(--ink-soft); font-size:.97rem; letter-spacing:.02em;
  display:flex; align-items:center; gap:5px; transition:color .2s ease; white-space:nowrap;
}

.nav-dropdown-trigger .chevron {
  width:14px; height:9px; display:inline-flex; flex-shrink:0;
  margin-top:1px; transition:transform .2s ease;
}

.nav-dropdown-trigger .chevron svg {
  display:block; width:100%; height:100%;
}

.nav-dropdown:hover .nav-dropdown-trigger,
.nav-dropdown:focus-within .nav-dropdown-trigger,
.nav-dropdown-trigger.current {
  color:var(--ink);
}

.nav-dropdown-trigger.current {
  border-bottom:1px solid var(--accent); padding-bottom:4px;
}

.nav-dropdown:hover .nav-dropdown-trigger .chevron,
.nav-dropdown:focus-within .nav-dropdown-trigger .chevron {
  transform:rotate(180deg); margin-top:-1px;
}

.nav-dropdown-menu {
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  padding-top:16px; width:170px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, visibility .18s ease;
  z-index:80;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity:1; visibility:visible; pointer-events:auto;
}

.nav-dropdown-menu .panel {
  background:var(--paper); border:1px solid rgba(0,0,0,0.1); border-radius:10px;
  padding:8px; min-width:150px;
  box-shadow:0 12px 24px rgba(0,0,0,0.16);
}

.nav-dropdown-menu a {
  display:block; padding:9px 12px; border-radius:6px;
  font-size:.8rem; color:var(--ink-soft); white-space:nowrap; transition:all .15s ease;
}

.nav-dropdown-menu a:hover, .nav-dropdown-menu a.current {
  background:var(--accent-soft); color:var(--ink);
}

.nav-toggle-checkbox {
  display:none;
}

.hamburger-btn {
  display:none;
  flex-direction:column;
  justify-content:center;
  width:32px;
  height:32px;
  cursor:pointer;
  background:none;
  border:none;
}

.hamburger-btn span {
  display:block;
  width:22px;
  height:2px;
  background:var(--ink);
  margin-bottom:5px;
  transition:transform .25s ease, opacity .25s ease;
}

.hamburger-btn span:last-child {
  margin-bottom:0;
}

.mobile-menu {
  display:none;
}

.hero {
  position:relative;
  background:
    radial-gradient(circle at 18% 22%, rgba(24,62,235,0.22), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(109,75,233,0.16), transparent 45%),
    var(--bg-dark);
  color:var(--off-white);
  overflow:hidden;
  padding:44px 0 36px;
}

.hero::before {
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.16) 1px, transparent 1.4px);
  background-size:34px 34px;
  opacity:.5;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 85%);
}

.hero-inner {
  position:relative; z-index:1; max-width:760px;
}

.hero h1 {
  font-size:clamp(2rem, 3.6vw, 2.75rem); font-weight:700; margin:16px 0 16px; line-height:1.15; color: var(--off-white);
}

.hero h1 span {
  color:var(--accent);
}

.hero p.lede {
  font-size:1rem;
  line-height:1.65;
  color:var(--muted-on-dark);
  max-width:600px;
  margin:0;
}

.hero-ctas {
  display:flex; gap:14px; margin-top:28px; flex-wrap:wrap;
}

.btn-primary {
  display:inline-block;
  background:var(--accent);
  color:var(--off-white);
  padding:13px 28px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.02em;
  transition:background .2s ease;
}

.btn-primary:hover {
  background:#1233c2;
}

.btn-ghost {
  display:inline-block;
  border:1px solid var(--hairline);
  color:var(--off-white);
  padding:13px 28px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.02em;
  transition:all .2s ease;
}

.btn-ghost:hover {
  border-color:var(--accent); background:rgba(24,62,235,0.1);
}

.stat-bar-section {
  background:var(--bg-dark);
  color:var(--off-white);
}

.stat-bar {
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding-block:40px; /* not `padding:40px 0` -- that zeroed .wrap's side padding */
  gap:24px;
}

.stat-bar .num {
  font-family:'Manrope',sans-serif;
  font-weight:800;
  font-size:2.1rem;
  color:var(--off-white);
}

.stat-bar .label {
  margin-top:6px;
  font-size:.78rem;
  color:var(--muted-on-dark);
  line-height:1.4;
  max-width:220px;
}

.section-head {
  max-width:680px; margin-bottom:44px;
}

.section-head h2 {
  font-size:clamp(1.7rem, 3vw, 2.2rem);
  font-weight:700;
  margin:14px 0 0;
  line-height:1.25;
}

.section-head.with-link {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}

.section-head .view-all {
  font-size:.85rem; font-weight:700; color:var(--accent);
  border-bottom:1px solid var(--accent); padding-bottom:2px; white-space:nowrap;
}

.section-head p {
  font-size:.98rem; line-height:1.7; color:var(--ink-soft); margin:0;
}

.disciplines {
  background:var(--paper-2); padding:88px 0;
}

.discipline-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:rgba(0,0,0,0.08); border:1px solid rgba(0,0,0,0.08);
}

.discipline {
  background:var(--paper-2); padding:32px 28px;
}

.discipline .idx {
  font-size:.72rem; font-weight:700; color:var(--accent); letter-spacing:.05em; display:block; margin-bottom:14px;
}

.discipline h3 {
  font-size:1.1rem; font-weight:700; margin:0 0 6px;
}

.discipline .tag {
  font-size:.82rem; font-weight:600; color:var(--accent); display:block; margin-bottom:12px;
}

.discipline p {
  font-size:.87rem; line-height:1.65; color:var(--ink-soft); margin:0;
}

.trusted {
  background:var(--muted-on-dark); padding:24px 0; overflow:hidden;
}

.trusted .eyebrow {
  color:var(--accent-2); margin-bottom:24px; display:block;
}

.marquee {
  position:relative;
  width:100%;
  overflow:hidden;
  mask-image:linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image:linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.marquee-track {
  display:flex;
  align-items:center;
  gap:56px;
  width:max-content;
  animation:marquee-scroll 32s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state:paused;
}

.marquee-track img {
  height:80px; width:auto; max-width:200px; object-fit:contain;
  opacity:.9;
  flex-shrink:0;
}

.cta {
  background:var(--bg-dark); color:var(--off-white); text-align:center; padding:32px 32px; border-top:1px solid var(--hairline);
}

.cta h2 {
  font-size:1.5rem; font-weight:700; max-width:600px; margin:0 auto 14px; line-height:1.35;
  color:var(--off-white);
}

.cta .btn {
  display:inline-block; border:1px solid var(--accent); color:var(--off-white); padding:9px 22px; border-radius:999px; font-size:.78rem; letter-spacing:.03em; font-weight:600; text-decoration:none; transition:all .2s ease;
}

.cta .btn:hover {
  background:var(--accent); color:var(--off-white); border-color:var(--accent); text-decoration:none;
}

footer.site-footer {
  background:var(--paper); color:var(--ink-soft); padding:44px 0; border-top:1px solid rgba(0,0,0,0.1);
}

.footer-row {
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px;
}

.footer-nav {
  display:flex; flex-wrap:wrap; gap:22px; font-size:.8rem;
}

.footer-nav a:hover {
  color:var(--ink);
}

.footer-brand {
  display:flex; align-items:center;
  font-family:'Manrope',sans-serif; font-weight:800; letter-spacing:.03em; color:var(--ink); font-size:.95rem;
}

.footer-brand img {
  height:80px; width:auto; display:block;
}

.story {
  padding:96px 0 20px;
}

.story p.body-text {
  font-size:1.02rem;
  line-height:1.8;
  color:var(--ink-soft);
  max-width:680px;
  margin:20px 0;
}

.story p.body-text strong {
  color:var(--ink); font-weight:700;
}

.values {
  background:var(--bg-dark);
  color:var(--off-white);
  padding:96px 0;
  margin-top:64px;
}

.values .eyebrow {
  color:var(--accent-2-on-dark);
}

.values .section-head h2 {
  color:var(--off-white);
}

.value-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--hairline);
  border:1px solid var(--hairline);
}

/* Feature grid "2 columns" option. A class rather than an inline style, so the
   mobile rule below can still stack it to one column */
.grid--2col { grid-template-columns:repeat(2,1fr); }

.value-card {
  background:var(--bg-dark);
  padding:32px 34px;
}

.value-card .idx {
  font-size:.8rem;
  font-weight:700;
  color:var(--accent-2-on-dark);
  letter-spacing:.05em;
  display:block;
  margin-bottom:14px;
}

.value-card h3 {
  font-size:1.15rem;
  font-weight:700;
  margin:0 0 10px;
  color:var(--off-white);
}

.value-card p {
  font-size:.92rem;
  line-height:1.7;
  color:var(--muted-on-dark);
  margin:0;
}

.serif {
  font-family:'Manrope',system-ui,sans-serif; font-weight:600;
}

.leaders {
  background:var(--paper);
  padding:88px 0 40px;
}

.leader {
  display:grid;
  grid-template-columns:280px 1fr;
  gap:56px;
  padding:56px 0;
  border-top:1px solid rgba(0,0,0,0.1);
}

.leader:last-of-type {
  border-bottom:1px solid rgba(0,0,0,0.1);
}

.leader-photo-col {
  display:flex; flex-direction:column; gap:18px;
}

.leader-photo {
  width:100%;
  aspect-ratio:1/1;
  border-radius:6px;
  overflow:hidden;
  background:var(--paper-2);
  position:relative;
}

.leader-photo img {
  width:100%; height:100%; object-fit:cover; display:block;
}

.leader-photo .initials {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Manrope',sans-serif;
  font-weight:800;
  font-size:3.4rem;
  color:var(--accent);
  background:
    radial-gradient(circle at 30% 20%, var(--accent-soft), transparent 60%),
    var(--paper-2);
}

.linkedin-btn {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:700;
  letter-spacing:.03em;
  color:var(--off-white);
  background:var(--accent);
  border:1px solid var(--accent);
  border-radius:999px;
  padding:10px 20px;
  width:fit-content;
  transition:all .2s ease;
}

.linkedin-btn:hover, .linkedin-btn:focus-visible {
  background:#1233c2; border-color:#1233c2;
}

.linkedin-btn svg {
  width:14px; height:14px; flex-shrink:0;
}

.leader-body .role {
  font-family:'Manrope',sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--accent);
  font-size:.82rem;
  margin:0 0 10px;
}

.leader-body h2 {
  font-size:1.9rem;
  font-weight:500;
  margin:0 0 16px;
}

.credentials {
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 10px;
  max-width:680px; margin:0 auto 26px;
}

.credentials span {
  font-size:.76rem; letter-spacing:.02em; color:var(--muted-on-dark);
  background:var(--bg-dark-2); border:1px solid var(--hairline);
  border-radius:999px; padding:7px 14px; white-space:nowrap;
}

.leader-body p.bio {
  font-size:.98rem;
  line-height:1.75;
  color:var(--ink-soft);
  max-width:640px;
  margin:0 0 14px;
}

/* Collapsible bios (static/js/leader-bio.js): first paragraph plus a faded
   peek of the next. A mask rather than a colour overlay, so the fade works
   on any background. */
[data-collapsible-bio] {
  transition:max-height .45s ease;
}

[data-collapsible-bio].is-collapsed {
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 4.5em), transparent);
  mask-image:linear-gradient(to bottom, #000 calc(100% - 4.5em), transparent);
}

.bio-toggle {
  display:inline-block;
  margin-top:6px;
  background:none; border:0; border-bottom:1px solid var(--accent);
  padding:0 0 2px; cursor:pointer;
  font:inherit; font-size:.82rem; font-weight:600;
  color:var(--ink);
}

.bio-toggle[hidden] { display:none; }

.bio-toggle:hover, .bio-toggle:focus-visible {
  color:var(--accent);
}

@media (prefers-reduced-motion:reduce) {
  [data-collapsible-bio] { transition:none; }
  .travel { display:none; }
  .qbox .cursor { animation:none; }
}

@media print {
  [data-collapsible-bio].is-collapsed { max-height:none !important; overflow:visible; -webkit-mask-image:none; mask-image:none; }
  .bio-toggle { display:none; }
}

.draft-note {
  margin-top:18px;
  font-size:.78rem;
  color:var(--ink-soft);
  background:var(--accent-soft);
  border-left:2px solid var(--accent);
  padding:10px 14px;
  border-radius:4px;
  line-height:1.5;
  max-width:640px;
}

.hero-grid {
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:56px;
}

.hero-graphic {
  width:280px; flex-shrink:0;
}

.hero-graphic svg {
  width:100%; height:auto; display:block;
}

.services {
  padding:80px 0 96px;
}

.service {
  display:grid;
  grid-template-columns:340px 1fr;
  gap:56px;
  padding:56px 40px;
  margin:0 -40px;
  border-top:1px solid rgba(0,0,0,0.1);
  border-radius:8px;
  transition:background .25s ease;
}

.service:hover {
  background:var(--paper-2);
}

.service:last-of-type {
  border-bottom:1px solid rgba(0,0,0,0.1);
}

.service-intro .icon {
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft);
  border-radius:8px;
  margin-bottom:18px;
  color:var(--accent);
}

.service-intro .icon svg {
  width:20px; height:20px;
}

.service-intro .idx {
  font-size:.78rem;
  font-weight:700;
  color:var(--accent);
  letter-spacing:.05em;
  display:block;
  margin-bottom:10px;
}

.service-intro h2 {
  font-size:1.7rem;
  font-weight:700;
  margin:0 0 8px;
  line-height:1.25;
}

.service-intro .tag {
  font-size:1rem;
  font-weight:600;
  color:var(--accent);
  display:block;
  margin-bottom:16px;
}

.service-intro p.for-line {
  font-size:.94rem;
  line-height:1.65;
  color:var(--ink-soft);
  margin:0;
}

.service-detail .deliverable {
  display:inline-block;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--ink);
  background:var(--accent-soft);
  border-radius:999px;
  padding:7px 14px;
  margin-bottom:22px;
}

.service-detail ul {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.service-detail li {
  display:flex;
  gap:14px;
  align-items:flex-start;
  font-size:.98rem;
  line-height:1.6;
  color:var(--ink-soft);
}

.service-detail li::before {
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--accent);
  margin-top:9px;
  flex-shrink:0;
}

.service-detail li strong {
  color:var(--ink); font-weight:600;
}

.diagram-card {
  background:var(--bg-dark-2); border:1px solid var(--hairline); border-radius:14px; padding:22px 20px 16px;
}

/* A fixed width, so the card (and the diagram, which scales with it) stays the
   same size whatever question the query box is showing. Every current question
   fits the box in two lines with room to spare. */
.hero-side .diagram-card {
  width:500px; padding:16px 14px 12px;
}

/* Vertiva: a tighter gap beside the 500px card, and below 1000px the card goes
   (the text beside it would be too narrow) and the text takes the full width */
.hero-grid:has(.diagram-card) {
  gap:32px;
}

@media (max-width:1000px) {
  .hero-grid:has(.diagram-card) { grid-template-columns:1fr; }
  .hero-side:has(.diagram-card) { display:none; }
}

.diagram-cap {
  font-size:.75rem; font-weight:700; letter-spacing:.06em; color:var(--muted-on-dark); display:flex; justify-content:space-between; margin-bottom:10px; text-transform:uppercase;
}

.diagram-cap span:last-child {
  color:var(--accent-on-dark);
}

.qbox {
  font-size:1rem; line-height:1.4; color:var(--off-white); background:var(--bg-dark); border:1px solid var(--hairline); border-radius:8px; padding:9px 12px; margin-bottom:12px;
  min-height:calc(2.8em + 20px);  /* always two lines tall, so one-line questions don't make it shrink */
  transition:opacity .3s;
}

.qbox .cursor {
  display:inline-block; width:6px; height:15px; background:var(--accent); margin-left:2px; vertical-align:-2px; animation:blink 1s steps(1) infinite;
}

.qbox .qtext {
  transition:opacity .3s;
}

.qbox .qtext.is-fading {
  opacity:0;
}

svg.fedsearch {
  width:100%; height:auto; display:block;
}

.fed-path {
  fill:none; stroke-width:1.6; opacity:.6;
}

.fed-node-label {
  font-family:'Manrope',sans-serif; font-size:14px; fill:var(--muted-on-dark); letter-spacing:.02em; font-weight:700;
}

.fed-node-circ {
  fill:var(--bg-dark); stroke:var(--hairline); stroke-width:1.2;
}

.fed-answer-circ {
  fill:var(--accent);
}

.fed-answer-label {
  font-family:'Manrope',sans-serif; font-size:15px; fill:var(--off-white); font-weight:700;
}

.travel {
  offset-rotate:0deg; animation:travel 3.2s linear infinite;
}

.travel.d1 { offset-path:path("M450,44 C 380,90 260,110 205,156"); }
.travel.d2 { offset-path:path("M450,44 C 450,100 450,130 450,166"); animation-delay:.5s; }
.travel.d3 { offset-path:path("M450,44 C 520,90 640,110 695,156"); animation-delay:1s; }
.travel.r1 { offset-path:path("M205,156 C 260,210 380,250 450,288"); animation-delay:1.6s; }
.travel.r2 { offset-path:path("M450,166 C 450,215 450,245 450,288"); animation-delay:2.1s; }
.travel.r3 { offset-path:path("M695,156 C 640,210 520,250 450,288"); animation-delay:2.6s; }

section.block {
  padding:88px 0;
}

section.block.alt {
  background:var(--paper-2);
}

.tenet-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(0,0,0,0.08); border:1px solid rgba(0,0,0,0.08);
}

.tenet {
  background:var(--paper); padding:30px 26px;
}

.tenet .idx {
  font-size:.7rem; font-weight:700; color:var(--accent); letter-spacing:.05em; display:block; margin-bottom:12px;
}

.tenet h3 {
  font-size:1.05rem; font-weight:700; margin:0 0 8px;
}

.tenet p {
  font-size:.87rem; line-height:1.6; color:var(--ink-soft); margin:0;
}

.layers {
  display:flex; flex-direction:column;
}

.layer {
  display:grid; grid-template-columns:220px 1fr; gap:30px; padding:32px 0; border-top:1px solid rgba(0,0,0,0.1);
}

.layer:last-child {
  border-bottom:1px solid rgba(0,0,0,0.1);
}

.layer .tag {
  font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--off-white); background:var(--accent); display:inline-block; padding:4px 10px; border-radius:4px; margin-bottom:12px;
}

.layer h3 {
  font-size:1.25rem; font-weight:700; margin:0 0 6px;
}

.layer .layer-desc {
  font-size:.85rem; color:var(--ink-soft); max-width:180px;
}

.chiplist {
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px;
}

.chip {
  font-size:.78rem; color:var(--ink); border:1px solid rgba(0,0,0,0.12); background:var(--paper-2); padding:6px 10px; border-radius:6px; line-height:1.3;
}

.chip b {
  color:var(--accent); font-weight:700;
}

.layer-detail {
  font-size:.87rem; color:var(--ink-soft); line-height:1.65; margin:0; max-width:760px;
}

.timeline {
  position:relative; padding-left:30px;
}

.timeline::before {
  content:""; position:absolute; left:6px; top:6px; bottom:6px; width:1px; background:rgba(0,0,0,0.12);
}

.tl-item {
  position:relative; padding-bottom:38px;
}

.tl-item:last-child {
  padding-bottom:0;
}

.tl-item::before {
  content:""; position:absolute; left:-30px; top:4px; width:11px; height:11px; border-radius:50%; background:var(--paper); border:2px solid var(--accent-2);
}

.tl-item.done::before {
  background:var(--accent); border-color:var(--accent);
}

.tl-head {
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:10px;
}

.tl-phase {
  font-size:.7rem; font-weight:700; letter-spacing:.05em; color:var(--accent); text-transform:uppercase;
}

.tl-title {
  font-size:1.05rem; font-weight:700;
}

.status-pill {
  font-size:.65rem; font-weight:700; letter-spacing:.04em; padding:3px 9px; border-radius:10px; border:1px solid rgba(0,0,0,0.15); color:var(--ink-soft); text-transform:uppercase;
}

.status-pill.live {
  color:var(--off-white); background:var(--accent); border-color:var(--accent);
}

.tl-body {
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}

.tl-col .label {
  font-size:.66rem; font-weight:700; color:var(--ink-soft); letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px;
}

.tl-col p {
  margin:0; font-size:.88rem; color:var(--ink); line-height:1.55;
}

.badge-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:32px;
}

.badge {
  border:1px solid rgba(0,0,0,0.1); border-radius:8px; padding:18px 14px; text-align:center; background:var(--paper);
}

.badge .code {
  font-weight:700; font-size:.92rem; color:var(--accent);
}

.badge .desc {
  font-size:.76rem; color:var(--ink-soft); margin-top:6px; line-height:1.4;
}

.sov-note {
  padding:22px 24px; border-left:3px solid var(--accent); background:var(--accent-soft); font-size:.92rem; color:var(--ink); line-height:1.65; border-radius:0 8px 8px 0;
}

.sov-note strong {
  color:var(--ink);
}

.doc-grid {
  display:flex; flex-direction:column;
}

.doc-card {
  display:grid; grid-template-columns:56px 1fr auto; gap:22px; align-items:center;
  padding:24px 0; border-top:1px solid rgba(0,0,0,0.1);
}

.doc-card:last-child {
  border-bottom:1px solid rgba(0,0,0,0.1);
}

.doc-icon {
  width:48px; height:48px; border-radius:10px; background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

.doc-icon svg {
  width:22px; height:22px; color:var(--accent);
}

.doc-body h3 {
  font-size:.98rem; font-weight:700; margin:0 0 6px; line-height:1.4;
}

.doc-body p {
  font-size:.86rem; line-height:1.55; color:var(--ink-soft); margin:0;
}

.doc-cta {
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0;
  font-size:.78rem; font-weight:700; color:var(--accent);
  border:1px solid var(--accent); border-radius:999px; padding:9px 16px;
  white-space:nowrap; transition:all .2s ease;
}

.doc-cta:hover {
  background:var(--accent); color:var(--off-white);
}

.doc-cta svg {
  width:13px; height:13px;
}

.note {
  margin-top:36px; padding:18px 20px; border-left:3px solid var(--accent-2);
  background:rgba(109,75,233,0.06); border-radius:0 8px 8px 0;
  font-size:.85rem; color:var(--ink-soft); line-height:1.6; max-width:760px;
}

/* ---------- Article body (use-case / whitepaper / brief detail pages) ---------- */
.article-body {
  padding:72px 0 96px;
}

.article-body .wrap {
  max-width:760px;
}

.article-body h2 {
  font-size:1.35rem; font-weight:700; color:var(--ink); margin:44px 0 16px;
}

.article-body h2:first-child {
  margin-top:0;
}

.article-subhead {
  font-size:1.05rem; font-weight:700; color:var(--accent); margin:32px 0 12px;
}

.article-body ul.article-list {
  list-style:none; margin:0 0 24px; padding:0;
}

.article-body ul.article-list li {
  position:relative; padding-left:22px; margin-bottom:14px;
  font-size:1.02rem; line-height:1.75; color:var(--ink-soft);
}

.article-body ul.article-list li::before {
  content:"";
  position:absolute; left:0; top:9px;
  width:7px; height:7px; border-radius:50%;
  background:var(--accent);
}

.article-body ul.article-list li strong {
  color:var(--ink); font-weight:700;
}

.article-body p.body-text {
  font-size:1.02rem; line-height:1.8; color:var(--ink-soft); margin:0 0 20px;
}

.article-body p.body-text strong {
  color:var(--ink); font-weight:700;
}

.article-example {
  margin:24px 0; padding:18px 20px; border-left:3px solid var(--accent);
  background:var(--accent-soft); border-radius:0 8px 8px 0;
  font-size:.92rem; color:var(--ink); line-height:1.7;
}

.article-example strong {
  color:var(--ink); font-weight:700;
}

/* Wide article tables scroll sideways inside their own box on narrow phones,
   instead of making the whole page scroll */
.table-scroll { overflow-x:auto; }

.article-table,
.article-body table {
  width:100%; border-collapse:collapse; margin:24px 0 32px;
  font-size:.92rem;
}

.article-table th,
.article-body table th {
  text-align:left; background:var(--paper-2); color:var(--ink);
  font-weight:700; padding:12px 16px; border:1px solid rgba(0,0,0,0.1);
}

.article-table td,
.article-body table td {
  padding:12px 16px; border:1px solid rgba(0,0,0,0.1); color:var(--ink-soft);
  line-height:1.6; vertical-align:top;
}

.article-table td strong, .article-table th strong {
  color:var(--ink);
}

.article-footnote {
  font-size:.8rem; color:var(--ink-soft); font-style:italic; margin:-8px 0 28px;
}

.article-back-link {
  display:inline-block; margin-bottom:32px; font-size:.85rem; font-weight:700;
  color:var(--accent); border-bottom:1px solid var(--accent); padding-bottom:2px;
}

section.media-list {
  padding:80px 0 96px;
}

.media-grid {
  display:flex; flex-direction:column;
}

.media-item {
  display:grid; grid-template-columns:140px 1fr; gap:24px;
  padding:26px 0; border-top:1px solid rgba(0,0,0,0.1);
}

.media-item:last-child {
  border-bottom:1px solid rgba(0,0,0,0.1);
}

.media-tag {
  font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-soft); border-radius:6px;
  padding:6px 10px; display:inline-block; height:fit-content; white-space:nowrap;
}

.media-item h2 {
  font-size:1.02rem; font-weight:700; margin:0 0 6px; line-height:1.4;
}

.media-item p {
  font-size:.88rem; line-height:1.6; color:var(--ink-soft); margin:0;
}

a:hover {
  text-decoration:underline;
}

.hero-photo {
  border-radius:12px; overflow:hidden; border:1px solid var(--hairline);
}

.hero-photo img {
  width:100%; height:100%; object-fit:cover; display:block;
}

.hero-text p.eyebrow {
  margin-bottom:12px;
}

.hero-text h1 {
  font-size:clamp(2rem, 3.6vw, 2.75rem); font-weight:700; margin:0 0 16px; line-height:1.15;
}

.hero-text p {
  font-size:1rem; line-height:1.65; color:var(--muted-on-dark); margin:0 0 16px;
}

.hero-text p:last-child {
  margin-bottom:0;
}

.hero-text strong {
  color:var(--off-white);
}

.hero-text a {
  color:var(--accent-soft);
}

section.engagements {
  padding:88px 0;
}

.accordion {
  border-top:1px solid rgba(0,0,0,0.1);
}

details.event {
  border-bottom:1px solid rgba(0,0,0,0.1);
}

details.event summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 4px;
  font-weight:700;
  font-size:.98rem;
}

details.event summary::-webkit-details-marker {
  display:none;
}

details.event summary .plus {
  flex-shrink:0;
  width:22px; height:22px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,0.2);
  position:relative;
}

details.event summary .plus::before,
  details.event summary .plus::after {
  content:""; position:absolute; background:var(--ink);
  top:50%; left:50%; transform:translate(-50%,-50%);
}

details.event summary .plus::before {
  width:10px; height:1.5px;
}

details.event summary .plus::after {
  width:1.5px; height:10px; transition:transform .2s ease;
}

details.event[open] summary .plus::after {
  transform:translate(-50%,-50%) scaleY(0);
}

details.event[open] summary .plus {
  border-color:var(--accent);
}

details.event .event-body {
  padding:0 4px 24px; max-width:820px;
}

details.event .event-body p {
  font-size:.92rem; line-height:1.7; color:var(--ink-soft); margin:0 0 12px;
}

details.event .event-body p:last-child {
  margin-bottom:0;
}

.contact-form {
  text-align:left;
  background:var(--bg-dark-2);
  border:1px solid var(--hairline);
  border-radius:14px;
  padding:32px;
  max-width:720px;
  margin:0 auto;
}

.form-row {
  margin-bottom:18px;
}

.form-row label {
  display:block;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted-on-dark);
  margin-bottom:8px;
}

.form-row input,
  .form-row textarea {
  width:100%;
  background:var(--bg-dark);
  border:1px solid var(--hairline);
  border-radius:8px;
  padding:12px 14px;
  font-family:'Manrope',sans-serif;
  font-size:.95rem;
  color:var(--off-white);
  transition:border-color .2s ease;
}

.form-row textarea {
  resize:vertical; min-height:110px;
}

.form-row input:focus,
  .form-row textarea:focus {
  outline:none;
  border-color:var(--accent);
}

.form-row input::placeholder,
  .form-row textarea::placeholder {
  color:#6b7280;
}

.form-error {
  color:#ff6b6b; font-size:.8rem; margin-top:6px;
}

/* Spam trap -- kept off-screen (not display:none, which some bots skip) */
.form-honeypot {
  position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden;
}

.form-submit {
  width:100%;
  background:var(--accent);
  color:var(--off-white);
  border:none;
  border-radius:8px;
  padding:14px;
  font-family:'Manrope',sans-serif;
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background .2s ease;
}

.form-submit:hover {
  background:#1233c2;
}

.alt-contact {
  margin-top:36px;
  font-size:.88rem;
  color:var(--muted-on-dark);
}

.alt-contact a {
  color:var(--off-white);
  border-bottom:1px solid var(--accent);
  padding-bottom:1px;
  font-weight:600;
}

.alt-contact a:hover {
  color:var(--accent-soft);
}

.profile-photo {
  width:168px; height:168px; border-radius:50%; overflow:hidden;
  margin:0 auto 24px; border:2px solid var(--hairline);
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 30% 20%, var(--accent-soft), transparent 60%), var(--bg-dark-2);
}

.profile-photo img {
  width:100%; height:100%; object-fit:cover; display:block;
}

.hero .role {
  font-size:.95rem; color:var(--accent); font-weight:700; margin-bottom:22px;
}

.bio-section {
  padding:88px 0 96px;
}

.bio-section .wrap {
  max-width:760px;
}

.bio-section p {
  font-size:1.02rem; line-height:1.85; color:var(--ink-soft); margin:0 0 24px;
}

.bio-section p:last-child {
  margin-bottom:0;
}

.back-link {
  display:inline-block; margin-bottom:32px; font-size:.85rem; font-weight:700;
  color:var(--accent); border-bottom:1px solid var(--accent); padding-bottom:2px;
}

.profile-photo .initials {
  font-family:'Manrope',sans-serif; font-weight:800; font-size:3rem; color:var(--accent);
}

/* ---------- Status pages (404, 500) and search ---------- */
.hero.hero--status { padding:72px 0 64px; }
.hero--status .hero-ctas { justify-content:center; }

.visually-hidden {
  position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

.search-form {
  display:flex; gap:10px; width:100%; max-width:520px; margin-top:28px;
}

.search-form input {
  flex:1; min-width:0;
  background:var(--bg-dark-2);
  border:1px solid var(--hairline);
  border-radius:999px;
  padding:12px 20px;
  font-family:'Manrope',sans-serif;
  font-size:.95rem;
  color:var(--off-white);
  transition:border-color .2s ease;
}

.search-form input:focus { outline:none; border-color:var(--accent); }
.search-form input::placeholder { color:#8a8f98; }
.search-form button { border:none; cursor:pointer; font-family:'Manrope',sans-serif; }

.search-count {
  font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 18px;
}

.search-results { list-style:none; margin:0; padding:0; max-width:820px; }

.search-result { border-top:1px solid rgba(0,0,0,0.1); }
.search-result:last-child { border-bottom:1px solid rgba(0,0,0,0.1); }

.search-result a {
  display:block; padding:22px 0; color:inherit;
}

.search-result h3 {
  font-size:1.1rem; font-weight:700; margin:0 0 6px; transition:color .2s ease;
}

.search-result a:hover h3 { color:var(--accent); }

.search-result p {
  font-size:.92rem; line-height:1.65; color:var(--ink-soft); margin:0 0 6px;
}

.search-result-url { font-size:.78rem; color:var(--accent); overflow-wrap:anywhere; }

.search-pagination {
  display:flex; justify-content:space-between; max-width:820px; margin-top:28px;
}

.search-empty h2 { font-size:1.4rem; font-weight:700; margin:0 0 10px; }
.search-empty p { font-size:.98rem; line-height:1.7; color:var(--ink-soft); margin:0; }
.search-empty a { color:var(--accent); font-weight:700; }

@media (max-width:820px) {
  .hero.hero--status { padding:48px 0 44px; }
  .search-form { flex-direction:column; }
  .search-form button { width:100%; }
}

/* ---------- Keyframe animations ---------- */

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

@keyframes blink{50%{opacity:0;}}

@keyframes travel{0%{offset-distance:0%; opacity:0;} 8%{opacity:1;} 92%{opacity:1;} 100%{offset-distance:100%; opacity:0;}}

/* ---------- Shared responsive rules ---------- */

@media (max-width:820px) {
  .stat-bar { grid-template-columns:1fr; gap:20px; text-align:center; }
  .stat-bar .label { margin-inline:auto; }
  .discipline-grid { grid-template-columns:1fr; }
  nav.links { display:none; }
  .footer-row { flex-direction:column; align-items:flex-start; }
  .value-grid { grid-template-columns:1fr; }
  .grid--2col { grid-template-columns:1fr; }
  .leader { grid-template-columns:1fr; gap:24px; }
  .leader > * { min-width:0; }
  .credentials span { white-space:normal; } /* long credentials overflowed narrow phones */
  .leader-photo-col { flex-direction:row; align-items:center; }
  .leader-photo { width:120px; height:120px; flex-shrink:0; }
  .hero-grid { grid-template-columns:1fr; }
  .hero-graphic { width:200px; margin-top:32px; }
  .service { grid-template-columns:1fr; gap:24px; padding:40px 20px; margin:0 -20px; }
  .tenet-grid { grid-template-columns:1fr; }
  .layer { grid-template-columns:1fr; gap:14px; }
  .tl-body { grid-template-columns:1fr; }
  .badge-grid { grid-template-columns:repeat(2,1fr); }
  .doc-card { grid-template-columns:1fr; gap:12px; }
  .doc-icon { display:none; }
  .doc-cta { width:fit-content; }
  .media-item { grid-template-columns:1fr; gap:10px; }
  .hero-photo { max-width:220px; }

  .hamburger-btn { display:flex; }

  .nav-toggle-checkbox:checked ~ .wrap .hamburger-btn span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .nav-toggle-checkbox:checked ~ .wrap .hamburger-btn span:nth-child(2) { opacity:0; }
  .nav-toggle-checkbox:checked ~ .wrap .hamburger-btn span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

  .nav-toggle-checkbox:checked ~ .mobile-menu { display:flex; }

  .mobile-menu {
    display:none;
    flex-direction:column;
    background:var(--paper);
    border-top:1px solid rgba(0,0,0,0.1);
    padding:8px 24px 20px;
  }

  .mobile-menu > a {
    color:var(--ink-soft);
    font-size:.9rem;
    padding:14px 0;
    border-bottom:1px solid rgba(0,0,0,0.1);
  }

  .mobile-menu > a.current { color:var(--accent); }

  .mobile-menu details { border-bottom:1px solid rgba(0,0,0,0.1); }

  .mobile-menu details summary {
    color:var(--ink-soft);
    font-size:.9rem;
    padding:14px 0;
    cursor:pointer;
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }

  .mobile-menu details summary::-webkit-details-marker { display:none; }

  .mobile-menu details summary::after {
    content:"";
    width:7px; height:7px;
    border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
    transform:rotate(45deg);
    transition:transform .2s ease;
  }

  .mobile-menu details[open] summary::after { transform:rotate(225deg); }
  .mobile-menu details[open] summary { color:var(--ink); }

  .mobile-menu details a {
    display:block;
    color:var(--ink-soft);
    font-size:.85rem;
    padding:10px 0 10px 16px;
  }

  .mobile-menu details a.current { color:var(--accent); }
  .mobile-menu > a:last-child { border-bottom:none; }
}

@supports not (offset-path: path("M0,0")) {
  .travel { display:none; }
}

@media (max-width:900px) {
  .hero-grid { grid-template-columns:1fr; }
  /* The hero's side graphic (HeroBlock.side_html) only reads well beside the text */
  .hero-side { display:none; }
}

/* Between the hamburger breakpoint and full desktop width, the full nav
   (logo + six items) doesn't fit at its normal spacing -- tighten it */
@media (min-width:821px) and (max-width:1100px) {
  nav.links { gap:18px; }
  nav.links a, .nav-dropdown-trigger { font-size:.9rem; }
  .brand img { height:64px; }
}

/* .service bleeds 40px past the content column for its hover background,
   but .wrap only has 32px of side padding -- below ~1200px that pushed the
   cards 8px past the viewport and made the Services page scroll sideways */
@media (min-width:821px) and (max-width:1200px) {
  .service { padding-inline:32px; margin-inline:-32px; }
}

/* Centered radial fade + padding variant for centered-hero pages (Contact, bio pages) */
.hero.hero--centered::before {
  mask-image:radial-gradient(circle at center, rgba(0,0,0,.9), transparent 72%);
}

.hero.hero--centered {
  text-align:center;
  padding:44px 0 20px;
}

.hero.hero--centered .hero-inner {
  display:flex; flex-direction:column; align-items:center;
  max-width:760px; margin:0 auto;
}

/* Home hero special-case: stat bar supplies its own bottom padding */
.hero.hero--home { padding:44px 0 0; }