/* ------------------------------------------------------------
   Self-hosted fonts. Previously a render-blocking request to
   fonts.googleapis.com. Latin subset only — the site uses zero
   latin-ext characters. Inter is the variable font (400-700) in
   place of four static weights.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('../assets/fonts/fraunces-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../assets/fonts/fraunces-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/inter-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =============================================================
   OMER QURESHI — Personal Brand Design System
   3-Pillar Palette: Navy • Cloud • Steel
   Typography: Fraunces (display) + Inter (body)
   ============================================================= */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  /* PILLAR 1 — NAVY (Ink): authority, depth, executive presence */
  --ink-900: #061427;
  --ink-800: #0B2240;
  --ink-700: #142E54;
  --ink-600: #1F3F6D;
  --ink-500: #3D547A;
  --ink-400: #6B7E9C;

  /* PILLAR 2 — CLOUD (Bone): warm off-white, light editorial surface */
  --bone-50:  #FFFFFF;
  --bone-100: #F8FAFC;
  --bone-200: #EEF2F7;
  --bone-300: #DDE3EC;
  --bone-400: #B7BFCC;
  --bone-500: #7A8294;

  /* PILLAR 3 — STEEL (accent): cool blue, professional energy */
  --ember-300: #7CA0CC;
  --ember-400: #5B87B7;
  --ember-500: #3B6FA3;
  --ember-600: #2A5887;
  --ember-700: #1E4267;

  /* Semantic roles */
  --bg:            var(--bone-100);
  --bg-alt:        var(--bone-50);
  --bg-inverted:   var(--ink-800);
  --surface:       #FFFFFF;
  --surface-alt:   var(--bone-200);
  --border:        var(--bone-300);
  --border-strong: var(--bone-400);
  --text:          var(--ink-800);
  --text-muted:    var(--ink-500);
  --text-faint:    var(--bone-500);
  --text-inverted: #FFFFFF;
  --accent:        var(--ember-500);
  --accent-hover:  var(--ember-600);

  /* Convenience aliases used across components */
  --ink:    var(--ink-800);
  --bone:   var(--bone-100);
  --ember:  var(--ember-500);

  /* Type scale (fluid) */
  --text-xs:    clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm:    clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
  --text-base:  clamp(1rem, 0.96rem + 0.25vw, 1.0625rem);
  --text-md:    clamp(1.0625rem, 1.0rem + 0.3vw, 1.125rem);
  --text-lg:    clamp(1.125rem, 1.06rem + 0.4vw, 1.25rem);
  --text-xl:    clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem);
  --text-2xl:   clamp(1.75rem, 1.45rem + 1.4vw, 2.25rem);
  --text-3xl:   clamp(2.25rem, 1.8rem + 2.2vw, 3rem);
  --text-hero:  clamp(2.75rem, 2rem + 3.8vw, 5rem);

  /* Spacing scale */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout */
  --container:        1240px;
  --container-narrow: 880px;
  --container-prose:  680px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius:    8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows — soft, editorial (navy-tinted) */
  --shadow-sm: 0 1px 2px rgba(11,34,64,0.06), 0 1px 3px rgba(11,34,64,0.04);
  --shadow-md: 0 4px 12px rgba(11,34,64,0.06), 0 2px 4px rgba(11,34,64,0.04);
  --shadow-lg: 0 20px 40px -16px rgba(11,34,64,0.14), 0 8px 16px -8px rgba(11,34,64,0.06);

  /* Motion */
  --ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:     400ms;
  --dur-fast: 200ms;

  /* Type */
  --font-display: "Fraunces", "Times New Roman", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- 2. RESET + BASE ---------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* height:auto is what keeps aspect ratio when CSS sets a width. Without
   it the browser holds the HTML height attribute as the literal rendered
   height, so a 1080x1080 portrait in a 220px column renders 220x1080. */
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ember-500); color: var(--bone-50); }

/* ---------- 3. TYPOGRAPHY UTILITIES ---------- */
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; }
.display--italic { font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
.eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 500;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--accent);
}
.lede {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-xl);
  line-height: 1.4;
  color: var(--text-muted);
  max-width: 60ch;
}
.text-muted { color: var(--text-muted); }

/* ---------- 4. LAYOUT PRIMITIVES ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(var(--space-5), 5vw, var(--space-12));
}
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: clamp(var(--space-16), 10vw, var(--space-32)); }
.section--tight { padding-block: clamp(var(--space-12), 7vw, var(--space-20)); }
.section--inverted { background: var(--bg-inverted); color: var(--text-inverted); }
.section--inverted .text-muted { color: var(--bone-400); }
.section--inverted .eyebrow { color: var(--bone-400); }
.section--alt { background: var(--bg-alt); }

.divider {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: 0;
}

/* ---------- 5. NAVIGATION ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(248, 250, 252, 0.85);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav.is-scrolled { border-color: var(--border); }
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-5);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--ink-800);
  transition: opacity var(--dur-fast) var(--ease);
}
.brand:hover { opacity: 0.78; }
.brand__mark {
  width: 144px; height: 144px;
  display: grid; place-items: center;
  flex: none;
}
.brand__mark svg { width: 144px; height: 144px; }
.brand__word {
  height: 72px;
  width: auto;
  display: block;
}
@media (max-width: 900px) {
  .brand__mark { width: 96px; height: 96px; }
  .brand__mark svg { width: 96px; height: 96px; }
  .brand__word { height: 52px; }
}
@media (max-width: 480px) {
  .brand__word { width: 160px; height: 44px; }
  .brand__mark { width: 72px; height: 72px; }
  .brand__mark svg { width: 72px; height: 72px; }
}

/* Orbit logo animation — satellite travels around a fixed elliptical orbit (SVG animateMotion) */
.orbit-logo__satellite {
  filter: drop-shadow(0 0 2px rgba(59, 111, 163, 0.35));
}
@media (prefers-reduced-motion: reduce) {
  .orbit-logo__motion { animation: none; }
  .orbit-logo__satellite { transform: translate(30px, 0); }
}
.nav__links {
  display: flex;
  gap: var(--space-8);
  font-size: var(--text-sm);
  font-weight: 500;
}
.nav__links a {
  position: relative;
  color: var(--text-muted);
  padding-block: var(--space-2);
  transition: color var(--dur-fast) var(--ease);
}
.nav__links a:hover { color: var(--text); }
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__links a[aria-current="page"] { color: var(--accent); text-decoration: underline; text-underline-offset: 6px; }
.nav__cta { display: none; }
@media (min-width: 768px) {
  .nav__cta { display: inline-flex; }
}

/* ---------- 6. BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.875rem 1.5rem;
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: all var(--dur-fast) var(--ease);
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn--primary { background: var(--ink-800); color: var(--bone-100); }
.btn--primary:hover { background: var(--ink-700); transform: translateY(-1px); }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn--ghost { border-color: var(--border-strong); color: var(--text); }
.btn--ghost:hover { border-color: var(--ink-800); background: var(--ink-800); color: var(--bone-100); }
.btn--inverted { background: var(--bone-100); color: var(--ink-800); }
.btn--inverted:hover { background: var(--bone-50); transform: translateY(-1px); }
.btn__arrow { transition: transform var(--dur-fast) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ---------- 7. HERO ---------- */
.hero {
  padding-top: clamp(var(--space-12), 8vw, var(--space-20));
  padding-bottom: clamp(var(--space-16), 10vw, var(--space-24));
  position: relative;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  gap: clamp(var(--space-10), 6vw, var(--space-20));
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 960px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}
.hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: var(--space-8);
}
.hero__meta-dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(59, 111, 163, 0.18);
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-hero);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--ink-800);
  margin-bottom: var(--space-8);
}
.hero__title em {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
/* Hero entity-definition sentence (SEO/AEO line under the headline) */
.hero__definition {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--text-muted);
  margin: var(--space-4) 0 var(--space-5);
  max-width: 56ch;
}
.hero__definition strong { color: var(--ink-900); font-weight: 600; }

.hero__lede {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 52ch;
  margin-bottom: var(--space-10);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-12);
}
.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border);
}
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink-800);
  display: block;
  line-height: 1.1;
}
.stat__label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: var(--space-2);
  display: block;
}

/* Hero portrait carousel */
.hero__carousel {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-700);
  box-shadow: var(--shadow-lg);
  margin: 0;
}
.hero__slides {
  position: absolute;
  inset: 0;
}
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms ease-in-out;
  pointer-events: none;
}
.hero__slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
.hero__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}
.hero__slide[data-fit="contain"] img {
  object-fit: contain;
  object-position: center;
  background: #1a1d24;
}
.hero__slide[data-fit="action"] img {
  object-fit: cover;
  object-position: center center;
}
.hero__slide::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(11,34,64,0.78) 100%);
  pointer-events: none;
}

/* Mini infographic overlay */
.hero__infographic {
  position: absolute;
  left: var(--space-6);
  right: var(--space-6);
  bottom: var(--space-6); /* badge removed from markup; no reservation needed */
  z-index: 3;
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--space-3);
  row-gap: 2px;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  background: rgba(11, 34, 64, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
}
.hero__infographic-icon {
  grid-row: 1 / span 2;
  width: 44px; height: 44px;
  padding: 9px;
  background: rgba(59, 111, 163, 0.95);
  border-radius: 12px;
  color: #fff;
  box-shadow: 0 4px 16px rgba(59,111,163,0.35);
}
.hero__infographic-number {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.6rem, 3.2vw, 2.1rem);
  line-height: 1;
  color: #fff;
  letter-spacing: -0.01em;
}
.hero__infographic-label {
  font-size: var(--text-xs);
  line-height: 1.35;
  color: rgba(255,255,255,0.88);
  letter-spacing: 0.01em;
}

/* Badge sits on top of carousel */
.hero__badge {
  position: absolute;
  bottom: var(--space-6);
  left: var(--space-6);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  font-size: var(--text-xs);
  color: var(--ink-800);
  box-shadow: 0 6px 18px rgba(11,34,64,0.18);
}
.hero__badge-dot {
  width: 8px; height: 8px;
  background: #16a34a;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.22);
  flex: none;
}

/* Right column wrapper: carousel + role card stacked */
.hero__media {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Role card: sits below the carousel, never overlapping the image/infographic */
.hero__role-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--ink-100, rgba(11,34,64,0.10));
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(11,34,64,0.08);
}
.hero__role-dot {
  width: 8px; height: 8px;
  background: #16a34a;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.22);
  flex: none;
  margin-top: 7px;
}
.hero__role-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.hero__role-line {
  display: block;
  color: var(--ink-800);
  font-size: var(--text-sm, 0.95rem);
  line-height: 1.4;
}
.hero__role-line strong {
  color: var(--ink-900);
  font-weight: 600;
}

/* Dots */
.hero__dots {
  position: absolute;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: 4;
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(11,34,64,0.45);
  backdrop-filter: blur(8px);
  border-radius: 999px;
}
.hero__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,0.45);
  padding: 0;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
.hero__dot:hover { background: rgba(255,255,255,0.75); }
.hero__dot.is-active {
  background: #fff;
  transform: scale(1.25);
}
.hero__dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

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

/* Prev/Next arrows */
.hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(11,34,64,0.55);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background 200ms ease, transform 200ms ease, opacity 200ms ease;
  opacity: 0.85;
}
.hero__arrow svg {
  width: 22px;
  height: 22px;
  display: block;
}
.hero__arrow:hover {
  background: rgba(11,34,64,0.75);
  opacity: 1;
  transform: translateY(-50%) scale(1.06);
}
.hero__arrow:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.hero__arrow--prev { left: var(--space-4); }
.hero__arrow--next { right: var(--space-4); }

/* Below 900px the 4/5 portrait frame takes most of a phone screen before any
   content is reachable. 4/3 keeps the portrait feel at roughly 60% of the height. */
