/* -------- Self-hosted Inter (latin + latin-ext, weights 400/600/700/800). Was Google Fonts. -------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter/inter-regular-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter/inter-regular-latin.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:600;font-display:swap;src:url('../fonts/inter/inter-semibold-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter/inter-semibold-latin.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:700;font-display:swap;src:url('../fonts/inter/inter-bold-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter/inter-bold-latin.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:800;font-display:swap;src:url('../fonts/inter/inter-extrabold-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/inter/inter-extrabold-latin.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;}

/* =============================================================================
   Dispense Marketing — main.css
   Per handoff: locked tokens (section 3), locked typography (section 4),
   custom CSS only — no framework, no preprocessor required.
   ============================================================================= */

/* -------- Reset (minimal) -------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
input, textarea, select, button { font-family: inherit; }

/* -------- Tokens (section 3) -------- */
:root {
  --brand-red: #D7263D;
  --brand-blue: #1B3C7A;
  --ink: #1A1D24;
  --ink-2: #3D424B;
  --gray: #6C7280;
  --gray-muted: #9CA0AB;
  --line: #E5E7EB;
  --surface: #F4F5F7;
  --canvas: #FFFFFF;

  --max: 1200px;
  --gutter: 120px;
  --gutter-md: 64px;
  --gutter-sm: 24px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* -------- Base typography (Inter, 400/600 only) -------- */
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* -------- Layout primitives -------- */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter-sm); }
@media (min-width: 768px) { .wrap { padding: 0 var(--gutter-md); } }
@media (min-width: 1280px) { .wrap { padding: 0 var(--gutter); max-width: 1280px; } }

.section { padding: 80px 0; border-bottom: 1px solid var(--line); }
.section--surface { background: var(--surface); }
.section--ink { background: var(--ink); color: var(--canvas); }
.section--no-border { border-bottom: 0; }
@media (max-width: 767px) { .section { padding: 56px 0; } }

/* Hairline accent */
.hairline-red { display: inline-block; width: 60px; height: 3px; background: var(--brand-red); }

/* Eyebrow */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--gray);
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-red); }
.eyebrow--blue .dot { background: var(--brand-blue); }

/* -------- Type scale (section 4 desktop sizes) -------- */
.h-hero    { font-size: 60px; font-weight: 600; letter-spacing: -2px;    line-height: 1.04; color: var(--ink); }
.h-hero em { font-style: italic; color: var(--brand-red); display: inline-block; padding-left: 36px; }
.h-final   { font-size: 48px; font-weight: 600; letter-spacing: -1.3px;  line-height: 1.08; color: var(--ink); }
.h-final em{ font-style: italic; color: var(--brand-red); }
.h-why     { font-size: 42px; font-weight: 600; letter-spacing: -1.1px;  line-height: 1.08; color: var(--ink); }
.h-why em  { font-style: italic; color: var(--brand-red); }
.h-section { font-size: 36px; font-weight: 600; letter-spacing: -0.9px;  line-height: 1.12; color: var(--ink); }
.h-card    { font-size: 22px; font-weight: 600; letter-spacing: -0.4px;  line-height: 1.2;  color: var(--ink); }
.h-card-lg { font-size: 28px; font-weight: 600; letter-spacing: -0.6px;  line-height: 1.18; color: var(--ink); }
.h-industry{ font-size: 22px; font-weight: 600; letter-spacing: -0.4px;  line-height: 1.35; color: var(--ink); }
.h-industry em { font-style: italic; color: var(--brand-red); }
.meta-l    { font-size: 20px; font-weight: 600; letter-spacing: -0.4px;  color: var(--ink); }

.body-l { font-size: 18px; color: var(--ink-2); }
.body   { font-size: 16px; color: var(--ink-2); }
.body-s { font-size: 14px; color: var(--ink-2); }
.meta   { font-size: 13px; color: var(--gray); }
.fine   { font-size: 11px; color: var(--gray); }

.outcome {
  font-size: 12px; font-weight: 600; font-style: italic;
  color: var(--brand-red); text-align: right;
}

@media (max-width: 1024px) {
  .h-hero  { font-size: 48px; letter-spacing: -1.6px; }
  .h-hero em { padding-left: 28px; }
  .h-final { font-size: 40px; letter-spacing: -1.1px; }
  .h-why   { font-size: 34px; letter-spacing: -0.9px; }
  .h-section { font-size: 30px; letter-spacing: -0.7px; }
}
@media (max-width: 640px) {
  .h-hero  { font-size: 36px; letter-spacing: -1.2px; }
  .h-hero em { padding-left: 16px; }
  .h-final { font-size: 32px; letter-spacing: -0.9px; }
  .h-why   { font-size: 28px; letter-spacing: -0.7px; }
  .h-section { font-size: 24px; letter-spacing: -0.5px; }
  .body-l { font-size: 16px; }
}

/* -------- Buttons -------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--primary { background: var(--brand-red); color: var(--canvas); border-color: var(--brand-red); }
.btn--primary:hover { background: var(--ink); border-color: var(--ink); }
.btn--secondary {
  background: var(--canvas); color: var(--ink); border-color: var(--ink);
  border-left: 3px solid var(--brand-red); padding-left: 22px;
}
.btn--secondary:hover { background: var(--ink); color: var(--canvas); }
.btn--ink { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.btn--ink:hover { background: var(--brand-red); border-color: var(--brand-red); }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--brand-red); font-weight: 600; }
.link-arrow .arrow { transition: transform .25s var(--ease); }
.link-arrow:hover .arrow { transform: translateX(4px); }
.link-arrow--blue { color: var(--brand-blue); }

/* -------- Nav -------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.nav__brand { display: inline-flex; align-items: center; color: var(--ink); }
.nav__brand .dm-logo { display: block; height: 36px; width: auto; }
@media (max-width: 640px) { .nav__brand .dm-logo { height: 30px; } }
.nav__links { display: flex; align-items: center; gap: 32px; }
.nav__links a {
  font-size: 14px; color: var(--ink); position: relative;
  padding: 4px 0;
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: -4px;
  width: 0; height: 1px; background: var(--brand-red); transition: width .3s var(--ease);
}
.nav__links a:hover::after { width: 100%; }
.nav__cta { display: inline-flex; }
.nav__toggle {
  display: none; background: none; border: 0; padding: 8px;
  width: 40px; height: 40px;
  color: var(--ink);
}
.nav__toggle svg { width: 20px; height: 20px; }

@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav.is-open .nav__links {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 72px; left: 0; right: 0;
    background: var(--canvas); border-bottom: 1px solid var(--line);
    padding: 16px var(--gutter-sm);
  }
  .nav.is-open .nav__links a { padding: 14px 0; border-bottom: 1px solid var(--line); width: 100%; }
  .nav.is-open .nav__cta { display: inline-flex; margin: 12px var(--gutter-sm) 24px; }
}

/* -------- Hero -------- */
.hero { padding: 120px 0 96px; border-bottom: 1px solid var(--line); }

/* Split layout: text left, dark visual panel right. Stacks on small screens. */
.hero__split {
  display: grid; grid-template-columns: 7fr 5fr; gap: 56px;
  align-items: stretch;
}
.hero__primary { display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 1024px) { .hero__split { grid-template-columns: 1fr; gap: 40px; } }

/* Dark editorial visual panel. */
.hero__visual {
  position: relative;
  background: linear-gradient(155deg, #14171D 0%, #1A1D24 55%, #232730 100%);
  color: var(--canvas);
  border-radius: 20px;
  padding: 36px 36px 32px;
  min-height: 520px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow:
    0 28px 60px -32px rgba(26,29,36,.40),
    0 4px 12px -4px rgba(26,29,36,.10);
}
/* Subtle radial accent in the bottom-right corner — quiet brand-red glow */
.hero__visual::before {
  content: ''; position: absolute; right: -120px; bottom: -120px;
  width: 360px; height: 360px;
  background: radial-gradient(circle at center, rgba(215,38,61,.32) 0%, rgba(215,38,61,0) 65%);
  pointer-events: none;
}
/* (Removed: faint dashboard-style grid texture — read as cyberpunk/dashboard) */
.hero__visual-inner { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; }

.hero__visual-top {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hero__visual-num {
  font-size: 11px; letter-spacing: 0.8px; color: rgba(255,255,255,.45);
  font-weight: 600; font-variant-numeric: tabular-nums;
}
.hero__visual-meta {
  font-size: 10px; letter-spacing: 1.2px; color: rgba(255,255,255,.45);
  font-weight: 600; text-transform: uppercase;
}

.hero__visual-statement {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 32px 0;
}
.hero__visual-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--brand-red);
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 18px;
}
.hero__visual-eyebrow::before {
  content: ''; width: 24px; height: 1px; background: var(--brand-red);
}
.hero__visual-line {
  font-size: 52px; font-weight: 800; line-height: 1.02; letter-spacing: -2px;
  color: var(--canvas);
}
.hero__visual-line em { font-style: italic; color: var(--brand-red); font-weight: 800; }

.hero__visual-nodes { display: flex; flex-direction: column; gap: 14px; padding: 8px 0 24px; }
.hero__visual-node {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.hero__visual-node:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); }
.hero__visual-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--brand-red);
  flex: 0 0 8px;
}
.hero__visual-dot--blue { background: var(--brand-blue); }
.hero__visual-node-label {
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.92);
  letter-spacing: -0.1px;
}

.hero__visual-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.hero__visual-foot-label {
  font-size: 11px; color: rgba(255,255,255,.55);
  letter-spacing: 0.3px; font-style: italic;
}
.hero__visual-arrow {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand-red); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}

@media (max-width: 540px) {
  .hero__visual { min-height: 460px; padding: 28px 24px 24px; }
  .hero__visual-line { font-size: 40px; letter-spacing: -1.4px; }
}

.hero__sub { margin-top: 28px; max-width: 720px; }
.hero__sub p { margin-top: 4px; }
.hero__trusted { margin-top: 56px; }
.hero__trusted-names {
  margin-top: 12px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 14px; color: var(--ink-2);
}
.hero__trusted-names .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--brand-red); }
/* Logo-based trust strip (replaces inline text names). Centered grayscale with strong opacity. */
.hero__trusted-logos {
  margin-top: 14px;
  display: flex; flex-wrap: wrap; align-items: center;
  row-gap: 14px; column-gap: 36px;
}
.hero__trusted-logos img {
  max-height: 32px; max-width: 120px; width: auto; height: auto;
  filter: grayscale(1) contrast(1.05); opacity: .85;
  transition: filter .25s var(--ease), opacity .25s var(--ease);
}
.hero__trusted-logos img:hover { filter: grayscale(0) contrast(1); opacity: 1; }
.hero__trusted-wordmark {
  font-size: 13px; font-weight: 600; color: var(--ink-2); letter-spacing: -0.1px;
}
@media (max-width: 640px) {
  .hero__trusted-logos { column-gap: 24px; }
  .hero__trusted-logos img { max-height: 26px; max-width: 100px; }
}
.hero__cta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 16px; }
.hero__meta {
  margin-top: 96px;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px;
  padding-top: 32px;
}
.hero__meta .eyebrow { margin-bottom: 12px; }
.hero__meta p.body { margin-top: 6px; }
@media (max-width: 1024px) { .hero__meta { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 640px)  { .hero { padding: 64px 0; } .hero__meta { margin-top: 56px; } }

/* Hero variants */
.hero--page { padding: 96px 0 72px; }
.hero--page .h-hero { font-size: 48px; letter-spacing: -1.4px; }
.hero--page .h-hero em { padding-left: 24px; }
.hero--minimal { padding: 72px 0 48px; }

/* Mobile-only override — page heroes shrink so 48px doesn't crowd the viewport edge at ≤480px */
@media (max-width: 480px) {
  .hero--page .h-hero {
    font-size: clamp(2rem, 8vw, 2.5rem);
    letter-spacing: -1px;
    line-height: 1.08;
  }
  .hero--page .h-hero em { padding-left: 12px; }
}

/* -------- Network proof grids -------- */
.proof__heading { max-width: 760px; }
.proof__heading .h-section { margin-top: 12px; }
.proof__heading p { margin-top: 12px; }
.proof__group {
  margin-top: 48px;
  padding: 28px;
  background: linear-gradient(180deg, var(--surface) 0%, rgba(244,245,247,.4) 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
  border-left: 3px solid var(--brand-red);
}
/* Vendor proof group uses the blue accent. */
.proof__group--vendor { border-left-color: var(--brand-blue); }
.proof__group-label {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; gap: 24px;
}
.proof__group-label .eyebrow { font-size: 12px; letter-spacing: 0.8px; }
.proof__group-meta {
  font-size: 12px; color: var(--gray); letter-spacing: 0.2px;
  display: inline-flex; align-items: center; gap: 8px;
}
.proof__group-meta::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #22C55E; box-shadow: 0 0 0 4px rgba(34,197,94,.15);
}
/* Inside the proof__group, the logo-grid loses its outer border + shadow
   since the wrapping card already provides the container. */
.proof__group .logo-grid {
  border: 0; border-radius: 12px; box-shadow: none;
  background: var(--canvas);
}
.logo-grid {
  display: grid; gap: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--canvas);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(26,29,36,.02);
}
.logo-grid--5 { grid-template-columns: repeat(5, 1fr); }
.logo-grid--4x2 { grid-template-columns: repeat(4, 1fr); }
.logo-grid--8 { grid-template-columns: repeat(4, 1fr); }
.logo-grid--3 { grid-template-columns: repeat(3, 1fr); }
.logo-grid--3 > *:nth-child(3n) { border-right: 0; }
/* Expanded counts: 9 pharmacy cells (3×3) + 12 vendor cells (4×3). */
.logo-grid--9  { grid-template-columns: repeat(3, 1fr); }
.logo-grid--9  > *:nth-child(3n) { border-right: 0; }
.logo-grid--12 { grid-template-columns: repeat(4, 1fr); }
.logo-grid--12 > *:nth-child(4n) { border-right: 0; }
@media (max-width: 900px) {
  .logo-grid--5 { grid-template-columns: repeat(2, 1fr); }
  .logo-grid--8, .logo-grid--4x2 { grid-template-columns: repeat(2, 1fr); }
  .logo-grid--3 { grid-template-columns: 1fr; }
  .logo-grid--9  { grid-template-columns: repeat(2, 1fr); }
  .logo-grid--12 { grid-template-columns: repeat(3, 1fr); }
  .logo-grid--9  > *:nth-child(3n) { border-right: 1px solid var(--line); }
  .logo-grid--9  > *:nth-child(2n) { border-right: 0; }
  .logo-grid--12 > *:nth-child(4n) { border-right: 1px solid var(--line); }
  .logo-grid--12 > *:nth-child(3n) { border-right: 0; }
}
@media (max-width: 560px) {
  .logo-grid--9  { grid-template-columns: 1fr; }
  .logo-grid--12 { grid-template-columns: repeat(2, 1fr); }
  .logo-grid--9 > *:nth-child(2n) { border-right: 1px solid var(--line); }
  .logo-grid--12 > *:nth-child(3n) { border-right: 1px solid var(--line); }
  .logo-grid--12 > *:nth-child(2n) { border-right: 0; }
  /* 8-cell and 4x2 grids collapse to a single column at narrow widths so
     no cells get cropped by the wrap (each .logo-cell carries wordmark text
     that won't shrink below its content's min-width inside a 2-col layout). */
  .logo-grid--8, .logo-grid--4x2 { grid-template-columns: 1fr; }
  .logo-grid--8 > *:nth-child(2n), .logo-grid--4x2 > *:nth-child(2n) { border-right: 1px solid var(--line); }
}
.logo-cell {
  position: relative;
  min-height: 128px;
  padding: 28px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
  transition: background .25s var(--ease);
}
.logo-cell::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--brand-red); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.logo-cell:hover { background: var(--surface); }
.logo-cell:hover::after { transform: scaleX(1); }
.logo-cell img {
  max-height: 52px; max-width: 200px; width: auto; height: auto;
  filter: grayscale(1) contrast(1.05);
  opacity: .82;
  transition: filter .25s var(--ease), opacity .25s var(--ease);
}
.logo-cell:hover img { filter: grayscale(0) contrast(1); opacity: 1; }
.logo-cell .wordmark { font-weight: 600; font-size: 15px; color: var(--ink); letter-spacing: -0.2px; }
.logo-cell .ctx { font-size: 11px; color: var(--gray); letter-spacing: 0.4px; text-transform: uppercase; }
.logo-grid > *:nth-child(5n) { border-right: 0; }
.logo-grid--8 > *:nth-child(4n) { border-right: 0; }
.logo-grid--4x2 > *:nth-child(4n) { border-right: 0; }
/* Strip the bottom border from the final row so the rounded card edge looks clean. */
.logo-grid--5 > *:nth-last-child(-n+5) { border-bottom: 0; }
.logo-grid--3 > *:nth-last-child(-n+3) { border-bottom: 0; }
.logo-grid--8 > *:nth-last-child(-n+4) { border-bottom: 0; }
.logo-grid--4x2 > *:nth-last-child(-n+4) { border-bottom: 0; }
.logo-grid--9  > *:nth-last-child(-n+3) { border-bottom: 0; }
.logo-grid--12 > *:nth-last-child(-n+4) { border-bottom: 0; }

/* -------- In the Industry -------- */
.industry { background: var(--surface); }
.industry__stmt { margin-top: 20px; }
.industry__stmt p { margin-top: 6px; }
.industry__sub { margin-top: 24px; max-width: 720px; }

/* -------- Why Dispense -------- */
.why { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; }
@media (max-width: 900px) { .why { grid-template-columns: 1fr; gap: 32px; } }
.why__stmt p { margin-top: 4px; }
.why__pillars {
  margin-top: 64px;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 48px 64px;
}
@media (max-width: 768px) { .why__pillars { grid-template-columns: 1fr; gap: 32px; } }
.pillar__num { font-size: 32px; font-weight: 600; color: var(--brand-red); letter-spacing: -0.6px; }
.pillar__title { margin-top: 8px; }
.pillar__body { margin-top: 6px; }

