/*
Theme Name: The Finance Squad
Theme URI: https://thefinancesquad.com
Author: The Finance Squad
Author URI: https://thefinancesquad.com
Description: Custom theme for The Finance Squad — a plug-and-play finance team (bookkeeping through CFO) for growing businesses. Includes page templates for Home, Services, Industries, Results, About, and Contact.
Version: 1.0.0
License: Proprietary
Text Domain: the-finance-squad
*/

/* ==========================================================================
   The Finance Squad — Brand Design System
   Primary: #113D64 (navy) | Accent: #9C7A3C (brass) | Secondary: #a3a7ad / #ede7de
   Typeface: Arial (brand-mandated for digital/web; Georgia reserved for print)
   Signature motif: the ledger line + bar-chart mark, plus scroll-reveal,
   count-up stats, and a marquee — motion doing real work, not decoration.
   ========================================================================== */

:root {
  --navy: #113D64;
  --navy-deep: #0a2842;
  --accent: #9C7A3C;
  --accent-deep: #7d6230;
  --accent-bronze: #5c4820;
  --accent-light: #d4b878;
  --slate: #a3a7ad;
  --slate-dark: #5c6066;
  --body-text: #2b2e33;
  --cream: #ede7de;
  --white: #ffffff;
  --ink: #16232f;

  --font-display: Arial, Helvetica, sans-serif;
  --font-ui: Arial, Helvetica, sans-serif;

  --rule: 1px solid rgba(17, 61, 100, 0.14);
  --rule-light: 1px solid rgba(255, 255, 255, 0.22);

  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 160px; }

body {
  margin: 0;
  font-family: var(--font-display);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- Typography scale ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; font-weight: 700; color: var(--navy); }
h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1.04; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.2; }
h3 { font-size: 1.25rem; line-height: 1.35; font-weight: 700; }
p { margin: 0 0 1em; color: var(--body-text); }
.lede { font-size: 1.2rem; color: var(--ink); line-height: 1.55; font-weight: 400; }
.accent-text { color: var(--accent); }
.hero h1 .accent-text { color: #d4b878; }

.eyebrow {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  display: block;
  margin-bottom: 14px;
}
.section-navy .eyebrow { color: rgba(255,255,255,0.75); }
.hero .eyebrow, .page-hero .eyebrow { color: rgba(255,255,255,0.75); }
.hero p.lede, .page-hero p.lede { color: rgba(255,255,255,0.82); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  padding: 16px 32px;
  border: 1px solid var(--navy);
  border-radius: 3px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--navy);
}
.main-nav a:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}
.btn-solid { background: var(--navy); color: var(--white); }
.btn-solid:hover { background: var(--navy-deep); border-color: var(--navy-deep); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(10,40,66,0.25); }
.btn-outline { background: transparent; color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--white); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(10,40,66,0.16); }
.btn-outline-white { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.55); }
.btn-outline-white:hover { background: var(--white); color: var(--navy); border-color: var(--white); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,0.2); }
.btn-accent { background: var(--accent-bronze); color: var(--white); border-color: var(--accent-bronze); }
.btn-accent:hover { background: var(--navy-deep); border-color: var(--navy-deep); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(10,40,66,0.3); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--white);
  border-bottom: var(--rule);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 92px;
}
.logo-mark { height: 76px; }
.main-nav { display: flex; align-items: center; gap: 22px; }
.main-nav a {
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  position: relative;
  padding: 4px 0;
}
.main-nav a.btn { color: var(--white); }
.main-nav a.btn-outline { color: var(--navy); }
.main-nav a.active,
.main-nav a:hover { color: var(--navy); }
.main-nav a.active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  border-bottom: 2px solid var(--accent);
}
.nav-cta { margin-left: 8px; }
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--navy);
  color: var(--navy);
  font-size: 1.3rem;
  line-height: 1;
  padding: 10px 14px;
  cursor: pointer;
}

