/* ═══════════════════════════════════════════════════════════════════════════
   BANTAM DIGITAL — shared stylesheet
   The single source of truth for the design system. Every page under site/
   links this file; pages keep only their own deltas in a small inline <style>
   block placed AFTER the <link>.
   Sections: 1 tokens · 2 reset · 3 nav · 4 hero · 5 buttons · 6 sections
             7 components · 8 CTA · 9 forms · 10 footer · 11 motion
             12 responsive · 13 testimonials · 14 multi-page additions
   ═══════════════════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --navy: #1B3A5C;
  --navy-deep: #0F2338;
  --navy-mid: #254D75;
  --gold: #C8922A;
  --gold-light: #E8B44A;
  --gold-pale: #FDF6EC;
  --cream: #FAF8F4;
  --white: #FFFFFF;
  --text-dark: #1A1A1A;
  --text-mid: #4A5568;
  --text-light: #8A96A4;
  --rule: rgba(200, 146, 42, 0.3);
  --border: #CCCCCC;
  /* Validation only. Deliberately desaturated and navy-leaning so it reads as
     part of this palette rather than a stock library red. */
  --error: #9B2C2C;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
  --nav-h: 64px;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--text-dark);
  overflow-x: hidden;
  line-height: 1.75;
}

/* TYPOGRAPHY
   Cormorant Garamond ships old-style (text) figures by default: digits sit on
   varying baselines and 1 has no top serif, so "$10M" reads as "$IOM" and
   "30%" looks broken at display sizes. Force lining figures everywhere the
   serif face carries numbers. This must cover every serif rule that can hold a
   digit, which is why the list is long rather than a bare `h1, h2, h3`.
   Previously this lived as a copy-pasted patch in the three site/golf/ pages;
   it belongs here so the whole site gets it. */
.hero h1,
.page-hero h1,
.sheet-hero h1,
.section-title,
.band-title,
.cta-title,
.sheet-cta-title,
.card h3,
.serve-card h3,
.compare-col-title,
.use-case-title,
.credential-number,
.tier-price,
.quote-text,
.prose h2,
.prose h3,
.callout-box p {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* NAV */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(27, 58, 92, 0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(200, 146, 42, 0.25);
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--nav-h);
}

.nav-logo {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-logo span {
  color: var(--gold);
}

nav a.nav-cta {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-deep);
  background: var(--gold);
  padding: 0.5rem 1.2rem;
  border-radius: 2px;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}

nav a.nav-cta:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
}

/* HERO */
.hero {
  min-height: 100vh;
  background: var(--navy-deep);
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 80px 2rem 4rem;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(200, 146, 42, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 146, 42, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 146, 42, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.hero-eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeUp 0.8s 0.1s forwards;
}

.hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  font-weight: 600;
  line-height: 1.12;
  color: var(--white);
  margin-bottom: 1.8rem;
  opacity: 0;
  animation: fadeUp 0.8s 0.25s forwards;
}

.hero h1 em {
  font-style: italic;
  color: var(--gold-light);
}

.hero-sub {
  font-size: 1.1rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.68);
  max-width: 620px;
  margin-bottom: 3rem;
  opacity: 0;
  animation: fadeUp 0.8s 0.4s forwards;
  line-height: 1.8;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.8s 0.55s forwards;
}

.btn-primary {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy-deep);
  background: var(--gold);
  padding: 1rem 2.2rem;
  border-radius: 2px;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(200, 146, 42, 0.3);
}

.btn-primary:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(200, 146, 42, 0.4);
}

.btn-ghost {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.7);
  padding: 1rem 2rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}

.btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: white;
}

.scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  animation: fadeIn 1s 1.2s forwards;
}

.scroll-hint span {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}

.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(200, 146, 42, 0.6), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

/* SECTIONS */
.section {
  padding: 6rem 2rem;
}

.section-inner {
  max-width: 900px;
  margin: 0 auto;
}

.section-label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 0.8rem;
}

.section-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.section-body {
  font-size: 1.05rem;
  color: var(--text-mid);
  line-height: 1.85;
  max-width: 680px;
}