/* -------- Selected Work -------- */
.work__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.work__head-text { max-width: 760px; }
.work__head .h-section { margin-top: 8px; }
.work__head p { margin-top: 8px; }
.work__grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-auto-rows: auto;
  gap: 24px;
}
/* The featured card spans both rows of the side column on desktop. */
.work__grid > .case--featured {
  grid-column: 1; grid-row: 1 / span 2;
}
@media (max-width: 1024px) {
  .work__grid { grid-template-columns: 1fr 1fr; }
  .work__grid > .case--featured { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 640px) {
  .work__grid { grid-template-columns: 1fr; }
  .work__grid > .case--featured { grid-column: 1; }
}
.case {
  background: var(--canvas);
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(26,29,36,.02);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.case:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 56px -24px rgba(26,29,36,.22), 0 4px 12px -4px rgba(26,29,36,.06);
  border-color: #DDE1E7;
}
.case__chrome {
  height: 36px; background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px; padding: 0 14px;
}
.case__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gray-muted); }
.case__dot--red { background: var(--brand-red); }
.case__url { font-size: 12px; color: var(--gray); margin-left: 14px; font-feature-settings: "tnum"; }
.case__shot {
  height: 280px; background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
}
.case__shot::after {
  /* subtle inner top-edge highlight to suggest depth on screenshots */
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
.case__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.case__well { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; color: var(--gray-muted); }
.case__well-label { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; }
.case__well-url   { font-size: 11px; }

/* Vendor card: logo region replaces browser chrome + screenshot (same vertical height as chrome+shot). */
.case__logo-region {
  height: 316px; /* matches 36px chrome + 280px shot for visual parity in the grid */
  background: linear-gradient(180deg, var(--surface) 0%, #ECEEF1 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
  border-bottom: 1px solid var(--line);
}
.case__logo-region img { max-height: 112px; max-width: 260px; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(26,29,36,.06)); }
.case__logo-wordmark {
  font-size: 20px; font-weight: 600; letter-spacing: -0.4px; color: var(--ink);
}
.deep__logo-region {
  background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  height: 392px; /* chrome 32px + shot 360px parity with the deep__shot__well height */
  padding: 48px;
}
.deep__logo-region img { max-height: 160px; max-width: 360px; width: auto; height: auto; object-fit: contain; }
.case__body { padding: 22px 22px 24px; }
.case__cat { color: var(--gray); font-size: 11px; letter-spacing: 0.7px; font-weight: 600; text-transform: uppercase; }
.case__title { margin-top: 8px; }
.case__desc { margin-top: 10px; }
/* Demoted outcome row — quieter caption rather than a labeled metric. */
.case__outcome {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  font-size: 12px; color: var(--gray);
}
.case__outcome-label { letter-spacing: 0.4px; text-transform: uppercase; font-weight: 600; }
.case__outcome-label::after { content: ' ·'; color: var(--gray-muted); }
.case__outcome-value { color: var(--ink-2); font-weight: 600; }

/* Scope tag list — only renders on featured cards */
.case__scope {
  margin-top: 14px;
  display: flex; flex-wrap: wrap; gap: 6px;
  list-style: none; padding: 0;
}
.case__scope li {
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
  padding: 5px 10px;
  background: var(--surface); color: var(--ink-2);
  border-radius: 999px;
  border: 1px solid var(--line);
}

/* -------- Featured case card (Selected Work first slot) -------- */
.case--featured .case__chrome { height: 42px; padding: 0 18px; }
.case--featured .case__dot { width: 11px; height: 11px; }
.case--featured .case__url { font-size: 13px; }
.case--featured .case__shot { height: 520px; }
.case--featured .case__body {
  padding: 32px 36px 36px;
}
.case--featured .case__cat { font-size: 12px; letter-spacing: 0.8px; }
.case--featured .case__title {
  font-size: 32px; font-weight: 700; letter-spacing: -0.6px; line-height: 1.18;
  margin-top: 12px;
}
.case--featured .case__desc { font-size: 16px; line-height: 1.55; margin-top: 14px; max-width: 640px; }
.case--featured .case__scope { margin-top: 18px; gap: 8px; }
.case--featured .case__scope li {
  font-size: 12px; padding: 6px 12px;
  background: var(--canvas); border-color: #DDE1E7;
}
.case--featured .case__outcome { margin-top: 22px; padding-top: 18px; font-size: 13px; }
@media (max-width: 1024px) {
  .case--featured .case__shot { height: 380px; }
  .case--featured .case__title { font-size: 28px; }
}
@media (max-width: 640px) {
  .case--featured .case__shot { height: 240px; }
  .case--featured .case__body { padding: 22px 22px 24px; }
  .case--featured .case__title { font-size: 24px; }
}

/* -------- Testimonial (conditional) -------- */
.testimonial {
  background: var(--brand-blue); color: var(--canvas);
  padding: 96px 0;
}
.testimonial blockquote { max-width: 800px; font-size: 30px; font-weight: 600; line-height: 1.25; letter-spacing: -0.6px; }
.testimonial blockquote em { font-style: italic; }
.testimonial__attr {
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; gap: 16px;
}
.testimonial__avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px; color: var(--canvas);
}
.testimonial__attr .name { color: var(--canvas); font-weight: 600; }
.testimonial__attr .role { color: rgba(255,255,255,.7); font-size: 14px; }

/* -------- Paths -------- */
.paths__head { max-width: 760px; }
.paths__head .h-section { margin-top: 8px; }
.paths__head p { margin-top: 8px; }
.paths__grid { margin-top: 48px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 900px) { .paths__grid { grid-template-columns: 1fr; } }
.path {
  position: relative;
  background: var(--canvas);
  border: 1px solid var(--line);
  padding: 36px 36px 32px 40px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.path::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--brand-red);
}
.path--vendor::before { background: var(--brand-blue); }
.path:hover { transform: translateY(-3px); box-shadow: 0 12px 32px -16px rgba(26,29,36,.14); }
.path .h-card-lg { margin-top: 12px; }
.path__desc { margin-top: 14px; }
.path__list { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.path__list li { padding: 8px 0; color: var(--ink-2); font-size: 14px; border-bottom: 1px solid var(--line); }
.path__list li:last-child { border-bottom: 0; }
.path__cta { margin-top: 24px; display: flex; justify-content: flex-end; }

/* -------- Final CTA — premium routing cards -------- */
.final {
  display: grid; grid-template-columns: 1fr;
  gap: 36px;
  max-width: 1080px; margin: 0 auto;
}
.final__head { padding-top: 0; text-align: center; }
.final__head .h-final { line-height: 1.05; }
.final__cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
@media (max-width: 820px) { .final__cards { grid-template-columns: 1fr; gap: 16px; } }
.final-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 36px 36px 30px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  color: var(--canvas);
  text-decoration: none;
  overflow: hidden;
  min-height: 280px;
  transition:
    transform .28s var(--ease),
    border-color .28s var(--ease),
    background .28s var(--ease),
    box-shadow .28s var(--ease);
}
.final-card::before {
  /* left-edge accent rail */
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--brand-red);
  opacity: .7; transition: opacity .28s var(--ease), width .28s var(--ease);
}
.final-card--vendor::before { background: var(--brand-blue); }
.final-card::after {
  /* corner accent glow on hover */
  content: ''; position: absolute; right: -80px; bottom: -80px;
  width: 240px; height: 240px;
  background: radial-gradient(circle at center, rgba(215,38,61,.22) 0%, rgba(215,38,61,0) 65%);
  opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease);
}
.final-card--vendor::after {
  background: radial-gradient(circle at center, rgba(27,60,122,.32) 0%, rgba(27,60,122,0) 65%);
}
.final-card:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,.07);
  border-color: var(--brand-red);
  box-shadow: 0 18px 40px -16px rgba(215,38,61,.32);
}
.final-card--vendor:hover {
  border-color: var(--brand-blue);
  box-shadow: 0 18px 40px -16px rgba(27,60,122,.36);
}
.final-card:hover::before { opacity: 1; width: 5px; }
.final-card:hover::after { opacity: 1; }
.final-card__eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--brand-red);
}
.final-card--vendor .final-card__eyebrow { color: #6A8FD8; }
.final-card__title {
  font-size: 26px; font-weight: 700; letter-spacing: -0.5px;
  color: var(--canvas);
  margin: 10px 0 0; line-height: 1.15;
}
.final-card__body {
  font-size: 14.5px; line-height: 1.55;
  color: rgba(255,255,255,.74);
  margin: 14px 0 0;
}
.final-card__cta {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: auto; padding-top: 24px;
  font-size: 14px; font-weight: 700;
  color: var(--canvas);
  letter-spacing: -0.1px;
}
.final-card__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand-red);
  color: #fff;
  font-size: 14px; line-height: 1;
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.final-card--vendor .final-card__arrow { background: var(--brand-blue); }
.final-card:hover .final-card__arrow { transform: translateX(5px); }

.final__helper {
  margin-top: 8px;
  text-align: center;
  font-size: 13.5px; color: rgba(255,255,255,.6);
}
.final__helper a {
  color: rgba(255,255,255,.85);
  border-bottom: 1px solid rgba(255,255,255,.25);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.final__helper a:hover { color: var(--canvas); border-color: var(--brand-red); }

@media (max-width: 600px) {
  .final-card { padding: 26px 24px 22px; min-height: 0; }
  .final-card__title { font-size: 22px; }
  .final-card__body { font-size: 13.5px; }
}
.section--final-dark .h-final { line-height: 1.05; }
@media (max-width: 820px) { .section--final-dark .h-final { font-size: 44px; } }

/* -------- Footer -------- */
.footer {
  position: relative;
  background: var(--ink);
  color: rgba(255,255,255,.82);
  padding: 80px 0 28px;
  overflow: hidden;
  isolation: isolate;
}
/* 1. Top accent band — thin red-to-blue gradient, hairline separator from previous section */
.footer::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--brand-red) 0%,
    var(--brand-red) 40%,
    var(--brand-blue) 60%,
    var(--brand-blue) 100%);
  opacity: .85;
  z-index: 1;
}
/* 2. Soft ambient depth — radial red glow behind brand column, radial blue glow behind social area */
.footer::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(620px 320px at 12% 28%, rgba(215,38,61,.12) 0%, rgba(215,38,61,0) 65%),
    radial-gradient(560px 320px at 88% 78%, rgba(27,60,122,.14) 0%, rgba(27,60,122,0) 65%);
  pointer-events: none;
  z-index: 0;
}
.footer > .wrap { position: relative; z-index: 2; }

/* 5-column grid: Brand · Practices · Resources · Owned Network · Engage */
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.footer__col { min-width: 0; }
/* Tablet/wide-mobile: brand on full row, 4 link columns even below */
@media (max-width: 1100px) {
  .footer__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 36px 40px;
  }
  .footer__col--brand { grid-column: 1 / -1; max-width: 560px; }
}
/* Narrow tablet: 2x2 link grid */
@media (max-width: 760px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px 28px;
  }
  .footer__col--brand { grid-column: 1 / -1; max-width: 100%; }
}
/* Mobile: keep a compact 2-column link grid (brand full-width) instead of a long single stack */
@media (max-width: 480px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px 24px;
  }
  .footer__col--brand { grid-column: 1 / -1; }
}

/* 3. Brand column — anchored with a left red rule + intentional rhythm */
.footer__col--brand {
  position: relative;
  max-width: 380px;
  padding-left: 22px;
}
.footer__col--brand::before {
  content: '';
  position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 2px;
  background: linear-gradient(180deg,
    var(--brand-red) 0%,
    var(--brand-red) 55%,
    rgba(215,38,61,.18) 100%);
}
.footer__brand { display: inline-flex; align-items: center; color: var(--canvas); }
.footer__brand .dm-logo { display: block; height: 44px; width: auto; }
.footer__tag {
  color: rgba(255,255,255,.78);
  margin-top: 18px; line-height: 1.55; font-size: 14.5px;
  overflow-wrap: break-word;
}
.footer__signature {
  color: rgba(255,255,255,.94);
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 13.5px; font-style: italic;
  letter-spacing: -0.1px;
  overflow-wrap: break-word;
}
.footer__bar-l { overflow-wrap: break-word; }

/* 4. Stronger column headings + brighter list links + crisper hover */
.footer__head {
  position: relative;
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(255,255,255,.96);
  margin-bottom: 20px;
  padding-bottom: 12px;
}
.footer__head::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 28px; height: 2px;
  background: var(--brand-red);
  border-radius: 1px;
  opacity: .9;
}
.footer__col li {
  position: relative;
}
.footer__col li a {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 0; padding-left: 0;
  color: rgba(255,255,255,.78); font-size: 14.5px;
  transition: color .22s var(--ease), padding-left .22s var(--ease), transform .22s var(--ease);
}
.footer__col li a::before {
  content: '';
  width: 0; height: 1px;
  background: var(--brand-red);
  transition: width .22s var(--ease);
  display: inline-block;
}
.footer__col li a:hover {
  color: var(--canvas);
  padding-left: 4px;
}
.footer__col li a:hover::before { width: 12px; }
.footer__note {
  color: rgba(255,255,255,.55);
  font-size: 12.5px; font-style: italic;
  margin-top: 14px; line-height: 1.5;
}

/* Base bar — legal left, social right */
.footer__bar {
  margin-top: 52px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center;
  font-size: 12.5px; color: rgba(255,255,255,.58);
}
.footer__bar-l { min-width: 0; }
.footer__bar-r { display: inline-flex; gap: 10px; justify-content: flex-end; flex-shrink: 0; }
.footer__bar-l a {
  color: rgba(255,255,255,.82);
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.footer__bar-l a:hover { color: var(--canvas); border-color: rgba(255,255,255,.4); }
.footer__bar-sep { color: rgba(255,255,255,.28); margin: 0 8px; }

/* 5. Social icons — brighter idle state + lift + per-platform brand glow */
.footer__soc {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  transition:
    color .22s var(--ease),
    background .22s var(--ease),
    border-color .22s var(--ease),
    transform .22s var(--ease),
    box-shadow .28s var(--ease);
}
.footer__soc:hover {
  color: #fff;
  background: var(--brand-red);
  border-color: var(--brand-red);
  transform: translateY(-3px);
  box-shadow: 0 8px 22px -6px rgba(215,38,61,.55);
}
/* X uses a blue accent glow on hover for variety */
.footer__soc[aria-label="X"]:hover {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  box-shadow: 0 8px 22px -6px rgba(27,60,122,.60);
}
/* Google Business Profile uses a blue glow as well */
.footer__soc[aria-label="Google Business Profile"]:hover {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  box-shadow: 0 8px 22px -6px rgba(27,60,122,.60);
}

/* 7. Mobile — keep accent rules but center brand column, social, bar */
@media (max-width: 640px) {
  .footer { padding: 64px 0 24px; }
  .footer__col--brand {
    padding-left: 18px;
    max-width: 100%;
  }
  .footer__bar { grid-template-columns: 1fr; text-align: center; gap: 16px; margin-top: 40px; padding-top: 20px; }
  .footer__bar-r { justify-content: center; }
  .footer__bar-l { text-align: center; }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .footer__soc, .footer__col li a, .footer__bar-l a { transition: none; }
  .footer__soc:hover { transform: none; }
}

/* -------- Forms -------- */
.form { display: grid; gap: 20px; max-width: 720px; }
.form__row { display: grid; gap: 8px; }
.form__row label { font-size: 13px; font-weight: 600; color: var(--ink); }
.form__row input, .form__row textarea, .form__row select {
  border: 1px solid var(--line); background: var(--canvas);
  padding: 14px 16px; font-size: 15px; color: var(--ink);
  border-radius: 2px; transition: border-color .2s var(--ease);
}
.form__row input:focus, .form__row textarea:focus, .form__row select:focus {
  outline: none; border-color: var(--ink);
}
.form__consent { display: flex; gap: 12px; align-items: flex-start; padding-top: 8px; }
.form__consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand-red); }
.form__consent label { font-size: 13px; color: var(--ink-2); font-weight: 400; line-height: 1.45; }
.form__row.row-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .form__row.row-2 { grid-template-columns: 1fr; } }
.form__submit { margin-top: 8px; display: flex; }

/* -------- Routing cards (Contact) -------- */
.routes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
@media (max-width: 1024px) { .routes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .routes { grid-template-columns: 1fr; } }
.route {
  background: var(--canvas); border: 1px solid var(--line);
  padding: 32px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.route:hover { transform: translateY(-3px); box-shadow: 0 12px 32px -16px rgba(26,29,36,.14); }
.route .h-card { margin-top: 12px; }
.route p { margin-top: 8px; }
.route__cta { margin-top: 16px; }

/* -------- Misc page sections -------- */
.split-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
@media (max-width: 900px) { .split-2col { grid-template-columns: 1fr; gap: 32px; } }

.timeline { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 900px) { .timeline { grid-template-columns: 1fr; } }
.timeline__step { padding-top: 24px; border-top: 2px solid var(--brand-red); }
.timeline__step .eyebrow { margin-bottom: 8px; }
.timeline__step p { margin-top: 8px; }

.faq { margin-top: 48px; max-width: 880px; }
.faq__item { padding: 24px 0; border-bottom: 1px solid var(--line); }
.faq__q { color: var(--ink); }
.faq__a { margin-top: 10px; }

.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 32px; }
@media (max-width: 900px) { .fit-grid { grid-template-columns: 1fr; } }
.fit { padding: 24px; border: 1px solid var(--line); }
.fit__title { color: var(--ink); margin-bottom: 12px; }
.fit ul li { padding: 6px 0; font-size: 14px; }

/* Service blocks */
.services { margin-top: 48px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; }
@media (max-width: 900px) { .services { grid-template-columns: 1fr; } }
.service { padding: 28px 0; border-top: 1px solid var(--line); }
.service .h-card { margin-top: 8px; }
.service p { margin-top: 8px; }
.service__example { margin-top: 12px; font-size: 12px; color: var(--gray); }

/* Deep case study */
.deep { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.deep--mirror .deep__shot { order: 2; }
@media (max-width: 900px) { .deep { grid-template-columns: 1fr; gap: 32px; } .deep--mirror .deep__shot { order: 0; } }
.deep__shot { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.deep__shot .case__chrome { height: 32px; }
.deep__shot__well { height: 360px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; color: var(--gray-muted); }
.deep__shot img { width: 100%; display: block; }
.deep__body .h-card-lg { margin-top: 12px; }
.deep__body p { margin-top: 12px; }
.deep__outcome { margin-top: 24px; }

/* Ecosystem two-column model */
.eco-model { display: grid; grid-template-columns: 1fr 80px 1fr; gap: 32px; align-items: start; margin-top: 48px; }
@media (max-width: 900px) { .eco-model { grid-template-columns: 1fr; } }
.eco-col h3 { margin-bottom: 12px; }
.eco-col ul li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.eco-arrows { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; height: 100%; padding-top: 32px; }
.eco-arrows .arrow-row {
  width: 80px; height: 24px; position: relative;
  font-size: 10px; color: var(--gray); text-align: center;
}
.eco-arrows .arrow-row::before {
  content: ''; position: absolute; left: 0; right: 14px; top: 50%; height: 1px; background: var(--ink);
}
.eco-arrows .arrow-row::after {
  content: '▶'; position: absolute; right: 0; top: -3px; color: var(--ink); font-size: 12px;
}
.eco-arrows .arrow-row--rev::before { left: 14px; right: 0; }
.eco-arrows .arrow-row--rev::after { content: '◀'; left: 0; right: auto; }

/* Roster */
.roster { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 48px; }
@media (max-width: 900px) { .roster { grid-template-columns: 1fr; } }
.roster h3 { margin-bottom: 16px; }
.roster li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2); display: flex; justify-content: space-between; gap: 16px; }
.roster li .ctx { color: var(--gray); font-size: 12px; }

