/* MJKDA shared stylesheet. Used by every page. */
  :root {
    /* Self-hosted faces (assets/fonts/fonts.css). Zilla Slab stands in for
       Museo, which is commercial and was never actually loaded; the old
       stacks fell back to Rockwell/Segoe on every machine. */
    --display: "Zilla Slab", "Museo", Rockwell, "Roboto Slab", Georgia, serif;
    --body: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;

    /* MJKDA brand - from their logo + live site */
    --navy: #24345E;        /* logo wordmark */
    --navy-deep: #1A2745;   /* hero ground */
    --navy-deeper: #131D36;
    --navy-glow: #2C4070;   /* hero radial highlight */
    --flag-red: #C8102E;    /* red-white-and-blue nod for federal/military work - small doses only */
    --blue: #2980B9;        /* their site accent - large/decorative use */
    --blue-strong: #206A9C;
    --sky: #7FA6D9;         /* logo gradient mid */
    --sky-light: #A9C4E8;   /* logo gradient light */

    --bg: #FFFFFF;
    --panel: #F4F7FA;
    --panel-2: #FFFFFF;
    --ink: #232B33;
    --ink-soft: #4E5B68;
    --ink-faint: #5D6B79;
    --line: rgba(36, 52, 94, 0.14);
    --line-strong: rgba(36, 52, 94, 0.28);
    --accent: #206A9C;      /* AA-safe small-text/CTA blue in light theme */
    --accent-strong: #1B5A85;
    --on-accent: #FFFFFF;
    --heading: var(--navy);

    /* hero tokens (committed navy in both themes) */
    --hero-ink: #F0F4F9;
    --hero-soft: #A8B9D4;
    --hero-line: rgba(255, 255, 255, 0.12);

    --maxw: 1160px;
    --gutter: clamp(1.25rem, 4vw, 3rem);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0F1622;
      --panel: #1A2739;   /* raised: the old value was too close to --bg to read as a separate section */
      --panel-2: #1E2C40;
      --ink: #E8EEF5;
      --ink-soft: #A9B8C8;
      --ink-faint: #7E8DA0;
      --line: rgba(169, 196, 232, 0.16);
      --line-strong: rgba(169, 196, 232, 0.3);
      --accent: #4E9CD3;
      --accent-strong: #6FB1DE;
      --on-accent: #0F1622;
      --heading: #DCE7F5;
    }
  }
  :root[data-theme="light"] {
    --bg: #FFFFFF; --panel: #F4F7FA; --panel-2: #FFFFFF;
    --ink: #232B33; --ink-soft: #4E5B68; --ink-faint: #5D6B79;
    --line: rgba(36, 52, 94, 0.14); --line-strong: rgba(36, 52, 94, 0.28);
    --accent: #206A9C; --accent-strong: #1B5A85; --on-accent: #FFFFFF;
    --heading: #24345E;
  }
  :root[data-theme="dark"] {
    --bg: #0F1622; --panel: #1A2739; --panel-2: #1E2C40;
    --ink: #E8EEF5; --ink-soft: #A9B8C8; --ink-faint: #7E8DA0;
    --line: rgba(169, 196, 232, 0.16); --line-strong: rgba(169, 196, 232, 0.3);
    --accent: #4E9CD3; --accent-strong: #6FB1DE; --on-accent: #0F1622;
    --heading: #DCE7F5;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  [id] { scroll-margin-top: 88px; } /* clear the sticky header on anchor jumps */
  body {
    margin: 0; background: var(--bg); color: var(--ink);
    font-family: var(--body); font-size: 1.0625rem; line-height: 1.65;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  }
  h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; color: var(--heading); text-wrap: balance; margin: 0; line-height: 1.15; }
  p { margin: 0; }
  a { color: var(--accent); }
  .wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

  .eyebrow {
    font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--accent); margin: 0;
  }
  section { padding-block: clamp(3.25rem, 7vw, 5.5rem); }
  .section-head { max-width: 64ch; }
  .section-head h2 { font-size: clamp(1.8rem, 3.3vw, 2.55rem); margin-top: 0.85rem; }
  .section-head .lead { color: var(--ink-soft); margin-top: 1rem; font-size: 1.12rem; max-width: 62ch; }

  /* ---------- Utility bar + header ---------- */
  .util {
    background: var(--navy-deeper); color: var(--hero-soft);
    font-size: 0.82rem; letter-spacing: 0.02em;
  }
  .util .wrap { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.4rem; }
  .util a { color: var(--hero-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--hero-ink) 55%, transparent); }
  .util a:hover { color: var(--sky-light); }

  header.bar {
    position: sticky; top: 0; z-index: 50;
    background: var(--navy-deep); /* fallback for browsers without color-mix */
    background: color-mix(in srgb, var(--navy-deep) 94%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--hero-line);
  }
  .bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 68px; }
  .brand { display: flex; flex-direction: column; text-decoration: none; line-height: 1.1; }
  .brand .mark { font-family: var(--display); font-size: 1.45rem; font-weight: 700; letter-spacing: 0.04em; color: #FFFFFF; }
  .brand .mark .grad {
    background: linear-gradient(100deg, var(--sky) 10%, var(--sky-light) 90%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  /* Tag says what the firm does; "& Associates" was redundant with the A in
     MJKDA (Skylar, 8/27). Tighter tracking so the longer line stays compact. */
  .brand .tag { font-size: 0.55rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hero-soft); }
  nav.links { display: flex; gap: 1.5rem; }
  nav.links a {
    text-decoration: none; color: var(--hero-soft); font-size: 0.88rem; font-weight: 600;
    padding: 0.3rem 0; position: relative; transition: color 0.2s;
  }
  nav.links a::after {
    content: ""; position: absolute; left: 0; bottom: -3px; height: 2px; width: 0;
    background: linear-gradient(90deg, var(--sky), var(--sky-light)); transition: width 0.25s ease;
  }
  nav.links a:hover { color: #FFFFFF; }
  nav.links a:hover::after { width: 100%; }

  /* mobile disclosure menu (no JS needed) */
  .mobnav { display: none; position: relative; }
  .mobnav summary {
    cursor: pointer; list-style: none; color: var(--hero-ink); border: 1px solid var(--hero-line);
    border-radius: 4px; padding: 0.35rem 0.7rem; font-size: 1.15rem; line-height: 1;
  }
  .mobnav summary::-webkit-details-marker { display: none; }
  .mobnav .panel {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; min-width: 220px;
    background: var(--navy-deep); border: 1px solid var(--hero-line); border-radius: 6px;
    padding: 0.6rem 0; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
    display: flex; flex-direction: column;
  }
  .mobnav .panel a {
    color: var(--hero-soft); text-decoration: none; font-size: 0.95rem; font-weight: 600;
    padding: 0.6rem 1.2rem;
  }
  .mobnav .panel a:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.06); }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    font-family: var(--body); font-size: 0.94rem; font-weight: 700;
    text-decoration: none; cursor: pointer; border: 1px solid transparent;
    padding: 0.75rem 1.4rem; border-radius: 4px;
    transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 18px -8px rgba(32, 106, 156, 0.7); }
  .btn-primary:hover { background: var(--accent-strong); transform: translateY(-1px); }
  .btn-ghost { background: transparent; color: var(--hero-ink); border-color: var(--hero-line); }
  .btn-ghost:hover { border-color: var(--sky); }
  .btn-outline { background: transparent; color: var(--accent); border-color: var(--line-strong); }
  .btn-outline:hover { border-color: var(--accent); }
  .bar .btn-primary { padding: 0.55rem 1.1rem; }

  /* ---------- Hero ---------- */
  .hero {
    position: relative; overflow: hidden; color: var(--hero-ink);
    background:
      radial-gradient(110% 130% at 15% -10%, var(--navy-glow) 0%, transparent 55%),
      linear-gradient(175deg, var(--navy-deep) 0%, var(--navy-deeper) 100%);
    border-bottom: 4px solid var(--blue);
  }
  .hero-inner { position: relative; z-index: 2; padding-block: clamp(3.5rem, 8vw, 6rem) clamp(6rem, 11vw, 9.5rem); max-width: 62rem; }
  .hero h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); color: #FFFFFF; letter-spacing: -0.01em; margin-top: 1.1rem; max-width: 21ch; }
  .hero h1 .grad {
    background: linear-gradient(100deg, var(--sky) 0%, var(--sky-light) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .hero .sub { color: var(--hero-soft); font-size: 1.16rem; line-height: 1.6; margin-top: 1.4rem; max-width: 58ch; }
  .hero .sub strong { color: var(--hero-ink); font-weight: 600; }
  .hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; margin-top: 2rem; }
  .hero .reassure { font-size: 0.86rem; color: var(--hero-soft); margin-top: 0.9rem; }
  .hero .reassure b { color: var(--hero-ink); }

  /* stepped growth-curve motif - MJKDA's S-curve strategy cycle, drawn as a measured chart */
  .growth-curve { position: absolute; inset: auto 0 -2px 0; z-index: 1; width: 100%; height: auto; display: block; pointer-events: none; }

  /* small red/white/blue credential stripes (SDVOSB / federal work) */
  .rwb { display: inline-flex; gap: 2px; margin-right: 0.5rem; vertical-align: baseline; }
  .rwb i { width: 4px; height: 0.85em; border-radius: 1px; display: inline-block; transform: translateY(0.12em); }
  .rwb i:nth-child(1) { background: var(--flag-red); }
  .rwb i:nth-child(2) { background: #FFFFFF; box-shadow: 0 0 0 1px rgba(36, 52, 94, 0.25); }
  .rwb i:nth-child(3) { background: var(--blue); }

  /* ---------- Client logo wall (dark band: maximum contrast against the white sections) ---------- */
  .strip {
    background: linear-gradient(175deg, var(--navy-deep), var(--navy-deeper));
    border-bottom: 4px solid var(--blue); padding-block: clamp(2.8rem, 5vw, 4rem);
  }
  .strip .label { text-align: center; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sky-light); margin-bottom: 0.7rem; }
  .strip .wall-head {
    text-align: center; font-family: var(--display); font-weight: 600; color: #FFFFFF;
    font-size: clamp(1.35rem, 2.6vw, 1.95rem); line-height: 1.25; max-width: 30ch; margin: 0 auto 1.9rem;
  }
  /* marquee: two identical tracks scrolling as one continuous loop */
  .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
  .marquee-track { display: flex; width: max-content; animation: logo-slide 46s linear infinite; }
  /* (hover-pause removed in v19: the freeze read as a bug) */
  @keyframes logo-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  .logos { display: flex; flex-wrap: nowrap; gap: 0.85rem; padding: 0 0.425rem; margin: 0; list-style: none; }
  .logos li {
    flex: none; width: 208px;
    background: rgba(255, 255, 255, 0.055); border: 1px solid var(--hero-line); border-radius: 6px;
    min-height: 104px; padding: 1rem 1.1rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    transition: border-color 0.2s ease, background 0.2s ease;
  }
  .logos li:hover { border-color: var(--sky); background: rgba(255, 255, 255, 0.1); }
  .logos .name { font-family: var(--display); font-weight: 700; font-size: 1.02rem; line-height: 1.25; color: #FFFFFF; }
  .logos .sector { display: block; font-family: var(--body); font-weight: 600; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hero-soft); margin-top: 0.45rem; }
  /* Placeholder SVGs ship at the final filenames: overwrite the file in assets/logos/
     and the real logo appears with no markup change. Monochrome-white keeps a mix of
     brand colors looking like one set. See assets/logos/README.md */
  /* fixed box + object-fit: real logos of any aspect ratio letterbox into the same
     optical size, so a wide wordmark and a square mark sit evenly on the row */
  .logos li img {
    width: 100%; height: 46px; object-fit: contain; display: block;
    filter: brightness(0) invert(1); opacity: 0.9; transition: opacity 0.2s ease;
  }
  .logos li:hover img { opacity: 1; }
  .strip .wall-foot { text-align: center; font-size: 0.86rem; color: var(--hero-soft); margin-top: 1.5rem; }
  .strip .wall-foot b { color: var(--hero-ink); }

  /* ---------- Split layout: breaks the full-width, centered rhythm ---------- */
  .split { display: grid; grid-template-columns: 1fr 0.92fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
  .split-sticky { position: sticky; top: 96px; }

  /* ---------- Sample deliverable: makes the free offer tangible ---------- */
  .sample {
    background: linear-gradient(168deg, var(--navy-deep), var(--navy-deeper));
    border: 1px solid var(--hero-line); border-radius: 10px; padding: 1.6rem 1.7rem 1.5rem;
    color: var(--hero-ink); box-shadow: 0 30px 60px -34px rgba(19, 29, 54, 0.85);
  }
  .sample .tag {
    display: inline-block; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--navy-deeper); background: var(--sky-light); padding: 0.2rem 0.55rem; border-radius: 3px;
  }
  .sample h3 { color: #FFFFFF; font-size: 1.24rem; margin-top: 0.85rem; }
  .sample .who { font-size: 0.82rem; color: var(--hero-soft); margin-top: 0.3rem; }
  .findings { list-style: none; margin: 1.35rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1.05rem; }
  .finding { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.75rem; align-items: start; }
  .finding .n {
    font-family: var(--display); font-weight: 700; font-size: 0.92rem; color: var(--sky-light);
    line-height: 1.3; font-variant-numeric: tabular-nums;
  }
  .finding .t { font-weight: 700; font-size: 0.95rem; color: #FFFFFF; }
  .finding .bar { margin-top: 0.45rem; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.13); overflow: hidden; }
  .finding .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--sky-light)); border-radius: 4px; }
  .finding .m { font-size: 0.78rem; color: var(--hero-soft); margin-top: 0.35rem; }
  .sample .foot { margin-top: 1.4rem; padding-top: 1.05rem; border-top: 1px solid var(--hero-line); font-size: 0.82rem; color: var(--hero-soft); }

  /* ---------- Lean numbered steps: rule + dot instead of a bordered box ---------- */
  .stack { list-style: none; margin: 2rem 0 0; padding: 0 0 0 1.9rem; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 1.9rem; }
  .stack li { position: relative; }
  .stack li::before {
    content: ""; position: absolute; left: calc(-1.9rem - 7px); top: 0.45rem; width: 12px; height: 12px;
    border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg);
  }
  .stack li.is-free::before { background: var(--sky-light); box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--accent); }
  .stack .k { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
  .stack h3 { font-size: 1.22rem; margin-top: 0.3rem; }
  .stack .meta { font-size: 0.84rem; font-weight: 700; color: var(--ink-faint); margin-top: 0.2rem; }
  .stack p { color: var(--ink-soft); font-size: 0.96rem; margin-top: 0.5rem; }

  /* ---------- Compact service list: 8 rows, no card chrome ---------- */
  .svc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.6rem; margin-top: 2.2rem; list-style: none; padding: 0; }
  .svc-list li { display: flex; gap: 0.9rem; align-items: baseline; padding: 0.95rem 0; border-top: 1px solid var(--line); }
  .svc-list li:nth-child(1), .svc-list li:nth-child(2) { border-top: 0; }
  .svc-list .num { font-family: var(--display); font-weight: 700; font-size: 0.82rem; color: var(--accent); font-variant-numeric: tabular-nums; flex: none; }
  .svc-list h3 { font-size: 1.04rem; display: inline; }
  .svc-list .t { font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.15rem; }

  /* ---------- Principals with portraits ---------- */
  .prin .shot {
    flex: none; width: 96px; height: 96px; border-radius: 8px; object-fit: cover;
    background: linear-gradient(135deg, var(--navy), var(--blue)); display: block;
  }

  /* ---------- Offer ladder (legacy three-rung layout, no consumer) ---------- */
  .ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 2.6rem; list-style: none; padding: 0; }
  .rung-card {
    position: relative; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
    padding: 1.7rem 1.5rem 1.6rem; display: flex; flex-direction: column;
  }
  .rung-card.featured { border-color: var(--accent); box-shadow: 0 20px 44px -24px rgba(32, 106, 156, 0.55); }
  .rung-card .free-tag {
    position: absolute; top: -0.72rem; left: 1.3rem; background: var(--accent); color: var(--on-accent);
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 0.22rem 0.65rem; border-radius: 3px;
  }
  .rung-card .stepno { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
  .rung-card h3 { font-size: 1.32rem; margin-top: 0.5rem; }
  .rung-card .meta { font-size: 0.85rem; font-weight: 700; color: var(--ink-faint); margin-top: 0.25rem; }
  .rung-card p.body { color: var(--ink-soft); font-size: 0.97rem; margin-top: 0.75rem; }
  .rung-card .btn { margin-top: 1.25rem; align-self: flex-start; }
  .ladder-note { margin-top: 1.4rem; font-size: 0.92rem; color: var(--ink-soft); }

  /* ---------- Stat band ---------- */
  .stats { padding-block: clamp(2.8rem, 5vw, 4rem); border-bottom: 1px solid var(--line); }
  .stats .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
  .stat .fig {
    font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums;
    font-size: clamp(2.2rem, 4.4vw, 3.1rem); line-height: 1; color: var(--accent);
  }
  .stat .cap { color: var(--ink-soft); font-size: 0.92rem; margin-top: 0.55rem; }
  .stat .fig-acr { font-size: clamp(1.55rem, 3vw, 2.2rem); padding-block: 0.45rem 0.3rem; letter-spacing: 0.04em; }

  /* ---------- Juncture cards ---------- */
  .juncture { background: var(--panel); border-bottom: 1px solid var(--line); }
  .j-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin: 2.4rem 0 0; list-style: none; padding: 0; }
  .j-card {
    background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px;
    padding: 1.5rem 1.4rem; display: flex; gap: 0.95rem; align-items: flex-start;
  }
  .j-card .tick {
    flex: none; width: 30px; height: 30px; border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent); display: grid; place-items: center; font-weight: 800; font-size: 0.95rem;
  }
  .j-card p { color: var(--ink-soft); font-size: 0.98rem; }
  .j-card p b { color: var(--ink); }
  .j-card.cta-card {
    background: linear-gradient(135deg, var(--navy-deep), var(--navy-deeper));
    border-color: transparent; flex-direction: column; justify-content: center; align-items: flex-start;
  }
  .j-card.cta-card p { color: var(--hero-ink); font-family: var(--display); font-size: 1.15rem; font-weight: 600; }

  /* ---------- Services ---------- */
  .svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-top: 2.6rem; }
  .svc {
    background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px;
    padding: 1.5rem 1.4rem; display: flex; flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }
  .svc:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 30px -18px rgba(36, 52, 94, 0.4); }
  .svc .ico {
    width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); margin-bottom: 1rem;
  }
  .svc .ico svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .svc h3, .svc h2 { font-size: 1.14rem; }
  .svc .tease { color: var(--accent); font-size: 0.88rem; font-weight: 600; margin-top: 0.35rem; }
  .svc p.desc { color: var(--ink-soft); font-size: 0.92rem; margin-top: 0.6rem; }

  /* ---------- Approach timeline ---------- */
  .approach { background: var(--panel); border-block: 1px solid var(--line); }
  .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 2.8rem 0 0; position: relative; list-style: none; padding: 0; }
  .step { position: relative; padding: 1.6rem 1.4rem 0 1.4rem; }
  .step::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--line);
  }
  .step::after {
    content: ""; position: absolute; top: -5px; left: 1.4rem; width: 13px; height: 13px;
    border-radius: 50%; background: var(--accent); border: 3px solid var(--bg);
  }
  .step .phase { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
  .step h3 { font-size: 1.18rem; margin-top: 0.45rem; }
  .step p { color: var(--ink-soft); font-size: 0.93rem; margin-top: 0.5rem; }

  /* ---------- Comparison table ---------- */
  .comp-table-wrap { overflow-x: auto; margin-top: 2.4rem; border: 1px solid var(--line); border-radius: 8px; }
  table.comp { width: 100%; border-collapse: collapse; font-size: 0.97rem; background: var(--panel-2); }
  table.comp th {
    background: var(--navy-deep); color: var(--hero-ink); text-align: left;
    padding: 0.95rem 1.1rem; font-family: var(--body); font-weight: 700; font-size: 0.9rem;
  }
  table.comp thead td { background: var(--navy-deep); }
  table.comp th:first-child { width: 22%; }
  table.comp td { padding: 0.9rem 1.1rem; border-top: 1px solid var(--line); vertical-align: top; color: var(--ink-soft); }
  table.comp tbody th { padding: 0.9rem 1.1rem; border-top: 1px solid var(--line); vertical-align: top; text-align: left; font-family: var(--body); font-weight: 700; color: var(--heading); white-space: nowrap; background: var(--panel-2); }
  table.comp td:last-child { color: var(--ink); background: color-mix(in srgb, var(--accent) 6%, transparent); }
  .answer-lead { font-size: 1.12rem; color: var(--ink); max-width: 66ch; margin-top: 1rem; }

  /* ---------- Dark band: anchors the middle of the page so the light sections
       above and below read as separate chapters instead of one long scroll ---------- */
  .band-dark {
    background: radial-gradient(120% 130% at 80% 0%, var(--navy-glow) 0%, transparent 55%),
                linear-gradient(172deg, var(--navy-deep), var(--navy-deeper));
    border-block: 4px solid var(--blue);
  }
  .band-dark h2, .band-dark h3 { color: #FFFFFF; }
  .band-dark .eyebrow { color: var(--sky-light); }
  .band-dark .lead, .band-dark .note { color: var(--hero-soft); }
  .band-dark .feature-quote {
    background: rgba(255, 255, 255, 0.05); border-left-color: var(--sky);
    border-radius: 0 10px 10px 0;
  }
  .band-dark .feature-quote p { color: #FFFFFF; }
  .band-dark .feature-quote figcaption, .band-dark .quote-pair figcaption { color: var(--hero-soft); }
  .band-dark .quote-pair figure { background: rgba(255, 255, 255, 0.045); border-color: var(--hero-line); }
  .band-dark .quote-pair figure p { color: var(--hero-ink); }
  .band-dark .note a { color: var(--sky-light); }

  /* oversized quote mark: a graphic element, not another box */
  .quote-mark {
    font-family: var(--display); font-size: clamp(4rem, 7vw, 5.5rem); line-height: 0.85;
    color: var(--sky); opacity: 0.3; margin: -0.6rem 0 0.4rem; user-select: none;
  }

  /* ---------- Testimonials ---------- */
  .feature-quote {
    margin: 2.4rem 0 0 0; border-left: 4px solid var(--accent);
    background: var(--panel); border-radius: 0 8px 8px 0; padding: 1.9rem 2rem;
  }
  .feature-quote blockquote { margin: 0; }
  .feature-quote p { font-family: var(--display); font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.45; color: var(--heading); font-weight: 500; }
  .feature-quote figcaption { margin-top: 1rem; font-size: 0.88rem; color: var(--ink-faint); font-weight: 600; }
  .quote-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 1.2rem; }
  .quote-pair figure {
    margin: 0; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 1.5rem 1.6rem;
    display: flex; flex-direction: column;
  }
  .quote-pair blockquote { margin: 0; }
  .quote-pair figure p { color: var(--ink); font-size: 0.99rem; }
  .quote-pair figcaption { margin-top: auto; padding-top: 1rem; font-size: 0.85rem; color: var(--ink-faint); font-weight: 600; }
  .mid-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 1.1rem; margin-top: 2.3rem; }
  .mid-cta .note { font-size: 0.9rem; color: var(--ink-soft); }

  /* ---------- Principals ---------- */
  .prin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 2.4rem; }
  .prin {
    display: flex; gap: 1.25rem; background: var(--panel-2); border: 1px solid var(--line);
    border-radius: 8px; padding: 1.6rem;
  }
  .prin .mono {
    flex: none; width: 68px; height: 68px; border-radius: 50%;
    display: grid; place-items: center; color: #FFFFFF;
    background: linear-gradient(135deg, var(--navy), var(--blue));
    font-family: var(--display); font-weight: 700; font-size: 1.4rem;
  }
  .prin h3 { font-size: 1.24rem; }
  .prin .role { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); margin-top: 0.2rem; }
  .prin p { color: var(--ink-soft); font-size: 0.93rem; margin-top: 0.65rem; }

  /* ---------- FAQ ---------- */
  .faq-list { margin-top: 2.2rem; display: flex; flex-direction: column; gap: 0.8rem; max-width: 60rem; }
  .faq-list details {
    background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
    padding: 0; overflow: hidden;
  }
  .faq-list details[open] { border-color: var(--accent); }
  .faq-list summary {
    cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 1.1rem 1.4rem; font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--heading);
  }
  .faq-list summary::-webkit-details-marker { display: none; }
  .faq-list summary::after { content: "+"; font-size: 1.4rem; color: var(--accent); font-weight: 400; transition: transform 0.2s ease; flex: none; }
  .faq-list details[open] summary::after { transform: rotate(45deg); }
  .faq-body { padding: 0 1.4rem 1.25rem; color: var(--ink-soft); font-size: 0.98rem; }
  .faq-body a { font-weight: 600; }

  /* ---------- Footer ---------- */
  footer.site {
    background: var(--navy-deeper); color: var(--hero-soft); font-size: 0.88rem;
  }
  footer.site .wrap { padding-block: 2.6rem; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
  footer.site .mark { font-family: var(--display); font-weight: 700; font-size: 1.3rem; color: #FFFFFF; letter-spacing: 0.04em; }
  footer.site .mark .grad { background: linear-gradient(100deg, var(--sky), var(--sky-light)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  footer.site p { margin-top: 0.7rem; max-width: 38ch; }
  footer.site h3 { color: #FFFFFF; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 0.9rem; }
  footer.site a { color: var(--hero-soft); text-decoration: none; display: block; padding: 0.18rem 0; }
  footer.site a:hover { color: #FFFFFF; }
  footer.site .legal { border-top: 1px solid var(--hero-line); padding-block: 1.1rem; text-align: center; font-size: 0.8rem; }

  /* reveal - hidden state only applies once JS confirms IntersectionObserver works,
     so content is never invisible if JS/IO is unavailable */
  html.reveal-on .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
  html.reveal-on .reveal.in { opacity: 1; transform: none; }
  html.reveal-on .reveal.forced { transition: none; opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    html.reveal-on .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
    /* no motion: fall back to a centered static wall, drop the duplicate track */
    .marquee { overflow: visible; -webkit-mask-image: none; mask-image: none; }
    .marquee-track { animation: none; width: 100%; }
    .marquee-track > [aria-hidden="true"] { display: none; }
    .logos { flex-wrap: wrap; justify-content: center; }
  }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* ---------- Responsive ---------- */
  @media (max-width: 960px) {
    .svc-grid { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
    .j-grid { grid-template-columns: repeat(2, 1fr); }
    .stats .grid { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
    .ladder { grid-template-columns: 1fr; }
    .split { grid-template-columns: 1fr; }
    .split-sticky { position: static; }
    .svc-list { grid-template-columns: 1fr; }
    .svc-list li:nth-child(2) { border-top: 1px solid var(--line); }
    .prin-grid, .quote-pair { grid-template-columns: 1fr; }
    nav.links { display: none; }
    .mobnav { display: block; }
    footer.site .wrap { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 580px) {
    .svc-grid, .j-grid, .steps { grid-template-columns: 1fr; }
    .logos li { width: 176px; min-height: 94px; }
    .util .wrap { justify-content: center; }
    .util .right { display: none; }
    footer.site .wrap { grid-template-columns: 1fr; }
    /* Header fit on phones (9/17): the bar had no rule below 580px, so the
       header CTA collapsed to its min-content width and wrapped to three lines
       over the brand lockup. Keep the label on one line, drop the arrow glyph,
       and tighten the row gap so brand + menu + CTA fit a 375px viewport. */
    .bar-inner { gap: 0.5rem; }
    .bar .btn-primary { white-space: nowrap; flex-shrink: 0; font-size: 0.8rem; padding: 0.5rem 0.75rem; gap: 0; }
    .bar .btn-primary::after { display: none; }
  }
  @media (max-width: 480px) {
    .brand .tag { display: none; }   /* the lockup keeps MJKDA; the category line returns above 480px */
    .brand .mark { font-size: 1.3rem; }
  }

/* ============================================================
   v2 — conversion path (Score Review funnel)
   ============================================================ */

/* anonymized sector chips (replaces the named-client logo wall) */
.sectors { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; list-style: none; margin: 0; padding: 0; }
.sectors li {
  border: 1px solid var(--hero-line); border-radius: 100px; padding: 0.5rem 1.05rem;
  font-size: 0.9rem; font-weight: 600; color: var(--hero-ink); background: rgba(255,255,255,0.05);
}

/* page hero for interior pages */
.page-hero { background: linear-gradient(172deg, var(--navy-deep), var(--navy-deeper)); border-bottom: 4px solid var(--blue); color: var(--hero-ink); }
.page-hero .wrap { padding-block: clamp(3rem, 6vw, 4.75rem); }
.page-hero h1 { color: #FFFFFF; font-size: clamp(2rem, 4.2vw, 3.1rem); max-width: 20ch; margin-top: 0.9rem; }
.page-hero .sub { color: var(--hero-soft); font-size: 1.12rem; margin-top: 1.1rem; max-width: 54ch; }
.page-hero .sub strong { color: var(--hero-ink); }

/* the staircase: four stations climbing the S-curve (columns per breakpoint in the v44 block) */
.stair { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-top: 2.4rem; list-style: none; padding: 0; }
.stair > li { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 1.7rem 1.5rem; display: flex; flex-direction: column; }
.stair > li.now { border-color: var(--accent); box-shadow: 0 22px 46px -26px rgba(32,106,156,0.55); }
.stair .station { display: flex; align-items: center; gap: 0.6rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.stair .station .pip { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; }
.stair h3 { font-size: 1.3rem; margin-top: 0.75rem; }
.stair .analogy { font-size: 0.86rem; font-weight: 700; color: var(--ink-faint); margin-top: 0.3rem; }
.stair dl { margin: 1.1rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 0.9rem; font-size: 0.92rem; }
.stair dt { font-weight: 700; color: var(--heading); white-space: nowrap; }
.stair dd { margin: 0; color: var(--ink-soft); }
.stair .price { margin-top: 1.15rem; padding-top: 0.9rem; border-top: 1px solid var(--line); font-weight: 700; color: var(--heading); font-size: 0.95rem; }
.stair .btn { margin-top: 1.1rem; align-self: flex-start; }

/* inline CTA block — reused in articles and bios */
.cta-inline {
  background: linear-gradient(168deg, var(--navy-deep), var(--navy-deeper));
  border: 1px solid var(--hero-line); border-radius: 10px; padding: 1.7rem 1.8rem;
  margin: 2.6rem 0; color: var(--hero-ink);
}
.cta-inline p.k { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sky-light); }
.cta-inline h3 { color: #FFFFFF; font-size: 1.3rem; margin-top: 0.5rem; max-width: 30ch; }
.cta-inline p.b { color: var(--hero-soft); font-size: 0.98rem; margin-top: 0.6rem; max-width: 54ch; }
.cta-inline .btn { margin-top: 1.15rem; }

/* booking embed */
.booking { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel-2); margin-top: 1.6rem; }
.booking iframe { width: 100%; min-height: 620px; border: 0; display: block; }
.booking-fallback { padding: 2rem 1.8rem; text-align: center; }
.booking-fallback p { color: var(--ink-soft); font-size: 0.96rem; margin-top: 0.6rem; }
.booking-note { font-size: 0.86rem; color: var(--ink-faint); margin-top: 0.9rem; }

/* walk-away list */
.walk { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.walk li { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.8rem; align-items: start; }
.walk .tick { color: var(--accent); font-weight: 800; }
.walk b { color: var(--heading); }
.walk p { color: var(--ink-soft); font-size: 0.95rem; margin-top: 0.15rem; }

/* quartile proof numbers */
.moves { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 1.8rem; list-style: none; padding: 0; }
.moves li { border: 1px solid var(--line); border-radius: 8px; padding: 1.3rem 1.2rem; background: var(--panel-2); }
.moves .fig { font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.5rem); color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }
.moves .cap { color: var(--ink-soft); font-size: 0.9rem; margin-top: 0.5rem; }

@media (max-width: 960px) {
  .stair, .moves { grid-template-columns: 1fr; }
}

/* ============================================================
   v3 — conversion homepage (show, don't tell)
   ============================================================ */

/* hero becomes a split: pitch left, the actual deliverable right */
.hero-inner.hero-grid {
  max-width: var(--maxw);
  display: grid; grid-template-columns: 1.05fr 0.85fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}

/* sourced-outcome tiles on the dark proof band */
.strip .moves { margin-top: 0; text-align: left; }
.strip .moves li { background: rgba(255,255,255,0.055); border: 1px solid var(--hero-line); }
.strip .moves .fig { color: var(--sky-light); }
.strip .moves .cap { color: var(--hero-soft); }
.strip .moves .cap b { color: var(--hero-ink); }

/* founder voice quote: his words, not our copy */
.voice-quote { margin: 1.8rem 0 0; max-width: 60ch; }
.voice-quote blockquote { margin: 0; border-left: 4px solid var(--accent); padding-left: 1.2rem; }
.voice-quote p { font-family: var(--display); font-weight: 500; font-size: 1.18rem; line-height: 1.5; color: var(--heading); }
.voice-quote figcaption { margin-top: 0.6rem; padding-left: 1.2rem; font-size: 0.86rem; color: var(--ink-faint); font-weight: 600; }

@media (max-width: 960px) {
  .hero-inner.hero-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   v4 — engagement pass: gold = results, blue = action,
   light/dark section rhythm, a visual device per section
   ============================================================ */
:root {
  --gold: #C89A3C;        /* results/proof accent - large figures, tags */
  --gold-strong: #7E5E17; /* AA-safe small gold text on light (6.0:1 on white; 9A7420 measured 4.3:1) */
  --gold-soft: #F0C878;
}
@media (prefers-color-scheme: dark) {
  :root { --gold: #E3B457; --gold-strong: #E3B457; --gold-soft: #F4D08A; }
}
:root[data-theme="dark"] { --gold: #E3B457; --gold-strong: #E3B457; --gold-soft: #F4D08A; }
:root[data-theme="light"] { --gold: #C89A3C; --gold-strong: #7E5E17; --gold-soft: #F0C878; }

/* hero headline highlight: the promise rendered in the results color */
.hero h1 .grad-gold {
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-soft) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* proof band flips LIGHT: breaks the dark slab after the hero */
.strip {
  background: var(--panel);
  border-bottom: 1px solid var(--line); border-top: 0;
  padding-block: clamp(2.8rem, 5vw, 4rem);
}
.strip .label { color: var(--gold-strong); }
.strip .wall-head { color: var(--heading); }
.strip .moves li { background: var(--panel-2); border: 1px solid var(--line); }
.strip .moves .fig { color: var(--gold); }
.strip .moves .cap { color: var(--ink-soft); }
.strip .moves .cap b { color: var(--ink); }
.strip .wall-foot { color: var(--ink-faint); }
.strip .wall-foot b { color: var(--ink); }

/* the free tag and top finding go gold: value reads at a glance */
.rung-card .free-tag { background: var(--gold); color: #1A2745; }
.sample .tag { background: var(--gold-soft); color: #1A2745; }
.finding .bar i.g { background: linear-gradient(90deg, var(--gold), var(--gold-soft)); }

/* quartile-position glyphs on the pain cards */
.j-card .qglyph { display: block; margin-top: 0.85rem; }

/* engagement phase bar: duration shown, not described */
.phasebar-fig { margin: 2.2rem 0 0; }
.phasebar { display: flex; gap: 3px; height: 12px; border-radius: 6px; overflow: hidden; }
.phasebar span { display: block; }
.phasebar .s1 { background: var(--sky-light); }
.phasebar .s2 { background: var(--sky); }
.phasebar .s3 { background: var(--accent); }
.phasebar .s4 { background: var(--gold); }
.phasebar-caps { display: flex; gap: 3px; margin-top: 0.5rem; }
.phasebar-caps span { font-size: 0.78rem; color: var(--ink-faint); line-height: 1.35; }
.phasebar-caps b { display: block; color: var(--ink-soft); font-size: 0.8rem; }

/* ladder connector: the fee-credit flows forward */
.ladder-arrows > li { position: relative; }
.ladder-arrows > li:not(:last-child)::after {
  content: "\203A"; position: absolute; right: -0.92rem; top: 50%;
  transform: translateY(-58%); font-size: 1.9rem; line-height: 1;
  color: var(--line-strong); font-family: var(--display);
}
@media (max-width: 960px) {
  .ladder-arrows > li:not(:last-child)::after { content: "\2304"; right: auto; left: 50%; top: auto; bottom: -1.5rem; transform: translateX(-50%); }
}

/* ============================================================
   v5 — rebuilt to conversion spec: ~580 visible words,
   one visual device per section, no two adjacent layouts alike
   ============================================================ */
.hero-inner.hero-grid { align-items: center; }
.hero .sub { max-width: 46ch; }
p, .lead, .sub, .body { max-width: 62ch; }   /* Baymard: >80ch = 41% more skipping */

/* §1 hero visual: the score gap, drawn */
.gapchart { width: 100%; height: auto; display: block; }

/* §2 trust strip: attached to the hero, no padding above */
.trustbar { background: var(--panel); border-bottom: 1px solid var(--line); padding-block: 1.15rem; }
.trustbar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 2rem; }
.trustbar .k { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }
.trustbar .m { font-size: 0.92rem; font-weight: 700; color: var(--ink-soft); }
.trustbar .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong); }

/* §3 the quote IS the section */
.bigquote { padding-block: clamp(3rem, 6vw, 4.5rem); }
.bigquote blockquote { margin: 0; max-width: 22ch; }
.bigquote p {
  font-family: var(--display); font-weight: 600; max-width: none;
  font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.14; color: var(--heading);
}
.bigquote .rule { width: 64px; height: 3px; background: var(--gold); margin-bottom: 1.6rem; }
.bigquote figcaption { margin-top: 1.4rem; font-size: 0.88rem; font-weight: 700; color: var(--ink-faint); }

/* §4 stat triad: numerals as design elements */
.triad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.triad li { border-top: 3px solid var(--gold); padding-top: 1.1rem; }
.triad .n {
  font-family: var(--display); font-weight: 700; line-height: 0.95;
  font-size: clamp(3rem, 7vw, 5.2rem); color: var(--heading); font-variant-numeric: tabular-nums;
}
.triad .l { margin-top: 0.6rem; font-size: 0.95rem; color: var(--ink-soft); max-width: 24ch; }

/* §6 evidence: before -> after */
.evidence { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; list-style: none; margin: 2.2rem 0 0; padding: 0; }
.evidence li { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 1.5rem 1.4rem; }
.evidence .tag { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.evidence .ba { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.7rem; font-family: var(--display); font-weight: 700; }
.evidence .from { font-size: 1.5rem; color: var(--ink-faint); }
.evidence .arrow { color: var(--gold); font-size: 1.3rem; }
.evidence .to { font-size: 2.3rem; color: var(--gold); line-height: 1; }
.evidence p { font-size: 0.94rem; color: var(--ink-soft); margin-top: 0.8rem; }

.bookbox { background: rgba(255,255,255,0.055); border: 1px solid var(--hero-line); border-radius: 10px; padding: 1.7rem; }
.bookbox .f { margin-bottom: 0.9rem; }
.bookbox label { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hero-soft); margin-bottom: 0.3rem; }
.bookbox input {
  width: 100%; padding: 0.7rem 0.85rem; border-radius: 5px; font: inherit; font-size: 0.95rem;
  background: rgba(255,255,255,0.07); border: 1px solid var(--hero-line); color: #FFFFFF;
}
.bookbox input::placeholder { color: rgba(255,255,255,0.35); }
.bookbox .btn { width: 100%; margin-top: 0.4rem; }
.bookbox .micro { font-size: 0.8rem; color: var(--hero-soft); text-align: center; margin-top: 0.75rem; }

@media (max-width: 960px) {
  .triad, .evidence { grid-template-columns: 1fr; }
}

/* ============================================================
   v6 — interaction layer. Restrained, purposeful motion:
   every effect either aids comprehension or signals affordance.
   All of it is opt-out under prefers-reduced-motion (bottom).
   ============================================================ */

/* --- buttons: directional affordance + press feedback --- */
.btn-primary::after {
  content: "\2192"; display: inline-block; margin-left: 0.1rem;
  transition: transform 0.22s cubic-bezier(.2,.7,.3,1);
}
.btn-primary:hover::after { transform: translateX(4px); }
.btn:active { transform: translateY(1px) scale(0.995); }

/* --- sticky nav gains weight once you leave the hero --- */
header.bar { transition: box-shadow 0.25s ease, background 0.25s ease; }
header.bar.stuck { box-shadow: 0 10px 30px -18px rgba(0,0,0,0.75); }
header.bar.stuck .bar-inner { height: 60px; transition: height 0.25s ease; }
.bar-inner { transition: height 0.25s ease; }

/* --- hero gap chart ---
   Bars are animated by JS (width attribute), NOT by CSS transform: transforms on
   SVG rects proved unreliable here, and driving width in JS also means the chart
   renders complete when JS is off. Nothing below hides the bars. */
.gapchart .gapmark { transition: opacity 0.5s ease; }

/* --- stat triad: static gold rule; the count-up carries the motion --- */
.triad li { position: relative; }

/* --- sample output: bars are filled by JS (inline width) so they also
       render complete with JS off. See the fillBars() routine. --- */
.findings .bar i { transition: width 0.85s cubic-bezier(.2,.8,.25,1); }

/* --- evidence cards: lift + the result rail lights up --- */
.evidence li {
  position: relative; overflow: hidden;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.evidence li::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--gold); transform: scaleY(0); transform-origin: top;
  transition: transform 0.3s cubic-bezier(.2,.8,.25,1);
}
.evidence li:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 22px 40px -26px rgba(19,29,54,0.55); }
.evidence li:hover::before { transform: scaleY(1); }
.evidence .to { transition: transform 0.22s ease; display: inline-block; }
.evidence li:hover .to { transform: scale(1.06); }

/* --- comparison table: row focus makes it readable across --- */
table.comp tbody tr { transition: background 0.18s ease; }
table.comp tbody tr:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
table.comp tbody tr:hover th { background: color-mix(in srgb, var(--accent) 9%, transparent); }
table.comp td:last-child { transition: background 0.18s ease; }

/* --- phase timeline: hover a phase, its caption steps forward --- */
.phasebar span { transition: flex-grow 0.3s ease, filter 0.2s ease; cursor: default; }
.phasebar-fig:hover .phasebar span { filter: saturate(0.5) opacity(0.55); }
.phasebar-fig .phasebar span:hover { filter: none; }
.phasebar-caps span { transition: color 0.2s ease, transform 0.2s ease; }
.phasebar-caps span:hover { transform: translateY(-2px); }
.phasebar-caps span:hover b { color: var(--accent); }

/* --- offer ladder steps: the free one breathes --- */
.stack li { transition: transform 0.22s ease; }
.stack li:hover { transform: translateX(3px); }
.stack li::before { transition: box-shadow 0.3s ease, transform 0.25s ease; }
.stack li:hover::before { transform: scale(1.25); }

/* --- testimonial + principal cards --- */
.quote-pair figure, .prin {
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.quote-pair figure:hover, .prin:hover {
  transform: translateY(-3px); border-color: var(--line-strong);
  box-shadow: 0 20px 38px -26px rgba(19,29,54,0.5);
}
.prin .shot { transition: transform 0.3s cubic-bezier(.2,.8,.25,1); }
.prin:hover .shot { transform: scale(1.04); }

/* --- FAQ: chevron rotates, panel eases open --- */
.faq-list summary { transition: color 0.18s ease, background 0.18s ease; }
.faq-list summary:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.faq-list details[open] .faq-body { animation: faq-open 0.28s cubic-bezier(.2,.8,.25,1); }
@keyframes faq-open { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

/* --- form: focus states that feel engineered --- */
.bookbox input { transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; }
.bookbox input:focus {
  outline: none; border-color: var(--sky);
  background: rgba(255,255,255,0.11);
  box-shadow: 0 0 0 3px rgba(127,166,217,0.18);
}

/* --- honor the setting: everything above collapses to static --- */
@media (prefers-reduced-motion: reduce) {
  .triad li { border-top-color: var(--gold); }
  .triad li::before { display: none; }
  .btn-primary::after, .evidence li, .quote-pair figure, .prin, .stack li,
  .phasebar span, .phasebar-caps span, .prin .shot { transition: none !important; }
  .faq-list details[open] .faq-body { animation: none; }
}

/* ============================================================
   v7 — gap chart rebuilt as a first-class card component.
   Matches .sample: same frame, same tag chip, same shadow, and
   SVG text inherits the site's typefaces via CSS (attributes
   can't take var(), which is why it looked pasted in).
   ============================================================ */
.gapcard {
  background: linear-gradient(168deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  border: 1px solid var(--hero-line); border-radius: 10px;
  padding: 1.5rem 1.6rem 1.35rem;
  box-shadow: 0 30px 60px -34px rgba(19,29,54,0.85);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.gapcard:hover { border-color: rgba(255,255,255,0.22); transform: translateY(-2px); }
.gapcard .head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.15rem; }
.gapcard .tag {
  font-family: var(--body); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--navy-deeper); background: var(--sky-light);
  padding: 0.2rem 0.55rem; border-radius: 3px;
}
.gapcard .live { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto;
  font-family: var(--body); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--hero-soft); }
.gapcard .live i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); display: block; }
.gapcard .foot {
  margin-top: 1.1rem; padding-top: 0.95rem; border-top: 1px solid var(--hero-line);
  font-size: 0.83rem; color: var(--hero-soft);
}
.gapcard .foot b { color: var(--hero-ink); }

/* SVG type: inherit the page's faces (attributes can't reference CSS vars) */
.gapchart text { font-family: var(--body); }
.gapchart .ax { font-size: 10px; font-weight: 700; letter-spacing: 1.4px; fill: var(--hero-soft); text-transform: uppercase; }
.gapchart .val { font-family: var(--display); font-size: 17px; font-weight: 700; }
.gapchart .val-lead { fill: #FFFFFF; }
.gapchart .val-you { fill: var(--hero-soft); }
.gapchart .gaplabel { font-family: var(--body); font-size: 11px; font-weight: 800; letter-spacing: 1.2px; fill: var(--gold); }
.gapchart .quart { font-family: var(--body); font-size: 9px; font-weight: 700; letter-spacing: 0.8px; fill: rgba(255,255,255,0.32); }

/* bars + rails */
.gapchart .rail { fill: rgba(255,255,255,0.05); }
.gapchart .bar-1 { fill: var(--sky); transition: fill 0.25s ease; }
.gapchart .bar-2 { fill: rgba(255,255,255,0.28); transition: fill 0.25s ease; }
.gapcard:hover .gapchart .bar-1 { fill: var(--sky-light); }
.gapcard:hover .gapchart .bar-2 { fill: rgba(255,255,255,0.4); }

/* the gap measure breathes twice after it lands, then rests */
.gapchart .gapmark { opacity: 0; transition: opacity 0.45s ease; }
.gapchart .gapmark.on { opacity: 1; animation: gap-breathe 1.6s ease-in-out 0.35s 2; }
@keyframes gap-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
.gapchart .gapmark { transform-box: view-box; transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
  .gapchart .gapmark.on { animation: none; }
  .gapcard, .gapcard .gapchart .bar-1, .gapcard .gapchart .bar-2 { transition: none; }
}

/* ============================================================
   v8 — offer mechanics: prep list, guarantee, timing note
   ============================================================ */
.prep { list-style: none; margin: 0.85rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.prep li { position: relative; padding-left: 1.35rem; font-size: 0.93rem; color: var(--ink-soft); }
.prep li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--gold); font-weight: 800; font-size: 0.85rem;
}
.guarantee {
  margin-top: 0.95rem; padding: 0.8rem 0.95rem;
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  border-left: 3px solid var(--gold); border-radius: 0 5px 5px 0;
  font-size: 0.9rem; color: var(--ink); max-width: none;
}
.guarantee b { color: var(--heading); }
.timing {
  display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 1.4rem;
  font-size: 0.9rem; color: var(--hero-soft); max-width: 52ch;
}
.timing .cal { color: var(--gold); font-weight: 800; flex: none; }

/* ============================================================
   v9 — CRO pass: form states + mobile sticky CTA
   ============================================================ */
.bookbox .fallback {
  display: none; margin-top: 0.9rem; padding: 0.75rem 0.9rem; border-radius: 6px;
  background: rgba(255,255,255,0.07); border: 1px solid var(--hero-line);
  font-size: 0.85rem; color: var(--hero-ink); text-align: center;
}
.bookbox .fallback a { color: var(--sky-light); font-weight: 700; }
.bookbox.sent .fallback { display: block; }

/* mobile-only sticky CTA: appears after the hero, hides at the form */
.sticky-cta {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--navy-deeper) 96%, transparent);
  border-top: 1px solid var(--hero-line);
  transform: translateY(110%); transition: transform 0.3s cubic-bezier(.2,.8,.25,1);
}
.sticky-cta.show { transform: translateY(0); }
.sticky-cta .btn { width: 100%; }
@media (max-width: 720px) {
  .sticky-cta { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}

/* ============================================================
   v10 — 8/14 call feedback: logo band returns (Mike endorsed),
   bench positioning, smoke-detector line
   ============================================================ */
.logoband {
  background: linear-gradient(175deg, var(--navy-deep), var(--navy-deeper));
  border-bottom: 4px solid var(--blue); padding-block: 1.5rem 1.7rem;
}
.logoband .k {
  text-align: center; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--hero-soft); margin-bottom: 1rem;
}
.logoband .foot {
  text-align: center; font-size: 0.8rem; color: var(--hero-soft); margin-top: 1rem;
}
.logoband .foot b { color: var(--hero-ink); }

/* Mike's own metaphor, under the DFL quote */
.smoke { margin-top: 2rem; font-size: 1.12rem; color: var(--ink-soft); }
.smoke b { color: var(--heading); }

/* ============================================================
   v11 — white pass: real contrast between white and tinted
   sections, white logo strip, strict light/tint/dark rhythm
   ============================================================ */
:root { --panel: #EDF2F8; }                    /* was #F4F7FA: too close to white to read */
:root[data-theme="light"] { --panel: #EDF2F8; }
/* dark mode --panel unchanged (raised navy) */

section { padding-block: clamp(3.5rem, 7.5vw, 6rem); }   /* a touch more air */

/* logo band flips WHITE: grayscale marks on white, the classic trust strip */
.logoband { background: var(--bg); border-bottom: 1px solid var(--line); padding-block: 1.6rem 1.8rem; }
.logoband .k { color: var(--ink-faint); }
.logoband .logos li {
  background: transparent; border: 0; width: 172px; min-height: 52px; padding: 0.3rem 0.8rem;
}
.logoband .foot { color: var(--ink-faint); }
.logoband .foot b { color: var(--ink); }

/* white cards on tinted ground get a touch more lift */
.evidence li, .faq-list details, .comp-table-wrap, .quote-pair figure, .prin {
  background: var(--panel-2);
}

/* ============================================================
   v12 — COMMITTED LIGHT DESIGN.
   The marketing site renders identically for every visitor,
   regardless of OS/browser dark mode. Dark-mode token overrides
   above are neutralized by these later rules (same or higher
   specificity, later in the cascade). The navy hero/testimonial/
   CTA bands are the intentional dark elements and stay.
   ============================================================ */
:root, :root[data-theme="light"], :root[data-theme="dark"] {
  color-scheme: light;
  --bg: #FFFFFF; --panel: #EDF2F8; --panel-2: #FFFFFF;
  --ink: #232B33; --ink-soft: #4E5B68; --ink-faint: #5D6B79;
  --line: rgba(36, 52, 94, 0.14); --line-strong: rgba(36, 52, 94, 0.28);
  --accent: #206A9C; --accent-strong: #1B5A85; --on-accent: #FFFFFF;
  --heading: #24345E;
  --gold: #C89A3C; --gold-strong: #7E5E17; --gold-soft: #F0C878;
}
/* logo strip: full color in every theme (grayscale removed in v21) */

/* ============================================================
   v13 — legible logos, seamless loop, ICP pain mirrors
   ============================================================ */
/* logos: half again bigger, real presence */
.logoband { padding-block: 2rem 2.2rem; }

/* pain mirrors under the CEO quote: the reader finds themselves */
.pains { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; list-style: none; padding: 0; }
.pains li {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px;
  padding: 0.7rem 1rem; font-size: 0.93rem; color: var(--ink-soft);
}
.pains li b { color: var(--heading); }

/* v13.1 — credentials line: the global 62ch p cap left-pinned it; center for real */
.logoband .foot { max-width: none; margin-inline: auto; text-align: center; }

/* ============================================================
   v14 — gap card v2: the findings ARE the gap's contents.
   Gap zone is static SVG (no animation dependency — it failed
   to render for some viewers when driven by JS classes).
   ============================================================ */
.gapcard .who { font-size: 0.84rem; color: var(--hero-soft); margin-top: 1.25rem; max-width: none; }
.gapcard .findings { margin-top: 0.85rem; }

/* ============================================================
   v15 — logo strip: shrink-wrap tiles to each mark's real width
   (kills the letterbox gaps around square logos) + full color
   (the files are color; grayscale was our filter — removed)
   ============================================================ */
.logoband .logos li,
.logoband .logos li:hover {
  width: auto; min-width: 0; min-height: 0; padding: 0 1.6rem;
  background: transparent; border: 0;
}
.logoband .logos li img {
  width: auto; max-width: none; object-fit: fill;   /* height set once, in v20 */
}
@media (max-width: 580px) {
  .logoband .logos li { padding: 0 1.1rem; }
}

/* v16 sizing folded into the v20 block below (single source of truth) */
.logoband { padding-block: 2.2rem 2.4rem; }
.logoband .logos li { padding: 0 1.8rem; }
@media (max-width: 580px) { .logoband .logos li { padding: 0 1.2rem; } }

/* ============================================================
   v17 — results cards rebuilt for skimming.
   Anatomy: sector + timeframe chip / big outcome / visual scale /
   one line of mechanism. Keeps the hover lift + gold rail.
   ============================================================ */
.evidence li { padding: 1.4rem 1.5rem 1.5rem; }
.ev-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.ev-top .tag { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.ev-top .chip {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap;
  color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 11%, transparent);
  padding: 0.22rem 0.55rem; border-radius: 100px;
}
.ev-metric {
  display: flex; align-items: baseline; gap: 0.4rem; margin-top: 0.9rem;
  font-family: var(--display); font-weight: 700; line-height: 1;
}
.ev-metric .from { font-size: 1.5rem; color: var(--ink-faint); }
.ev-metric .arrow { font-size: 1.2rem; color: var(--gold); }
.ev-metric .to { font-size: 2.9rem; color: var(--gold); }
.ev-metric .unit { font-family: var(--body); font-size: 0.86rem; font-weight: 700; color: var(--ink-faint); }
.ev-scale { display: block; width: 100%; max-width: 210px; height: auto; margin-top: 1rem; }
.evidence li p { font-size: 0.95rem; color: var(--ink-soft); margin-top: 1rem; max-width: none; }
.evidence li p b { color: var(--heading); }

/* ============================================================
   v18 — offer section = the Score Review only.
   Steps 2-3 moved off-page (sales-call material; still covered
   in the cost FAQ and on /how-we-work). Three visual beats.
   ============================================================ */
.callsteps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem;
  list-style: none; margin: 2.4rem 0 0; padding: 0; position: relative;
}
.callsteps::before {          /* connector rail behind the numbers */
  content: ""; position: absolute; top: 26px; left: 8%; right: 8%; height: 2px;
  background: var(--line); z-index: 0;
}
.callsteps li { position: relative; z-index: 1; text-align: center; }
.callsteps .num {
  display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 1.1rem;
  border-radius: 50%; background: var(--panel-2); border: 2px solid var(--accent);
  font-family: var(--display); font-weight: 700; font-size: 1.35rem; color: var(--accent);
}
.callsteps li:first-child .num { background: var(--accent); color: #FFFFFF; border-color: var(--accent); }
.callsteps h3 { font-size: 1.12rem; }
.callsteps .when { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 0.3rem; }
.callsteps p { font-size: 0.97rem; color: var(--ink-soft); margin: 0.7rem auto 0; max-width: 30ch; }
.callsteps p b { color: var(--heading); }
.offer-cta { text-align: center; margin-top: 2.4rem; }
.offer-cta .note { display: block; font-size: 0.88rem; color: var(--ink-faint); margin-top: 0.85rem; }
@media (max-width: 880px) {
  .callsteps { grid-template-columns: 1fr; gap: 1.9rem; }
  .callsteps::before { display: none; }
}

/* v19 — the logo strip never pauses. Hover-pause read as a freeze/bug.
   Reduced-motion users still get the static wrapped wall (see the
   prefers-reduced-motion block), which is the real accommodation here. */
.marquee:hover .marquee-track { animation-play-state: running; }

/* ============================================================
   v20 — logo strip is fully static: rotating only, no hover
   reaction of any kind. Root cause of the shrink: the v15 block
   listed `li:hover img` alongside a 52px height, and :hover adds
   specificity, so it outranked the later 68px rule. Both states
   are now sized by one declaration each.
   ============================================================ */
.logoband .logos li img,
.logoband .logos li:hover img { height: 68px; transform: none; }
.logoband .logos li img[src*="va."],
.logoband .logos li:hover img[src*="va."],
.logoband .logos li img[src*="porsche"],
.logoband .logos li:hover img[src*="porsche"],
.logoband .logos li img[src*="bofa"],
.logoband .logos li:hover img[src*="bofa"] { height: 80px; }
/* no border, background, or opacity shift on hover either */
.logoband .logos li,
.logoband .logos li:hover { background: transparent; border: 0; transform: none; }
.logoband .logos li img,
.logoband .logos li:hover img { filter: none; opacity: 1; transition: none; }
@media (max-width: 580px) {
  .logoband .logos li img,
  .logoband .logos li:hover img { height: 52px; }
  .logoband .logos li img[src*="va."],
  .logoband .logos li:hover img[src*="va."],
  .logoband .logos li img[src*="porsche"],
  .logoband .logos li:hover img[src*="porsche"],
  .logoband .logos li img[src*="bofa"],
  .logoband .logos li:hover img[src*="bofa"] { height: 62px; }
}

/* ============================================================
   v21 — client logos are FULL COLOR, always. A stale
   :root[data-theme="dark"] grayscale rule outranked the color
   rule whenever the viewer stamped a theme attribute, so logos
   read gray until hovered. One rule, both states, all themes.
   ============================================================ */
.logoband .logos li img,
.logoband .logos li:hover img,
:root[data-theme="dark"] .logoband .logos li img,
:root[data-theme="dark"] .logoband .logos li:hover img,
:root[data-theme="light"] .logoband .logos li img,
:root[data-theme="light"] .logoband .logos li:hover img {
  filter: none; opacity: 1;
}

/* ============================================================
   v22 — the problem section leads with a plain statement, not a
   quote that needed decoding. Client voice demoted to a footnote.
   ============================================================ */
.bigstate {
  font-family: var(--display); font-weight: 700; max-width: 30ch;
  font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.16; color: var(--heading);
}
.quiet-quote {
  margin-top: 1.6rem; font-size: 0.95rem; color: var(--ink-faint); max-width: 60ch;
}
.quiet-quote em { color: var(--ink-soft); font-style: normal; font-weight: 600; }

/* ============================================================
   v23 — the smoke/fire analogy now STRUCTURES the booking
   section instead of floating in the problem section.
   Also fixes: `.bigquote p` (display size) was outranking
   `.quiet-quote`, so the footnote rendered as a headline.
   ============================================================ */
.bigquote p.quiet-quote {
  font-family: var(--body); font-weight: 400;
  font-size: 0.95rem; line-height: 1.6; color: var(--ink-faint);
  max-width: 60ch; margin-top: 1.5rem;
}
.bigquote p.quiet-quote em { font-style: normal; font-weight: 600; color: var(--ink-soft); }
.callsteps .analogy {
  display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold-strong); margin-bottom: 0.35rem;
}

/* ============================================================
   v24 — the three call steps become interactive tiles.
   Number badge straddles the card's top edge; the connector rail
   runs behind the badges. Hover fills the number and lifts the
   card. No information is hidden at any point.
   ============================================================ */
.callsteps {
  grid-template-columns: repeat(3, 1fr); gap: 1.1rem;
  margin: 3.4rem 0 0; padding: 26px 0 0; position: relative;
}
.callsteps::before {            /* rail sits at the badge centre line */
  content: ""; position: absolute; top: 26px; left: 14%; right: 14%;
  height: 2px; background: var(--line); z-index: 0;
}
.callsteps li {
  position: relative; z-index: 1; text-align: center;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 2.6rem 1.4rem 1.6rem;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.callsteps li:hover {
  transform: translateY(-4px); border-color: var(--accent);
  box-shadow: 0 22px 42px -26px rgba(19, 29, 54, 0.5);
}
.callsteps .num {
  position: absolute; top: -26px; left: 50%; z-index: 2;
  transform: translateX(-50%); margin: 0;
  width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%;
  background: var(--panel-2); border: 2px solid var(--accent); color: var(--accent);
  font-family: var(--display); font-weight: 700; font-size: 1.35rem;
  transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
/* every number starts outlined; hover fills it (previously step 1 was hard-filled) */
.callsteps li:first-child .num { background: var(--panel-2); color: var(--accent); }
.callsteps li:hover .num,
.callsteps li:first-child:hover .num {
  background: var(--accent); color: #FFFFFF; border-color: var(--accent);
  transform: translateX(-50%) scale(1.07);
  box-shadow: 0 10px 22px -10px rgba(32, 106, 156, 0.7);
}
.callsteps li:hover .analogy { color: var(--gold); }
@media (max-width: 880px) {
  .callsteps { grid-template-columns: 1fr; gap: 2.6rem; margin-top: 3rem; }
  .callsteps::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .callsteps li, .callsteps .num { transition: none; }
  .callsteps li:hover { transform: none; }
  .callsteps li:hover .num { transform: translateX(-50%); }
}

/* ===== v25: "why we're different" table — mark the MJKDA column ===== */
table.comp thead th:last-child {
  position: relative;
  background: color-mix(in srgb, var(--gold) 22%, var(--navy-deep));
}
table.comp thead th:last-child::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--gold);
}
table.comp tbody td:last-child { font-weight: 600; }
#difference .voice-quote { margin-top: 2.6rem; }

/* ============================================================
   v3 — post 8/20 call: services grid cards link to service pages
   ============================================================ */
a.svc { text-decoration: none; color: inherit; }
.svc .more { margin-top: auto; padding-top: 1rem; font-size: 0.85rem; font-weight: 700; color: var(--accent); }
.svc .more::after { content: " \2192"; }

/* the booking questionnaire preview on /cx-review/ */

/* ============================================================
   v26 — playbook adoption (docs/playbook.md, 8/27)
   ============================================================ */

/* Part 13: tier the services. Eight identically weighted cards is the
   "all the cards look the same" failure; the flagship reads as the flagship.
   Featured card spans the full row; the other seven stay compact. */
.svc.featured {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: auto 1fr auto;
  grid-template-areas: "ico flag more" "ico head more" "ico desc more";
  align-content: center; column-gap: 1.5rem;
  border-color: var(--accent);
  box-shadow: 0 20px 44px -24px rgba(32, 106, 156, 0.45);
  padding: 1.8rem 1.7rem;
}
.svc.featured .ico { grid-area: ico; width: 56px; height: 56px; margin-bottom: 0; align-self: center; }
.svc.featured .svc-flag {
  grid-area: flag; justify-self: start;
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-strong); margin-bottom: 0.3rem;
}
.svc.featured h3, .svc.featured h2 { grid-area: head; font-size: 1.42rem; }
.svc.featured .desc { grid-area: desc; font-size: 1rem; max-width: 66ch; margin-top: 0.4rem; }
.svc.featured .more { grid-area: more; align-self: center; padding-top: 0; margin-top: 0; white-space: nowrap; }
@media (max-width: 720px) {
  .svc.featured { display: flex; flex-direction: column; align-items: flex-start; }
  .svc.featured .ico { margin-bottom: 1rem; }
  .svc.featured h3, .svc.featured h2 { padding-top: 0; }
  .svc.featured .more { margin-top: 1rem; }
}

/* Part 9 / WCAG 2.2.2: auto-moving content needs a way to stop. Restores the
   pause v19 removed; pause on hover AND keyboard focus, reasoning recorded in
   docs/design-decisions.md (compliance outranks the v19 aesthetic call). */
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }

/* Part 4 rule 4: adjacent same-background (plain white) sections collapse the
   doubled inter-section padding. Banded sections keep their breathing room. */
section:not(.approach):not(.band-dark):not(.trust):not(.hero):not(.page-hero)
  + section:not(.approach):not(.band-dark) { padding-top: 0; }

/* Part 4 rule 7 + Part 13: on phones the seven non-featured service cards
   compact to icon + name + arrow rows (blurbs hidden below the breakpoint;
   the full descriptions live on the service pages). Measured: the stacked
   cards were 2678px of a 12832px homepage. */
@media (max-width: 720px) {
  .svc:not(.featured) {
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: 0.9rem; padding: 0.95rem 1.15rem;
  }
  .svc:not(.featured) .ico { width: 38px; height: 38px; margin-bottom: 0; }
  .svc:not(.featured) .ico svg { width: 20px; height: 20px; }
  .svc:not(.featured) h3 { font-size: 1rem; }
  .svc:not(.featured) .desc { display: none; }
  .svc:not(.featured) .more { padding-top: 0; margin-top: 0; font-size: 0; }
  .svc:not(.featured) .more::after { font-size: 1.05rem; }
}

/* ============================================================
   v27 — light heroes (Skylar 8/27: the full-bleed navy gradient hero
   read as "SaaS"; Mike asked for white on 8/20). The dark surfaces that
   remain are deliberate narrow accents: header, testimonial band,
   final CTA band, footer, and the proof cards.
   ============================================================ */

/* homepage hero: white ground, navy display type, two-column grid so the
   right half carries proof instead of empty margin (Skylar's circle) */
.hero.hero--light {
  background: var(--bg);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.hero--light .hero-inner {
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(3rem, 6vw, 4.75rem);
}
/* the two-column layout comes from the existing .hero-grid (v3);
   cx-review's light hero stays single-column with the gap card below */
.hero--light h1 { color: var(--heading); }
.hero--light h1 .grad-gold {
  background: none; color: var(--gold-strong);
}
.hero--light .eyebrow { color: var(--accent); }
.hero--light .sub { color: var(--ink-soft); }
.hero--light .sub strong { color: var(--ink); }
.hero--light .reassure { color: var(--ink-faint); }
.hero--light .reassure b { color: var(--ink); }
.hero--light .btn-ghost, .page-hero .btn-ghost { color: var(--accent); border-color: var(--line-strong); }
.hero--light .btn-ghost:hover, .page-hero .btn-ghost:hover { border-color: var(--accent); }

/* solution beats: the scannable "how" that replaces the hero paragraph
   (playbook Part 5: checklist replaces prose; 30-seconds rule) */

/* the hero proof card: a dark card ON the light ground (same family as
   .sample), so the internal white-based styling keeps working */
.hero-proof {
  background: linear-gradient(168deg, var(--navy-deep), var(--navy-deeper));
  border: 1px solid var(--hero-line); border-radius: 10px;
  padding: 1.6rem 1.7rem 1.5rem; color: var(--hero-ink);
  box-shadow: 0 30px 60px -34px rgba(19, 29, 54, 0.55);
}
.hero-proof .tag {
  display: inline-block; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--navy-deeper); background: var(--gold-soft);
  padding: 0.2rem 0.55rem; border-radius: 3px;
}
.hero-proof h2 { color: #FFFFFF; font-size: 1.22rem; margin-top: 0.85rem; }
.hero-proof ol { list-style: none; margin: 1.2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1.05rem; }
.hero-proof li { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: baseline; }
.hero-proof .fig {
  font-family: var(--display); font-weight: 700; font-size: 1.45rem; line-height: 1;
  color: var(--gold-soft); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hero-proof .cap { font-size: 0.9rem; color: var(--hero-soft); }
.hero-proof .cap b { color: var(--hero-ink); }
.hero-proof .foot {
  margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--hero-line);
  font-size: 0.8rem; color: var(--hero-soft);
}
.hero-proof .foot a { color: var(--sky-light); }
@media (max-width: 960px) {
  .hero--light .hero-inner { grid-template-columns: 1fr; }
}

/* interior page heroes go light too: tinted ground, navy type */
.page-hero {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.page-hero h1 { color: var(--heading); }
.page-hero .sub { color: var(--ink-soft); }
.page-hero .sub strong { color: var(--ink); }
.page-hero .eyebrow { color: var(--accent); }

/* cx-review keeps its dark gap card as a card: solid navy ground so its
   white-based internals survive on the light hero */
.hero--light .gapcard {
  background: linear-gradient(168deg, var(--navy-deep), var(--navy-deeper));
  box-shadow: 0 30px 60px -34px rgba(19, 29, 54, 0.55);
}

/* ============================================================
   v28 — the 30-second sweep (Skylar, 8/27 evening #2):
   less air, less text, CTA above the fold, no gold-on-navy.
   ============================================================ */

/* sections lose ~35% vertical padding sitewide; the bigquote section's
   tightness is the reference ("trend towards that") */
section { padding-block: clamp(2.4rem, 5vw, 3.9rem); }
.section-head h2 { margin-top: 0.6rem; }
.section-head .lead { margin-top: 0.8rem; }

/* hero: smaller display size so the CTA lands above the fold on a laptop,
   top-aligned columns so the proof card doesn't float in whitespace */
.hero--light .hero-inner { padding-block: clamp(1.7rem, 3vw, 2.4rem) clamp(2.4rem, 5vw, 3.5rem); }
.hero--light h1 { font-size: clamp(2.05rem, 3.2vw, 2.8rem); max-width: 24ch; }
.hero--light .hero-inner.hero-grid { align-items: start; }
.hero--light .hero-proof { margin-top: 2.6rem; }
.hero--light .hero-cta { margin-top: 1.35rem; }
.hero--light .reassure { margin-top: 0.7rem; }

/* page heroes tighten to match */
.page-hero .wrap { padding-block: clamp(2.25rem, 4vw, 3.25rem); }
.page-hero h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }

/* the seven non-featured service cards are compact rows at EVERY width now:
   icon + name + arrow. The blurbs live on the service pages; the homepage
   only has to say the eight doors exist. (Was mobile-only; Skylar: the What
   we do section broke the 30-second rule on desktop too.) */
.svc:not(.featured) {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 0.9rem; padding: 0.95rem 1.15rem;
}
.svc:not(.featured) .ico { width: 38px; height: 38px; margin-bottom: 0; }
.svc:not(.featured) .ico svg { width: 20px; height: 20px; }
.svc:not(.featured) h3 { font-size: 1rem; }
.svc:not(.featured) .desc { display: none; }
.svc:not(.featured) .more { padding-top: 0; margin-top: 0; font-size: 0; }
.svc:not(.featured) .more::after { font-size: 1.05rem; }
.svc-grid { margin-top: 1.8rem; gap: 0.85rem; }

/* comparison table: the gold-mixed header on navy read as muddy (Skylar).
   MJKDA's column stays in the blue family: same navy header, sky rule. */
table.comp thead th:last-child { background: var(--navy-deep); }
table.comp thead th:last-child::after { background: var(--sky); }

/* ============================================================
   v29 — trust strip above the fold (Skylar 8/27): the logo marquee is
   visible without scrolling at 1280x700 and up. Playbook Part 7: logos
   immediately under the hero, no gap.
   ============================================================ */
.hero--light .hero-inner { padding-block: clamp(1.5rem, 2.6vw, 2.1rem) clamp(1.3rem, 2.4vw, 1.8rem); }
.hero--light h1 { font-size: clamp(2rem, 3vw, 2.65rem); }
.hero--light .reassure { margin-top: 0.55rem; }
.hero--light .hero-proof { margin-top: 1.6rem; }
.logoband { padding-block: 1rem 1.1rem; }
.logoband .k { margin-bottom: 0.55rem; }
.logoband .logos li img,
.logoband .logos li:hover img { height: 46px; }
.logoband .logos li img[src*="va."],
.logoband .logos li:hover img[src*="va."],
.logoband .logos li img[src*="porsche"],
.logoband .logos li:hover img[src*="porsche"],
.logoband .logos li img[src*="bofa"],
.logoband .logos li:hover img[src*="bofa"] { height: 56px; }
.logoband .foot { margin-top: 0.7rem; }
@media (max-width: 580px) {
  .logoband .logos li img,
  .logoband .logos li:hover img { height: 38px; }
  .logoband .logos li img[src*="va."],
  .logoband .logos li:hover img[src*="va."],
  .logoband .logos li img[src*="porsche"],
  .logoband .logos li:hover img[src*="porsche"],
  .logoband .logos li img[src*="bofa"],
  .logoband .logos li:hover img[src*="bofa"] { height: 46px; }
}

/* v29.1 - the hero was double-padded: the global section padding stacked on
   hero-inner's own. Zero the section layer; hero-inner owns its spacing. */
.hero.hero--light { padding-block: 0; }
.hero--light .hero-inner { padding-block: 1.25rem 1rem; }
.hero--light h1 { font-size: clamp(1.95rem, 2.8vw, 2.5rem); margin-top: 0.6rem; }
.hero--light .hero-cta { margin-top: 1rem; }
.hero--light .reassure { margin-top: 0.4rem; }
.hero--light .hero-proof { margin-top: 1.2rem; padding: 1.35rem 1.5rem 1.25rem; }
.logoband { padding-block: 0.8rem 0.9rem; }
.logoband .k { margin-bottom: 0.45rem; }
.logoband .logos li img,
.logoband .logos li:hover img { height: 42px; }
.logoband .logos li img[src*="va."],
.logoband .logos li:hover img[src*="va."],
.logoband .logos li img[src*="porsche"],
.logoband .logos li:hover img[src*="porsche"],
.logoband .logos li img[src*="bofa"],
.logoband .logos li:hover img[src*="bofa"] { height: 50px; }

/* ============================================================
   v30: /insights/ (blog) — hub cards + article layout (9/17).
   Modeled on the North Track Digital article system, retokened to this
   site's variables. One stylesheet rule holds: no separate article.css.
   Articles are exempt from the density targets (playbook Part 4).
   ============================================================ */

/* --- hub + related cards --- */
.post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; margin-top: 0.5rem; }
.post-card {
  border: 1px solid var(--line); border-radius: 8px; padding: 1.6rem 1.7rem 1.5rem;
  background: var(--panel); display: flex; flex-direction: column; gap: 0.55rem;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.post-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 14px 30px -22px rgba(26, 39, 69, 0.5); }
.post-card .eyebrow { font-size: 0.7rem; }
.post-card h2, .post-card h3 { font-size: 1.22rem; line-height: 1.3; margin: 0; }
.post-card h2 a, .post-card h3 a { color: var(--heading); text-decoration: none; }
.post-card h2 a:hover, .post-card h3 a:hover { color: var(--accent); text-decoration: underline; }
.post-card .excerpt { color: var(--ink-soft); font-size: 0.96rem; margin: 0; }
.post-card .meta { color: var(--ink-faint); font-size: 0.82rem; font-weight: 600; margin: auto 0 0; padding-top: 0.4rem; }
@media (max-width: 720px) { .post-grid { grid-template-columns: 1fr; } }

/* --- article header (light title block) --- */
.article-head { padding-block: clamp(1.8rem, 4vw, 3rem) 1.2rem; }
.article-head .wrap { max-width: 56rem; }
.article-crumb { font-size: 0.82rem; color: var(--ink-faint); margin-bottom: 1.1rem; }
.article-crumb a { color: var(--ink-soft); text-decoration: none; }
.article-crumb a:hover { color: var(--accent); text-decoration: underline; }
.article-crumb span[aria-hidden] { margin: 0 0.35rem; }
.article-head h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.12; margin-top: 0.7rem; max-width: 24ch; color: var(--heading); }
.article-head h1 .grad-gold { color: var(--gold-strong, #8A6A1B); }
.article-head .byline {
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; align-items: center;
  margin-top: 1.1rem; color: var(--ink-soft); font-size: 0.92rem; max-width: none;
}
.article-head .byline .by-name { color: var(--heading); font-weight: 700; text-decoration: none; }
.article-head .byline .by-name:hover { text-decoration: underline; }
.article-head .byline .dot { opacity: 0.45; }

/* --- "Read with AI" pills --- */
.ai-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 1.2rem; }
.ai-row .ai-label { font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); margin-right: 0.15rem; }
.ai-btn {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.85rem;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--panel);
  color: var(--heading); font-size: 0.84rem; font-weight: 600; text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ai-btn:hover { border-color: var(--accent); box-shadow: 0 1px 6px rgba(26, 39, 69, 0.12); }
.ai-btn .ai-ico { width: 16px; height: 16px; flex: none; }

/* --- feature block: navy key-stat card instead of a stock photo --- */
.article-feature { padding-block: 0.6rem 0.4rem; }
.article-feature .wrap { max-width: 56rem; }
.keystat {
  background: linear-gradient(160deg, var(--navy-deep), var(--navy-deeper));
  color: var(--hero-ink); border-radius: 10px; padding: 1.7rem 1.9rem 1.6rem;
  border: 1px solid var(--hero-line);
}
.keystat .k { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sky-light); margin: 0; }
.keystat .stat { font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1; margin: 0.6rem 0 0; color: #FFFFFF; }
.keystat .stat b { color: var(--gold, #D4A93A); font-weight: 700; }
.keystat .label { font-size: 1.05rem; color: var(--hero-ink); margin: 0.7rem 0 0; max-width: 46ch; }
.keystat .label b { color: #FFFFFF; }
.keystat .note { font-size: 0.86rem; color: var(--hero-soft); margin: 0.9rem 0 0; max-width: 60ch; }

/* --- two-column body + sticky rail --- */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: clamp(2rem, 5vw, 4rem); align-items: start; padding-block: 1.6rem 0.5rem; }
.article-content { min-width: 0; }
.article-content > section { padding: 0 0 2.2rem; }
.article-content > section:last-child { padding-bottom: 1rem; }
.article-content h2 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); line-height: 1.22; margin: 0 0 0.9rem; color: var(--heading); scroll-margin-top: 96px; }
.article-content h3 { font-size: 1.15rem; margin: 1.4rem 0 0.5rem; color: var(--heading); }
.article-content p { margin: 0 0 1.05rem; font-size: 1.04rem; line-height: 1.65; }
.article-content p.lead { font-size: 1.22rem; line-height: 1.55; color: var(--heading); margin-bottom: 1.4rem; }
.article-content ul, .article-content ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.article-content li { margin: 0 0 0.5rem; line-height: 1.6; }
.article-content li b { color: var(--heading); }
.article-content a { color: var(--accent); }
.article-content .comp-table-wrap { margin: 1.4rem 0 1.6rem; }
.article-content table { width: 100%; border-collapse: collapse; font-size: 0.96rem; min-width: 480px; }
.article-content caption { text-align: left; font-weight: 700; color: var(--heading); padding: 0.8rem 1rem 0.5rem; }
.article-content th, .article-content td { text-align: left; padding: 0.7rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.article-content th { background: var(--panel-2); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.article-content tr:last-child td { border-bottom: none; }
.article-content .callout {
  border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent);
  padding: 1rem 1.2rem; border-radius: 0 8px 8px 0; margin: 1.3rem 0 1.5rem;
}
.article-content .callout p:last-child { margin-bottom: 0; }
.article-content .callout .callout-label { font-weight: 800; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.3rem; }
.article-content blockquote { margin: 1.3rem 0 1.5rem; padding: 0.2rem 0 0.2rem 1.2rem; border-left: 3px solid var(--sky); color: var(--heading); font-family: var(--display); font-size: 1.2rem; line-height: 1.45; }
.article-content blockquote cite { display: block; margin-top: 0.5rem; font-family: var(--body); font-style: normal; font-size: 0.86rem; color: var(--ink-faint); }
.article-content .faq h2 { margin-bottom: 0.2rem; }
.article-content .faq .faq-list { margin-top: 1rem; }
.article-rail { position: sticky; top: 96px; }
.onthispage .otp-label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 0.6rem; }
.onthispage ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.onthispage li a {
  display: block; padding: 0.4rem 0 0.4rem 0.9rem; margin-left: -2px; border-left: 2px solid transparent;
  color: var(--ink-soft); text-decoration: none; font-size: 0.88rem; line-height: 1.35;
}
.onthispage li a:hover { color: var(--heading); }
.onthispage li a.active { color: var(--accent); border-left-color: var(--accent); font-weight: 700; }
@media (max-width: 960px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-rail { display: none; }
  .article-content table { min-width: 0; }
}

/* --- end of article: CTA, author, related --- */
.article-end { padding-block: 1rem; }
.article-end + .article-end { padding-top: 0.6rem; }
.author-card {
  display: flex; gap: 1.3rem; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 8px; padding: 1.4rem 1.6rem; background: var(--panel);
}
.author-card img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: none; }
.author-card > div { flex: 1; min-width: 240px; }
.author-card .eyebrow { margin: 0; font-size: 0.68rem; }
.author-card .a-name { font-family: var(--display); font-size: 1.15rem; font-weight: 700; margin: 0.25rem 0 0; }
.author-card .a-name a { color: var(--heading); text-decoration: none; }
.author-card .a-name a:hover { text-decoration: underline; }
.author-card .a-bio { color: var(--ink-soft); font-size: 0.95rem; margin: 0.4rem 0 0; max-width: 64ch; }
.related h2 { font-size: 1.4rem; margin-bottom: 1rem; }
.related .rel-empty { color: var(--ink-faint); font-size: 0.95rem; }
.related-wrap { padding-bottom: clamp(2rem, 5vw, 3.5rem); }

/* --- CRO pass 9/17: people + trust beside the booking embed; hero reassure on
   interior pages; phone line in the inline CTA; qualifier line in the cx-review hero --- */
.page-hero .reassure { font-size: 0.86rem; color: var(--ink-faint); margin-top: 0.75rem; }
.hero--light .reassure.fit { color: var(--ink-soft); max-width: 60ch; margin-top: 0.55rem; }
.cta-inline p.b.phone { margin-top: 0.9rem; font-size: 0.9rem; }
.cta-inline p.b.phone a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 2px; }

/* --- 9/17: real headshots. Bio page hero shows the partner's photo beside the
   title; the same files feed .prin .shot and .author-card. --- */
.bio-hero { display: flex; align-items: center; gap: clamp(1.4rem, 3vw, 2.4rem); }
.bio-hero .bio-shot { flex: none; width: clamp(112px, 14vw, 160px); height: auto; aspect-ratio: 1; border-radius: 12px; object-fit: cover; box-shadow: 0 18px 40px -24px rgba(19, 29, 54, 0.45); }
.bio-hero h1 { margin-top: 0.5rem; }
@media (max-width: 580px) {
  .bio-hero { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  .bio-hero .bio-shot { width: 96px; }
}

/* --- 9/17 QA sweep: the home comparison table hid its MJKDA column behind a
   horizontal scroll at phone widths (row headers were nowrap). Let them wrap
   and tighten the cells so all three columns fit at 375. --- */
@media (max-width: 580px) {
  table.comp { font-size: 0.86rem; }
  table.comp tbody th { white-space: normal; padding: 0.7rem 0.6rem; font-size: 0.82rem; }
  table.comp td { padding: 0.7rem 0.6rem; }
  table.comp th:first-child { width: 28%; }
  table.comp thead th { padding: 0.7rem 0.6rem; font-size: 0.8rem; }
}

/* ============================================================
   v30 — surface pass informed by the HPS build (Skylar, 9/17 late).
   Navy becomes punctuation instead of the frame: white header, light
   testimonial band, cards defined by soft navy-tinted shadow on 12px
   corners, one proof strip under the logos, the partners in the first
   screen, and an occupant for the empty right column of interior heroes.
   Reasoning: docs/design-decisions.md, "Surface pass (9/17)".
   ============================================================ */

/* --- tokens: lighter hairlines, one shadow scale --- */
:root, :root[data-theme="light"] {
  --line: rgba(36, 52, 94, 0.11);
  --line-strong: rgba(36, 52, 94, 0.24);
  --shadow-soft: 0 2px 4px rgba(36, 52, 94, 0.04), 0 8px 22px rgba(36, 52, 94, 0.09);
  --shadow-lift: 0 6px 12px rgba(36, 52, 94, 0.07), 0 22px 48px rgba(36, 52, 94, 0.14);
}

/* --- D1: light header. The utility bar goes pale, the bar goes white. --- */
.util { background: var(--panel); color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.util a { color: var(--navy); text-decoration-color: var(--line-strong); }
.util a:hover { color: var(--accent); }
header.bar {
  background: #FFFFFF;
  background: color-mix(in srgb, #FFFFFF 94%, transparent);
  border-bottom: 1px solid var(--line);
}
header.bar.stuck { box-shadow: 0 10px 30px -20px rgba(36, 52, 94, 0.45); }
.brand .mark { color: var(--navy); }
.brand .mark .grad {
  background: linear-gradient(100deg, var(--blue) 10%, var(--sky) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand .tag { color: var(--ink-faint); }
nav.links a { color: var(--ink-soft); }
nav.links a:hover, nav.links a[aria-current="page"] { color: var(--navy); }
nav.links a::after { background: linear-gradient(90deg, var(--blue), var(--sky)); }
.mobnav summary { color: var(--navy); border-color: var(--line-strong); }
.mobnav .panel { background: #FFFFFF; border-color: var(--line); box-shadow: 0 18px 40px -18px rgba(36, 52, 94, 0.35); }
.mobnav .panel a { color: var(--ink); }
.mobnav .panel a:hover { color: var(--navy); background: var(--panel); }

/* --- D2: testimonials on a light ground; the podium proof card keeps its navy --- */
.band-dark { background: var(--panel); border-block: 1px solid var(--line); }
.band-dark h2, .band-dark h3 { color: var(--heading); }
.band-dark .eyebrow { color: var(--accent); }
.band-dark .lead, .band-dark .note { color: var(--ink-soft); }
.band-dark .note a { color: var(--accent); }
.band-dark .quote-pair figure { background: var(--panel-2); border-color: var(--line); }
.band-dark .quote-pair figure p { color: var(--ink); }
.band-dark .quote-pair figure figcaption { color: var(--ink-faint); }
.band-dark .quote-mark { color: var(--sky); opacity: 0.5; }

/* --- D4: softer surfaces. 12px corners, shadow plus a faint hairline. --- */
.btn { border-radius: 6px; }
.svc, .rung-card, .prin, .j-card, .stair > li, .moves li, .quote-pair figure, .faq-list details,
.comp-table-wrap, .gapcard, .hero-proof, .booking, .mobnav .panel { border-radius: 12px; }
.svc, .rung-card, .prin, .j-card, .stair > li, .moves li, .quote-pair figure, .faq-list details, .comp-table-wrap {
  box-shadow: var(--shadow-soft);
}
.svc:hover { box-shadow: var(--shadow-lift); }

/* --- D3: proof strip under the logos (facts already on the site) --- */
.proofstrip { background: var(--panel); border-bottom: 1px solid var(--line); padding-block: 1.15rem 1.25rem; }
.proofstrip dl { display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between; gap: 1rem 2.5rem; margin: 0; }
.proofstrip dt { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; }
.proofstrip dd { margin: 0.3rem 0 0; font-weight: 700; color: var(--navy); font-size: 1.02rem; line-height: 1.3; }
@media (max-width: 900px) { .proofstrip dl { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 580px) { .proofstrip dl { grid-template-columns: 1fr 1fr; gap: 0.9rem 1.2rem; } }

/* --- D6: the partners in the first screen (the people are the product) --- */
.faces { display: inline-flex; align-items: center; vertical-align: middle; }
.faces img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid #FFFFFF; box-shadow: 0 1px 3px rgba(36, 52, 94, 0.25); }
.faces img + img { margin-left: -9px; }
.reassure.people { display: flex; align-items: center; gap: 0.6rem; flex-wrap: nowrap; }
.reassure.people .faces { flex: none; }
.reassure.people > span:last-child { min-width: 0; }

/* --- D5: interior heroes get a right-column occupant --- */
.page-hero .wrap.hero-split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero-side {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.5rem 1.6rem 1.45rem; box-shadow: var(--shadow-soft); max-width: 26rem; justify-self: end;
}
.hero-side .faces img { width: 56px; height: 56px; border-width: 3px; }
.hero-side .faces img + img { margin-left: -14px; }
.hero-side .k { margin-top: 1rem; }
.hero-side .t { color: var(--ink-soft); font-size: 0.97rem; margin-top: 0.5rem; }
.hero-side .btn { margin-top: 1.1rem; }
.hero-side .reassure { margin-top: 0.7rem; }
@media (max-width: 960px) {
  .page-hero .wrap.hero-split { grid-template-columns: 1fr; gap: 1.6rem; }
  .hero-side { justify-self: start; max-width: 32rem; }
}

/* The marquee images now carry intrinsic width/height so the band reserves
   its space before they load (CLS). CSS still sets the display height, so the
   width must be auto or the attribute width would stretch them. */
.logoband .logos li img, .logoband .logos li:hover img { width: auto; }

/* --- 9/17 evening review fixes --- */
/* Proof-card captions share one left edge: the figure column was auto-sized per row */
.hero-proof li { grid-template-columns: 6.6rem 1fr; }
/* Nothing inside the (now pale) testimonial band may inherit the old navy-band palette */
.band-dark p { color: var(--ink-soft); }
.band-dark b { color: var(--ink); }
/* The written testimonial reads as a display quote, not body copy */
.band-dark .quote-pair figure blockquote p {
  font-family: var(--display); font-weight: 500; font-size: 1.2rem; line-height: 1.5; color: var(--heading);
}
.band-dark .quote-pair figure figcaption { font-weight: 700; color: var(--ink-soft); }

/* ============================================================
   v31 — Daniel and Skylar's walk-through (9/18): social proof in one
   section with a static logo grid, comparison as two marked columns,
   phone and email beside every primary action, LinkedIn, services hub
   as boxes-left card-right. Reasoning: docs/design-decisions.md.
   ============================================================ */
.logogrid-k { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); text-align: center; margin: 2.2rem 0 0; }
.logogrid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.1rem 2rem; align-items: center; justify-items: center;
  list-style: none; margin: 1rem 0 0; padding: 1.4rem 1.8rem; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-soft);
}
.logogrid li { display: flex; align-items: center; justify-content: center; height: 72px; width: 100%; }
.logogrid img { max-height: 62px; width: auto; max-width: 100%; height: auto; object-fit: contain; }
.logogrid img[src*="va."], .logogrid img[src*="porsche"], .logogrid img[src*="bofa"], .logogrid img[src*="mercedes"] { max-height: 74px; }
.logogrid-cap { text-align: center; font-size: 0.88rem; color: var(--ink-faint); margin-top: 0.9rem; }
.logogrid-cap b { color: var(--ink); }
.logostrip { padding-block: 1.4rem 1.8rem; border-bottom: 1px solid var(--line); }
.logostrip .logogrid-k { margin-top: 0; }
@media (max-width: 900px) { .logogrid { grid-template-columns: repeat(3, 1fr); gap: 1rem 1.4rem; } }
@media (max-width: 580px) { .logogrid { grid-template-columns: 1fr 1fr; gap: 0.8rem 1rem; padding: 1rem; } .logogrid li { height: 58px; } .logogrid img { max-height: 48px; } .logogrid img[src*="va."], .logogrid img[src*="porsche"], .logogrid img[src*="bofa"], .logogrid img[src*="mercedes"] { max-height: 56px; } }

.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 2rem; }
.vs .col { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 1.3rem 1.5rem; box-shadow: var(--shadow-soft); }
.vs .col.us { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, #FFFFFF); }
.vs h3 { font-family: var(--body); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 0.5rem; }
.vs .col.us h3 { color: var(--accent); }
.vs ul { list-style: none; margin: 0; padding: 0; }
.vs li { display: grid; grid-template-columns: 26px 1fr; gap: 0.8rem; align-items: start; padding: 0.75rem 0; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.98rem; line-height: 1.45; }
.vs li:first-child { border-top: 0; }
.vs .col.us li { color: var(--ink); font-weight: 600; }
.vs .mark { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; margin-top: 0.05rem; }
.vs .col.them .mark { background: color-mix(in srgb, var(--flag-red) 12%, transparent); color: var(--flag-red); }
.vs .col.us .mark { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.vs .mark svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) { .vs { grid-template-columns: 1fr; } }

.hero-contact { margin-top: 0.75rem; font-size: 0.93rem; color: var(--ink-soft); }
.hero-contact a { color: var(--navy); font-weight: 700; text-decoration: none; white-space: nowrap; }
.hero-contact a:hover { text-decoration: underline; }
.hero-side .hero-contact { margin-top: 0.8rem; font-size: 0.88rem; }

.li-link { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--accent); text-decoration: none; font-size: 0.82rem; font-weight: 700; }
.li-link svg { width: 15px; height: 15px; fill: currentColor; }
.li-link:hover { text-decoration: underline; }
.prin h3 .li-link { margin-left: 0.5rem; vertical-align: middle; }
.bio-hero .li-link { margin-top: 0.9rem; font-size: 0.92rem; }
footer.site .li-link { color: var(--hero-soft); font-weight: 600; display: inline-flex; padding: 0.18rem 0; font-size: inherit; }
footer.site .li-link:hover { color: #FFFFFF; }

.svc-hub { display: grid; grid-template-columns: 1fr minmax(18rem, 21rem); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; padding-block: clamp(2.2rem, 4vw, 3.2rem) 0; }
.svc-hub h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); margin-top: 0.9rem; max-width: 20ch; }
.svc-hub .sub { color: var(--ink-soft); font-size: 1.12rem; margin-top: 1.1rem; max-width: 54ch; }
.svc-hub .sub strong { color: var(--ink); }
.svc-hub .svc-grid { grid-template-columns: repeat(2, 1fr); margin-top: 1.8rem; }
.svc-hub .hero-side { position: sticky; top: 92px; justify-self: end; }
@media (max-width: 1024px) { .svc-hub { grid-template-columns: 1fr; } .svc-hub .hero-side { position: static; justify-self: start; max-width: 32rem; } }
@media (max-width: 580px) { .svc-hub .svc-grid { grid-template-columns: 1fr; } }

/* --- 9/18 follow-ups --- */
/* Logo files are trimmed to their artwork (tools/trim_logos.py); wordmarks size by width, marks by height */
.logogrid img { max-height: 70px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.logogrid img.wide { width: min(100%, 185px); height: auto; max-height: 48px; }
.logogrid img[src*="va."], .logogrid img[src*="porsche"], .logogrid img[src*="bofa"], .logogrid img[src*="mercedes"] { max-height: 70px; }
.logogrid img.wide[src*="bofa"] { max-height: 48px; }
@media (max-width: 580px) { .logogrid img { max-height: 52px; } .logogrid img.wide { max-height: 40px; } .logogrid img[src*="va."], .logogrid img[src*="porsche"], .logogrid img[src*="bofa"], .logogrid img[src*="mercedes"] { max-height: 52px; } }

/* Phone and email beside the header button from 1100px; the utility bar steps aside there so the phone is not printed twice */
.bar-actions { display: flex; align-items: center; gap: 1.1rem; }
.bar-contact { display: none; }
@media (min-width: 1100px) {
  .util { display: none; }
  .bar-contact { display: flex; flex-direction: column; align-items: flex-end; }
  .bar-contact a { text-decoration: none; white-space: nowrap; display: block; min-height: 24px; line-height: 24px; } /* WCAG 2.5.8 target size */
  .bar-contact a:first-child { color: var(--navy); font-weight: 700; font-size: 0.92rem; }
  .bar-contact a:last-child { color: var(--ink-soft); font-size: 0.8rem; }
  .bar-contact a:hover { text-decoration: underline; }
}

/* Services hub: heading full width, then boxes left and the booking card plus FAQ right */
.svc-head .sub { color: var(--ink-soft); font-size: 1.12rem; margin-top: 1.1rem; max-width: 54ch; }
.svc-head .sub strong { color: var(--ink); }
.svc-head h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); margin-top: 0.9rem; max-width: 20ch; }
.svc-hub { grid-template-columns: 1fr minmax(19rem, 24rem); padding-block: 1.6rem 0; }
.svc-side .hero-side { position: static; max-width: none; justify-self: stretch; }
.svc-side .faq-list { margin-top: 1.2rem; max-width: none; gap: 0.6rem; }
.svc-side .faq-list summary { font-size: 0.95rem; }
@media (max-width: 1024px) { .svc-hub { grid-template-columns: 1fr; } .svc-side .hero-side { max-width: 32rem; justify-self: start; } }

/* ============================================================
   v32 — industries (9/18): row under the homepage hero, hub cards,
   industry hero photos, About and How we work figures. Photos are
   self-hosted Unsplash files (credits in assets/img/README.md), all
   given the same desaturate + navy-tint treatment so they read as one set.
   ============================================================ */

.hero-photo { margin: 0; position: relative; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-soft); aspect-ratio: 4 / 3; align-self: center; }
.hero-photo img, .ind-card img, .story-figure img, .band-figure img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.72) contrast(1.04); }
.hero-photo::after, .ind-card .shade::after, .story-figure::after, .band-figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(36, 52, 94, 0.28), rgba(36, 52, 94, 0.05)); pointer-events: none; }
.page-hero .hero-split .hero-photo { justify-self: stretch; max-width: none; }
@media (max-width: 960px) { .hero-photo { aspect-ratio: 3 / 2; } }