.section-rule {
  width: 48px;
  height: 3px;
  background: var(--gold);
  margin-bottom: 2rem;
  border-radius: 2px;
}

/* COMPARE CARDS */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid rgba(27, 58, 92, 0.12);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 3rem;
  box-shadow: 0 4px 40px rgba(27, 58, 92, 0.08);
}

.compare-col {
  padding: 2.5rem 2rem;
}

.compare-col.msp {
  background: var(--white);
  border-right: 1px solid rgba(27, 58, 92, 0.1);
}

.compare-col.bantam {
  background: var(--navy);
}

.compare-col-label {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.compare-col.msp .compare-col-label {
  color: var(--text-light);
}

.compare-col.bantam .compare-col-label {
  color: var(--gold);
}

.compare-col-title {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 1.8rem;
  line-height: 1.3;
}

.compare-col.msp .compare-col-title {
  color: var(--text-mid);
}

.compare-col.bantam .compare-col-title {
  color: var(--white);
}

.compare-item {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
  align-items: flex-start;
}

.compare-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
}

.msp .compare-icon {
  background: rgba(27, 58, 92, 0.1);
  color: var(--text-mid);
}

.bantam .compare-icon {
  background: rgba(200, 146, 42, 0.25);
  color: var(--gold-light);
}

.compare-item-text {
  font-size: 0.95rem;
  line-height: 1.65;
}

.msp .compare-item-text {
  color: var(--text-mid);
}

.bantam .compare-item-text {
  color: rgba(255, 255, 255, 0.78);
}

/* TABLE */
.table-section {
  background: var(--white);
}

.diff-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2.5rem;
  font-size: 0.95rem;
}

.diff-table thead tr {
  background: var(--navy);
}

.diff-table thead th {
  padding: 1rem 1.2rem;
  text-align: left;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  border: none;
}

.diff-table thead th.bantam-col {
  background: var(--gold);
  color: var(--navy-deep);
}

.diff-table tbody tr {
  border-bottom: 1px solid rgba(27, 58, 92, 0.06);
}

.diff-table tbody tr:hover {
  background: rgba(200, 146, 42, 0.04);
}

.diff-table td {
  padding: 0.9rem 1.2rem;
  vertical-align: top;
  color: var(--text-mid);
  line-height: 1.5;
}

.diff-table td:first-child {
  font-weight: 500;
  color: var(--navy);
  font-size: 0.85rem;
  width: 22%;
}

/* Row headers. A comparison table's first column labels its rows, so <th
   scope="row"> is the correct markup; this matches it to the td:first-child
   treatment above so either form renders identically. */
.diff-table tbody th {
  padding: 0.9rem 1.2rem;
  vertical-align: top;
  text-align: left;
  font-weight: 500;
  color: var(--navy);
  font-size: 0.85rem;
  line-height: 1.5;
  width: 22%;
}

/* Wrapper for wide tables. Without this a 5-column table forces the whole
   page to scroll sideways on a phone instead of just the table. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.diff-table td.bantam-col {
  color: var(--navy);
  font-weight: 400;
}

.diff-table tbody tr:nth-child(even) {
  background: rgba(235, 242, 249, 0.35);
}

.diff-table tbody tr:nth-child(even):hover {
  background: rgba(200, 146, 42, 0.06);
}

/* AI INFLECTION */
.inflection-section {
  background: var(--navy-deep);
}

.inflection-section .section-title {
  color: var(--white);
}

.inflection-section .section-body {
  color: rgba(255, 255, 255, 0.65);
}

.callout-box {
  margin-top: 3rem;
  padding: 2.5rem;
  border-left: 4px solid var(--gold);
  background: rgba(200, 146, 42, 0.07);
  border-radius: 0 4px 4px 0;
}

.callout-box p {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--white);
  line-height: 1.5;
  font-style: italic;
}

.callout-box cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

/* VIGNETTES
   Client engagement stories. Same box treatment as .callout-box (4px gold left
   border, gold wash) but sized for several paragraphs of prose rather than a
   single display-size quote, which is what .callout-box p forces at 1.4rem
   italic. Written light-first with a .section-dark override, matching how
   .card / .card.on-dark handle the same problem. */