/* -------- Motion (reveal on scroll) -------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; }
.reveal.is-in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* -------- Utility -------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.sr-only:focus {
  position: fixed; top: 12px; left: 12px;
  width: auto; height: auto; padding: 10px 14px; margin: 0;
  clip: auto; overflow: visible; white-space: normal;
  background: var(--ink); color: var(--canvas);
  font-size: 14px; font-weight: 600; border-radius: 2px; z-index: 100;
}

a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--brand-red); outline-offset: 2px;
}

.mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; }

/* -------- Fluent Forms — re-skin to the locked design system -------- */
.dm-ff .fluentform .ff-el-group { margin-bottom: 20px; }
.dm-ff .fluentform .ff-el-input--label > label,
.dm-ff .fluentform label.ff-el-form-check-label,
.dm-ff .fluentform .ff_t_c label { font-size: 13px; font-weight: 600; color: var(--ink); font-family: inherit; }
.dm-ff .fluentform .ff-el-input--content input[type="text"],
.dm-ff .fluentform .ff-el-input--content input[type="email"],
.dm-ff .fluentform .ff-el-input--content input[type="url"],
.dm-ff .fluentform .ff-el-input--content input[type="number"],
.dm-ff .fluentform .ff-el-input--content input[type="tel"],
.dm-ff .fluentform .ff-el-input--content textarea,
.dm-ff .fluentform .ff-el-input--content select {
  border: 1px solid var(--line); background: var(--canvas);
  padding: 14px 16px; font-size: 15px; color: var(--ink);
  border-radius: 2px; transition: border-color .2s var(--ease);
  font-family: inherit; box-shadow: none;
}
.dm-ff .fluentform .ff-el-input--content input:focus,
.dm-ff .fluentform .ff-el-input--content textarea:focus,
.dm-ff .fluentform .ff-el-input--content select:focus {
  border-color: var(--ink); outline: none; box-shadow: none;
}
.dm-ff .fluentform .ff-el-form-check { display: flex; gap: 12px; align-items: flex-start; padding-top: 4px; }
.dm-ff .fluentform .ff-el-form-check input[type="checkbox"],
.dm-ff .fluentform .ff-el-form-check input[type="radio"] {
  width: 18px; height: 18px; margin: 2px 0 0 0; accent-color: var(--brand-red);
}
.dm-ff .fluentform .ff-el-form-check label { font-size: 14px; font-weight: 400; color: var(--ink-2); line-height: 1.45; }
.dm-ff .fluentform .ff-btn-submit,
.dm-ff .fluentform button[type="submit"],
.dm-ff .fluentform .ff-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 24px; font-size: 15px; font-weight: 600; letter-spacing: -0.2px;
  background: var(--brand-red); color: var(--canvas);
  border: 1px solid var(--brand-red); border-radius: 2px;
  font-family: inherit; cursor: pointer; box-shadow: none;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.dm-ff .fluentform .ff-btn-submit:hover,
.dm-ff .fluentform button[type="submit"]:hover,
.dm-ff .fluentform .ff-btn:hover { background: var(--ink); border-color: var(--ink); }
.dm-ff .fluentform .ff-el-is-error .text-danger,
.dm-ff .fluentform .error,
.dm-ff .fluentform .ff-el-validation-error { color: var(--brand-red); font-size: 13px; margin-top: 6px; }
.dm-ff .fluentform .ff-el-is-error input,
.dm-ff .fluentform .ff-el-is-error textarea,
.dm-ff .fluentform .ff-el-is-error select { border-color: var(--brand-red); }
.dm-ff .ff-message-success,
.dm-ff .ff_msg_temp,
.dm-ff .fluent_form_success {
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand-red);
  padding: 20px 24px; color: var(--ink); font-size: 15px; border-radius: 2px;
}
.dm-ff .fluentform .ff-required { color: var(--brand-red); margin-left: 2px; }
.dm-ff .fluentform .ff-el-input--label { margin-bottom: 8px; }

/* -------- Sticky nav above all content + admin-bar offset -------- */
.nav { z-index: 100; }
.admin-bar .nav { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .nav { top: 46px; }
}
@media screen and (max-width: 600px) {
  .admin-bar .nav { top: 0; } /* WP hides admin bar entirely under 600px when logged in */
}

/* =====================================================================
   TRANSFORMATION BATCH — wheel + motion, Why Operators, services
   icon-led upgrade, tight collage, 3-zone ecosystem, About upgrades.
   Locked palette + Inter 400/600.
   ===================================================================== */

/* Hero sub secondary line (smaller paragraph beneath the lead statement). */
.hero__sub-secondary { font-size: 16px; color: var(--ink-2); margin-top: 12px; line-height: 1.5; }
.hero__proofline { font-size: 13px; color: var(--gray); font-weight: 400; margin-top: 20px; line-height: 1.4; }

/* ---------------------- THE WHEEL (homepage + vendor) ---------------------- */
.wheel-section .wheel__head { max-width: 880px; }
.wheel {
  --wheel-size: min(720px, calc(100vw - 64px));
  --ring-radius: calc(var(--wheel-size) * 0.388);  /* path/node ring at 280/720 */
  position: relative;
  width: var(--wheel-size); height: var(--wheel-size);
  margin: 0 auto;
}
.wheel__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wheel__svg .wheel__breath {
  fill: var(--brand-red); fill-opacity: 0.08;
  transform-origin: 360px 360px;
  animation: wheelBreath 4s ease-in-out infinite;
}
.wheel__svg .wheel__breath--lg { fill-opacity: 0.04; animation-duration: 6s; }
.wheel-section--blue .wheel__svg .wheel__breath { fill: var(--brand-blue); }
@keyframes wheelBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.14); }
}
.wheel__svg .wheel__path {
  fill: none; stroke-width: 1.5; stroke-dasharray: 2 2;
  stroke-linecap: round;
}
.wheel__svg .wheel__path--blue { stroke: var(--brand-blue); }
.wheel__svg .wheel__path--red  { stroke: var(--brand-red);  }
.wheel__svg .wheel__path[data-anim] {
  stroke-dasharray: var(--wheel-len);
  stroke-dashoffset: var(--wheel-len);
  transition: stroke-dashoffset .55s var(--ease);
}
.wheel.is-drawn .wheel__svg .wheel__path[data-anim] {
  stroke-dasharray: 2 2;
  stroke-dashoffset: 0;
}
.wheel__svg .wheel__pathcap { stroke: none; }
.wheel__svg .wheel__pathcap--blue { fill: var(--brand-blue); }
.wheel__svg .wheel__pathcap--red  { fill: var(--brand-red); }
.wheel__svg .wheel__flow {
  r: 4; opacity: 0;
}
.wheel.is-drawn .wheel__svg .wheel__flow {
  animation: wheelFlowFade 3s linear infinite;
}
@keyframes wheelFlowFade {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; }
}
.wheel__svg .wheel__flow--blue { fill: var(--brand-blue); }
.wheel__svg .wheel__flow--red  { fill: var(--brand-red); }

/* Center anchor (red on homepage, blue on vendor). */
.wheel__anchor {
  position: absolute; left: 50%; top: 50%;
  width: 200px; height: 200px; margin: -100px 0 0 -100px;
  border-radius: 50%;
  background: var(--brand-red);
  display: flex; align-items: center; justify-content: center;
  color: var(--canvas);
  box-shadow: 0 18px 50px rgba(215,38,61,.32);
  transform: scale(.8); opacity: 0;
  transition: transform .4s var(--ease), opacity .4s var(--ease);
  z-index: 3;
}
.wheel-section--blue .wheel__anchor { background: var(--brand-blue); box-shadow: 0 18px 50px rgba(27,60,122,.32); }
.wheel.is-drawn .wheel__anchor { transform: scale(1); opacity: 1; }
.wheel__anchor-inner { text-align: center; padding: 0 16px; }
.wheel__anchor-l1 { font-size: 14px; font-weight: 600; letter-spacing: 0.4px; line-height: 1.15; }
.wheel__anchor-line { display: block; width: 32px; height: 1px; background: rgba(255,255,255,.45); margin: 10px auto; }
.wheel__anchor-l2 { font-size: 10px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: rgba(255,255,255,.8); line-height: 1.3; }

/* Service nodes around the ring. */
.wheel__node {
  position: absolute; left: 50%; top: 50%;
  width: 96px; height: 96px; margin: -48px 0 0 -48px;
  border-radius: 50%; background: var(--canvas);
  border: 1.5px solid var(--brand-blue);
  padding: 0; cursor: pointer; font: inherit; color: inherit;
  transform: rotate(var(--angle, 0deg)) translateY(calc(-1 * var(--ring-radius)));
  opacity: 0;
  transition: opacity .35s var(--ease), transform .3s var(--ease), border-width .15s var(--ease), box-shadow .2s var(--ease);
  z-index: 2;
}
.wheel__node--red { border-color: var(--brand-red); }
.wheel.is-drawn .wheel__node { opacity: 1; }
.wheel__node-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 100%; height: 100%;
  transform: rotate(calc(-1 * var(--angle, 0deg)));
  padding: 8px 10px;
  text-align: center;
}
.wheel__node-icon { color: var(--brand-red); display: inline-flex; }
.wheel__node--blue .wheel__node-icon { color: var(--brand-blue); }
.wheel__node-title { font-size: 11px; font-weight: 600; color: var(--ink); letter-spacing: -0.1px; line-height: 1.1; }
.wheel__node-desc  { display: none; } /* shown via tooltip caption below the wheel */
.wheel__node:hover {
  transform: rotate(var(--angle, 0deg)) translateY(calc(-1 * var(--ring-radius))) translateY(-4px);
  border-width: 2.5px;
  box-shadow: 0 12px 28px rgba(26,29,36,.18);
}
.wheel__node:focus { outline: none; box-shadow: 0 0 0 3px rgba(215,38,61,.25); }
.wheel__node--blue:focus { box-shadow: 0 0 0 3px rgba(27,60,122,.25); }

.wheel__tooltip {
  margin-top: 24px; text-align: center;
  font-size: 14px; color: var(--ink-2); min-height: 22px;
}
.wheel__geo-note {
  margin-top: 12px; text-align: center; font-size: 12px;
  color: var(--gray, #6C7280); font-style: italic;
}
.wheel__geo-note span { color: var(--brand-red); font-style: normal; }

/* Reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .wheel__svg .wheel__breath { animation: none !important; }
  .wheel__svg .wheel__flow,
  .wheel.is-drawn .wheel__svg .wheel__flow { animation: none !important; opacity: 0 !important; }
  .wheel__anchor { transform: scale(1) !important; opacity: 1 !important; transition: none !important; }
  .wheel__node { opacity: 1 !important; transition: none !important; }
  .wheel__svg .wheel__path[data-anim] {
    stroke-dasharray: 2 2 !important; stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}

/* Mobile: collapse wheel to vertical (anchor card on top, services 2-col below). */
@media (max-width: 900px) {
  .wheel {
    --wheel-size: 100%;
    height: auto; display: flex; flex-direction: column; gap: 24px;
  }
  .wheel__svg { display: none; }
  .wheel__anchor {
    position: static; width: 100%; max-width: 360px; height: auto; margin: 0 auto;
    border-radius: 14px; padding: 28px 24px;
  }
  .wheel__node {
    position: static; width: 100%; height: auto; margin: 0;
    border-radius: 10px; transform: none; padding: 16px;
  }
  .wheel__node:hover { transform: translateY(-2px); }
  .wheel__node-inner { transform: none; flex-direction: row; gap: 12px; justify-content: flex-start; text-align: left; padding: 0; }
  .wheel__node-title { font-size: 14px; }
  .wheel__node-desc  { display: block; font-size: 12px; color: var(--gray, #6C7280); line-height: 1.4; }
  .wheel__node-inner { flex-wrap: wrap; }
  .wheel__node-title, .wheel__node-desc { flex-basis: calc(100% - 40px); }
  .wheel__nodes-mobile-wrap { /* unused */ }
}

/* ---------------------- WHY OPERATORS, NOT AGENCIES ---------------------- */
.why-ops__head { max-width: 880px; }
.why-ops__head .h-section em { font-style: italic; color: var(--brand-red); }
.why-ops__grid {
  display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start;
}
@media (max-width: 900px) { .why-ops__grid { grid-template-columns: 1fr; gap: 24px; } }
.why-ops__card {
  background: var(--canvas); border: 1px solid var(--line); border-radius: 12px;
  padding: 28px 28px 30px;
}
.why-ops__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.7px; text-transform: uppercase; color: var(--gray); margin-bottom: 14px; }
.why-ops__list { display: flex; flex-direction: column; gap: 14px; }
.why-ops__list li { display: flex; align-items: flex-start; gap: 12px; color: var(--ink); font-weight: 600; font-size: 15px; line-height: 1.4; }
.why-ops__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-red); margin-top: 8px; flex: 0 0 8px; }
.why-ops__line { font-size: 24px; font-weight: 600; color: var(--ink); letter-spacing: -0.4px; line-height: 1.25; }
.why-ops__line em { font-style: italic; color: var(--brand-red); }

/* ---------------------- WHAT WE DO — icon-led 8-card grid ---------------------- */
.svc8__head { max-width: 880px; }
.svc8__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1100px) { .svc8__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .svc8__grid { grid-template-columns: 1fr; } }
.svc8 {
  background: var(--canvas); border: 1px solid var(--line); border-radius: 12px;
  padding: 24px 22px 26px; scroll-margin-top: 80px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.svc8:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(26,29,36,.10); border-color: #DDE1E7; }
.svc8__icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand-red);
  transition: background .2s var(--ease);
}
.svc8:hover .svc8__icon { background: rgba(215,38,61,0.08); }
.svc8__title { font-size: 18px; font-weight: 600; letter-spacing: -0.3px; color: var(--ink); line-height: 1.25; margin-top: 16px; }
.svc8__desc  { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin-top: 8px; }

/* ---------------------- REAL PHARMACY WEBSITES — case-study cards ---------------------- */
.rpw__head { max-width: 880px; }
.rpw {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  align-items: stretch;
}
@media (max-width: 1100px) { .rpw { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .rpw { grid-template-columns: 1fr; } }

.rpw-card {
  display: flex; flex-direction: column;
  background: var(--canvas); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(26,29,36,.02);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.rpw-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 56px -24px rgba(26,29,36,.22), 0 4px 12px -4px rgba(26,29,36,.06);
  border-color: #DDE1E7;
}

.rpw-card__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--line);
}
.rpw-card__logo {
  display: flex; align-items: center;
  min-height: 36px; max-height: 36px;
}
.rpw-card__logo img {
  max-height: 32px; width: auto; object-fit: contain; display: block;
}
.rpw-card__wordmark {
  font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -0.3px;
}
.rpw-card__live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--gray);
}
.rpw-card__live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22A06B;
  box-shadow: 0 0 0 2px rgba(34,160,107,.18);
}

.rpw-card__meta { padding: 18px 24px 14px; }
.rpw-card__name {
  font-size: 20px; font-weight: 700; letter-spacing: -0.4px;
  color: var(--ink); line-height: 1.2; margin: 0;
}
.rpw-card__summary {
  font-size: 14px; line-height: 1.55; color: var(--ink-2);
  margin: 8px 0 0;
}

.rpw-card__shot {
  position: relative;
  margin: 4px 24px;
  aspect-ratio: 16 / 10;
  background: linear-gradient(180deg, #F2F4F8 0%, #E8EBF1 100%);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.rpw-card__shot img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
  transition: transform .6s var(--ease);
}
.rpw-card:hover .rpw-card__shot img { transform: scale(1.02); }
.rpw-card__shot::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 38px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,.06) 100%);
  pointer-events: none;
}

.rpw-card__cta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px 22px;
  color: var(--ink); text-decoration: none;
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.1px;
  margin-top: auto;
}
.rpw-card__cta-label {
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.rpw-card__cta-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-size: 13px; line-height: 1;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.rpw-card__cta:hover .rpw-card__cta-label { color: var(--brand-red); border-color: var(--brand-red); }
.rpw-card__cta:hover .rpw-card__cta-arrow { background: var(--brand-red); transform: translateX(3px); }

/* ---------------------- INDUSTRY PARTNER SERVICES (vendor 10-card) ---------------------- */
.ps__head { max-width: 880px; }
.ps__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
@media (max-width: 1100px) { .ps__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .ps__grid { grid-template-columns: 1fr; } }
.ps {
  background: var(--canvas); border: 1px solid var(--line); border-radius: 10px;
  padding: 22px 22px 24px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.ps:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(26,29,36,.08); border-color: #DDE1E7; }
.ps__icon {
  width: 40px; height: 40px; background: var(--surface); border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--brand-red);
}
.ps__title { font-size: 16px; font-weight: 600; letter-spacing: -0.2px; color: var(--ink); line-height: 1.3; margin-top: 16px; }
.ps__desc  { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-top: 8px; }

/* ---------------------- ECOSYSTEM — 3-ZONE COMPOSITION ---------------------- */
.eco3 {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px;
  align-items: stretch;
}
.eco3__zone {
  position: relative; z-index: 2;
  border-radius: 14px;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.eco3__zone--pharm,
.eco3__zone--part {
  background: var(--canvas); border: 1px solid var(--line); padding: 32px 30px;
}
.eco3__label { font-size: 11px; letter-spacing: 0.8px; font-weight: 700; text-transform: uppercase; }
.eco3__label--red  { color: var(--brand-red); }
.eco3__label--blue { color: var(--brand-blue); }
.eco3__big {
  font-size: 22px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.4px; line-height: 1.2; margin-top: 12px;
}
.eco3__list {
  list-style: none; padding: 0; margin: 18px 0 0;
  display: flex; flex-direction: column; gap: 8px;
}
.eco3__list li {
  font-size: 14.5px; color: var(--ink-2);
  padding-left: 16px; position: relative;
  line-height: 1.4;
}
.eco3__list li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%;
}
.eco3__zone--pharm .eco3__list li::before { background: var(--brand-red); }
.eco3__zone--part  .eco3__list li::before { background: var(--brand-blue); }

.eco3__zone--hub {
  background: var(--ink); color: var(--canvas); padding: 44px 30px;
  text-align: center;
  box-shadow: 0 14px 40px rgba(26,29,36,.16);
}
.eco3__hub-name {
  font-size: 18px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}
.eco3__hub-tag {
  font-size: 15px; color: rgba(255,255,255,.92);
  margin: 14px 0 0; line-height: 1.5;
  font-style: normal; letter-spacing: -0.1px;
  max-width: 320px; margin-left: auto; margin-right: auto;
}
.eco3__pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 22px; }
.eco3__pill {
  display: inline-flex; align-items: center;
  font-size: 11px; letter-spacing: 0.6px; font-weight: 600; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.3); color: rgba(255,255,255,.9);
  text-decoration: none;
  transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
