/* =============================================================
   Strategic Accounting — Design System
   Editorial Ledger aesthetic · Warm cream foundation
   Clean rewrite, April 2026
   ============================================================= */

/* -------------------------------------------------------------
   0. Self-hosted fonts (latin subset)
   Source Sans 3 (body, variable weight 300-700 + italic) — pairs
   with Source Serif 4 by design (same foundry, matched metrics).
   Source Serif 4 (display, variable weight 500-700 + italic)
   Critical weights are <link rel="preload"> in base.njk
   ------------------------------------------------------------- */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/source-sans-3-300-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/source-sans-3-300-700-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/source-serif-4-500-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/source-serif-4-500-700-italic.woff2') format('woff2');
}

/* -------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------- */
:root {
  /* Ink */
  --ink: #1a2332;
  --ink-soft: #2c3e52;
  --muted: #596878;
  --muted-light: #7c8a99;

  /* Paper (warm cream foundation) */
  --paper: #f5f3ec;
  --paper-warm: #faf8f1;
  --paper-deep: #ece6d4;
  --surface: #ffffff;

  /* Warm borders (harmonized with cream paper) */
  --border: #e5ddc8;
  --border-strong: #cfc3a3;
  --border-soft: #efe9d8;

  /* Primary accent — forest green (used to be cobalt blue; dropped
     per editorial palette rewrite. --accent-green is now an alias.) */
  --accent: #2f7d58;
  --accent-hover: #266648;
  --accent-faint: rgba(47, 125, 88, 0.08);
  --accent-tint: rgba(47, 125, 88, 0.04);

  /* Kept as aliases so existing rules using --accent-green still work */
  --accent-green: #2f7d58;
  --accent-green-hover: #266648;
  --accent-green-faint: rgba(47, 125, 88, 0.1);
  --accent-green-tint: rgba(47, 125, 88, 0.05);

  /* Warm accent — rust/clay (editorial moments, used sparingly) */
  --accent-warm: #b85e22;
  --accent-warm-hover: #9d4f1c;
  --accent-warm-faint: rgba(184, 94, 34, 0.08);

  /* Widths */
  --max: 76rem;        /* 1216 — outer page */
  --max-wide: 66rem;   /* 1056 — wide grids */
  --max-medium: 52rem; /* 832  — medium content */
  --max-prose: 44rem;  /* 704  — narrow reading */
  --max-head: 40rem;   /* 640  — section head */

  /* Type scale */
  --type-xs: 0.6875rem;   /* 11 — micro labels / eyebrow */
  --type-sm: 0.8125rem;   /* 13 — meta / breadcrumb */
  --type-base: 0.9375rem; /* 15 — ui body */
  --type-md: 1rem;        /* 16 — body */
  --type-lg: 1.0625rem;   /* 17 — reading */
  --type-xl: 1.25rem;     /* 20 — intro */

  /* Radii */
  --radius: 4px;
  --radius-lg: 6px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --speed: 0.2s;

  /* Site header height (for scroll-margin on anchors) */
  --site-header-h: 4.35rem;

  /* Typefaces */
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
}

/* -------------------------------------------------------------
   2. Reset + base
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: var(--type-lg);
}

main { flex: 1; display: block; }

img, svg, picture { max-width: 100%; display: block; }
img { height: auto; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--speed) var(--ease-out);
}
a:hover { color: var(--accent-hover); }

p {
  margin: 0 0 1.15em;
  color: var(--muted);
}
p:last-child { margin-bottom: 0; }

strong, b {
  font-weight: 600;
  color: var(--ink);
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}

:focus-visible {
  outline: 2px solid var(--accent-green);
  outline-offset: 3px;
  border-radius: var(--radius);
}

::selection {
  background: var(--accent);
  color: #fff;
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 0.5rem 1rem;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
}
.skip-link:focus-visible {
  left: 0.75rem;
  top: 0.75rem;
}

/* -------------------------------------------------------------
   3. Typography primitives
   ------------------------------------------------------------- */

/* Eyebrow — small uppercase label, editorial signal */
.eyebrow {
  display: block;
  margin: 0 0 0.85rem;
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-light);
}
.eyebrow__link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--speed) var(--ease-out);
}
.eyebrow__link:hover,
.eyebrow__link:focus-visible {
  color: var(--accent);
}

/* Hero meta — small muted line below the hero strap (used on
   /blog/topics/ pages for the "N articles in this topic" count). */
.hero__meta {
  margin: 0.5rem auto 0;
  font-size: var(--type-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}
@media (min-width: 60rem) {
  .hero--text .hero__meta { margin-left: 0; margin-right: 0; }
}

/* Hero byline — post metadata row below the hero strap on blog
   post pages. Author link + date + optional read time, separated
   by small dots. Used only on .hero--post (blog post hero). */
.hero__byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  align-items: center;
  justify-content: center;
  margin: 1.5rem auto 0;
  font-size: var(--type-sm);
  color: var(--muted);
}
@media (min-width: 60rem) {
  .hero--text .hero__byline { justify-content: flex-start; margin-left: 0; margin-right: 0; }
}
.hero__byline a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(47, 125, 88, 0.35);
}
.hero__byline a:hover,
.hero__byline a:focus-visible {
  text-decoration-color: var(--accent);
}
.hero__byline time { color: var(--muted); font-weight: 400; }

/* Add breathing room when hero-actions follow a byline (blog posts). */
.hero__byline + .hero-actions {
  margin-top: 1.75rem;
}
.eyebrow--section { color: var(--accent); }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { color: var(--ink-soft); }

/* H1 — page / hero (sans default; serif override below for display contexts) */
h1,
.hero__title,
.page-head h1,
.page-head--blog__title {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: var(--ink);
}

/* H2 — section title (sans default) */
h2,
.section-title {
  margin: 0 0 1rem;
  font-size: clamp(1.5rem, 2.9vw, 2.05rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.18;
  color: var(--ink);
}

/* Display serif — Source Serif 4 for hero-level / section-head headings only.
   Body headings inside .post-content and .article.prose stay sans (see their rules). */
.hero__title,
.page-head h1,
.page-head--blog__title,
.post-hero__title,
.section-head .section-title,
.section-head h2,
.statement__text {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 60;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.section-head .section-title,
.section-head h2 {
  letter-spacing: -0.012em;
  line-height: 1.18;
}
.statement__text {
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.005em;
  line-height: 1.35;
}

/* H3 — subsection */
h3 {
  margin: 0 0 0.65rem;
  font-size: clamp(1.1rem, 1.8vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
}

/* H4 */
h4 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* Lede paragraph — intro text */
.lede {
  margin: 0 auto 1.75rem;
  max-width: 46ch;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.6;
  font-weight: 400;
  color: var(--ink-soft);
}
.lede:last-child { margin-bottom: 0; }

/* Strapline — between H1 and lede */
.page-strap {
  margin: 0 auto 1.15rem;
  max-width: 38rem;
  font-size: clamp(1.02rem, 1.8vw, 1.15rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* -------------------------------------------------------------
   4. Layout — inner, section, grids
   ------------------------------------------------------------- */

/* Inner container — every .section holds one .inner */
.inner {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 2.5rem);
}
.inner--wide { max-width: var(--max-wide); }
.inner--medium { max-width: var(--max-medium); }
.inner--prose { max-width: var(--max-prose); }

/* Section — full-width horizontal band with consistent rhythm */
.section {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  position: relative;
}
.section--surface { background: var(--surface); }
.section--band { background: var(--paper); }
.section + .section,
header + .section,
nav + .section {
  border-top: 1px solid var(--border);
}
.section[id],
.section-head > h2[id] { scroll-margin-top: 5.5rem; }

/* Section head — eyebrow + h2 + intro, centered */
.section-head {
  max-width: var(--max-head);
  margin: 0 auto clamp(2rem, 4vw, 2.75rem);
  text-align: center;
}
.section-head .eyebrow { margin-bottom: 0.65rem; }
.section-head .section-title {
  padding-bottom: 0.95rem;
  position: relative;
}
.section-head .section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 2.25rem;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}
.section-intro {
  margin: 1rem auto 0;
  max-width: var(--max-prose);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  color: var(--ink-soft);
}

/* Prose-narrow — reading column inside a section */
.prose-narrow {
  max-width: var(--max-prose);
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--muted);
}
.prose-narrow p { margin: 0 0 1.15em; }
.prose-narrow p:last-child { margin-bottom: 0; }
.prose-narrow strong { color: var(--ink); font-weight: 600; }
.prose-narrow a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(28, 79, 224, 0.3);
  text-underline-offset: 0.18em;
}
.prose-narrow a:hover {
  color: var(--accent-hover);
  text-decoration-color: var(--accent);
}
.prose-narrow ul, .prose-narrow ol {
  margin: 0 0 1.35em;
  padding-left: 1.35rem;
}
.prose-narrow li { margin: 0.4em 0; }
.prose-narrow li::marker { color: var(--accent-green); }

/* Grid primitives */
.grid-2, .grid-3, .grid-4 {
  display: grid;
  gap: 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: var(--max-wide);
}
@media (min-width: 40rem) {
  .grid-2 { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
@media (min-width: 56rem) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}

/* -------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.8rem 1.5rem;
  font-size: var(--type-base);
  font-weight: 600;
  letter-spacing: 0.015em;
  color: #fff !important;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  min-height: 2.75rem;
  transition: background var(--speed) var(--ease-out),
              border-color var(--speed) var(--ease-out),
              transform var(--speed) var(--ease-out);
}
.button:hover,
.button:focus-visible {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff !important;
  transform: translateY(-1px);
}
.button--ghost {
  color: var(--ink) !important;
  background: var(--surface);
  border-color: var(--border-strong);
}
.button--ghost:hover,
.button--ghost:focus-visible {
  color: var(--accent) !important;
  background: var(--paper-warm);
  border-color: var(--accent);
}

/* -------------------------------------------------------------
   6. Card primitive — ONE visual language for every card
   ------------------------------------------------------------- */
.feature-card,
.audience-card,
.fit-check__item,
.empathy-card__narrative,
.empathy-card__checklist,
.post-author-card,
.post-related__item,
.review-card,
.credential-card,
.faq-item,
.inline-callout,
.service-list li,
.team-bio,
.news-card,
.service-areas__item,
.contact-form-shell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 1.75rem);
  box-shadow: none;
  transition: border-color var(--speed) var(--ease-out),
              transform var(--speed) var(--ease-out);
}

.feature-card:hover,
.audience-card:hover,
.fit-check__item:hover,
.post-related__item:hover,
.review-card:hover,
.credential-card:hover,
.service-list li:hover,
.team-bio:hover,
.news-card:hover,
.service-areas__item:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