.vignette {
  margin-top: 2rem;
  padding: 2rem 2.25rem;
  border-left: 4px solid var(--gold);
  background: rgba(200, 146, 42, 0.07);
  border-radius: 0 4px 4px 0;
}

.vignette h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  color: var(--navy);
  margin-bottom: 0.9rem;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

.vignette p {
  font-size: 0.95rem;
  color: var(--text-mid);
  line-height: 1.8;
}

.vignette p + p {
  margin-top: 1rem;
}

.section-dark .vignette h3 {
  color: var(--gold-light);
}

.section-dark .vignette p {
  color: rgba(255, 255, 255, 0.72);
}

/* The honesty line under the vignettes: quieter than body copy, deliberately
   not boxed, so it reads as an aside rather than another claim. */
.proof-note {
  margin-top: 2.5rem;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text-mid);
  max-width: 680px;
}

.section-dark .proof-note {
  color: rgba(255, 255, 255, 0.55);
}

/* Credential block. Third and smallest element in the proof section: it exists
   to explain the diagnoses above, not to stand on its own. */
.proof-credential {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(200, 146, 42, 0.25);
  max-width: 680px;
}

.proof-credential .credential-unit {
  margin-bottom: 0.7rem;
}

.proof-credential p {
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--text-mid);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

.section-dark .proof-credential p {
  color: rgba(255, 255, 255, 0.6);
}

/* USE CASES */
.use-cases-section {
  background: var(--cream);
}

.use-cases-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem 3rem;
  margin-top: 2.5rem;
}

.use-case-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.use-case-icon {
  width: 40px;
  height: 40px;
  background: rgba(27, 58, 92, 0.06);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.use-case-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.35rem;
}

.use-case-text {
  font-size: 0.9rem;
  color: var(--text-mid);
  line-height: 1.65;
}

/* WHO WE SERVE */
.serve-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.serve-card {
  background: var(--white);
  border: 1px solid rgba(27, 58, 92, 0.1);
  border-radius: 4px;
  padding: 1.8rem 1.5rem;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

.serve-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}

.serve-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(27, 58, 92, 0.12);
}

.serve-card:hover::before {
  transform: scaleX(1);
}

.serve-icon {
  width: 40px;
  height: 40px;
  background: rgba(27, 58, 92, 0.06);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.serve-card h3 {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.5rem;
}

.serve-card p {
  font-size: 0.875rem;
  color: var(--text-mid);
  line-height: 1.65;
}

/* CREDENTIALS */
.credentials-section {
  background: var(--white);
}

.credentials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.credential-card {
  background: var(--cream);
  border: 1px solid rgba(27, 58, 92, 0.1);
  border-radius: 4px;
  padding: 2rem 1.5rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.credential-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gold);
}

.credential-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(27, 58, 92, 0.1);
}

.credential-number {
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 0.2rem;
}

.credential-unit {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 1rem;
}

.credential-desc {
  font-size: 0.87rem;
  color: var(--text-mid);
  line-height: 1.65;
}

/* CTA */
.cta-section {
  background: var(--navy);
  padding: 7rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(200, 146, 42, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 146, 42, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}

.cta-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}

.cta-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 1.2rem;
}

.cta-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 600;
  color: var(--white);
  margin-bottom: 1.2rem;
  line-height: 1.2;
}

.cta-sub {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 2rem;
  line-height: 1.8;
}

.cta-rule {
  width: 40px;
  height: 2px;
  background: var(--gold);
  margin: 0 auto 2rem;
}

.assessment-deliverable {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(200, 146, 42, 0.25);
  border-radius: 4px;
  padding: 2rem;
  margin-bottom: 2.5rem;
  text-align: left;
}

.assessment-deliverable-label {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 1.25rem;
}

.assessment-deliverable-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2rem;
  margin-bottom: 1.5rem;
}

.assessment-deliverable-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.ad-num {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--gold);
  line-height: 1.4;
  flex-shrink: 0;
}