@media (max-width: 1040px) {
  .nav-toggle { display: block; }
  .nav-cta { margin-left: 0; }
  .main-nav a.active::after { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  background: var(--navy);
  color: var(--white);
  position: relative;
  overflow: hidden;
  padding: 92px 0 80px;
}
.hero .shield-watermark {
  position: absolute;
  right: -80px; top: 50%;
  transform: translateY(calc(-50% + var(--parallax-offset, 0px)));
  width: 560px; opacity: 0.07;
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 2; }
.hero-inner { max-width: 960px; }
.hero-actions { display: flex; gap: 16px; margin-top: 36px; flex-wrap: wrap; }
.hero h1 { color: var(--white); }
.hero-risk-reducer {
  color: rgba(255,255,255,0.62);
  font-size: 0.88rem;
  margin-top: 16px;
  margin-bottom: 0;
}

/* Page header for interior pages */
.page-hero {
  background: var(--navy);
  color: var(--white);
  padding: 72px 0 56px;
  position: relative;
  overflow: hidden;
}
.page-hero .shield-watermark {
  position: absolute; right: -60px; top: -40px; width: 320px; opacity: 0.08;
  transform: translateY(var(--parallax-offset, 0px));
}
.page-hero h1 { color: var(--white); }
.page-hero .wrap { position: relative; z-index: 2; }

/* ---------- Ledger rule / dot-leader stats (signature element) ---------- */
.ledger {
  border-top: var(--rule);
}
.ledger-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 26px 0;
  border-bottom: var(--rule);
  gap: 24px;
}
.ledger-row .label {
  font-weight: 600; color: var(--slate-dark);
  font-size: 1rem;
  min-width: 0;
}
.ledger-row .dots {
  flex: 1;
  min-width: 12px;
  border-bottom: 1px dotted rgba(19,60,96,0.35);
  margin-bottom: 6px;
}
.ledger-row .figure {
  font-size: 1.6rem;
  color: var(--navy);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .ledger-row { flex-wrap: wrap; row-gap: 6px; }
  .ledger-row .dots { display: none; flex-basis: 100%; }
  .ledger-row .figure { font-size: 1.2rem; }
}

.stat-strip {
  background: var(--navy-deep);
  padding: 0;
  position: relative;
  overflow: hidden;
}
.stat-strip .bar-motif {
  position: absolute;
  right: -40px; bottom: -30px;
  width: 340px;
  opacity: 0.10;
  pointer-events: none;
}
.stat-strip .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  z-index: 2;
}
.stat-cell {
  padding: 50px 28px;
  border-right: 1px solid rgba(255,255,255,0.14);
  text-align: left;
  min-width: 0;
}
.stat-cell:last-child { border-right: none; }
.stat-cell .figure {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--accent-light);
  display: block;
  font-variant-numeric: tabular-nums;
}
.stat-cell .caption {
  font-weight: 600;
  color: rgba(255,255,255,0.72);
  font-size: 0.92rem;
  margin-top: 8px;
}
@media (max-width: 760px) {
  .stat-strip .wrap { grid-template-columns: 1fr 1fr; }
  .stat-cell { border-bottom: 1px solid rgba(255,255,255,0.14); }
}

/* ---------- Section rhythm ---------- */
section { padding: 88px 0; }
.section-cream { background: var(--cream); }
.section-navy { background: var(--navy); color: var(--white); }
.section-navy h2, .section-navy h3 { color: var(--white); }
.section-navy p { color: rgba(255,255,255,0.78); }
.section-head { max-width: 640px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Grid / Cards ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; min-width: 0; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; min-width: 0; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; min-width: 0; }
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--white);
  border: var(--rule);
  border-radius: 4px;
  padding: 40px 34px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(17,61,100,0.10);
  border-color: rgba(156,122,60,0.4);
}
.card .icon { width: 34px; height: 34px; margin-bottom: 22px; color: var(--accent); }
.card h3 { margin-bottom: 12px; }
.card p:last-child { margin-bottom: 0; }
.card a.card-link { color: var(--navy); font-weight: 700; font-size: 0.94rem; }
.card a.card-link:hover { text-decoration: underline; }

/* Quote / voice block */
.voice-block {
  border-left: 2px solid var(--navy);
  padding-left: 32px;
  max-width: 760px;
}
.voice-block p.lede { font-weight: 400; }

/* ---------- Client snapshot teaser (Home) ---------- */
.snapshot-teaser { padding: 76px 0; }

