:root {
  /* Design tokens: the only place hex values may appear */
  --color-page-bg: #f7f8fa;
  --color-card-bg: #ffffff;
  --color-border: #e2e6ea;
  --color-primary-dark-a: #142b50;
  --color-primary-dark-b: #1b3a6b;
  --color-accent: #d5ba56;
  --color-accent-hover: #c2a748;
  --color-accent-text: #1b3a6b;
  --color-link: #2f5a9c;
  --color-text-primary: #2c3e50;
  --color-text-secondary: #5a6a7a;
  --color-text-muted: #9fb0c4;

  /* System serif stack for display headlines. Nothing is downloaded. */
  --font-display: Georgia, 'Times New Roman', serif;
}

/* Base */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--color-page-bg);
  color: var(--color-text-primary);
  line-height: 1.6;
}

a {
  color: var(--color-link);
}

/* Keep the CFP registered mark from disrupting line height. */
sup {
  font-size: 0.6em;
  vertical-align: super;
  line-height: 0;
}

/* Buttons */
button,
.button {
  border-radius: 8px;
}

.button-accent {
  background: var(--color-accent);
  color: var(--color-accent-text);
  border: none;
  padding: 12px 24px;
  cursor: pointer;
}

.button-accent:hover {
  background: var(--color-accent-hover);
}

/* Secondary button: navy outline, subordinate to the gold primary CTA. */
.button-secondary {
  display: inline-block;
  padding: 12px 24px;
  background: transparent;
  color: var(--color-primary-dark-b);
  border: 1px solid var(--color-primary-dark-b);
  text-decoration: none;
  cursor: pointer;
}

.button-secondary:hover {
  background: var(--color-primary-dark-b);
  color: var(--color-card-bg);
}

/* Cards */
.card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 32px;
}

/* Click-to-play video facade: a thumbnail plus a play badge; the real YouTube
   iframe swaps in on click (video-facade.js). Keeps a responsive 16:9 box. */
.video-facade {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-primary-dark-a);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.video-facade img,
.video-facade iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.video-facade img {
  object-fit: cover;
}

.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.video-play svg {
  display: block;
  width: 100%;
  height: 100%;
}

.video-play-badge {
  fill: var(--color-accent);
}

.video-play-tri {
  fill: var(--color-card-bg);
}

.video-facade:hover .video-play-badge {
  fill: var(--color-accent-hover);
}

/* Layout containers */
.container-grid {
  max-width: 1100px;
  margin: 0 auto;
}

.container-prose {
  max-width: 760px;
  margin: 0 auto;
}

.container-nav {
  max-width: 1200px;
  margin: 0 auto;
}

/* Utility strip: dark-accent bar above the sticky header; it is a normal
   element (not sticky), so it scrolls away and only the nav sticks. */
.utility-strip {
  background: linear-gradient(135deg, var(--color-primary-dark-a), var(--color-primary-dark-b));
  color: var(--color-card-bg);
  font-size: 0.8125rem;
}

.utility-strip-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 8px 20px;
}

.utility-strip a {
  color: var(--color-card-bg);
  text-decoration: none;
}

.utility-strip a:hover {
  text-decoration: underline;
}

.us-meta {
  display: flex;
  gap: 14px;
  align-items: center;
}

.us-dot {
  opacity: 0.5;
}

.us-phone {
  display: none;
  align-items: center;
  gap: 7px;
}

.us-phone svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* On small screens the strip collapses to a centered tap-to-call phone. */
@media (max-width: 600px) {
  .us-area,
  .us-meta {
    display: none;
  }

  .us-phone {
    display: inline-flex;
  }

  .utility-strip-inner {
    justify-content: center;
  }
}

/* Dark sections: header, hero banners, footer */
.site-header,
.site-footer {
  background: linear-gradient(135deg, var(--color-primary-dark-a), var(--color-primary-dark-b));
  color: var(--color-card-bg);
}

.site-header {
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgba(27, 58, 107, 0.05);
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-card-bg);
  color: var(--color-primary-dark-b);
}

/* Deeper elevation once the page is scrolled. The 1px border stays; only the
   shadow strengthens. Toggled by the shared nav script. */
.site-header.nav-scrolled {
  box-shadow: 0 2px 10px rgba(27, 58, 107, 0.10);
}

.site-header a {
  color: var(--color-primary-dark-b);
  text-decoration: none;
}

#primary-nav a {
  position: relative;
  display: inline-block;
}

#primary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

