/* ══════════════════════════════════════════════════════════════
   Crossroads Navigator - shared core stylesheet
   Linked by index.html, keynotes.html, ai.html, fractional.html,
   navigator-stack.html.

   Load order matters: link this BEFORE any page's inline <style>
   so page-specific rules always win on a collision.
   ══════════════════════════════════════════════════════════════ */

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--warm-white);
  line-height: 1.7;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* ── Tokens ──
   Neutrals follow Brand & Design Guidelines v1.1 (7 Aug 2026), §2.
   v1.0's "light grey" values carried a green cast; these are true
   neutrals with a slight warm bias. Navy and teal are unchanged.
   Teal is an ACCENT - at most one teal element per section (§2 teal
   discipline rule). Everything else carries navy or a neutral. */
:root {
  --navy:       #0d1b3e;
  --teal:       #00c896;
  --orange:     #ff6b35;   /* "current / active / live" markers only */
  --gold:       #ffc107;   /* F1 motif only */

  --warm-white: #FBF9F6;   /* cards, panels, primary light background */
  --light:      #F5F1EA;   /* section background tint */
  --mid:        #EDE7DC;   /* pull-quotes, soft callouts */
  --border:     #E4DDD2;   /* card borders, dividers, table rules */
  --muted:      #6C6459;   /* body copy on light grounds */
  --text:       #1F1B18;   /* warm near-black, never pure black */

  --radius:     12px;

  /* Deprecated aliases - kept so older rules keep resolving.
     Prefer --light / --border in new work. */
  --sand:    var(--light);
  --sand-ln: var(--border);
}