/* ---------- CTA banner ---------- */
.cta-banner {
  background: var(--navy);
  color: var(--white);
  padding: 76px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner .shield-watermark {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  opacity: 0.07;
  pointer-events: none;
}
.cta-banner .wrap { position: relative; z-index: 2; }
.cta-banner h2 { color: var(--white); margin-bottom: 18px; }
.cta-banner p { color: rgba(255,255,255,0.78); max-width: 560px; margin: 0 auto 34px; }
.cta-banner .hero-actions { justify-content: center; }
@media (max-width: 480px) {
  .cta-banner .shield-watermark { width: 260px; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-deep);
  color: rgba(255,255,255,0.7);
  padding: 64px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: var(--rule-light);
}
.footer-grid h4 { color: var(--white); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 18px; font-weight: 700; }
.footer-grid a { display: block; color: rgba(255,255,255,0.7); font-size: 0.92rem; margin-bottom: 10px; }
.footer-grid a:hover { color: var(--white); }
.snapshot-disclaimer {
  font-size: 0.85rem;
  color: var(--slate-dark);
  font-style: italic;
}
.snapshot-frame {
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(17,61,100,0.16);
  border: 1px solid rgba(17,61,100,0.12);
  overflow: hidden;
}
.snapshot-frame img { display: block; width: 100%; height: auto; }
.footer-logo { height: 72px; margin-bottom: 18px; }
.footer-tag { max-width: 300px; font-size: 0.92rem; color: rgba(255,255,255,0.6); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 28px; font-size: 0.82rem; color: rgba(255,255,255,0.5);
  flex-wrap: wrap; gap: 12px;
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Forms (Contact page) ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.hp-field {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
}
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 0.85rem; font-weight: 700; color: var(--slate-dark); }
.form-field input, .form-field select, .form-field textarea {
  font-family: var(--font-ui);
  font-size: 1rem;
  padding: 13px 14px;
  border: var(--rule);
  border-radius: 2px;
  background: var(--white);
  color: var(--ink);
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
}
@media (max-width: 760px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ---------- Tier ladder (Bookkeeping -> Controller -> CFO) ---------- */
.ladder { display: flex; flex-direction: column; gap: 0; }
.ladder-rung {
  display: grid;
  grid-template-columns: 90px 1.1fr 1.4fr auto;
  gap: 28px;
  align-items: center;
  padding: 30px 28px;
  border: var(--rule);
  border-top: none;
  background: var(--white);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  position: relative;
  z-index: 1;
}
.ladder-rung:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(17,61,100,0.12);
  z-index: 2;
}
.ladder-rung:first-child { border-top: var(--rule); }
.ladder-rung .tier-num {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--navy);
}
.ladder-rung h3 { margin-bottom: 6px; }
.ladder-rung .signal {
  font-size: 0.92rem;
  color: var(--slate-dark);
  font-weight: 600;
}
.ladder-rung p { margin: 0; }
.ladder-rung .btn { white-space: nowrap; }
@media (max-width: 860px) {
  .ladder-rung { grid-template-columns: 1fr; text-align: left; gap: 12px; }
}

/* ---------- Differentiation (us vs. alternatives) ---------- */
.diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: var(--rule); }
.diff-grid-4 { grid-template-columns: repeat(4, 1fr); }
.diff-col { padding: 34px 30px; border-right: var(--rule); }
.diff-col:last-child { border-right: none; }
.diff-col.us { background: var(--navy); color: var(--white); border-top: 3px solid var(--accent); }
.diff-col.us h3 { color: var(--white); }
.diff-col.us p { color: rgba(255,255,255,0.82); }
.diff-col h3 { margin-bottom: 14px; font-size: 1.1rem; }
@media (max-width: 900px) {
  .diff-grid { grid-template-columns: 1fr; }
  .diff-grid-4 { grid-template-columns: 1fr 1fr; }
  .diff-col { border-right: none; border-bottom: var(--rule); }
}
@media (max-width: 560px) {
  .diff-grid-4 { grid-template-columns: 1fr; }
}