.ind-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; margin-top: 1.8rem; }
.ind-card { display: flex; flex-direction: column; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-soft); text-decoration: none; color: inherit; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.ind-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-lift); }
.ind-card img { aspect-ratio: 3 / 2; }
.ind-card .ind-body { padding: 1rem 1.15rem 1.15rem; }
.ind-card h2 { font-size: 1.15rem; margin: 0; color: var(--heading); }
.ind-card p { color: var(--ink-soft); font-size: 0.93rem; margin-top: 0.4rem; }
.ind-card .more { display: inline-block; margin-top: 0.7rem; font-size: 0.86rem; font-weight: 700; color: var(--accent); }
.ind-card .more.muted { color: var(--ink-faint); }
@media (max-width: 580px) { .ind-grid { grid-template-columns: 1fr; } }

.story-split { display: grid; grid-template-columns: minmax(0, 66ch) 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.story-figure { margin: 0; position: relative; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-soft); aspect-ratio: 3 / 2; align-self: center; }
.band-figure { margin: 1.8rem 0 0; position: relative; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-soft); aspect-ratio: 3 / 2; max-width: 34rem; }
.band-split { display: grid; grid-template-columns: minmax(0, 62ch) 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.band-split .band-figure { margin: 0; max-width: none; }
@media (max-width: 960px) { .story-split, .band-split { grid-template-columns: 1fr; } .story-figure { max-width: 34rem; } }

/* ============================================================
   v33 — desktop blank-space pass (9/18): heading-left/list-right walk
   sections, two-column hub heads, horizontal industries hub, centred
   mid-page CTA, row CTA on the outreach page
   ============================================================ */
.split-walk .split-body .walk { max-width: none; margin-top: 1.6rem; }
@media (min-width: 960px) {
  .split-walk { display: grid; grid-template-columns: minmax(0, 24rem) 1fr; gap: 1rem clamp(2.4rem, 5vw, 4.5rem); align-items: start; }
  .split-walk .section-head { position: sticky; top: 104px; max-width: none; }
  .split-walk .split-body .walk { margin-top: 0.35rem; }
  .split-walk .split-body > .lead { max-width: none !important; }
}
.ind-grid.is-wide { margin-top: 2rem; }
@media (min-width: 961px) {
  .ind-grid.is-wide { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem; }
  .ind-grid.is-wide .ind-card { flex: 0 0 calc((100% - 3 * 1.1rem) / 4); }
}
.hero-side.hero-side-wide { max-width: none; justify-self: stretch; }
.hero-side-wide .t { font-size: 1.05rem; max-width: 52ch; }
.hero-side-wide .hs-act .btn { margin-top: 1.2rem; }
@media (min-width: 760px) {
  .hero-side-wide { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(19rem, 1fr); gap: 1.5rem clamp(2rem, 5vw, 4rem); align-items: center; padding: 1.9rem 2.1rem; }
  .hero-side-wide .hs-act .btn { margin-top: 0; }
}
.offer-cta { max-width: none; }
.cta-inline.is-row .btn { margin-top: 1.15rem; }
@media (min-width: 760px) {
  .cta-inline.is-row { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
  .cta-inline.is-row .btn { margin-top: 0; }
}

/* ============================================================
   v34 — second look (9/18): hub head one column across, blog cards with
   photos (featured first card), article lead image
   ============================================================ */
.svc-head h1 { max-width: none; }
.svc-head .sub { max-width: none; }
.post-grid { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.post-card { padding: 0; gap: 0; overflow: hidden; border-radius: 12px; box-shadow: var(--shadow-soft); }
.post-card .post-img { display: block; position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--panel-2); }
.post-card .post-img img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.72) contrast(1.04); transition: transform 0.35s ease; }
.post-card .post-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(36, 52, 94, 0.28), rgba(36, 52, 94, 0.05)); pointer-events: none; }
.post-card:hover .post-img img { transform: scale(1.03); }
.post-card .post-body { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.3rem 1.5rem 1.4rem; flex: 1; }
.post-card.is-feature { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .post-card.is-feature { display: grid; grid-template-columns: minmax(0, 46%) 1fr; }
  .post-card.is-feature .post-img { aspect-ratio: auto; height: 100%; min-height: 320px; }
  .post-card.is-feature .post-body { padding: 2.2rem 2.4rem; justify-content: center; }
  .post-card.is-feature h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
  .post-card.is-feature .excerpt { font-size: 1.05rem; }
}
@media (max-width: 960px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .post-grid { grid-template-columns: 1fr; } }
.article-lead { margin: 0 0 1.8rem; position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 2.4 / 1; box-shadow: var(--shadow-soft); }
.article-lead img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.72) contrast(1.04); }
.article-lead::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(36, 52, 94, 0.28), rgba(36, 52, 94, 0.05)); pointer-events: none; }
@media (max-width: 720px) { .article-lead { aspect-ratio: 3 / 2; } }
/* review fixes 9/18: the global accent focus ring measures under 3:1 on the navy footer
   (WCAG 1.4.11); breadcrumb links relied on colour alone (link-in-text-block) */