#primary-nav a:hover::after,
#primary-nav a:focus-visible::after {
  transform: scaleX(1);
}

/* Current page: the same gold underline, held on. This activates only when the
   current link carries aria-current="page", which is a separate nav-markup
   change and is not applied here. */
#primary-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 20px;
  min-height: 141px;
}

/* Logo pinned near the left edge of the full-width header (not the centered
   nav container), so it sits ~20px from the screen edge. The PNG background is
   transparent, so no chip: the artwork sits directly on the white bar. */
.nav-logo {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.nav-logo img {
  display: block;
  height: 125px;
  width: auto;
}

.nav-tagline {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  padding-left: 14px;
  border-left: 1px solid var(--color-border);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Hide the tagline before the enlarged logo-plus-tagline block reaches the
   centered nav links. The wide logo makes that happen well above the mobile
   breakpoint, so drop it here rather than at 900px. */
@media (max-width: 1400px) {
  .nav-tagline {
    display: none;
  }
}

.site-nav ul {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* CTA button: pinned to the right on desktop so the links stay centered; on
   mobile it flows into the dropdown as a full-width button. */
.nav-cta {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

#primary-nav .nav-cta a {
  display: inline-block;
  padding: 10px 18px;
  background: var(--color-accent);
  color: var(--color-accent-text);
  border-radius: 8px;
  font-weight: 600;
  white-space: nowrap;
}

#primary-nav .nav-cta a:hover {
  background: var(--color-accent-hover);
}

#primary-nav .nav-cta a::after {
  content: none;
}

/* Click-to-call, pinned just left of the "Meet with Me" CTA. Hidden on mobile,
   where the utility strip carries the tap-to-call number instead. */
.nav-phone {
  position: absolute;
  right: 170px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--color-primary-dark-b);
  font-weight: 500;
  white-space: nowrap;
}

.nav-phone svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Hamburger toggle: hidden on desktop, shown at the mobile breakpoint. */
.nav-toggle {
  display: none;
}

@media (max-width: 900px) {
  .site-nav {
    flex-wrap: wrap;
    min-height: 96px;
  }

  /* The logo is absolute against .site-header, which grows tall when the menu
     opens, so a top:50% anchor drifts into the middle of the open menu. Pin it
     to the top bar region instead: top:0 with a fixed height equal to the
     closed bar (.site-nav min-height), so the img stays centered in the bar
     whether the menu is closed or open. */
  .nav-logo {
    top: 0;
    height: 96px;
    transform: none;
  }

  .nav-logo img {
    height: 72px;
  }

  .nav-phone {
    display: none;
  }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
  }

  .nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-link);
    transition: transform 0.2s, opacity 0.2s;
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .site-nav ul {
    display: none;
  }

  .site-nav ul.open {
    display: flex;
    flex: 1 0 100%;
    flex-direction: column;
    gap: 0;
    margin: 12px -20px -20px;
    padding: 8px 20px;
    background: var(--color-card-bg);
    border-top: 1px solid var(--color-border);
  }

  .site-nav ul.open a {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-primary-dark-b);
  }

  .nav-cta {
    position: static;
    transform: none;
    margin-top: 8px;
  }

  #primary-nav .nav-cta a {
    display: block;
    text-align: center;
  }
}

.site-footer {
  padding: 32px 20px;
}