/* ── Utility ── */
.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.section { padding: 90px 0; }
.section-alt  { background: var(--light); }
.section-sand { background: var(--sand); }
.section-dark { background: var(--navy); color: #fff; }
.tag {
  display: inline-block;
  background: var(--teal);
  color: var(--navy);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.section-title {
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 12px;
  color: var(--navy);
}
.section-dark .section-title { color: #fff; }
.section-sub {
  font-size: 1rem;
  color: var(--muted);
  max-width: 620px;
  margin-bottom: 36px;
}
.section-dark .section-sub { color: rgba(255,255,255,.75); }
.section-sub-wide { max-width: 860px; }

.btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 40px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  border: 0;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.btn-teal    { background: var(--teal); color: var(--navy); }
.btn-outline { border: 2px solid var(--teal); color: var(--teal); background: transparent; }
.btn-navy    { background: var(--navy); color: #fff; }

/* ── Nav ── */
nav {
  position: fixed; top: 0; width: 100%; z-index: 100;
  background: rgba(13,27,62,.92);
  backdrop-filter: blur(10px);
  padding: 14px 0;
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1140px; margin: 0 auto; padding: 0 24px;
}
.nav-logo {
  font-size: 1.1rem; font-weight: 800; color: #fff; letter-spacing: .02em;
  transition: opacity .2s;
}
.nav-logo:hover { opacity: .85; }
/* The full logo lockup already contains the words "Crossroads Navigator",
   so the nav carries only the crossroads arrow mark beside the text
   wordmark. Using the whole lockup here would set the name twice. */
.nav-logo {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 1rem;              /* trimmed: the mark costs ~40px of bar width */
}
.nav-mark { height: 30px; width: auto; flex: none; }
.nav-logo span { color: var(--teal); }
/* Must out-specify `.nav-logo span` above, or the name renders teal too. */
.nav-logo .nav-word { color: #fff; }
.nav-links { display: flex; gap: 18px; list-style: none; }
.nav-links a {
  color: rgba(255,255,255,.8); font-size: .9rem; font-weight: 500;
  transition: color .2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--teal); }
.nav-toggle {
  display: none;
  background: transparent; border: 0; cursor: pointer;
  padding: 6px; width: 36px;
  flex-direction: column; gap: 5px;
}
.nav-toggle span {
  display: block; height: 2px; background: var(--teal);
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════════════════════════════════════
   CHOOSER - "What brings you here?" routing band on the homepage
   ══════════════════════════════════════════════════════════════ */
.chooser { padding: 78px 0; background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.chooser::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -55deg, transparent, transparent 60px,
    rgba(0,200,150,.05) 60px, rgba(0,200,150,.05) 62px
  );
  pointer-events: none;
}
.chooser .container { position: relative; z-index: 1; }
.chooser-head { text-align: center; max-width: 680px; margin: 0 auto 44px; }
.chooser-head h2 {
  font-size: clamp(1.7rem, 3.8vw, 2.4rem);
  font-weight: 900; line-height: 1.15; letter-spacing: -.01em;
  margin-bottom: 14px;
}
.chooser-head h2 span { color: var(--teal); }
.chooser-head p { color: rgba(255,255,255,.72); font-size: 1.02rem; }

.chooser-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.chooser-card {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;
  padding: 30px 26px 26px;
  transition: transform .25s, border-color .25s, background .25s, box-shadow .25s;
}
.chooser-card:hover {
  transform: translateY(-6px);
  border-color: var(--teal);
  background: rgba(0,200,150,.07);
  box-shadow: 0 18px 40px rgba(0,0,0,.32);
}
.chooser-card:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}
.chooser-icon { font-size: 2rem; line-height: 1; margin-bottom: 16px; }
.chooser-card h3 {
  font-size: 1.22rem; font-weight: 800; color: #fff;
  line-height: 1.25; margin-bottom: 8px;
}
.chooser-lede {
  font-size: .95rem; color: rgba(255,255,255,.74);
  margin-bottom: 18px;
}
.chooser-list { list-style: none; margin-bottom: 22px; }
.chooser-list li {
  font-size: .88rem; color: rgba(255,255,255,.66);
  padding-left: 20px; position: relative; margin-bottom: 7px;
  line-height: 1.5;
}
.chooser-list li::before {
  content: '\2192';
  position: absolute; left: 0; top: 0;
  color: var(--teal); font-weight: 700;
}
.chooser-cta {
  margin-top: auto;
  font-size: .9rem; font-weight: 700; color: var(--teal);
  display: inline-flex; align-items: center; gap: 8px;
}
.chooser-card:hover .chooser-cta span { transform: translateX(5px); }
.chooser-cta span { transition: transform .25s; display: inline-block; }

.chooser-foot {
  text-align: center; margin-top: 34px;
  font-size: .92rem; color: rgba(255,255,255,.55);
}
.chooser-foot a { color: var(--teal); font-weight: 600; text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════
   PAGE HERO - used by the three segment pages
   ══════════════════════════════════════════════════════════════ */
.page-hero {
  padding: 148px 0 68px;
  background: linear-gradient(135deg, #0d1b3e 0%, #1a3a6e 60%, #0d1b3e 100%);
  color: #fff;
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -55deg, transparent, transparent 60px,
    rgba(0,200,150,.04) 60px, rgba(0,200,150,.04) 62px
  );
  pointer-events: none;
}
.page-hero-inner { position: relative; z-index: 1; max-width: 780px; }
.page-hero .breadcrumb {
  font-size: .82rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 18px;
  display: inline-flex; align-items: center; gap: 8px;
}
.page-hero .breadcrumb:hover { opacity: .85; }
.page-hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  font-weight: 900; line-height: 1.1;
  letter-spacing: -.015em; margin-bottom: 18px;
}
.page-hero h1 span { color: var(--teal); }
.page-hero .page-hero-sub {
  font-size: 1.1rem; color: rgba(255,255,255,.78);
  line-height: 1.6; margin-bottom: 26px; max-width: 640px;
}
.page-hero-btns { display: flex; flex-wrap: wrap; gap: 14px; }

/* Stat strip under a page hero */
.hero-stats-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px; margin-top: 46px;
  position: relative; z-index: 1;
}
.hero-stat {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 20px 18px; text-align: center;
}
.hero-stat-num {
  font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 900;
  color: var(--teal); line-height: 1.1; margin-bottom: 4px;
}
.hero-stat-label {
  font-size: .8rem; color: rgba(255,255,255,.65);
  line-height: 1.35;
}

/* ══════════════════════════════════════════════════════════════
   CARD PRIMITIVES - shared across segment pages
   ══════════════════════════════════════════════════════════════ */
.card-grid   { display: grid; gap: 20px; }
.card-grid-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.card:hover { border-color: rgba(0,200,150,.5); box-shadow: 0 12px 30px rgba(13,27,62,.07); }
a.card:hover { transform: translateY(-4px); }
.card-eyebrow {
  font-size: .72rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 9px;
}
.card h3 {
  font-size: 1.08rem; font-weight: 800; color: var(--navy);
  line-height: 1.3; margin-bottom: 9px;
}
.card p { font-size: .92rem; color: var(--muted); line-height: 1.6; }
.card-cta {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 14px; font-size: .88rem; font-weight: 700; color: var(--teal);
}
a.card:hover .card-cta span { transform: translateX(5px); }
.card-cta span { transition: transform .25s; display: inline-block; }

/* Numbered belief / principle card */
.belief-card { position: relative; padding-left: 68px; }
.belief-num {
  position: absolute; left: 24px; top: 24px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--teal); color: var(--navy);
  font-size: .9rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}

/* Tool-stack pill grid */
.stack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.stack-item {
  background: var(--warm-white);
  border: 1px solid var(--sand-ln);
  border-radius: 10px;
  padding: 15px 17px;
}
.stack-name {
  font-size: .95rem; font-weight: 800; color: var(--navy);
  margin-bottom: 3px;
}
.stack-use { font-size: .82rem; color: var(--muted); line-height: 1.45; }

/* Results / proof stat tiles */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
}
.proof-tile {
  background: var(--warm-white);
  border: 1px solid rgba(0,200,150,.28);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius);
  padding: 22px 20px;
}
.proof-num {
  font-size: clamp(1.5rem, 3vw, 1.95rem); font-weight: 900;
  color: var(--navy); line-height: 1.1; margin-bottom: 6px;
}
.proof-label { font-size: .86rem; color: var(--muted); line-height: 1.45; }
.proof-src {
  font-size: .74rem; color: #8a95a1; margin-top: 8px;
  font-style: italic;
}