a.eco3__pill:hover {
  color: #fff;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.6);
}
a.eco3__pill--red:hover {
  background: var(--brand-red);
  border-color: var(--brand-red);
}
a.eco3__pill--blue:hover {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
}
a.eco3__pill:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.eco3__svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}
.eco3__svg path { fill: none; stroke-width: 1.5; }
.eco3__svg path[data-eco3-kind="red"]  { stroke: var(--brand-red); }
.eco3__svg path[data-eco3-kind="blue"] { stroke: var(--brand-blue); }
.eco3__svg .eco3-head { stroke: none; opacity: 0; transition: opacity .35s var(--ease); }
.eco3.is-drawn .eco3__svg .eco3-head {
  opacity: 1; transition-delay: 1.2s;
  animation: eco3Pulse 2s ease-in-out 1.2s infinite;
}
@keyframes eco3Pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .9; }
}
/* Labels live in a sibling SVG above the cards so they are never clipped
   by the dark hub card. Path strokes remain at z-index 1 (behind cards) so
   they appear to terminate cleanly at the card edge. */
.eco3__labels {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 3;
}
.eco3__labels .eco3-label-pill {
  fill: var(--canvas);
  stroke: var(--line);
  stroke-width: 1;
}
.eco3__labels .eco3-label {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
  fill: var(--gray, #6C7280); letter-spacing: 0.4px;
}
.eco3__svg path[data-eco3-anim] {
  transition: stroke-dashoffset 1.2s var(--ease);
}
.eco3.is-drawn .eco3__svg path[data-eco3-anim] { stroke-dashoffset: 0; }
.eco3__caption { max-width: 880px; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) {
  .eco3__svg path[data-eco3-anim] { stroke-dashoffset: 0 !important; transition: none !important; }
  .eco3__svg .eco3-head, .eco3.is-drawn .eco3__svg .eco3-head { animation: none !important; opacity: 1 !important; }
}
@media (max-width: 900px) {
  .eco3 { grid-template-columns: 1fr; gap: 16px; }
  .eco3__svg,
  .eco3__labels { display: none; }
  .eco3__zone--hub { order: -1; }
}

/* ---------------------- ABOUT — capabilities, advantage, team ---------------------- */
.about-split { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .about-split { grid-template-columns: 1fr; gap: 24px; } }

.about-cap__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1100px) { .about-cap__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .about-cap__grid { grid-template-columns: 1fr; } }
.about-cap__card {
  background: var(--canvas); border: 1px solid var(--line); border-radius: 12px;
  padding: 24px 22px 26px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.about-cap__card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(26,29,36,.08); }
.about-cap__num { font-size: 13px; color: var(--brand-red); font-weight: 600; letter-spacing: 0.6px; }
.about-cap__title { font-size: 17px; font-weight: 600; color: var(--ink); margin-top: 10px; letter-spacing: -0.2px; line-height: 1.3; }
.about-cap__desc { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-top: 10px; }

.about-adv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .about-adv { grid-template-columns: 1fr; } }
.about-adv__card {
  background: var(--canvas); border: 1px solid var(--line); border-radius: 12px;
  padding: 36px 32px 34px;
  position: relative; overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.about-adv__card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(26,29,36,.10); }
.about-adv__title { color: var(--ink); }
.about-adv--upgraded .about-adv__card { padding-top: 44px; }
.about-adv__bar {
  position: absolute; top: 0; left: 32px;
  width: 40px; height: 3px; background: var(--brand-red); border-radius: 2px;
}

.about-caps { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
@media (max-width: 900px) { .about-caps { grid-template-columns: 1fr; gap: 32px; } }
.about-caps__list { margin-top: 16px; }
.about-caps__list li {
  padding: 12px 0; border-bottom: 1px solid var(--line);
  color: var(--ink); font-weight: 600; font-size: 16px;
}

.about-team__well {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  aspect-ratio: 1200 / 500; min-height: 280px;
  display: flex; align-items: center; justify-content: center;
}
.about-team__well-inner { text-align: center; }
.about-team__well-label { display: block; font-size: 12px; letter-spacing: 0.8px; font-weight: 600; color: var(--gray); text-transform: uppercase; }
.about-team__well-note  { display: block; font-size: 13px; color: var(--gray-muted); margin-top: 8px; font-style: italic; }

/* =====================================================================
   SURGICAL CONTENT PUSH — Who We Serve + Both Sides Upgraded
   ===================================================================== */

/* Tight section modifier (72px desktop / 56px mobile). */
.section--tight { padding: 72px 0; }
@media (max-width: 767px) { .section--tight { padding: 56px 0; } }

/* ---------- VENDOR: WHO WE SERVE (6 cards, blue accent) ---------- */
.wws__head { max-width: 880px; }
.wws__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1024px) { .wws__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .wws__grid { grid-template-columns: 1fr; } }
.wws {
  background: var(--canvas); border: 1px solid var(--line); border-radius: 16px;
  padding: 28px;
  transition: transform .2s var(--ease), border-color .2s var(--ease), border-width .2s var(--ease), box-shadow .2s var(--ease);
}
.wws:hover {
  transform: translateY(-4px);
  border-color: var(--brand-blue);
  box-shadow: 0 14px 36px rgba(27,60,122,.10);
}
.wws__icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--canvas); display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand-blue);
  transition: background .2s var(--ease);
}
.wws__icon svg { width: 24px; height: 24px; stroke-width: 1.5; }
.wws:hover .wws__icon { background: rgba(27,60,122,0.08); }
.wws__eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.7px; text-transform: uppercase;
  color: var(--brand-blue); margin-top: 16px;
}
.wws__title { font-size: 18px; font-weight: 600; letter-spacing: -0.3px; color: var(--ink); line-height: 1.3; margin-top: 6px; }
.wws__sub   { font-size: 14px; color: var(--ink-2); font-style: italic; line-height: 1.45; margin-top: 8px; }
.wws__desc  { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin-top: 8px; }

/* ---------- ECOSYSTEM: BOTH SIDES UPGRADED (3 equal-height cards) ---------- */
.bs3__head { max-width: 880px; }
.bs3__sub { font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.bs3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  align-items: stretch;
}
@media (max-width: 900px) { .bs3 { grid-template-columns: 1fr; } }
.bs3__card {
  background: var(--canvas); border: 1px solid var(--line); border-radius: 16px;
  padding: 32px;
  display: flex; flex-direction: column;
  transition: transform .22s var(--ease), border-color .22s var(--ease), border-width .22s var(--ease), box-shadow .22s var(--ease);
}
.bs3__card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-red);
  box-shadow: 0 14px 36px rgba(215,38,61,.10);
}
.bs3__icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--canvas); display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand-red);
  transition: background .22s var(--ease);
}
.bs3__icon svg { width: 28px; height: 28px; stroke-width: 1.5; }
.bs3__card:hover .bs3__icon { background: rgba(215,38,61,0.12); }
.bs3__bar { display: block; width: 40px; height: 3px; background: var(--brand-red); border-radius: 2px; margin-top: 22px; }
.bs3__title { font-size: 20px; font-weight: 600; letter-spacing: -0.3px; color: var(--ink); line-height: 1.25; margin-top: 18px; }
.bs3__body  { font-size: 15px; color: var(--ink-2); line-height: 1.5; margin-top: 12px; }

/* Staggered entrance (existing .reveal transition picks up delays per nth-child). */
.bs3 .bs3__card.reveal:nth-child(2) { transition-delay: 120ms; }
.bs3 .bs3__card.reveal:nth-child(3) { transition-delay: 240ms; }
@media (prefers-reduced-motion: reduce) {
  .bs3 .bs3__card.reveal:nth-child(n) { transition-delay: 0ms !important; }
}

/* =====================================================================
   VISUAL UPGRADE PASS — leadership grid, brand SVG, image treatment
   ===================================================================== */

/* ---------- LEADERSHIP — editorial 5-portrait, featured President + 4 ---------- */
.leaders {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  align-items: start;
}
@media (max-width: 1100px) { .leaders { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .leaders { grid-template-columns: 1fr; } }

.leader {
  display: flex; flex-direction: column;
  background: var(--canvas); border: 1px solid var(--line); border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(26,29,36,.02);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.leader:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 56px -24px rgba(26,29,36,.22), 0 4px 12px -4px rgba(26,29,36,.06);
  border-color: #DDE1E7;
}
.leader__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  background: linear-gradient(180deg, #232730 0%, #14171D 100%);
  overflow: hidden;
}
.leader__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  display: block;
  filter: contrast(1.02) saturate(1.02);
  transition: transform .6s var(--ease);
}
.leader:hover .leader__photo img { transform: scale(1.03); }
.leader__photo::after {
  /* Editorial gradient on the bottom edge of the portrait. */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 72px;
  background: linear-gradient(180deg, rgba(20,23,29,0) 0%, rgba(20,23,29,.55) 100%);
  pointer-events: none;
}
/* Body locks to a fixed total so every non-featured card is identical.
   eyebrow 14 + 6 margin + name 28 + 12 margin + bio 88 + (22 top + 28 bottom padding) = 198 */
.leader__body {
  padding: 22px 24px 28px;
  display: flex; flex-direction: column;
  flex: 1 1 auto;
  height: 198px;
  box-sizing: border-box;
}
.leader__title-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.7px; text-transform: uppercase;
  color: var(--brand-red);
  line-height: 14px;
  height: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.leader__name {
  font-size: 22px; font-weight: 700; letter-spacing: -0.4px; color: var(--ink); line-height: 1.25;
  margin: 6px 0 0;
  height: 28px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}
/* Bio reserves 4 lines (14px × 1.55 line-height × 4 ≈ 88px). Longer bios clamp; shorter ones reserve the same block. */
.leader__bio {
  font-size: 14px; color: var(--ink-2); line-height: 1.55;
  margin: 12px 0 0;
  height: 88px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

/* Featured (Jason): spans 2 columns × 2 rows on desktop, becomes a magazine-style left-aligned spread. */
.leader--featured {
  grid-column: span 2; grid-row: span 2;
  display: grid; grid-template-columns: 5fr 7fr; align-items: stretch;
}
.leader--featured .leader__photo { aspect-ratio: auto; height: 100%; min-height: 420px; }
.leader--featured .leader__body {
  padding: 36px 36px 36px 40px;
  align-self: center;
  height: auto;            /* featured spans 2 rows, so its body shouldn't lock to 198 */
}
.leader--featured .leader__name {
  font-size: 32px; letter-spacing: -0.6px;
  height: auto;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}
.leader--featured .leader__bio {
  font-size: 15px; line-height: 1.6; margin-top: 16px;
  height: auto;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}
.leader--featured .leader__title-eyebrow { font-size: 12px; line-height: 16px; height: 16px; }

@media (max-width: 1100px) {
  .leader--featured { grid-column: span 2; grid-row: auto; grid-template-columns: 5fr 7fr; }
}
@media (max-width: 720px) {
  .leader--featured { grid-template-columns: 1fr; grid-column: span 1; }
  .leader--featured .leader__photo { min-height: 360px; aspect-ratio: 4 / 5; }
  .leader--featured .leader__body { padding: 22px 24px 28px; }
  .leader--featured .leader__name { font-size: 26px; }
}

/* The retired placeholder team well — kept as no-op so any stale markup hides cleanly. */
.about-team__well { display: none; }

/* =====================================================================
   VISUAL CLEANUP PHASE — dark section rhythm, founder presence,
   environment photography, motion polish, premium proof treatment.
   ===================================================================== */

/* ---------- Dark section cascade (Why Operators, etc.) ---------- */
.section--ink {
  background: var(--ink); color: var(--canvas);
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: relative;
  overflow: hidden;          /* contain ::before radial glow that extends -120px past edge */
}
.section--ink::before {
  /* faint radial brand glow in the bottom-right corner — quiet signature */
  content: ''; position: absolute; right: -120px; bottom: -120px;
  width: 480px; height: 480px;
  background: radial-gradient(circle at center, rgba(215,38,61,.18) 0%, rgba(215,38,61,0) 70%);
  pointer-events: none;
}
.section--ink > .wrap { position: relative; z-index: 1; }
/* Color overrides inside dark sections */
.section--ink .h-section,
.section--ink .h-card-lg,
.section--ink .h-card,
.section--ink .h-final,
.section--ink .h-hero { color: var(--canvas); }
.section--ink .h-final em, .section--ink .h-hero em { color: var(--brand-red); }
.section--ink .h-section em,
.section--ink .h-card-lg em { color: var(--brand-red); font-style: italic; }
.section--ink .body,
.section--ink .body-l,
.section--ink p { color: rgba(255,255,255,.78); }
.section--ink .eyebrow { color: rgba(255,255,255,.55); }
.section--ink .eyebrow .dot { background: var(--brand-red); }
.section--ink .hairline-red { background: var(--brand-red); }

/* Why-Operators within a dark section: invert card colors */
.section--ink .why-ops__card {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}
.section--ink .why-ops__eyebrow { color: rgba(255,255,255,.55); }
.section--ink .why-ops__list li { color: var(--canvas); }
.section--ink .why-ops__dot { background: var(--brand-red); }
.section--ink .why-ops__line { color: var(--canvas); }
.section--ink .why-ops__line em { color: var(--brand-red); }

/* ---------- Founder attribution row ---------- */
.founder-attr {
  display: flex; align-items: center; gap: 14px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.section--ink .founder-attr { border-top-color: rgba(255,255,255,.10); }
.founder-attr__photo {
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover; object-position: center top;
  display: block;
  border: 2px solid rgba(255,255,255,.14);
  box-shadow: 0 4px 12px rgba(0,0,0,.20);
}
.founder-attr__meta { display: flex; flex-direction: column; gap: 2px; }
.founder-attr__name {
  font-size: 15px; font-weight: 700; letter-spacing: -0.2px;
  color: inherit;
}
.founder-attr__role {
  font-size: 12px; color: rgba(255,255,255,.55);
  letter-spacing: 0.3px;
}
/* On light backgrounds the attribution uses ink colors */
section:not(.section--ink) .founder-attr { border-top-color: var(--line); }
section:not(.section--ink) .founder-attr__photo { border-color: var(--line); box-shadow: 0 4px 12px rgba(26,29,36,.08); }
section:not(.section--ink) .founder-attr__name { color: var(--ink); }
section:not(.section--ink) .founder-attr__role { color: var(--gray); }

/* ---------- About origin — image-left, text-right editorial spread ---------- */
.about-origin {
  display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center;
}
@media (max-width: 900px) { .about-origin { grid-template-columns: 1fr; gap: 32px; } }
.about-origin__photo {
  position: relative; margin: 0;
  border-radius: 18px; overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 28px 60px -32px rgba(26,29,36,.32), 0 4px 12px -4px rgba(26,29,36,.08);
}
.about-origin__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block;
  filter: saturate(1.02) contrast(1.02);
}
.about-origin__photo::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  background: linear-gradient(180deg, rgba(20,23,29,0) 0%, rgba(20,23,29,.55) 100%);
  pointer-events: none;
}
.about-origin__caption {
  position: absolute; left: 22px; bottom: 18px; z-index: 1;
  font-size: 12px; letter-spacing: 0.6px; color: rgba(255,255,255,.92);
  font-style: italic;
}

/* Founder portrait variant — 3:4 portrait crop + red badge corner */
.about-origin__photo--founder { aspect-ratio: 3 / 4; }
.about-origin__photo--founder img { object-position: center 18%; }
.about-origin__badge {
  position: absolute; left: 18px; top: 18px; z-index: 2;
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  background: var(--brand-red); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.9px;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(215,38,61,.32);
}

/* Founder name + role typographic pair (replaces inline-styled h-card-lg + meta-l) */
.founder__name {
  font-family: inherit;
  font-size: 38px; font-weight: 700; letter-spacing: -0.8px;
  color: var(--ink); line-height: 1.1;
  margin: 0;
}
.founder__role {
  font-size: 14px; font-weight: 600; letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--brand-red);
  margin: 0;
}
@media (max-width: 720px) { .founder__name { font-size: 30px; } }

/* ---------- Dark FINAL CTA upgrade ---------- */
.section--final-dark { background: var(--ink); color: var(--canvas); padding: 72px 0 80px; border-bottom: 0; position: relative; overflow: hidden; }
.section--final-dark::before {
  content: ''; position: absolute; right: -240px; top: -120px;
  width: 640px; height: 640px;
  background: radial-gradient(circle at center, rgba(215,38,61,.22) 0%, rgba(215,38,61,0) 65%);
  pointer-events: none;
}
.section--final-dark::after {
  content: ''; position: absolute; left: -160px; bottom: -180px;
  width: 480px; height: 480px;
  background: radial-gradient(circle at center, rgba(27,60,122,.18) 0%, rgba(27,60,122,0) 65%);
  pointer-events: none;
}
.section--final-dark > .wrap { position: relative; z-index: 1; }
.section--final-dark .h-final { color: var(--canvas); font-size: 64px; }
.section--final-dark .h-final em { color: var(--brand-red); }
.section--final-dark .final__row {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 22px 26px;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.section--final-dark .final__row:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
  transform: translateX(4px);
}
.section--final-dark .final__row .eyebrow { color: rgba(255,255,255,.55); }
.section--final-dark .final__row .eyebrow .dot { background: var(--brand-red); }
.section--final-dark .final__row.final__row--vendor .eyebrow .dot { background: var(--brand-blue); }
.section--final-dark .final__row .meta-l { color: var(--canvas); }
.section--final-dark .final__row .arrow { color: var(--brand-red); }
.section--final-dark .final__row--vendor .arrow { color: var(--brand-blue); }
@media (max-width: 900px) {
  .section--final-dark .h-final { font-size: 48px; }
}

/* ---------- MOTION POLISH ---------- */
/* Eyebrow red dot subtle pulse when first revealed (twice, then static). */
@keyframes dmDotPulse {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(215,38,61,.5); }
  50%  { transform: scale(1.5); box-shadow: 0 0 0 6px rgba(215,38,61,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(215,38,61,0); }
}
.reveal.is-in .eyebrow .dot { animation: dmDotPulse 0.9s var(--ease) both 2; }
.reveal.is-in .eyebrow.eyebrow--blue .dot { animation: dmDotPulse 0.9s var(--ease) both 2; box-shadow: 0 0 0 0 rgba(27,60,122,.5); }