.ad-text {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.55;
}

.assessment-structure-note {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.7;
  border-top: 1px solid rgba(200, 146, 42, 0.15);
  padding-top: 1.25rem;
  font-style: italic;
}

.assessment-form {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 1.2rem;
}

.assessment-form input {
  flex: 1;
  min-width: 220px;
  font-family: var(--sans);
  font-size: 0.9rem;
  padding: 0.9rem 1.2rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  color: var(--white);
  outline: none;
  transition: border-color 0.2s;
}

.assessment-form input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.assessment-form input:focus {
  border-color: var(--gold);
}

.assessment-form button {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-deep);
  background: var(--gold);
  padding: 0.9rem 2rem;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  white-space: nowrap;
}

.assessment-form button:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
}

.form-note {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.03em;
}

.form-note-italic {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
  margin-top: 0.5rem;
}

.form-confirm {
  display: none;
  padding: 2rem;
  background: rgba(200, 146, 42, 0.12);
  border: 1px solid rgba(200, 146, 42, 0.3);
  border-radius: 4px;
  color: var(--gold-light);
  font-size: 0.95rem;
}

/* FOOTER */
footer {
  background: var(--navy-deep);
  padding: 2.5rem 2rem;
  text-align: center;
  border-top: 1px solid rgba(200, 146, 42, 0.15);
}

footer .footer-logo {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.75rem;
}

footer .footer-logo span {
  color: var(--gold);
}

footer p {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.05em;
}

footer a {
  color: rgba(200, 146, 42, 0.7);
  text-decoration: none;
}

footer a:hover {
  color: var(--gold);
}

/* ANIMATIONS */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes scrollPulse {

  0%,
  100% {
    opacity: 0.5;
    transform: scaleY(1);
  }

  50% {
    opacity: 1;
    transform: scaleY(1.1);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

.reveal-delay-1 {
  transition-delay: 0.1s;
}

.reveal-delay-2 {
  transition-delay: 0.2s;
}

.reveal-delay-3 {
  transition-delay: 0.3s;
}

/* RESPONSIVE */
@media (max-width: 820px) {
  .credentials-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  body {
    font-size: 1rem;
  }

  .compare-grid {
    grid-template-columns: 1fr;
  }

  .compare-col.msp {
    border-right: none;
    border-bottom: 1px solid rgba(27, 58, 92, 0.1);
  }

  .diff-table {
    font-size: 0.85rem;
  }

  .diff-table td {
    padding: 0.75rem 0.8rem;
  }

  .hero-actions {
    flex-direction: column;
  }

  .btn-primary,
  .btn-ghost {
    text-align: center;
  }

  .use-cases-grid {
    grid-template-columns: 1fr;
  }

  .assessment-deliverable-grid {
    grid-template-columns: 1fr;
  }
}

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

/* ═══════════════════════════════════════
   TESTIMONIALS SECTION
════════════════════════════════════════ */

.testimonials-section {
  background: var(--navy-deep);
  position: relative;
  overflow: hidden;
}

.testimonials-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(200, 146, 42, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 146, 42, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.testimonials-section::after {
  content: '';
  position: absolute;
  top: -150px;
  right: -150px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 146, 42, 0.07) 0%, transparent 70%);
  pointer-events: none;
}

.testimonials-section .section-title {
  color: var(--white);
}

.testimonials-section .section-subtitle {
  font-size: 0.95rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 3.5rem;
  max-width: 520px;
  line-height: 1.7;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.testimonial-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(200, 146, 42, 0.18);
  border-top: 3px solid var(--gold);
  border-radius: 4px;
  padding: 2.2rem 2rem 1.8rem;
  display: flex;
  flex-direction: column;
  transition: background 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.testimonial-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(200, 146, 42, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.quote-mark {
  font-family: var(--serif);
  font-size: 4rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.5;
  margin-bottom: 0.5rem;
  display: block;
  user-select: none;
}

.quote-text {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
  font-style: italic;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 2rem;
}

.attribution {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(200, 146, 42, 0.15);
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--navy-mid);
  border: 1px solid rgba(200, 146, 42, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gold-light);
  flex-shrink: 0;
  letter-spacing: 0.03em;
}

.attr-name {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 0.2rem;
}

.attr-title {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.03em;
  line-height: 1.4;
}

.attr-company {
  color: var(--gold);
}

.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 2.5rem;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
}

.verified-badge::before {
  content: '✓';
  display: inline-flex;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(200, 146, 42, 0.25);
  color: var(--gold);
  font-size: 0.6rem;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   14. MULTI-PAGE ADDITIONS
   Everything below exists because this became a real multi-page site. The
   original stylesheet served a single standalone landing page: its nav was a
   logo plus one CTA button, with no cross-page links and no mobile pattern.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Nav: cross-page links + mobile drawer ────────────────────────────────── */

.nav-menu {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-left: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
}

.nav-link {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  padding: 0.35rem 0;
  position: relative;
  transition: color 0.2s;
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--white);
}

/* Gold underline marks the current page. Set by bantam.js from the URL, so it
   survives copy-pasting the nav partial verbatim into every page. */
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s;
}