/* Cards inside cream band sections — stronger borders for contrast */
.section--band .feature-card,
.section--band .audience-card,
.section--band .fit-check__item,
.section--band .empathy-card__narrative,
.section--band .empathy-card__checklist,
.section--band .post-author-card,
.section--band .post-related__item,
.section--band .review-card,
.section--band .credential-card,
.section--band .faq-item,
.section--band .inline-callout,
.section--band .service-list li,
.section--band .team-bio,
.section--band .news-card,
.section--band .service-areas__item,
.section--band .contact-form-shell {
  border-color: var(--border-strong);
}

/* Card accent-left variants — applied by specific components */
.service-list li,
.empathy-card__checklist,
.inline-callout,
.post-author-card,
.post-author-card--service {
  border-left-width: 3px;
}
.service-list li {
  border-left-color: var(--accent);
}
.empathy-card__checklist {
  border-left-color: var(--accent-green);
}
.inline-callout {
  border-left-color: var(--accent-green);
  background: var(--paper-warm);
}
.post-author-card {
  border-left-color: var(--accent);
}
.post-author-card--service {
  border-left-color: var(--accent-green);
}

/* -------------------------------------------------------------
   7. Header
   ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--border);
}
.site-header .inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.15rem;
  padding-bottom: 1.15rem;
}
.logo {
  position: relative;
  z-index: 60;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--speed) var(--ease-out);
}
.logo:hover,
.logo:focus-visible { color: var(--accent); }

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.75rem;
}
.site-nav__list a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--type-base);
  transition: color var(--speed) var(--ease-out);
}
.site-nav__list a:hover,
.site-nav__list a:focus-visible { color: var(--accent); }
.site-nav__cta { display: none; }

/* Client portal utility link — small, ghost-style, top-right */
.site-nav__portal {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  font-size: var(--type-sm);
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color var(--speed) var(--ease-out),
              color var(--speed) var(--ease-out),
              background var(--speed) var(--ease-out);
}
.site-nav__portal svg {
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
  color: var(--muted-light);
  transition: color var(--speed) var(--ease-out);
}
.site-nav__portal:hover,
.site-nav__portal:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--paper-warm);
}
.site-nav__portal:hover svg,
.site-nav__portal:focus-visible svg { color: var(--accent); }

/* Hamburger toggle (hidden on desktop) */
.nav-toggle {
  display: none;
  position: relative;
  z-index: 60;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--ink);
  transition: background var(--speed) var(--ease-out),
              border-color var(--speed) var(--ease-out);
}
.nav-toggle:hover,
.nav-toggle:focus-visible {
  background: var(--paper-warm);
  border-color: var(--accent);
}
.nav-toggle__bars {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle__bar {
  display: block;
  width: 1.1rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s var(--ease-out),
              opacity var(--speed) var(--ease-out);
  transform-origin: center;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav overlay */
@media (max-width: 48rem) {
  .site-header .inner {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
  }
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 5.5rem clamp(1.25rem, 5vw, 2rem) 2rem;
    background: var(--paper);
    transform: translateX(100%);
    transition: transform 0.3s var(--ease-out);
    z-index: 55;
    overflow-y: auto;
  }
  .nav-open .site-nav { transform: translateX(0); }
  .nav-open { overflow: hidden; }
  .site-nav__list {
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--border);
  }
  .site-nav__list li { border-bottom: 1px solid var(--border); }
  .site-nav__list a {
    display: block;
    padding: 1.1rem 0;
    font-size: 1.25rem;
    color: var(--ink);
  }
  .site-nav .site-nav__cta {
    display: inline-flex;
    margin-top: 1.5rem;
    justify-content: center;
  }
  .site-nav__portal {
    margin-top: 1rem;
    justify-content: center;
    width: fit-content;
    align-self: center;
  }
}

/* -------------------------------------------------------------
   8. Breadcrumbs
   ------------------------------------------------------------- */
.breadcrumbs {
  background: var(--paper-warm);
  border-bottom: 1px solid var(--border);
}
.breadcrumbs__inner {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}
.breadcrumbs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  font-size: var(--type-sm);
  color: var(--muted-light);
}
.breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.breadcrumbs__item:not(:last-child)::after {
  content: "/";
  color: var(--border-strong);
  font-weight: 400;
  margin-left: 0.15rem;
}
.breadcrumbs__link {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--speed) var(--ease-out);
}
.breadcrumbs__link:hover { color: var(--accent); }
.breadcrumbs__current { color: var(--ink); font-weight: 600; }

/* -------------------------------------------------------------
   9. Hero + page-head — unified hero treatment
   ------------------------------------------------------------- */

/* Homepage hero — split editorial layout (text + portrait)
   Responsive strategy:
     <480px   — tight phone: compact padding, smaller photo, text centered
     480-768  — phone/small tablet: roomier, text centered, photo follows text
     768-960  — tablet: single column, text centered, larger photo
     960+     — desktop: 2-column grid, text left, photo right, wider container
     1280+    — spacious desktop: maximal breathing room */
.hero {
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(1.75rem, 4vw, 3rem);
  background: var(--surface);
}
.hero__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 2.5rem);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  align-items: center;
}
/* Mobile / small tablet default: content first, visual second, everything centered */
.hero__content {
  order: 1;
  text-align: center;
  width: 100%;
}
.hero__visual {
  order: 2;
  justify-self: center;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Desktop 2-column split — kicks in at 960px (60rem) so iPad portrait stays stacked */
@media (min-width: 60rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 4vw, 4rem);
    align-items: center;
  }
  .hero__content { text-align: left; }
  .hero__visual { justify-self: end; }
}

@media (min-width: 80rem) {
  .hero__grid { gap: clamp(3rem, 4vw, 4.5rem); }
}

.hero .eyebrow { margin-bottom: 1.2rem; }
.hero__title {
  margin: 0 auto 1.25rem;
  max-width: none;
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.1;
  text-wrap: balance;
}
@media (min-width: 60rem) {
  .hero__title {
    margin-left: 0;
    margin-right: 0;
  }
}
.hero__strap {
  margin: 0 auto 1.75rem;
  max-width: none;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}
/* Strap break: hidden on very small phones (let natural wrap take over),
   forced at the em-dash from 480px up through ~1200px where 1-line fits,
   and hidden again at ≥75rem (1200px) so the strap can render on 1 line
   on wider desktops. */
.hero__strap-break { display: none; }
@media (min-width: 30rem) and (max-width: 74.99rem) {
  .hero__strap-break { display: initial; }
}
@media (min-width: 60rem) {
  .hero__strap {
    margin-left: 0;
    margin-right: 0;
  }
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
}
@media (min-width: 60rem) {
  .hero-actions { justify-content: flex-start; }
}
.hero-actions .button { min-width: 0; }

/* Hero portrait — Ian's photo with caption */
.hero__portrait {
  margin: 0;
  width: 100%;
  max-width: 16rem;
}
@media (min-width: 30rem) {
  /* ≥480px — phones in landscape, small tablets */
  .hero__portrait { max-width: 18rem; }
}
@media (min-width: 48rem) {
  /* ≥768px — tablets */
  .hero__portrait { max-width: 20rem; }
}
@media (min-width: 60rem) {
  /* ≥960px — desktop grid */
  .hero__portrait { max-width: 22rem; }
}
@media (min-width: 80rem) {
  /* ≥1280px — spacious desktop */
  .hero__portrait { max-width: 24rem; }
}
.hero__portrait-frame {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--paper-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.hero__portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.hero__portrait-caption {
  margin: 0.85rem 0 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--border-strong);
  text-align: center;
}
@media (min-width: 60rem) {
  .hero__portrait-caption { text-align: left; }
}
.hero__portrait-role {
  margin: 0;
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-green);
}
.hero__portrait-name {
  margin: 0.2rem 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* Hero trust strip — spans full inner width below the grid */
.hero-trust {
  list-style: none;
  margin: clamp(1.5rem, 3.5vw, 2.25rem) 0 0;
  padding: 1.15rem 0 0;
  border-top: 1px solid var(--border);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  font-size: var(--type-sm);
  font-weight: 600;
  color: var(--muted);
}
@media (min-width: 60rem) {
  .hero-trust { gap: 0.65rem 1.75rem; }
}
.hero-trust__item {
  display: inline-flex;
  align-items: center;
  margin: 0;
}
.hero-trust__link,
.hero-trust__plain {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  padding: 0.25rem 0;
  border-bottom: 1px solid transparent;
}
.hero-trust__link {
  text-decoration: none;
  transition: color var(--speed) var(--ease-out), border-color var(--speed) var(--ease-out);
}
.hero-trust__link:hover,
.hero-trust__link:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--accent-green);
}
.hero-trust__link svg,
.hero-trust__plain svg {
  flex-shrink: 0;
  color: var(--accent-green);
}
.hero-trust__link strong {
  color: var(--ink);
  font-weight: 700;
}
.hero-trust__divider {
  display: none;
  width: 1px;
  height: 1rem;
  background: var(--border-strong);
}
@media (min-width: 44rem) {
  .hero-trust__divider { display: inline-block; }
}

/* Text-only hero — editorial masthead without a visual column,
   trust strip, or CTA buttons. Used on content pages (/about/)
   that need the homepage's typographic style without the
   conversion-zone chrome. Cream background (vs the homepage's
   white) so the transition into the first white content section
   reads as a visual break. */
.hero--text {
  background: var(--paper);
}
.hero--text .hero__content {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 60rem) {
  .hero--text .hero__content {
    margin-left: 0;
    margin-right: 0;
  }
}
.hero--text .hero__strap {
  max-width: 38rem;
}
@media (min-width: 60rem) {
  .hero--text .hero__strap { max-width: 36rem; }
}

/* Inner-page head */
.page-frame {
  position: relative;
}
.page-frame--tax .page-head { background: var(--paper-warm); }

/* Landing page treatment — minimal white hero so the primary CTA
   (widget, form) lands above the fold. Used by /free-consultation/
   and /contact/. The hero is a tight text block with the page title
   and a one-line strap; the primary conversion section starts
   immediately underneath with no visual interruption. */
.page-frame--landing .page-head {
  background: var(--surface);
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(1rem, 2vw, 1.5rem);
  border-bottom: none;
}
.page-frame--landing .page-head__inner { max-width: 52rem; }
.page-frame--landing .page-head h1 {
  margin: 0 auto 0.75rem;
  max-width: 22ch;
  font-size: clamp(1.85rem, 5vw, 3rem);
  line-height: 1.08;
  text-wrap: balance;
}
.page-frame--landing .page-strap {
  margin: 0 auto;
  max-width: none;
  font-weight: 400;
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* Strap break — hidden on small phones (natural wrap),
   forced at the period on mid-range viewports (480-1200px) so the
   two-line break lands at the natural phrase boundary, hidden again
   at ≥1200px so the strap can render on a single line on wide desktop. */
.page-strap__break { display: none; }
@media (min-width: 30rem) and (max-width: 74.99rem) {
  .page-strap__break { display: initial; }
}
.page-frame--consultation + .consultation-booking-section,
.page-frame--consultation ~ .consultation-booking-section {
  padding-top: 0;
}
.consultation-booking-section {
  padding-top: clamp(1rem, 2vw, 1.5rem);
}

/* Consultation page section heads — widen so longer intros don't
   wrap with orphan lines against the default 40rem section-head cap */
#fit-check .section-head {
  max-width: var(--max-wide);
}
#fit-check .section-head .section-intro {
  max-width: var(--max-medium);
  margin: 1rem auto 0;
  text-wrap: balance;
}

