/* ============================================================
   ABOUT — page-specific styles
   Extracted from about.html inline <style> block
   to use the immutable 1-year cache on returning visits.
   ============================================================ */

/* ── FOUNDER HERO ──
   Inherit the canonical hero treatment used by .hero, .article-hero,
   .guide-hero, .booking-hero, .page-header — solid slate + film-grain
   noise + warm radial glow at upper-right. Without the glow gradient
   this hero rendered visually flat and indistinguishable from the
   credentials-strip below it (both pure slate), making the two zones
   blend into one continuous dark band. */
    .founder-hero {
      background-color: var(--slate);
      background-image: var(--grad-noise), var(--grad-hero-glow);
      padding: 120px 0 var(--sp-8);
      position: relative;
      overflow: hidden;
    }
    .founder-hero-inner {
      display: grid;
      grid-template-columns: 1fr 380px;
      gap: 72px;
      align-items: center;
    }
    @media (max-width: 960px) {
      .founder-hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;
      }
    }
    /* Founder-hero eyebrow — aligned to the canonical eyebrow system.
       Was using raw 700 weight, raw 0.12em letter-spacing, and --orange
       (5.18:1 on slate, AA only). Now uses --fw-bold, --ls-widest, and
       --accent-on-dark (6.9:1 AAA on slate) so it matches the other
       dark-context eyebrows site-wide. */
    .founder-hero-label {
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      text-transform: uppercase;
      letter-spacing: var(--ls-widest);
      color: var(--accent-on-dark);
      margin-bottom: 14px;
    }
    .founder-hero h1 {
      color: var(--white);
      /* Was raw clamp(2rem, 4vw, 3rem) — exact value of --fs-3xl token.
         Added --ls-snug to match home/services H1 letter-spacing. */
      font-size: var(--fs-3xl);
      line-height: var(--lh-tight);
      letter-spacing: var(--ls-snug);
      margin-bottom: var(--sp-5);
    }
    .founder-hero-subtitle {
      /* Was --stone (2.1:1 on slate). Now AAA. */
      color: var(--on-dark);
      font-size: var(--fs-md);
      line-height: var(--lh-loose);
      max-width: 560px;
    }
    .founder-photo-frame {
      /* Elevated card on the slate hero — uses the system's translucent
         white-overlay token so the lift composites naturally with the
         underlying gradient (was raw #253347, ~6% white over slate). */
      background: var(--surface-on-dark-2);
      border-radius: var(--radius-xl);
      overflow: hidden;
      aspect-ratio: 3/4;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .founder-photo-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--sp-3);
      /* On bg #253347 (dark). Was --muted-dark (2:1). Now on-dark-muted. */
      color: var(--on-dark-muted);
    }
    .founder-photo-placeholder svg {
      width: 80px;
      height: 80px;
      opacity: 0.4;
    }
    .founder-photo-placeholder p {
      font-size: var(--fs-sm);
      color: var(--on-dark-muted);
      text-align: center;
    }
    .founder-photo-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
    }

    /* ── CREDENTIALS STRIP ──
       Sits directly below .founder-hero. Both are slate, so the strip
       needs a deliberate visual separator. We use the slate-glow-soft
       gradient (lower-left warm glow) so the strip reads as a distinct
       secondary zone, complementary to the upper-right glow on the
       hero above it. The thin border-top keeps the seam crisp. */
    .credentials-strip {
      background-color: var(--slate);
      background-image: var(--grad-noise), var(--grad-slate-glow-soft);
      padding: 0;
      border-top: 1px solid var(--surface-on-dark-3);
    }
    .credentials-inner {
      display: flex;
      align-items: stretch;
      justify-content: center;
    }
    .credential-item {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
      padding: 22px var(--sp-6);
      border-right: 1px solid var(--surface-on-dark-3);
      flex: 1;
    }
    .credential-item:last-child {
      border-right: none;
    }
    .credential-icon {
      font-size: var(--fs-md);
      color: var(--orange);
      flex-shrink: 0;
    }
    .credential-text {
      font-size: var(--fs-sm);
      font-weight: 600;
      color: var(--white);
      line-height: 1.3;
    }
    .credential-subtext {
      font-size: var(--fs-xs);
      color: var(--on-dark-muted);
      line-height: 1.4;
      margin-top: 2px;
    }
    @media (max-width: 768px) {
      .credentials-inner {
        flex-direction: column;
      }
      .credential-item {
        border-right: none;
        border-bottom: 1px solid var(--surface-on-dark-3);
        padding: var(--sp-4) 20px;
        flex: none;
      }
      .credential-item:last-child {
        border-bottom: none;
      }
    }

    /* ── STORY SECTION ── */
    .story-section {
      background-color: var(--white);
  background-image: var(--grad-white-soft);
      padding: var(--section-pad);
    }
    .story-inner {
      display: grid;
      grid-template-columns: 1fr 400px;
      gap: 80px;
      align-items: start;
    }
    @media (max-width: 960px) {
      .story-inner {
        grid-template-columns: 1fr;
        gap: var(--sp-7);
      }
    }
    .story-content h2 {
      /* Was raw clamp(1.6rem, 3vw, 2.2rem) — drifted 0.05rem (~0.8px)
         below --fs-2xl-fluid which other pages use. Now token-aligned. */
      font-size: var(--fs-2xl-fluid);
      letter-spacing: var(--ls-snug);
      margin-bottom: var(--card-pad-lg);
      line-height: var(--lh-tight);
    }
    .story-content p {
      font-size: var(--fs-base);
      line-height: 1.85;
      margin-bottom: var(--sp-5);
      color: var(--body-text);
    }
    .story-content p:last-child {
      margin-bottom: 0;
    }
    .story-content p strong {
      color: var(--slate);
      font-weight: 600;
    }
    .story-pull {
      position: sticky;
      top: 100px;
    }
    .pull-quote {
      background: var(--cream);
      border-left: 4px solid var(--orange);
      padding: var(--sp-6) 28px;
      border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
      margin-bottom: var(--sp-5);
    }
    .pull-quote p {
      font-family: var(--font-heading);
      font-size: var(--fs-md);
      line-height: 1.5;
      color: var(--slate);
      font-style: italic;
      margin: 0;
    }
    .inside-facts {
      background: var(--slate);
      border-radius: var(--radius-lg);
      padding: var(--card-pad-lg);
    }
    .inside-facts-label {
      font-size: var(--fs-2xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--orange);
      margin-bottom: var(--sp-4);
    }
    .inside-fact {
      display: flex;
      gap: var(--sp-3);
      padding: var(--sp-3) 0;
      border-bottom: 1px solid var(--surface-on-dark-3);
    }
    .inside-fact:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
    .inside-fact-icon {
      color: var(--accent-on-dark);
      font-size: var(--fs-sm);
      flex-shrink: 0;
      margin-top: 2px;
      line-height: 1;
    }
    .inside-fact p {
      font-size: var(--fs-sm);
      /* On .inside-facts (slate). Was --stone (2.1:1). Now AAA. */
      color: var(--on-dark);
      line-height: var(--lh-base);
      margin: 0;
    }
    .inside-fact p strong {
      color: var(--white);
      font-weight: 600;
    }

    /* ── WHAT THIS MEANS FOR YOU ──
       Audit 2026-05-06: switched cream → white. industry-problem-section
       above is cream; consecutive same-bg sections lose rhythm.
       Sequence is now slate → white → cream → white → slate → white
       → cream → slate (perfect alternation). */
    .means-section {
      background-color: var(--white);
  background-image: var(--grad-white-soft);
      padding: var(--section-pad);
    }
    .means-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--card-pad-lg);
      margin-top: var(--sp-7);
    }
    @media (max-width: 768px) {
      .means-grid { grid-template-columns: 1fr; }
    }
    .means-card {
      background: var(--white);
      border-radius: var(--radius-lg);
      padding: var(--sp-6) 28px;
      border-top: 3px solid var(--orange);
    }
    .means-number {
      font-family: var(--font-heading);
      font-size: var(--fs-2xl);
      color: var(--accent-large);   /* vibrant brand orange — AA Large at 40px */
      line-height: 1;
      margin-bottom: var(--sp-3);
    }
    .means-card h3 {
      font-size: var(--fs-base);
      margin-bottom: 10px;
    }
    .means-card p {
      font-size: var(--fs-sm);
      color: var(--ink-2);
      line-height: 1.65;
      margin: 0;
    }

    /* ── THE STANDARD ── */
    .standard-section {
      background-color: var(--white);
  background-image: var(--grad-white-soft);
      padding: var(--section-pad);
    }
    .standard-inner {
      max-width: var(--container-prose-md);
      margin: 0 auto;
      text-align: center;
    }
    .standard-inner h2 {
      /* Aligned to --fs-2xl-fluid (was custom clamp 1.8-2.4rem). */
      font-size: var(--fs-2xl-fluid);
      letter-spacing: var(--ls-snug);
      line-height: var(--lh-tight);
      margin-bottom: var(--sp-5);
    }
    .standard-inner > p {
      font-size: var(--fs-base);
      line-height: 1.8;
      margin-bottom: var(--sp-7);
    }
    .commitments {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--sp-5);
      text-align: left;
      margin-bottom: var(--sp-7);
    }
    @media (max-width: 640px) {
      .commitments { grid-template-columns: 1fr; }
    }
    .commitment-item {
      display: flex;
      gap: 14px;
      padding: var(--sp-5);
      background: var(--cream);
      border-radius: var(--radius-md);
    }
    .commitment-check {
      width: 24px;
      height: 24px;
      background: var(--orange);
      border-radius: var(--radius-circle);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--slate);
      font-size: var(--fs-xs);
      font-weight: 700;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .commitment-item h3 {
      font-size: var(--fs-sm);
      margin-bottom: var(--sp-1);
    }
    .commitment-item p {
      font-size: var(--fs-sm);
      color: var(--ink-2);
      line-height: var(--lh-base);
      margin: 0;
    }

    /* ── GUARANTEE ── */
    .guarantee-box {
      background: var(--slate);
      border-radius: var(--radius-xl);
      padding: 40px var(--sp-7);
      display: flex;
      align-items: center;
      gap: var(--sp-6);
      flex-wrap: wrap;
      text-align: left;
    }
    .guarantee-icon-large {
      font-size: 3rem;
      flex-shrink: 0;
    }
    .guarantee-box h3 {
      color: var(--white);
      font-size: var(--fs-lg);
      margin-bottom: var(--sp-2);
    }
    .guarantee-box p {
      /* Guarantee block body on slate — was --stone (~2:1 fail). */
      color: var(--on-dark);
      font-size: var(--fs-sm-plus);
      line-height: 1.65;
      margin: 0;
    }
    @media (max-width: 768px) {
      .guarantee-box { padding: var(--card-pad-lg) var(--sp-5); }
      .story-section,
      .means-section,
      .standard-section,
      .industry-problem-section {
        padding: var(--section-pad);
      }
    }

    /* ── NAV HIGHLIGHT LINK ── */
    .nav-links a.nav-link-highlight { color: var(--orange);
      font-weight: 600;
    }
    .mobile-nav-link-highlight {
      color: var(--orange);
      font-weight: 700;
    }

    /* ── FOUNDER HERO EXTRAS ── */
    .founder-hero-paragraph-gap {
      margin-top: var(--sp-4);
    }
    .founder-hero-anon-quote {
      font-size: var(--fs-sm);
      color: var(--on-dark-muted);
      margin-top: var(--sp-4);
      font-style: italic;
    }

    /* ── FOUNDER PHOTO PLACEHOLDER INNER ── */
    .founder-placeholder-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--sp-4);
      padding: var(--sp-6);
    }
    .founder-placeholder-avatar {
      width: 72px;
      height: 72px;
      background: var(--accent-alpha-15);
      border-radius: var(--radius-circle);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .founder-placeholder-text {
      text-align: center;
    }
    .founder-placeholder-line {
      font-size: var(--fs-sm);
      color: var(--on-dark-default);
      line-height: 1.6;
    }
    .founder-placeholder-badge {
      /* Neutral elevated surface (3% white) replaces the prior 12% orange
         tint. The orange tint composited with the slate parent dulled the
         brand-orange text inside; switching to a neutral surface lets the
         label render as crisp brand orange against clean dark elevation. */
      background: var(--surface-on-dark-1);
      border-radius: var(--radius-sm);
      padding: var(--sp-3) var(--sp-4);
      text-align: center;
    }
    .founder-placeholder-badge-label {
      font-size: var(--fs-2xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--orange);
      margin-bottom: var(--sp-1);
    }
    .founder-placeholder-badge-desc {
      font-size: var(--fs-sm);
      color: var(--on-dark-muted);
      line-height: 1.5;
    }

    /* ── SESSION ANATOMY ──
       Secondary dark zone (full-width). Matches the canonical
       .cta-section treatment: slate + noise + slate-glow-soft. */
    .session-section {
      background-color: var(--slate);
      background-image: var(--grad-noise), var(--grad-slate-glow-soft);
      padding: var(--section-pad);
    }
    .session-header {
      margin-bottom: var(--sp-7);
    }
    .section-label--dark {
      color: var(--orange);
    }
    .section-title-dark {
      color: var(--white);
    }
    .section-subtitle-dark {
      /* On .session-section (slate). Was --stone (2.1:1). */
      color: var(--on-dark);
    }

    /* ── TIMELINE ── */
    .timeline-container {
      max-width: 720px;
      margin: 0 auto;
      position: relative;
    }
    .timeline-line {
      position: absolute;
      left: 19px;
      top: 0;
      bottom: 0;
      width: 2px;
      background: var(--surface-on-dark-3);
    }
    .timeline-items {
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .timeline-step {
      display: flex;
      gap: var(--sp-5);
      padding-bottom: var(--sp-6);
      position: relative;
    }
    .timeline-step:last-child {
      padding-bottom: 0;
    }
    .timeline-step-circle {
      width: 40px;
      height: 40px;
      background: var(--orange);
      border-radius: var(--radius-circle);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--fs-2xs);
      font-weight: 700;
      color: var(--slate);
      flex-shrink: 0;
      z-index: var(--z-base);
    }
    .timeline-step-circle-final {
      background: var(--success);
    }
    .timeline-step-body {
      padding-top: var(--sp-2);
    }
    .timeline-step-label {
      font-size: var(--fs-2xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--orange);
      margin-bottom: var(--sp-1half);
    }
    .timeline-step-label-final {
      color: var(--success);
    }
    .timeline-step h3 {
      color: var(--white);
      font-size: var(--fs-base);
      margin-bottom: var(--sp-1half);
    }
    .timeline-step p {
      /* Inside .session-section (slate). Was --stone. */
      color: var(--on-dark);
      font-size: var(--fs-sm);
      line-height: var(--lh-relaxed);
      margin: 0;
    }

    /* ── SESSION CTA ── */
    .session-cta {
      text-align: center;
      margin-top: var(--sp-7);
    }
    .session-cta-subtext {
      margin-top: 10px;
      font-size: var(--fs-sm);
      color: var(--on-dark-default);
    }

    /* ── WHY HOLDBACK / INDUSTRY PROBLEM ── */
    .industry-problem-section {
      background-color: var(--cream);
  background-image: var(--grad-cream-warm);
      padding: var(--section-pad);
    }
    .industry-problem-inner {
      max-width: 800px;
      margin: 0 auto;
    }
    .industry-problem-inner h2 {
      font-size: var(--fs-2xl-fluid);
      letter-spacing: var(--ls-snug);
      line-height: var(--lh-tight);
      margin-bottom: var(--sp-5);
      scroll-margin-top: 88px;
    }
    .industry-problem-inner p {
      font-size: var(--fs-base);
      line-height: 1.85;
      margin-bottom: var(--sp-5);
      color: var(--body-text);
    }
    .industry-problem-inner p:last-child {
      margin-bottom: 0;
    }
    .industry-problem-inner p strong {
      color: var(--slate);
      font-weight: 600;
    }
    .industry-callout {
      /* Warm-tint callout — was raw var(--accent-tint) which exactly matches
         --accent-tint. Same value, now token-disciplined. */
      background: var(--accent-tint);
      border: 2px solid var(--orange);
      border-radius: var(--radius-lg);
      padding: var(--sp-5) 28px;
      margin: var(--card-pad-lg) 0;
    }
    .industry-callout p {
      margin: 0;
      /* Was raw var(--accent-deepest) == --accent-deepest. */
      color: var(--accent-deepest);
      font-size: var(--fs-sm-plus);
      line-height: var(--lh-relaxed);
      font-weight: 500;
    }
    .industry-model-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--sp-5);
      margin: var(--sp-6) 0;
    }
    @media (max-width: 640px) {
      .industry-model-grid { grid-template-columns: 1fr; }
    }
    .industry-model-card {
      border-radius: var(--radius-lg);
      padding: var(--sp-6) 28px;
    }
    .industry-model-label {
      font-size: var(--fs-2xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: var(--sp-2);
    }
    .industry-model-card h3 {
      font-size: var(--fs-base);
      margin-bottom: 10px;
    }
    .industry-model-card p {
      font-size: var(--fs-sm);
      line-height: 1.65;
      margin: 0;
    }
    /* Problem/Holdback comparison cards — previously used raw Tailwind
       hex (var(--danger-tint)/var(--danger-deepest)/#ecfdf5/var(--ok-text)/#065f46) which broke the
       site's warm-palette token discipline. Mapped to the system's
       danger/ok tokens so the cards stay on-brand and stay AA-contrast
       even if the tokens drift later. */
    .industry-card-problem {
      background: var(--danger-alpha-10);
    }
    /* Audit 2026-05-08: --danger-deep red (#C02D36) on --danger-alpha-10
       composites to ~4.2:1 against the underlying section bg — FAILS AA
       at the H3 size. --danger-deepest (#7F1D1D) lifts to ~10:1. Same
       fix on the matching --ok cards: --ok-text on --ok-alpha-10 was
       ~3.6:1; now uses a darker green for AAA-comfortable reading. */
    .industry-card-problem .industry-model-label { color: var(--danger-deepest); }
    .industry-card-problem h3 { color: var(--danger-deepest); }
    /* Body p was --danger-deep on alpha-10 over cream = 4.3:1 (FAIL AA).
       The card's red tone is set by bg + label + h3; body copy reads better
       and passes AA when it stays as slate ink, like the rest of the site. */
    .industry-card-problem p { color: var(--ink); }
    .industry-card-holdback {
      background: var(--ok-alpha-10);
    }
    .industry-card-holdback .industry-model-label { color: var(--ok-deepest); }
    .industry-card-holdback h3 { color: var(--ok-deepest); }
    .industry-card-holdback p { color: var(--ink); }
    .industry-quote-box {
      background: var(--slate);
      border-radius: var(--radius-lg);
      padding: var(--card-pad-lg) var(--sp-6);
      margin: var(--sp-6) 0;
    }
    .industry-quote-box .industry-quote-text {
      color: var(--on-dark-default);
      font-family: var(--font-heading);
      font-size: var(--fs-md);
      line-height: 1.6;
      margin: 0;
    }

    /* CTA trust badges and .trust-check now defined in shared styles.css */