/*
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 {
  --neg-red: #a02c22;
  --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: 175px; }

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;
  position: relative;
  z-index: 1;
}

/* ---------- Typography scale ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; font-weight: 700; color: var(--navy); }
h1 { font-size: clamp(2.7rem, 5.6vw, 5rem); line-height: 1.02; letter-spacing: -0.022em; }
h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.16; letter-spacing: -0.012em; }
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; }
.result-line {
  margin-top: 18px;
  padding-left: 16px;
  border-left: 3px solid var(--accent);
  color: var(--ink);
}
.result-line strong { color: var(--navy); }
.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); }

/* ---------- Service section icons ---------- */
.service-icon-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.service-icon-row .eyebrow { margin-bottom: 0; }
.service-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: var(--cream);
  border-radius: 50%;
  padding: 8px;
  box-sizing: border-box;
}
.section-cream .service-icon { background: var(--white); }
.card > .service-icon { display: block; margin-bottom: 18px; }

/* ---------- 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(--navy); color: var(--white); border-color: var(--navy); }
.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: 192px;
  transition: height 0.25s ease;
}
/* Logo files are now trimmed to the visible mark (the originals carried
   57% empty canvas padding, which made the mark render ~44px tall inside
   an invisible 125px box -- the source of the "stretched / misaligned"
   look). Heights below are chosen so the visible mark occupies the same
   optical size as before, now crisp and properly centered. max-width is
   released so no flex context can ever squeeze it out of proportion. */
.logo-mark { height: 148px; width: auto; max-width: none; transition: height 0.25s ease; }
.site-header.is-scrolled .wrap { height: 104px; }
.site-header.is-scrolled .logo-mark { height: 72px; }
.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: -30px; top: 50%;
  transform: translateY(calc(-50% + var(--parallax-offset, 0px)));
  width: 749px; 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 {
  /* Watermark, not clipart: large enough to read as architecture, bleeding
     off the right edge and vertically centered, same treatment as Home. */
  position: absolute;
  right: -170px;
  top: 50%;
  width: 620px;
  height: auto;
  opacity: 0.07;
  transform: translateY(calc(-50% + var(--parallax-offset, 0px)));
}
@media (max-width: 760px) {
  .page-hero .shield-watermark { width: 420px; right: -150px; }
}
.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 { align-items: flex-start; gap: 12px; }
  .ledger-row .label { flex: 1 1 auto; }
  .ledger-row .dots { display: none; }
  .ledger-row .figure { flex: 0 0 auto; 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 { overflow: hidden; }
.cta-banner .shield-watermark {
  /* Centered behind the message, large. Charlie's call: this banner is
     the one place the shield sits behind the words, not off the edge. */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 560px;
  height: auto;
  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.92); max-width: 560px; margin: 0 auto 34px; }
.cta-banner .hero-actions { justify-content: center; }
@media (max-width: 480px) {
  .cta-banner .shield-watermark { width: 340px; }
}

/* ---------- 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; }
.snapshot-pdf-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;
  height: 80vh;
  min-height: 500px;
}
.snapshot-pdf-frame iframe { width: 100%; height: 100%; border: none; display: block; }
.password-gate { max-width: 420px; padding: 40px 0 80px; }
.password-gate form.post-password-form p { margin-bottom: 16px; color: var(--ink); }
.password-gate form.post-password-form label { display: flex; flex-direction: column; gap: 8px; font-size: 0.92rem; font-weight: 700; color: var(--ink); }
.password-gate form.post-password-form input[type="password"] {
  font-family: var(--font-ui);
  font-size: 1rem;
  padding: 12px 14px;
  border: var(--rule);
  border-radius: 2px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
}
.password-gate form.post-password-form input[type="submit"] {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  padding: 14px 28px;
  margin-top: 16px;
  border: 1px solid var(--navy);
  border-radius: 3px;
  background: var(--navy);
  color: var(--white);
  cursor: pointer;
}
.footer-logo { height: 46px; width: auto; max-width: none; 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;
}
.case-icon-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.case-icon { width: 30px; height: 30px; flex-shrink: 0; }
.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;
}
@media (hover: hover) {
  .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: 104px; 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; }

/* Center every form's submit button and give it real breathing room
   from the section boundary below it, rather than the button sitting
   flush-left (the default for an inline-block element with no explicit
   alignment) right up against the end of the section. Applies to the
   Contact/Assessment form and all five unlisted internal-tool forms. */
form button[type="submit"] {
  display: block;
  margin: 28px auto 16px;
}

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

/* ---------- Services page jump-nav ---------- */
.services-jumpnav {
  position: sticky;
  top: 104px;
  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: 3px;
  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; }
}

/* ---------- How It Works process timeline (Home) ---------- */
.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  position: relative;
  margin-top: 12px;
}
.process-steps::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: rgba(17,61,100,0.16);
  z-index: 1;
}
.process-step {
  position: relative;
  text-align: center;
}
.process-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1.1rem;
  position: relative;
  z-index: 2;
}
.process-step h3 { font-size: 1.05rem; margin-bottom: 8px; }
.process-step p { font-size: 0.92rem; color: var(--slate-dark); margin: 0; }
@media (max-width: 760px) {
  .process-steps { grid-template-columns: 1fr; gap: 26px; }
  .process-steps::before { display: none; }
  .process-step { display: flex; align-items: flex-start; gap: 16px; text-align: left; }
  .process-num { margin: 0; flex-shrink: 0; }
}

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--navy);
  z-index: 100;
  transition: width 0.1s linear;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { transition: none; }
}