/* Subtle hover spin on the hero arrow */
.hero__visual-arrow { transition: transform .25s var(--ease), background-color .25s var(--ease); }
.hero__visual:hover .hero__visual-arrow { transform: rotate(-8deg) scale(1.05); }

/* Logo wall mass-hover dim: when one cell is hovered, peers fade slightly */
.logo-grid:has(.logo-cell:hover) .logo-cell:not(:hover) {
  opacity: .55;
  transition: opacity .25s var(--ease);
}
.logo-grid .logo-cell { transition: opacity .25s var(--ease), background .25s var(--ease); }

/* Case scope pill hover lift */
.case__scope li {
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.case__scope li:hover {
  transform: translateY(-2px);
  border-color: var(--brand-red);
  background: var(--canvas);
}

/* Dark sections get a slightly slower reveal (cinematic) */
.section--ink .reveal,
.section--final-dark .reveal {
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .reveal.is-in .eyebrow .dot,
  .reveal.is-in .eyebrow.eyebrow--blue .dot { animation: none !important; }
  .hero__visual:hover .hero__visual-arrow { transform: none !important; }
  .case__scope li:hover { transform: none !important; }
  .section--ink .reveal,
  .section--final-dark .reveal { transition: opacity .3s, transform .3s !important; }
  .logo-grid:has(.logo-cell:hover) .logo-cell:not(:hover) { opacity: 1 !important; }
}

/* =====================================================================
   FORM PROOF MODULES — wired beneath each form page.
   Reply from Josh, What happens next, Logo strip, ACF testimonial slot.
   ===================================================================== */

.form-proof {
  display: grid;
  grid-template-columns: 5fr 7fr;
  grid-template-areas:
    "reply steps"
    "logos logos"
    "quote quote";
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .form-proof {
    grid-template-columns: 1fr;
    grid-template-areas:
      "reply"
      "steps"
      "logos"
      "quote";
  }
}

/* Shared card chrome */
.form-proof__reply,
.form-proof__steps,
.form-proof__logos,
.form-proof__quote {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 1px 0 rgba(26,29,36,.02);
}

/* ----- Reply from Josh ----- */
.form-proof__reply {
  grid-area: reply;
  display: flex; gap: 18px; align-items: flex-start;
  position: relative;
}
.form-proof__reply::before {
  /* small vertical brand-red accent on the left edge */
  content: ''; position: absolute; left: 0; top: 28px; bottom: 28px;
  width: 3px; background: var(--brand-red); border-radius: 0 2px 2px 0;
}
.form-proof__photo {
  width: 72px; height: 72px; border-radius: 50%;
  object-fit: cover; object-position: center top;
  flex: 0 0 72px;
  border: 2px solid var(--line);
  box-shadow: 0 4px 12px rgba(26,29,36,.08);
}
.form-proof__reply-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.7px;
  color: var(--brand-red); text-transform: uppercase;
}
.form-proof__reply-name {
  font-size: 18px; font-weight: 700; letter-spacing: -0.3px;
  color: var(--ink); margin-top: 4px;
}
.form-proof__reply-role {
  font-size: 13px; color: var(--gray);
  margin-top: 2px; letter-spacing: 0.1px;
}
.form-proof__reply-line {
  font-size: 14px; line-height: 1.55; color: var(--ink-2);
  margin-top: 12px; font-style: italic;
}

/* ----- What happens next ----- */
.form-proof__steps { grid-area: steps; }
.form-proof__steps-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.7px;
  color: var(--gray); text-transform: uppercase;
  margin-bottom: 18px;
}
.form-proof__steps-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 18px;
}
.form-proof__steps-list li {
  display: flex; gap: 16px; align-items: flex-start;
}
.form-proof__step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand-red);
  font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--line);
}
.form-proof__step-title {
  font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.2px;
  line-height: 1.3;
}
.form-proof__step-body {
  font-size: 13px; color: var(--ink-2); line-height: 1.5;
  margin-top: 4px;
}

/* ----- Logo strip — centered, intentionally curated set ----- */
.form-proof__logos {
  grid-area: logos;
  padding: 28px 28px 32px;
  text-align: center;
}
.form-proof__logos-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.8px;
  color: var(--gray); text-transform: uppercase;
}
.form-proof__logos-row {
  margin: 18px auto 0;
  max-width: 1040px;           /* widened to accommodate 9 or 12 logos cleanly */
  display: flex; flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 22px; column-gap: 36px;
}
.form-proof__logos-row img {
  max-height: 44px;            /* slight reduction so more fit per row */
  max-width: 150px;
  width: auto; height: auto;
  filter: grayscale(1) contrast(1.05);
  opacity: .92;
  transition: filter .25s var(--ease), opacity .25s var(--ease);
}
.form-proof__logos-row img:hover { filter: grayscale(0) contrast(1); opacity: 1; }
.form-proof__logos-name {
  font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.2px;
}
@media (max-width: 900px) {
  .form-proof__logos-row { column-gap: 28px; row-gap: 20px; max-width: 100%; }
  .form-proof__logos-row img { max-height: 38px; max-width: 130px; }
}
@media (max-width: 600px) {
  .form-proof__logos-row { column-gap: 20px; row-gap: 18px; }
  .form-proof__logos-row img { max-height: 34px; max-width: 110px; }
}

/* ----- Testimonial slot (ACF-driven; only renders when populated) ----- */
.form-proof__quote {
  grid-area: quote;
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 36px 32px;
  background: linear-gradient(180deg, var(--canvas) 0%, var(--surface) 100%);
}
.form-proof__quote-mark {
  color: var(--brand-red);
  opacity: .55;
}
.form-proof__quote-body {
  font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: -0.3px;
  color: var(--ink); margin: 14px 0 0; max-width: 640px;
}
.form-proof__quote-attr {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin-top: 16px;
}
.form-proof__quote-name {
  font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: -0.2px;
}
.form-proof__quote-role {
  font-size: 12px; color: var(--gray);
}

/* =====================================================================
   CURATED PROOF STRIP — used on About + Ecosystem only.
   Centered, premium, restrained. 5 pharmacy logos + 3 industry partner
   logos in a single horizontal row with a hairline divider between groups.
   ===================================================================== */

.proof-strip {
  text-align: center;
  max-width: 1240px;            /* widened to fit 9 + 12 with breathing room */
  margin: 0 auto;
  padding: 8px 0 4px;
}
.proof-strip__head {
  max-width: 720px;
  margin: 0 auto 32px;
}
.proof-strip__head .eyebrow { justify-content: center; }
.proof-strip__lead {
  margin-top: 10px;
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.45;
}
.proof-strip__row {
  display: flex; align-items: stretch; justify-content: center;
  flex-wrap: nowrap;
  gap: 48px;
}
.proof-strip__group {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  flex: 1 1 0;                  /* groups share width — 9 / 12 logos each wrap internally */
  min-width: 0;
}
.proof-strip__group-label {
  font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--gray);
}
/* Vendor group inherits the same muted gray label as the pharmacy group —
   the colored accent lives on the logo column, not the heading. */
.proof-strip__logos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  row-gap: 22px; column-gap: 32px;
}
.proof-strip__logos img {
  max-height: 44px; max-width: 150px;   /* slight reduction to fit more cleanly */
  width: auto; height: auto;
  filter: grayscale(1) contrast(1.05);
  opacity: .92;
  transition: filter .25s var(--ease), opacity .25s var(--ease);
}
.proof-strip__logos img:hover { filter: grayscale(0) contrast(1); opacity: 1; }
/* Text wordmark fallback — same visual weight as a 44px logo, dimmed slightly. */
.proof-strip__wordmark {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 4px;
  font-size: 14px; font-weight: 600; letter-spacing: -0.2px;
  color: var(--ink); opacity: .68;
  white-space: nowrap;
}
.proof-strip__divider {
  width: 1px; align-self: stretch; min-height: 88px;
  background: var(--line);
  flex: 0 0 1px;
}
@media (max-width: 1024px) {
  .proof-strip__row { gap: 32px; }
  .proof-strip__logos { row-gap: 18px; column-gap: 24px; }
  .proof-strip__logos img { max-height: 40px; max-width: 150px; }
}
@media (max-width: 720px) {
  .proof-strip__row { flex-direction: column; gap: 28px; }
  .proof-strip__divider { width: 64px; height: 1px; min-height: 0; }
  .proof-strip__logos img { max-height: 34px; max-width: 130px; }
}


/* =====================================================================
   ADVISORY BOARD — consistent portrait cards (about strip + full page)
   ===================================================================== */

.adv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
  grid-auto-rows: 1fr;
}
.adv-grid--full {
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 1100px) {
  .adv-grid,
  .adv-grid--full { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .adv-grid,
  .adv-grid--full { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .adv-grid,
  .adv-grid--full { grid-template-columns: 1fr; }
}

.adv {
  display: flex; flex-direction: column;
  height: 100%;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(26,29,36,.02);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.adv:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -22px rgba(26,29,36,.22), 0 4px 12px -4px rgba(26,29,36,.06);
  border-color: #DDE1E7;
}

/* Portrait container — fixed square, identical across every card */
.adv__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, #232730 0%, #14171D 100%);
  overflow: hidden;
  flex: 0 0 auto;
}
.adv__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  filter: contrast(1.02) saturate(1.02);
  transition: transform .6s var(--ease);
}
.adv:hover .adv__photo img { transform: scale(1.03); }
.adv__photo::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
  background: linear-gradient(180deg, rgba(20,23,29,0) 0%, rgba(20,23,29,.45) 100%);
  pointer-events: none;
}

/* Body has a fixed total height. Combined with the 1:1 photo and grid
   align-items: stretch, every card in every row renders at identical
   total height. Each text row is hard-capped in pixels, not min-height,
   so long content cannot push the card taller than its peers. */
.adv__body {
  padding: 18px 20px 22px;
  display: flex; flex-direction: column;
  flex: 1 1 auto;
  height: 154px;            /* eyebrow 12 + m10 + name 46 + m8 + org 42 + padding (18+22) */
  box-sizing: border-box;
}

.adv__title-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase;
  color: var(--brand-red);
  line-height: 12px;
  height: 12px;
  margin: 0 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Name reserves exactly 2 lines (45px = 18px font × 1.25 line-height × 2) */
.adv__name {
  font-size: 18px; font-weight: 700; letter-spacing: -0.3px; color: var(--ink);
  line-height: 1.25;
  height: 46px;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-width: 0;
}

/* Role / org reserves exactly 2 lines (40.5px = 13.5px font × 1.5 line-height × 2) */
.adv__role,
.adv__org {
  font-size: 13.5px; color: var(--ink-2);
  line-height: 1.5;
  height: 42px;
  margin: 8px 0 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-width: 0;
}

/* Strip variant (About page) has no eyebrow, so the body is shorter */
.adv-grid:not(.adv-grid--full) .adv__body { height: 132px; }

.adv-foot {
  margin-top: 28px;
  font-size: 14px; color: var(--ink-2);
}
.adv-foot a {
  color: var(--brand-red); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease);
}
.adv-foot a:hover { border-bottom-color: var(--brand-red); }
.adv-foot .arrow { display: inline-block; transform: translateY(-1px); margin-left: 4px; }

/* =====================================================================
   BLOG — archive, single, related cards. Uses existing brand tokens.
   ===================================================================== */

.archive-hero .h-hero { font-size: 56px; letter-spacing: -1.2px; line-height: 1.05; }
@media (max-width: 720px) { .archive-hero .h-hero { font-size: 36px; } }

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 1024px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .post-grid { grid-template-columns: 1fr; } }

.post-card {
  display: flex; flex-direction: column;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 50px -22px rgba(26,29,36,.22), 0 4px 12px -4px rgba(26,29,36,.06);
  border-color: #DDE1E7;
}
.post-card__shot {
  display: block;
  aspect-ratio: 1200 / 630;
  background: linear-gradient(135deg, #1A1D24 0%, #2A3142 100%);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.post-card__img,
.post-card__shot img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .6s var(--ease);
}
.post-card:hover .post-card__img,
.post-card:hover .post-card__shot img { transform: scale(1.03); }
.post-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1 1 auto; }
.post-card__cat {
  display: inline-block;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase;
  color: var(--brand-red);
}
.post-card__title {
  font-size: 20px; font-weight: 700; letter-spacing: -0.4px;
  color: var(--ink); line-height: 1.25;
  margin: 8px 0 0;
}
.post-card__title a { color: inherit; text-decoration: none; transition: color .2s var(--ease); }
.post-card__title a:hover { color: var(--brand-red); }
.post-card__excerpt {
  font-size: 14px; line-height: 1.55; color: var(--ink-2);
  margin-top: 10px;
}
.post-card__meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: 18px;
  font-size: 12.5px; color: var(--gray);
}
.post-card__more {
  color: var(--brand-red); font-weight: 600; text-decoration: none;
  transition: padding-left .2s var(--ease);
}
.post-card__more:hover { padding-left: 4px; }

.post-pagination {
  margin-top: 56px;
  display: flex; justify-content: center; gap: 8px;
}
.post-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 6px;
  color: var(--ink); text-decoration: none;
  font-size: 14px; font-weight: 600;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.post-pagination .page-numbers:hover,
.post-pagination .current { background: var(--ink); color: var(--canvas); border-color: var(--ink); }

/* Single post */
.post-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase;
  color: var(--brand-red); text-decoration: none;
}
.post-hero__eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand-red);
}
.post-hero__title { letter-spacing: -1.4px; line-height: 1.05; }
@media (max-width: 720px) { .post-hero__title { font-size: 36px; letter-spacing: -1px; } }
.post-hero__meta {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13.5px; color: var(--gray);
}
.post-hero__sep { color: var(--gray-muted, #B0B4BC); }

.post-feature__frame {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, #1A1D24 0%, #2A3142 100%);
  aspect-ratio: 1200 / 630;
  max-width: 1100px;
  margin-left: auto; margin-right: auto;
}
.post-feature__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.post-body {
  max-width: 760px;
  margin: 0 auto;
  font-size: 17px; line-height: 1.65; color: var(--ink);
}
.post-body p { margin: 0 0 22px; }
.post-body h2 {
  font-size: 30px; font-weight: 700; letter-spacing: -0.6px; line-height: 1.2;
  color: var(--ink);
  margin: 44px 0 16px;
}
.post-body h3 {
  font-size: 22px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.25;
  color: var(--ink);
  margin: 32px 0 12px;
}
.post-body h2 + p,
.post-body h3 + p { margin-top: 0; }
.post-body ul, .post-body ol { margin: 0 0 22px; padding-left: 22px; }
.post-body li { margin-bottom: 8px; line-height: 1.6; }
.post-body a {
  color: var(--brand-red); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.post-body a:hover { text-decoration-thickness: 2px; }
.post-body blockquote {
  margin: 28px 0;
  padding: 18px 24px;
  border-left: 3px solid var(--brand-red);
  background: var(--surface);
  font-size: 18px; font-style: italic; color: var(--ink);
}
.post-body code, .post-body pre {
  background: var(--surface);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 14.5px;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.post-body img { max-width: 100%; height: auto; border-radius: 10px; margin: 24px 0; }
.post-body hr {
  border: 0; height: 1px; background: var(--line);
  margin: 36px 0;
}

.post-tags {
  max-width: 760px;
  margin-left: auto; margin-right: auto;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.post-tags__label { font-size: 12.5px; color: var(--gray); margin-right: 4px; }
.post-tags__pill {
  font-size: 12.5px; font-weight: 600;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2); text-decoration: none;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.post-tags__pill:hover {
  background: var(--ink); color: var(--canvas); border-color: var(--ink);
}

.post-cta { text-align: left; }

.post-related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 1024px) { .post-related { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .post-related { grid-template-columns: 1fr; } }

/* =====================================================================
   PREMIUM VIDEO SECTION — pharmacy growth page (+ optional smaller variant)
   ===================================================================== */

.video-section { position: relative; }
.video-section__head { margin-left: auto; margin-right: auto; }

/* Framed video container — branded card treatment */
.video-frame {
  position: relative;
  max-width: 1040px;
  margin: 32px auto 0;
  border-radius: 22px;
  background: linear-gradient(160deg, #1A1D24 0%, #2A3142 60%, #1A1D24 100%);
  padding: 18px;
  box-shadow:
    0 36px 80px -32px rgba(26,29,36,.42),
    0 6px 18px -6px rgba(26,29,36,.12);
  overflow: hidden;
  isolation: isolate;
}
.video-frame::after {
  content: '';
  position: absolute; right: -160px; top: -160px;
  width: 420px; height: 420px;
  background: radial-gradient(circle at center, rgba(215,38,61,.24) 0%, rgba(215,38,61,0) 65%);
  pointer-events: none;
  z-index: 0;
}
.video-frame__rail {
  position: absolute; left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--brand-red) 0%, var(--brand-red) 38%,
    var(--brand-blue) 62%, var(--brand-blue) 100%);
  z-index: 2;
}

/* Lite-embed: 16:9 thumbnail with play overlay; swaps to iframe on click */
.video-lite {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0; margin: 0; padding: 0;
  background: #0E1117;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}
.video-lite__thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .6s var(--ease), filter .25s var(--ease);
}
.video-lite__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,23,29,0) 0%, rgba(20,23,29,.18) 50%, rgba(20,23,29,.55) 100%);
  pointer-events: none;
}
.video-lite__play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--brand-red);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 36px -6px rgba(215,38,61,.55), 0 0 0 8px rgba(255,255,255,.08);
  transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.video-lite__play svg { margin-left: 4px; }
.video-lite__caption {
  position: absolute; left: 20px; bottom: 18px;
  font-size: 12.5px; letter-spacing: 0.8px; text-transform: uppercase;
  font-weight: 700; color: rgba(255,255,255,.92);
  background: rgba(20,23,29,.55);
  padding: 6px 12px; border-radius: 999px;
  backdrop-filter: blur(4px);
}
.video-lite:hover .video-lite__thumb { transform: scale(1.02); }
.video-lite:hover .video-lite__play {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 18px 42px -6px rgba(215,38,61,.70), 0 0 0 10px rgba(255,255,255,.12);
}
.video-lite:focus-visible { outline: 3px solid var(--brand-red); outline-offset: 4px; }

/* When JS swaps the iframe in, the iframe replaces the lite content */
.video-lite__iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
}