/* Timeline - sessions delivered */
.timeline { list-style: none; position: relative; padding-left: 28px; }
.timeline::before {
  content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px;
  width: 2px; background: linear-gradient(180deg, var(--teal), rgba(0,200,150,.15));
}
.timeline li { position: relative; padding-bottom: 26px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ''; position: absolute; left: -28px; top: 8px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--warm-white); border: 3px solid var(--teal);
}
.timeline-date {
  font-size: .76rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 4px;
}
.timeline-title { font-size: 1rem; font-weight: 800; color: var(--navy); margin-bottom: 5px; }
.timeline-desc  { font-size: .9rem; color: var(--muted); line-height: 1.6; }

/* Checklist (for / not for) */
.check-list { list-style: none; }
.check-list li {
  position: relative; padding-left: 28px; margin-bottom: 11px;
  font-size: .94rem; color: var(--muted); line-height: 1.55;
}
.check-list li::before {
  position: absolute; left: 0; top: 0;
  font-weight: 900; font-size: .95rem;
}
.check-list.yes li::before { content: '\2713'; color: var(--teal); }
.check-list.no  li::before { content: '\2715'; color: #c2543a; }

/* Pull quote */
.pull-quote {
  border-left: 4px solid var(--teal);
  background: var(--sand);
  padding: 22px 26px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 28px 0;
}
.pull-quote p {
  font-size: 1.05rem; font-style: italic;
  color: var(--navy); line-height: 1.6; margin-bottom: 8px;
}
.pull-quote cite {
  font-size: .85rem; font-style: normal; font-weight: 700; color: var(--muted);
}

/* ══════════════════════════════════════════════════════════════
   TESTIMONIALS
   index.html defines these same class names in its own inline
   <style>, which loads later and therefore wins there. This block
   serves the segment pages only - do not "fix" the duplication by
   deleting index's copy without checking its dark-section variant.
   ══════════════════════════════════════════════════════════════ */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
/* Use on 2- or 4-card sets so the last card doesn't sit alone on its own row. */
.testimonials-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 768px) {
  .testimonials-grid.cols-2 { grid-template-columns: 1fr; }
}
.testimonial-card {
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius);
  padding: 26px 26px 22px;
  display: flex; flex-direction: column;
  transition: box-shadow .25s, transform .25s;
}
.testimonial-card:hover {
  box-shadow: 0 14px 34px rgba(13,27,62,.08);
  transform: translateY(-3px);
}
.testimonial-category {
  font-size: .68rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px;
}
.testimonial-quote {
  font-size: .98rem; line-height: 1.65; color: var(--text);
  margin-bottom: 18px; flex: 1;
}
.testimonial-quote::before { content: '\201C'; }
.testimonial-quote::after  { content: '\201D'; }
.testimonial-meta {
  font-size: .82rem; color: var(--muted); line-height: 1.45;
  padding-top: 14px; border-top: 1px solid var(--border);
}
.testimonial-name {
  display: block; font-weight: 800; color: var(--navy);
  font-size: .92rem; margin-bottom: 2px;
}