/* ---------- Mini sparkline illustration (About page) ---------- */
.mini-sparkline-wrap {
  margin: 4px 0 22px;
  max-width: 260px;
}
.mini-sparkline { display: block; width: 100%; height: auto; }
.mini-sparkline-caption {
  display: block;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--slate-dark);
  margin-top: 6px;
}

/* ---------- Cost calculator (Home) ---------- */
.calc-box {
  max-width: 760px;
  margin: 0 auto;
  background: var(--white);
  border: var(--rule);
  border-radius: 6px;
  padding: 40px 44px;
  box-shadow: 0 20px 50px rgba(17,61,100,0.08);
}
.calc-inputs { display: flex; flex-direction: column; gap: 30px; margin-bottom: 34px; }
.calc-field-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 12px;
}
.calc-field-head span:first-child { font-size: 0.95rem; color: var(--ink); font-weight: 600; }
.calc-value {
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.calc-field input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--cream);
  outline: none;
  cursor: pointer;
}
.calc-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--navy);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 1px rgba(17,61,100,0.3);
  cursor: pointer;
}
.calc-field input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--navy);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 1px rgba(17,61,100,0.3);
  cursor: pointer;
}
.calc-result {
  text-align: center;
  border-top: var(--rule);
  padding-top: 30px;
}
.calc-result-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-dark);
  margin-bottom: 8px;
}
.calc-result-figure {
  display: block;
  font-family: var(--font-ui);
  font-size: 3rem;
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.calc-result-note {
  max-width: 460px;
  margin: 10px auto 24px;
  color: var(--slate-dark);
  font-size: 0.95rem;
}
@media (max-width: 560px) {
  .calc-box { padding: 30px 24px; }
  .calc-result-figure { font-size: 2.3rem; }
  .calc-field-head { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ---------- M&A readiness animated diagram (Services) ---------- */
.ma-diagram-wrap {
  margin-top: 48px;
  padding-top: 40px;
  border-top: var(--rule);
}
.ma-diagram-label {
  display: block;
  text-align: center;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 30px;
}
.ma-diagram {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}
.ma-diagram::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: rgba(17,61,100,0.16);
  z-index: 1;
}
.ma-stage {
  position: relative;
  z-index: 2;
  text-align: center;
  flex: 1;
  padding: 0 6px;
}
.ma-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--white);
  box-sizing: border-box;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.ma-icon svg { width: 26px; height: 26px; }
.ma-icon-warn { color: var(--accent-deep); border: 2px solid var(--accent-deep); }
.ma-icon-check { color: var(--slate); border: 2px solid var(--slate); }
.ma-check-path {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  transition: stroke-dashoffset 0.5s ease;
}
.ma-icon-check.ma-visible { color: var(--navy); border-color: var(--navy); }
.ma-icon-check.ma-visible .ma-check-path { stroke-dashoffset: 0; }
.ma-icon-success.ma-visible { color: var(--white); background: var(--navy); border-color: var(--navy); }
.ma-stage:nth-child(2) .ma-icon-check { transition-delay: 0.1s; }
.ma-stage:nth-child(2) .ma-check-path { transition-delay: 0.15s; }
.ma-stage:nth-child(3) .ma-icon-check { transition-delay: 0.4s; }
.ma-stage:nth-child(3) .ma-check-path { transition-delay: 0.45s; }
.ma-stage:nth-child(4) .ma-icon-check { transition-delay: 0.7s; }
.ma-stage:nth-child(4) .ma-check-path { transition-delay: 0.75s; }
.ma-stage-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .ma-icon, .ma-check-path { transition: none !important; }
}
@media (max-width: 640px) {
  .ma-diagram { flex-direction: column; align-items: stretch; max-width: 100%; }
  .ma-diagram::before { display: none; }
  .ma-stage { display: flex; align-items: center; gap: 14px; text-align: left; padding: 10px 0; }
  .ma-icon { margin: 0; flex-shrink: 0; }
}

/* ---------- Faint shield watermark for light/white sections ---------- */
.light-watermark-section {
  position: relative;
  overflow: hidden;
}
.light-watermark-section .shield-watermark-light {
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
  width: 749px;
  opacity: 0.13;
  pointer-events: none;
  z-index: 0;
}
.light-watermark-section > .wrap { position: relative; z-index: 1; }
@media (max-width: 760px) {
  .light-watermark-section .shield-watermark-light { width: 408px; right: -15px; }
}

/* ---------- Services carousel (Home) ---------- */
.carousel-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}
.carousel-viewport {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carousel-viewport::-webkit-scrollbar { display: none; }
.carousel-track {
  display: flex;
  gap: 24px;
  padding: 4px 4px 12px;
}
.carousel-card {
  scroll-snap-align: start;
  flex: 0 0 calc(33.333% - 16px);
  box-sizing: border-box;
  background: var(--white);
  border: var(--rule);
  border-radius: 6px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.carousel-card:hover { box-shadow: 0 16px 32px rgba(17,61,100,0.09); border-color: rgba(156,122,60,0.35); }
.carousel-card .service-icon { margin-bottom: 6px; }
.carousel-card .eyebrow { margin-top: 10px; }
.carousel-card h3 { font-size: 1.1rem; margin: 6px 0 10px; }
.carousel-card p { font-size: 0.92rem; color: var(--slate-dark); flex: 1; margin-bottom: 18px; }
.carousel-arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(17,61,100,0.2);
  background: var(--white);
  color: var(--navy);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.carousel-arrow:hover { background: var(--navy); color: var(--white); }
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: rgba(17,61,100,0.2);
  cursor: pointer;
  transition: width 0.2s ease, background 0.2s ease;
}
.carousel-dot.active { width: 22px; background: var(--navy); }
@media (max-width: 900px) {
  .carousel-card { flex: 0 0 78%; }
}
@media (max-width: 760px) {
  .carousel-arrow { display: none; }
}
@media (max-width: 560px) {
  .carousel-card { flex: 0 0 86%; padding: 26px 22px; }
}

/* ---------- Close Date Guarantee (Home, dedicated section) ---------- */
.guarantee-box {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 8px;
  padding: 48px 52px;
  position: relative;
  z-index: 1;
}
.guarantee-icon-badge {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
}
.guarantee-icon-badge svg { width: 34px; height: 34px; }
.guarantee-box .eyebrow { display: block; }
.guarantee-box h2 { margin-bottom: 14px; }
.guarantee-box p {
  color: var(--slate-dark);
  max-width: 480px;
  margin: 0 auto 26px;
}
@media (max-width: 560px) {
  .guarantee-box { padding: 34px 26px; }
}

/* ---------- De-emphasized CPA/bank referral note ---------- */
.cpa-partner-note {
  margin-top: 24px;
  font-size: 0.92rem;
  color: var(--slate-dark);
  text-align: center;
}
.cpa-partner-note a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
}