/* Contact schedule-instead section heads — widen to full page max so
   the 138-char intro renders on 1 line on wide desktop (≥1200px),
   naturally wraps to 2 lines on tablets/narrow desktops, and 3 on
   small phones. text-wrap: balance distributes the breaks evenly. */
#schedule-instead .section-head {
  max-width: var(--max);
}
#schedule-instead .section-head .section-intro {
  max-width: var(--max);
  margin: 1rem auto 0;
  text-wrap: balance;
}

/* Section heads widened for longer intros — used across
   homepage, /about/, /about/ian-atkinson-baker/, and
   /bookkeeping/. Widening past the default 40rem section-head
   cap keeps these paragraph-length intros on 1-2 lines on
   desktop instead of orphaning words at the default cap. */
#our-focus .section-head,
#meet-the-owners .section-head,
#about-ian .section-head,
#credentials .section-head,
#day-to-day .section-head,
#whats-included .section-head,
#what-we-handle .section-head,
#year-round .section-head,
#pricing .section-head,
#fit-check .section-head,
#featured-reviews .section-head,
#all-reviews .section-head,
#keep-reading .section-head,
#post-author .section-head,
#get-started .section-head {
  max-width: var(--max);
}
#our-focus .section-head .section-intro,
#meet-the-owners .section-head .section-intro,
#about-ian .section-head .section-intro,
#credentials .section-head .section-intro,
#day-to-day .section-head .section-intro,
#whats-included .section-head .section-intro,
#what-we-handle .section-head .section-intro,
#year-round .section-head .section-intro,
#pricing .section-head .section-intro,
#fit-check .section-head .section-intro,
#featured-reviews .section-head .section-intro,
#all-reviews .section-head .section-intro,
#keep-reading .section-head .section-intro,
#post-author .section-head .section-intro,
#get-started .section-head .section-intro {
  max-width: var(--max);
  margin: 1rem auto 0;
  text-wrap: pretty;
}

/* Contact form shell actions — fallback CTAs when form isn't wired */
.contact-form-shell__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
@media (max-width: 30rem) {
  .contact-form-shell__actions { flex-direction: column; }
  .contact-form-shell__actions .button { width: 100%; }
}

/* Contact page schedule-instead CTA row */
.contact-schedule-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* Contact page primary section — tight padding so the form lands
   close to the hero */
.contact-main-section {
  padding-top: clamp(1rem, 2vw, 1.5rem);
}

/* Contact layout — form + info sidebar split */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2rem);
  max-width: var(--max);
  margin: 0 auto;
}
.contact-layout__form {
  order: 2;
  min-width: 0;
}
.contact-layout__info {
  order: 1;
  min-width: 0;
}
@media (min-width: 60rem) {
  .contact-layout {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3rem);
    align-items: start;
  }
  .contact-layout__form { order: 1; }
  .contact-layout__info { order: 2; }
}

/* Contact info sidebar — phone/email/mailing details */
.contact-layout__info {
  padding: clamp(1.4rem, 3vw, 1.75rem);
  background: var(--paper-warm);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
}
.contact-info-sidebar__label {
  margin: 0 0 1.25rem;
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.contact-info-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.contact-info-sidebar__item {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  margin: 0;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--border-strong);
}
.contact-info-sidebar__item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.contact-info-sidebar__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--border);
}
.contact-info-sidebar__body { flex: 1; min-width: 0; }
.contact-info-sidebar__kind {
  margin: 0 0 0.2rem;
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-light);
}
.contact-info-sidebar__value {
  margin: 0;
  font-size: var(--type-md);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  word-break: break-word;
}
.contact-info-sidebar__value a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--speed) var(--ease-out),
              border-color var(--speed) var(--ease-out);
}
.contact-info-sidebar__value a:hover,
.contact-info-sidebar__value a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.contact-info-sidebar__meta {
  margin: 0.3rem 0 0;
  font-size: var(--type-sm);
  color: var(--muted);
  line-height: 1.4;
}

/* Contact form shell on landing page — full width inside its column */
.contact-layout__form .contact-form-shell {
  max-width: none;
  width: 100%;
}

.page-head {
  padding: clamp(3.5rem, 7vw, 5rem) 0 clamp(2rem, 4vw, 2.75rem);
  text-align: center;
  background: var(--paper-warm);
  border-bottom: 1px solid var(--border);
}
.page-head--with-audience { padding-bottom: clamp(1.5rem, 3vw, 2rem); }
.page-head__inner {
  max-width: var(--max-head);
  margin: 0 auto;
}
.page-head__lede { margin: 0 auto; }

/* Blog-specific head variant */
.page-head--blog {
  padding: clamp(3.5rem, 7vw, 5rem) 0 clamp(2rem, 4vw, 2.75rem);
  background: var(--paper-warm);
}
.page-head--blog__inner {
  max-width: var(--max-head);
  text-align: center;
  margin: 0 auto;
}
.page-head--blog__title {
  margin: 0 0 1rem;
}
.page-head--blog__lede {
  margin: 0 0 1rem;
  font-weight: 400;
  color: var(--ink-soft);
}
.page-head--blog__meta {
  margin: 0.85rem 0 0;
  font-size: var(--type-sm);
  font-weight: 600;
  color: var(--muted);
}

/* Blog topics nav — pill bar */
/* Topics nav — browse-by-topic strip on /blog/ (between hero and
   post grid). Standalone container with its own spacing; not
   anchored to a parent page-head. Rectangular 6px radius matches
   the sitewide card primitive instead of pill shapes. */
.blog-topics-nav {
  margin: 0 auto 2.5rem;
  max-width: var(--max-wide);
  padding: 0;
}
.blog-topics-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.blog-topics-nav__link {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: var(--type-sm);
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  transition: border-color var(--speed) var(--ease-out),
              color var(--speed) var(--ease-out),
              transform var(--speed) var(--ease-out);
}
.blog-topics-nav__link:hover,
.blog-topics-nav__link:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
.blog-topics-nav__link--active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.blog-topics-nav__link--active:hover,
.blog-topics-nav__link--active:focus-visible {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}

/* -------------------------------------------------------------
   10. Trust strip — pill row under hero
   ------------------------------------------------------------- */
.trust-strip {
  background: var(--paper-warm);
  border-bottom: 1px solid var(--border);
  padding: 0.9rem 0 1.1rem;
}
.trust-strip__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 0.65rem;
}
.trust-strip__item {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: none;
}

/* -------------------------------------------------------------
   11. Audience cards (For Business / For Individuals)
   ------------------------------------------------------------- */
.audience-strip {
  padding: clamp(1.5rem, 3vw, 2rem) 0 clamp(2rem, 4vw, 2.5rem);
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}
.audience-grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  max-width: var(--max-medium);
}
@media (min-width: 44rem) {
  .audience-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
.audience-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
}
.audience-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-pill);
  color: var(--accent);
  background: var(--accent-faint);
  border: 1px solid var(--border);
}
.audience-card__title {
  margin: 0;
  font-size: clamp(1.1rem, 1.8vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.25;
}
.audience-card__text {
  margin: 0;
  flex: 1;
  font-size: var(--type-md);
  line-height: 1.55;
  color: var(--muted);
}
.audience-card__link {
  margin-top: 0.25rem;
  font-size: var(--type-base);
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.audience-card__link::after {
  content: "→";
  transition: transform var(--speed) var(--ease-out);
}
.audience-card__link:hover { color: var(--accent-hover); }
.audience-card__link:hover::after { transform: translateX(3px); }

/* -------------------------------------------------------------
   12. Feature grid + cards
   ------------------------------------------------------------- */
.feature-grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  max-width: var(--max-wide);
}
@media (min-width: 44rem) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}
.feature-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.feature-card h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.feature-card p {
  margin: 0;
  font-size: var(--type-base);
  color: var(--muted);
  line-height: 1.55;
}
.feature-card__link {
  color: inherit;
  text-decoration: none;
}
.feature-card__link:hover { color: var(--accent); }

/* -------------------------------------------------------------
   13. Service list — bulleted cards with blue left accent
   ------------------------------------------------------------- */
.service-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: var(--max-medium);
}
.service-list li {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.service-list strong {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.service-list__desc {
  font-size: var(--type-md);
  line-height: 1.58;
  color: var(--muted);
}
.service-list__desc strong { font-size: inherit; }

/* -------------------------------------------------------------
   14. Process steps — numbered timeline
   ------------------------------------------------------------- */
.process-steps {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  gap: 1.5rem 1rem;
  max-width: var(--max-wide);
  counter-reset: process;
}
@media (min-width: 44rem) {
  .process-steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }
  .process-steps--three { grid-template-columns: repeat(3, 1fr); }
}
.process-step {
  position: relative;
  text-align: center;
  padding: 0 0.5rem;
  counter-increment: process;
}
.process-step__num {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  z-index: 1;
  border: 2px solid var(--paper);
}
.process-step__num::before { content: counter(process); }
.process-step__title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.3;
}
.process-step__text {
  margin: 0;
  font-size: var(--type-base);
  line-height: 1.55;
  color: var(--muted);
}
/* Dashed connector line between steps */
@media (min-width: 44rem) {
  .process-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1.5rem;
    left: calc(50% + 1.75rem);
    right: calc(-50% + 1.75rem);
    height: 1px;
    background-image: linear-gradient(90deg, var(--border-strong) 0, var(--border-strong) 4px, transparent 4px, transparent 10px);
    background-size: 10px 1px;
    background-repeat: repeat-x;
    pointer-events: none;
    z-index: 0;
  }
}

/* -------------------------------------------------------------
   15. Empathy card — narrative + checklist (2-col)
   ------------------------------------------------------------- */