footer.site :focus-visible, .band-dark :focus-visible { outline-color: var(--sky-light); }
.article-crumb a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line-strong); }
.article-crumb a:hover { text-decoration-color: currentColor; }

/* ============================================================
   v35 — Daniel's recorded edits (9/18): photo tiles for the industries row,
   SBA badge beside the caption, whole team card clickable with icon-only
   LinkedIn, wordmark in the comparison, centred closing callout
   ============================================================ */

.logogrid-cap { display: flex; align-items: center; justify-content: center; gap: 0.9rem; }
.logogrid-cap p { margin: 0; }
.sba-badge { width: auto; height: 60px; flex: none; }

.prin { position: relative; }
.prin .prin-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.prin .li-link { position: relative; z-index: 1; }
.prin .li-icon { display: inline-flex; margin-top: 0.4rem; padding: 0.3rem; margin-left: -0.3rem; }  /* 17px glyph + padding = 26px target (WCAG 2.5.8) */
.prin .li-icon svg { width: 17px; height: 17px; }
.prin:hover h3 { color: var(--accent); }

.vs h3 { min-height: 1.7rem; display: flex; align-items: center; }
.vs h3 .brandmark { font-family: var(--display); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.04em; text-transform: none; color: var(--navy); }
.vs h3 .brandmark .grad { background: linear-gradient(100deg, var(--blue) 10%, var(--sky) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }

.cta-close { background: var(--panel); border-top: 1px solid var(--line); }
.cta-close .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.9rem; }  /* the section carries the standard padding; no second layer */
.cta-close .eyebrow { margin: 0; }
.cta-close h2 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); max-width: 26ch; }
.cta-close .btn { margin-top: 0.3rem; }
.cta-close .hero-contact { margin-top: 0.1rem; }