/* ---------- Onboarding questionnaire (unlisted page) ---------- */
.qf-section {
  padding: 40px 0;
  border-top: var(--rule);
}
.qf-section:first-child { border-top: none; padding-top: 0; }
.qf-section h2 {
  font-size: 1.3rem;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.qf-section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 700;
  flex-shrink: 0;
}
.qf-section-intro {
  color: var(--slate-dark);
  font-style: italic;
  margin-bottom: 28px;
  max-width: 620px;
}
.qf-required-note {
  font-size: 0.88rem;
  color: var(--slate-dark);
  background: var(--cream);
  border-radius: 4px;
  padding: 12px 16px;
  margin-bottom: 32px;
}
.qf-required { color: #b3261e; font-weight: 700; }
.qf-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.qf-field:last-child { margin-bottom: 0; }
.qf-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 22px;
}
.qf-field-row .qf-field { margin-bottom: 0; }
@media (max-width: 640px) {
  .qf-field-row { grid-template-columns: 1fr; gap: 22px; }
}
.qf-label { font-size: 0.92rem; font-weight: 700; color: var(--ink); }
.qf-hint { font-size: 0.82rem; color: var(--slate-dark); font-style: italic; margin-top: -4px; }
.qf-field input[type="text"],
.qf-field input[type="date"],
.qf-field select,
.qf-field textarea {
  font-family: var(--font-ui);
  font-size: 1rem;
  padding: 12px 14px;
  border: var(--rule);
  border-radius: 4px;
  background: var(--white);
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}
.qf-field textarea { resize: vertical; min-height: 76px; }
.qf-field input:focus, .qf-field select:focus, .qf-field textarea:focus {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
}
.qf-radio-group { display: flex; flex-direction: column; gap: 10px; }
.qf-radio {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--ink);
  cursor: pointer;
  border: 1.5px solid rgba(17,61,100,0.16);
  border-radius: 6px;
  padding: 13px 16px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.qf-radio:hover { border-color: rgba(17,61,100,0.4); }
.qf-radio input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--navy);
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
}
.qf-radio:has(input:checked) {
  border-color: var(--navy);
  background: rgba(17,61,100,0.05);
}
.qf-radio:has(input:checked) span { font-weight: 700; color: var(--navy); }
.qf-field.field-invalid input,
.qf-field.field-invalid select,
.qf-field.field-invalid textarea {
  border-color: #b3261e;
}
.qf-field .field-error {
  display: none;
  font-size: 0.82rem;
  color: #b3261e;
}
.qf-field.field-invalid .field-error { display: block; }

/* ---------- Fixed background wordmark (every page, via header.php) ---------- */
/* Same fixed-position + mix-blend-mode technique tried before with a
   graphic, now with plain stacked text instead. Text has a genuinely
   transparent background by nature (no opaque-PNG problem to solve),
   so this is technically simpler than the shield attempt -- but it
   still carries the same core risk: a single fixed element crossing
   navy, cream, and white sections as the page scrolls. Kept the
   opacity conservative for that reason.

   Font: Playfair Display, loaded via Google Fonts (see
   tfs_enqueue_assets() in functions.php, scoped to Home only) to match
   the actual logo's serif wordmark. This is a DELIBERATE, ONE-OFF
   exception to the site's "Arial/Helvetica only on the web" rule --
   every real heading and body of text on the site stays Arial/
   Helvetica. Do not extend this font to any other element. */
.fixed-text-watermark {
  position: fixed;
  top: 50%;
  left: 100px;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0.06;
  /* The wordmark is an inline-SVG asset (Playfair Display Bold converted
     to vector paths), so the site makes zero external font requests.
     font-size still drives the scale: the image height is 3.3em, matching
     the old three-line text block, so the existing media queries below
     keep working untouched. */
  font-size: 6.6rem;
}
.fixed-text-watermark img { display: block; height: 3.633em; width: auto; }
@media (max-width: 1100px) {
  .fixed-text-watermark { font-size: 4.32rem; left: 60px; }
}
@media (max-width: 900px) {
  .fixed-text-watermark { display: none; }
}

/* ==========================================================================
   Spreadsheet Olympics (standalone public event page)
   Deliberately more energetic than the rest of the site -- bigger type,
   bolder color use -- but built entirely from the existing brand palette
   (accent-light reads as gold, slate as silver, accent-bronze as bronze)
   rather than introducing new colors, so it still feels like this company
   made it.
   ========================================================================== */

