/*
 * Consulting sub-site styles (relioengine.com).
 * Ported from the retired static site. EVERYTHING is nested under `.consulting-site`
 * so it neither leaks into the Relio product pages nor is overridden by app.css.
 * Design tokens intentionally match app.css but the consulting site keeps its own
 * Georgia/system-ui typography for visual fidelity with the original.
 *
 * Shared classes provided here (usable by every consulting page without redefining):
 *   layout/chrome: .container, .top-nav, .nav-brand, .nav-links, .nav-link, footer, .footer-row, .footer-legal
 *   typography:    h1/h2/h3, p, p.standout, a, strong, .section-label, .kicker
 *   sections:      section (auto-alternating bg), .hero, .hero .lede, .hero-tagline, .hero-ctas, .hero-secondary,
 *                  .hero-microcopy, .hero-clarifier
 *   primitives:    .button, .track-record/.tr-item, .proof-strip, .credentials/.cred-item, .rules/.rule,
 *                  .prose-list,
 *                  .engagement(.lead/.featured) family, .pricing-banner, .intake-prompt,
 *                  .decisions-list, .outcomes-grid, .proof-featured/.proof-pair/.proof-lead/.proof-facts,
 *                  .review-carousel/.review-dots/.review-avatar, .relio-link,
 *                  .cta-block/.cta-form, .about-photo/.about-section
 * Page-unique classes (pricing table, blog post-cards/article, coaching, review form) live in each
 * page's own scoped *.razor.css.
 */