@media (max-width: 900px) {
  /* Square on phones. Gives the subject room above the caption bar pinned to
     the bottom edge, while staying ~20% shorter than the 4/5 desktop frame
     that took most of the screen before any content was reachable. */
  .hero__carousel { aspect-ratio: 1 / 1; }

  /* In a short frame a floating card lands mid-image and covers faces.
     Pin it to the bottom edge, full width, where the slide gradient
     already darkens the picture. */
  .hero__infographic {
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + 2px);
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: linear-gradient(180deg,
                rgba(11, 34, 64, 0.62) 0%,
                rgba(11, 34, 64, 0.90) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  /* Dots would sit on the bar; move them to the top-right corner. */
  .hero__dots {
    top: var(--space-3);
    right: var(--space-3);
    bottom: auto;
  }
  /* Lift the arrows clear of the bar. */
  .hero__arrow { top: 38%; }
}

/* Small screens: place infographic higher so dots/badge don’t collide */
@media (max-width: 540px) {
  .hero__infographic {
    padding: var(--space-3) var(--space-4);
    grid-template-columns: 36px 1fr;
  }
  .hero__infographic-icon { width: 36px; height: 36px; padding: 7px; }
  .hero__infographic-number { font-size: 1.4rem; }
  .hero__dots { right: var(--space-3); top: var(--space-3); bottom: auto; }
  .hero__arrow { width: 38px; height: 38px; }
  .hero__arrow svg { width: 18px; height: 18px; }
  .hero__arrow--prev { left: var(--space-3); }
  .hero__arrow--next { right: var(--space-3); }
}

/* ---------- 8. LOGO WALL (auto-scrolling, full color) ---------- */
.logowall {
  border-block: 1px solid var(--border);
  padding-block: var(--space-10);
  background: var(--bg-alt);
  overflow: hidden;
}
.logowall__label {
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: var(--space-6);
}
.logowall__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Fade out the edges so the loop seam never shows */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.logowall__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--space-5);
  width: max-content;
  animation: logowall-scroll 42s linear infinite;
  will-change: transform;
}
.logowall__viewport:hover .logowall__track {
  animation-play-state: paused;
}
.logowall__card {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  width: 200px;
  padding: var(--space-3) var(--space-5);
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  box-shadow: 0 1px 0 rgba(11, 34, 64, 0.02);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.logowall__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -16px rgba(11, 34, 64, 0.28);
  border-color: rgba(59, 111, 163, 0.55);
}
.logowall__card img {
  max-height: 92px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Full color — no grayscale */
  filter: none;
  opacity: 1;
}
@keyframes logowall-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .logowall__track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
}
@media (max-width: 640px) {
  .logowall__card { height: 96px; width: 160px; padding: var(--space-2) var(--space-4); }
  .logowall__card img { max-height: 72px; }
  .logowall__track { animation-duration: 32s; gap: var(--space-4); }
}

/* ---------- 8b. INSIGHTS CAROUSEL ---------- */
.insights {
  padding-block: clamp(var(--space-16), 10vw, var(--space-24));
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.insights__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
  flex-wrap: wrap;
}
.insights__head .section-header { margin-bottom: 0; }
.insights__controls {
  display: flex;
  gap: var(--space-3);
}
.insights__btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.insights__btn:hover {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
  transform: translateY(-1px);
}
.insights__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
  background: var(--bg-alt);
  color: var(--ink);
  border-color: var(--border);
}
.insights__btn svg { width: 18px; height: 18px; }
.insights__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--gutter, 1.5rem));
  padding-inline: var(--gutter, 1.5rem);
}
.insights__viewport::-webkit-scrollbar { display: none; }
.insights__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(420px, 82vw);
  gap: var(--space-6);
  padding-block: var(--space-2);
}
.insight-card {
  scroll-snap-align: start;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 0 rgba(11, 34, 64, 0.02);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.insight-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -28px rgba(11, 34, 64, 0.35);
  border-color: rgba(59, 111, 163, 0.5);
}
.insight-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-alt);
  overflow: hidden;
}
.insight-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease);
}
.insight-card:hover .insight-card__media img { transform: scale(1.04); }
.insight-card__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(11, 34, 64, 0.55), transparent);
  pointer-events: none;
}
/* Logo-grid variant: no dark overlay, no zoom — keep logos clean and centered */
.insight-card--logos .insight-card__media { background: #faf7f2; }
.insight-card--logos .insight-card__media::after { display: none; }
.insight-card--logos .insight-card__media img { object-fit: contain; padding: var(--space-3); }
.insight-card--logos:hover .insight-card__media img { transform: none; }
.insight-card__tag {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 1;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  background: rgba(11, 34, 64, 0.72);
  backdrop-filter: blur(4px);
  padding: 6px 10px;
  border-radius: 999px;
}
.insight-card__body {
  padding: var(--space-6) var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}
.insight-card__stat {
  font-family: var(--font-display), Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.25rem, 4vw, 3rem);
  line-height: 1;
  color: var(--ember);
  font-variation-settings: "SOFT" 50, "WONK" 1;
  letter-spacing: -0.01em;
}
.insight-card__headline {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
.insight-card__desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.55;
}
@media (max-width: 640px) {
  .insights__track { grid-auto-columns: 86vw; }
  .insights__head { margin-bottom: var(--space-8); }
  .insight-card__body { padding: var(--space-5); }
}

/* ---------- 9. SECTION HEADER ---------- */
.section-header {
  display: grid;
  gap: var(--space-6);
  margin-bottom: clamp(var(--space-12), 6vw, var(--space-16));
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .section-header {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(var(--space-10), 6vw, var(--space-20));
    align-items: end;
  }
}
.section-header__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: 1;
  letter-spacing: -0.02em;
}
.section-header__title em {
  font-style: italic;
  color: var(--accent);
}
.section-header__lede {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 56ch;
}

/* ---------- 10. ABOUT ---------- */
.about__grid {
  display: grid;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .about__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.about__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  background: var(--surface);
  color: var(--text-muted);
}
.tag--accent { color: var(--accent); border-color: var(--ember-300); }

.pullquote {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: var(--text-xl);
  line-height: 1.4;
  color: var(--ink-800);
  padding-left: var(--space-6);
  border-left: 2px solid var(--accent);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.pullquote__attr {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.about__tagline {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.35;
  color: var(--accent);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  margin: 0;
  padding: var(--space-5) var(--space-6);
  background: linear-gradient(135deg, rgba(59, 111, 163, 0.08), rgba(59, 111, 163, 0.02));
  border-radius: 14px;
  border: 1px solid rgba(59, 111, 163, 0.18);
}
.about__tagline em {
  font-style: italic;
}

.about__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}
@media (min-width: 700px) {
  .about__stats { grid-template-columns: repeat(4, 1fr); }
}
.about__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.about__stat-value {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 400;
  line-height: 1;
  color: var(--ink-900);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  letter-spacing: -0.01em;
}
.about__stat-label {
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Press Kit / Downloads */
.presskit {
  margin-top: clamp(var(--space-12), 8vw, var(--space-16));
  padding: clamp(var(--space-8), 5vw, var(--space-12));
  background: var(--bone-50, #F8FAFC);
  border: 1px solid var(--border);
  border-radius: 20px;
}
.presskit__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}
.presskit__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink-900);
  margin: 0;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.presskit__title em { font-style: italic; color: var(--accent); }
.presskit__lede {
  font-size: var(--text-base);
  color: var(--text-muted);
  max-width: 60ch;
  margin: 0;
}
.presskit__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 720px) {
  .presskit__grid { grid-template-columns: repeat(3, 1fr); }
}
.download-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink-900);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
}
.download-card:hover,
.download-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px -22px rgba(11, 34, 64, 0.45);
  border-color: var(--accent);
  outline: none;
}
.download-card__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(59, 111, 163, 0.14), rgba(59, 111, 163, 0.04));
  color: var(--accent);
  transition: background 220ms ease, transform 220ms ease;
}
.download-card:hover .download-card__icon {
  background: var(--accent);
  color: #fff;
  transform: translateY(-2px);
}
.download-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.download-card__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink-900);
  line-height: 1.2;
}
.download-card__meta {
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.prose p {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text);
  max-width: 64ch;
}
.prose p + p { margin-top: var(--space-5); }
.prose p:first-child::first-letter {
  font-family: var(--font-display);
  font-size: 3.5em;
  line-height: 0.85;
  float: left;
  padding-right: 0.1em;
  padding-top: 0.05em;
  color: var(--accent);
  font-weight: 400;
}

/* ---------- 11. HIGHLIGHTS / KPI ---------- */
.highlights {
  display: grid;
  gap: 1px;
  background: var(--ink-700);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-lg);
  overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .highlights { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .highlights { grid-template-columns: repeat(4, 1fr); } }
.highlight {
  background: var(--ink-800);
  padding: clamp(var(--space-6), 3vw, var(--space-10));
  color: var(--bone-100);
  position: relative;
  overflow: hidden;
  cursor: default;
  transform: translateZ(0);
  transition:
    background 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Top accent bar that scales in on hover */
.highlight::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ember-400), var(--ember-300));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Radial steel-blue glow that fades in on hover */
.highlight::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(140% 90% at 100% 0%, rgba(59,111,163,0.28), transparent 55%);
  opacity: 0;
  transition: opacity 420ms ease;
  pointer-events: none;
}
.highlight:hover,
.highlight:focus-within {
  background: var(--ink-900);
}
.highlight:hover::before,
.highlight:focus-within::before { transform: scaleX(1); }
.highlight:hover::after,
.highlight:focus-within::after { opacity: 1; }
.highlight:hover .highlight__value,
.highlight:focus-within .highlight__value { transform: translateY(-4px); }
.highlight:hover .highlight__value em,
.highlight:focus-within .highlight__value em { color: var(--ember-300); transform: translateX(4px); }

.highlight__value {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--bone-50);
  display: block;
  position: relative;
  z-index: 1;
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.highlight__value em {
  font-style: italic;
  color: var(--ember-400);
  display: inline-block;
  transition: color 320ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.highlight__label {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--bone-400);
  max-width: 22ch;
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .highlight,
  .highlight::before,
  .highlight::after,
  .highlight__value,
  .highlight__value em { transition: none; }
  .highlight:hover { transform: none; }
}

/* ---------- 11b. EXPERTISE / SKILL BARS ---------- */
.expertise {
  margin-top: clamp(var(--space-10), 6vw, var(--space-16));
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .expertise { grid-template-columns: minmax(260px, 340px) 1fr; gap: var(--space-12); align-items: start; }
}
.expertise__head { display: flex; flex-direction: column; gap: var(--space-3); }
.expertise__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 0;
}
.expertise__title em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  color: var(--accent);
}
.expertise__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.skill {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.skill__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}
.skill__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-800);
}
.skill__pct {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.skill__track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(11, 34, 64, 0.10);
  overflow: hidden;
}
.skill__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), #5A8EC5);
  border-radius: 999px;
  transition: width 1400ms cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 0 0 1px rgba(59, 111, 163, 0.18) inset;
}
.skill__fill::after {
  /* trailing dot that sits at the end of the bar (matches the reference) */
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px var(--accent), 0 4px 10px -4px rgba(11, 34, 64, 0.35);
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 360ms ease 900ms;
}
.skill.is-visible .skill__fill { width: var(--target, 0%); }
.skill.is-visible .skill__fill::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .skill__fill { transition: none; width: var(--target, 0%); }
  .skill__fill::after { opacity: 1; transition: none; }
}

/* ---------- 12. EXPERIENCE TIMELINE ---------- */
.experience {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.role {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--border);
  transition: background var(--dur) var(--ease);
  align-items: center;
}
.role:hover { background: var(--bg-alt); }
@media (min-width: 768px) {
  .role {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-2);
  }
}
.role__logo {
  width: 56px; height: 56px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 6px;
}
.role__logo img { width: 100%; height: 100%; object-fit: contain; }
.role__body { min-width: 0; }
.role__company {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink-800);
}
.role__title {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.role__tag {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--bone-200);
  color: var(--ink-700);
  border-radius: var(--radius-sm);
}
.role__period {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ---------- 13. PROJECTS / PORTFOLIO GRID ---------- */
/* Uniform card grid. Every project card is the same size, so adding or
   removing one can never collapse a card to a narrow track the way the
   old 6-column span system did. */
.projects {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 640px)  { .projects { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .projects { grid-template-columns: repeat(3, 1fr); } }
.project {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  min-height: 280px;
}
.project:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}
.project__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--bone-200);
  overflow: hidden;
  flex: none;
}

.project__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease);
}
.project:hover .project__media img { transform: scale(1.04); }
.project__media--padded {
  display: grid; place-items: center;
  padding: clamp(var(--space-3), 1.5vw, var(--space-5));
  background: var(--bone-50);
}
.project__media--padded img {
  width: auto; height: auto;
  /* Was max-height 80px / max-width 60%. Raising the cap and cutting the
     padding gives roughly 4x the rendered logo area inside the same card. */
  max-height: clamp(120px, 16vw, 190px);
  max-width: 86%;
  object-fit: contain;
}
.project__body {
  padding: clamp(var(--space-5), 2.5vw, var(--space-8));
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.project__category {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.project__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink-800);
}
.project__desc {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-muted);
}
.project__meta {
  margin-top: auto;
  padding-top: var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--text-faint);
  letter-spacing: 0.04em;
}
.project__arrow {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  transition: all var(--dur) var(--ease);
}
.project:hover .project__arrow {
  background: var(--ink-800);
  color: var(--bone-100);
  border-color: var(--ink-800);
  transform: rotate(-45deg);
}