.oly-hero {
  background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 60%);
  color: var(--white);
  padding: 100px 0 90px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.oly-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.oly-hero .wrap { position: relative; z-index: 1; }
.oly-eyebrow {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 18px;
}
.oly-h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.03;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 20px;
}
.oly-h1 .oly-gold { color: var(--accent-light); }
.oly-tagline {
  font-size: 1.25rem;
  color: rgba(255,255,255,0.85);
  max-width: 600px;
  margin: 0 auto 36px;
  line-height: 1.5;
}
.oly-countdown {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 0 auto 40px;
  flex-wrap: wrap;
}
.oly-countdown-cell {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  padding: 16px 20px;
  min-width: 84px;
}
.oly-countdown-num {
  display: block;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 2.1rem;
  color: var(--accent-light);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.oly-countdown-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-top: 6px;
}
.oly-hero-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.oly-btn-gold {
  display: inline-block;
  background: var(--accent-light);
  color: var(--navy-deep);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1rem;
  padding: 17px 36px;
  border-radius: 4px;
  border: 1px solid var(--accent-light);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.oly-btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(212,184,120,0.35); }

/* How it works strip */
.oly-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 40px;
}
.oly-step { text-align: center; }
.oly-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--accent-light);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1.25rem;
}
.oly-step h3 { font-size: 1.05rem; margin-bottom: 8px; }
.oly-step p { font-size: 0.9rem; color: var(--slate-dark); }

/* Medal cards */
.oly-medals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.oly-medal-card {
  border-radius: 8px;
  padding: 36px 28px;
  text-align: center;
  border: 2px solid;
}
.oly-medal-card.gold { border-color: var(--accent-light); background: rgba(212,184,120,0.08); }
.oly-medal-card.silver { border-color: var(--slate); background: rgba(163,167,173,0.1); }
.oly-medal-card.bronze { border-color: var(--accent-bronze); background: rgba(92,72,32,0.06); }
.oly-medal-icon { font-size: 2.4rem; margin-bottom: 12px; display: block; }
.oly-medal-card h3 { margin-bottom: 10px; }
.oly-medal-card p { color: var(--slate-dark); font-size: 0.95rem; }

/* Toggle: individual vs company */
.oly-type-toggle {
  display: flex;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto 36px;
}
.oly-type-btn {
  flex: 1;
  text-align: center;
  padding: 18px 16px;
  border: 2px solid rgba(17,61,100,0.18);
  border-radius: 8px;
  background: var(--white);
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--navy);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.oly-type-btn.active { border-color: var(--navy); background: var(--navy); color: var(--white); }
.oly-type-btn .oly-type-price { display: block; font-size: 0.82rem; font-weight: 400; margin-top: 4px; opacity: 0.8; }

/* Team roster (dynamic rows) */
.oly-roster { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.oly-roster-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  align-items: start;
}
.oly-roster-row input {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  padding: 11px 13px;
  border: var(--rule);
  border-radius: 4px;
}
.oly-roster-remove {
  background: none;
  border: 1px solid rgba(226,75,74,0.4);
  color: #b3261e;
  border-radius: 4px;
  width: 40px;
  height: 42px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
.oly-roster-add {
  align-self: flex-start;
  background: var(--cream);
  border: 1px dashed rgba(17,61,100,0.3);
  color: var(--navy);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 12px 20px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 4px;
}
.oly-roster-add:hover { background: var(--white); border-color: var(--navy); }

.oly-price-display {
  text-align: center;
  background: var(--navy);
  color: var(--white);
  border-radius: 8px;
  padding: 28px;
  margin: 32px 0;
}
.oly-price-display .oly-price-figure {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--accent-light);
  display: block;
}
.oly-price-display .oly-price-note { font-size: 0.85rem; color: rgba(255,255,255,0.7); margin-top: 6px; }

.oly-success {
  display: none;
  text-align: center;
  padding: 50px 20px;
}
.oly-success.is-shown { display: block; }
.oly-confetti-burst { position: relative; height: 60px; margin-bottom: 10px; }
.oly-confetti-burst span {
  position: absolute;
  top: 30px; left: 50%;
  width: 10px; height: 10px;
  opacity: 0;
}
.oly-confetti-burst.play span { animation: oly-confetti 0.9s ease-out forwards; }
@keyframes oly-confetti {
  0% { opacity: 1; transform: translate(-50%, 0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--tr)) scale(0.6); }
}

@media (max-width: 900px) {
  .oly-steps { grid-template-columns: 1fr 1fr; }
  .oly-medals { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .oly-steps { grid-template-columns: 1fr; }
  .oly-type-toggle { flex-direction: column; }
  .oly-roster-row { grid-template-columns: 1fr; }
  .oly-roster-remove { width: 100%; }
  .oly-countdown-cell { min-width: 68px; padding: 12px 14px; }
  .oly-countdown-num { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .oly-confetti-burst.play span { animation: none; opacity: 0; }
}

/* ==========================================================================
   Polish layer — restrained "signature detail" pass (Aug 2026)
   Every animated touch here is gated behind prefers-reduced-motion and
   every text color respects the site's contrast rules (navy for readable
   text on light backgrounds; accent reserved for decoration and dark
   backgrounds). Nothing in this block changes layout or copy.
   ========================================================================== */

/* Brand-colored text selection — a small detail people notice. */
::selection { background: var(--navy); color: var(--accent-light); }
::-moz-selection { background: var(--navy); color: var(--accent-light); }

/* Skip link: invisible until keyboard-focused, then a clean navy pill. */
.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 200;
  background: var(--navy);
  color: var(--white);
  padding: 10px 18px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.9rem;
  transition: top 0.15s ease;
}
.skip-link:focus-visible { top: 16px; outline: 2px solid var(--accent-light); outline-offset: 2px; }

/* White-on-navy CTA button (replaces the old inline-styled variant).
   Same look as before, now part of the design system. */
.btn-solid-white {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}
.btn-solid-white:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.22);
}