.empathy-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 0 auto;
  max-width: var(--max-wide);
}
@media (min-width: 44rem) {
  .empathy-card {
    grid-template-columns: 1.15fr 1fr;
    gap: 1.25rem;
    align-items: stretch;
  }
}
.empathy-card__narrative p {
  margin: 0 0 0.85em;
  font-size: var(--type-md);
  line-height: 1.6;
  color: var(--muted);
}
.empathy-card__narrative p:last-child { margin-bottom: 0; }
.empathy-card__narrative strong {
  color: var(--ink);
  font-weight: 600;
}
.empathy-card__checklist {
  list-style: none;
  margin: 0;
}
.empathy-card__checklist li {
  position: relative;
  margin: 0 0 0.75rem;
  padding: 0 0 0 1.65rem;
  font-size: var(--type-md);
  line-height: 1.5;
  color: var(--ink);
}
.empathy-card__checklist li:last-child { margin-bottom: 0; }
.empathy-card__checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-pill);
  background: var(--accent-green);
}
.empathy-card__checklist li::after {
  content: "";
  position: absolute;
  left: 0.27rem;
  top: 0.56rem;
  width: 0.42rem;
  height: 0.22rem;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

/* -------------------------------------------------------------
   16. Fit-check — qualification list
   ------------------------------------------------------------- */
.fit-check {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  gap: 0.85rem;
  max-width: var(--max-wide);
}
@media (min-width: 40rem) {
  .fit-check {
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem 1rem;
  }
}
.fit-check__item {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  margin: 0;
}
.fit-check__dot {
  display: block;
  flex-shrink: 0;
  width: 0.6rem;
  height: 0.6rem;
  margin-top: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--accent);
}
.fit-check__text {
  flex: 1;
  font-size: var(--type-md);
  line-height: 1.5;
  color: var(--muted);
}
.fit-check__text strong {
  color: var(--ink);
  font-weight: 600;
}

/* -------------------------------------------------------------
   17. Inline callout — mid-content CTA / highlight
   ------------------------------------------------------------- */
.inline-callout {
  margin: 1.5rem auto 0;
  max-width: var(--max-medium);
}
.inline-callout__label {
  margin: 0 0 0.35rem;
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-green);
}
.inline-callout__title {
  margin: 0 0 0.55rem;
  font-size: clamp(1.1rem, 2vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.3;
  color: var(--ink);
}
.inline-callout__text {
  margin: 0 0 1rem;
  font-size: var(--type-md);
  line-height: 1.6;
  color: var(--muted);
}
.inline-callout__text:last-child { margin-bottom: 0; }
.inline-callout__action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.1rem;
  font-size: var(--type-base);
  font-weight: 700;
  color: #fff !important;
  background: var(--accent-green);
  border: 1px solid var(--accent-green);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background var(--speed) var(--ease-out),
              transform var(--speed) var(--ease-out);
}
.inline-callout__action:hover,
.inline-callout__action:focus-visible {
  background: var(--accent-green-hover);
  border-color: var(--accent-green-hover);
  transform: translateY(-1px);
  color: #fff !important;
}

/* -------------------------------------------------------------
   18. Prose aside — quoted callout box
   ------------------------------------------------------------- */
.prose-aside {
  margin: 1.5rem auto 0;
  padding: 1.5rem 1.65rem;
  max-width: var(--max-prose);
  background: var(--paper-warm);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-green);
  border-radius: var(--radius-lg);
}
.prose-aside p {
  margin: 0 0 1em;
  font-size: var(--type-md);
  line-height: 1.65;
  color: var(--muted);
}
.prose-aside p:last-child { margin-bottom: 0; }
.prose-aside strong { color: var(--ink); font-weight: 600; }

/* Prose meta line — e.g., "Last updated" on legal pages */
.prose-meta {
  margin: 0 0 1.5rem;
  font-size: var(--type-sm);
  color: var(--muted);
  padding: 0.55rem 0.9rem;
  background: var(--paper-warm);
  border-left: 3px solid var(--accent-green);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* -------------------------------------------------------------
   19. CTA panel — section-level call-to-action band
   ------------------------------------------------------------- */
.cta-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.75rem, 4vw, 2.25rem) clamp(1.75rem, 4vw, 2.5rem);
  background: var(--ink);
  color: #e8eef5;
  border: 1px solid var(--ink-soft);
  border-radius: var(--radius-lg);
  max-width: var(--max-medium);
  margin: 0 auto;
}
.cta-panel p {
  margin: 0;
  font-size: clamp(1.02rem, 1.8vw, 1.15rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.4;
  max-width: 34ch;
  color: #fff;
}
.cta-panel .button {
  flex-shrink: 0;
  background: var(--accent);
  border-color: var(--accent);
}
.cta-panel .button:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* Final CTA — homepage closing section, bookends the hero trust strip */
.final-cta {
  max-width: var(--max-medium);
  margin: 0 auto;
  text-align: center;
}
.final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin: 0;
}
.final-cta__actions .button {
  min-height: 2.9rem;
}
.final-cta__trust {
  list-style: none;
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
  padding: 1.35rem 0 0;
  border-top: 1px solid var(--border-strong);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem 1.5rem;
  font-size: var(--type-sm);
  font-weight: 600;
  color: var(--muted);
}
.final-cta__trust li {
  display: inline-flex;
  align-items: center;
  margin: 0;
}
.final-cta__link,
.final-cta__plain {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  padding: 0.25rem 0;
  border-bottom: 1px solid transparent;
}
.final-cta__link {
  text-decoration: none;
  transition: color var(--speed) var(--ease-out),
              border-color var(--speed) var(--ease-out);
}
.final-cta__link:hover,
.final-cta__link:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--accent-green);
}
.final-cta__link svg,
.final-cta__plain svg {
  flex-shrink: 0;
  color: var(--accent-green);
}
.final-cta__link strong {
  color: var(--ink);
  font-weight: 700;
}
.final-cta__divider {
  display: none;
  width: 1px;
  height: 1rem;
  background: var(--border-strong);
}
@media (min-width: 44rem) {
  .final-cta__divider { display: inline-block; }
  .final-cta__trust { gap: 0.65rem 1.75rem; }
}

/* Legacy article-cta — inline CTA inside long-form content */
.article-cta {
  margin-top: 2rem;
  padding: 1.5rem 1.65rem;
  text-align: center;
  background: var(--paper-warm);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
}
.article-cta__label {
  margin: 0 0 0.35rem;
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.article-cta__text {
  margin: 0 auto 1rem;
  font-size: var(--type-md);
  color: var(--muted);
  max-width: 32rem;
}
.article-cta .button { min-width: 10rem; }
.article-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
}

/* -------------------------------------------------------------
   20. FAQ — accordion using native <details>
   ------------------------------------------------------------- */
.faq-block { max-width: var(--max-medium); margin: 0 auto; }
.faq-block > .eyebrow,
.faq-block__title,
.faq-block__intro { display: none; }
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.faq-item {
  overflow: hidden;
  padding: 0;
}
.faq-item[open] {
  border-color: var(--border-strong);
}
.faq-item__summary {
  cursor: pointer;
  list-style: none;
  padding: 1.05rem 2.75rem 1.05rem 1.25rem;
  font-weight: 600;
  font-size: var(--type-md);
  letter-spacing: -0.015em;
  color: var(--ink);
  position: relative;
}
.faq-item__summary::-webkit-details-marker { display: none; }
.faq-item__summary::marker { content: ""; }
.faq-item__summary::after {
  content: "+";
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--accent);
  line-height: 1;
}
.faq-item[open] .faq-item__summary::after { content: "−"; }
.faq-item__body {
  padding: 0 1.25rem 1.1rem;
  border-top: 1px solid var(--border);
}
.faq-item[open] .faq-item__body { padding-top: 0.85rem; }
.faq-item__body p {
  margin: 0;
  font-size: var(--type-md);
  line-height: 1.58;
  color: var(--muted);
}
.faq-item__body p + p { margin-top: 0.65rem; }
.faq-item__body a { color: var(--accent); font-weight: 600; }

/* -------------------------------------------------------------
   21. Reviewed-by byline — YMYL author attribution
   ------------------------------------------------------------- */
.reviewed-by-strip {
  background: var(--paper-warm);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: clamp(1rem, 2.5vw, 1.35rem) 0;
}
.reviewed-by-strip .reviewed-by,
.article-shell .reviewed-by {
  max-width: var(--max-medium);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 0.85rem 1.15rem;
  align-items: center;
  padding: 0.85rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-green);
  border-radius: var(--radius-lg);
}
.reviewed-by__photo { margin: 0; }
.reviewed-by__photo img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-pill);
  background: var(--paper-deep);
}
.reviewed-by__label {
  margin: 0 0 0.2rem;
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-green);
}
.reviewed-by__name {
  margin: 0 0 0.15rem;
  font-size: var(--type-md);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.3;
}
.reviewed-by__name a {
  color: inherit;
  text-decoration: none;
}
.reviewed-by__name a:hover { color: var(--accent-green); }
.reviewed-by__meta {
  margin: 0;
  font-size: var(--type-sm);
  color: var(--muted);
  line-height: 1.4;
}
.reviewed-by__meta time {
  font-weight: 600;
  color: var(--ink-soft);
}
@media (max-width: 520px) {
  .reviewed-by-strip .reviewed-by,
  .article-shell .reviewed-by {
    grid-template-columns: 52px 1fr;
  }
  .reviewed-by__photo img { width: 52px; height: 52px; }
}

/* -------------------------------------------------------------
   22. Team bios — photo + body card
   ------------------------------------------------------------- */
/* Year rhythm — horizontal timeline showing the year-long tax
   engagement flow. Used on /tax-services/ Year-Round Approach
   section. 5 stages connected by a horizontal accent line on
   desktop; stacks vertically on mobile with left-side dots.
   Visually conveys continuous movement through the year rather
   than a static two-column narrative. */
.year-rhythm {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: var(--max-wide);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
  position: relative;
  counter-reset: none;
}
@media (min-width: 60rem) {
  .year-rhythm {
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    padding-top: 0.5rem;
  }
}

/* Desktop: horizontal connecting line from first dot center to last dot center */
@media (min-width: 60rem) {
  .year-rhythm::before {
    content: "";
    position: absolute;
    top: 1.375rem;
    left: 10%;
    right: 10%;
    height: 2px;
    background: var(--border-strong);
  }
}

.year-rhythm__stage {
  position: relative;
  padding: 1.25rem 0 1.25rem 2.5rem;
}
@media (min-width: 60rem) {
  .year-rhythm__stage {
    padding: 2.5rem 0.75rem 0 0.75rem;
    text-align: center;
  }
}

/* Dot marker — sits on the connecting line (desktop) or to the
   left of the content block (mobile). Solid accent-green circle. */
.year-rhythm__stage::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 1.65rem;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: var(--accent);
}
@media (min-width: 60rem) {
  .year-rhythm__stage::before {
    left: 50%;
    top: 1rem;
    transform: translateX(-50%);
  }
}