.site-footer .compliance {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.site-footer .compliance a {
  color: var(--color-card-bg);
}

.site-footer .footer-nap {
  margin: 0 0 12px;
  line-height: 1.6;
}

/* Hero and dark CTA sections */
.hero {
  background: linear-gradient(135deg, var(--color-primary-dark-a), var(--color-primary-dark-b));
  color: var(--color-card-bg);
  padding: 48px 20px;
}

.hero h1,
.hero h2,
.hero p {
  color: var(--color-card-bg);
}

.hero .hero-sub {
  color: var(--color-card-bg);
  font-size: 1.125rem;
}

.hero .button-accent {
  display: inline-block;
  text-decoration: none;
  margin-top: 16px;
}

/* Homepage hero only. Other H1s keep the base font stack. */
.hero .hero-title {
  font-family: var(--font-display);
}

.hero .hero-eyebrow {
  margin: 0 0 16px;
  color: var(--color-accent);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Landing page (/start) hero: two columns collapsing to one below 900px. */
.landing-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.landing-brand {
  margin: 0 0 32px;
  color: var(--color-card-bg);
  font-weight: 700;
  font-size: 1.125rem;
}

.landing-hero-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.landing-hero-media img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Homepage hero flip card: front is Cliff's photo, back is his bio and credentials.
   The card reserves a fixed box so the LCP image causes no layout shift. */
.landing-hero-media { perspective: 1400px; }
.flip-card {
  height: 460px;
  width: auto;
  aspect-ratio: 736 / 920;
  margin: 0 auto;
  cursor: pointer;
  outline: none;
}
.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transform-style: preserve-3d;
}
.flip-card.is-flipped .flip-inner { transform: rotateY(180deg); }
@media (hover: hover) {
  .flip-card:hover .flip-inner,
  .flip-card:focus-visible .flip-inner { transform: rotateY(180deg); }
}
.flip-face {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.flip-card .flip-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.flip-back {
  transform: rotateY(180deg);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 32px 28px;
  text-align: center;
}
.flip-back h3 { margin: 0; font-size: 1.15rem; color: var(--color-card-bg); }
.flip-back p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: rgba(255, 255, 255, 0.85); }
.flip-logos {
  background: var(--color-card-bg);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  align-self: center;
}
.flip-logos img { width: auto; }
.flip-logos .cfp { height: 52px; }
.flip-logos .ea { height: 34px; }
.flip-back a { color: var(--color-accent); font-weight: 600; text-decoration: none; }
.flip-back a:hover { text-decoration: underline; }
.flip-hint { text-align: center; margin: 12px 0 0; font-size: 0.72rem; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.04em; }
.flip-hint .tap { display: none; }
@media (hover: none) {
  .flip-hint .hover { display: none; }
  .flip-hint .tap { display: inline; }
}

@media (max-width: 900px) {
  .landing-hero-cols {
    grid-template-columns: 1fr;
  }

  .flip-card {
    height: 380px;
  }
}

/* Stat bar: the hero gradient, darkened by a translucent overlay. */
.stat-bar {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18)),
    linear-gradient(135deg, var(--color-primary-dark-a), var(--color-primary-dark-b));
  padding: 32px 20px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.stat-value {
  margin: 0 0 4px;
  color: var(--color-accent);
  font-size: 1.25rem;
  font-weight: 700;
}

.stat-desc {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

@media (max-width: 900px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* Light content sections */
.section {
  padding: 48px 20px;
}

.section h2 {
  color: var(--color-text-primary);
}

.section p {
  color: var(--color-text-secondary);
}

.card p {
  color: var(--color-text-secondary);
  margin: 0 0 12px;
}

.card p:last-child {
  margin-bottom: 0;
}

.card h3 {
  color: var(--color-text-primary);
  margin-top: 0;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin: 24px 0;
}

.placeholder-text {
  color: var(--color-text-muted);
}

/* About page */
.about-headshot {
  float: right;
  width: 280px;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 0 0 16px 24px;
}

.about-intro::after {
  content: "";
  display: table;
  clear: both;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.gallery img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  border-radius: 8px;
  display: block;
}

@media (max-width: 600px) {
  .about-headshot {
    float: none;
    display: block;
    margin: 0 auto 16px;
  }
}

/* Pricing page */
.pricing-card {
  text-align: center;
}

.pricing-card .price-range {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Contact page */
.contact-block p {
  margin: 0 0 12px;
}

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  margin-bottom: 4px;
  color: var(--color-text-primary);
  font-weight: 600;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text-primary);
  background: var(--color-card-bg);
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-error {
  color: var(--color-text-secondary);
  margin-top: 16px;
}

/* Calendly is now the topmost content on the contact page. Clear the sticky
   nav (about 97px tall) when this section is scrolled to, so its heading is
   fully visible below the bar. */
.calendly-section {
  scroll-margin-top: 112px;
}

.calendly-card {
  padding: 8px;
}

#calendly-embed {
  height: 725px;
}

@media (max-width: 600px) {
  #calendly-embed {
    height: 1150px;
  }
}

/* FAQs page */
.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-question {
  margin: 0;
}

.faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 20px 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  cursor: pointer;
  font-family: inherit;
}

.faq-trigger::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--color-accent);
  font-size: 1.5rem;
  line-height: 1;
  transition: transform 0.2s;
}

.faq-trigger[aria-expanded="true"]::after {
  transform: rotate(45deg);
}

/* Calculator year-by-year breakdown */
.calc-yby {
  border-top: 1px solid var(--color-border);
  margin-top: 8px;
}