.nav-link.is-current {
  color: var(--white);
}

.nav-link.is-current::after {
  transform: scaleX(1);
}

/* Hamburger — hidden on desktop, revealed at the drawer breakpoint. */
.nav-toggle {
  display: none;
  width: 30px;
  height: 30px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 22px;
  background: var(--white);
  border-radius: 1px;
  transition: transform 0.25s, opacity 0.2s;
}

.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);
}

/* 920px, not 680px: the nav runs out of room well before the content does. */
@media (max-width: 920px) {
  .nav-toggle {
    display: flex;
  }

  .nav-menu {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    padding: 1rem 2rem 2rem;
    background: rgba(15, 35, 56, 0.98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(200, 146, 42, 0.25);
    /* Collapsed by default. Animating max-height keeps it CSS-only. */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.3s ease, opacity 0.2s ease;
  }

  .nav-menu.is-open {
    max-height: 80vh;
    opacity: 1;
    pointer-events: auto;
    overflow-y: auto;
  }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-link {
    padding: 0.9rem 0;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav-link::after {
    display: none;
  }

  .nav-link.is-current {
    color: var(--gold-light);
  }

  .nav-menu a.nav-cta {
    margin-top: 1.25rem;
    text-align: center;
    padding: 0.85rem 1.2rem;
  }
}

/* ── Interior page hero ───────────────────────────────────────────────────── */
/* The full-viewport .hero is right for the home page and the long-form landing
   pages. Interior pages get this shorter banded version instead. */

.page-hero {
  background: var(--navy-deep);
  padding: calc(var(--nav-h) + 5rem) 2rem 5rem;
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(200, 146, 42, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 146, 42, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.page-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}

.page-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--white);
  margin-bottom: 1.4rem;
}

.page-hero h1 em {
  font-style: italic;
  color: var(--gold-light);
}

.page-hero p {
  font-size: 1.05rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.8;
  max-width: 640px;
}

/* Adjacent sections stack their vertical padding: 6rem bottom + 6rem top is
   192px of dead space before any per-page row padding is added. Halve the
   second one's top padding so consecutive bands read as a rhythm rather than
   a gap. */
.section + .section {
  padding-top: 3rem;
}

/* ── Section modifiers ────────────────────────────────────────────────────── */

.section-dark {
  background: var(--navy-deep);
}

.section-dark .section-title,
.section-dark h2,
.section-dark h3 {
  color: var(--white);
}

.section-dark .section-body,
.section-dark p {
  color: rgba(255, 255, 255, 0.65);
}

.section-white {
  background: var(--white);
}

.section-cream {
  background: var(--cream);
}

.section-subtitle {
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--text-light);
  margin-bottom: 3rem;
  max-width: 560px;
  line-height: 1.7;
}

/* Wider variant for pages that need more than the 900px reading column. */
.section-inner.is-wide {
  max-width: 1100px;
}