/* Simple project card variant (no media block) — used on home page teaser */
.project--simple {
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  padding-right: clamp(72px, 8vw, 88px);
  min-height: 220px;
  gap: var(--space-3);
  justify-content: flex-start;
}
.project--simple .project__tag {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.project--simple .project__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink-800);
  margin-top: var(--space-2);
}
.project--simple .project__lede {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}
.project--simple .project__meta {
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.project__logo {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
  padding: 5px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px -4px rgba(11, 34, 64, 0.08);
  transition: transform var(--dur) var(--ease);
}
.project:hover .project__logo {
  transform: scale(1.06);
}

/* ---------- 14. CERTIFICATIONS ---------- */
.certs {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.cert {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cert:hover { border-color: var(--accent); transform: translateY(-2px); }
.cert__icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--bone-50);
  display: grid; place-items: center;
  overflow: hidden;
  padding: 4px;
}
.cert__icon img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cert__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-800);
  line-height: 1.2;
}
.cert__desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 0.125rem;
  line-height: 1.4;
}

/* ---------- 15. CONTACT / CTA ---------- */
.contact {
  text-align: center;
  padding-block: clamp(var(--space-16), 10vw, var(--space-32));
}
.contact__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-hero);
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-6);
}
.contact__title em { font-style: italic; color: var(--ember-300); }
.contact__lede {
  font-size: var(--text-lg);
  color: var(--bone-300);
  max-width: 48ch;
  margin: 0 auto var(--space-10);
  line-height: 1.55;
}
.contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* Divider between CTAs and form */
.contact__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin: clamp(var(--space-10), 6vw, var(--space-12)) auto var(--space-8);
  color: var(--bone-400);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  max-width: 480px;
}
.contact__divider::before,
.contact__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(248, 250, 252, 0.18);
}

/* Light form card on inverted bg */
.contact__form-card {
  background: #FFFFFF;
  border-radius: 20px;
  padding: clamp(var(--space-8), 5vw, var(--space-12));
  text-align: left;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
  color: var(--ink-900);
  max-width: 620px;
  margin: 0 auto;
}
.contact__form-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  font-weight: 500;
  color: var(--ink-900);
  margin: 0 0 var(--space-2);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.contact__form-lede {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 var(--space-6);
}
.contact__form-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.contact__form-note {
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin: var(--space-4) 0 0;
}

/* Contact section: PDF downloads block (inverted/dark bg) */
.contact__downloads {
  margin-top: var(--space-10);
  text-align: center;
}
.contact__downloads-label {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.62);
  margin: 0 0 var(--space-5);
}
.contact__downloads-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  max-width: 920px;
  margin: 0 auto;
}
@media (min-width: 720px) {
  .contact__downloads-grid { grid-template-columns: repeat(3, 1fr); }
}
.download-card--inverted {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
  color: #F8FAFC;
  text-align: left;
}
.download-card--inverted .download-card__icon {
  background: linear-gradient(135deg, rgba(59, 111, 163, 0.42), rgba(59, 111, 163, 0.18));
  color: #F8FAFC;
}
.download-card--inverted .download-card__title { color: #F8FAFC; }
.download-card--inverted .download-card__meta { color: rgba(248, 250, 252, 0.6); }
.download-card--inverted:hover,
.download-card--inverted:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--accent);
  box-shadow: 0 14px 36px -22px rgba(0, 0, 0, 0.6);
}
.download-card--inverted:hover .download-card__icon {
  background: var(--accent);
  color: #fff;
}

/* Footer: compact downloads row */
.footer__downloads {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
.footer__downloads-label {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
.footer__downloads-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}
.footer__download-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--ink-800);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 180ms ease, border-color 180ms ease;
}
.footer__download-link:hover,
.footer__download-link:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
  outline: none;
}
.footer__download-link svg {
  flex: 0 0 auto;
  color: var(--accent);
}

/* HubSpot form polish to match site design system */
.contact__form-card .hs-form-frame { color: var(--ink-900); }
.contact__form-card form { font-family: var(--font-body) !important; }
.contact__form-card label,
.contact__form-card .hs-form-field > label {
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em;
  color: var(--ink-800) !important;
  margin-bottom: 6px !important;
  display: block;
}
.contact__form-card input[type="text"],
.contact__form-card input[type="email"],
.contact__form-card input[type="tel"],
.contact__form-card input[type="number"],
.contact__form-card input[type="url"],
.contact__form-card select,
.contact__form-card textarea {
  width: 100% !important;
  padding: 0.75rem 0.875rem !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  color: var(--ink-900) !important;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  box-sizing: border-box;
}
.contact__form-card input:focus,
.contact__form-card select:focus,
.contact__form-card textarea:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(59, 111, 163, 0.18) !important;
}
.contact__form-card textarea { min-height: 120px !important; resize: vertical; }
.contact__form-card .hs-form-field { margin-bottom: var(--space-4) !important; }
.contact__form-card .hs-error-msgs,
.contact__form-card .hs-error-msg {
  color: #b91c1c !important;
  font-size: var(--text-xs) !important;
  margin-top: 4px !important;
  list-style: none;
  padding-left: 0;
}
.contact__form-card .hs-submit { margin-top: var(--space-4); }
.contact__form-card .hs-button,
.contact__form-card input[type="submit"] {
  background: var(--ink-900) !important;
  color: #fff !important;
  border: 1px solid var(--ink-900) !important;
  padding: 0.85rem 1.5rem !important;
  border-radius: 999px !important;
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.contact__form-card .hs-button:hover,
.contact__form-card input[type="submit"]:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -12px rgba(11, 34, 64, 0.5);
}
.contact__form-card .legal-consent-container,
.contact__form-card .hs-richtext {
  font-size: var(--text-xs) !important;
  color: var(--text-muted) !important;
  line-height: 1.5 !important;
}
.contact__form-card .legal-consent-container a,
.contact__form-card .hs-richtext a { color: var(--accent) !important; text-decoration: underline; }
.contact__form-card .submitted-message {
  font-size: var(--text-base) !important;
  color: var(--ink-900) !important;
  padding: var(--space-4) 0;
}

/* ---------- 16. FOOTER ---------- */
.footer {
  background: var(--bg-alt);
  padding-block: clamp(var(--space-12), 6vw, var(--space-16));
  border-top: 1px solid var(--border);
}
.footer__top {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: 1fr;
  align-items: start;
  margin-bottom: var(--space-10);
}
@media (min-width: 768px) {
  .footer__top {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-16);
    align-items: center;
  }
}
.footer__lockup {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.footer__tag {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 44ch;
}
.footer .divider { margin-block: var(--space-8); }

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.social {
  --social-color: var(--ink-800);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--ink-800);
  transition: all var(--dur-fast) var(--ease);
}
.social svg { color: var(--social-color); transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.social:hover {
  background: var(--social-color);
  border-color: var(--social-color);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(11,34,64,0.12);
}
.social:hover svg { color: #fff; }
.social--gradient:hover {
  background: var(--social-gradient, var(--social-color));
  border-color: transparent;
  color: #fff;
}

/* Brand colors */
.social--linkedin  { --social-color: #0A66C2; }
.social--x         { --social-color: #000000; }
.social--facebook  { --social-color: #1877F2; }
.social--instagram {
  --social-color: #E1306C;
  --social-gradient: linear-gradient(135deg, #FEDA75 0%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 100%);
}
.social--forbes    { --social-color: #000000; }

/* Image-based social icons (e.g. Forbes F mark) */
.social__img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
  transition: filter var(--dur-fast) var(--ease);
}
.social:hover .social__img {
  filter: brightness(0) invert(1);
}

/* Icon-only variant (used in nav) */
.social--icon {
  padding: 0;
  width: 36px;
  height: 36px;
  justify-content: center;
  gap: 0;
}
.social--icon .social__img { width: 16px; height: 16px; }

/* Nav socials row (second row of header) */
.nav__social-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-5);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  border-top: 1px solid var(--border);
}
.nav__social-row .nav__cta {
  padding: 8px 18px;
  font-size: var(--text-sm);
}
.socials--nav {
  gap: 6px;
}
@media (max-width: 600px) {
  .nav__social-row {
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
  }
}

/* XL orbit logo for footer (2x) */
.orbit-logo--xl {
  width: 96px;
  height: 96px;
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}
.footer__links a:hover { color: var(--text); }

/* ---------- 17. ANIMATIONS ---------- */
/* Only hide if JS has marked the page ready — otherwise content remains visible */
@media (prefers-reduced-motion: no-preference) {
  .js-ready .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
  .js-ready .fade-up.is-visible { opacity: 1; transform: none; }
}

/* ---------- 18. RESPONSIVE FINETUNING ---------- */
@media (max-width: 600px) {
  .hero__stats { grid-template-columns: 1fr; gap: var(--space-5); }
  .hero__stats .stat { padding-bottom: var(--space-5); border-bottom: 1px solid var(--border); }
  .hero__stats .stat:last-child { border-bottom: 0; padding-bottom: 0; }
  .role { grid-template-columns: 56px 1fr; }
  .role__period { grid-column: 2; font-size: 0.7rem; }
}

/* ---------- MOBILE NAV TOGGLE ---------- */
.nav__toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 10px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  margin-left: auto;
}
.nav__toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink-900, #0B2240);
  border-radius: 1px;
  transition: transform 220ms ease, opacity 180ms ease;
  transform-origin: center;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {
  .nav__toggle { display: flex; }
  .nav__inner { flex-wrap: wrap; }
  /* Translucent dropdown panel — page content stays visible behind it */
  .nav__links {
    display: none;
    flex-direction: column;
    flex-basis: 100%;
    gap: 0;
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-3);
    background: rgba(248, 250, 252, 0.62);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border: 1px solid rgba(11, 34, 64, 0.10);
    border-radius: 16px;
    box-shadow: 0 18px 50px -16px rgba(6, 20, 39, 0.22);
  }
  .nav__links.is-open { display: flex; }
  .nav__links a {
    padding: var(--space-3) var(--space-2);
    font-size: 1rem;
    border-bottom: 1px solid rgba(11, 34, 64, 0.08);
    border-radius: 0;
  }
  .nav__links a:last-child { border-bottom: 0; }
  /* When menu is open, lift the nav header background so the page peeks through */
  .nav:has(.nav__links.is-open) {
    background: rgba(248, 250, 252, 0.55);
  }
}

/* ---------- FAQ SECTION ---------- */
.faq__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
}
.faq__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0;
}
.faq__title em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  color: var(--accent);
}
.faq__lede {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-muted);
  margin: 0;
}
.faq__list {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.faq__item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--space-5) var(--space-6);
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.faq__item[open] {
  border-color: var(--accent);
  box-shadow: 0 18px 40px -28px rgba(11, 34, 64, 0.35);
}
.faq__q {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink-900);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  line-height: 1.4;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--accent);
  flex: 0 0 auto;
  line-height: 1;
  transition: transform 200ms ease;
}
.faq__item[open] .faq__q::after {
  content: "\2013";  /* en dash */
  transform: rotate(0deg);
}
.faq__a {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--ink-800);
}
.faq__a p { margin: 0; }
.faq__a a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.faq__a a:hover { color: var(--ink-900); }

@media (max-width: 600px) {
  .faq__item { padding: var(--space-4) var(--space-5); }
  .faq__q { font-size: var(--text-base); }
}

/* ---------- HOME TEASER SECTION CTAs ---------- */
.section__cta {
  margin-top: var(--space-8);
  text-align: center;
}

/* ---------- BRAND LOCKUP TAGLINE (header) ---------- */
.brand__lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1;
}
.brand__tag {
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-muted, #5A6A82);
  margin-top: -4px;
  padding-left: 2px;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .brand__tag { font-size: 0.66rem; }
}
@media (max-width: 480px) {
  .brand__tag {
    font-size: 0.6rem;
    white-space: normal;
    line-height: 1.25;
    max-width: 160px;
  }
}