.calc-yby-panel {
  margin-bottom: 16px;
}

.calc-yby-scroll {
  overflow-x: auto;
}

.calc-yby-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.calc-yby-table th,
.calc-yby-table td {
  padding: 6px 12px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border);
}

.calc-yby-table th:first-child,
.calc-yby-table td:first-child {
  text-align: left;
}

.calc-yby-table th {
  color: var(--color-text-primary);
  font-weight: 600;
}

.calc-yby-table td {
  color: var(--color-text-secondary);
}

.calc-yby-table tbody tr:nth-child(even) td {
  background: var(--color-page-bg);
}

/* Client Portals page */
.portal-card {
  display: flex;
  flex-direction: column;
}
.portal-card .button-accent {
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  text-decoration: none;
}

/* Client portal security note */
.portal-note {
  margin: 18px 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* In the Press: quote cards from national outlets */
.press-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-top: 24px; }
.press-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.press-outlet {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.press-dot { color: var(--color-accent); }
.press-quote {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 1.02rem;
  line-height: 1.6;
  border-left: 3px solid var(--color-accent);
  padding-left: 16px;
}
.press-topic { margin: 0; font-size: 0.9rem; }
.press-link { margin: 0; margin-top: auto; }
.press-link a { color: var(--color-link); font-weight: 600; text-decoration: none; font-size: 0.92rem; }
.press-link a:hover { text-decoration: underline; }

/* Useful Links page */
.link-list {
  margin: 0;
  padding-left: 20px;
}

.link-list li {
  margin-bottom: 8px;
}

.link-list li:last-child {
  margin-bottom: 0;
}

/* Fee calculator */
.calc-field {
  margin-bottom: 16px;
}

.calc-field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.calc-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.calc-controls input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--color-accent);
}

.calc-controls input[type="number"],
.calc-controls input[type="text"] {
  flex: 0 0 120px;
  width: 120px;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text-primary);
  background: var(--color-card-bg);
}

.calc-results {
  margin: 24px 0;
}

.calc-headline {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.calc-option {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.calc-option label {
  color: var(--color-text-primary);
  font-weight: 600;
}

.calc-option input[type="checkbox"] {
  accent-color: var(--color-accent);
  width: 18px;
  height: 18px;
}

.calc-breakdown {
  margin-top: 12px;
}

.calc-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 6px 0;
  color: var(--color-text-secondary);
}

.calc-line-total {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-primary);
  font-size: 1.25rem;
  font-weight: 700;
}

/* The flex display above outranks the [hidden] attribute, so restore it. */
.calc-line[hidden] {
  display: none;
}

.calc-note {
  margin: 12px 0 0;
}

.calc-chart svg {
  width: 100%;
  height: auto;
  display: block;
}

.calc-disclaimer {
  font-size: 0.85rem;
  margin-top: 12px;
}

.calc-lead {
  margin-top: 24px;
}

.calc-lead h4 {
  margin-top: 0;
  color: var(--color-text-primary);
}

.calc-lead-msg {
  color: var(--color-accent-text);
  font-weight: 600;
  margin-top: 12px;
}

/* True Blended Fee Calculator. Sits above the fee-comparison calculator; the
   two are separate white cards, so give the first one breathing room. */
#blended-fee-calculator {
  display: block;
  margin-bottom: 32px;
}

.blended-sub {
  margin-top: 0;
}

/* The five tier-rate inputs, grouped under a legend for accessibility. */
.blended-tiers {
  border: none;
  margin: 0 0 16px;
  padding: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.blended-tiers legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.blended-tier label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

.blended-pct {
  display: flex;
  align-items: center;
  gap: 6px;
}

.blended-pct input {
  width: 100%;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text-primary);
  background: var(--color-card-bg);
}

.blended-pct span {
  color: var(--color-text-secondary);
}

.blended-results {
  margin: 24px 0;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-page-bg);
}