/* ── Cards: the generic form of .serve-card ───────────────────────────────── */
/* .serve-card is kept above for the pages that already use it. New markup
   should use .card / .card-grid. */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.card {
  background: var(--white);
  border: 1px solid rgba(27, 58, 92, 0.1);
  border-radius: 4px;
  padding: 1.8rem 1.5rem;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(27, 58, 92, 0.12);
}

.card:hover::before {
  transform: scaleX(1);
}

.card-icon {
  width: 40px;
  height: 40px;
  background: rgba(27, 58, 92, 0.06);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

/* Numbered variant, per the brand deck motif: a gold numeral in a circle.
   Replaces the unicode glyphs (U+2696, U+231B) that rendered as full-color
   emoji on Windows Chrome while their monochrome siblings did not. */
.card-icon.is-num {
  background: rgba(200, 146, 42, 0.1);
  border: 1px solid rgba(200, 146, 42, 0.35);
  border-radius: 50%;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--gold);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

.section-dark .card-icon.is-num {
  background: rgba(200, 146, 42, 0.14);
  border-color: rgba(200, 146, 42, 0.45);
  color: var(--gold-light);
}

.card h3 {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.5rem;
}

.card p {
  font-size: 0.875rem;
  color: var(--text-mid);
  line-height: 1.65;
}

/* Whole-card link — for the /services/ hub. */
a.card {
  display: block;
  text-decoration: none;
}

/* Price / duration line under a card heading, e.g. "Three weeks, $5,000".
   Sits between the h3 and the body copy so the commercial terms read before
   the description rather than being buried in it. */
.card .card-meta {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-light);
  margin-bottom: 0.7rem;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

.card.on-dark .card-meta {
  color: rgba(255, 255, 255, 0.45);
}

a.card .card-more {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gold);
}

a.card:hover .card-more {
  color: var(--navy);
}

.card.on-dark {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(200, 146, 42, 0.18);
}

.card.on-dark h3 {
  color: var(--white);
}

.card.on-dark p {
  color: rgba(255, 255, 255, 0.65);
}

/* ── Footer nav ───────────────────────────────────────────────────────────── */

.footer-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin-bottom: 1.75rem;
  list-style: none;
}

.footer-nav a {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-nav a:hover {
  color: var(--gold);
}

/* Tagline. Demoted out of the home page H1 in the July 2026 positioning work,
   where "Fractional CIO" became the lead. The footer is now the only place it
   appears verbatim, so it sits directly under the logo as part of the lockup.
   Class beats `footer p` on specificity, so no !important is needed. */
.footer-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.01em;
  margin: -0.25rem 0 1.6rem;
}

/* Brand-confusion disclaimer. Deliberately quiet and site-wide. */
.footer-disclaimer {
  max-width: 620px;
  margin: 1.5rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.68rem !important;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.22) !important;
}

/* ── Prose helper, for the narrative pages ────────────────────────────────── */

.prose p {
  font-size: 1.02rem;
  color: var(--text-mid);
  line-height: 1.85;
  margin-bottom: 1.4rem;
  max-width: 680px;
}

.prose h3 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--navy);
  margin: 2.75rem 0 0.9rem;
}

.prose ul {
  margin: 0 0 1.6rem 1.15rem;
  max-width: 680px;
}

.prose li {
  font-size: 1.02rem;
  color: var(--text-mid);
  line-height: 1.8;
  margin-bottom: 0.6rem;
  padding-left: 0.35rem;
}

.prose li::marker {
  color: var(--gold);
}

/* Available to screen readers, invisible on screen. Used for the empty corner
   cell of a comparison table, which needs a label but must not show one. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Skip link — the fixed nav makes keyboard nav painful without it ──────── */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--gold);
  color: var(--navy-deep);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

/* Anchor targets must clear the fixed nav. */
[id] {
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}

/* Respect the OS reduced-motion setting: kill reveals and hero entrance
   animations rather than leaving elements stuck at opacity 0. */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .hero-eyebrow,
  .hero h1,
  .hero-sub,
  .hero-actions,
  .scroll-hint {
    opacity: 1;
    animation: none;
  }
}