/* ---------- Values (operating principles) ---------- */
.value-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  padding: 28px 0;
  border-bottom: var(--rule);
}
.value-row:first-child { border-top: var(--rule); }
.value-row h3 { color: var(--navy); }
@media (max-width: 760px) {
  .value-row { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- Case study cards (Results page) ---------- */
.case-card {
  border: var(--rule);
  border-radius: 4px;
  padding: 36px;
  margin-bottom: 28px;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.case-card:hover { box-shadow: 0 16px 32px rgba(17,61,100,0.09); border-color: rgba(156,122,60,0.35); }
.case-card .case-tag {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--cream);
  display: inline-block;
  padding: 5px 12px;
  margin-bottom: 16px;
}
.case-card .case-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  margin-top: 18px;
}
.case-card .case-figures { border-left: var(--rule); padding-left: 32px; }
.case-figure { margin-bottom: 20px; }
.case-figure .num { font-size: 1.9rem; font-weight: 700; color: var(--navy); display: block; font-variant-numeric: tabular-nums; }
.case-figure .cap { font-size: 0.85rem; color: var(--slate-dark); font-weight: 600; }
@media (max-width: 860px) {
  .case-card .case-grid { grid-template-columns: 1fr; }
  .case-card .case-figures { border-left: none; padding-left: 0; border-top: var(--rule); padding-top: 20px; }
}

.inline-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--cream);
  border-radius: 4px;
  padding: 20px 28px;
  margin: 8px 0 28px;
}
.inline-cta span { font-weight: 700; color: var(--navy); font-size: 1rem; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item {
  padding: 26px 0;
  border-bottom: var(--rule);
}
.faq-item:first-child { border-top: var(--rule); }
.faq-item h3 { margin-bottom: 8px; font-size: 1.1rem; }
.faq-item p { margin: 0; }

/* Calendly-style primary CTA block */
.book-call-panel {
  background: var(--navy);
  color: var(--white);
  padding: 48px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.book-call-panel .shield-watermark {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  opacity: 0.07;
  pointer-events: none;
}
.book-call-panel > * { position: relative; z-index: 2; }
.book-call-panel h3 { color: var(--white); margin-bottom: 10px; }
.book-call-panel p { color: rgba(255,255,255,0.8); margin-bottom: 26px; }
@media (max-width: 480px) {
  .book-call-panel .shield-watermark { width: 220px; }
}

/* ---------- Pain check + proof strip ---------- */
.pain-check { padding-top: 70px; padding-bottom: 70px; }
.pain-item {
  background: var(--cream);
  border-radius: 4px;
  padding: 26px 24px;
  font-size: 1rem;
  color: var(--ink);
  font-style: italic;
  line-height: 1.5;
  border-left: 3px solid var(--accent);
}
.proof-strip {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--navy);
  color: var(--white);
  padding: 22px 30px;
  border-radius: 4px;
}
.proof-strip span { font-size: 0.98rem; }
.proof-strip strong { color: var(--accent-light); }
.proof-strip .btn { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); white-space: nowrap; }
.proof-strip .btn:hover { background: #fff; color: var(--navy); border-color: #fff; }

/* ---------- Industries ticker (marquee) ---------- */
.industries-ticker {
  background: var(--cream);
  padding: 22px 0;
}
.ticker-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 32px;
}
.tick-label {
  flex-shrink: 0;
  font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--navy);
}
.ticker-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.ticker-viewport::before, .ticker-viewport::after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2;
}
.ticker-viewport::before { left: 0; background: linear-gradient(90deg, var(--cream), rgba(237,231,222,0)); }
.ticker-viewport::after { right: 0; background: linear-gradient(270deg, var(--cream), rgba(237,231,222,0)); }
.industries-track {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  animation: tickerScroll 28s linear infinite;
  will-change: transform;
}
.industries-ticker:hover .industries-track { animation-play-state: paused; }
.tick-item { color: var(--slate-dark); font-size: 0.95rem; }
.tick-dot { color: var(--accent); }
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Scroll reveal (progressive enhancement) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .industries-track { animation: none !important; }
}