/* The two output figures sit side by side; the caption below spans full width. */
.blended-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.blended-result-label {
  display: block;
  margin-bottom: 4px;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

.blended-result-value {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

/* Static caption below the figures. Scoped to the results box so its margins
   win over the general .card p rule. */
.blended-results .blended-caption {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  line-height: 1.55;
}

.blended-tiers input::placeholder,
#blended-portfolio::placeholder {
  color: var(--color-text-muted);
}

.faq-panel {
  padding-bottom: 20px;
}

.faq-panel p {
  color: var(--color-text-secondary);
  margin: 0 0 12px;
}

.faq-panel p:last-child {
  margin-bottom: 0;
}

/* Blog index cards */
.blog-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.blog-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.blog-card .blog-card-date {
  margin: 0 0 8px;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}
.blog-card h3 {
  margin: 0 0 10px;
}
.blog-card .blog-card-more {
  display: inline-block;
  margin-top: 14px;
  color: var(--color-link);
  font-weight: 600;
  font-size: 0.9rem;
}

/* Scheduling modal */
.scheduler-modal {
  max-width: 560px;
  width: calc(100% - 32px);
  max-height: calc(100vh - 48px);
  margin: auto;
  padding: 32px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--color-card-bg), var(--color-page-bg));
  color: var(--color-text-primary);
  box-shadow: 0 10px 40px rgba(20, 43, 80, 0.25), inset 0 1px 0 var(--color-border);
  display: flex;
  flex-direction: column;
}

/* A <dialog> we style with display:flex would otherwise stay visible when
   closed: the author display wins over the UA dialog:not([open]) rule, leaving
   the closed modal reflowed at the bottom of the page. Re-hide it so close()
   actually removes it. */
.scheduler-modal:not([open]) {
  display: none;
}

/* The Calendly step is wider so the full calendar renders; capped to 100% on
   mobile by the max-width: 600px rule below (same specificity, later source). */
.scheduler-modal.is-calendar {
  max-width: 860px;
}

/* The content is the scrollable region so a tall step scrolls while the close
   button stays put. min-height:0 lets this flex child shrink and scroll. */
#scheduler-content {
  overflow-y: auto;
  min-height: 0;
  text-align: center;
}

/* Keep the form controls left-aligned; only the display text centers. */
#scheduler-content .field,
#scheduler-content .wizard-group,
#scheduler-content .wizard-error {
  text-align: left;
}

/* rgba of --color-primary-dark-a (navy) for a dark translucent overlay. */
.scheduler-modal::backdrop {
  background: rgba(20, 43, 80, 0.5);
}

.scheduler-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-text-primary);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
}

.scheduler-close:hover {
  background: var(--color-text-muted);
  color: var(--color-card-bg);
}

.scheduler-choice {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

@media (max-width: 600px) {
  .scheduler-modal {
    max-width: 100%;
    width: 100%;
    min-height: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  /* Same specificity as .scheduler-modal.is-calendar but later in source, so
     the calendar step stays full-width on mobile. */
  .scheduler-modal.is-calendar {
    max-width: 100%;
  }
}

/* Calendly embed (Slice 3): an explicit height (not min-height) so the widget's
   percentage-height iframe can fill it; the modal's #scheduler-content handles
   scrolling on short screens. */
#scheduler-calendly {
  height: 720px;
}

/* Intake wizard (Slice 2) */
.wizard-progress {
  margin: 0 0 4px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

#scheduler-content h2 {
  margin: 0 0 14px;
}

.wizard-error {
  margin: 14px 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--color-accent);
  background: var(--color-page-bg);
  color: var(--color-text-primary);
  font-size: 0.9rem;
}

.wizard-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.wizard-group {
  border: none;
  margin: 0 0 20px;
  padding: 0;
  min-width: 0;
}

.wizard-group legend {
  padding: 0;
  margin-bottom: 10px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.check-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.check-row input,
.radio-row input {
  accent-color: var(--color-accent);
}

.check-row input:disabled + span {
  color: var(--color-text-muted);
}

.exclusive-row {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  font-weight: 600;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.radio-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* "Please specify" reveal inputs. */
.specify {
  margin-top: 12px;
}

.specify label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.specify input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text-primary);
  background: var(--color-card-bg);
}