/* Footer tag — italic Fraunces feel via emphasis */
.footer__tag em {
  font-family: var(--font-display, Fraunces, Georgia, serif);
  font-style: italic;
  font-weight: 500;
  color: var(--ink-900, #0B2240);
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

/* =====================================================================
   Select Recommendations (work/index.html #recommendations)
   ===================================================================== */

/* Hero quote — large editorial pull-quote at the top of the section */
.recs__hero {
  max-width: 72ch;
  margin: var(--space-12) auto var(--space-14);
  text-align: center;
  position: relative;
}
.recs__hero::before {
  content: "\201C";
  position: absolute;
  top: -56px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Fraunces", serif;
  font-size: 9rem;
  line-height: 1;
  color: var(--ember-500);
  opacity: 0.16;
  pointer-events: none;
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.recs__hero-quote {
  font-family: "Fraunces", serif;
  font-size: clamp(1.5rem, 2.4vw, 2.05rem);
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  font-weight: 400;
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  margin: 0 0 var(--space-6);
}
.recs__hero-quote p { margin: 0; }
.recs__hero-cite {
  font-family: "Inter", system-ui, sans-serif;
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
}
.recs__hero-cite strong {
  color: var(--ink-900);
  font-weight: 600;
  font-size: 1rem;
}

/* 6-card grid of recommendations */
.recs__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-14);
}
@media (max-width: 960px) {
  .recs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .recs__grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

.rec-card {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--ember-500);
  border-radius: 8px;
  padding: var(--space-6) var(--space-6) var(--space-5);
  margin: 0;
  display: grid;
  grid-template-columns: 64px 1fr;
  grid-template-areas:
    "quote quote"
    "logo  cite";
  align-items: start;
  column-gap: var(--space-4);
  row-gap: var(--space-5);
  position: relative;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.rec-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px -16px rgba(11, 34, 64, 0.18);
  border-color: var(--ember-500);
}
.rec-card__logo {
  grid-area: logo;
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
  padding: 6px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px -4px rgba(11, 34, 64, 0.08);
  transition: transform var(--dur) var(--ease);
  align-self: center;
}
.rec-card:hover .rec-card__logo {
  transform: scale(1.06);
}
/* For logos that have a dark/colored background (like AWS navy), keep the actual logo edge */
.rec-card__logo--dark {
  padding: 0;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.rec-card__quote {
  grid-area: quote;
  margin: 0;
  font-family: "Fraunces", serif;
  font-size: 1.04rem;
  line-height: 1.55;
  color: var(--ink-900);
  font-weight: 400;
  letter-spacing: -0.005em;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.rec-card__quote p { margin: 0; }
.rec-card__quote p::before {
  content: "\201C";
  margin-right: 0.05em;
}
.rec-card__quote p::after {
  content: "\201D";
  margin-left: 0.02em;
}
.rec-card__cite {
  grid-area: cite;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: "Inter", system-ui, sans-serif;
  font-style: normal;
  align-self: center;
  min-width: 0;
}
.rec-card__cite strong {
  color: var(--ink-900);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.rec-card__cite span {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}
.rec-card__org {
  margin-top: 4px;
  display: inline-block;
  width: max-content;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(59, 111, 163, 0.08);
  color: var(--ember-500) !important;
  font-size: 0.7rem !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Closing pull-quote on tinted band */
.recs__pull {
  background: linear-gradient(135deg, rgba(59, 111, 163, 0.06), rgba(11, 34, 64, 0.03));
  border-radius: 12px;
  padding: var(--space-10) var(--space-8);
  margin: 0 auto var(--space-12);
  max-width: 80ch;
  text-align: center;
  border-left: 4px solid var(--ember-500);
}
.recs__pull-quote {
  font-family: "Fraunces", serif;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.4;
  color: var(--ink-900);
  font-weight: 400;
  font-style: italic;
  margin: 0 0 var(--space-5);
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.recs__pull-quote p { margin: 0; }
.recs__pull-cite {
  font-family: "Inter", system-ui, sans-serif;
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.recs__pull-cite strong {
  color: var(--ink-900);
  font-size: 0.95rem;
  font-weight: 600;
}

/* Reach stats + CTA */
.recs__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}
.recs__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-6);
  width: 100%;
  max-width: 920px;
  text-align: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--space-7) var(--space-2);
}
.recs__stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.recs__stats strong {
  font-family: "Fraunces", serif;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1;
  color: var(--ember-500);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.recs__stats span {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}
@media (max-width: 720px) {
  .recs__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    padding: var(--space-6) var(--space-2);
  }
  .recs__stats li:last-child { grid-column: span 2; }
}

/* CTA pair under the stats: LinkedIn (primary) + PDF (ghost) */
.recs__cta-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}
.btn--linkedin {
  background: #0A66C2;
  color: #fff;
  border-color: #0A66C2;
}
.btn--linkedin:hover {
  background: #084d92;
  border-color: #084d92;
  color: #fff;
  transform: translateY(-1px);
}
.btn--linkedin svg {
  flex-shrink: 0;
}

/* Direct profile link beneath the CTA group */
.recs__profile-link {
  text-align: center;
  margin: var(--space-6) 0 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.recs__profile-link a {
  color: var(--ember-500);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(59, 111, 163, 0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.recs__profile-link a:hover {
  color: var(--ink-800);
  text-decoration-color: var(--ink-800);
}

/* ============================================================
   NAV — Magnetic pill + Mega-dropdown panels (desktop only)
   ============================================================ */
.nav__links { position: relative; align-items: center; }

/* Magnetic pill — capsule that slides under hovered/active link */
.nav__pill {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 36px;
  transform: translateY(-50%);
  background: linear-gradient(180deg, rgba(59,111,163,0.14), rgba(59,111,163,0.08));
  border: 1px solid rgba(59,111,163,0.22);
  border-radius: 999px;
  box-shadow: 0 6px 18px -8px rgba(59,111,163,0.45), inset 0 1px 0 rgba(255,255,255,0.6);
  opacity: 0;
  pointer-events: none;
  transition:
    left   360ms cubic-bezier(0.34, 1.56, 0.64, 1),
    width  360ms cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 200ms ease;
  z-index: 0;
}
.nav__pill.is-ready { opacity: 1; }

/* Links sit above the pill */
.nav__links a,
.nav__link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--text-muted);
  font-weight: 500;
  transition: color 200ms ease;
}
.nav__links a:hover,
.nav__link:hover { color: var(--ink-800); }

/* Override the legacy underline (pill replaces it) */
.nav__links a::after { content: none !important; }
.nav__links a[aria-current="page"] {
  color: var(--ink-800);
  text-decoration: none;
  font-weight: 600;
}

/* Chevron */
.nav__chev {
  transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 0.7;
}
.nav__item.is-open .nav__chev { transform: rotate(180deg); opacity: 1; }
.nav__item.is-open .nav__link--has-panel { color: var(--ink-800); }

/* Item wrapper for dropdowns */
.nav__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 1;
}

/* Mega-dropdown panel */
.nav__panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, -8px) scale(0.97);
  min-width: 320px;
  max-width: 92vw;
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 18px 50px -12px rgba(6, 20, 39, 0.22),
    0 8px 24px -8px rgba(6, 20, 39, 0.14);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: top center;
  transition:
    opacity 220ms ease,
    transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
    visibility 0s linear 220ms;
  z-index: 60;
}
.nav__item.is-open .nav__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
  transition:
    opacity 220ms ease,
    transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
    visibility 0s linear 0s;
}
.nav__panel::before {
  /* invisible hover bridge so the cursor can travel from link to panel */
  content: "";
  position: absolute;
  left: 0; right: 0; top: -14px;
  height: 14px;
}
.nav__panel--wide { min-width: 460px; }

/* Panel items */
.nav__panel-item {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px !important;
  border-radius: 12px;
  color: var(--ink-800) !important;
  font-weight: 500;
  text-decoration: none;
  transition: background 180ms ease, transform 180ms ease;
}
.nav__panel-item + .nav__panel-item { margin-top: 2px; }
.nav__panel-item:hover {
  background: rgba(59, 111, 163, 0.08);
}
.nav__panel-item:hover .nav__panel-icon { transform: translateX(2px) scale(1.05); }
.nav__panel-icon {
  flex: none;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(59,111,163,0.14), rgba(59,111,163,0.07));
  border: 1px solid rgba(59,111,163,0.2);
  border-radius: 10px;
  color: var(--ember-500, #3B6FA3);
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav__panel-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav__panel-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-800);
  line-height: 1.25;
}
.nav__panel-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.35;
}