.consulting-site {
  --brand-900: #172A3A;
  --brand-800: #1F3A52;
  --accent-600: #3F7C79;
  --accent-100: #E7F2F1;
  --gold: #B8943F;
  --bg: #F5F6F8;
  --surface: #FFFFFF;
  --surface-2: #F0F1F5;
  --border: #D8DEE6;
  --text: #1F2933;
  --text-muted: #5B6776;
  --text-subtle: #7D8796;

  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size: 10.5pt;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  display: flex;
  flex-direction: column;
  min-height: 100vh;

  .container {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 40px;
  }

  /* ---- Top nav ---- */
  .top-nav { background: var(--brand-900); }

  .top-nav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 13pt;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #FFFFFF;
    border-bottom: none;
    white-space: nowrap;
    text-decoration: none;
  }

  .nav-brand:hover { color: #7FB5B2; opacity: 1; }

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

  .nav-link {
    font-size: 9pt;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
  }

  .nav-link:hover { color: #FFFFFF; border-bottom-color: transparent; opacity: 1; }
  .nav-link.is-active { color: #FFFFFF; border-bottom-color: var(--accent-600); }

  @media (max-width: 480px) {
    .top-nav .container { padding-top: 12px; padding-bottom: 12px; gap: 16px; }
    .nav-brand { font-size: 12pt; }
    .nav-links { gap: 18px; }
    .nav-link { font-size: 8.5pt; letter-spacing: 0.08em; }
  }

  /* ---- Main flex fill so footer sits at bottom ---- */
  .consulting-main { flex: 1 0 auto; }

  /* ---- Hero ---- */
  .hero {
    background: var(--brand-900);
    padding: 64px 0 64px;
    border-bottom: 3px solid var(--accent-600);
  }

  .hero .eyebrow {
    font-size: 8.5pt;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #7FB5B2;
    margin-bottom: 18px;
    display: inline-block;
    border: 1px solid rgba(127,181,178,0.4);
    padding: 6px 12px;
  }

  .hero h1 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(26pt, 4vw, 34pt);
    font-weight: 600;
    color: #FFFFFF;
    line-height: 1.18;
    letter-spacing: -0.01em;
    max-width: 660px;
    margin-bottom: 18px;
  }

  .hero h1 .accent { color: #7FB5B2; font-style: italic; font-weight: 500; }

  .hero .lede {
    font-size: 11pt;
    color: rgba(255,255,255,0.88);
    line-height: 1.55;
    max-width: 580px;
  }

  /* ---- Sections ---- */
  section {
    padding: 56px 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
  }

  section:nth-of-type(even) { background: var(--bg); }

  .section-label {
    font-size: 8.5pt;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-600);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }

  h1, h2, h3 { font-family: Georgia, 'Times New Roman', serif; }

  h2 {
    font-weight: 600;
    font-size: 22pt;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--brand-900);
    margin-bottom: 18px;
  }

  h3 {
    font-weight: 600;
    font-size: 14pt;
    line-height: 1.25;
    color: var(--brand-900);
    margin-bottom: 6px;
  }

  p { margin-bottom: 14px; max-width: 660px; color: var(--text); }

  p.standout {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 400;
    font-size: 14pt;
    line-height: 1.45;
    color: var(--text-muted);
    font-style: italic;
  }

  strong { font-weight: 600; color: var(--brand-900); }

  a {
    color: var(--accent-600);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-600);
    transition: opacity 0.15s;
  }

  a:hover { opacity: 0.7; }

  /* ---- Track record / proof strip ---- */
  .track-record {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 32px 0 8px;
    border: 1px solid var(--border);
    background: var(--surface);
  }

  .tr-item { padding: 24px 20px; border-right: 1px solid var(--border); }
  .tr-item:last-child { border-right: none; }

  .tr-number {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 26pt;
    font-weight: 600;
    line-height: 1;
    color: var(--brand-900);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    margin-bottom: 6px;
  }

  .tr-label { font-size: 9pt; font-weight: 500; color: var(--text-muted); line-height: 1.4; }

  @media (max-width: 640px) {
    .track-record { grid-template-columns: 1fr; }
    .tr-item { border-right: none; border-bottom: 1px solid var(--border); }
    .tr-item:last-child { border-bottom: none; }
  }

  .proof-strip { grid-template-columns: repeat(4, 1fr); margin: 0; }

  .proof-strip-section {
    padding: 36px 0 !important;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
  }

  @media (max-width: 760px) {
    .proof-strip { grid-template-columns: 1fr 1fr; }
    .proof-strip .tr-item:nth-child(1),
    .proof-strip .tr-item:nth-child(2) { border-bottom: 1px solid var(--border); }
    .proof-strip .tr-item:nth-child(2) { border-right: none; }
  }

  @media (max-width: 480px) {
    .proof-strip { grid-template-columns: 1fr; }
    .proof-strip .tr-item { border-right: none; border-bottom: 1px solid var(--border); }
    .proof-strip .tr-item:last-child { border-bottom: none; }
  }

  /* ---- Credentials ---- */
  .credentials { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 36px; margin-top: 28px; }
  .cred-item { border-left: 2px solid var(--accent-600); padding-left: 16px; }

  .cred-item .label {
    font-size: 8pt;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-subtle);
    margin-bottom: 4px;
    display: block;
  }

  .cred-item .value {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 11.5pt;
    line-height: 1.4;
    color: var(--brand-900);
  }

  @media (max-width: 640px) { .credentials { grid-template-columns: 1fr; } }

  /* ---- Pricing banner ---- */
  .pricing-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    margin: 28px 0 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent-600);
  }

  .pricing-banner .pb-label {
    font-size: 8pt;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-600);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .pricing-banner .pb-text { font-size: 10.5pt; color: var(--text); line-height: 1.5; }
  .pricing-banner .pb-text strong { color: var(--brand-900); }

  @media (max-width: 640px) {
    .pricing-banner { flex-direction: column; align-items: flex-start; gap: 6px; }
  }

  /* ---- Engagement cards ---- */
  .engagements {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 32px;
    border: 1px solid var(--border);
    background: var(--surface);
  }

  .engagement {
    padding: 32px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: start;
  }

  .engagement:last-child { border-bottom: none; }

  .engagement.lead { background: var(--brand-900); color: #FFFFFF; }
  .engagement.lead h3 { color: #FFFFFF; }
  .engagement.lead .kicker { color: #7FB5B2; }
  .engagement.lead .engagement-body,
  .engagement.lead .engagement-body p { color: rgba(255,255,255,0.92); }
  .engagement.lead .engagement-body strong { color: #FFFFFF; }
  .engagement.lead .engagement-meta { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.2); }
  .engagement.lead .price { color: #FFFFFF; }
  .engagement.lead .price-unit { color: rgba(255,255,255,0.7); }

  .engagement-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    min-width: 200px;
  }

  .engagement-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    width: 100%;
    margin-top: 8px;
  }

  .engage-btn {
    display: inline-block;
    text-align: center;
    background: var(--brand-900);
    color: #FFFFFF;
    padding: 12px 20px;
    font-size: 9.5pt;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--brand-900);
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px solid var(--brand-900);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }

  .engage-btn:hover {
    background: var(--accent-600);
    border-color: var(--accent-600);
    color: #FFFFFF;
    opacity: 1;
    border-bottom-color: var(--accent-600);
  }

  .engagement.lead .engage-btn {
    background: #FFFFFF;
    color: var(--brand-900);
    border: 1px solid #FFFFFF;
    border-bottom-color: #FFFFFF;
  }

  .engagement.lead .engage-btn:hover {
    background: #7FB5B2;
    border-color: #7FB5B2;
    color: var(--brand-900);
    border-bottom-color: #7FB5B2;
  }

  .engagement.featured { background: var(--accent-100); }
  .engagement.featured .kicker { color: var(--accent-600); }
  .engagement.featured h3 { color: var(--brand-900); }
  .engagement.featured .engagement-meta { color: var(--text-muted); border-color: rgba(23,42,58,0.12); }
  .engagement.featured .engage-btn {
    background: var(--accent-600);
    border-color: var(--accent-600);
    border-bottom-color: var(--accent-600);
    color: #FFFFFF;
  }
  .engagement.featured .engage-btn:hover {
    background: var(--brand-900);
    border-color: var(--brand-900);
    border-bottom-color: var(--brand-900);
    color: #FFFFFF;
  }

  .engage-alt { font-size: 9pt; color: var(--text-subtle); text-align: right; border-bottom: none; }
  .engage-alt a { color: var(--text-muted); border-bottom: 1px solid var(--border); font-size: 9pt; }
  .engage-alt a:hover { color: var(--brand-900); border-bottom-color: var(--brand-900); opacity: 1; }
  .engagement.lead .engage-alt { color: rgba(255,255,255,0.6); }
  .engagement.lead .engage-alt a { color: rgba(255,255,255,0.85); border-bottom-color: rgba(255,255,255,0.3); }
  .engagement.lead .engage-alt a:hover { color: #FFFFFF; border-bottom-color: #FFFFFF; }

  .engage-note { font-size: 8.5pt; color: var(--text-subtle); text-align: right; line-height: 1.45; max-width: 200px; }
  .engagement.lead .engage-note { color: rgba(255,255,255,0.55); }

  .engagement-left { min-width: 0; }

  .kicker {
    font-size: 8pt;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-600);
    margin-bottom: 6px;
    display: block;
  }

  .price {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 600;
    font-size: 22pt;
    letter-spacing: -0.01em;
    color: var(--brand-900);
    white-space: nowrap;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .price-unit { font-family: system-ui, sans-serif; font-weight: 400; font-size: 10pt; color: var(--text-subtle); margin-left: 3px; }

  .engagement-body { color: var(--text); font-size: 10pt; line-height: 1.55; margin-top: 12px; }
  .engagement-body p { margin-bottom: 10px; }
  .engagement-body p:last-child { margin-bottom: 0; }

  .engagement-meta {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 8.5pt;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-subtle);
  }

  @media (max-width: 640px) {
    .engagement { grid-template-columns: 1fr; }
    .price { font-size: 20pt; }
  }

  /* ---- Rules ---- */
  .rules { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; margin-top: 28px; }
  .rule { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--border); }

  .rule-num {
    font-family: Georgia, serif;
    font-size: 10pt;
    font-weight: 600;
    color: var(--accent-600);
    flex-shrink: 0;
    min-width: 22px;
    font-variant-numeric: tabular-nums;
  }

  .rule-text { font-size: 10pt; line-height: 1.5; color: var(--text); }
  .rule-text strong { color: var(--brand-900); }

  @media (max-width: 640px) { .rules { grid-template-columns: 1fr; } }

  /* Opt-in: a lone final item spans both columns instead of leaving a ragged half-row.
     Deliberately NOT global - the intake and outcomes blocks also have odd counts and their
     current layout is pinned. Applied by adding "balanced" alongside "rules". */
  .rules.balanced .rule:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* ---- Reviews ---- */
  .review-item { border-left: 2px solid var(--accent-600); padding-left: 22px; margin: 28px 0; }

  .review-quote {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 13pt;
    line-height: 1.5;
    color: var(--text);
    margin-bottom: 12px;
  }

  .review-attrib {
    font-size: 9pt;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .review-attrib .name { color: var(--brand-900); }

  .review-source { font-size: 8.5pt; color: var(--text-subtle); margin-top: 14px; font-style: italic; }

  .review-carousel { position: relative; display: grid; grid-template-columns: 1fr; margin: 32px 0 8px; }

  .review-carousel .review-item {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s linear 0.6s;
  }

  .review-carousel .review-item.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s linear 0s;
  }

  /* Sharing one grid cell means the block is as tall as the LONGEST quote, so every shorter
     testimonial sits above a pool of dead space. .is-measured lifts the items out of flow and lets
     consulting.js give the container the height of whatever is actually showing.

     That layout only works while the script is running - with the items absolute, nothing is left
     to give the container a height. So the grid stack above stays the default and .is-measured is
     added by the script itself, after it has committed to driving the carousel. No JS, no class,
     no collapse: the fallback simply reserves the tallest quote the way it always did. */
  .review-carousel.is-measured {
    display: block;
    height: 0;
    overflow: hidden;
  }

  /* Only a deliberate change of testimonial animates. Re-measures the reader did not ask for - a
     window resize, a late web font - must land instantly, or the block lags behind the layout.
     This is a class rather than an inline transition the script switches on and off: a running
     transition outranks even an !important declaration, so a stuck one is immovable and very hard
     to recognise from the outside. */
  .review-carousel.is-measured.is-animating { transition: height 0.5s ease; }

  .review-carousel.is-measured .review-item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }

  .review-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-2);
    border: 1px solid var(--border);
    flex-shrink: 0;
  }

  .review-avatar[src=""], .review-avatar:not([src]) { display: none; }

  .review-dots { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }

  .review-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
    box-shadow: 0 0 0 8px transparent;
  }

  .review-dot:hover { background: var(--text-subtle); }
  .review-dot.is-active { background: var(--accent-600); transform: scale(1.2); }
  .review-dot:focus-visible { outline: 2px solid var(--accent-600); outline-offset: 4px; }

  @media (prefers-reduced-motion: reduce) {
    .review-carousel .review-item,
    .review-carousel .review-item.is-active { transition: none; transform: none; }
    .review-carousel.is-measured.is-animating { transition: none; }
  }

  /* ---- Relio cross-link ---- */
  .relio-link { background: var(--brand-900); color: #FFFFFF; padding: 36px; margin: 24px 0; border-left: 4px solid var(--accent-600); }
  .relio-link .kicker { color: #7FB5B2; margin-bottom: 10px; }
  .relio-link h3 { color: #FFFFFF; font-size: 18pt; margin-bottom: 10px; }
  .relio-link p { color: rgba(255,255,255,0.92); font-size: 10pt; max-width: 560px; margin-bottom: 18px; }
  .relio-link a {
    color: #FFFFFF;
    border-bottom-color: rgba(255,255,255,0.4);
    font-size: 9pt;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .relio-link a:hover { border-bottom-color: #FFFFFF; opacity: 1; }

  /* ---- CTA ---- */
  .cta-block { padding: 64px 0 56px; background: var(--surface); border-bottom: none; }
  .cta-block h2 { max-width: 580px; }

  .cta-form { margin-top: 28px; padding: 28px 32px; background: var(--surface-2); border: 1px solid var(--border); }
  .cta-form .kicker { margin-bottom: 10px; display: block; }
  .cta-form p { margin-bottom: 18px; font-size: 10.5pt; }

  .button {
    display: inline-block;
    background: var(--brand-900);
    color: #FFFFFF;
    padding: 13px 28px;
    font-size: 9.5pt;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    text-decoration: none;
    border-bottom: none;
    transition: background 0.15s;
  }

  .button:hover { background: var(--accent-600); opacity: 1; }

  /* ---- Footer ---- */
  footer { padding: 36px 0 48px; background: var(--brand-900); font-size: 9pt; color: rgba(255,255,255,0.75); flex-shrink: 0; }
  footer .footer-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
  footer a { color: rgba(255,255,255,0.9); border-bottom: 1px solid rgba(255,255,255,0.4); }
  footer a:hover { color: #FFFFFF; border-bottom-color: #FFFFFF; }

  .footer-legal { margin-top: 8px; font-size: 8.5pt; }
  .footer-legal a { color: rgba(255,255,255,0.55); border-bottom: 1px solid rgba(255,255,255,0.25); }
  .footer-legal a:hover { color: rgba(255,255,255,0.85); border-bottom-color: rgba(255,255,255,0.6); }

  /* ---- About section ---- */
  .about-section p { margin-bottom: 22px; }
  .about-section p.standout { margin-bottom: 28px; }
  .about-section .credentials { margin-top: 44px; clear: both; }

  /* The photo floats, so the section has to close over it. Consulting gets that from its
     credentials strip; coaching has no credentials block and would otherwise let a tall float
     escape into the next section when the about copy is shorter than the image. */
  .about-section .container::after { content: ""; display: block; clear: both; }

  .about-photo { float: left; width: 240px; margin: 0 36px 12px 0; shape-outside: margin-box; }
  .about-photo img { width: 100%; height: auto; display: block; border-radius: 4px; background: var(--surface-2); }

  @media (max-width: 760px) {
    .about-photo { float: none; max-width: 200px; margin: 0 0 24px 0; }
  }

  /* ---- Intake prompt ---- */
  .intake-prompt {
    margin: 0 0 28px;
    padding: 26px 32px;
    background: var(--accent-100);
    color: var(--brand-900);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
  }

  .intake-prompt p {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 12pt;
    line-height: 1.5;
    color: var(--brand-900);
    max-width: 580px;
    margin: 0;
  }

  .intake-prompt .intake-cta {
    display: inline-block;
    background: var(--accent-600);
    color: #FFFFFF;
    padding: 12px 22px;
    font-size: 9.5pt;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--accent-600);
    border-bottom: 1px solid var(--accent-600);
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
  }

  .intake-prompt .intake-cta:hover {
    background: #346866;
    border-color: #346866;
    border-bottom-color: #346866;
    color: #FFFFFF;
    opacity: 1;
  }

  /* ---- Hero CTAs ---- */
  .hero-ctas { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 26px; }
  .hero-ctas .button { background: var(--accent-600); }
  .hero-ctas .button:hover { background: #346866; }

  .hero-secondary { color: rgba(255,255,255,0.92); border-bottom: 1px solid rgba(255,255,255,0.4); font-size: 10pt; font-weight: 500; }
  .hero-secondary:hover { color: #FFFFFF; border-bottom-color: #FFFFFF; opacity: 1; }

  .hero-tagline {
    margin-top: 16px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 15pt;
    font-style: italic;
    line-height: 1.35;
    color: #7FB5B2;
  }

  .hero-microcopy { margin-top: 14px; font-size: 9.5pt; color: rgba(255,255,255,0.7); letter-spacing: 0.04em; }
  .hero-clarifier { margin-top: 10px; font-size: 9pt; color: rgba(255,255,255,0.55); line-height: 1.5; max-width: 560px; font-style: italic; }

  /* ---- Prose bullet list ---- */
  /* The consulting system has no generic ul/li rule, so an unstyled list inherits browser
     defaults. Any page wanting readable prose bullets uses this. */
  .prose-list {
    margin: 18px 0 22px 20px;
    padding: 0;
    max-width: 700px;
    font-size: 10pt;
    line-height: 1.6;
    color: var(--text);
  }

  .prose-list li { margin-bottom: 9px; }
  .prose-list li:last-child { margin-bottom: 0; }

  /* ---- Hiring decisions list ---- */
  .decisions-list { margin-top: 22px; list-style: none; counter-reset: decision; max-width: 720px; }
  .decisions-list li {
    counter-increment: decision;
    padding: 14px 0 14px 36px;
    border-bottom: 1px solid var(--border);
    position: relative;
    font-size: 11pt;
    line-height: 1.5;
    color: var(--text);
  }
  .decisions-list li::before {
    content: counter(decision, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 14px;
    font-family: Georgia, serif;
    font-weight: 600;
    font-size: 10pt;
    color: var(--accent-600);
    font-variant-numeric: tabular-nums;
  }
  .decisions-list li:last-child { border-bottom: none; }

  /* ---- Outcomes grid ---- */
  .outcomes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
  .outcome-card { background: var(--surface); border: 1px solid var(--border); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
  .outcome-before, .outcome-after { font-size: 10pt; line-height: 1.5; color: var(--text); }
  .outcome-before { color: var(--text-muted); }
  .outcome-after { padding-top: 10px; border-top: 1px dashed var(--border); color: var(--brand-900); font-weight: 500; }
  .outcome-card .label {
    font-size: 8pt;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-600);
    margin-right: 6px;
  }

  @media (max-width: 760px) { .outcomes-grid { grid-template-columns: 1fr; } }

  /* ---- Proof: featured case study over a secondary pair ---- */
  /* The three-up .outcomes-grid gave the multi-entity story the same weight as a one-line stat.
     The featured card takes the full width and the other two share a row beneath it. The featured
     card sits outside that grid on purpose, so it is free to be taller while the pair equalises. */
  .proof-featured { margin-top: 28px; }

  .proof-lead {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 13pt;
    font-weight: 600;
    line-height: 1.35;
    color: var(--accent-600);
  }

  /* Square corners on purpose: nothing in this system is rounded except an avatar and the about
     photo, so a pill would read as borrowed from the product side. */
  .proof-facts { display: flex; flex-wrap: wrap; gap: 8px; }

  .proof-fact {
    font-size: 9pt;
    line-height: 1.35;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 7px 12px;
  }

  .proof-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }

  @media (max-width: 760px) { .proof-pair { grid-template-columns: 1fr; } }

  /* ---- Animations ---- */
  .hero > .container > * { animation: consultingFadeUp 0.7s ease-out backwards; }
  .hero h1 { animation-delay: 0.05s; }
  .hero-tagline { animation-delay: 0.14s; }
  .hero .lede { animation-delay: 0.2s; }
  .hero-ctas { animation-delay: 0.32s; }
  .hero-microcopy { animation-delay: 0.42s; }
  .hero-clarifier { animation-delay: 0.5s; }

  @media (prefers-reduced-motion: reduce) {
    .hero > .container > * { animation: none; }
  }
}

/* Keyframes must sit at the top level: an @keyframes rule nested inside a style rule (the
   .consulting-site wrapper above) is invalid CSS and silently dropped, which left the hero
   entrance never playing in the app. Keyframe names are global, so the nested animation
   shorthand above resolves this fine. */
@keyframes consultingFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}