/* What you'll learn list */
.video-learn {
  max-width: 1040px;
  margin: 32px auto 0;
  padding: 26px 32px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.video-learn__label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase;
  color: var(--brand-red);
  margin-bottom: 16px;
}
.video-learn__list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 32px;
}
.video-learn__list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 15px; color: var(--ink); line-height: 1.4;
}
.video-learn__check {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 22px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brand-red);
  color: #fff;
  font-size: 12px; font-weight: 700;
  line-height: 1;
}

/* CTA row — visually connected to video card */
.video-cta {
  max-width: 1040px;
  margin: 32px auto 0;
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: center;
}
.video-cta .btn { padding: 16px 28px; font-size: 15px; }

/* Smaller variant — used on About page below founder */
.video-section--compact .video-section__head .h-section { font-size: 32px; line-height: 1.15; }
.video-section--compact .video-frame { max-width: 760px; padding: 14px; border-radius: 18px; }
.video-section--compact .video-lite__play { width: 64px; height: 64px; }
.video-section--compact .video-lite__play svg { width: 26px; height: 26px; }
.video-section--compact .video-learn { max-width: 760px; padding: 22px 26px; }
.video-section--compact .video-learn__list { grid-template-columns: 1fr; gap: 10px; }
.video-section--compact .video-cta { max-width: 760px; }

/* Mobile */
@media (max-width: 720px) {
  .video-frame { padding: 12px; border-radius: 18px; }
  .video-lite__play { width: 64px; height: 64px; box-shadow: 0 10px 26px -6px rgba(215,38,61,.55), 0 0 0 6px rgba(255,255,255,.06); }
  .video-lite__play svg { width: 24px; height: 24px; }
  .video-lite__caption { left: 14px; bottom: 12px; font-size: 11px; padding: 5px 10px; }
  .video-learn { padding: 22px 22px; border-radius: 14px; }
  .video-learn__list { grid-template-columns: 1fr; gap: 10px; }
  .video-learn__list li { font-size: 14.5px; }
  .video-cta { flex-direction: column; gap: 10px; }
  .video-cta .btn { width: 100%; max-width: 320px; text-align: center; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .video-lite__thumb, .video-lite__play { transition: none !important; }
}

/* =====================================================================
   OWNED DISTRIBUTION — Dispense Times + Insiders premium cards
   ===================================================================== */
.owned-dist {
  padding-bottom: 24px;        /* tighten so the next section feels connected */
}
.owned-dist + .section { padding-top: 56px; }   /* pull next section closer */

.owned-dist__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}
@media (max-width: 820px) { .owned-dist__grid { grid-template-columns: 1fr; gap: 18px; } }

.owned-dist__card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 32px 32px 28px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
  min-height: 280px;
  isolation: isolate;
}
.owned-dist__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 56px -24px rgba(26,29,36,.22), 0 4px 12px -4px rgba(26,29,36,.06);
  border-color: #DDE1E7;
}
.owned-dist__rail {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: 2px;
}
.owned-dist__rail--red  { background: var(--brand-red); }
.owned-dist__rail--blue { background: var(--brand-blue); }

.owned-dist__label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 10px;
}
.owned-dist__title {
  font-size: 36px; font-weight: 700; letter-spacing: -0.6px;
  color: var(--ink); line-height: 1.05;
  margin: 0;
}
.owned-dist__title em {
  font-style: italic;
  color: var(--brand-red);
}
.owned-dist__card--blue .owned-dist__title em { color: var(--brand-blue); }

.owned-dist__desc {
  font-size: 15px; line-height: 1.55; color: var(--ink-2);
  margin: 16px 0 0;
  flex: 1 1 auto;
}

.owned-dist__cta {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 22px;
  font-size: 14px; font-weight: 700;
  color: var(--ink); text-decoration: none;
  letter-spacing: -0.1px;
  align-self: flex-start;
}
.owned-dist__cta-label {
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.owned-dist__cta-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-red);
  color: #fff;
  font-size: 13px;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.owned-dist__card--blue .owned-dist__cta-arrow { background: var(--brand-blue); }
.owned-dist__cta:hover .owned-dist__cta-label {
  color: var(--brand-red);
  border-color: var(--brand-red);
}
.owned-dist__card--blue .owned-dist__cta:hover .owned-dist__cta-label {
  color: var(--brand-blue);
  border-color: var(--brand-blue);
}
.owned-dist__cta:hover .owned-dist__cta-arrow { transform: translateX(3px); }

@media (max-width: 720px) {
  .owned-dist__card { padding: 26px 24px 22px; min-height: 0; }
  .owned-dist__title { font-size: 30px; }
}

/* =====================================================================
   CAPABILITIES — grouped premium capability cards (About page)
   ===================================================================== */
.caps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}
@media (max-width: 820px) { .caps-grid { grid-template-columns: 1fr; gap: 20px; } }

.caps-group {
  position: relative;
  display: flex; flex-direction: column;
  padding: 36px 36px 30px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.caps-group:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 50px -22px rgba(26,29,36,.18), 0 4px 12px -4px rgba(26,29,36,.06);
  border-color: #DDE1E7;
}

.caps-group__head { margin-bottom: 22px; }
.caps-group__eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase;
  color: var(--gray);
}
.caps-group__title {
  font-size: 28px; font-weight: 700; letter-spacing: -0.5px;
  color: var(--ink);
  line-height: 1.15;
  margin: 8px 0 0;
}
.caps-group__hairline {
  display: block; width: 40px; height: 2px;
  background: var(--brand-red); border-radius: 1px;
  margin-top: 14px;
}
.caps-group__hairline--blue { background: var(--brand-blue); }

.caps-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line);
}
.caps-item {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  padding: 16px 0 14px;
  border-bottom: 1px solid var(--line);
  transition: padding-left .22s var(--ease), color .22s var(--ease);
}
.caps-item__num {
  flex: 0 0 36px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.8px;
  color: var(--gray);
  font-variant-numeric: tabular-nums;
}
.caps-group--pharm .caps-item:hover .caps-item__num { color: var(--brand-red); }
.caps-group--partners .caps-item:hover .caps-item__num { color: var(--brand-blue); }

.caps-item__label {
  font-size: 16px; font-weight: 600; letter-spacing: -0.2px;
  color: var(--ink);
  line-height: 1.3;
}
.caps-item::before {
  content: '';
  position: absolute; left: -36px; top: 50%; transform: translateY(-50%);
  width: 0; height: 1px;
  background: var(--brand-red);
  transition: width .25s var(--ease);
}
.caps-group--partners .caps-item::before { background: var(--brand-blue); }
.caps-item:hover { padding-left: 6px; }
.caps-item:hover::before { width: 28px; }

.caps-group__note {
  margin-top: 22px;
  font-size: 13.5px; color: var(--ink-2);
  line-height: 1.6;
}
.caps-group__note strong {
  color: var(--ink);
  font-weight: 700;
  border-bottom: 1.5px solid var(--brand-red);
}

@media (max-width: 720px) {
  .caps-group { padding: 28px 24px 24px; border-radius: 14px; }
  .caps-group__title { font-size: 24px; }
  .caps-item { gap: 12px; padding: 14px 0 12px; }
  .caps-item__label { font-size: 15px; }
  .caps-item__num { flex: 0 0 30px; }
}

/* =====================================================================
   TESTIMONIALS — premium attributed-quote cards
   ===================================================================== */
.tm-section { background: var(--surface); }
.tm-section__head { text-align: left; }

.tm-grid {
  display: grid; gap: 28px;
  align-items: stretch;
  grid-auto-rows: 1fr;          /* all rows share the height of the tallest, so every card matches */
}
.tm-grid--3 { grid-template-columns: repeat(3, 1fr); }
.tm-grid--4 { grid-template-columns: repeat(2, 1fr); }
.tm-grid--5 { grid-template-columns: repeat(3, 1fr); }   /* row 1: 3 cards · row 2: 2 cards */
.tm-grid--6 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .tm-grid--3, .tm-grid--4, .tm-grid--5, .tm-grid--6 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .tm-grid--3, .tm-grid--4, .tm-grid--5, .tm-grid--6 { grid-template-columns: 1fr; } }

.tm-card {
  position: relative;
  display: flex; flex-direction: column;
  margin: 0;
  padding: 38px 32px 28px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.tm-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 56px -24px rgba(26,29,36,.22), 0 4px 12px -4px rgba(26,29,36,.06);
  border-color: #DDE1E7;
}

.tm-card__mark {
  position: absolute; top: -14px; right: 24px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 160px; line-height: 1;
  color: var(--brand-red);
  opacity: .08;
  pointer-events: none;
}
.tm-card--blue .tm-card__mark { color: var(--brand-blue); }

.tm-card__type {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase;
  color: var(--brand-red);
  background: rgba(215,38,61,.08);
  border-radius: 999px;
  align-self: flex-start;
  margin-bottom: 18px;
}
.tm-card--blue .tm-card__type {
  color: var(--brand-blue);
  background: rgba(27,60,122,.10);
}

.tm-card__quote {
  margin: 0;
  flex: 1 1 auto;
}
.tm-card__quote p {
  font-size: 16px; line-height: 1.55;
  color: var(--ink);
  font-style: italic;
  letter-spacing: -0.15px;
  margin: 0;
}

.tm-card__attr {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px;
}
.tm-card__portrait {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover; object-position: center 20%;
  flex: 0 0 48px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.tm-card__attr-text { min-width: 0; }
.tm-card__name {
  font-size: 15px; font-weight: 700; letter-spacing: -0.2px;
  color: var(--ink);
}
.tm-card__role {
  font-size: 13px; color: var(--gray); margin-top: 4px;
}

@media (max-width: 720px) {
  .tm-card { padding: 32px 24px 22px; border-radius: 14px; }
  .tm-card__mark { font-size: 120px; top: -10px; right: 18px; }
  .tm-card__quote p { font-size: 15px; }
}

/* (Removed: Connected With proof strip — section retired by request.) */

/* =====================================================================
   TRACK GRID — uniform 2-col × 3-row pharmacy work cards
   Locks the screenshot container to aspect-ratio 16:9, hides overflow,
   and equalizes card body heights via flex column + min-width: 0.
   ===================================================================== */
.track-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
  align-items: stretch;
  margin-top: 44px;             /* breathing room between heading block and card grid */
}
@media (max-width: 1024px) {
  .track-grid { margin-top: 36px; }
}
@media (max-width: 720px) {
  .track-grid { grid-template-columns: 1fr; gap: 22px; margin-top: 24px; }
}

.track-grid > .case {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
}

.track-grid .case__chrome { flex: 0 0 auto; }

.track-grid .case__shot {
  height: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  flex: 0 0 auto;
}
.track-grid .case__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.track-grid .case__body {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  min-width: 0;
}

@media (max-width: 900px) {
  .track-grid > .case { height: auto; }
}

/* =====================================================================
   DISPENSE TIMES proof module — cover + 3 recent editorial articles
   ===================================================================== */
.dt-proof {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 40px;
  align-items: stretch;
}
@media (max-width: 1024px) { .dt-proof { grid-template-columns: 1fr; gap: 28px; } }

.dt-proof__cover {
  display: flex; flex-direction: column;
  text-decoration: none;
  border-radius: 16px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--canvas);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.dt-proof__cover:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 50px -22px rgba(26,29,36,.22);
  border-color: #DDE1E7;
}
.dt-proof__cover-frame { aspect-ratio: 16 / 10; overflow: hidden; }
.dt-proof__cover-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.dt-proof__cover:hover .dt-proof__cover-frame img { transform: scale(1.02); }
.dt-proof__cover-meta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-top: 1px solid var(--line);
}
.dt-proof__cover-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase;
  color: var(--brand-red);
}
.dt-proof__cover-cta {
  font-size: 13px; font-weight: 700;
  color: var(--ink);
}

.dt-proof__feed { display: flex; flex-direction: column; gap: 16px; }
.dt-proof__feed-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.dt-proof__feed-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase;
  color: var(--gray);
}
.link-arrow--small { font-size: 13px; font-weight: 600; }

.dt-proof__feed-list { display: flex; flex-direction: column; gap: 14px; }

.dt-article {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 18px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--canvas);
  text-decoration: none;
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.dt-article:hover {
  transform: translateY(-2px);
  border-color: #DDE1E7;
  box-shadow: 0 14px 32px -16px rgba(26,29,36,.16);
}
.dt-article__img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface);
}
.dt-article__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dt-article__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dt-article__cat {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--brand-red);
}
.dt-article__title {
  font-size: 14.5px; font-weight: 700; letter-spacing: -0.2px;
  color: var(--ink); line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
}
.dt-article__cta {
  font-size: 12px; font-weight: 600;
  color: var(--gray);
}
.dt-article:hover .dt-article__cta { color: var(--brand-red); }

@media (max-width: 520px) {
  .dt-article { grid-template-columns: 1fr; gap: 12px; }
  .dt-article__img { aspect-ratio: 16 / 9; }
}

/* =====================================================================
   DISPENSE INSIDERS proof module — directory interface screenshot
   ===================================================================== */
.di-proof {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 1024px) { .di-proof { grid-template-columns: 1fr; gap: 32px; } }

.di-proof__text { max-width: 480px; }
.di-proof__screen {
  display: block;
  text-decoration: none;
  border-radius: 14px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--canvas);
  box-shadow: 0 28px 56px -28px rgba(26,29,36,.28), 0 4px 12px -4px rgba(26,29,36,.08);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.di-proof__screen:hover {
  transform: translateY(-4px);
  box-shadow: 0 32px 60px -28px rgba(26,29,36,.32), 0 6px 14px -4px rgba(26,29,36,.12);
  border-color: #DDE1E7;
}
.di-proof__chrome {
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.di-proof__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gray-muted, #9CA0AB); }
.di-proof__dot--red { background: var(--brand-red); }
.di-proof__url { font-size: 12px; color: var(--gray); margin-left: 6px; letter-spacing: -0.1px; }
.di-proof__screen img { width: 100%; height: auto; display: block; }

/* =====================================================================
   LEARNING CENTER — /learn/ pillar & cluster surface
   ===================================================================== */
.learn-hero { padding-bottom: 56px; }
.learn-hero .h-hero { letter-spacing: -1.4px; line-height: 1.05; max-width: 920px; }

.learn-crumbs { font-size: 12.5px; color: var(--gray); margin-bottom: 16px; }
.learn-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.learn-crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.learn-crumbs a { color: var(--gray); text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease); }
.learn-crumbs a:hover { color: var(--brand-red); border-color: var(--brand-red); }
.learn-crumbs__sep { color: var(--gray-muted, #B0B4BC); }
.learn-crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* Author bio */
.learn-author {
  display: flex; align-items: center; gap: 14px;
  margin-top: 28px; padding: 18px 0 0;
  border-top: 1px solid var(--line);
  max-width: 520px;
}
.learn-author__photo {
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover; object-position: center 18%;
  border: 1px solid var(--line);
}
.learn-author__meta { display: flex; flex-direction: column; gap: 2px; }
.learn-author__role { font-size: 11px; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase; color: var(--brand-red); }
.learn-author__name { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; color: var(--ink); }
.learn-author__title { font-size: 12.5px; color: var(--gray); }

/* Index hub: pillar grid */
.learn-index__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px;
  align-items: stretch;
}
@media (max-width: 820px) { .learn-index__grid { grid-template-columns: 1fr; } }

.learn-index__card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 32px 30px 28px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 16px;
  text-decoration: none;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.learn-index__card:not(.learn-index__card--soon):hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 50px -24px rgba(26,29,36,.18);
  border-color: #DDE1E7;
}
.learn-index__card--soon { opacity: .68; cursor: default; }
.learn-index__eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase; color: var(--brand-red); }
.learn-index__title { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; color: var(--ink); line-height: 1.15; margin: 6px 0 0; }
.learn-index__tag { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; margin: 10px 0 0; }
.learn-index__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13.5px; font-weight: 700; color: var(--brand-red); }
.learn-index__cta--soon { color: var(--gray); }

/* Article layout: TOC sidebar + body */
.learn-article__layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
@media (max-width: 1024px) { .learn-article__layout { grid-template-columns: 1fr; gap: 32px; } }