/* CTA variant inside panels */
.nav__panel-item--cta {
  background: var(--ink-800, #0B2240);
  color: #fff !important;
  margin-top: 8px;
}
.nav__panel-item--cta:hover { background: #061427; }
.nav__panel-item--cta .nav__panel-title,
.nav__panel-item--cta .nav__panel-desc { color: #fff; }
.nav__panel-item--cta .nav__panel-desc { opacity: 0.78; }
.nav__panel-item--cta .nav__panel-icon {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.22);
  color: #fff;
}

/* Stats row in Recommendations panel */
.nav__panel-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 14px 8px;
  margin: 4px 0 10px;
  background: linear-gradient(180deg, rgba(59,111,163,0.06), rgba(59,111,163,0.02));
  border: 1px solid rgba(59,111,163,0.14);
  border-radius: 12px;
}
.nav__panel-stats > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  padding: 0 4px;
}
.nav__panel-stats > div + div {
  border-left: 1px solid rgba(59,111,163,0.14);
}
.nav__panel-stats strong {
  display: block;
  font-family: var(--font-display, "Fraunces", serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink-800);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.nav__panel-stats span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

/* Quote block in Recommendations panel */
.nav__panel-quote {
  display: grid !important;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  margin: 0 4px 10px;
  padding: 12px 14px !important;
  border: 1px solid rgba(59,111,163,0.14);
  border-left: 3px solid var(--ember-500, #3B6FA3);
  background: rgba(59,111,163,0.04);
  border-radius: 0 10px 10px 0;
  text-decoration: none;
  transition: background 180ms ease, transform 180ms ease;
}
.nav__panel-quote:hover { background: rgba(59,111,163,0.08); }
.nav__panel-quote p {
  margin: 0;
  font-family: var(--font-display, "Fraunces", serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-800);
}
.nav__panel-cite {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
  line-height: 1.35;
  min-width: 110px;
}
.nav__panel-cite strong {
  display: block;
  color: var(--ink-800);
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 2px;
}

/* Reduced motion: keep things accessible & instant */
@media (prefers-reduced-motion: reduce) {
  .nav__pill {
    transition: opacity 120ms ease;
  }
  .nav__panel {
    transition: opacity 140ms ease, visibility 0s linear 140ms;
    transform: translate(-50%, 0) scale(1);
  }
  .nav__item.is-open .nav__panel {
    transition: opacity 140ms ease, visibility 0s linear 0s;
    transform: translate(-50%, 0) scale(1);
  }
  .nav__chev { transition: none; }
}

/* ============================================================
   Mobile: compact accordion for dropdowns (works inside the
   existing hamburger menu). Each nav__item becomes a stacked
   block, top link is the header, panel expands inline when open.
   ============================================================ */
@media (max-width: 900px) {
  .nav__pill { display: none; }

  /* Item becomes a full-width block */
  .nav__item {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    align-items: stretch;
  }

  /* Top-level link inside dropdown item */
  .nav__link--has-panel {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0 !important;
    width: 100%;
  }

  /* Chevron stays visible + rotates when open */
  .nav__chev {
    display: inline-block !important;
    width: 12px;
    height: 12px;
    opacity: 0.7;
  }

  /* Panel: visible inline, compact, no absolute positioning */
  .nav__panel {
    display: none;
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    width: 100%;
    margin: 6px 0 4px;
    padding: 6px 8px !important;
    background: rgba(59, 111, 163, 0.04);
    border: 1px solid rgba(59, 111, 163, 0.14);
    border-radius: 12px;
    box-shadow: none;
  }
  .nav__panel::before { display: none; }
  .nav__item.is-open > .nav__panel { display: block; }

  /* Compact panel items on mobile */
  .nav__panel-item {
    padding: 8px 10px !important;
    gap: 10px !important;
    align-items: center !important;
    border-radius: 8px;
  }
  .nav__panel-item + .nav__panel-item { margin-top: 1px; }
  .nav__panel-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 7px;
  }
  .nav__panel-icon svg { width: 14px; height: 14px; }
  .nav__panel-title { font-size: 13.5px; }
  .nav__panel-desc {
    /* Hide descriptions on mobile — too dense */
    display: none;
  }

  /* Stats block (Recommendations dropdown) — compact 4-col */
  .nav__panel-stats {
    padding: 8px 4px;
    margin: 2px 0 6px;
    gap: 4px;
  }
  .nav__panel-stats strong { font-size: 18px; }
  .nav__panel-stats span { font-size: 9px; }

  /* Quote block (Recommendations) — compact */
  .nav__panel-quote {
    padding: 8px 10px !important;
    font-size: 12px;
    margin-bottom: 4px;
  }
  .nav__panel-quote p { font-size: 12px; }

  /* CTA variant inside panels — compact on mobile */
  .nav__panel-item--cta {
    margin-top: 4px;
  }

  /* Plain nav links */
  .nav__links a:not(.nav__panel-item):not(.nav__link--has-panel),
  .nav__links > a.nav__link {
    padding: 4px 0;
    border-radius: 0;
  }
}

/* ---------- Contact page: oversized centered social bar ---------- */
.socials--contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 3vw, 28px);
  margin: clamp(28px, 5vw, 44px) auto clamp(8px, 3vw, 24px);
  padding: 0;
  list-style: none;
}
.socials--contact .social.social.social {
  width: clamp(96px, 10vw, 120px) !important;
  height: clamp(96px, 10vw, 120px) !important;
  padding: 0 !important;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  text-decoration: none;
  transition:
    transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
    background 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
  box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.6);
}
.socials--contact .social:hover,
.socials--contact .social:focus-visible {
  transform: translateY(-4px) scale(1.04);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.65);
  outline: none;
}
.socials--contact .social svg {
  width: clamp(44px, 4.6vw, 56px) !important;
  height: clamp(44px, 4.6vw, 56px) !important;
  display: block;
  color: #fff !important; /* white at rest — brand color appears on hover via bg */
  transition: color 220ms ease;
}
.socials--contact .social:hover svg { color: #fff !important; }
.socials--contact .social__img {
  width: clamp(44px, 4.6vw, 56px) !important;
  height: clamp(44px, 4.6vw, 56px) !important;
  display: block;
  object-fit: contain;
  /* Forbes icon is dark on a dark surface — invert to white */
  filter: brightness(0) invert(1);
  transition: filter 220ms ease;
}
.socials--contact .social--forbes:hover .social__img {
  filter: none;
}

/* Brand-tinted hover for each icon */
.socials--contact .social--linkedin:hover { background: #0A66C2; border-color: #0A66C2; }
.socials--contact .social--instagram:hover { background: #E1306C; border-color: #E1306C; }
.socials--contact .social--x:hover        { background: #000;     border-color: #000; }
.socials--contact .social--facebook:hover { background: #1877F2; border-color: #1877F2; }
.socials--contact .social--forbes:hover   { background: #fff;     border-color: #fff; }

@media (max-width: 540px) {
  .socials--contact { gap: 14px; }
  .socials--contact .social.social.social { width: 76px !important; height: 76px !important; }
  .socials--contact .social svg,
  .socials--contact .social__img { width: 34px !important; height: 34px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .socials--contact .social { transition: background 160ms ease, border-color 160ms ease; }
  .socials--contact .social:hover { transform: none; }
}

/* ============================================================
   NEWS PAGE & HOME PREVIEW
   ============================================================ */

/* Lane heads (Forbes / LinkedIn / Speaking sections on /news/) */
.news-header {
  align-items: flex-start;
}
.news-lane__head {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "badge title"
    "desc  desc";
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-6);
}
@media (max-width: 720px) {
  .news-lane__head {
    grid-template-columns: 1fr;
    grid-template-areas:
      "badge"
      "title"
      "desc";
    gap: var(--space-3);
  }
}
.news-lane__badge {
  grid-area: badge;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ink-800, #0B2240);
  white-space: nowrap;
}
.news-lane__badge--forbes    { background: #0B2240; }
.news-lane__badge--linkedin  { background: #0A66C2; }
.news-lane__badge--speaking  { background: #3B6FA3; }
.news-lane__badge--social    { background: linear-gradient(135deg, #833AB4 0%, #E1306C 50%, #F77737 100%); }
.news-lane__badge--articles  { background: var(--ink-600); }
.news-lane__badge--substack  { background: #FF6719; }
.news-lane__badge--press     { background: #061427; }
.news-lane__badge--podcasts  { background: linear-gradient(135deg, #3B6FA3 0%, #A84B2F 100%); }

/* Sub-heading within a lane (e.g., Forbes bylines / contributions) */
.news-lane__subhead {
  margin: 0 0 var(--space-4, 1rem);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted, #475569);
}
.section--alt .news-lane__subhead { color: rgba(255,255,255,0.72); }
.news-lane__title {
  grid-area: title;
  margin: 0;
  font-family: Fraunces, serif;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink-900, #061427);
}
.news-lane__title em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  color: var(--ember-500, #3B6FA3);
}
.news-lane__desc {
  grid-area: desc;
  margin: 0;
  color: var(--text-muted, #475569);
  font-size: 1rem;
  max-width: 60ch;
}
.news-lane__desc a {
  color: #0A66C2;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Grid for news cards */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5, 1.25rem);
  margin-bottom: var(--space-6);
}
@media (max-width: 980px) {
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .news-grid { grid-template-columns: 1fr; }
}
.news-grid--preview {
  /* home page preview keeps 3-col on desktop, stacks earlier on mobile */
}

/* Card shell */
.news-card {
  background: #fff;
  border: 1px solid rgba(11, 34, 64, 0.08);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 280ms ease,
              border-color 280ms ease;
  position: relative;
}
.news-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--ink-700, #0B2240);
  opacity: 0;
  transition: opacity 240ms ease;
}
.news-card--forbes::before   { background: linear-gradient(90deg, #0B2240, #3B6FA3); }
.news-card--linkedin::before { background: linear-gradient(90deg, #0A66C2, #4d9be6); }
.news-card--video::before    { background: linear-gradient(90deg, #3B6FA3, #061427); }
.news-card--social::before   { background: linear-gradient(90deg, #833AB4, #E1306C, #F77737); }
.news-card--articles::before { background: linear-gradient(90deg, var(--ink-600), var(--ember-300)); }
.news-card--substack::before { background: linear-gradient(90deg, #FF6719, #FFB27A); }
.news-card--press::before    { background: linear-gradient(90deg, #061427, #3B6FA3); }
.news-card--podcasts::before { background: linear-gradient(90deg, #3B6FA3, #A84B2F); }
.news-card:hover,
.news-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -22px rgba(6, 20, 39, 0.28);
  border-color: rgba(11, 34, 64, 0.18);
}
.news-card:hover::before,
.news-card:focus-within::before {
  opacity: 1;
}

.news-card__link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 22px 24px;
  color: var(--ink-900, #061427);
  text-decoration: none;
  height: 100%;
}
.news-card__link:focus-visible {
  outline: 2px solid var(--ember-500, #3B6FA3);
  outline-offset: 3px;
  border-radius: 14px;
}

/* Card thumb (video) */
.news-card__thumb {
  position: relative;
  margin: -22px -22px 6px;
  aspect-ratio: 16 / 9;
  background: #0B2240;
  overflow: hidden;
}
.news-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 480ms ease;
}
.news-card:hover .news-card__thumb img {
  transform: scale(1.03);
}
.news-card__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: #0B2240;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5);
  transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.news-card:hover .news-card__play {
  transform: translate(-50%, -50%) scale(1.08);
}

/* Meta row */
.news-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #475569);
}
.news-card__source,
.news-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(11, 34, 64, 0.06);
  color: var(--ink-800, #0B2240);
  font-weight: 600;
}
.news-card__source--forbes   { color: #0B2240; }
.news-card__source--linkedin { color: #0A66C2; background: rgba(10, 102, 194, 0.10); }
.news-card__source--video    { color: #3B6FA3; background: rgba(59, 111, 163, 0.10); }
.news-card__date {
  font-variant-numeric: tabular-nums;
}

/* Title / excerpt / quote */
.news-card__title {
  font-family: Fraunces, serif;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.25;
  margin: 6px 0 0;
  color: var(--ink-900, #061427);
}
.news-card__excerpt {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text, #1f2937);
  margin: 0;
}
.news-card__quote {
  font-family: Fraunces, serif;
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.4;
  color: var(--ink-900, #061427);
  margin: 8px 0 0;
  position: relative;
  padding-left: 14px;
}
.news-card__quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 2px;
  background: #0A66C2;
}
.news-card__context {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-muted, #475569);
  margin-top: 2px;
}
.news-card__context strong {
  color: var(--ink-800, #0B2240);
  font-weight: 600;
}

/* CTA at bottom of card */
.news-card__cta {
  margin-top: auto;
  padding-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ember-500, #3B6FA3);
  transition: gap 200ms ease, color 200ms ease;
}
.news-card:hover .news-card__cta {
  gap: 10px;
  color: var(--ink-900, #061427);
}
.news-card--linkedin .news-card__cta { color: #0A66C2; }
.news-card--linkedin:hover .news-card__cta { color: #084d92; }

/* Final CTA card at bottom of /news/ */
.cta-card {
  background: linear-gradient(135deg, #0B2240 0%, #061427 100%);
  color: #fff;
  border-radius: 18px;
  padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 56px);
  text-align: center;
}
.cta-card__title {
  font-family: Fraunces, serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 12px;
  color: #fff;
}
.cta-card__title em {
  font-style: italic;
  color: #9bc4f0;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
}
.cta-card__lede {
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 24px;
  font-size: 1.05rem;
}
.cta-card__cta {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .news-card,
  .news-card__thumb img,
  .news-card__play,
  .news-card__cta { transition: none; }
  .news-card:hover { transform: none; }
}

/* ============================================================
   NAV — tighter spacing to fit 8 items on desktop
   ============================================================ */
@media (min-width: 901px) {
  .nav__links { gap: 4px; font-size: 0.9rem; }
  .nav__links a,
  .nav__link { padding: 7px 10px; gap: 3px; }
  .brand__mark { width: 72px; height: 72px; }
  .brand__word { width: 180px; height: 56px; }
  .brand__tag { display: none; }
  .nav__chev { width: 8px; height: 8px; }
}
@media (min-width: 1180px) {
  .nav__links { gap: 10px; font-size: 0.94rem; }
  .nav__links a,
  .nav__link { padding: 8px 12px; }
  .brand__mark { width: 96px; height: 96px; }
  .brand__word { width: 220px; height: 64px; }
  .brand__tag { display: inline; }
}
@media (min-width: 1380px) {
  .nav__links { gap: clamp(14px, 1.6vw, 28px); font-size: 0.96rem; }
  .brand__mark { width: 116px; height: 116px; }
  .brand__word { width: 280px; height: 76px; }
}

/* News card — X / Twitter variant */
.news-card--twitter::before { background: linear-gradient(90deg, #0f172a, #475569); }
.news-card--twitter .news-card__quote::before { background: #0f172a; }
.news-card--twitter .news-card__cta { color: #0f172a; }
.news-card--twitter:hover .news-card__cta { color: #1e293b; }
.news-lane__badge--twitter { background: #0f172a; }
.news-card__source--twitter { color: #0f172a; background: rgba(15, 23, 42, 0.08); }

/* ==================================================================
   News lane dividers — visual separation between swim lanes
   ================================================================== */
.lane-divider {
  --lane-divider-color: rgba(11, 34, 64, 0.14);
  --lane-divider-ink: #0B2240;
  position: relative;
  padding: clamp(28px, 5vw, 56px) 0;
  background: transparent;
}
.lane-divider__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
  display: flex;
  align-items: center;
  gap: 20px;
}
.lane-divider__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--lane-divider-color) 20%,
    var(--lane-divider-color) 80%,
    transparent 100%);
}
.lane-divider__mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--lane-divider-color);
  background: rgba(255, 255, 255, 0.85);
  color: var(--lane-divider-ink);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lane-divider__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  flex-shrink: 0;
}

/* When the previous or next section is alt (dark), invert */
.section--alt + .lane-divider,
.lane-divider + .section--alt {
  --lane-divider-color: rgba(255, 255, 255, 0.18);
  --lane-divider-ink: #ffffff;
}
.section--alt + .lane-divider .lane-divider__mark,
.lane-divider + .section--alt ~ .lane-divider .lane-divider__mark {
  background: rgba(6, 20, 39, 0.55);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.18);
}

/* Reduce top padding on the section that immediately follows a divider */
.lane-divider + .section { padding-top: clamp(16px, 3vw, 32px); }

@media (max-width: 620px) {
  .lane-divider__mark {
    font-size: 0.62rem;
    padding: 5px 12px;
    letter-spacing: 0.12em;
  }
}

/* ==================================================================
   News page: per-lane distinct section backgrounds using light
   Google-brand-inspired pastels. Overrides section--alt striping so
   each lane reads as its own themed band.
   ================================================================== */

/* Base: force sections to use their tinted background even when marked --alt */
#linkedin.section,
#articles.section,
#forbes.section,
#press.section,
#podcasts.section,
#leadership-feed.section,
#speaking.section {
  background: transparent;
  color: var(--ink-800);
  position: relative;
}

/* LinkedIn — Google Blue tint */
#linkedin.section {
  background: linear-gradient(180deg, #E8F0FE 0%, #F4F8FE 100%);
}

/* Articles / Substack — Google Yellow / warm cream tint */
#articles.section {
  background: linear-gradient(180deg, #FEF7E0 0%, #FEFBF0 100%);
}

/* Forbes Councils — soft slate / cool grey tint */
#forbes.section {
  background: linear-gradient(180deg, #E8EAED 0%, #F1F3F4 100%);
}

/* Press & Media — Google Red / soft coral tint */
#press.section {
  background: linear-gradient(180deg, #FCE8E6 0%, #FDF2F1 100%);
}

/* Podcasts & Radio — lavender / Google Purple tint */
#podcasts.section {
  background: linear-gradient(180deg, #F3E8FD 0%, #F9F2FD 100%);
}

/* Sales & Technical Leadership — Google Green tint */
#leadership-feed.section {
  background: linear-gradient(180deg, #E6F4EA 0%, #F1F8F3 100%);
}

/* Speaking & Video — teal / cyan tint */
#speaking.section {
  background: linear-gradient(180deg, #E0F7FA 0%, #F0FBFC 100%);
}

/* Cards on themed sections — use white surface so tinted lane shows through */
#linkedin .news-card,
#articles .news-card,
#forbes .news-card,
#press .news-card,
#podcasts .news-card,
#leadership-feed .news-card,
#speaking .news-card {
  background: #ffffff;
}

/* Section titles/text: force dark text on themed backgrounds even if the section was "--alt" */
#linkedin .section-heading__eyebrow,
#articles .section-heading__eyebrow,
#forbes .section-heading__eyebrow,
#press .section-heading__eyebrow,
#podcasts .section-heading__eyebrow,
#leadership-feed .section-heading__eyebrow,
#speaking .section-heading__eyebrow {
  color: var(--text-muted);
}
#linkedin h2, #articles h2, #forbes h2, #press h2,
#podcasts h2, #leadership-feed h2, #speaking h2,
#linkedin p, #articles p, #forbes p, #press p,
#podcasts p, #leadership-feed p, #speaking p {
  color: inherit;
}

/* Lane divider between themed sections — make it neutral so it reads on any lane */
#linkedin + .lane-divider .lane-divider__rule,
#articles + .lane-divider .lane-divider__rule,
#forbes + .lane-divider .lane-divider__rule,
#press + .lane-divider .lane-divider__rule,
#podcasts + .lane-divider .lane-divider__rule,
#leadership-feed + .lane-divider .lane-divider__rule,
#speaking + .lane-divider .lane-divider__rule {
  background: rgba(11, 34, 64, 0.14);
}

/* ==================================================================
   Per-lane card tinting (legacy, kept subtle on top of section bg)
   ================================================================== */

/* LinkedIn — soft LinkedIn blue */
.news-card--linkedin {
  background: linear-gradient(180deg, rgba(10, 102, 194, 0.04) 0%, rgba(10, 102, 194, 0.01) 100%);
  border-color: rgba(10, 102, 194, 0.18);
}
.news-card--linkedin:hover {
  border-color: rgba(10, 102, 194, 0.45);
  box-shadow: 0 12px 32px -14px rgba(10, 102, 194, 0.25);
}

/* Articles / Substack — warm terracotta */
.news-card--substack {
  background: linear-gradient(180deg, rgba(255, 103, 25, 0.05) 0%, rgba(255, 103, 25, 0.01) 100%);
  border-color: rgba(255, 103, 25, 0.22);
}
.news-card--substack:hover {
  border-color: rgba(255, 103, 25, 0.5);
  box-shadow: 0 12px 32px -14px rgba(255, 103, 25, 0.28);
}
.news-card--substack .news-card__cta { color: #FF6719; }
.news-card--substack:hover .news-card__cta { color: #d84f0e; }
.news-card--articles {
  background: linear-gradient(180deg, rgba(31, 63, 109, 0.05) 0%, rgba(31, 63, 109, 0.01) 100%);
  border-color: rgba(31, 63, 109, 0.22);
}
.news-card--articles:hover {
  border-color: rgba(31, 63, 109, 0.5);
  box-shadow: 0 12px 32px -14px rgba(31, 63, 109, 0.28);
}
.news-card--articles .news-card__cta { color: var(--ink-600); }
.news-card--articles:hover .news-card__cta { color: var(--ink-800); }

/* Forbes — Forbes navy */
.news-card--forbes {
  background: linear-gradient(180deg, rgba(11, 34, 64, 0.04) 0%, rgba(11, 34, 64, 0.01) 100%);
  border-color: rgba(11, 34, 64, 0.22);
}
.news-card--forbes:hover {
  border-color: rgba(11, 34, 64, 0.5);
  box-shadow: 0 12px 32px -14px rgba(11, 34, 64, 0.3);
}
.news-card--forbes .news-card__cta { color: #0B2240; }
.news-card--forbes:hover .news-card__cta { color: #061427; }

/* Press & Media — deep slate */
.news-card--press {
  background: linear-gradient(180deg, rgba(6, 20, 39, 0.045) 0%, rgba(6, 20, 39, 0.01) 100%);
  border-color: rgba(6, 20, 39, 0.22);
}
.news-card--press:hover {
  border-color: rgba(6, 20, 39, 0.5);
  box-shadow: 0 12px 32px -14px rgba(6, 20, 39, 0.32);
}
.news-card--press .news-card__cta { color: #061427; }
.news-card--press:hover .news-card__cta { color: #000; }

/* Podcasts & Radio — cool blue-to-rust */
.news-card--podcasts {
  background: linear-gradient(180deg, rgba(59, 111, 163, 0.045) 0%, rgba(168, 75, 47, 0.02) 100%);
  border-color: rgba(59, 111, 163, 0.22);
}
.news-card--podcasts:hover {
  border-color: rgba(168, 75, 47, 0.5);
  box-shadow: 0 12px 32px -14px rgba(168, 75, 47, 0.28);
}
.news-card--podcasts .news-card__cta { color: #A84B2F; }
.news-card--podcasts:hover .news-card__cta { color: #7a3620; }

/* Social Impact / Instagram — Instagram gradient tint */
.news-card--social {
  background: linear-gradient(135deg, rgba(131, 58, 180, 0.04) 0%, rgba(225, 48, 108, 0.03) 50%, rgba(247, 119, 55, 0.04) 100%);
  border-color: rgba(225, 48, 108, 0.22);
}
.news-card--social:hover {
  border-color: rgba(225, 48, 108, 0.5);
  box-shadow: 0 12px 32px -14px rgba(225, 48, 108, 0.28);
}
.news-card--social .news-card__cta {
  background: linear-gradient(90deg, #833AB4, #E1306C, #F77737);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Speaking — teal accent */
.news-card--speaking {
  background: linear-gradient(180deg, rgba(32, 128, 141, 0.04) 0%, rgba(32, 128, 141, 0.01) 100%);
  border-color: rgba(32, 128, 141, 0.22);
}
.news-card--speaking:hover {
  border-color: rgba(32, 128, 141, 0.5);
  box-shadow: 0 12px 32px -14px rgba(32, 128, 141, 0.3);
}
.news-card--speaking .news-card__cta { color: #20808D; }
.news-card--speaking:hover .news-card__cta { color: #155e69; }

/* When cards sit on a dark section (section--alt), lift them so the tint reads */
.section--alt .news-card {
  background-color: rgba(255, 255, 255, 0.04);
}
.section--alt .news-card--articles {
  background: linear-gradient(180deg, rgba(31, 63, 109, 0.12) 0%, rgba(31, 63, 109, 0.04) 100%);
  border-color: rgba(31, 63, 109, 0.4);
}
.section--alt .news-card--substack {
  background: linear-gradient(180deg, rgba(255, 103, 25, 0.12) 0%, rgba(255, 103, 25, 0.04) 100%);
  border-color: rgba(255, 103, 25, 0.4);
}
.section--alt .news-card--press {
  background: linear-gradient(180deg, rgba(59, 111, 163, 0.12) 0%, rgba(59, 111, 163, 0.04) 100%);
  border-color: rgba(59, 111, 163, 0.4);
}
.section--alt .news-card--social {
  background: linear-gradient(135deg, rgba(131, 58, 180, 0.14) 0%, rgba(225, 48, 108, 0.09) 50%, rgba(247, 119, 55, 0.12) 100%);
  border-color: rgba(225, 48, 108, 0.42);
}

/* Alias: Speaking lane currently uses .news-card--video; apply the teal treatment */
.news-card--video {
  background: linear-gradient(180deg, rgba(32, 128, 141, 0.04) 0%, rgba(32, 128, 141, 0.01) 100%);
  border-color: rgba(32, 128, 141, 0.22);
}
.news-card--video:hover {
  border-color: rgba(32, 128, 141, 0.5);
  box-shadow: 0 12px 32px -14px rgba(32, 128, 141, 0.3);
}
.news-card--video .news-card__cta { color: #20808D; }
.news-card--video:hover .news-card__cta { color: #155e69; }

/* ============================================
   BREADCRUMB NAVIGATION (SEO + UX)
   ============================================ */
.breadcrumb {
  padding: 12px 0 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.breadcrumb__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.breadcrumb__item a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 0.2s ease;
}
.breadcrumb__item a:hover,
.breadcrumb__item a:focus-visible {
  color: #ff8f5a;
  text-decoration: underline;
}
.breadcrumb__item[aria-current="page"] {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}
.breadcrumb__separator {
  color: rgba(255, 255, 255, 0.3);
  user-select: none;
}
@media (prefers-color-scheme: light) {
  .breadcrumb { color: rgba(11, 34, 64, 0.55); border-bottom-color: rgba(11, 34, 64, 0.08); }
  .breadcrumb__item a { color: rgba(11, 34, 64, 0.7); }
  .breadcrumb__item[aria-current="page"] { color: #0B2240; }
  .breadcrumb__separator { color: rgba(11, 34, 64, 0.3); }
}

/* ============================================================
   Pullquote rotator (About page recommendations carousel)
   ============================================================ */
.pullquote-rotator {
  position: relative;
  display: grid;
}
.pullquote-rotator > .pullquote--rotator {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 600ms ease, transform 600ms ease, visibility 0s linear 600ms;
  pointer-events: none;
}
.pullquote-rotator > .pullquote--rotator.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 600ms ease, transform 600ms ease, visibility 0s linear 0s;
  pointer-events: auto;
}
.pullquote-rotator__dots {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-left: var(--space-6);
}
.pullquote-rotator__dot {
  appearance: none;
  border: none;
  background: var(--ink-300, rgba(255, 255, 255, 0.18));
  width: 6px;
  height: 6px;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
.pullquote-rotator__dot:hover {
  background: var(--ink-500, rgba(255, 255, 255, 0.35));
}
.pullquote-rotator__dot.is-active {
  background: var(--accent);
  transform: scale(1.35);
}
.pullquote-rotator__dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  /* The rotator keeps advancing under reduced motion, but crossfades
     instead of sliding: opacity is not a vestibular trigger, translateY
     is. Freezing it stripped the other seven quotes from the page. */
  .pullquote-rotator > .pullquote--rotator {
    transform: none;
    transition: opacity 600ms ease, visibility 0s linear 600ms;
  }
  .pullquote-rotator > .pullquote--rotator.is-active {
    transform: none;
    transition: opacity 600ms ease, visibility 0s linear 0s;
  }
}

/* ------------------------------------------------------------
   Skip link — keyboard users bypass the nav and mega-panels
   ------------------------------------------------------------ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--ink-800);
  color: var(--bone-100);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 8px 0;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* Minimum 44px touch targets on small screens (WCAG 2.5.5) */
@media (max-width: 768px) {
  .nav__link,
  .footer a,
  .social,
  .logowall__card {
    min-height: 44px;
  }
  .nav__link {
    display: flex;
    align-items: center;
  }
  .nav__toggle {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Guard against horizontal overflow on phones */
html, body { max-width: 100%; overflow-x: hidden; }

/* ------------------------------------------------------------
   News page — sticky "jump to" bar
   Sits under the site header so the seven lanes are reachable
   without scrolling past 31 cards.
   ------------------------------------------------------------ */
.news-jump {
  position: sticky;
  top: 64px;
  z-index: 40;
  background: color-mix(in srgb, var(--ink-800) 92%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid rgba(248, 250, 252, 0.10);
}
.news-jump__inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.news-jump__inner::-webkit-scrollbar { display: none; }
.news-jump__label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.55);
  white-space: nowrap;
  margin-right: 0.25rem;
}
.news-jump__link {
  flex: none;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(248, 250, 252, 0.18);
  color: rgba(248, 250, 252, 0.85);
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background 150ms ease, border-color 150ms ease;
}
.news-jump__link:hover,
.news-jump__link:focus-visible {
  background: rgba(248, 250, 252, 0.95);
  border-color: rgba(248, 250, 252, 0.95);
  color: var(--ink-800);
}
@media (prefers-reduced-motion: reduce) { .news-jump__link { transition: none; } }
@media (max-width: 768px) {
  .news-jump { top: 56px; }
  .news-jump__label { display: none; }
  .news-jump__link { min-height: 44px; display: inline-flex; align-items: center; }
}
/* Anchor targets clear the two stacked sticky bars */
#linkedin, #articles, #forbes, #press, #podcasts, #leadership-feed, #speaking {
  scroll-margin-top: 130px;
}

/* ------------------------------------------------------------
   Recommendations marquee (homepage)
   Same mechanic as the logo wall: a track twice the content
   width translated -50%, so the loop is seamless. Pauses on
   hover and on keyboard focus within.
   ------------------------------------------------------------ */
.recs-marquee {
  position: relative;
  overflow: hidden;
  /* Feather both edges so cards enter and exit rather than pop */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.recs-marquee__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--space-6);
  width: max-content;
  padding-block: var(--space-2);
  animation: recs-scroll 90s linear infinite;
  will-change: transform;
}
.recs-marquee:hover .recs-marquee__track,
.recs-marquee:focus-within .recs-marquee__track {
  animation-play-state: paused;
}
.recs-marquee .rec-card {
  flex: 0 0 auto;
  width: clamp(300px, 30vw, 380px);
  display: flex;
  flex-direction: column;
}
@keyframes recs-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* No motion: fall back to a readable static grid and drop the
   duplicate set so nothing is announced or shown twice. */
@media (prefers-reduced-motion: reduce) {
  .recs-marquee {
    -webkit-mask-image: none;
            mask-image: none;
    overflow: visible;
  }
  .recs-marquee__track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }
  .recs-marquee .rec-card[aria-hidden="true"] { display: none; }
}

/* ------------------------------------------------------------
   News cards: equal height, uniform square thumbnails
   The grid already stretches rows, but the card contents did
   not fill, so one tall image dictated the whole row's height.
   ------------------------------------------------------------ */
.news-grid > .news-card { height: 100%; }
.news-card > .news-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* Push the CTA to the bottom so it lines up across a row */
.news-card__link > .news-card__cta { margin-top: auto; }

.news-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 10px;
  background: var(--bone-100, #F8FAFC);
  flex: none;
}
.news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Publication logo tiles are square and already padded onto white,
   so they sit contained rather than cropped. */
.news-card__media--pub {
  aspect-ratio: 1 / 1;
  max-width: 132px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.news-card__media--pub img { object-fit: contain; }

/* ------------------------------------------------------------
   Inline media embeds (podcast / video players)
   Visitors press play in place and hear the exact segment,
   instead of being sent off-site to the start of a long show.
   ------------------------------------------------------------ */
.news-card__embed {
  position: relative;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bone-100, #F8FAFC);
  margin-bottom: var(--space-4, 1rem);
}
.news-card__embed iframe {
  display: block;
  width: 100%;
  border: 0;
}
.news-card__embed--video { aspect-ratio: 16 / 9; }
.news-card__embed--video iframe { height: 100%; }
.news-card__embed--audio iframe { height: 152px; }
.news-card__embed--audio-tall iframe { height: 175px; }

/* An embed card is not one big link, so give the heading room */
.news-card--embedded { display: flex; flex-direction: column; height: 100%; padding: var(--space-5, 1.25rem); }
.news-card--embedded .news-card__title { margin: 0 0 var(--space-2, 0.5rem); }
.news-card--embedded .news-card__excerpt { margin: 0 0 var(--space-4, 1rem); }
.news-card--embedded .news-card__cta { margin-top: auto; }

/* ------------------------------------------------------------
   Hero carousel reused inside the About aside
   The homepage sizes it for a wide hero column; here it sits in
   a narrower sidebar, so cap the height and add breathing room.
   ------------------------------------------------------------ */
.about__aside .hero__carousel {
  margin: 0 0 var(--space-6, 1.5rem);
  max-width: 100%;
}
/* Size the CAROUSEL, not the slides. .hero__slides is position:absolute
   with inset:0, so a max-height on it clamps the slide layer while the
   carousel keeps its own aspect-ratio — leaving an empty band below the
   image and floating the infographic mid-frame. */
.about__aside .hero__carousel {
  aspect-ratio: 4 / 5;
}
@media (max-width: 900px) {
  /* Wider, shorter frame on narrow screens. No max-height: combining it with
     aspect-ratio clamps the box while the ratio still wants a taller one. */
  .about__aside .hero__carousel {
    aspect-ratio: 3 / 2;
  }
}

/* LinkedIn post embeds run tall; give them their own height. */
.news-card__embed--linkedin iframe { height: 542px; }
@media (max-width: 620px) {
  .news-card__embed--linkedin iframe { height: 480px; }
}

/* Spotify episode cards: 352px is the artwork player height Spotify serves. */
.news-card__embed--spotify iframe { height: 352px; border-radius: 12px; }
@media (max-width: 620px) {
  .news-card__embed--spotify iframe { height: 232px; }
}

/* Podbean episode player */
.news-card__embed--podbean iframe { height: 300px; }

/* Relationship disclosure inside a card excerpt.
   Used where the host of a programme is an A4E board member, so the item
   is not independent third-party coverage. */
.news-card__note {
  display: block;
  margin-top: 0.5rem;
  font-style: normal;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(11, 34, 64, 0.6);
  border-left: 2px solid rgba(11, 34, 64, 0.15);
  padding-left: 0.6rem;
}

/* Visually hidden but available to screen readers and the document outline */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------
   Publication index — compact rows for panel contributions.
   Ten near-identical cards read as a wall; a dated index reads
   as a publication record and scans in a few seconds.
   ------------------------------------------------------------ */
.pub-index {
  margin-top: var(--space-8, 3rem);
  padding: var(--space-6, 2rem);
  background: var(--bone-100, #F8FAFC);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.pub-index__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.35rem;
  font-family: var(--font-display), Georgia, serif;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.pub-index__count {
  font-family: var(--font-body), system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--ink-800);
  color: var(--bone-100);
}
.pub-index__lede {
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  color: var(--text-muted, var(--ink-500));
}
.pub-index__list { list-style: none; margin: 0; padding: 0; }
.pub-index__row {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.7rem 0;
  border-top: 1px solid rgba(11, 34, 64, 0.08);
}
.pub-index__row:first-child { border-top: 0; }
.pub-index__date {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--text-muted, var(--ink-500));
  white-space: nowrap;
}
.pub-index__link {
  color: var(--ink-800);
  text-decoration: none;
  font-weight: 500;
  line-height: 1.45;
  border-bottom: 1px solid transparent;
}
.pub-index__link:hover,
.pub-index__link:focus-visible {
  border-bottom-color: currentColor;
}
@media (max-width: 620px) {
  .pub-index { padding: var(--space-5, 1.5rem); }
  .pub-index__row { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* ------------------------------------------------------------
   Lane "show more" toggle
   ------------------------------------------------------------ */
.lane-more[hidden] { display: none; }
.lane-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: var(--space-5, 1.5rem);
  padding: 0.6rem 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink-700);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
.lane-toggle:hover,
.lane-toggle:focus-visible {
  background: var(--ink-800);
  border-color: var(--ink-800);
  color: var(--bone-100);
}
@media (prefers-reduced-motion: reduce) { .lane-toggle { transition: none; } }
@media (max-width: 768px) { .lane-toggle { min-height: 44px; } }

/* ------------------------------------------------------------
   Larger social icons in the header row and footer.
   The inline width/height on each <svg> is 16px, so the size
   is overridden here rather than in 10 HTML files.
   ------------------------------------------------------------ */
.socials--nav .social svg,
.footer .social svg {
  width: 22px !important;
  height: 22px !important;
}
.socials--nav .social.social--icon,
.footer .social.social--icon {
  padding: 0.6rem;
  min-width: 42px;
  min-height: 42px;
  justify-content: center;
}
@media (max-width: 768px) {
  .socials--nav .social.social--icon,
  .footer .social.social--icon {
    min-width: 44px;
    min-height: 44px;
  }
  .socials--nav .social svg,
  .footer .social svg { width: 20px !important; height: 20px !important; }
}

/* ------------------------------------------------------------
   Whiteboard summary graphic
   ------------------------------------------------------------ */
.whiteboard {
  margin: 0;
  max-width: 1100px;
  margin-inline: auto;
}
.whiteboard img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}
.whiteboard__cap {
  margin-top: var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, var(--ink-500));
}

/* Founder cross-link on the Optimus role entry. rel="me" in both directions
   is the standard signal that two URLs represent the same person. */
.role__link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 34, 64, 0.22);
}
.role__link:hover,
.role__link:focus-visible { border-bottom-color: currentColor; }
.section--inverted .role__link { border-bottom-color: rgba(255, 255, 255, 0.28); }

/* Reciprocal identity links to the sibling properties. */
.about__affiliations {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-muted, var(--ink-500));
}
.about__affiliations a {
  color: inherit;
  border-bottom: 1px solid rgba(11, 34, 64, 0.24);
  text-decoration: none;
}
.about__affiliations a:hover,
.about__affiliations a:focus-visible { border-bottom-color: currentColor; }

/* ------------------------------------------------------------
   Source marks on cards that carry no photo or player. Smaller
   than the publication tiles on press cards — these identify the
   platform rather than illustrate the item.
   ------------------------------------------------------------ */
.news-card__media--source {
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-3);
  border-radius: 10px;
  overflow: hidden;
  flex: 0 0 auto;
}
.news-card__media--source img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ------------------------------------------------------------
   Filter chips. Progressive enhancement: without JS every lane
   stays visible, so crawlers and no-JS users see the full page.
   ------------------------------------------------------------ */
.news-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin: 0 auto var(--space-8);
  max-width: 900px;
}
.news-filter__chip {
  appearance: none;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink-700);
  font: inherit;
  font-size: 0.9375rem;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 150ms var(--ease), color 150ms var(--ease),
              border-color 150ms var(--ease);
}
.news-filter__chip:hover,
.news-filter__chip:focus-visible {
  border-color: var(--ink-800);
}
.news-filter__chip[aria-pressed="true"] {
  background: var(--ink-800);
  border-color: var(--ink-800);
  color: var(--bone-100);
}
.news-filter__count {
  margin-left: 0.4rem;
  font-size: 0.75rem;
  opacity: 0.65;
}
[data-lane].is-filtered-out { display: none; }
@media (prefers-reduced-motion: reduce) { .news-filter__chip { transition: none; } }
@media (max-width: 768px) { .news-filter__chip { min-height: 44px; } }

/* ------------------------------------------------------------
   News filter — layout corrections
   ------------------------------------------------------------ */

/* 1. Breathing room below the sticky header and jump nav, so the
      chips don't read as part of the site navigation. */
.news-filter {
  margin-top: var(--space-8);
  padding-top: var(--space-2);
}
@media (max-width: 768px) { .news-filter { margin-top: var(--space-6); } }

/* 2. When a filter is active the alternating section--alt banding
      breaks — a single tinted band floats with nothing around it.
      Neutralise the alternation while filtering and let the visible
      lane sit on the page background. */
.news--filtered .section--alt { background: transparent; }

/* 3. The first divider of a filtered set has nothing above it, so
      it reads as an orphan rule. Hide it. */
.news--filtered [data-divider]:first-of-type { display: none; }

/* Detail moved out of the whiteboard alt text — it was 388 characters, which
   a screen reader reads as one unbroken block. Sighted readers get it here. */
.whiteboard__detail {
  display: block;
  margin-top: var(--space-2);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-muted, var(--ink-500));
  max-width: 62ch;
}

/* ------------------------------------------------------------
   Logo wall alignment. The label sits inside .container and is
   capped at --container, but the marquee viewport was width:100%
   of the page — so the logos ran edge-to-edge while every other
   element stopped at the container edge. Constrain the viewport
   to the same width so the strip lines up with the content.
   ------------------------------------------------------------ */
.logowall__viewport {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(var(--space-5), 5vw, var(--space-12));
  box-sizing: border-box;
  /* Mask pulled inward: with padding on the viewport, the fade has to
     start inside it or the end cards fade against the container edge. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

/* ------------------------------------------------------------
   Press kit headshots are now links. Give them a visible hover
   and a focus ring — they were previously right-click-only, with
   no keyboard route at all.
   ------------------------------------------------------------ */
.press-block figure a {
  position: relative;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.press-block figure a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(11, 34, 64, 0.16);
}
.press-block figure a:focus-visible {
  outline: 2px solid var(--ink-800);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .press-block figure a { transition: none; }
  .press-block figure a:hover { transform: none; }
}

/* ------------------------------------------------------------
   Contact page intents. The nav promised four distinct routes in
   and delivered one form; these give each arrival somewhere that
   matches what was clicked, and a scroll-margin so the anchor
   doesn't land under the sticky header.
   ------------------------------------------------------------ */
.intents {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
  margin: var(--space-8) 0 var(--space-4);
}
.intent {
  padding: var(--space-6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  scroll-margin-top: 96px;
}
.intent__title {
  font-family: var(--font-display), Georgia, serif;
  font-size: 1.25rem;
  margin: 0 0 var(--space-3);
  color: inherit;
}
.intent__body { margin: 0 0 var(--space-3); font-size: 0.9375rem; line-height: 1.6; }
.intent__ask {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  opacity: 0.72;
}
.intent a { text-decoration: underline; text-underline-offset: 2px; }
.intent:target {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
}
@media (max-width: 620px) { .intent { padding: var(--space-5); } }

/* Deep-linked blocks need clearance under the sticky header. */
#a4e, #fractional-cpo, #services, #experience, #projects, #certifications {
  scroll-margin-top: 96px;
}

/* Editor's Choice badge runs full width of the card rather than sitting in the
   44px source-mark slot — it is the recognition, not a publication logo. */
.news-card__media--badge {
  /* pull out to the card edges: .news-card__link has 22px padding, and the
     card itself already clips with overflow:hidden and a 14px radius, so no
     radius is needed here. */
  width: calc(100% + 44px);
  margin: -22px 0 14px -22px;
  aspect-ratio: 1200 / 630;
  overflow: hidden;
}
.news-card__media--badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ---------------------------------
   Site assistant — inline panel (/faq/) and sitewide launcher.
   Tokens only; no new colours. The launcher sits above content but below
   nothing else, so it never traps focus when closed (it is hidden).
   --------------------------------- */
.ss { max-width: 780px; margin: 0 auto var(--space-5); }
.ss__field { display: flex; gap: var(--space-2); align-items: center; }
.ss__input {
  flex: 1 1 auto; width: 100%; padding: .75rem 1rem;
  font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px;
}
.ss__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ss__status { min-height: 1.25rem; font-size: var(--text-xs); color: var(--text-muted); }
.ss__answer {
  margin: var(--space-3) 0; padding: var(--space-3);
  background: var(--surface-alt); border-left: 3px solid var(--accent);
  border-radius: 8px;
}
.ss__answer-text { margin: 0 0 .5rem; }
.ss__answer-src { font-size: var(--text-xs); }
.ss__group {
  margin: var(--space-4) 0 .5rem; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted);
}
.ss__item { border-bottom: 1px solid var(--border); padding: .6rem 0; }
.ss__q { cursor: pointer; font-weight: 500; }
.ss__a { margin: .5rem 0 0; color: var(--text-muted); }
.ss__pages { list-style: none; margin: 0; padding: 0; }
.ss__pages li { padding: .5rem 0; border-bottom: 1px solid var(--border); }
.ss__page { font-weight: 500; }
.ss__page-d { display: block; font-size: var(--text-xs); color: var(--text-muted); }
.ss__empty { color: var(--text-muted); }

.ss-launch {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 42px; padding: 0 1rem;
  font: inherit; font-size: var(--text-sm); font-weight: 500;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
}
.ss-launch + .ss-launch { margin-left: 8px; }
.ss-launch:hover { color: var(--accent); border-color: var(--accent); }
.ss-launch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ss-launch svg { display: block; width: 20px; height: 20px; flex: 0 0 auto; }
.ss-tools { display: inline-flex; align-items: center; margin-right: auto; }
/* Below the wrap breakpoint the row centres and space is tight: the icons
   carry the meaning and the labels step aside. */
@media (max-width: 720px) {
  .ss-tools { margin-right: 0; }
  .ss-launch { padding: 0; width: 42px; justify-content: center; }
  .ss-launch__label { display: none; }
}

.ss-panel {
  position: fixed; inset: 0; z-index: 61;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(6, 20, 39, .45);
}
.ss-panel[hidden] { display: none; }
.ss-panel__inner {
  width: min(680px, 100%); max-height: 80vh; overflow-y: auto;
  padding: var(--space-4); background: var(--bg-alt);
  border-radius: 16px 16px 0 0;
}
.ss-panel__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-3);
}
.ss-panel__title { margin: 0; font-size: var(--text-lg); }
.ss-panel__close {
  font: inherit; color: var(--text-muted); background: none;
  border: 0; cursor: pointer; padding: .25rem .5rem;
}
@media (min-width: 640px) {
  .ss-panel { align-items: center; }
  .ss-panel__inner { border-radius: 16px; }
}


/* =============================================================================
   v110 (11 Oct 2026) - header utility strip, Insights menu item, full footer.
   Strip: steel blue (--ember-600), white icons that fill with brand colour on
   hover. Footer: navy (--ink-800) with five link columns, a Follow row and a
   Substack call to action. Chosen by Omer from rendered options A/B/C.
   ============================================================================= */
.nav__utility { background: var(--ember-600); color: #fff; }
.nav__utility-inner { display: flex; align-items: center; gap: var(--space-4); min-height: 44px; }
.nav__utility-tag { margin: 0 auto 0 0; font-size: var(--text-xs); letter-spacing: .01em; color: rgba(255,255,255,.86); }
.nav__utility .ss-tools { gap: 6px; margin-right: var(--space-2); }
.nav__utility .ss-launch { height: 30px; padding: 0 12px; background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.28); color: #fff; font-size: var(--text-xs); }
.nav__utility .ss-launch:hover { background: rgba(255,255,255,.20); }
.nav__utility .ss-launch svg { width: 15px; height: 15px; }
.socials--strip { gap: 2px; }
.socials--strip .social.social--icon { width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0; background: transparent; border: 0; box-shadow: none; color: #fff; }
.socials--strip .social svg,
.socials--strip .social:hover svg { color: #fff; width: 16px !important; height: 16px !important; }
.socials--strip .social.social--icon:hover { background: var(--social-color, #fff); }
.socials--strip .social--forbes .social__img { filter: invert(1); }
.socials--strip .social--forbes:hover { background: #fff; }
.socials--strip .social--forbes:hover .social__img { filter: none; }
.nav__utility-cta { font-size: var(--text-xs); font-weight: 600; color: var(--ink-800); background: #fff; border-radius: 999px; padding: 6px 14px; text-decoration: none; white-space: nowrap; }
.nav__utility-cta:hover { background: var(--bone-200); }
.nav__utility a:focus-visible,
.nav__utility button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 720px) {
  .nav__utility-tag, .socials--strip { display: none; }
  .nav__utility-inner { justify-content: space-between; }
}

.footer { background: var(--ink-800); color: rgba(255,255,255,.82); border-top: 0; }
.footer a { color: rgba(255,255,255,.82); }
.footer a:hover { color: #fff; }
.footer .orbit-logo ellipse, .footer .orbit-logo circle { stroke: #fff; }
.footer .orbit-logo__satellite { fill: #fff; stroke: none; }
.footer__lockup text { fill: #fff; }
.footer__tag, .footer__tag em { color: rgba(255,255,255,.82); }
.footer__tag em { color: #fff; }
.footer__grid { display: grid; grid-template-columns: minmax(220px, 1fr) 3fr; gap: 2rem; padding-bottom: 1.5rem; }
.footer__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; }
.footer__col-title { font-family: Fraunces, serif; font-weight: 500; font-size: var(--text-md); color: #fff; margin: 0 0 .6rem; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: var(--text-sm); }
.footer__col a { text-decoration: none; }
.footer__col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__follow { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.5rem 0; border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.socials--footer-follow { gap: 10px; }
.socials--footer-follow .social { position: relative; width: 40px; height: 40px; padding: 0; border-radius: 50%; justify-content: center; background: var(--social-color, #fff); border: 0; color: #fff; }
.socials--footer-follow .social span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.socials--footer-follow .social svg { color: #fff; }
.socials--footer-follow .social--instagram { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); }
.socials--footer-follow .social--x { background: #000; }
.socials--footer-follow .social--forbes { background: #fff; }
.socials--footer-follow .social:hover { filter: brightness(1.1); }
.socials--footer-follow .social:focus-visible, .footer__subscribe:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.footer__subscribe { display: grid; grid-template-columns: 1fr auto; gap: 2px 1.25rem; align-items: center; padding: 14px 18px; border: 1px solid rgba(255,103,25,.55); border-radius: 14px; text-decoration: none; max-width: 460px; }
.footer__subscribe-title { font-family: Fraunces, serif; font-size: var(--text-md); color: #fff; }
.footer__subscribe-desc { grid-column: 1; font-size: var(--text-xs); color: rgba(255,255,255,.72); }
.footer__subscribe-btn { grid-column: 2; grid-row: 1 / 3; background: #FF6719; color: #fff; font-weight: 600; font-size: var(--text-sm); border-radius: 999px; padding: 8px 16px; white-space: nowrap; }
.footer__subscribe:hover .footer__subscribe-btn { background: #E85A10; }
.footer__downloads { border-top: 0; }
.footer__downloads-label { color: rgba(255,255,255,.62); }
.footer__download-link { color: rgba(255,255,255,.82); }
.footer__inner { color: rgba(255,255,255,.62); }
.footer .divider { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.14); }
@media (max-width: 980px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__follow { flex-direction: column; align-items: flex-start; }
  .footer__subscribe { grid-template-columns: 1fr; max-width: none; width: 100%; }
  .footer__subscribe-btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 10px; }
}

/* Contact page: six badges (Substack added in v110) must fit one row on desktop */
.socials--contact { gap: clamp(14px, 2.2vw, 24px); }
.socials--contact .social.social.social { width: clamp(80px, 8.5vw, 104px) !important; height: clamp(80px, 8.5vw, 104px) !important; }

/* v112: footer column titles are links; keep them white like the plain-text titles they replace */
.footer__col-title a { color: inherit; }

/* v115: Search and Ask move out of the thin utility strip into their own bar
   under the main navigation, larger and labelled at every width (Omer, 18 Oct). */
.nav__tools { background: var(--bg-alt); border-top: 1px solid var(--border); }
.nav__tools-inner { display: flex; justify-content: center; gap: var(--space-3); padding-top: 10px; padding-bottom: 10px; }
.nav__tools .ss-launch { height: 48px; min-width: 230px; padding: 0 1.5rem; justify-content: center;
  font-size: var(--text-base); font-weight: 600; box-shadow: var(--shadow-sm); }
.nav__tools .ss-launch + .ss-launch { margin-left: 0; }
.nav__tools .ss-launch svg { width: 22px; height: 22px; }
.nav__tools .ss-launch--ask { background: var(--accent); border-color: var(--accent); color: #fff; }
.nav__tools .ss-launch--ask:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
@media (max-width: 720px) {
  .nav__tools-inner { gap: 8px; padding-top: 8px; padding-bottom: 8px; }   /* top/bottom only: keep .container gutters */
  .nav__tools .ss-launch { flex: 1 1 0; width: auto; min-width: 0; height: 46px; padding: 0 .75rem; font-size: var(--text-sm); }
  .nav__tools .ss-launch__label { display: inline; }
}

/* ---------- v115: sticky header that actually sticks ----------
   The header has always been position: sticky, but html/body carry
   overflow-x: hidden, which silently disables sticky for everything inside.
   overflow-x: clip still stops sideways scrolling without breaking sticky;
   browsers too old for clip keep the hidden rule above (and today's
   non-sticky header), so nothing gets worse for them. */
html, body { overflow-x: clip; }
/* The thin top strip scrolls away; the menu and the search/ask bar stay. */
.nav { top: calc(-1 * var(--util-h, 0px)); }
/* Anchors land below whatever is pinned. Sizes come from site-search.js,
   which measures the real header at every width (it wraps, so no fixed
   number can be right; v114's 96px and 130px were not). */
html { scroll-padding-top: calc(var(--nav-stuck-h, 0px) + 16px); }
#a4e, #fractional-cpo, #services, #experience, #projects, #certifications, .intent { scroll-margin-top: 0; }
#linkedin, #articles, #forbes, #press, #podcasts, #leadership-feed, #speaking { scroll-margin-top: var(--jump-h, 0px); }
.news-jump { top: var(--nav-stuck-h, 64px); }
/* A pinned drawer taller than the screen would strand its last links. */
@media (max-width: 768px) {
  .nav__links.is-open { max-height: calc(100vh - 230px); overflow-y: auto; overscroll-behavior: contain; }
}

/* ---------- v115: typed search field in the search/ask bar ---------- */
.ss-field { display: inline-flex; align-items: center; gap: .6rem; height: 48px; width: min(420px, 100%);
  padding: 0 1.1rem; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px;
  box-shadow: var(--shadow-sm); cursor: text; }
.ss-field svg { display: block; width: 20px; height: 20px; flex: 0 0 auto; color: var(--ink-500); }
.ss-field__input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: var(--text-base); color: var(--text); }
.ss-field__input::placeholder { color: var(--ink-500); opacity: 1; }
.ss-field__input::-webkit-search-cancel-button { display: none; }
.ss-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(42, 88, 135, .25); }
@media (max-width: 720px) {
  .ss-field { flex: 1.25 1 0; width: auto; min-width: 0; height: 46px; padding: 0 .85rem; }   /* min-width 0: a text box will not shrink below its default width otherwise */
  .nav__tools .ss-launch--ask { flex: 0 0 auto; padding: 0 .9rem; }   /* exactly as wide as its label; the field takes the rest */
  .ss-field__input { font-size: 16px; }   /* below 16px, iOS zooms the page on focus */
}
@media (max-width: 380px) {
  .nav__tools .ss-launch--ask svg { display: none; }   /* room for the label on the narrowest phones */
}

/* ---------- v115: solid header, compact once scrolled ----------
   Solid: the header was 85% opaque with a blur, so page text ghosted
   through it as you scrolled. Now that it stays pinned, it is opaque. */
.nav { background: #F8FAFC; -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 768px) {
  .nav:has(.nav__links.is-open) { background: #F8FAFC; }
}
/* Compact: site-search.js adds .is-compact past 120px and removes it above
   20px. The gap is wider than the height change, so shrinking can never
   scroll the page back across the line it just crossed (no flicker loop). */
.nav.is-compact .nav__inner { padding-block: 6px; }
.nav.is-compact .brand__mark,
.nav.is-compact .brand__mark svg { width: 48px; height: 48px; }
.nav.is-compact .brand__lockup svg { width: auto; height: 34px; }
.nav.is-compact .brand__tag { display: none; }
.nav.is-compact .nav__tools-inner { padding-top: 6px; padding-bottom: 6px; }