/* ---------- Sticky "Book a Call" bar ---------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  background: var(--navy-deep);
  color: var(--white);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  transform: translateY(110%);
  transition: transform 0.35s ease;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.18);
}
.sticky-cta.is-shown { transform: translateY(0); }
.sticky-cta span { font-size: 0.95rem; }
.sticky-cta .btn { padding: 10px 22px; font-size: 0.88rem; }
.sticky-cta .sticky-close {
  background: none; border: none; color: rgba(255,255,255,0.6);
  font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 4px 8px;
}
.sticky-cta .sticky-close:hover { color: #fff; }
@media (max-width: 640px) {
  .sticky-cta { gap: 12px; }
  .sticky-cta span { display: none; }
}

/* ---------- Animated mobile nav ---------- */
@media (max-width: 1040px) {
  .main-nav {
    display: flex;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.32s ease, opacity 0.25s ease;
    position: absolute;
    top: 92px; left: 0; right: 0;
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 0 32px;
    border-bottom: var(--rule);
    box-shadow: 0 12px 24px rgba(0,0,0,0.06);
  }
  .main-nav.open {
    max-height: calc(100vh - 92px);
    opacity: 1;
    padding: 12px 32px 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .main-nav a { padding: 12px 0; font-size: 1.02rem; }
  .main-nav a.btn { text-align: center; }
  .nav-cta { margin-top: 10px; width: 100%; }
  body.nav-open { overflow: hidden; }
}

/* ---------- Form field validation states ---------- */
.form-field.field-invalid input,
.form-field.field-invalid select,
.form-field.field-invalid textarea {
  border-color: #b3452c;
  box-shadow: 0 0 0 1px #b3452c;
}
.form-field .field-error {
  display: none;
  color: #b3452c;
  font-size: 0.8rem;
  font-weight: 700;
}
.form-field.field-invalid .field-error { display: block; }
.form-success {
  display: none;
  border: 1px solid rgba(17,61,100,0.2);
  background: var(--cream);
  padding: 32px 30px;
  border-radius: 4px;
  text-align: center;
}
.form-success.is-shown { display: block; }
.form-success h3 { margin-bottom: 8px; }
.form-success p { margin: 0; }
.success-check { display: block; margin: 0 auto 14px; }
.success-check-circle {
  stroke: var(--navy);
  stroke-width: 2;
  stroke-dasharray: 152;
  stroke-dashoffset: 152;
}
.success-check-mark {
  stroke: var(--accent-deep);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
}
.form-success.is-shown .success-check-circle {
  animation: tfsDrawCircle 0.5s ease forwards;
}
.form-success.is-shown .success-check-mark {
  animation: tfsDrawCheck 0.35s ease 0.45s forwards;
}
@keyframes tfsDrawCircle { to { stroke-dashoffset: 0; } }
@keyframes tfsDrawCheck { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .success-check-circle, .success-check-mark { animation: none !important; stroke-dashoffset: 0 !important; }
}

/* ---------- Tier-fit quiz (Home) ---------- */
.quiz-box {
  max-width: 640px;
  margin: 0 auto;
  background: var(--cream);
  border-radius: 8px;
  padding: 40px 44px;
}
.quiz-q-text {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 20px;
  text-align: center;
}
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.quiz-option {
  font-family: var(--font-ui);
  font-size: 0.98rem;
  text-align: left;
  background: var(--white);
  border: 1px solid rgba(17,61,100,0.18);
  border-radius: 6px;
  padding: 16px 20px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.quiz-option:hover {
  border-color: var(--navy);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(17,61,100,0.10);
}
.quiz-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}
.quiz-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(17,61,100,0.2);
}
.quiz-dot.active { background: var(--navy); }
.quiz-result { text-align: center; }
.quiz-result h3 { font-size: 1.6rem; margin-bottom: 12px; }
.quiz-result p { max-width: 480px; margin-left: auto; margin-right: auto; }
.quiz-result-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap;
}
@media (max-width: 560px) {
  .quiz-box { padding: 30px 24px; }
}

/* ---------- Sample P&L snippet (Services) ---------- */
.pl-snippet {
  max-width: 560px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid rgba(17,61,100,0.16);
  border-radius: 8px;
  padding: 32px 36px 28px;
  position: relative;
}
.pl-snippet-label {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.pl-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 2px solid var(--navy);
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.pl-header span:first-child { font-weight: 700; color: var(--navy); font-size: 1.05rem; }
.pl-header span:last-child { font-size: 0.82rem; color: var(--slate-dark); }
.pl-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  font-size: 0.95rem;
}
.pl-label { color: var(--body-text); }
.pl-figure { font-variant-numeric: tabular-nums; color: var(--body-text); }
.pl-sub .pl-label, .pl-sub .pl-figure { padding-left: 4px; color: var(--slate-dark); }
.pl-pct { font-size: 0.8rem; color: var(--slate-dark); font-weight: 400; }
.pl-total {
  border-top: 1px solid rgba(17,61,100,0.18);
  margin-top: 4px;
  font-weight: 700;
}
.pl-total .pl-label, .pl-total .pl-figure { color: var(--navy); }
.pl-net {
  background: var(--cream);
  margin: 10px -36px -28px;
  padding: 16px 36px;
  border-radius: 0 0 8px 8px;
  font-weight: 700;
  font-size: 1.1rem;
}
.pl-net .pl-label, .pl-net .pl-figure { color: var(--navy); }
@media (max-width: 480px) {
  .pl-snippet { padding: 28px 22px 24px; }
  .pl-net { margin: 10px -22px -24px; padding: 14px 22px; }
}