/* Sheen sweep on solid buttons: a soft band of light crosses the button
   once on hover. Subtle — visible, not flashy. */
.btn-solid, .btn-solid-white, .btn-accent {
  position: relative;
  overflow: hidden;
}
.btn-solid::after, .btn-solid-white::after, .btn-accent::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -75%;
  width: 50%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.28) 50%, transparent 100%);
  transform: skewX(-18deg);
  transition: none;
  pointer-events: none;
}
.btn-solid-white::after { background: linear-gradient(105deg, transparent 0%, rgba(17,61,100,0.10) 50%, transparent 100%); }
.btn-solid:hover::after, .btn-solid-white:hover::after, .btn-accent:hover::after {
  transition: left 0.55s ease;
  left: 125%;
}

/* Nav links: brass underline slides in from the left on hover.
   The active page keeps its existing static underline. */
.main-nav a:not(.btn)::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  border-bottom: 2px solid var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s ease;
}
.main-nav a:not(.btn):hover::before { transform: scaleX(1); }
.main-nav a.active::before { display: none; }

/* Cards: a thin brass edge draws across the top on hover, on top of the
   existing lift + shadow. Reads as precision, not decoration. */
.card { position: relative; }
.card::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
  border-radius: 4px 4px 0 0;
}
.card:hover::before { transform: scaleX(1); }

/* Hero headline: the accent phrase gets a hand-ruled brass underline that
   draws itself in just after the page loads — the "ledger line" motif
   doing real work on the most important sentence on the site. */
.hero h1 .accent-text {
  background-image: linear-gradient(90deg, var(--accent-light), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 98%;
  background-size: 0% 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: 2px;
  animation: tfs-rule-draw 0.7s ease 0.85s forwards;
}
@keyframes tfs-rule-draw {
  to { background-size: 100% 3px; }
}

/* Scroll progress bar: navy-to-brass gradient instead of flat navy. */
.scroll-progress {
  background: linear-gradient(90deg, var(--navy) 0%, var(--accent) 100%);
}

/* Motion respect: static end-states for everything above. */
@media (prefers-reduced-motion: reduce) {
  .btn-solid::after, .btn-solid-white::after, .btn-accent::after { display: none; }
  .main-nav a:not(.btn)::before { transition: none; }
  .card::before { transition: none; }
  .hero h1 .accent-text { animation: none; background-size: 100% 3px; }
  .skip-link { transition: none; }
}

/* ==========================================================================
   Motion layer 2 — load-visible animation pass (Aug 2026)
   Everything below moves WITHOUT user interaction: hero content cascades
   in on page load, a brand bar-chart mark rises next to every hero
   eyebrow, and section headings draw a brass ledger rule as they scroll
   into view. All gated behind prefers-reduced-motion.
   ========================================================================== */

/* Hero entrance cascade: eyebrow, headline, lede, and buttons rise in
   sequence on every page load. */
@keyframes tfs-rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-inner > *,
.page-hero .wrap > * {
  animation: tfs-rise-in 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.hero-inner > *:nth-child(1), .page-hero .wrap > *:nth-child(1) { animation-delay: 0.05s; }
.hero-inner > *:nth-child(2), .page-hero .wrap > *:nth-child(2) { animation-delay: 0.14s; }
.hero-inner > *:nth-child(3), .page-hero .wrap > *:nth-child(3) { animation-delay: 0.23s; }
.hero-inner > *:nth-child(4), .page-hero .wrap > *:nth-child(4) { animation-delay: 0.32s; }
.hero-inner > *:nth-child(5), .page-hero .wrap > *:nth-child(5) { animation-delay: 0.41s; }

/* Brand bar-chart mark: four brass bars rise next to the hero eyebrow —
   the logo motif, animated. Decorative only (contrast rules untouched). */
.hero .eyebrow::before,
.page-hero .eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 14px;
  margin-right: 10px;
  vertical-align: -2px;
  background-image:
    linear-gradient(var(--accent-light), var(--accent-light)),
    linear-gradient(var(--accent-light), var(--accent-light)),
    linear-gradient(var(--accent-light), var(--accent-light)),
    linear-gradient(var(--accent-light), var(--accent-light));
  background-repeat: no-repeat;
  background-position: 0 100%, 6px 100%, 12px 100%, 18px 100%;
  background-size: 4px 5px, 4px 8px, 4px 11px, 4px 14px;
  animation: tfs-bars-rise 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) 0.35s both;
}
@keyframes tfs-bars-rise {
  from { background-size: 4px 2px, 4px 2px, 4px 2px, 4px 2px; }
  to   { background-size: 4px 5px, 4px 8px, 4px 11px, 4px 14px; }
}

/* Section headings: a short brass ledger rule draws in under each h2 as
   the section scrolls into view (section-head is now a reveal element). */
.section-head h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 14px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s ease 0.25s;
}
.section-head.center h2::after {
  margin-left: auto;
  margin-right: auto;
  transform-origin: center;
}
.section-head.reveal-visible h2::after { transform: scaleX(1); }
/* No-JS fallback: if the reveal system never runs, show the rule. */
@media (scripting: none) {
  .section-head h2::after { transform: scaleX(1); }
}