/* Verbatim survey fragments - deliberately styled as data, not as
   polished testimonials, because that is what they are. */
.verbatim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.verbatim {
  background: var(--mid);
  border-radius: 10px;
  padding: 18px 20px;
  font-size: .92rem; line-height: 1.55; color: var(--text);
}
.verbatim::before { content: '\201C'; }
.verbatim::after  { content: '\201D'; }
.verbatim-note {
  font-size: .82rem; color: var(--muted);
  margin-top: 18px; font-style: italic;
}

/* ══════════════════════════════════════════════════════════════
   CTA STRIP + CONVERSION BLOCK (Calendly + email capture)
   ══════════════════════════════════════════════════════════════ */
.cta-strip-wrap { padding: 0 0 10px; }
.cta-strip {
  max-width: 760px; margin: 0 auto;
  padding: 26px 32px;
  background: var(--mid);
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius);
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 20px;
}
.cta-strip-text { font-size: 1rem; font-weight: 600; color: var(--navy); }

/* Two-up: book a call | join the list */
.convert-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin-top: 34px; text-align: left;
}
.convert-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 28px 26px;
  display: flex; flex-direction: column;
}
.convert-card h3 {
  font-size: 1.1rem; font-weight: 800; color: #fff; margin-bottom: 8px;
}
.convert-card p {
  font-size: .92rem; color: rgba(255,255,255,.7);
  line-height: 1.6; margin-bottom: 20px;
}
.convert-card .btn { align-self: flex-start; }

/* Email capture form */
.signup-form { margin-top: auto; }
.signup-row { display: flex; gap: 10px; flex-wrap: wrap; }
.signup-form input[type="email"],
.signup-form input[type="text"] {
  flex: 1 1 200px;
  padding: 13px 16px;
  border-radius: 40px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.07);
  color: #fff;
  font-family: inherit;
  font-size: .92rem;
}
.signup-form input::placeholder { color: rgba(255,255,255,.45); }
.signup-form input:focus {
  outline: none;
  border-color: var(--teal);
  background: rgba(255,255,255,.11);
}
.signup-form .btn { flex: 0 0 auto; }
.signup-note {
  font-size: .76rem; color: rgba(255,255,255,.45);
  margin-top: 12px; line-height: 1.5;
}
.signup-note a { color: rgba(255,255,255,.7); text-decoration: underline; }
/* Honeypot - hidden from humans, catches bots. Netlify convention. */
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
/* Visually hidden but still read by screen readers - for real form labels. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.form-status {
  margin-top: 12px; font-size: .88rem; font-weight: 600;
  color: var(--teal); min-height: 1.2em;
}
.form-status.error { color: #ff9d80; }

/* ── Footer ── */
footer {
  background: #080e20; color: rgba(255,255,255,.35);
  text-align: center; padding: 28px 24px; font-size: .82rem;
}
footer span { color: var(--teal); }
footer a { color: rgba(255,255,255,.5); text-decoration: underline; }
/* Full lockup here - the footer has no competing wordmark. */
.footer-logo { height: 62px; width: auto; margin: 0 auto 18px; opacity: .92; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .chooser-grid { grid-template-columns: 1fr; gap: 16px; }
  .card-grid-3, .card-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .convert-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .section { padding: 62px 0; }
  .page-hero { padding: 124px 0 52px; }
  .nav-toggle { display: flex; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(13,27,62,.98);
    flex-direction: column; gap: 0; padding: 8px 24px 16px;
  }
  .nav-links.open { display: flex; }
  .nav-links li { border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav-links li:last-child { border-bottom: 0; }
  .nav-links a { display: block; padding: 12px 0; }
  .card-grid-2, .card-grid-3, .card-grid-4 { grid-template-columns: 1fr; }
  .cta-strip { padding: 22px; }
  .cta-strip-text { text-align: center; flex-basis: 100%; }
  .cta-strip .btn { width: 100%; text-align: center; }
  .page-hero-btns .btn { width: 100%; text-align: center; }
  .signup-form .btn { width: 100%; text-align: center; }
}