/* "Who This Is For" cards: blue line draws in on hover, gold spark burst on close */
@property --draw-angle{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
.card-draw .card{ position:relative; }
.card-draw .card::after{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:2px;
  background:conic-gradient(from 0deg, var(--color-link) var(--draw-angle), transparent var(--draw-angle));
  -webkit-mask:linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
          mask:linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  transition:--draw-angle 0.5s ease; pointer-events:none;
}
.card-draw .card:hover::after{ --draw-angle:360deg; }
.who-spark{
  position:absolute; border-radius:50%;
  background:var(--color-accent); box-shadow:0 0 5px var(--color-accent);
  pointer-events:none; z-index:3;
  animation:who-spark-fly 0.6s cubic-bezier(0.22,0.61,0.36,1) forwards;
}
@keyframes who-spark-fly{
  0%{ transform:translate(-50%,-50%) scale(1); opacity:1; }
  70%{ opacity:1; }
  100%{ transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) scale(0.25); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .card-draw .card::after{ transition:none; } }

/* Flat-fee benefits: three icon cards and a stat callout leading into the calculator */
.fee-benefits { text-align: center; }
.fee-benefits .fee-intro { max-width: 700px; margin: 0 auto 12px; }
.fee-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto 16px;
  background: var(--color-accent);
  color: var(--color-accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fee-icon svg { width: 28px; height: 28px; }
.fee-callout {
  max-width: 700px;
  margin: 12px auto 0;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: 8px;
  padding: 22px 28px;
  text-align: left;
}
.fee-callout p { margin: 0; color: var(--color-text-primary); }
.fee-callout strong { color: var(--color-primary-dark-b); }
.fee-callout .fee-callout-link { margin-top: 6px; }
.fee-callout a { color: var(--color-link); font-weight: 600; text-decoration: none; }
.fee-callout a:hover { text-decoration: underline; }

/* Anchor targets: stop short of the sticky nav so headings stay visible */
#fee-calculator,
#blended-fee-calculator,
#book {
  scroll-margin-top: 140px;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* About page: credential logos inside the credentials cards */
.credential-card-logo {
  display: block;
  height: 64px;
  width: auto;
  margin: 0 0 14px;
}
.credential-card-logo-ea {
  height: 48px;
}

/* What You Get: icon rows with a thread line down the left */
.benefit-list { margin-top: 26px; }
.benefit {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 0 20px;
  position: relative;
  padding: 0 0 36px;
}
.benefit:last-child { padding-bottom: 0; }
.benefit::before {
  content: '';
  position: absolute;
  left: 44px;
  top: 64px;
  bottom: 6px;
  width: 2px;
  background: var(--color-border);
}
.benefit:last-child::before { display: none; }
.benefit-chip {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin: 0 auto;
  background: var(--color-accent);
  color: var(--color-accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.benefit-chip svg { width: 26px; height: 26px; }
.benefit h3 { margin: 4px 0 8px; font-size: 1.15rem; }
.benefit p { margin: 0; max-width: 680px; color: var(--color-text-secondary); }
@media (max-width: 600px) {
  .benefit { grid-template-columns: 56px 1fr; gap: 0 14px; }
  .benefit::before { left: 28px; }
  .benefit-chip { width: 44px; height: 44px; }
  .benefit-chip svg { width: 22px; height: 22px; }
}

/* Who This Is For: four cards balance as two columns on desktop */
@media (min-width: 768px) {
  .who-for-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* How It Works: timeline that draws itself when scrolled into view */
.hiw-timeline { position: relative; margin-top: 56px; }
.hiw-track {
  position: absolute;
  top: 24px;
  left: 8%;
  right: 8%;
  height: 3px;
  background: var(--color-border);
  border-radius: 2px;
  overflow: hidden;
}
.hiw-fill {
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
}
.hiw-timeline.play .hiw-fill {
  transition: transform 1.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scaleX(1);
}
.hiw-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; position: relative; }
.hiw-step { text-align: center; padding: 0 10px; opacity: 0; transform: translateY(14px); }
.hiw-timeline.play .hiw-step { transition: opacity 0.5s ease, transform 0.5s ease; opacity: 1; transform: none; }
.hiw-timeline.play .hiw-step:nth-child(1) { transition-delay: 0.15s; }
.hiw-timeline.play .hiw-step:nth-child(2) { transition-delay: 0.6s; }
.hiw-timeline.play .hiw-step:nth-child(3) { transition-delay: 1.05s; }
.hiw-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin: 0 auto 18px;
  position: relative;
  z-index: 1;
  background: var(--color-accent);
  color: var(--color-accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.15rem;
  box-shadow: 0 0 0 6px var(--color-page-bg);
}
.hiw-step h3 { margin: 0 0 8px; font-size: 1.05rem; }
.hiw-step p { margin: 0; font-size: 0.95rem; color: var(--color-text-secondary); }
@media (max-width: 800px) {
  .hiw-track { display: none; }
  .hiw-steps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hiw-timeline.play .hiw-fill,
  .hiw-timeline.play .hiw-step { transition: none; }
}

/* Client portal cards: company wordmark logos as headings */
.portal-logo { margin: 0 0 14px; }
.portal-logo img { display: block; height: 36px; width: auto; }