/* Header: soft shadow appears once the page scrolls, so the sticky bar
   reads as "floating" over content instead of pasted on. */
.site-header { transition: box-shadow 0.25s ease; }
.site-header.is-scrolled { box-shadow: 0 6px 18px rgba(10, 40, 66, 0.10); }

/* Card icons lift slightly with their card on hover. */
.card .icon { transition: transform 0.25s ease; }
.card:hover .icon { transform: translateY(-3px); }

/* Motion respect: instant, static end-states. */
@media (prefers-reduced-motion: reduce) {
  .hero-inner > *, .page-hero .wrap > * { animation: none; opacity: 1; transform: none; }
  .hero .eyebrow::before, .page-hero .eyebrow::before { animation: none; }
  .section-head h2::after { transition: none; transform: scaleX(1); }
  .site-header { transition: none; }
  .card .icon { transition: none; }
}

/* ==========================================================================
   Interactive Business Snapshot (Home) — replaces the static mockup image.
   Figures and readable text stay navy/body-text per contrast rules; brass
   appears only as chart strokes, slider accents, and decorative edges.
   ========================================================================== */
.snap-live {
  background: var(--white);
  border: var(--rule);
  border-radius: 6px;
  box-shadow: 0 24px 48px rgba(17, 61, 100, 0.12);
  overflow: hidden;
}
.snap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--navy);
  color: var(--white);
  padding: 14px 20px;
}
.snap-head-title { font-weight: 700; letter-spacing: 0.02em; }
.snap-head-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-light);
  border: 1px solid rgba(212, 184, 120, 0.5);
  border-radius: 3px;
  padding: 3px 8px;
}

.snap-controls {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: var(--rule);
  background: rgba(237, 231, 222, 0.45);
}
.snap-control label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 6px;
}
.snap-control output {
  font-size: 0.86rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--body-text);
  font-weight: 700;
  white-space: nowrap;
}
.snap-control input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--navy), var(--accent));
  outline: none;
  cursor: pointer;
}
.snap-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--accent);
  box-shadow: 0 2px 6px rgba(17, 61, 100, 0.3);
  transition: transform 0.15s ease;
}
.snap-control input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--accent);
  box-shadow: 0 2px 6px rgba(17, 61, 100, 0.3);
}
.snap-control input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.15); }
.snap-control input[type="range"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.snap-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: var(--rule);
}
.snap-kpi {
  padding: 14px 12px;
  text-align: center;
  border-right: var(--rule);
  min-width: 0;
}
.snap-kpi:last-child { border-right: none; }
.snap-kpi-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-dark);
  margin-bottom: 4px;
}
.snap-kpi-fig {
  display: block;
  font-size: clamp(0.92rem, 1.4vw, 1.15rem);
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.snap-fig-neg { color: var(--neg-red); }
.snap-kpi-delta {
  display: block;
  font-size: 0.62rem;
  color: var(--slate-dark);
  margin-top: 3px;
  white-space: nowrap;
}
.snap-delta-down { color: var(--neg-red); font-weight: 700; }

.snap-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.snap-chart {
  padding: 14px 16px 8px;
  border-right: var(--rule);
  border-bottom: var(--rule);
  min-width: 0;
}
.snap-chart:nth-child(2) { border-right: none; }
.snap-chart-wide { grid-column: 1 / -1; border-right: none; border-bottom: none; }
.snap-chart h4 {
  margin: 0 0 8px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--navy);
  text-align: center;
}
.snap-chart-box svg { width: 100%; height: auto; display: block; }

.snap-footnote {
  margin: 0;
  padding: 10px 20px 14px;
  font-size: 0.76rem;
  font-style: italic;
  color: var(--slate-dark);
  text-align: center;
  min-height: 2.2em;
}

@media (max-width: 860px) {
  .snap-kpis { grid-template-columns: repeat(2, 1fr); }
  .snap-kpi:nth-child(2) { border-right: none; }
  .snap-kpi:nth-child(-n+2) { border-bottom: var(--rule); }
  .snap-charts { grid-template-columns: 1fr; }
  .snap-chart { border-right: none; }
}

/* ==========================================================================
   Visual depth layer (Aug 2026): hero gradients, the
   brass-committed guarantee and CTA surfaces, sharper eyebrow tracking,
   and varied section rhythm. Words, blocks, and menus unchanged.
   Contrast verified: white on the brass gradient tests 5.73–8.74:1.
   ========================================================================== */

/* Eyebrows: smaller and wider-tracked against the larger headlines,
   so the type system reads deliberate instead of default. */
.eyebrow { font-size: 0.76rem; letter-spacing: 0.16em; }

/* Heroes: the Olympics page's gradient, promoted site-wide, plus a
   whisper-faint ledger-grid texture -- thin horizontal rules like a
   general ledger page. Texture sits under the content (.wrap is z-2,
   watermark img z-auto above ::after's z-0). */
.hero, .page-hero {
  background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 62%);
}
/* Ledger-line texture removed (Charlie's call, and the right one):
   the gradient carries the depth; a repeating overlay was decoration
   for its own sake and could band on some monitors. */

/* Close Date Guarantee: the brass-committed surface. Deep brass gradient,
   white/cream text (5.7:1+), the badge and button flipped to match. */