/* Sticky TOC */
.learn-toc {
  position: sticky; top: 96px;
  align-self: start;
  padding-right: 8px;
}
@media (max-width: 1024px) { .learn-toc { position: relative; top: auto; } }
.learn-toc__label { font-size: 11px; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase; color: var(--gray); margin-bottom: 14px; }
.learn-toc__list { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.learn-toc__list li { counter-increment: toc; padding: 7px 0; border-left: 2px solid var(--line); padding-left: 14px; }
.learn-toc__list a { font-size: 13.5px; color: var(--ink-2); text-decoration: none; line-height: 1.4; transition: color .2s var(--ease); display: block; }
.learn-toc__list a:hover { color: var(--brand-red); }
.learn-toc__list a.is-active { color: var(--brand-red); font-weight: 700; }
.learn-toc__list li:has(a.is-active) { border-left-color: var(--brand-red); }

/* Body typography */
.learn-article__body {
  max-width: 760px;
  font-size: 17px; line-height: 1.7; color: var(--ink);
}
.learn-article__body p { margin: 0 0 22px; }
.learn-article__body h2 {
  font-size: 32px; font-weight: 700; letter-spacing: -0.6px; line-height: 1.2;
  color: var(--ink);
  margin: 56px 0 18px; scroll-margin-top: 110px;
}
.learn-article__body h2:first-child { margin-top: 0; }
.learn-article__body h3 {
  font-size: 22px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.25;
  color: var(--ink);
  margin: 36px 0 14px;
}
.learn-article__body ul, .learn-article__body ol { margin: 0 0 22px; padding-left: 22px; }
.learn-article__body li { margin-bottom: 10px; line-height: 1.6; }
.learn-article__body a {
  color: var(--brand-red); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.learn-article__body a:hover { text-decoration-thickness: 2px; }
.learn-article__body strong { font-weight: 700; color: var(--ink); }
.learn-article__body blockquote {
  margin: 28px 0; padding: 18px 24px;
  border-left: 3px solid var(--brand-red);
  background: var(--surface);
  font-size: 18px; font-style: italic; color: var(--ink);
}
.learn-article__body code { background: var(--surface); padding: 2px 6px; border-radius: 4px; font-size: 14.5px; font-family: ui-monospace, SFMono-Regular, monospace; }
.learn-article__pillar-back, .learn-article__back-to-pillar {
  font-size: 14px; color: var(--gray); margin: 0 0 28px;
}
.learn-article__back-to-pillar { margin-top: 40px; }

/* FAQ */
.learn-faq { margin-top: 56px; }
.learn-faq h2 { font-size: 32px; font-weight: 700; letter-spacing: -0.6px; margin: 0 0 24px; }
.learn-faq__item { padding: 22px 0; border-bottom: 1px solid var(--line); }
.learn-faq__item:last-child { border-bottom: 0; }
.learn-faq__q { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; color: var(--ink); margin: 0 0 10px; }
.learn-faq__a { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.learn-faq__a p { margin: 0; }

/* Inline CTA card */
.learn-cta {
  margin: 56px 0;
  padding: 28px;
  background: var(--ink); color: var(--canvas);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.learn-cta::after {
  content: ''; position: absolute; right: -100px; top: -100px;
  width: 320px; height: 320px;
  background: radial-gradient(circle at center, rgba(215,38,61,.32) 0%, rgba(215,38,61,0) 65%);
  pointer-events: none;
}
.learn-cta__inner { position: relative; z-index: 1; }
.learn-cta__eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase; color: rgba(235,100,120,1); }
.learn-cta__title { font-size: 24px; font-weight: 700; letter-spacing: -0.4px; color: var(--canvas); margin: 8px 0 0; line-height: 1.2; }
.learn-cta__sub { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.78); margin: 12px 0 0; max-width: 540px; }
.learn-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.learn-cta__actions .btn--secondary { background: transparent; color: var(--canvas); border: 1px solid rgba(255,255,255,.4); }
.learn-cta__actions .btn--secondary:hover { background: rgba(255,255,255,.08); border-color: var(--canvas); }

/* Reset article-body anchor/heading colors inside the CTA component so the buttons
   and title remain visible when the CTA is rendered inside .learn-article__body. */
.learn-article__body .learn-cta__title {
  color: var(--canvas);
  font-size: 24px;
  letter-spacing: -0.4px;
  line-height: 1.2;
  margin: 8px 0 0;
}
.learn-article__body .learn-cta a,
.learn-article__body .learn-cta a:hover {
  text-decoration: none;
  text-decoration-thickness: 0;
}
.learn-article__body .learn-cta .btn--primary {
  color: var(--canvas);
  background: var(--brand-red);
  border-color: var(--brand-red);
}
.learn-article__body .learn-cta .btn--primary:hover {
  color: var(--ink);
  background: var(--canvas);
  border-color: var(--canvas);
}
.learn-article__body .learn-cta .btn--secondary {
  color: var(--canvas);
  background: transparent;
  border: 1px solid rgba(255,255,255,.4);
}
.learn-article__body .learn-cta .btn--secondary:hover {
  color: var(--canvas);
  background: rgba(255,255,255,.08);
  border-color: var(--canvas);
}

/* Dive-deeper / related companion clusters */
.learn-clusters { margin-top: 56px; }
.learn-clusters h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; margin: 0 0 8px; }
.learn-clusters > p { color: var(--ink-2); margin: 0 0 20px; }
.learn-clusters__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 720px) { .learn-clusters__grid { grid-template-columns: 1fr; } }
.learn-clusters__card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 22px 20px;
  background: var(--canvas);
  border: 1px solid var(--line); border-radius: 12px;
  text-decoration: none;
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.learn-clusters__card:hover { transform: translateY(-2px); border-color: #DDE1E7; box-shadow: 0 14px 32px -16px rgba(26,29,36,.14); }
.learn-clusters__eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase; color: var(--gray); }
.learn-clusters__title { font-size: 17px; font-weight: 700; letter-spacing: -0.3px; color: var(--ink); line-height: 1.3; margin: 4px 0 0; }
.learn-clusters__cta { font-size: 13px; font-weight: 700; color: var(--brand-red); margin-top: 8px; }

/* Cross-pillar block at bottom of pillar pages */
.learn-cross { padding: 72px 0 24px; max-width: 1280px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.learn-cross__head { text-align: left; max-width: 880px; }
.learn-cross__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 28px; }
@media (max-width: 820px) { .learn-cross__grid { grid-template-columns: 1fr; } }
.learn-cross__card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 24px 26px 22px;
  background: var(--canvas);
  border: 1px solid var(--line); border-radius: 14px;
  text-decoration: none;
  transition: transform .22s var(--ease), border-color .22s var(--ease);
}
.learn-cross__card:not(.learn-cross__card--soon):hover { transform: translateY(-2px); border-color: #DDE1E7; }
.learn-cross__card--soon { opacity: .68; }
.learn-cross__eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase; color: var(--brand-red); }
.learn-cross__title { font-size: 20px; font-weight: 700; letter-spacing: -0.4px; color: var(--ink); line-height: 1.2; margin: 4px 0 0; }
.learn-cross__tag { font-size: 13.5px; color: var(--ink-2); margin: 8px 0 0; }
.learn-cross__cta { font-size: 13px; font-weight: 700; color: var(--brand-red); margin-top: 12px; }
.learn-cross__cta--soon { color: var(--gray); }

/* =====================================================================
   DISPENSE 360 — Platform page surface
   ===================================================================== */
.d360-hero .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.d360-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
@media (max-width: 1100px) { .d360-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .d360-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .d360-grid { grid-template-columns: 1fr; } }
.d360-card {
  padding: 24px 22px 22px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.d360-card:hover { transform: translateY(-2px); border-color: #DDE1E7; }
.d360-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(215,38,61,.08); color: var(--brand-red);
  margin-bottom: 14px;
}
.d360-card__title {
  font-size: 17px; font-weight: 700; letter-spacing: -0.3px;
  color: var(--ink); margin: 0 0 8px; line-height: 1.25;
}
.d360-card__desc { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin: 0; }

.d360-why__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px 56px;
}
@media (max-width: 820px) { .d360-why__grid { grid-template-columns: 1fr; gap: 28px; } }
.d360-why__item .h-card { margin-bottom: 10px; }
.d360-why__item p { font-size: 15.5px; color: var(--ink-2); line-height: 1.6; margin: 0; }

/* =====================================================================
   AUTHOR pages — Josh + Advisory Board
   ===================================================================== */
.author-hero__layout {
  display: grid; grid-template-columns: 200px 1fr; gap: 36px;
  align-items: start; margin-top: 24px;
}
@media (max-width: 720px) { .author-hero__layout { grid-template-columns: 1fr; gap: 24px; } }
.author-hero__photo img {
  width: 160px; height: 160px; border-radius: 50%;
  object-fit: cover; object-position: center 18%;
  border: 1px solid var(--line);
}
.author-hero__role { font-size: 16px; color: var(--ink-2); margin: 0; }
.author-hero__links { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.author-hero__link {
  font-size: 13.5px; color: var(--brand-red); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color .2s var(--ease);
}
.author-hero__link:hover { border-color: var(--brand-red); }

.author-body__layout {
  display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 64px;
  align-items: start;
}
@media (max-width: 960px) { .author-body__layout { grid-template-columns: 1fr; gap: 32px; } }
.author-body__side { position: sticky; top: 96px; }
@media (max-width: 960px) { .author-body__side { position: relative; top: auto; } }
.author-side__block { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.author-side__block:last-child { border-bottom: 0; margin-bottom: 0; }
.author-side__head {
  font-size: 11px; font-weight: 700; letter-spacing: 0.9px;
  text-transform: uppercase; color: var(--gray); margin: 0 0 12px;
}
.author-side__list { list-style: none; padding: 0; margin: 0; }
.author-side__list li {
  font-size: 14px; color: var(--ink-2); padding: 6px 0; line-height: 1.45;
}
.author-side__list li a {
  color: var(--ink-2); text-decoration: none; border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.author-side__list li a:hover { color: var(--brand-red); border-color: var(--brand-red); }
.author-body__main { font-size: 16.5px; line-height: 1.65; color: var(--ink); max-width: 760px; }
.author-body__main h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.4px; margin: 36px 0 14px; line-height: 1.2; }
.author-body__main p { margin: 0 0 18px; }
.author-body__main ul { padding-left: 22px; margin: 0 0 18px; }
.author-body__main ul li { margin-bottom: 8px; line-height: 1.55; }
.author-body__main a { color: var(--brand-red); text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   ADDITIONAL ENGAGEMENTS — Work page additional projects grid
   ===================================================================== */
.addl-engagements {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
@media (max-width: 1024px) { .addl-engagements { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .addl-engagements { grid-template-columns: 1fr; } }
.addl-card {
  padding: 24px 22px 22px;
  background: var(--canvas);
  border: 1px solid var(--line); border-radius: 14px;
  border-left: 3px solid var(--brand-red);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.addl-card--blue { border-left-color: var(--brand-blue); }
.addl-card:hover { transform: translateY(-2px); border-color: #DDE1E7; }
.addl-card--blue:hover { border-color: #DDE1E7; border-left-color: var(--brand-blue); }
.addl-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.9px;
  text-transform: uppercase; margin-bottom: 10px;
}
.addl-card__category { color: var(--brand-red); }
.addl-card--blue .addl-card__category { color: var(--brand-blue); }
.addl-card__location { color: var(--gray); font-weight: 600; letter-spacing: 0.5px; }
.addl-card__name {
  font-size: 20px; font-weight: 700; letter-spacing: -0.4px;
  color: var(--ink); margin: 0 0 10px; line-height: 1.2;
}
.addl-card__scope { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin: 0; }

/* Last updated date under the Learn author byline */
.learn-author__updated {
  font-size: 11.5px;
  color: var(--gray);
  margin-top: 6px;
  letter-spacing: 0.1px;
}
.learn-author__updated time { color: inherit; }

/* =====================================================================
   PHARMACY WEBSITE & GROWTH AUDIT TOOL
   ===================================================================== */
.audit-hero { padding-bottom: 56px; }

.audit-section { padding: 32px 0 64px; }

/* Sticky progress bar */
.audit-progress {
  position: sticky; top: 64px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 28px;
  z-index: 5;
  box-shadow: 0 8px 24px -16px rgba(26,29,36,.18);
}
.audit-progress__row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 600; color: var(--ink);
  margin-bottom: 8px;
}
.audit-progress__pct { color: var(--brand-red); }
.audit-progress__bar {
  height: 6px; background: var(--surface); border-radius: 4px; overflow: hidden;
}
.audit-progress__fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--brand-red) 0%, var(--brand-red) 50%, #E04A60 100%);
  transition: width .35s var(--ease);
}

/* Form layout */
.audit-form { display: grid; gap: 24px; }
.audit-card {
  border: 1px solid var(--line);
  background: var(--canvas);
  border-radius: 16px;
  padding: 28px 28px 24px;
  margin: 0;
}
.audit-card__legend {
  width: 100%; padding: 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-bottom: 18px;
}
.audit-card__eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.9px;
  text-transform: uppercase; color: var(--brand-red);
}
.audit-card__eyebrow--small { font-size: 10.5px; color: var(--gray); margin-bottom: 10px; display: block; }
.audit-card__title {
  font-size: 22px; font-weight: 700; letter-spacing: -0.4px;
  color: var(--ink); line-height: 1.2;
}
.audit-card__cap {
  margin-left: auto;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.5px;
  background: var(--surface); color: var(--ink-2);
  padding: 4px 10px; border-radius: 999px;
}
.audit-card__sub { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }

/* Identity grid */
.audit-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 720px) { .audit-grid { grid-template-columns: 1fr; } }
.audit-field { display: flex; flex-direction: column; gap: 6px; }
.audit-field--full { grid-column: 1 / -1; }
.audit-field__label {
  font-size: 12px; font-weight: 600; color: var(--ink);
  letter-spacing: 0.2px;
}
.audit-field__hint {
  font-size: 11.5px; color: var(--gray); margin-top: 2px;
}
.audit-field input {
  border: 1px solid var(--line); background: var(--canvas);
  padding: 12px 14px; font-size: 14.5px; color: var(--ink);
  border-radius: 8px; transition: border-color .2s var(--ease);
  font-family: inherit;
}
.audit-field input:focus { outline: none; border-color: var(--brand-red); }
.audit-field input::placeholder { color: var(--gray-muted, #B0B4BC); }

/* Service chips */
.audit-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.audit-chip {
  cursor: pointer;
  position: relative;
  font-size: 13px; font-weight: 600;
  color: var(--ink-2);
  border: 1px solid var(--line);
  background: var(--canvas);
  padding: 8px 14px;
  border-radius: 999px;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
  user-select: none;
}
.audit-chip input {
  position: absolute; opacity: 0; pointer-events: none;
}
.audit-chip:hover { border-color: #DDE1E7; }
.audit-chip:has(input:checked) {
  background: var(--ink); color: var(--canvas); border-color: var(--ink);
}

/* Question list */
.audit-questions { list-style: none; padding: 0; margin: 0; }
.audit-question { padding: 14px 0; border-bottom: 1px solid var(--line); }
.audit-question:last-child { border-bottom: 0; padding-bottom: 0; }
.audit-question__q {
  font-size: 14.5px; line-height: 1.5; color: var(--ink);
  margin: 0 0 10px;
}
.audit-toggle {
  display: inline-flex; gap: 6px;
  background: var(--surface);
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.audit-toggle__opt {
  position: relative;
  cursor: pointer;
  user-select: none;
}
.audit-toggle__opt input {
  position: absolute; opacity: 0; pointer-events: none;
}
.audit-toggle__opt span {
  display: inline-block;
  padding: 6px 14px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.3px;
  color: var(--ink-2);
  border-radius: 999px;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.audit-toggle__opt:has(input[value="yes"]:checked) span     { background: #1F8C4C; color: #fff; }
.audit-toggle__opt:has(input[value="partial"]:checked) span { background: #C68A11; color: #fff; }
.audit-toggle__opt:has(input[value="no"]:checked) span      { background: var(--brand-red); color: #fff; }

/* Action bar */
.audit-actions {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-top: 6px;
}
.audit-btn { padding-left: 28px; padding-right: 28px; }
.audit-btn-reset {
  background: transparent; color: var(--ink-2); border-color: var(--line);
  padding-left: 22px;
}
.audit-btn-reset:hover { background: var(--surface); color: var(--ink); }

/* Results panel */
.audit-results {
  margin-top: 56px;
  padding: 36px 32px 32px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-red);
  border-radius: 16px;
}
.audit-results__head { margin-bottom: 24px; }

.audit-results__score {
  display: flex; align-items: center; gap: 24px;
  padding: 22px 22px 22px 24px;
  background: var(--ink); color: var(--canvas);
  border-radius: 14px;
  margin-bottom: 28px;
}
.audit-score { display: flex; align-items: baseline; gap: 6px; }
.audit-score__number {
  font-size: 64px; font-weight: 700; letter-spacing: -2px;
  color: var(--canvas); line-height: 1;
}
.audit-score__total { font-size: 18px; color: rgba(255,255,255,.6); font-weight: 600; }
.audit-score__bar {
  flex: 1; height: 10px; background: rgba(255,255,255,.12);
  border-radius: 6px; overflow: hidden;
}
.audit-score__fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--brand-red), #E04A60);
  transition: width .8s var(--ease);
}
@media (max-width: 640px) {
  .audit-results__score { flex-direction: column; align-items: stretch; }
  .audit-score__bar { width: 100%; }
}

/* Category breakdown */
.audit-cats { margin-bottom: 28px; }
.audit-cats__head, .audit-recs__head {
  font-size: 11px; font-weight: 700; letter-spacing: 0.9px;
  text-transform: uppercase; color: var(--gray);
  margin-bottom: 14px;
}
.audit-cats__list { display: grid; gap: 10px; }
.audit-cat-row {
  display: grid; grid-template-columns: 1fr 100px 50px; gap: 16px; align-items: center;
}
.audit-cat-row__label { font-size: 14px; font-weight: 600; color: var(--ink); }
.audit-cat-row__bar {
  height: 8px; background: var(--surface); border-radius: 4px; overflow: hidden;
}
.audit-cat-row__fill {
  height: 100%; background: var(--brand-red);
  transition: width .8s var(--ease);
}
.audit-cat-row--high   .audit-cat-row__fill { background: #1F8C4C; }
.audit-cat-row--mid    .audit-cat-row__fill { background: #C68A11; }
.audit-cat-row--low    .audit-cat-row__fill { background: var(--brand-red); }
.audit-cat-row__score { font-size: 13px; font-weight: 700; color: var(--ink); text-align: right; }
@media (max-width: 640px) {
  .audit-cat-row { grid-template-columns: 1fr 60px; }
  .audit-cat-row__bar { grid-column: 1 / -1; }
}

/* Recommendations */
.audit-recs__list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 10px;
}
.audit-recs__list li {
  position: relative;
  padding: 14px 16px 14px 44px;
  background: var(--surface);
  border-radius: 10px;
  font-size: 14.5px; line-height: 1.5; color: var(--ink);
}
.audit-recs__list li::before {
  content: '→';
  position: absolute; left: 16px; top: 14px;
  color: var(--brand-red); font-weight: 700;
}

/* Inline CTA card */
.audit-cta {
  margin-top: 28px;
  padding: 24px;
  background: var(--ink); color: var(--canvas);
  border-radius: 14px;
  position: relative; overflow: hidden;
}
.audit-cta::after {
  content: '';
  position: absolute; right: -100px; top: -100px;
  width: 320px; height: 320px;
  background: radial-gradient(circle at center, rgba(215,38,61,.32) 0%, rgba(215,38,61,0) 65%);
  pointer-events: none;
}
.audit-cta__text { position: relative; z-index: 1; }
.audit-cta__title { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; color: var(--canvas); margin: 0 0 8px; }
.audit-cta__sub { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.78); margin: 0 0 18px; max-width: 540px; }
.audit-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; position: relative; z-index: 1; }
.audit-cta__actions .btn--secondary {
  background: transparent; color: var(--canvas); border: 1px solid rgba(255,255,255,.4);
}
.audit-cta__actions .btn--secondary:hover { background: rgba(255,255,255,.08); border-color: var(--canvas); }

.audit-faq { margin-top: 56px; }

/* =====================================================================
   GROWTH AUDIT (.dm-ff) — collapse FF 2-col containers at narrow widths
   Scoped to .dm-ff so global form styling is untouched. FF inline-styles
   columns at flex-basis: 50% which doesn't respond to viewport; force
   block display + 100% width at narrow viewports.
   ===================================================================== */
@media (max-width: 900px) {
  .dm-ff .fluentform .ff-t-container {
    display: block !important;
  }
  .dm-ff .fluentform .ff-t-cell {
    display: block !important;
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .dm-ff .fluentform .ff-t-cell + .ff-t-cell { margin-top: 8px; }
  /* CSS Grid items default to min-width:auto (=min-content); set to 0 so
     the form column can compress below its widest text/radio when split-2col
     collapses to a single column at narrow viewports. Same pattern applied
     to .services grid items to absorb the longest service-card body copy. */
  .split-2col > * { min-width: 0; }
  .services { min-width: 0; }
  .services > .service { min-width: 0; }
  .dm-ff, .dm-ff .fluentform { min-width: 0; max-width: 100%; }
}
/* Section title hierarchy inside the audit form */
.dm-ff .fluentform .ff-el-section-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--brand-red);
  margin: 4px 0 8px;
}
.dm-ff .fluentform .ff-section_break_desk {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
  margin-bottom: 14px;
}
.dm-ff .fluentform hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 14px 0 18px;
}
/* Tighten radio button rows on narrow viewports so questions remain readable */
@media (max-width: 480px) {
  .dm-ff .fluentform .ff-el-form-check { display: block; margin: 6px 0; }
  .dm-ff .fluentform .ff-el-form-check + .ff-el-form-check { margin-top: 6px; }
}

/* -------- Sticky mobile CTA (mobile only; respects locked desktop design) -------- */
.mobile-cta { display: none; }
@media (max-width: 640px) {
  .mobile-cta {
    position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 90;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 15px 20px; border-radius: 12px;
    background: var(--brand-red); color: #fff;
    font-weight: 600; font-size: 16px; letter-spacing: -0.1px;
    box-shadow: 0 10px 28px rgba(215,38,61,.34), 0 2px 8px rgba(0,0,0,.12);
    transition: transform .2s var(--ease), opacity .2s var(--ease);
  }
  .mobile-cta .arrow { transition: transform .2s var(--ease); }
  .mobile-cta:active { transform: translateY(1px); }
  /* Hide the bar (nav open, near top, scrolling down, or footer in view) — slide it off-screen. */
  .nav.is-open ~ .mobile-cta,
  .mobile-cta--hidden { opacity: 0; pointer-events: none; transform: translateY(160%); }
  /* Room so the fixed bar never covers footer legal links. */
  .footer { padding-bottom: 88px; }
}

/* =============================================================================
   AI Automation page (page-ai-automation.php)
   Uses locked tokens; matches existing card/hero conventions.
   ============================================================================= */
.mt-20 { margin-top: 20px; }
.mt-40 { margin-top: 40px; }

/* Ghost button for dark (ink) sections */
.btn--ghost {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.4);
}
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* Hero — inherits .hero--page; nothing extra needed */

/* -- Audience paths -- */
.ai-aud__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 820px) { .ai-aud__grid { grid-template-columns: 1fr; } }
.ai-aud {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 32px 30px; background: var(--canvas);
  border: 1px solid var(--line); border-radius: 16px;
}
.ai-aud__lead { color: var(--ink-2); }
.ai-aud__list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; width: 100%; }
@media (max-width: 480px) { .ai-aud__list { grid-template-columns: 1fr; } }
.ai-aud__list li { display: flex; align-items: baseline; gap: 9px; font-size: 14.5px; color: var(--ink); }
.ai-aud__dot { flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-red); transform: translateY(-2px); }