.form-error-banner {
  border: 1px solid rgba(226,75,74,0.35);
  background: #fbebea;
  color: #791f1f;
  padding: 16px 20px;
  border-radius: 4px;
  font-size: 0.92rem;
  margin-bottom: 24px;
}
.form-error-banner a { text-decoration: underline; color: #791f1f; }

/* Utility */
.mt-0 { margin-top: 0; }
.center { text-align: center; }

/* ---------- Services page jump-nav ---------- */
.services-jumpnav {
  position: sticky;
  top: 92px;
  z-index: 40;
  background: var(--white);
  border-bottom: var(--rule);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.jumpnav-track {
  display: inline-flex;
  gap: 8px;
  padding: 12px 32px;
  white-space: nowrap;
}
.jumpnav-pill {
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(17,61,100,0.2);
  color: var(--navy);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.jumpnav-pill:hover { background: var(--cream); }
.jumpnav-pill.active { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* ---------- Mobile refinements (comprehensive pass) ---------- */

/* Section rhythm: 88px top/bottom is a lot of scroll distance on a phone.
   Scale it down progressively instead of keeping desktop spacing everywhere. */
@media (max-width: 780px) {
  section { padding: 56px 0; }
  .hero { padding: 64px 0 48px; }
  .page-hero { padding: 56px 0 40px; }
  .cta-banner { padding: 56px 0; }
  .snapshot-teaser { padding: 56px 0; }
  .pain-check { padding-top: 48px; padding-bottom: 48px; }
  .book-call-panel { padding: 36px 24px; }
  .section-head { margin-bottom: 36px; }
}
@media (max-width: 480px) {
  section { padding: 44px 0; }
  .hero { padding: 52px 0 40px; }
  .page-hero { padding: 44px 0 32px; }
  .cta-banner { padding: 44px 0; }
  .snapshot-teaser { padding: 44px 0; }
}

/* Tighter side padding on narrow phones so content has more breathing room. */
@media (max-width: 480px) {
  .wrap { padding: 0 20px; }
  .services-jumpnav .jumpnav-track { padding: 12px 20px; }
  .card, .case-card { padding: 28px 22px; }
  .diff-col { padding: 26px 22px; }
  .book-call-panel { padding: 32px 20px; }
}

/* Primary CTA button pairs: stack full-width on phones instead of wrapping
   into two uneven-width buttons side by side. */
@media (max-width: 480px) {
  .hero-actions, .quiz-result-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn, .quiz-result-actions .btn { width: 100%; text-align: center; }
  .proof-strip { flex-direction: column; align-items: stretch; text-align: center; }
  .proof-strip .btn { width: 100%; text-align: center; }
}

/* Stat strip and footer grid: readable single column once two columns
   would otherwise squeeze captions/links too tight to read comfortably. */
@media (max-width: 480px) {
  .stat-strip .wrap { grid-template-columns: 1fr; }
  .stat-cell { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.14); }
  .stat-cell:last-child { border-bottom: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* Business Snapshot mockup: it's a dense image (stat rows + 4 charts) built
   to be read at roughly its native scale. Shrinking it to phone width makes
   every number and chart label illegible, so below the point where it would
   get too small, let it scroll horizontally at a legible min-width instead
   of scaling all the way down \u2014 same pattern already used for the
   services jump-nav. */
.snapshot-scroll-hint {
  display: none;
  font-size: 0.78rem;
  color: var(--slate-dark);
  text-align: center;
  margin: 10px 0 0;
}
@media (max-width: 700px) {
  .snapshot-frame {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .snapshot-frame img {
    width: auto;
    max-width: none;
    min-width: 640px;
    height: auto;
  }
  .snapshot-scroll-hint { display: block; }
}