.year-rhythm__when {
  display: block;
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.4rem;
}
.year-rhythm__what {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.year-rhythm__detail {
  margin: 0;
  font-size: var(--type-sm);
  line-height: 1.55;
  color: var(--muted);
}

/* Post sticky reading bar — appears BELOW the main site header
   after the hero scrolls out of view on blog post pages. Desktop
   only (hidden below 60rem). The site header stays visible at
   the top with the logo and main nav; this bar stacks below it
   showing the article title + a Book-a-consultation CTA so the
   reader always sees both where-they-are (title) and where-to-go
   (CTA) while scrolling a long post. */
.post-sticky-cta {
  display: none;
}
.post-hero-sentinel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  opacity: 0;
}
.hero--post { position: relative; }
@media (min-width: 60rem) {
  .post-sticky-cta {
    display: block;
    position: fixed;
    top: 4.25rem;
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--paper);
    border-bottom: 1px solid var(--border-strong);
    box-shadow: 0 2px 10px rgba(26, 35, 50, 0.06);
    opacity: 0;
    transform: translateY(-120%);
    pointer-events: none;
    transition: opacity var(--speed) var(--ease-out), transform var(--speed) var(--ease-out);
  }
  .post-sticky-active .post-sticky-cta {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .post-sticky-cta__inner {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
  }
  .post-sticky-cta__back {
    flex: 0 0 auto;
    font-size: var(--type-sm);
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
    letter-spacing: 0.01em;
    white-space: nowrap;
    padding-right: 1.25rem;
    border-right: 1px solid var(--border-strong);
    transition: color var(--speed) var(--ease-out);
  }
  .post-sticky-cta__back:hover,
  .post-sticky-cta__back:focus-visible {
    color: var(--accent);
  }
  .post-sticky-cta__title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .post-sticky-cta__btn {
    flex: 0 0 auto;
    padding: 0.6rem 1.15rem;
    font-size: var(--type-sm);
  }
}

/* Post nav strip — prominent "more articles" navigation used on
   blog post pages inside the Keep Reading section, positioned
   above the related posts grid. Two strong links (All articles /
   Browse topic) on a subtle background so readers can jump back
   to the archive without scrolling past the closing CTA. */
.post-nav-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 2rem;
  margin: 0 auto 2.5rem;
  padding: 1rem 1.5rem;
  max-width: var(--max-wide);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: var(--type-sm);
  font-weight: 700;
}
.post-nav-strip__link {
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color var(--speed) var(--ease-out);
}
.post-nav-strip__link:hover,
.post-nav-strip__link:focus-visible { color: var(--ink); }

/* Post related grid — 2-3 related post cards shown in the Keep
   Reading section. Uses the same news-card macro the blog index
   uses, wrapped in a simple responsive grid. */
.post-related-grid {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: var(--max-wide);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 44rem) {
  .post-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 72rem) {
  .post-related-grid { grid-template-columns: repeat(3, 1fr); }
}
.post-related-grid > li { margin: 0; }

/* Legal document prose — clean, scannable treatment for /privacy/
   and /terms/. Narrow reading column, modest sans-serif H2s (not
   display serif — legal subheadings shouldn't compete visually
   with the page title), thin rule separator under the "Last
   updated" meta line, and accent-green links. */
.legal-doc {
  max-width: var(--max-prose);
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--muted);
}
.legal-doc__meta {
  margin: 0 0 2.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-strong);
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.legal-doc h2 {
  margin: 2.75rem 0 1rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.legal-doc h2:first-of-type { margin-top: 0; }
.legal-doc p {
  margin: 0 0 1.25rem;
}
.legal-doc p:last-child { margin-bottom: 0; }
.legal-doc ul {
  margin: 0 0 1.25rem;
  padding-left: 1.5rem;
}
.legal-doc li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}
.legal-doc li:last-child { margin-bottom: 0; }
.legal-doc strong { color: var(--ink); }
.legal-doc a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(47, 125, 88, 0.35);
  transition: text-decoration-color var(--speed) var(--ease-out);
}
.legal-doc a:hover,
.legal-doc a:focus-visible {
  text-decoration-color: var(--accent);
}

/* Featured quotes — stacked editorial pull-quote treatment used on
   /reviews/. No card chrome: 3 pull quotes in a narrow reading column,
   centered, with display-serif italic text, a decorative accent-green
   quote mark above each, and thin rule separators between them.
   Visually distinct from every other list/grid on the site — nothing
   else runs as plain text on the section background. */
.featured-quotes {
  display: grid;
  grid-template-columns: 1fr;
  list-style: none;
  padding: 0;
  max-width: var(--max-medium);
  margin: 0 auto;
}
.featured-quote {
  position: relative;
  padding: 2.75rem 1rem 2.25rem;
  text-align: center;
  border-top: 1px solid var(--border-strong);
}
.featured-quote:first-child {
  border-top: none;
  padding-top: 0.75rem;
}
.featured-quote__mark {
  display: block;
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 0.8;
  font-weight: 600;
  color: var(--accent);
  opacity: 0.4;
  margin-bottom: 0.75rem;
}
.featured-quote__text {
  margin: 0 auto 1.5rem;
  max-width: 38rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
  font-style: italic;
}
.featured-quote__attribution {
  margin: 0;
  padding: 0;
  border: none;
}
.featured-quote__author {
  margin: 0 0 0.2rem;
  font-size: var(--type-sm);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-style: normal;
}
.featured-quote__meta {
  margin: 0;
  font-size: var(--type-xs);
  color: var(--muted);
}

/* Review list — editorial 2-col list for the full review archive
   on /reviews/. No card chrome; thin rule separators between rows.
   Visually distinct from the pull-quote featured grid above AND
   from every other grid on the site (no icons, no numbers, no
   cream cards, no card borders). */
.review-list {
  display: grid;
  grid-template-columns: 1fr;
  list-style: none;
  padding: 0;
  max-width: var(--max-wide);
  margin: 0 auto;
}
@media (min-width: 56rem) {
  .review-list {
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
  }
}
.review-item {
  padding: 2rem 0;
  border-top: 1px solid var(--border-strong);
}
.review-item:first-child {
  border-top: none;
  padding-top: 0.5rem;
}
@media (min-width: 56rem) {
  .review-item:nth-child(2) {
    border-top: none;
    padding-top: 0.5rem;
  }
}
.review-item__header {
  margin-bottom: 0.85rem;
}
.review-item__author {
  margin: 0 0 0.15rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.review-item__meta {
  margin: 0;
  font-size: var(--type-xs);
  color: var(--muted);
}
.review-item__quote {
  margin: 0 0 0.9rem;
  font-size: var(--type-md);
  line-height: 1.65;
  color: var(--ink-soft);
}
.review-item__reply {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
  font-size: var(--type-sm);
  line-height: 1.55;
  color: var(--muted);
}
.review-item__reply-mark {
  color: var(--accent);
  font-weight: 700;
  font-style: normal;
  margin-right: 0.35rem;
}
.review-item__source {
  display: inline-block;
  font-size: var(--type-xs);
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.review-item__source:hover { text-decoration: underline; }

/* Tax services index — display-serif titles + prose.
   Used on /tax-services/ What We Handle section. Visually
   distinct from .feature-grid (no card chrome), .differentiators
   (no numbers), and .service-roster (no icons). The distinguishing
   element is the display-serif item title, which reads like an
   encyclopedia/reference entry rather than a card. */
.tax-services-index {
  display: grid;
  grid-template-columns: 1fr;
  list-style: none;
  padding: 0;
  max-width: var(--max-wide);
  margin: 0 auto;
}
@media (min-width: 48rem) {
  .tax-services-index {
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
  }
}
.tax-service {
  padding: 2rem 0;
  border-top: 1px solid var(--border);
}
.tax-service:first-child {
  border-top: none;
  padding-top: 0.5rem;
}
@media (min-width: 48rem) {
  .tax-service:nth-child(2) {
    border-top: none;
    padding-top: 0.5rem;
  }
}
.tax-service__title {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.tax-service__text {
  margin: 0;
  font-size: var(--type-md);
  line-height: 1.65;
  color: var(--muted);
}

/* Service roster — icon + title + description list. Used on
   /bookkeeping/ What's Included. 2-column borderless grid with
   thin rule separators. Per-item Lucide icons in a tinted
   accent-green badge make this visually distinct from the
   .feature-grid card pattern on /about/ Our Focus and the
   numbered .differentiators pattern on /about/ian-atkinson-baker/. */
.service-roster {
  display: grid;
  grid-template-columns: 1fr;
  list-style: none;
  padding: 0;
  max-width: var(--max-wide);
  margin: 0 auto;
}
@media (min-width: 48rem) {
  .service-roster {
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
  }
}
.service-roster__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: start;
  padding: 1.75rem 0;
  border-top: 1px solid var(--border);
}
.service-roster__item:first-child {
  border-top: none;
  padding-top: 0.5rem;
}
@media (min-width: 48rem) {
  .service-roster__item:nth-child(2) {
    border-top: none;
    padding-top: 0.5rem;
  }
}
.service-roster__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 8px;
  background: rgba(47, 125, 88, 0.08);
  color: var(--accent);
  flex-shrink: 0;
}
.service-roster__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}
.service-roster__body h3 {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.service-roster__body p {
  margin: 0;
  font-size: var(--type-md);
  line-height: 1.6;
  color: var(--muted);
}

/* Pricing callout — split headline (big price) + prose body.
   Used on /bookkeeping/ Pricing section as the visual anchor
   for the "flat rate, not hourly" positioning. Renders on a
   cream band, so the callout itself uses white card chrome
   to contrast. */
.pricing-callout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 1.75rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
}
@media (min-width: 48rem) {
  .pricing-callout {
    grid-template-columns: minmax(0, 16rem) 1fr;
    gap: 2.5rem;
    padding: 2.25rem 2.5rem;
    align-items: start;
  }
}
@media (min-width: 64rem) {
  .pricing-callout {
    grid-template-columns: minmax(0, 18rem) 1fr;
    gap: 3rem;
    padding: 2.5rem 3rem;
  }
}
.pricing-callout__headline {
  border-bottom: 1px solid var(--border);
  padding-bottom: 1.25rem;
}
@media (min-width: 48rem) {
  .pricing-callout__headline {
    border-bottom: none;
    border-right: 1px solid var(--border);
    padding-bottom: 0;
    padding-right: 2.5rem;
  }
}
@media (min-width: 64rem) {
  .pricing-callout__headline { padding-right: 3rem; }
}
.pricing-callout__eyebrow {
  margin: 0 0 0.5rem;
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.pricing-callout__price {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.pricing-callout__period {
  font-size: 0.45em;
  font-weight: 400;
  color: var(--muted);
  margin-left: 0.2em;
  letter-spacing: 0;
}
.pricing-callout__meta {
  margin: 0;
  font-size: var(--type-sm);
  color: var(--muted);
}
.pricing-callout__body p {
  margin: 0 0 1rem;
  font-size: var(--type-md);
  line-height: 1.65;
  color: var(--muted);
}
.pricing-callout__body p:last-child { margin-bottom: 0; }
.pricing-callout__body strong { color: var(--ink); }

/* Differentiators list — visually distinct from .feature-grid.
   Used on /about/ian-atkinson-baker/ "Why People Hire Ian"
   section. 2-col borderless list with large display-serif
   ordinal numbers as the visual anchor. Reads like an editorial
   manifesto instead of a card grid, so the two 6-item sections
   on /about/ (Our Focus) and /about/ian-.../ don't visually echo. */
.differentiators {
  display: grid;
  grid-template-columns: 1fr;
  list-style: none;
  padding: 0;
  max-width: var(--max-wide);
  margin: 0 auto;
}
@media (min-width: 48rem) {
  .differentiators {
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
  }
}
.differentiator {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: start;
  padding: 1.75rem 0;
  border-top: 1px solid var(--border);
}
.differentiator:first-child {
  border-top: none;
  padding-top: 0.5rem;
}
@media (min-width: 48rem) {
  .differentiator:nth-child(2) {
    border-top: none;
    padding-top: 0.5rem;
  }
}
.differentiator__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 500;
  line-height: 0.95;
  color: var(--accent);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.differentiator__body h3 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.differentiator__body p {
  margin: 0;
  font-size: var(--type-md);
  line-height: 1.6;
  color: var(--muted);
}

/* Ian profile — side-by-side photo + bio on the
   /about/ian-atkinson-baker/ About Ian section. Reads
   like a magazine feature profile instead of a narrow
   stacked prose column. Stacks on mobile, 2-col on tablet+. */
.ian-profile {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  max-width: var(--max-wide);
  margin: 0 auto;
}
@media (min-width: 48rem) {
  .ian-profile {
    grid-template-columns: minmax(0, 18rem) 1fr;
    gap: 2.5rem;
    align-items: start;
  }
}
@media (min-width: 64rem) {
  .ian-profile {
    grid-template-columns: minmax(0, 20rem) 1fr;
    gap: 3rem;
  }
}
.ian-profile__photo {
  margin: 0;
}
.ian-profile__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
}
.ian-profile__bio {
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--muted);
}
.ian-profile__bio p {
  margin: 0 0 1.15em;
}
.ian-profile__bio p:last-child { margin-bottom: 0; }
.ian-profile__bio strong { color: var(--ink); }