.guarantee-box {
  background: linear-gradient(150deg, var(--accent-bronze) 0%, var(--accent-deep) 100%);
  border: none;
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.guarantee-box .eyebrow { color: var(--accent-light); }
.guarantee-box h2 { color: var(--white); }
.guarantee-box p { color: rgba(255, 255, 255, 0.88); }
.guarantee-box .guarantee-icon-badge svg path,
.guarantee-box .guarantee-icon-badge svg rect,
.guarantee-box .guarantee-icon-badge svg line { stroke: var(--accent-light); }
.guarantee-box .btn-solid {
  background: var(--white);
  border-color: var(--white);
  color: var(--accent-bronze);
}
.guarantee-box .btn-solid:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--accent-bronze);
}

/* Bottom CTA banner: same brass commitment, closing the page on the
   palette's richest note instead of a third navy block. */
.cta-banner {
  background: linear-gradient(150deg, var(--accent-bronze) 0%, var(--accent-deep) 100%);
}
.cta-banner .shield-watermark { opacity: 0.09; }

/* Section rhythm: let the biggest moments breathe. Scoped to desktop
   widths so the mobile padding overrides earlier in the sheet keep
   winning on phones and tablets. */
@media (min-width: 1041px) {
  .hero { padding: 112px 0 96px; }
  .page-hero { padding: 84px 0 64px; }
  .snapshot-teaser { padding: 96px 0; }
  .cta-banner { padding: 96px 0; }
}

/* Screen-reader-only utility (used by the snapshot live region). */
.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;
}

/* Watermark shields: height must be explicit-auto. The width/height
   attributes added for layout-shift prevention act as presentational
   hints, and any rule that sets CSS width without height lets the
   attribute's height win -- which squashed every shield to 749x500
   from Aug 2026 until this fix. */
.shield-watermark, .shield-watermark-light { height: auto; }

/* ==========================================================================
   Hero split (Aug 2026): the live Business Snapshot sits in the hero's
   right column -- the site's most distinctive asset, front-loaded. The
   panel runs compact here (three sliders, four KPIs, the EBITDA trend);
   the headline column keeps the full message at a size that shares the
   row. Below 1040px the panel stacks under the text.
   ========================================================================== */
.hero-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
}
.hero-split .hero-inner { max-width: none; }
.hero-split h1 { font-size: clamp(2.2rem, 3.4vw, 3.4rem); }

.hero-panel {
  animation: tfs-rise-in 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) 0.3s both;
}
.hero-panel .snap-live {
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}
/* Compact mode: EBITDA trend only; the full three-chart panel is what
   clients get monthly, and the copy below the fold says so. */
.hero-panel .snap-chart-rev,
.hero-panel .snap-chart-wide,
.hero-panel .snap-footnote { display: none; }
.hero-panel .snap-chart-ebitda {
  grid-column: 1 / -1;
  border-right: none;
  border-bottom: none;
}
.hero-panel .snap-controls { padding: 14px 18px; gap: 10px; }
.hero-panel .snap-kpi { padding: 10px 8px; }