/* -- Agent showcase -- */
.ai-agent__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 820px) { .ai-agent__grid { grid-template-columns: 1fr; } }
.ai-agent {
  display: flex; flex-direction: column;
  padding: 26px 24px; background: var(--canvas);
  border: 1px solid var(--line); border-radius: 16px;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.ai-agent:hover { border-color: rgba(215,38,61,.4); transform: translateY(-2px); }
.ai-agent__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ai-agent__name { font-size: 22px; font-weight: 600; letter-spacing: -0.4px; color: var(--ink); }
.ai-agent__aud { font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--brand-red); }
.ai-agent__purpose { margin-top: 8px; font-size: 15px; color: var(--ink-2); }
.ai-agent__label { display: block; margin: 18px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--gray); }
.ai-agent__tasks ul { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-agent__tasks li { font-size: 12.5px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; }
.ai-agent__flow ol { display: flex; flex-direction: column; gap: 10px; counter-reset: none; }
.ai-agent__flow li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink); }
.ai-agent__step { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.ai-agent__review { display: flex; align-items: flex-start; gap: 9px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.ai-agent__review svg { flex: 0 0 auto; color: var(--brand-red); margin-top: 1px; }
.ai-agent__note { margin-top: 12px; font-size: 12px; font-style: italic; color: var(--gray); }
.ai-agent__cta { margin-top: 18px; align-self: flex-start; font-size: 14px; font-weight: 600; color: var(--brand-red); display: inline-flex; align-items: center; gap: 7px; }
.ai-agent__cta .arrow { transition: transform .2s var(--ease); }
.ai-agent__cta:hover .arrow { transform: translateX(4px); }

/* -- How an agent works -- */
.ai-how__steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; counter-reset: none; list-style: none; }
@media (max-width: 1024px) { .ai-how__steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .ai-how__steps { grid-template-columns: 1fr; } }
.ai-how__step { display: flex; flex-direction: column; gap: 12px; }
.ai-how__num { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--brand-red); color: var(--brand-red); font-weight: 700; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; }
.ai-how__title { font-size: 16px; font-weight: 600; color: var(--ink); }
.ai-how__step p { font-size: 14px; color: var(--ink-2); margin-top: 4px; }
.ai-example { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--canvas); }
.ai-example__tag { display: block; padding: 14px 22px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.ai-example__cols { display: grid; grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 820px) { .ai-example__cols { grid-template-columns: 1fr; } }
.ai-example__col { padding: 24px 22px; border-right: 1px solid var(--line); }
.ai-example__col:last-child { border-right: 0; }
@media (max-width: 820px) { .ai-example__col { border-right: 0; border-bottom: 1px solid var(--line); } }
.ai-example__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--gray); margin-bottom: 10px; }
.ai-example__input { font-size: 16px; font-style: italic; color: var(--ink); }
.ai-example__col--work ul { display: flex; flex-direction: column; gap: 8px; }
.ai-example__col--work li { font-size: 14px; color: var(--ink); padding-left: 16px; position: relative; }
.ai-example__col--work li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-red); }
.ai-example__col--approve { background: var(--surface); }
.ai-example__col--approve p { font-size: 14px; color: var(--ink-2); }

/* -- What we can automate -- */
.ai-svc__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px) { .ai-svc__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ai-svc__grid { grid-template-columns: 1fr; } }
.ai-svc { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--canvas); border: 1px solid var(--line); border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--ink); }
.ai-svc__mark { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 2px; background: var(--brand-red); }
.ai-start { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 32px; background: var(--ink); color: #fff; border-radius: 16px; }
@media (max-width: 760px) { .ai-start { flex-direction: column; align-items: flex-start; } }
.ai-start__text h3 { color: #fff; }
.ai-start__text p { color: rgba(255,255,255,.8); max-width: 620px; }
.ai-start__cta { flex: 0 0 auto; }

/* -- Guardrails -- */
.ai-guard__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 28px; }
@media (max-width: 700px) { .ai-guard__grid { grid-template-columns: 1fr; } }
.ai-guard { display: flex; align-items: flex-start; gap: 14px; }
.ai-guard svg { flex: 0 0 auto; color: var(--brand-red); margin-top: 2px; }
.ai-guard__title { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.ai-guard p { font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.ai-guard__disclaimer { max-width: 900px; font-size: 13px; color: var(--gray); padding: 18px 20px; background: var(--surface); border-left: 3px solid var(--brand-red); border-radius: 0 10px 10px 0; }

/* -- Process -- */
.ai-proc__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
@media (max-width: 1024px) { .ai-proc__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .ai-proc__grid { grid-template-columns: 1fr; } }
.ai-proc { padding: 24px 20px; background: var(--canvas); border: 1px solid var(--line); border-radius: 14px; }
.ai-proc__num { font-size: 26px; font-weight: 700; color: var(--brand-red); letter-spacing: -1px; }
.ai-proc__title { font-size: 16px; font-weight: 600; color: var(--ink); margin-top: 8px; }
.ai-proc p { font-size: 14px; color: var(--ink-2); margin-top: 6px; }

/* -- Final CTA (dark) -- */
.ai-cta__inner { max-width: 760px; }
.ai-cta__buttons { display: flex; flex-wrap: wrap; gap: 14px; }

/* -------- Nav dropdown (Pharma & Biotech) -------- */
.nav__drop-wrap { position: relative; display: inline-flex; align-items: center; }
.nav__caret { font-size: 9px; margin-left: 3px; opacity: .7; }
.nav__drop {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 268px; background: var(--canvas);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(26,29,36,.14);
  padding: 8px; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease); z-index: 60;
}
.nav__drop-wrap:hover .nav__drop,
.nav__drop-wrap:focus-within .nav__drop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(4px);
}
.nav__drop a { padding: 9px 12px; font-size: 13.5px; border-radius: 8px; white-space: nowrap; color: var(--ink-2); }
.nav__drop a:hover { background: var(--surface); color: var(--ink); }
.nav__drop a::after { display: none; }

@media (max-width: 900px) {
  .nav__drop-wrap { display: block; width: 100%; }
  .nav__caret { display: none; }
  .nav.is-open .nav__drop {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    box-shadow: none; border: 0; border-radius: 0; padding: 0 0 0 16px; min-width: 0;
  }
  .nav.is-open .nav__drop a { font-size: 13.5px; color: var(--gray); }
}

/* =============================================================================
   Pharma & Biotech (page-pharma-biotech.php + page-pharma-pillar.php)
   ============================================================================= */
.pharma-credit { font-size: 13px; font-style: italic; color: var(--gray); max-width: 640px; }

/* Lifecycle row */
.pharma-life__row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; list-style: none; }
@media (max-width: 1024px) { .pharma-life__row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .pharma-life__row { grid-template-columns: 1fr; } }
.pharma-life { position: relative; padding: 22px 20px; background: var(--canvas); border: 1px solid var(--line); border-radius: 14px; }
.pharma-life__num { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-red); color: #fff; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.pharma-life__name { font-size: 16px; font-weight: 600; color: var(--ink); margin-top: 12px; }
.pharma-life p { font-size: 13.5px; color: var(--ink-2); margin-top: 6px; }

/* Capability hub cards */
.pharma-cap__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1024px) { .pharma-cap__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .pharma-cap__grid { grid-template-columns: 1fr; } }
.pharma-cap { display: flex; flex-direction: column; padding: 26px 22px; background: var(--canvas); border: 1px solid var(--line); border-radius: 14px; transition: border-color .25s var(--ease), transform .25s var(--ease); }
.pharma-cap:hover { border-color: rgba(215,38,61,.4); transform: translateY(-2px); }
.pharma-cap__title { font-size: 17px; font-weight: 600; color: var(--ink); }
.pharma-cap__desc { font-size: 14px; color: var(--ink-2); margin-top: 10px; flex: 1; }
.pharma-cap__link { margin-top: 16px; font-size: 13.5px; font-weight: 600; color: var(--brand-red); display: inline-flex; align-items: center; gap: 6px; }
.pharma-cap:hover .pharma-cap__link .arrow { transform: translateX(4px); }
.pharma-cap__link .arrow { transition: transform .2s var(--ease); }

/* Differentiator chips (dark) */
.pharma-diff__grid { display: flex; flex-wrap: wrap; gap: 10px; }
.pharma-diff__chip { font-size: 13.5px; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 8px 16px; }

/* Positioning callout */
.pharma-callout { max-width: 860px; font-size: 22px; line-height: 1.5; font-weight: 600; letter-spacing: -0.4px; color: var(--ink); padding-left: 24px; border-left: 3px solid var(--brand-red); }
@media (max-width: 640px) { .pharma-callout { font-size: 19px; } }

/* How we work — step pills */
.pharma-steps { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pharma-step { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--canvas); border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px 9px 10px; }
.pharma-step__n { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.mt-56 { margin-top: 56px; }

/* Homepage "more services" linked band */
.more-svc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 760px) { .more-svc__grid { grid-template-columns: 1fr; } }
.more-svc { display: flex; flex-direction: column; padding: 32px 30px; background: var(--canvas); border: 1px solid var(--line); border-radius: 16px; transition: border-color .25s var(--ease), transform .25s var(--ease); }
.more-svc:hover { border-color: rgba(215,38,61,.4); transform: translateY(-2px); }
.more-svc__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--brand-red); }
.more-svc__title { font-size: 24px; font-weight: 600; letter-spacing: -0.5px; color: var(--ink); margin-top: 10px; }
.more-svc__desc { font-size: 15px; color: var(--ink-2); margin-top: 12px; flex: 1; }
.more-svc__cta { margin-top: 20px; font-size: 14.5px; font-weight: 600; color: var(--brand-red); display: inline-flex; align-items: center; gap: 7px; }
.more-svc:hover .more-svc__cta .arrow { transform: translateX(4px); }
.more-svc__cta .arrow { transition: transform .2s var(--ease); }

/* -------- Nav dropdown refinements v2 (left-align, wide 2-col pharma panel) -------- */
.nav__drop { left: 0; transform: translateX(0) translateY(8px); }
.nav__drop-wrap:hover .nav__drop,
.nav__drop-wrap:focus-within .nav__drop { transform: translateX(0) translateY(4px); }
.nav__drop--wide { min-width: 520px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.nav__drop a { transition: background .15s var(--ease), transform .15s var(--ease); }
.nav__drop a:hover { transform: translateX(2px); }
@media (max-width: 900px) {
  .nav__drop { left: auto; transform: none; }
  .nav.is-open .nav__drop--wide { display: block; min-width: 0; grid-template-columns: 1fr; }
  .nav__drop a:hover { transform: none; }
}

/* =============================================================================
   Motion polish — AI Automation + Pharma pages ("premium agency" feel)
   ============================================================================= */

/* Staggered card entrance: children of revealed grids cascade in */
.ai-agent__grid.reveal > *, .pharma-cap__grid.reveal > *, .ai-svc__grid.reveal > *,
.ai-guard__grid.reveal > *, .pharma-life__row.reveal > *, .ai-proc__grid.reveal > *,
.ai-how__steps.reveal > *, .more-svc__grid.reveal > *, .ai-aud__grid.reveal > *,
.pharma-diff__grid.reveal > *, .pharma-steps.reveal > * {
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.ai-agent__grid.reveal.is-in > *, .pharma-cap__grid.reveal.is-in > *, .ai-svc__grid.reveal.is-in > *,
.ai-guard__grid.reveal.is-in > *, .pharma-life__row.reveal.is-in > *, .ai-proc__grid.reveal.is-in > *,
.ai-how__steps.reveal.is-in > *, .more-svc__grid.reveal.is-in > *, .ai-aud__grid.reveal.is-in > *,
.pharma-diff__grid.reveal.is-in > *, .pharma-steps.reveal.is-in > * { opacity: 1; transform: none; }
.reveal.is-in > *:nth-child(1) { transition-delay: 50ms; }
.reveal.is-in > *:nth-child(2) { transition-delay: 105ms; }
.reveal.is-in > *:nth-child(3) { transition-delay: 160ms; }
.reveal.is-in > *:nth-child(4) { transition-delay: 215ms; }
.reveal.is-in > *:nth-child(5) { transition-delay: 270ms; }
.reveal.is-in > *:nth-child(6) { transition-delay: 325ms; }
.reveal.is-in > *:nth-child(7) { transition-delay: 380ms; }
.reveal.is-in > *:nth-child(8) { transition-delay: 435ms; }
.reveal.is-in > *:nth-child(n+9) { transition-delay: 480ms; }

/* Ambient hero motion — soft floating brand-color fields behind the hero text */
.ai-hero, .pharma-hero { position: relative; overflow: hidden; }
.ai-hero::before, .pharma-hero::before {
  content: ''; position: absolute; top: -140px; right: -90px; width: 540px; height: 540px;
  background: radial-gradient(circle, rgba(215,38,61,.10), rgba(215,38,61,0) 68%);
  border-radius: 50%; pointer-events: none; z-index: 0; animation: dmFloatA 15s ease-in-out infinite;
}
.ai-hero::after, .pharma-hero::after {
  content: ''; position: absolute; bottom: -180px; left: -130px; width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(27,60,122,.09), rgba(27,60,122,0) 66%);
  border-radius: 50%; pointer-events: none; z-index: 0; animation: dmFloatB 19s ease-in-out infinite;
}
.ai-hero > .wrap, .pharma-hero > .wrap { position: relative; z-index: 1; }
@keyframes dmFloatA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-34px,26px) scale(1.06); } }
@keyframes dmFloatB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(30px,-22px) scale(1.05); } }

/* Premium hover: soft shadow lift on cards */
.ai-agent:hover, .pharma-cap:hover, .more-svc:hover, .pharma-life:hover { box-shadow: 0 18px 44px rgba(26,29,36,.10); }
.pharma-life { transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.pharma-life:hover { transform: translateY(-2px); border-color: rgba(215,38,61,.35); }
.ai-svc, .ai-guard { transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.ai-svc:hover { border-color: rgba(215,38,61,.45); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(26,29,36,.06); }

/* Animated hairline draw + eyebrow accent already handled by theme reveal */
.ai-hero .hairline-red, .pharma-hero .hairline-red { transform-origin: left; }
.reveal.is-in .hairline-red { animation: dmLine .7s var(--ease) both .15s; }
@keyframes dmLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .ai-hero::before, .ai-hero::after, .pharma-hero::before, .pharma-hero::after { animation: none; }
  .reveal.is-in > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .reveal.is-in .hairline-red { animation: none; }
}

/* AI inquiry form section */
.ai-inq__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .ai-inq__grid { grid-template-columns: 1fr; gap: 32px; } }
.ai-inq__points { display: flex; flex-direction: column; gap: 10px; }
.ai-inq__points li { display: flex; align-items: baseline; gap: 10px; font-size: 15px; color: var(--ink); }
.ai-inq__form { background: var(--canvas); border: 1px solid var(--line); border-radius: 16px; padding: 32px 30px; box-shadow: 0 10px 40px rgba(26,29,36,.05); }
@media (max-width: 560px) { .ai-inq__form { padding: 24px 20px; } }

/* -------- Nav dropdown: reliable hover (invisible bridge + forgiving close) v3 -------- */
/* Bridge fills the gap between the trigger and the menu so the cursor never leaves the hover area. */
.nav__drop::before {
  content: ''; position: absolute; left: -10px; right: -10px; top: -24px; height: 26px;
}
/* Forgiving close: keep the menu open briefly after the cursor leaves, so it can reach the menu. */
.nav__drop {
  transition-property: opacity, transform, visibility;
  transition-duration: .18s, .18s, 0s;
  transition-timing-function: var(--ease), var(--ease), linear;
  transition-delay: .3s, .3s, .48s;
}
.nav__drop-wrap:hover .nav__drop,
.nav__drop-wrap:focus-within .nav__drop { transition-delay: 0s, 0s, 0s; }
@media (max-width: 900px) { .nav__drop::before { display: none; } }