/* Team hero photo — single team portrait at the top of
   the Meet the Owners section on /about/. The photo is a
   square source (1:1) displayed at a moderate max-width
   so both faces stay visible without dominating. */
.team-hero {
  margin: 0 auto 2.5rem;
  max-width: 38rem;
  padding: 0;
}
.team-hero img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
}

/* Founders grid — two equal-height text-only cards.
   Used on /about/ below the team-hero photo. Stretches
   so both cards match in height regardless of content. */
.founders {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: var(--max-wide);
  margin: 0 auto;
}
@media (min-width: 60rem) {
  .founders { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
.founder-card {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  transition: border-color var(--speed) var(--ease-out), transform var(--speed) var(--ease-out);
}
.founder-card:hover {
  border-color: var(--ink-soft);
  transform: translateY(-1px);
}
.founder-card h3 {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.founder-card__role {
  margin: 0 0 1rem;
  font-size: var(--type-xs);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.founder-card p {
  margin: 0 0 0.85rem;
  font-size: var(--type-md);
  line-height: 1.65;
  color: var(--muted);
}
.founder-card p:last-child { margin-bottom: 0; }
.founder-card a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(47, 125, 88, 0.3);
}
.founder-card a:hover { text-decoration-color: var(--accent); }

.team-grid {
  display: grid;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: var(--max-wide);
}
@media (min-width: 48rem) {
  .team-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
}
.team-grid .team-bio { margin: 0; }
.team-bio {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.25rem 1.5rem;
  align-items: start;
  border-left-width: 3px;
  border-left-color: var(--accent);
}
.team-bio__figure { margin: 0; }
.team-bio__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--paper-deep);
}
.team-bio__body h3,
.team-bio__body > h2 {
  margin: 0 0 0.2rem;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.team-bio__body > h2::before,
.team-bio__body h2::before { content: none; }
.team-bio__body .team-bio__role {
  margin: 0 0 0.75rem;
  font-size: var(--type-xs);
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.team-bio__body p {
  margin: 0 0 0.65rem;
  font-size: var(--type-md);
  line-height: 1.6;
  color: var(--muted);
}
.team-bio__body p:last-child { margin-bottom: 0; }
.team-bio__body a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(28, 79, 224, 0.3);
  text-underline-offset: 0.18em;
}
.team-bio__body a:hover { text-decoration-color: var(--accent); }
@media (max-width: 640px) {
  .team-bio {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .team-bio__figure img { max-width: 220px; }
}

/* Team bio profile variant (about/ian page) */
.team-bio--profile {
  grid-template-columns: 260px 1fr;
  gap: 1.5rem 2rem;
}
.team-bio--profile .team-bio__body p {
  font-size: var(--type-md);
  line-height: 1.65;
}
@media (max-width: 640px) {
  .team-bio--profile { grid-template-columns: 1fr; }
  .team-bio--profile .team-bio__figure img { max-width: 260px; }
}

/* -------------------------------------------------------------
   23. Credentials — grid + strip variants
   ------------------------------------------------------------- */
.credentials-grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  max-width: var(--max-wide);
}
.credential-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.credential-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 72px;
  margin-bottom: 0.85rem;
}
.credential-card__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.credential-card__logo--text {
  background: var(--paper-warm);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  font-size: var(--type-sm);
  font-weight: 600;
  color: var(--accent);
  padding: 0.5rem;
  text-align: center;
  line-height: 1.25;
}
.credential-card__name {
  margin: 0;
  font-size: var(--type-base);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.credential-card__sub {
  margin: 0.2rem 0 0;
  font-size: var(--type-sm);
  color: var(--muted);
  line-height: 1.4;
}

/* Credentials logos — homepage logo row inside a section */
.credentials-logos {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.25rem, 4vw, 2.5rem);
  max-width: var(--max-wide);
}
.credentials-logos__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(140px, 18vw, 180px);
  height: clamp(72px, 9vw, 90px);
  margin: 0;
}
.credentials-logos__item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.82;
  transition: opacity var(--speed) var(--ease-out);
}
.credentials-logos__item img:hover { opacity: 1; }

/* -------------------------------------------------------------
   24. Who-we-are + service areas (homepage blocks)
   ------------------------------------------------------------- */
.who-we-are {
  max-width: var(--max-medium);
  margin: 0 auto;
  text-align: left;
  column-count: 1;
}
@media (min-width: 60rem) {
  .who-we-are {
    max-width: var(--max-wide);
    column-count: 2;
    column-gap: 2.75rem;
  }
  .who-we-are p { break-inside: avoid; }
}
.who-we-are p {
  margin: 0 0 1.1rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--muted);
}
.who-we-are p:last-child { margin-bottom: 0; }
.who-we-are strong { color: var(--ink); font-weight: 600; }

/* Section variant — statement pull-quote band
   Uses its own distinct background + accent treatment */
.section--statement {
  background: var(--ink);
  color: #e8eef5;
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  border-top: 1px solid var(--ink-soft);
  border-bottom: 1px solid var(--ink-soft);
}

/* Statement — editorial pull-quote / framing line */
.statement {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0;
  text-align: center;
  position: relative;
}
.section--statement .statement {
  padding: 0;
  border: none;
}
.statement__icon {
  position: absolute;
  left: 50%;
  top: -0.65rem;
  transform: translateX(-50%);
  width: 1.75rem;
  height: 1.75rem;
  background: var(--accent);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
}
.statement__label {
  margin: 0 0 0.85rem;
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.section--statement .statement__label {
  color: #8fc0a3;
}
.statement__text {
  margin: 0 auto;
  max-width: 46rem;
  padding: 0;
  border: none;
  background: none;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  color: var(--ink);
  quotes: none;
}
.section--statement .statement__text {
  color: #ffffff;
}
.statement__text::before,
.statement__text::after { content: none; }
.statement__text strong { font-weight: 700; }

/* Dark-section section-head content overrides — used on
   /reviews/ Featured Reviews, which runs as the "one dark moment"
   of that page. Scoped to .section-head inside .section--statement
   so the homepage's bare .statement pull quote (which has no
   section-head) is unaffected. */
.section--statement .section-head .eyebrow--section {
  color: #8fc0a3;
}
.section--statement .section-head .section-title {
  color: #ffffff;
}
.section--statement .section-head .section-title::after {
  background: #8fc0a3;
}
.section--statement .section-head .section-intro {
  color: rgba(255, 255, 255, 0.78);
}

.service-areas {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  max-width: var(--max-wide);
}
@media (min-width: 40rem) {
  .service-areas { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
}
.service-areas__item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.95rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: var(--type-base);
  color: var(--ink);
  letter-spacing: -0.01em;
  transition: border-color var(--speed) var(--ease-out),
              color var(--speed) var(--ease-out),
              transform var(--speed) var(--ease-out);
}
.service-areas__item:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
.service-areas__icon {
  flex-shrink: 0;
  color: var(--accent-green);
  transition: color var(--speed) var(--ease-out);
}
.service-areas__item:hover .service-areas__icon {
  color: var(--accent);
}
.service-areas__label {
  display: inline-block;
  line-height: 1.2;
}

/* -------------------------------------------------------------
   25. Post author card — author bio (blog posts + service pages)
   ------------------------------------------------------------- */
.post-author-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.25rem 1.5rem;
  align-items: start;
  margin: 0 auto;
  max-width: var(--max-medium);
}
.post-author-card__photo { margin: 0; }
.post-author-card__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-pill);
  background: var(--paper-deep);
}
.post-author-card__label {
  margin: 0 0 0.3rem;
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.post-author-card--service .post-author-card__label {
  color: var(--accent-green);
}
.post-author-card__name {
  margin: 0 0 0.2rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.post-author-card__name a {
  color: inherit;
  text-decoration: none;
}
.post-author-card__name a:hover { color: var(--accent); }
.post-author-card--service .post-author-card__name a:hover { color: var(--accent-green); }
.post-author-card__role {
  margin: 0 0 0.75rem;
  font-size: var(--type-sm);
  font-weight: 600;
  color: var(--muted);
}
.post-author-card__bio {
  margin: 0;
  font-size: var(--type-md);
  color: var(--muted);
  line-height: 1.6;
}
@media (max-width: 48rem) {
  .post-author-card {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .post-author-card__photo img { max-width: 96px; }
}

/* -------------------------------------------------------------
   26. Post related — services block
   ------------------------------------------------------------- */
.post-related {
  margin: 0 auto;
  max-width: var(--max-medium);
}
.post-related__eyebrow { display: none; }
.post-related__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.post-related__item {
  padding: 1.15rem 1.25rem;
}
.post-related__title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.post-related__title a {
  color: var(--ink);
  text-decoration: none;
}
.post-related__title a:hover { color: var(--accent); }
.post-related__text {
  margin: 0;
  font-size: var(--type-base);
  color: var(--muted);
  line-height: 1.55;
}

/* -------------------------------------------------------------
   27. Post footer nav (keep exploring)
   ------------------------------------------------------------- */
.post-footer-nav {
  max-width: var(--max-medium);
  margin: 0 auto;
  text-align: center;
}
.post-footer-nav__eyebrow,
.post-footer-nav__title { display: none; }
.post-footer-nav__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
.post-footer-nav__primary,
.post-footer-nav__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.7rem 1.25rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-size: var(--type-base);
  font-weight: 700;
  transition: background var(--speed) var(--ease-out),
              border-color var(--speed) var(--ease-out);
}
.post-footer-nav__primary {
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
}
.post-footer-nav__primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}
.post-footer-nav__secondary {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
}
.post-footer-nav__secondary:hover {
  color: var(--accent);
  border-color: var(--accent);
}
@media (max-width: 40rem) {
  .post-footer-nav__actions > * { width: 100%; }
}

/* -------------------------------------------------------------
   28. Blog post layout — hero, body, engagement
   ------------------------------------------------------------- */
.blog-nav-band {
  background: var(--paper-warm);
  border-bottom: 1px solid var(--border);
}
.blog-nav-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}
.blog-nav-band__crumbs {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  font-size: var(--type-sm);
  color: var(--muted);
}
.blog-nav-band__crumbs a {
  color: inherit;
  text-decoration: none;
}
.blog-nav-band__crumbs a:hover { color: var(--accent); }
.blog-nav-band__back {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--accent);
  text-decoration: none;
  font-size: var(--type-sm);
  font-weight: 700;
}
.blog-nav-band__back:hover { text-decoration: underline; }