.hero-panel-note {
  margin: 12px 0 0;
  text-align: center;
  font-size: 0.78rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 1040px) {
  .hero-split { grid-template-columns: 1fr; gap: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-panel { animation: none; opacity: 1; transform: none; }
}

/* Slim monthly-deliverable strip (replaces the full snapshot-teaser
   section; the live panel now lives in the hero). */
.snapshot-strip { padding: 34px 0; border-top: var(--rule); border-bottom: var(--rule); background: var(--white); }
.snapshot-strip .inline-cta { background: transparent; border: none; padding: 0; margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.snapshot-strip p { margin: 0; max-width: 720px; }

/* ==========================================================================
   Spreadsheet Smackdown (event page). Per the approved build notes:
   Georgia throughout, event navy #133C60, sand #EDE7DE and gray #A3A7AD
   for fills only, no emoji, no icon sets. Scoped to .page-smackdown.
   ========================================================================== */
.page-smackdown { font-family: Georgia, 'Times New Roman', serif; --smk-navy: #133C60; }
.page-smackdown h1, .page-smackdown h2, .page-smackdown h3 { font-family: Georgia, 'Times New Roman', serif; }

.smk-hero { background: var(--smk-navy); color: var(--white); text-align: center; padding: 96px 0 84px; }
.smk-eyebrow { display: block; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-light); margin-bottom: 18px; }
.smk-h1 { color: var(--white); font-size: clamp(2.8rem, 6vw, 5rem); letter-spacing: 0; margin-bottom: 18px; }
.smk-subhead { font-size: 1.3rem; color: rgba(255,255,255,0.92); font-style: italic; max-width: 560px; margin: 0 auto 14px; }
.smk-detail { color: var(--accent-light); font-size: 1.02rem; margin-bottom: 8px; }
.smk-charity-line { color: rgba(255,255,255,0.75); font-size: 0.92rem; margin-top: 18px; }
.smk-btn-gold { background: var(--accent-light); border: 2px solid var(--accent-light); color: var(--smk-navy); border-radius: 4px; font-family: Georgia, serif; letter-spacing: 0.04em; text-transform: none; font-size: 1.02rem; font-weight: 700; padding: 15px 34px; }
.smk-btn-gold:hover { background: var(--white); border-color: var(--white); color: var(--smk-navy); transform: none; box-shadow: none; }
.page-smackdown .oly-countdown { margin: 30px 0 26px; }

.smk-section { padding: 72px 0; }
.smk-sand { background: #EDE7DE; }
.smk-narrow { max-width: 760px; }
.smk-h2 { color: var(--smk-navy); font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
.smk-h2::after { content: ""; display: block; width: 46px; height: 2px; background: #A3A7AD; margin-top: 14px; }
.page-smackdown p { font-size: 1.04rem; line-height: 1.7; }
.smk-note { font-size: 0.9rem; color: var(--slate-dark); }

.smk-round { padding: 20px 0; border-bottom: 1px solid #A3A7AD; }
.smk-round:last-of-type { border-bottom: none; }
.smk-round h3 { color: var(--smk-navy); margin-bottom: 8px; }

.smk-table { width: 100%; border-collapse: collapse; margin: 10px 0 14px; }
.smk-table td { padding: 12px 14px; border-bottom: 1px solid #A3A7AD; vertical-align: top; font-size: 1rem; }
.smk-table td:first-child { font-weight: 700; color: var(--smk-navy); white-space: nowrap; width: 90px; }
.smk-price-table td:nth-child(2) { font-weight: 700; color: var(--smk-navy); white-space: nowrap; width: 70px; }

.smk-type-toggle { display: flex; gap: 0; border: 1px solid var(--smk-navy); border-radius: 4px; overflow: hidden; margin: 26px 0 24px; flex-wrap: wrap; }
.smk-type-btn { flex: 1; min-width: 150px; background: var(--white); border: none; padding: 14px 10px; font-family: Georgia, serif; font-size: 0.95rem; font-weight: 700; color: var(--smk-navy); cursor: pointer; }
.smk-type-btn.active { background: var(--smk-navy); color: var(--white); }
.smk-checks { display: grid; gap: 12px; margin: 26px 0; padding: 22px; background: #EDE7DE; border-radius: 4px; }
.page-smackdown .form-field label { font-family: Georgia, serif; text-transform: none; letter-spacing: 0; font-size: 0.94rem; }
.smk-confirm { background: #EDE7DE; border-left: 4px solid var(--smk-navy); padding: 28px 30px; border-radius: 4px; }
.smk-confirm h3 { color: var(--smk-navy); font-size: 1.5rem; }
.smk-submit { margin-top: 6px; }

.smk-closing { padding: 84px 0; }
.smk-closing-h2 { color: var(--white); max-width: 640px; margin: 0 auto 30px; }
.smk-closing-h2::after { margin-left: auto; margin-right: auto; background: var(--accent-light); }
.smk-fineprint { background: var(--navy-deep); padding: 26px 0; }
.smk-fineprint p { color: rgba(255,255,255,0.55); font-size: 0.78rem; line-height: 1.6; margin: 0; }

@media (max-width: 560px) {
  .smk-type-toggle { flex-direction: column; }
  .smk-section { padding: 52px 0; }
  .smk-hero { padding: 72px 0 60px; }
}

/* Smackdown sponsor page additions */
.smk-tier { padding: 26px 0; border-bottom: 1px solid #A3A7AD; }
.smk-tier:last-of-type { border-bottom: none; }
.smk-tier h3 { color: var(--smk-navy); font-size: 1.3rem; margin-bottom: 2px; }
.smk-tier-price { font-weight: 700; color: var(--accent-deep); margin-bottom: 10px; }
.smk-tier ul { margin: 10px 0 0; padding-left: 20px; }
.smk-tier li { margin-bottom: 6px; font-size: 0.98rem; line-height: 1.55; }
.page-smackdown select, .page-smackdown textarea { font-family: Georgia, 'Times New Roman', serif; }
.smk-sponsor-link a { color: var(--accent-light); text-decoration: underline; }
.smk-sponsor-link a:hover { color: var(--white); }


/* Header at phone widths: the doubled desktop header would take a third
   of the screen, so phones get their own proportions. */
@media (max-width: 760px) {
  .site-header .wrap { height: 124px; }
  .logo-mark { height: 88px; }
  .site-header.is-scrolled .wrap { height: 92px; }
  .site-header.is-scrolled .logo-mark { height: 60px; }
}

/* ==========================================================================
   Co-brand: The Tax Squad. The card runs in the sister brand's own
   identity (Georgia, its navy #133C60, sand #EDE7DE) so it reads as a
   sibling, not a section. Copy column stays in this site's voice.
   ========================================================================== */
.cobrand { background: var(--white); border-top: 1px solid rgba(22,35,47,0.12); border-bottom: 1px solid rgba(22,35,47,0.12); padding: 84px 0; }
.cobrand-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
.cobrand-legal { font-size: 0.8rem; color: var(--slate-dark); margin-top: 18px; }
.cobrand-card {
  position: relative;
  background: #EDE7DE;
  border: 2px solid #133C60;
  padding: 48px 40px;
  text-align: center;
  font-family: Georgia, 'Times New Roman', serif;
  overflow: hidden;
}
.cobrand-shield { position: absolute; right: -90px; bottom: -110px; width: 320px; height: auto; opacity: 0.10; pointer-events: none; }
.cobrand-wordmark { display: block; font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 2.2rem; color: #133C60; line-height: 1.1; margin-bottom: 10px; position: relative; }
.cobrand-tag { font-style: italic; color: #133C60; margin-bottom: 26px; position: relative; }
.cobrand-btn { background: #133C60; border: 2px solid #133C60; color: #fff; font-family: Georgia, 'Times New Roman', serif; text-transform: none; letter-spacing: 0.02em; font-size: 1rem; border-radius: 4px; position: relative; }
.cobrand-btn:hover { background: #0a2842; border-color: #0a2842; color: #fff; transform: none; box-shadow: none; }
.cobrand-compact { padding: 0; border: none; background: transparent; }
.cobrand-strip { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; background: #EDE7DE; border: 2px solid #133C60; padding: 26px 30px; margin: 56px 0; }
.cobrand-strip p { margin: 0; max-width: 720px; }
@media (max-width: 900px) {
  .cobrand-grid { grid-template-columns: 1fr; gap: 36px; }
  .cobrand { padding: 64px 0; }
}