/* ============================================================
   v36 — Skylar's five (9/21): pills back for the industries row, credentials
   as their own section, MJKDA column leads the comparison, testimonials scroll
   sideways with all three old-site quotes
   ============================================================ */
.indrow { border-bottom: 1px solid var(--line); background: var(--bg); }
.indrow .wrap { display: flex; align-items: center; gap: 1rem 1.4rem; flex-wrap: wrap; padding-block: 0.95rem; }
.indrow .k { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.indrow ul { display: flex; flex-wrap: wrap; gap: 0.5rem 0.55rem; list-style: none; margin: 0; padding: 0; }
.indrow a { display: inline-block; padding: 0.38rem 0.8rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 0.86rem; font-weight: 600; color: var(--navy); text-decoration: none; background: var(--panel-2); transition: border-color 0.2s ease, background 0.2s ease; }
.indrow a:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, #FFFFFF); }
@media (max-width: 580px) { .indrow .wrap { padding-block: 0.8rem; } .indrow a { font-size: 0.8rem; padding: 0.32rem 0.7rem; } }

.trust .wrap { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; text-align: center; }
.trust .logogrid-cap { margin-top: 0; }
.trust .trust-cta { margin: 0; }

.vs .col.them { background: transparent; border: 1px dashed var(--line-strong); box-shadow: none; }
.vs .col.them li { color: var(--ink-faint); font-size: 0.95rem; }
.vs .col.them .mark { background: color-mix(in srgb, var(--flag-red) 8%, transparent); color: color-mix(in srgb, var(--flag-red) 70%, #FFFFFF); }
.vs .col.us { background: #FFFFFF; border: 2px solid var(--accent); box-shadow: var(--shadow-lift); padding: 1.5rem 1.7rem; }
.vs .col.us li { font-size: 1.02rem; }
@media (min-width: 761px) { .vs .col.us { transform: translateY(-10px); } .vs { align-items: start; } }

/* v37 — Skylar's three (9/21): credentials section larger and separate; podium card out of the testimonial track */
.trust { border-bottom: 1px solid var(--line); }
.trust .wrap { gap: 1.7rem; }
.trust .logogrid-cap { font-size: 1.15rem; gap: 1.2rem; }
.trust .sba-badge { height: 96px; }
.btn.btn-lg { font-size: 1.05rem; padding: 0.95rem 1.9rem; }
@media (max-width: 580px) { .trust .logogrid-cap { flex-direction: column; gap: 0.8rem; } .trust .sba-badge { height: 84px; } }
/* ============================================================
   v39 — minimal booking-page copy (9/22): one headline, one paragraph, the
   CTA and its microcopy; the right panel is a heading and three bullets
   ============================================================ */
.hero--session .hero-cta { margin-top: 1.5rem; }
.hero--session .reassure.people { margin-top: 0.85rem; }
/* ============================================================
   v40 — homepage hero cognitive-load pass (Daniel, 9/21): one headline,
   one subhead, two actions, one reassurance line, one quiet phone line,
   one proof card. Reading order: headline, subhead, CTAs, reassurance,
   proof. Reasoning: docs/design-decisions.md ("Hero simplification").
   ============================================================ */
.hero--light .hero-inner.hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.8fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.hero--light .hero-copy { min-width: 0; }
.hero--light h1 { font-size: clamp(2rem, 3vw, 2.65rem); max-width: 22ch; margin-top: 0.7rem; text-wrap: balance; overflow-wrap: break-word; }
.hero--light .sub { font-size: 1.12rem; line-height: 1.55; margin-top: 1rem; max-width: 52ch; color: var(--ink-soft); }
.hero--light .hero-cta { margin-top: 1.5rem; gap: 0.75rem 0.9rem; }
.hero--light .hero-cta .btn { min-height: 44px; }
.hero--light .reassure.people { margin-top: 1rem; font-size: 0.9rem; color: var(--ink-soft); }
.hero--light .hero-contact.quiet { margin-top: 0.45rem; font-size: 0.88rem; color: var(--ink-faint); }
.hero--light .hero-contact.quiet a { display: inline-block; padding-block: 0.6rem; margin-block: -0.6rem; }

/* the proof card sits level with the headline (not the eyebrow) and is
   quieter: stacked figure over caption, hairline rows, softer shadow */
.hero--light .hero-proof { margin-top: 1.9rem; padding: 1.3rem 1.45rem 1.2rem; box-shadow: 0 22px 44px -30px rgba(19, 29, 54, 0.45); }
.hero-proof h2.tag { margin: 0; line-height: 1.4; }
.hero-proof .results { list-style: none; margin: 0.9rem 0 0; padding: 0; }
.hero-proof .results li { display: block; padding: 0.8rem 0; border-top: 1px solid var(--hero-line); }
.hero-proof .results li:first-child { border-top: 0; padding-top: 0.15rem; }
.hero-proof .results .fig { display: block; font-family: var(--display); font-weight: 700; font-size: 1.3rem; line-height: 1.15; color: var(--gold-soft); font-variant-numeric: tabular-nums; white-space: normal; }
.hero-proof .results .cap { display: block; margin-top: 0.2rem; font-size: 0.9rem; line-height: 1.45; color: var(--hero-soft); }
.hero-proof .results .cap b { color: var(--hero-ink); }
.hero-proof .foot { margin-top: 0.9rem; padding-top: 0.85rem; }

/* industry pills are real links: keep the look, extend the hit area to 44px */
.indrow a { position: relative; }
.indrow a::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }

@media (max-width: 960px) {
  .hero--light .hero-inner.hero-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero--light .hero-proof { margin-top: 0.4rem; max-width: 34rem; }
}
@media (max-width: 580px) {
  .hero--light h1 { font-size: clamp(1.85rem, 8vw, 2.15rem); max-width: none; }
  .hero--light .hero-cta { flex-direction: column; align-items: stretch; }
  .hero--light .hero-cta .btn { width: 100%; }
  .hero--light .hero-proof { max-width: none; }
}
/* ============================================================
   v41 — homepage order (Daniel, 9/21): hero, industries, trusted-by band,
   services, why us, team, testimonials, insights, FAQ, close. Backgrounds
   alternate white and panel so every section break is visible.
   Reasoning: docs/design-decisions.md ("Homepage order").
   ============================================================ */
.trust { background: var(--panel); border-block: 1px solid var(--line); }
.trust .wrap { gap: 1.25rem; }
.trust .logogrid-k { margin-top: 0; }
.trust .logogrid { width: 100%; margin-top: 0; }
.trust .logogrid-cap { margin-top: 0.5rem; }
.home-posts { list-style: none; padding: 0; margin: 1.8rem 0 0; }
.home-posts .post-card { margin: 0; }
.home-posts .post-card.is-feature h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
#faq { border-top: 1px solid var(--line); padding-top: clamp(2.4rem, 5vw, 3.9rem); }
/* ============================================================
   v42 — Daniel's second look (9/21): hero eyebrow without the date,
   credentials as one compact caption row (badge + line, no third button),
   services with contrast: the flagship on navy, the seven doors tinted.
   Reasoning: docs/design-decisions.md ("Second look").
   ============================================================ */
.trust .wrap { gap: 0.9rem; }
.trust .logogrid-cap { font-size: 0.98rem; gap: 0.85rem; margin-top: 0.15rem; color: var(--ink-soft); }
.trust .sba-badge { height: 52px; }
@media (max-width: 580px) { .trust .logogrid-cap { flex-direction: row; gap: 0.7rem; } .trust .sba-badge { height: 46px; } }

.svc.featured { background: linear-gradient(168deg, var(--navy-deep), var(--navy-deeper)); border-color: var(--hero-line); color: var(--hero-ink); }
.svc.featured:hover { border-color: var(--sky); }
.svc.featured .ico { background: rgba(255, 255, 255, 0.1); color: var(--sky-light); }
.svc.featured .svc-flag { display: inline-block; color: var(--navy-deeper); background: var(--gold-soft); padding: 0.2rem 0.55rem; border-radius: 3px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.svc.featured h3, .svc.featured h2 { color: #FFFFFF; }
.svc.featured p.desc { color: var(--hero-soft); }
.svc.featured .more { color: var(--sky-light); }
.svc:not(.featured) { background: var(--panel); border-color: transparent; box-shadow: none; }
.svc:not(.featured):hover { background: var(--panel-2); border-color: var(--accent); }
.svc:not(.featured) .ico { background: var(--panel-2); color: var(--accent); box-shadow: 0 1px 2px rgba(36, 52, 94, 0.14); }
/* header contact on one baseline (Daniel, 9/21): the two-line phone/email
   stack was the only stacked element in a single-line header. From 1100px
   the phone reads "Call 210-876-4086" beside the button; the email leaves
   the header only (footer, closing band and /contact/ keep it). Markup is
   unchanged on every page, so the shared-chrome parity check is untouched. */
@media (min-width: 1100px) {
  .bar-contact { flex-direction: row; align-items: center; }
  .bar-contact a:last-child { display: none; }
  .bar-contact a:first-child { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.2rem; font-size: 0.94rem; font-weight: 700; color: var(--navy); line-height: 1; }
  .bar-contact a:first-child::before { content: "Call"; font-weight: 600; color: var(--ink-soft); margin-right: 0.35em; }
  .bar-contact a:first-child:hover { color: var(--accent); }
}
/* FAQ questions are real headings (9/21): the <h3> inside <summary> takes the
   summary's type so the accordion looks exactly as before. */
.faq-list summary h3 { font: inherit; color: inherit; margin: 0; text-wrap: inherit; flex: 1; }
/* ============================================================
   v43 — booking hero (Daniel, 9/21): the panel's three bullets sit under
   the H1 in place of the paragraph; the right column is the slot for the
   scheduling tool (Calendly or iClosed, not yet chosen), drawn as a
   placeholder card with a faux calendar so the layout reads today.
   ============================================================ */
.hero--session .sub { margin-top: 0.9rem; max-width: 44ch; }
.hero--session .clearer--light { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.hero--session .clearer--light li { position: relative; padding-left: 1.9rem; font-size: 1.08rem; line-height: 1.45; color: var(--ink); }
.hero--session .clearer--light li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: color-mix(in srgb, var(--gold) 18%, transparent); }
.hero--session .clearer--light li::after { content: ""; position: absolute; left: 0.36rem; top: 0.5em; width: 0.45rem; height: 0.25rem; border-left: 2px solid var(--gold-strong); border-bottom: 2px solid var(--gold-strong); transform: rotate(-45deg); }
.hero--session .hero-cta { margin-top: 1.4rem; }
/* breathing room under the hero (Daniel, 9/21): the hero's bottom padding
   was 1rem from the v29.1 fold pass and the industries row 0.95rem, so hero,
   pills and logo band read as one cramped block. */
.hero--light .hero-inner { padding-block: 1.25rem 2.4rem; }
.indrow .wrap { padding-block: 1.35rem; }
.trust { padding-top: clamp(2.6rem, 5vw, 3.6rem); }
/* logo wall (9/21): with 21 marks the last row can hold a single logo; center
   it in the five-column grid, and span both columns on phones. The three-column
   tablet grid divides evenly, so the rule resets there. */
.logogrid li:last-child:nth-child(5n+1) { grid-column: 3; }
@media (max-width: 900px) { .logogrid li:last-child:nth-child(5n+1) { grid-column: auto; } }
@media (max-width: 580px) { .logogrid li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* related-links row on service pages (9/21): internal links to the services
   and industries the page's examples come from; same pill treatment as the
   homepage industries row. The section's own padding is zeroed; the wrap owns it. */
.related-links { padding-block: 0; border-top: 1px solid var(--line); background: var(--bg); }
.related-links .wrap { display: flex; align-items: center; gap: 1rem 1.4rem; flex-wrap: wrap; padding-block: 1.2rem; }
.related-links .k { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.related-links ul { display: flex; flex-wrap: wrap; gap: 0.5rem 0.55rem; list-style: none; margin: 0; padding: 0; }
.related-links a { position: relative; display: inline-block; padding: 0.38rem 0.8rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 0.86rem; font-weight: 600; color: var(--navy); text-decoration: none; background: var(--panel-2); transition: border-color 0.2s ease, background 0.2s ease; }
.related-links a::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.related-links a:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, #FFFFFF); }

/* ============================================================
   v42 — client review round two (Mike 9/21, John 9/23; applied 9/24):
   the Google calendar sits in the booking hero (one step), testimonials
   are a static three-up grid (no manual scroll), FAQ group labels
   separate the free hour from an engagement, and "How the free hour
   works" moved from the booking page to the homepage. Reasoning in
   docs/design-decisions.md ("Client review round two").
   ============================================================ */
.hero--session .hero-book .booking { margin-top: 0; }
.hero--session .hero-book .booking-note { margin-top: 0.8rem; }
.faq-group { margin: 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.faq-list details + .faq-group { margin-top: 1.1rem; }
.approach + #faq { border-top: 0; }
@media (min-width: 961px) {
  .quote-pair.quote-trio { grid-template-columns: repeat(3, 1fr); }
  .quote-trio blockquote p { font-size: 1.05rem; }
}

/* ============================================================
   v43 — Skylar, 9/24 afternoon: the booking calendar spans the full width
   under a two-column hero brief so Google's widget uses its wide layout
   (info, calendar and times side by side, no inner scrolling); testimonial
   quotes clamp to six lines with a Read more toggle (script at the end of
   index.html adds .is-clamped only when the text overflows).
   ============================================================ */
@media (min-width: 961px) { .hero--session .hero-inner.hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.hero--session .hero-inner { padding-bottom: 0.4rem; }
.hero--session .hero-brief .sub { margin-top: 0.4rem; }
.hero--session .hero-book { margin-top: 1.6rem; padding-bottom: clamp(2rem, 4vw, 3rem); }
.hero--session .hero-book .booking iframe { min-height: 720px; }
@media (max-width: 960px) { .hero--session .hero-book .booking iframe { min-height: 820px; } }
.quote-trio figure.is-clamped blockquote p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.quote-trio .qmore { align-self: flex-start; margin-top: 0.7rem; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.quote-trio .qmore:hover { color: var(--navy); }
.quote-trio .qmore:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* ============================================================
   v44 — 9/25: the offer ladder has four steps (John and Mike, 9/24):
   Strategic Assessment, Comprehensive Customer Experience Plan, Change
   Management and Implementation. Four cards across at desktop, two by two
   on tablets, one column on phones (the 960px one-column rule above is
   overridden here). The seven service pages embed their own Google
   schedules in the closing section. Reasoning in docs/design-decisions.md.
   ============================================================ */
@media (max-width: 1100px) { .stair { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .stair { grid-template-columns: 1fr; } }
.stair h3 { text-wrap: balance; }
figure.figure { margin-inline: 0; }
.cta-close .booking { width: 100%; max-width: 62rem; text-align: left; margin-top: 0.4rem; }
.cta-close .booking iframe { min-height: 720px; }
.cta-close .booking-note { max-width: 62rem; }
@media (max-width: 960px) { .cta-close .booking iframe { min-height: 820px; } }

/* ============================================================
   v45 (2026-09-28): QA sweep, phone polish. Tap targets of about 44px
   in the mobile menu and the phone header button, a 24px minimum on the
   article breadcrumb links, a larger LinkedIn icon target on the team
   cards, and a 0.7rem floor for the smallest uppercase chips on phones.
   The How we work climb gets a phone-only vertical drawing (.climb-v)
   so its labels render at about 15px instead of 5px. Reasoning in
   docs/design-decisions.md ("QA sweep fixes (9/28)").
   ============================================================ */
.mobnav .panel a { padding: 0.85rem 1.2rem; }
.article-crumb a { display: inline-block; padding: 0.35rem 0; }
.prin .li-icon { padding: 0.55rem; margin-left: -0.55rem; }
.climb-v { display: none; }
@media (max-width: 640px) {
  .climb-w { display: none; }
  .climb-v { display: block; width: 100%; height: auto; }
  .svc.featured .svc-flag, .hero-proof .tag, .sample .tag { font-size: 0.7rem; }
}
@media (max-width: 580px) {
  .bar .btn-primary { padding: 0.65rem 0.8rem; }
}
a[href^="tel:"] { white-space: nowrap; }
.hero-brief .sub { text-wrap: pretty; }
#faq-cxr { border-top: 1px solid var(--line); }
figure.sample { margin-inline: 0; }
.approach + .related-links { border-top: 0; }
.hero-side .btn-primary { text-wrap: balance; }
.logogrid img[src*="bofa"] { height: 44px; max-height: 44px; }
.svc.svc-cta { border-style: dashed; }
@media (min-width: 1100px) { .logogrid { grid-template-columns: repeat(7, 1fr); } .logogrid li:last-child:nth-child(5n+1) { grid-column: auto; } }
@media (min-width: 761px) {
  .vs { grid-template-rows: auto repeat(5, auto); }
  .vs .col { display: grid; grid-template-rows: subgrid; grid-row: 1 / -1; }
  .vs .col ul { display: contents; }
}
@media (max-width: 960px) {
  footer.site .wrap { grid-template-columns: 1.2fr 1fr 1fr; }
  .hero--light .hero-proof { max-width: none; }
}
@media (max-width: 700px) {
  footer.site .wrap { grid-template-columns: 1fr 1fr; }
  footer.site .wrap > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .hero--session .hero-book .booking iframe, .cta-close .booking iframe { min-height: 1120px; }
}
@media (max-width: 380px) { .hero .eyebrow { letter-spacing: 0.1em; } }
.logostrip .logogrid-k { max-width: none; }
.hero-side .reassure { font-size: 0.86rem; color: var(--ink-faint); }
.ind-card img { height: auto; flex: none; }
.ind-card .ind-body { flex: 1; }
@media (min-width: 961px) { .moves { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .keystat { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 3rem; align-items: center; }
  .keystat .k { grid-column: 1 / -1; }
  .keystat .stat { grid-row: 2 / 4; margin: 0; }
  .keystat .label, .keystat .note { grid-column: 2; max-width: none; }
}
.figure svg text { font-family: var(--body); }
@media (min-width: 1101px) {
  .stair dl { grid-template-columns: 1fr; gap: 0.2rem 0; }
  .stair dd { margin-bottom: 0.55rem; }
  .stair .btn { align-self: stretch; white-space: nowrap; font-size: 0.88rem; padding-inline: 0.8rem; }
}
@media (max-width: 580px) {
  .sep { display: none; }
  .sep + a { display: block; }
}
.util a { display: inline-block; padding: 0.25rem 0; }
@media print {
  .util, header.bar, .mobnav, .sticky-cta, .cta-close, .booking, footer.site nav { display: none !important; }
  body { background: #FFFFFF; }
  html.reveal-on .reveal { opacity: 1; transform: none; }
  .hero, .page-hero, .approach, .band-dark { background: #FFFFFF; }
}