.post-hero {
  text-align: center;
}
.post-hero__inner {
  max-width: var(--max-head);
  margin: 0 auto;
}
.post-hero__eyebrow {
  margin: 0 0 0.85rem;
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.post-hero__title {
  margin: 0 0 1rem;
  font-size: clamp(1.7rem, 4vw, 2.45rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--ink);
}
.post-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.5rem;
  margin: 0 0 1.1rem;
  font-size: var(--type-base);
  color: var(--muted);
}
.post-hero__byline {
  font-weight: 600;
  color: var(--ink);
}
.post-hero__byline a {
  color: var(--accent);
  text-decoration: none;
}
.post-hero__byline a:hover { text-decoration: underline; text-underline-offset: 3px; }
.post-hero__date { font-weight: 600; color: var(--ink); }
.post-hero__dot { color: var(--border-strong); }
.post-hero__updated,
.post-hero__read { font-weight: 400; color: var(--muted); }

.post-hero__tags {
  list-style: none;
  margin: 0 0 1.15rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
}
.post-hero__tag {
  display: inline-block;
  padding: 0.28rem 0.7rem;
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
.post-hero__dek {
  margin: 0 auto;
  max-width: 42rem;
  text-align: left;
  font-size: 1.125rem;
  line-height: 1.65;
  font-weight: 400;
  color: var(--ink-soft);
}

/* Blog post body — reading column matching the wider editorial
   pattern across the rest of the site. The old card chrome
   (border + bg + radius around .post-content) is dropped so the
   prose sits directly on the section background like every other
   page's content area. */
.post-body-section .article--blog,
.article--blog {
  max-width: var(--max-medium);
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
.article--blog .post-feature {
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}
.article--blog .post-feature img {
  display: block;
  width: 100%;
  height: auto;
}

.post-content {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--ink);
}
.post-content > *:first-child { margin-top: 0; }
.post-content > *:last-child { margin-bottom: 0; }

/* Neutralize legacy builder inline styles on imported content */
.post-content p[style],
.post-content li[style] { margin-left: 0 !important; }
.post-content span[style] {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  background: transparent !important;
}

.post-content p {
  margin: 0 0 1.15em;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.72;
  font-size: 1.0625rem;
}
.post-content p:empty { display: none; }

/* Blog-post H2: left accent bar for editorial reading rhythm */
.post-content h2 {
  display: flex;
  align-items: stretch;
  gap: 0.85rem;
  margin: clamp(2.25rem, 5vw, 3rem) 0 0.85rem;
  padding: 0;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.22;
  color: var(--ink);
  border: none;
}
.post-content h2::before {
  content: "";
  width: 3px;
  flex-shrink: 0;
  border-radius: 2px;
  background: var(--accent);
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}
.post-content h2::after { content: none; }
.post-content h2:first-child { margin-top: 0.25rem; }
.post-content h2[id] { scroll-margin-top: 5.5rem; }

.post-content h3 {
  margin: 2rem 0 0.75rem;
  padding: 0 0 0.5rem;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.28;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
  position: relative;
}
.post-content h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 2.5rem;
  height: 2px;
  background: var(--accent-green);
}
.post-content h3:first-of-type { margin-top: 0; }

.post-content ul,
.post-content ol {
  margin: 0 0 1.3em;
  padding-left: 1.35rem;
  color: var(--muted);
}
.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }
.post-content li {
  margin: 0.4em 0;
}
.post-content li::marker { color: var(--accent-green); }
.post-content strong {
  font-weight: 600;
  color: var(--ink);
}
.post-content a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(28, 79, 224, 0.3);
  text-underline-offset: 0.18em;
}
.post-content a:hover {
  color: var(--accent-hover);
  text-decoration-color: var(--accent);
}
.post-content blockquote {
  margin: 1.35rem 0;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--accent-green);
  background: var(--paper-warm);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink);
}
.post-content blockquote p { margin: 0; }

/* Post engagement (share bar + meta footer) inside section */
.post-engagement-section .post-engagement,
.post-engagement {
  max-width: 46rem;
  margin: 0 auto;
}

.post-share-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1.25rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.post-share-bar__label {
  margin: 0;
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.post-share-bar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.45rem;
}
.post-share-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: background var(--speed) var(--ease-out),
              color var(--speed) var(--ease-out),
              border-color var(--speed) var(--ease-out),
              transform var(--speed) var(--ease-out);
}
.post-share-bar__btn:hover,
.post-share-bar__btn:focus-visible {
  background: var(--paper-warm);
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.post-share-bar__btn svg { display: block; }

.post-meta-footer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem 2rem;
  margin: 0;
}
@media (min-width: 36rem) {
  .post-meta-footer { grid-template-columns: 1fr 1fr; }
}
.post-meta-footer__group { margin: 0; }
.post-meta-footer__label {
  margin: 0 0 0.5rem;
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.post-meta-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
}
.post-meta-footer__item { margin: 0; }
.post-meta-footer__link {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: border-color var(--speed) var(--ease-out),
              color var(--speed) var(--ease-out);
}
.post-meta-footer__link:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.post-meta-footer__tag {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
.post-meta-footer__tag::before {
  content: "#";
  margin-right: 0.1rem;
  color: var(--accent-green);
  font-weight: 700;
}

/* -------------------------------------------------------------
   29. Homepage blog feed (.news)
   ------------------------------------------------------------- */
/* -------------------------------------------------------------
   29. News grid — blog post preview list
   Used on the homepage Latest Notes section, /blog/ index, and
   /blog/topics/<id>/ pages. Lives inside a standard .section
   wrapper (no custom bg/border). 1 col mobile → 2 col tablet →
   3 col desktop. Matches the editorial pattern used elsewhere.
   ------------------------------------------------------------- */
.news-grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--max-wide);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}
@media (min-width: 48rem) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .news-grid { grid-template-columns: repeat(3, 1fr); }
}
.news-grid > li { margin: 0; }

/* Featured card — spans 2 cols on wide desktop, image on left,
   body on right. Creates the asymmetric "magazine cover" feel on
   the homepage Latest Notes section and the /blog/ index. */
.news-grid__item--featured { grid-column: 1 / -1; }
@media (min-width: 64rem) {
  .news-grid__item--featured { grid-column: span 2; grid-row: span 1; }
  .news-grid__item--featured .news-card { flex-direction: row; }
  .news-grid__item--featured .news-card__image-link {
    flex: 1.2;
    min-height: 100%;
    aspect-ratio: auto;
  }
  .news-grid__item--featured .news-card__body {
    flex: 1;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    justify-content: center;
  }
  .news-grid__item--featured .news-card__title {
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    line-height: 1.2;
  }
}

.news-grid__footer {
  margin: clamp(2.25rem, 4vw, 2.75rem) auto 0;
  display: flex;
  justify-content: center;
}
.news-grid__empty {
  text-align: center;
  color: var(--muted);
  font-size: var(--type-base);
}

/* -------------------------------------------------------------
   30. News card (blog post preview)
   Inherits the shared card primitive (bg, border, radius) from
   the card primitive block earlier in this file — this section
   only defines structure and typography. Title uses display serif
   to match the editorial H2 treatment on the rest of the site. */
.news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  overflow: hidden;
}
.news-card__image-link {
  display: block;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--paper-deep);
}
.news-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease-out);
}
.news-card:hover .news-card__image {
  transform: scale(1.035);
}
.news-card__image-link:has(.news-card__placeholder) {
  display: flex;
  align-items: center;
  justify-content: center;
}
.news-card__placeholder {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 600;
  color: var(--muted-light);
  letter-spacing: -0.03em;
}
.news-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.55rem;
  padding: 1.35rem 1.5rem 1.6rem;
  color: var(--ink);
}
.news-card__kicker {
  margin: 0 0 0.15rem;
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.news-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.news-card__title a {
  color: var(--ink);
  text-decoration: none;
  transition: color var(--speed) var(--ease-out);
}
.news-card__title a:hover { color: var(--accent); }
.news-card__meta {
  margin: 0;
  font-size: var(--type-xs);
  font-weight: 500;
  color: var(--muted);
}
.news-card__meta time { color: var(--muted); }
.news-card__excerpt {
  margin: 0;
  flex: 1;
  font-size: var(--type-sm);
  line-height: 1.6;
  color: var(--muted);
}
.news-card__read {
  margin-top: 0.75rem;
  align-self: flex-start;
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  transition: color var(--speed) var(--ease-out);
}
.news-card__read:hover,
.news-card__read:focus-visible { color: var(--ink); }
.news-card:hover .news-card__read { color: var(--ink); }

/* Blog archive grid */
.blog-archive {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
}
.blog-archive__inner { max-width: var(--max); }
.blog-archive__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 40rem) {
  .blog-archive__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 60rem) {
  .blog-archive__grid { grid-template-columns: repeat(3, 1fr); }
}
.blog-archive__cell { margin: 0; }
.blog-archive__empty {
  margin: 0;
  color: var(--muted);
  text-align: center;
}

/* Featured card on /blog/ — spans wider on desktop, image on left */
.blog-archive__cell--featured { grid-column: 1 / -1; }
@media (min-width: 60rem) {
  .blog-archive__cell--featured { grid-column: span 2; }
  .blog-archive__cell--featured .news-card { flex-direction: row; }
  .blog-archive__cell--featured .news-card__image-link {
    flex: 1.15;
    min-height: 100%;
    aspect-ratio: auto;
  }
  .blog-archive__cell--featured .news-card__body {
    flex: 1;
    padding: clamp(1.5rem, 3vw, 2rem);
    justify-content: center;
  }
  .blog-archive__cell--featured .news-card__title {
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    line-height: 1.2;
  }
}

/* -------------------------------------------------------------
   31. Reviews page
   ------------------------------------------------------------- */
.reviews-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.reviews-shell { max-width: var(--max); }
.reviews-featured-grid { align-items: stretch; }
.reviews-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 44rem) {
  .reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.review-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  height: 100%;
}
.review-card--featured { gap: 0.75rem; }
.review-card__head {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.review-card__author {
  margin: 0;
  font-size: var(--type-md);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.review-card__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted-light);
}
.review-card__quote {
  margin: 0;
  flex: 1;
  font-size: var(--type-md);
  line-height: 1.7;
  color: var(--muted);
}
.review-card__source {
  align-self: flex-start;
  font-size: var(--type-sm);
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
.review-card__source:hover { text-decoration: underline; }
.review-card__reply {
  padding: 0.85rem 1rem;
  background: var(--paper-warm);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-green);
  border-radius: var(--radius);
}
.review-card__reply-label {
  margin: 0 0 0.3rem;
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-green);
}
.review-card__reply-text {
  margin: 0;
  font-size: var(--type-base);
  line-height: 1.6;
  color: var(--muted);
}

/* -------------------------------------------------------------
   32. Contact page — channels + form
   ------------------------------------------------------------- */
.contact-channels {
  max-width: var(--max-wide);
  margin: 0 auto;
}
.contact-channels.feature-grid .feature-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: left;
}
.contact-channel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-pill);
  color: var(--accent);
  background: var(--accent-faint);
  border: 1px solid var(--border);
  margin-bottom: 0.35rem;
}
.contact-channel__icon svg { display: block; }
.contact-channel h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.contact-channel p {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-base);
  line-height: 1.55;
}
.contact-channel__value {
  margin-top: 0.4rem !important;
  font-size: var(--type-md) !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  line-height: 1.45 !important;
}
.contact-channel__value a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
}
.contact-channel__value a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-form-shell {
  max-width: var(--max-medium);
  margin: 0 auto;
  padding: clamp(1.75rem, 4vw, 2.5rem);
}
.contact-form-shell .placeholder {
  margin: 0;
  padding: 1.5rem;
  border: 1px dashed var(--border-strong);
  background: var(--paper-warm);
  border-radius: var(--radius-lg);
  color: var(--muted);
  font-size: var(--type-base);
  line-height: 1.6;
}
.contact-form-shell .placeholder a {
  color: var(--accent);
  font-weight: 600;
}

/* Legacy contact-grid — no longer used but kept as no-op for safety */
.contact-grid { display: block; padding: 0; }
.contact-details h2,
.contact-form h2 {
  margin-top: 0;
  font-size: var(--type-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.contact-details p { margin: 0.4rem 0; color: var(--ink); }
.contact-details a { color: var(--accent); font-weight: 600; }
.placeholder { color: var(--muted); }

/* -------------------------------------------------------------
   33. Article prose card — used by legal docs (privacy/terms)
   ------------------------------------------------------------- */
.article-shell {
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3rem, 7vw, 4.5rem);
  background: var(--paper);
}
.article.prose {
  max-width: var(--max-prose);
  margin: 0 auto;
  padding: clamp(2rem, 4.5vw, 3rem) clamp(1.5rem, 4vw, 2.75rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--ink);
}
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child { margin-bottom: 0; }
.prose h2 {
  display: flex;
  align-items: stretch;
  gap: 0.85rem;
  font-size: clamp(1.25rem, 2.3vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.22;
  margin: clamp(2.25rem, 5vw, 3rem) 0 1rem;
  color: var(--ink);
  padding: 0;
  border: none;
}
.prose h2::before {
  content: "";
  width: 3px;
  flex-shrink: 0;
  border-radius: 2px;
  background: var(--accent);
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}
.prose h2:first-of-type { margin-top: 0; }
.prose h2[id] { scroll-margin-top: 5.5rem; }
.prose h2 + p {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--muted);
}
.prose p {
  margin: 0 0 1.15em;
  font-weight: 400;
  color: var(--muted);
  max-width: 46rem;
}
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose ul, .prose ol {
  margin: 0 0 1.3em;
  padding-left: 1.35rem;
  color: var(--muted);
}
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin: 0.4em 0; }
.prose li::marker { color: var(--accent-green); }
.prose a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(28, 79, 224, 0.3);
  text-underline-offset: 0.18em;
}
.prose a:hover {
  color: var(--accent-hover);
  text-decoration-color: var(--accent);
}

/* -------------------------------------------------------------
   34. Footer
   ------------------------------------------------------------- */
.site-footer {
  margin-top: auto;
  background: var(--ink);
  color: #c8d0dc;
  font-size: var(--type-sm);
  border-top: 1px solid var(--ink-soft);
}
.site-footer a {
  color: #e8eef5;
  text-decoration: none;
  transition: color var(--speed) var(--ease-out);
}
.site-footer a:hover,
.site-footer a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__main {
  padding: clamp(2.75rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem 2rem;
}
@media (min-width: 36rem) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.25rem 2.5rem;
  }
}
@media (min-width: 60rem) {
  .site-footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr 1.35fr;
    gap: 2rem 2.5rem;
  }
}
.site-footer__col { min-width: 0; }

/* Brand column */
.site-footer__brand {
  max-width: 22rem;
}
@media (min-width: 36rem) and (max-width: 59.99rem) {
  .site-footer__brand { grid-column: 1 / -1; max-width: 32rem; }
}
.site-footer__formerly {
  margin: 0 0 0.45rem;
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8fc0a3;
}
.site-footer__logo {
  display: inline-block;
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.015em;
  color: #fff;
}
.site-footer__logo:hover { color: #fff; text-decoration: none; }
.site-footer__tagline {
  margin: 0 0 1.5rem;
  font-size: var(--type-sm);
  line-height: 1.55;
  color: #c8d0dc;
  max-width: 24rem;
}

/* Column labels — slightly larger than the site's section eyebrows since
   they stand alone in the footer without a headline anchoring them below */
.site-footer__col-label {
  margin: 0 0 2rem;
  font-size: var(--type-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8fc0a3;
}

/* Nav link lists */
.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.site-footer__links a {
  display: inline-block;
  font-size: var(--type-base);
  font-weight: 500;
  color: #e8eef5;
}

/* Contact column */
.site-footer__contact {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.site-footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0;
  font-size: var(--type-sm);
  line-height: 1.5;
  color: #c8d0dc;
}
.site-footer__contact svg {
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: #8fc0a3;
}
.site-footer__contact a {
  color: #e8eef5;
  font-weight: 600;
}
.site-footer__remote {
  color: #e8eef5;
  font-weight: 500;
}
.site-footer__mailing {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  font-weight: 400;
  color: rgba(200, 208, 220, 0.7);
  line-height: 1.5;
  letter-spacing: 0.005em;
}

/* Client portal utility link inside footer */
.site-footer__portal {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.95rem;
  font-size: var(--type-sm);
  font-weight: 600;
  color: #e8eef5;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background var(--speed) var(--ease-out),
              border-color var(--speed) var(--ease-out),
              color var(--speed) var(--ease-out);
}
.site-footer__portal:hover,
.site-footer__portal:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  text-decoration: none;
}
.site-footer__portal svg {
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
}

/* Social icons */
.site-footer__social-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  gap: 0.5rem;
}
.site-footer__social-list li { margin: 0; }
.site-footer__social-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: var(--radius-pill);
  color: #e8eef5;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: background var(--speed) var(--ease-out),
              border-color var(--speed) var(--ease-out),
              transform var(--speed) var(--ease-out);
}
.site-footer__social-list a:hover,
.site-footer__social-list a:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

/* Legal bar */
.site-footer__legal {
  padding: 1.2rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.site-footer__legal-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}
.site-footer__legal-copy {
  margin: 0;
  font-size: var(--type-sm);
  color: rgba(200, 208, 220, 0.65);
}
.site-footer__legal-links {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--type-sm);
}
.site-footer__legal-links a {
  color: #e8eef5;
  font-weight: 500;
}
.site-footer__legal-links span {
  color: rgba(255, 255, 255, 0.3);
}

/* -------------------------------------------------------------
   34b. Free consultation landing — booking layout + placeholder
   ------------------------------------------------------------- */
.consultation-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2rem);
  max-width: var(--max-wide);
  margin: 0 auto;
}
@media (min-width: 56rem) {
  .consultation-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: clamp(1.75rem, 3vw, 2.25rem);
    align-items: start;
  }
}

/* Sidebar card — who you'll talk to + what you'll get */
.consultation-info {
  background: var(--paper-warm);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 1.85rem);
}
.consultation-info__head {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0 0 1.15rem;
  margin: 0 0 1.15rem;
  border-bottom: 1px solid var(--border);
}
.consultation-info__photo {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--paper-deep);
}
.consultation-info__label {
  margin: 0 0 0.15rem;
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.consultation-info__name {
  margin: 0 0 0.1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.consultation-info__title {
  margin: 0;
  font-size: var(--type-sm);
  color: var(--muted);
}
.consultation-info__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.consultation-info__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--muted);
}
.consultation-info__list svg {
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: var(--accent);
}
.consultation-info__list strong {
  color: var(--ink);
  font-weight: 600;
}

/* Widget container + placeholder (sized like the real GHL calendar so
   swapping in the iframe later is visually seamless) */
.consultation-widget {
  min-width: 0;
}
.booking-placeholder {
  background: var(--surface);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem);
  min-height: 22rem;
  max-width: var(--max-medium);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
@media (min-width: 48rem) {
  .booking-placeholder { min-height: 28rem; }
}
@media (min-width: 64rem) {
  .booking-placeholder { min-height: 32rem; }
}
.booking-placeholder__inner {
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.booking-placeholder__icon {
  color: var(--accent);
  margin-bottom: 0.85rem;
  width: 40px;
  height: 40px;
}
@media (min-width: 48rem) {
  .booking-placeholder__icon { width: 44px; height: 44px; }
}
.booking-placeholder__label {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.4vw, 1.3rem);
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.25;
}
.booking-placeholder__hint {
  margin: 0 0 1.5rem;
  font-size: clamp(0.95rem, 1.8vw, 1rem);
  line-height: 1.6;
  color: var(--muted);
  max-width: 28rem;
}
.booking-placeholder__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  max-width: 28rem;
}
.booking-placeholder__actions .button {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}
@media (max-width: 29.99rem) {
  .booking-placeholder__actions { flex-direction: column; }
  .booking-placeholder__actions .button {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* -------------------------------------------------------------
   35. Utilities
   ------------------------------------------------------------- */
.page-sections { display: block; }

/* Hide scroll on body when mobile nav open */
.nav-open body { overflow: hidden; }