/* ============================================================
   TAX FILINGS — MODERN DESIGN LAYER (loads after style.css)
   Same brand system (bookcloth / slate / ivory, Newsreader + Inter),
   new layout language: airier rhythm, oversized serif headings,
   border-first surfaces, glassy nav, choreographed motion.
   Motion states are gated behind html.tfs-motion (added by JS only
   when Motion One loads and reduced-motion is off) so content is
   never hidden without JavaScript.
   ============================================================ */

:root {
  --m-radius: 20px;
  --m-radius-lg: 28px;
  --m-border: 1px solid rgba(25, 25, 25, 0.09);
  --m-border-strong: 1px solid rgba(25, 25, 25, 0.14);
  --m-shadow-hover: 0 18px 44px -14px rgba(25, 25, 25, 0.18);
  --m-shadow-ring: 0 0 0 4px rgba(204, 120, 92, 0.16);
  --m-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Typography: bigger, tighter, balanced ────────────────── */
.section-header h2,
.section .section-header h2 {
  font-size: clamp(1.9rem, 3vw, 2.55rem) !important;
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
  font-weight: 600;
}
.section-header p {
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: pretty;
}
.section-header .accent-line {
  height: 4px !important;
  width: 44px !important;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--primary), var(--color-kraft)) !important;
}
h1 { text-wrap: balance; }

/* ── Section rhythm: room to breathe ──────────────────────── */
.section { padding: clamp(72px, 9vw, 118px) 0; }
.section-header { margin-bottom: clamp(40px, 5vw, 64px); }

/* ── Buttons: confident pills with real states ────────────── */
.btn {
  border-radius: 999px !important;
  padding: 15px 32px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.35s var(--m-ease), box-shadow 0.35s var(--m-ease),
              background-color 0.25s var(--m-ease), border-color 0.25s var(--m-ease),
              color 0.25s var(--m-ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--m-shadow-hover); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn:focus-visible { outline: none; box-shadow: var(--m-shadow-ring); }
.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
  border: none;
}
.btn-primary:hover { box-shadow: 0 18px 40px -12px rgba(204, 120, 92, 0.55); }

/* ── Hero headline: full presence ─────────────────────────── */
.hero h1 { font-size: clamp(2.2rem, 4vw, 3.15rem) !important; }

/* ── Header: glass nav ─────────────────────────────────────
   The blur lives on a ::before overlay, NOT on .header itself:
   backdrop-filter creates a containing block for position:fixed
   descendants, which broke the mobile nav drawer inside the header. */
.header {
  background: rgba(250, 250, 247, 0.82);
  border-bottom: var(--m-border);
  box-shadow: none;
}
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  pointer-events: none;
}
.header .container { position: relative; }
.header.scrolled {
  background: rgba(250, 250, 247, 0.92);
  box-shadow: 0 8px 32px -16px rgba(25, 25, 25, 0.16);
}
/* Mobile / tablet drawer. Raised to 1080px: with 9 nav items plus the phone
   pill, the horizontal nav gets cramped below ~1150px, so the tablet zone
   (769-1080) uses the hamburger drawer rather than an overflowing bar. This
   block fully establishes the drawer so it works across the whole range, not
   only below style.css's 768px breakpoint.
   The toggle stays ABOVE the open drawer so the menu can always be closed. */
@media (max-width: 1080px) {
  .menu-toggle { display: flex !important; position: relative; z-index: 1300; }
  .main-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 380px;
    height: 100vh;
    flex-direction: column;
    padding: 88px 25px 30px !important;
    background: #FAFAF7 !important;
    box-shadow: 0 24px 64px -20px rgba(25, 25, 25, 0.35);
    transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    z-index: 1200 !important;
    gap: 0;
  }
  .main-nav.active { right: 0; }
  .main-nav > li { width: 100%; text-align: left; }
  .main-nav > li > a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-radius: 10px !important;
    padding: 14px 12px !important;
    border-bottom: 1px solid var(--color-ivory-dark);
  }
  /* Dropdowns become tap-to-expand accordions inside the drawer. */
  .dropdown, .mega-menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    min-width: auto !important;
    padding: 0 0 8px 14px !important;
    display: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    grid-template-columns: 1fr !important;
  }
  .main-nav > li.open > .dropdown,
  .main-nav > li.open > .mega-menu { display: block !important; }
}
.main-nav > li > a {
  border-radius: 999px;
  padding: 9px 16px;
  transition: background-color 0.25s var(--m-ease), color 0.25s var(--m-ease);
}
.main-nav > li > a:hover,
.main-nav > li > a.active { background: rgba(204, 120, 92, 0.1); }
.dropdown, .mega-menu {
  border-radius: var(--m-radius) !important;
  border: var(--m-border);
  box-shadow: 0 24px 64px -20px rgba(25, 25, 25, 0.25) !important;
  overflow: hidden;
}

/* ── Page banner: light editorial masthead on every detail page
   (matches the homepage hero language: ivory, faint grid, warm
   glow, slate serif, chip breadcrumb) ─────────────────────── */
.page-banner {
  background: var(--color-ivory-light) !important;
  padding: clamp(110px, 14vw, 164px) 0 clamp(48px, 7vw, 76px) !important;
  text-align: left !important;
  isolation: isolate;
  border-bottom: 1px solid var(--color-ivory-dark);
}
.page-banner::before {
  top: auto !important;
  bottom: -55% !important;
  right: -8% !important;
  width: 680px !important;
  height: 680px !important;
  background: radial-gradient(closest-side, rgba(204, 120, 92, 0.14), transparent 70%) !important;
  border-radius: 50%;
  filter: none !important;
}
.page-banner::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  background-image:
    linear-gradient(rgba(25, 25, 25, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25, 25, 25, 0.04) 1px, transparent 1px) !important;
  background-size: 56px 56px !important;
  -webkit-mask-image: radial-gradient(60rem 30rem at 30% 0%, #000 25%, transparent 75%);
  mask-image: radial-gradient(60rem 30rem at 30% 0%, #000 25%, transparent 75%);
  border-radius: 0;
  pointer-events: none;
}
.page-banner h1 {
  color: var(--color-slate-dark) !important;
  font-size: clamp(2.1rem, 4vw, 3.05rem) !important;
  letter-spacing: -0.03em;
  line-height: 1.08 !important;
  max-width: 24ch;
  text-wrap: balance;
  margin-bottom: 22px !important;
}
.page-banner .breadcrumb {
  display: inline-flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--color-ivory-dark);
  border-radius: 999px;
  padding: 8px 18px !important;
  font-size: 0.82rem !important;
  justify-content: flex-start !important;
  color: var(--color-slate-med) !important;
  box-shadow: 0 6px 18px -10px rgba(25, 25, 25, 0.12);
}
.page-banner .breadcrumb a { color: var(--color-slate-med) !important; opacity: 0.9; }
.page-banner .breadcrumb a:hover { color: var(--primary) !important; opacity: 1; }
.page-banner .breadcrumb span { color: var(--color-slate-dark) !important; }
.page-banner .breadcrumb .separator { opacity: 0.4; margin: 0 6px; color: var(--color-cloud-med) !important; }

/* ── Dark hero: depth without noise ───────────────────────── */
.hero {
  position: relative;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(56rem 30rem at 82% 8%, rgba(204, 120, 92, 0.16), transparent 60%),
    radial-gradient(40rem 26rem at 8% 96%, rgba(212, 162, 127, 0.10), transparent 65%);
  pointer-events: none;
}
.hero h1 { letter-spacing: -0.025em; line-height: 1.08; }

/* ── Cards: border-first, lift on intent ──────────────────── */
.service-card,
.review-card,
.pricing-card,
.team-card,
.case-study,
.faq-item,
.subsector-hover-card,
.loc-srv-card,
.blog-card,
.insight-card {
  border-radius: var(--m-radius) !important;
  border: var(--m-border);
  box-shadow: none;
  transition: transform 0.45s var(--m-ease), box-shadow 0.45s var(--m-ease),
              border-color 0.3s var(--m-ease);
}
.service-card:hover,
.pricing-card:hover,
.team-card:hover,
.case-study:hover,
.subsector-hover-card:hover,
.blog-card:hover,
.insight-card:hover {
  transform: translateY(-6px);
  border-color: rgba(204, 120, 92, 0.35);
  box-shadow: var(--m-shadow-hover);
}
.review-card { background: #fff; }
.service-card .card-icon {
  border-radius: 16px !important;
  transition: transform 0.45s var(--m-ease), background-color 0.3s var(--m-ease);
}
.service-card:hover .card-icon { transform: scale(1.08) rotate(-4deg); }

/* ── FAQ: quiet accordions ────────────────────────────────── */
.faq-item { overflow: hidden; background: #fff; margin-bottom: 12px; }
.faq-question {
  font-weight: 600;
  padding: 20px 24px !important;
  transition: background-color 0.25s var(--m-ease), color 0.25s var(--m-ease);
}
.faq-question:hover { background: rgba(204, 120, 92, 0.06); }
.faq-item.active .faq-question { color: var(--primary); }
.faq-answer-inner { padding: 0 24px 20px !important; }

/* ── Tables ───────────────────────────────────────────────── */
.section table { border-radius: var(--m-radius); overflow: hidden; }

/* ── Workflow / dark bands ────────────────────────────────── */
.workflow-section { position: relative; isolation: isolate; }
.workflow-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(48rem 26rem at 88% 0%, rgba(204, 120, 92, 0.12), transparent 62%);
  pointer-events: none;
}

/* ── CTA banner: closing panel ─────────────────────────────── */
/* The band itself is now just page background; the dark treatment lives on an
   inset rounded panel so the CTA reads as a deliberate closing card. */
.cta-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(48px, 6vw, 90px) 0 !important;
}
/* Only the panel layout turns the band into page background. A few pages
   (e.g. the tax calculator) still use a bare .cta-banner and must keep the
   legacy dark gradient behind their light text. */
.cta-banner:has(.cta-panel) {
  background: var(--color-ivory-light) !important;
}
.cta-banner:has(.cta-panel)::before,
.cta-banner:has(.cta-panel)::after { display: none !important; }

.cta-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  border-radius: 28px;
  padding: clamp(40px, 6vw, 76px) clamp(24px, 5vw, 64px);
  border: 1px solid rgba(235, 219, 188, 0.14);
  background:
    radial-gradient(52rem 26rem at 50% -40%, rgba(204, 120, 92, 0.22), transparent 62%),
    linear-gradient(160deg, #1f1f1f 0%, var(--color-slate-dark) 52%, #0e0e0e 100%);
  box-shadow: 0 24px 60px -22px rgba(25, 25, 25, 0.45);
}
.cta-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(30rem 18rem at 88% 118%, rgba(212, 162, 127, 0.20), transparent 62%);
}

.cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-manilla);
  background: rgba(235, 219, 188, 0.10);
  border: 1px solid rgba(235, 219, 188, 0.22);
}
.cta-eyebrow i { font-size: 0.85em; opacity: 0.85; }

/* markup uses h3; style.css only ever coloured h2, which left the heading
   dark-on-dark and effectively invisible */
.cta-banner h2,
.cta-banner h3 {
  color: var(--color-ivory-light) !important;
  font-family: var(--font-serif) !important;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem) !important;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-wrap: balance;
  max-width: 24ch;
  margin: 0 auto 16px !important;
}
.cta-banner p {
  color: rgba(250, 250, 247, 0.72) !important;
  font-size: 1.06rem !important;
  line-height: 1.6;
  max-width: 54ch;
  margin: 0 auto !important;
}
.cta-banner .btn-group {
  margin-top: 32px;
  gap: 14px;
  flex-wrap: wrap;
}

.cta-trust {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  font-size: 0.88rem;
  color: rgba(250, 250, 247, 0.62);
}
.cta-trust li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cta-trust li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-kraft);
  flex: none;
}

@media (max-width: 560px) {
  .cta-panel { border-radius: 22px; }
  .cta-banner .btn-group { flex-direction: column; align-items: stretch; }
  .cta-banner .btn-group .btn { width: 100%; }
  .cta-trust { flex-direction: column; align-items: center; gap: 10px; }
}

/* ── Light bands: subtle dot texture for depth ────────────── */
.section-gray,
.section.section-gray {
  background-image: radial-gradient(rgba(25, 25, 25, 0.045) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* ── Footer: quieter, more ordered ────────────────────────── */
.footer a { transition: color 0.2s var(--m-ease), transform 0.2s var(--m-ease); }
.footer a:hover { color: var(--primary) !important; }

/* ── Imagery ──────────────────────────────────────────────── */
.section img { border-radius: var(--m-radius); }
.header img, .footer img, .reviews-bar img { border-radius: 0; }

/* ── Selection + scrollbar accents ────────────────────────── */
::selection { background: rgba(204, 120, 92, 0.25); }

/* ── HERO v2: light editorial (FleexStudio-reference layout,
   Tax Filings palette): slate headline w/ manilla marker highlight,
   scribble arrow, bookcloth circle stage behind the cutout,
   sticker badge, floating stat cards, pointer parallax ───────── */
.hero.hero-v2 {
  padding: clamp(28px, 4vw, 48px) 0 0;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  background: var(--color-ivory-light);
}
.hero.hero-v2 .container {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
  padding-bottom: clamp(40px, 6vw, 72px);
}

/* Soft warm light fields + faint grid on ivory */
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  will-change: transform, translate;
  transition: translate 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.aurora-1 {
  width: 48rem; height: 30rem;
  right: -10rem; top: -12rem;
  background: radial-gradient(closest-side, rgba(204, 120, 92, 0.16), transparent 70%);
  animation: aurora-a 16s ease-in-out infinite alternate;
}
.aurora-2 {
  width: 36rem; height: 24rem;
  left: -12rem; bottom: -10rem;
  background: radial-gradient(closest-side, rgba(212, 162, 127, 0.18), transparent 70%);
  animation: aurora-b 21s ease-in-out infinite alternate;
}
.aurora-3 {
  width: 26rem; height: 20rem;
  left: 38%; top: 50%;
  background: radial-gradient(closest-side, rgba(235, 219, 188, 0.35), transparent 70%);
  animation: aurora-c 18s ease-in-out infinite alternate;
}
@keyframes aurora-a {
  from { transform: translate3d(-4%, 0, 0) scale(1); }
  to   { transform: translate3d(5%, 6%, 0) scale(1.14); }
}
@keyframes aurora-b {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(8%, -7%, 0) scale(1.18); }
}
@keyframes aurora-c {
  from { transform: translate3d(0, 4%, 0) scale(1.1); }
  to   { transform: translate3d(-7%, -5%, 0) scale(0.95); }
}
.hero-gridlines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(25, 25, 25, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25, 25, 25, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70rem 40rem at 50% 0%, #000 25%, transparent 72%);
  mask-image: radial-gradient(70rem 40rem at 50% 0%, #000 25%, transparent 72%);
}

/* Editorial stack (left column) */
.hero-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  position: relative;
}
.hero-tagline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid var(--color-ivory-dark);
  color: var(--color-slate-med) !important;
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 0.8rem !important;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin: 0 0 26px !important;
  box-shadow: 0 6px 18px -8px rgba(25, 25, 25, 0.12);
}
.hero-tagline .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(204, 120, 92, 0.2);
  animation: hero-pulse 2.4s ease-in-out infinite;
}
@keyframes hero-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(204, 120, 92, 0.25); }
  50% { box-shadow: 0 0 0 7px rgba(204, 120, 92, 0.06); }
}
.hero.hero-v2 h1 {
  font-size: clamp(2.3rem, 3.9vw, 3.35rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--color-slate-dark) !important;
}
.hero.hero-v2 h1 span {
  font-style: normal;
  color: var(--color-slate-dark);
  background: linear-gradient(100deg, var(--color-manilla) 0%, #e6cfa4 100%);
  border-radius: 10px;
  padding: 0.02em 0.28em 0.06em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* Hand-drawn arrow pointing at the portrait */
.hero-arrow {
  position: absolute;
  top: clamp(96px, 11vw, 150px);
  right: -4%;
  width: clamp(70px, 8vw, 110px);
  color: var(--color-slate-med);
  transform: rotate(8deg);
  pointer-events: none;
}
.hero.hero-v2 .hero-subtitle {
  font-size: 1.08rem !important;
  color: var(--color-slate-med) !important;
  font-weight: 600;
  margin-top: 22px !important;
}
.hero.hero-v2 .hero-subtitle em {
  font-style: normal;
  color: var(--primary);
  font-weight: 700;
}
.hero.hero-v2 .hero-text {
  font-size: 1rem !important;
  line-height: 1.75 !important;
  color: var(--color-cloud-dark) !important;
  max-width: 54ch;
  margin-top: 12px !important;
}
.hero-ctas { margin-top: 30px !important; gap: 14px; justify-content: flex-start; }
.hero-ctas .btn {
  padding: 16px 32px !important;
  font-size: 0.93rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px !important;
}
.hero-btn-ghost {
  background: var(--color-slate-dark) !important;
  border: 1px solid var(--color-slate-dark) !important;
  color: #fff !important;
}
.hero-btn-ghost:hover {
  background: var(--color-slate-med) !important;
  border-color: var(--color-slate-med) !important;
}

/* Credential chips (light) */
.hero-cred-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 30px;
}
.hero-cred-row .hero-badge-item {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto !important;
  margin: 0 !important;
  background: #fff !important;
  border: 1px solid var(--color-ivory-dark) !important;
  border-radius: 999px !important;
  color: var(--color-slate-dark) !important;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 9px 16px !important;
  box-shadow: none !important;
  transition: border-color 0.25s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
}
.hero-cred-row .hero-badge-item:hover {
  transform: translateY(-2px);
  border-color: rgba(204, 120, 92, 0.45) !important;
  box-shadow: 0 10px 24px -12px rgba(25, 25, 25, 0.18) !important;
}
.hero-cred-row .hero-badge-item small { font-weight: 400; opacity: 0.7; font-size: 0.9em; }
.hero-cred-row .hero-badge-item i { color: var(--primary); }

/* Collage: bookcloth circle stage + cutout + floats (right column) */
.hero-collage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 600px;
  align-self: end;
  /* cancel the container's bottom padding so the portrait sits flush
     on the hero section's bottom edge */
  margin-bottom: calc(-1 * clamp(40px, 6vw, 72px));
}
.hero-collage::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%);
  width: min(490px, 92%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side at 38% 30%, #d98d6f 0%, var(--primary) 55%, var(--primary-dark) 100%);
  box-shadow: 0 40px 90px -34px rgba(176, 97, 72, 0.55);
}
.hero-portrait {
  position: relative;
  z-index: 1;
  will-change: transform;
}
.hero-expert-img {
  max-height: 610px;
  width: auto;
  border-radius: 0 !important;
  border: none;
  box-shadow: none;
  filter: drop-shadow(0 34px 44px rgba(25, 25, 25, 0.3));
}
.hero-sticker {
  position: absolute;
  top: 9%;
  left: 4%;
  z-index: 3;
  background: var(--color-slate-dark);
  color: #FAFAF7;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  padding: 12px 18px;
  border-radius: 999px;
  transform: rotate(-8deg);
  box-shadow: 0 18px 40px -14px rgba(25, 25, 25, 0.4);
  animation: hero-float-b 9s ease-in-out infinite;
}
.hero-collage .hero-float-card {
  position: absolute !important;
  z-index: 2;
  width: auto !important;
  background: #fff !important;
  border: 1px solid var(--color-ivory-dark) !important;
  border-radius: 18px !important;
  box-shadow: 0 26px 60px -20px rgba(25, 25, 25, 0.28) !important;
  padding: 16px 20px !important;
  will-change: transform;
}
.hero-collage .hero-float-card,
.hero-collage .hero-float-card * {
  color: var(--color-slate-dark);
}
.hero-collage .hero-float-card .card-header-lbl { color: var(--primary) !important; }
.hero-collage .card-refund-new {
  top: 16%;
  right: -2%;
  max-width: 200px;
  animation: hero-float-a 7s ease-in-out infinite;
}
.hero-collage .card-refund-new .card-val { color: var(--color-slate-dark) !important; }
.hero-collage .card-refund-new .card-footer-lbl { color: var(--color-cloud-dark) !important; font-size: 0.68rem; }
.hero-collage .card-expert-new {
  bottom: 6%;
  left: -4%;
  max-width: 236px;
  animation: hero-float-b 8.5s ease-in-out infinite;
}
.hero-collage .card-expert-new .stat-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.72rem !important;
  letter-spacing: 0.04em;
  color: var(--color-cloud-dark) !important;
  padding: 4px 0;
}
.hero-collage .card-expert-new .stat-line span {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary) !important;
  min-width: 52px;
}


/* Service hero: quote form card on the v2 light hero */
.hero-v2 .hero-form-col .prc-sticky-card {
  border-radius: 24px !important;
  border: 1px solid var(--color-ivory-dark) !important;
  border-top: 5px solid var(--primary) !important;
  box-shadow: 0 34px 80px -28px rgba(25, 25, 25, 0.25) !important;
  padding: 30px 32px !important;
}
.hero-v2 .hero-form-col input,
.hero-v2 .hero-form-col select,
.hero-v2 .hero-form-col textarea {
  border-radius: 10px !important;
  padding: 11px 14px !important;
}

/* Hero v2 responsive (site-wide) */
@media (max-width: 992px) {
  .hero.hero-v2 .container { grid-template-columns: 1fr; gap: 48px; }
  .hero.hero-v2 .hero-stack { align-items: center; text-align: center; }
  .hero.hero-v2 .hero-ctas { justify-content: center; }
  .hero.hero-v2 .hero-cred-row { justify-content: center; }
  .hero.hero-v2 h1 { font-size: clamp(2rem, 6vw, 2.7rem) !important; }
  .hero.hero-v2 .hero-arrow { display: none; }
  .hero-collage { min-height: 420px; max-width: 460px; margin-left: auto; margin-right: auto; width: 100%; }
  .hero-expert-img { max-height: 440px; }
}
@media (max-width: 640px) {
  .hero.hero-v2 .hero-ctas .btn { width: 100%; text-align: center; }
  .hero-expert-img { max-height: 360px; }
  .hero-collage { min-height: 360px; }
  .hero-collage .hero-float-card { transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
  .aurora, .hero-tagline .dot, .hero-sticker,
  .hero-collage .card-refund-new, .hero-collage .card-expert-new {
    animation: none !important;
  }
}

/* ── Motion initial states (ONLY when JS + motion available) ─ */
html.tfs-motion [data-reveal] { opacity: 0; }
html.tfs-motion .hero [data-reveal] { opacity: 0; }

/* Reduced motion: kill transforms/transitions from this layer */
@media (prefers-reduced-motion: reduce) {
  .btn, .service-card, .pricing-card, .team-card, .case-study,
  .subsector-hover-card, .blog-card, .insight-card, .service-card .card-icon {
    transition: none !important;
  }
  .btn:hover, .service-card:hover, .pricing-card:hover, .team-card:hover,
  .case-study:hover, .subsector-hover-card:hover, .blog-card:hover,
  .insight-card:hover { transform: none !important; }
  html.tfs-motion [data-reveal] { opacity: 1 !important; }
}

/* ── Small screens: keep rhythm proportional ──────────────── */
@media (max-width: 640px) {
  .section { padding: 56px 0; }
  .section-header h2, .section .section-header h2 { font-size: 1.75rem !important; }
}

/* ── Deep questions: question-form H2s with direct answers ──
   Two-column on desktop so 8 substantial Q&A blocks stay scannable
   instead of becoming a wall of text. */
.deep-q-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 30px 44px;
}
.deep-q-item { min-width: 0; }
.deep-q-item .deep-q-heading {
  font-size: 1.14rem !important;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-slate-dark);
  margin: 0 0 9px;
  font-weight: 600;
  padding-left: 16px;
  border-left: 3px solid var(--primary);
}
.deep-q-item .deep-q-answer {
  font-size: 0.965rem;
  line-height: 1.72;
  color: var(--color-cloud-dark);
  margin: 0;
  padding-left: 19px;
}
.deep-q-item .deep-q-answer a {
  color: var(--primary-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.deep-q-item .deep-q-answer a:hover { color: var(--primary); }
@media (max-width: 640px) {
  .deep-q-list { gap: 26px; }
  .deep-q-item .deep-q-heading { font-size: 1.06rem !important; }
}

/* ── Glossary strip + coverage matrix (interlinking blocks) ── */
.glossary-strip {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--color-ivory-dark);
}
.glossary-strip h3 {
  font-size: 0.78rem !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-cloud-dark);
  margin: 0 0 14px;
  font-weight: 700;
  font-family: var(--font-sans, inherit);
}
.glossary-strip-links { display: flex; flex-wrap: wrap; gap: 8px; }
.glossary-strip-links a {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--color-ivory-dark);
  border-radius: 999px;
  background: #fff;
  font-size: 0.83rem;
  color: var(--color-slate-dark);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.glossary-strip-links a:hover { border-color: var(--primary); color: var(--primary-dark); }
.glossary-strip-links .glossary-strip-all {
  background: var(--color-slate-dark);
  border-color: var(--color-slate-dark);
  color: #fff;
  font-weight: 600;
}
.glossary-strip-links .glossary-strip-all:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

.coverage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px 48px;
}
.coverage-col h3 {
  font-size: 1rem !important;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--primary);
  color: var(--color-slate-dark);
}
.coverage-col ul { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 26px; }
.coverage-col li { margin-bottom: 9px; break-inside: avoid; }
.coverage-col a {
  font-size: 0.89rem;
  color: var(--color-cloud-dark);
  text-decoration: none;
  transition: color 0.2s;
}
.coverage-col a:hover { color: var(--primary-dark); text-decoration: underline; }
@media (max-width: 560px) { .coverage-col ul { columns: 1; } }

/* ── Question-intent answer pages ─────────────────────────── */
.qa-answer {
  background: var(--color-manilla);
  border-radius: 18px;
  padding: 26px 30px;
  margin-bottom: 42px;
  max-width: 78ch;
}
.qa-answer-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-dark);
  margin-bottom: 8px;
}
.qa-answer p {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.62;
  color: var(--color-slate-dark);
  font-weight: 500;
}
.qa-body { max-width: 78ch; }
.qa-section { margin-bottom: 40px; }
.qa-section h2 {
  font-size: 1.42rem !important;
  margin-bottom: 14px;
  line-height: 1.25;
}
.qa-section p, .qa-section li {
  font-size: 1rem;
  line-height: 1.76;
  color: var(--color-cloud-dark);
}
.qa-section ul { padding-left: 22px; margin: 14px 0; }
.qa-section li { margin-bottom: 9px; }
.qa-section strong { color: var(--color-slate-dark); font-weight: 600; }
.qa-reviewed {
  max-width: 78ch;
  font-size: 0.87rem;
  color: var(--color-cloud-dark);
  border-top: 1px solid var(--color-ivory-dark);
  padding-top: 18px;
  margin-top: 8px;
}
.qa-siblings { margin-top: 46px; max-width: 78ch; }
.qa-siblings h3 { font-size: 1.05rem !important; margin-bottom: 14px; }
.qa-siblings ul { list-style: none; padding: 0; margin: 0; }
.qa-siblings li { margin-bottom: 10px; }
.qa-siblings a { color: var(--primary-dark); font-weight: 500; text-decoration: none; }
.qa-siblings a:hover { text-decoration: underline; }

.qa-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 20px; }
.qa-index-card {
  display: block;
  background: #fff;
  border: 1px solid var(--color-ivory-dark);
  border-radius: 18px;
  padding: 26px 28px;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.25s;
}
.qa-index-card:hover {
  transform: translateY(-4px);
  border-color: rgba(204,120,92,0.45);
  box-shadow: 0 18px 44px -18px rgba(25,25,25,0.2);
}
.qa-index-card h2 {
  font-size: 1.16rem !important;
  color: var(--color-slate-dark);
  margin: 0 0 10px;
  line-height: 1.32;
}
.qa-index-card p { font-size: 0.92rem; line-height: 1.62; color: var(--color-cloud-dark); margin: 0 0 14px; }
.qa-index-more { font-size: 0.84rem; font-weight: 700; color: var(--primary-dark); }

/* ── Glossary term pages (full-article layout) ───────────────── */
.container-narrow.glossary-term { max-width: 800px; margin: 0 auto; }
.glossary-term-cat {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-dark);
  background: var(--color-manilla);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 18px;
}
.glossary-term-def {
  font-size: 1.28rem;
  line-height: 1.6;
  color: var(--color-slate-dark);
  font-weight: 500;
  font-family: var(--font-serif, Georgia, serif);
  margin: 0 0 26px;
}
.glossary-term-body p {
  font-size: 1.02rem;
  line-height: 1.78;
  color: var(--color-cloud-dark);
  margin: 0 0 18px;
}
.glossary-term-body strong { color: var(--color-slate-dark); font-weight: 600; }
.glossary-term-example {
  background: var(--color-ivory-med, #F0F0EB);
  border-left: 3px solid var(--primary);
  border-radius: 0 12px 12px 0;
  padding: 20px 24px;
  margin: 30px 0;
}
.glossary-term-example-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-dark);
  margin-bottom: 8px;
}
.glossary-term-example p, .glossary-term-example li {
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--color-slate-dark);
  margin: 0;
}
.glossary-term-cta {
  margin-top: 36px;
  padding: 26px 28px;
  background: #fff;
  border: 1px solid var(--color-ivory-dark);
  border-radius: 16px;
}
.glossary-term-cta strong { font-size: 1.08rem; color: var(--color-slate-dark); }
.glossary-term-cta p { margin: 8px 0 16px; color: var(--color-cloud-dark); font-size: 0.95rem; }

.glossary-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.glossary-related-card {
  display: block;
  background: #fff;
  border: 1px solid var(--color-ivory-dark);
  border-radius: 14px;
  padding: 18px 20px;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), border-color 0.25s, box-shadow 0.3s;
}
.glossary-related-card:hover {
  transform: translateY(-3px);
  border-color: rgba(204,120,92,0.4);
  box-shadow: 0 14px 32px -16px rgba(25,25,25,0.18);
}
.glossary-related-card h3 { font-size: 1rem !important; color: var(--color-slate-dark); margin: 0 0 6px; }
.glossary-related-card p { font-size: 0.85rem; color: var(--color-cloud-dark); margin: 0; line-height: 1.5; }

/* Keep the header phone pill on one line (the Resources dropdown made the
   nav wide enough to wrap it). Shrinks slightly on tighter desktop widths
   rather than wrapping to two lines. */
@media (min-width: 993px) {
  .header-cta .header-phone { white-space: nowrap; }
  .header-cta .header-phone span { white-space: nowrap; }
}
@media (min-width: 993px) and (max-width: 1200px) {
  .main-nav > li > a { padding: 9px 12px; }
  .header-cta .header-phone { padding-left: 18px; padding-right: 18px; }
}

/* Inline glossary auto-links: subtle dotted underline so they read as
   definitions-on-hover, not primary CTAs. */
.gloss-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--color-kraft);
  transition: color 0.2s, border-color 0.2s;
}
.gloss-link:hover { color: var(--primary-dark); border-bottom-color: var(--primary); }

/* ── AI-visibility overview: redesigned (steps / compare / terms / analysis) ── */
.aiv {
  background: var(--color-ivory-light);
  border-bottom: 1px solid var(--color-ivory-dark);
  padding: clamp(44px, 6vw, 68px) 0 !important;
}
.aiv .container { max-width: 980px; }
.aiv-answer {
  font-size: clamp(1.08rem, 1.7vw, 1.24rem);
  line-height: 1.6;
  color: var(--color-slate-dark);
  font-weight: 500;
  font-family: var(--font-serif, Georgia, serif);
  max-width: 70ch;
  margin: 0;
}
.aiv-block { margin-top: clamp(32px, 4vw, 46px); }
.aiv-block > h2 {
  font-size: 1.32rem !important;
  letter-spacing: -0.02em;
  color: var(--color-slate-dark);
  margin: 0 0 20px;
  line-height: 1.2;
}

/* Numbered process steps */
.aiv-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  counter-reset: none;
}
.aiv-step {
  background: #fff;
  border: 1px solid var(--color-ivory-dark);
  border-radius: 16px;
  padding: 22px 20px;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s cubic-bezier(0.16,1,0.3,1);
}
.aiv-step:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -18px rgba(25,25,25,0.18); }
.aiv-step-num {
  display: inline-block;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1;
  color: var(--primary);
  margin-bottom: 12px;
}
.aiv-step h3 { font-size: 0.98rem !important; color: var(--color-slate-dark); margin: 0 0 6px; }
.aiv-step p { font-size: 0.9rem; line-height: 1.55; color: var(--color-cloud-dark); margin: 0; }

/* Comparison table */
.aiv-compare {
  border: 1px solid var(--color-ivory-dark);
  border-radius: 16px;
  overflow: hidden;
  overflow-x: auto;
}
.aiv-compare table { width: 100%; border-collapse: collapse; font-size: 0.94rem; min-width: 520px; }
.aiv-compare th, .aiv-compare td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-ivory-dark);
}
.aiv-compare thead th {
  background: var(--color-ivory-med);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--color-cloud-dark);
}
.aiv-compare thead th.col-us { background: rgba(204,120,92,0.16); color: var(--primary-dark); }
.aiv-compare tbody tr:last-child td { border-bottom: none; }
.aiv-compare tbody tr:hover td { background: rgba(25,25,25,0.015); }
.aiv-compare td.factor { font-weight: 600; color: var(--color-slate-dark); }
.aiv-compare td.col-us {
  background: rgba(204,120,92,0.05);
  font-weight: 600;
  color: var(--color-slate-dark);
}
.aiv-compare td.col-us .fa-check { color: #4E7C59; margin-right: 8px; font-size: 0.85em; }
.aiv-compare td.col-them { color: var(--color-cloud-dark); }

/* Key terms → glossary cards */
.aiv-terms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.aiv-term {
  display: block;
  background: #fff;
  border: 1px solid var(--color-ivory-dark);
  border-radius: 14px;
  padding: 18px 20px;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), border-color 0.25s, box-shadow 0.3s;
}
.aiv-term:hover {
  transform: translateY(-3px);
  border-color: rgba(204,120,92,0.45);
  box-shadow: 0 14px 32px -16px rgba(25,25,25,0.18);
}
.aiv-term dt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  color: var(--color-slate-dark);
  margin-bottom: 6px;
  font-size: 0.96rem;
}
.aiv-term dd { margin: 0; font-size: 0.87rem; line-height: 1.55; color: var(--color-cloud-dark); }
.aiv-term .arrow { color: var(--primary); font-size: 0.78rem; opacity: 0; transform: translateX(-4px); transition: opacity 0.2s, transform 0.2s; }
.aiv-term:hover .arrow { opacity: 1; transform: translateX(0); }

/* Original analysis callout */
.aiv-analysis {
  background: #fff;
  border: 1px solid var(--color-ivory-dark);
  border-left: 3px solid var(--primary);
  border-radius: 0 16px 16px 0;
  padding: 24px 28px;
}
.aiv-analysis-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-dark);
  margin-bottom: 10px;
}
.aiv-analysis div, .aiv-analysis p {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--color-slate-dark);
  margin: 0;
}

@media (max-width: 760px) {
  .aiv-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 440px) {
  .aiv-steps { grid-template-columns: 1fr; }
}

/* Mega menus size themselves in style.css now: .mega-menu is a panel wrapper
   (.mega-body > .mega-grid + .mega-promo, then .mega-foot), not the grid it
   used to be, and the grid's column count is set per menu via --mega-cols.
   The old grid-auto-flow/92vw overrides that lived here fought that sizing —
   they let a wide panel run past its 1180px cap — so they are gone. */

/* ── Hub directories ───────────────────────────────────────────────────────
   The services / industries / locations hubs each front hundreds of pages, so
   they render one searchable directory instead of a nested accordion: a
   toolbar (search + category chips), a live count, and a card grid. Behaviour
   lives in initDirectories() in js/main.js; markup in renderDirectory(). */
.dir { margin-top: 6px; }

.dir-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 16px;
  padding: 18px;
  background: var(--color-ivory-light, #fbf9f6);
  border: var(--m-border);
  border-radius: var(--m-radius);
  /* Sticks under the 80px header so filters stay reachable while scrolling a
     long grid. */
  position: sticky;
  top: 92px;
  z-index: 20;
  backdrop-filter: blur(8px);
}

.dir-search {
  position: relative;
  flex: 1 1 320px;
  min-width: 260px;
}

.dir-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  color: var(--color-cloud-dark, #8b8b86);
  pointer-events: none;
}

.dir-input {
  width: 100%;
  padding: 13px 42px 13px 42px;
  font: inherit;
  font-size: 0.94rem;
  color: var(--color-slate-dark, #1c2b2b);
  background: #fff;
  border: var(--m-border-strong);
  border-radius: 999px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  -webkit-appearance: none;
  appearance: none;
}

.dir-input::placeholder { color: var(--color-cloud-dark, #9a9a95); }

.dir-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(204, 120, 92, 0.16);
}

/* The stock WebKit clear affordance would sit on top of our own button. */
.dir-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.dir-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--light-gray, #f1efeb);
  color: var(--body-text-light, #5f5f5a);
  cursor: pointer;
  font-size: 0.78rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.dir-clear:hover { background: var(--primary); color: #fff; }
.dir-clear[hidden] { display: none; }

.dir-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 100%;
}

.dir-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  color: var(--body-text-light, #5f5f5a);
  background: #fff;
  border: var(--m-border-strong);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.dir-chip:hover {
  color: var(--primary);
  border-color: rgba(204, 120, 92, 0.5);
}

.dir-chip.is-active {
  background: var(--color-slate-dark, #1f2f2c);
  border-color: var(--color-slate-dark, #1f2f2c);
  color: #fff;
}

.dir-chip-n {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--light-gray, #f1efeb);
  color: var(--body-text-light, #5f5f5a);
}

.dir-chip.is-active .dir-chip-n {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.dir-count {
  margin: 18px 2px 14px;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-cloud-dark, #8b8b86);
}

.dir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 14px;
}

.dir-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  background: #fff;
  border: var(--m-border);
  border-radius: 14px;
  color: inherit;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.dir-card[hidden] { display: none !important; }

.dir-card:hover {
  border-color: rgba(204, 120, 92, 0.55);
  box-shadow: 0 12px 28px -14px rgba(25, 25, 25, 0.3);
  transform: translateY(-2px);
}

.dir-card-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(204, 120, 92, 0.11);
  color: var(--primary);
  font-size: 0.95rem;
  transition: background 0.16s ease, color 0.16s ease;
}

.dir-card:hover .dir-card-icon { background: var(--primary); color: #fff; }

.dir-card-text { min-width: 0; }

.dir-card-title {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.32;
  color: var(--color-slate-dark, #1c2b2b);
}

.dir-card-meta {
  display: block;
  margin-top: 3px;
  font-size: 0.76rem;
  color: var(--color-cloud-dark, #8b8b86);
}

.dir-card-arrow {
  font-size: 0.75rem;
  color: var(--color-cloud-dark, #b6b6b0);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, color 0.16s ease;
}

.dir-card:hover .dir-card-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--primary);
}

.dir-empty {
  text-align: center;
  padding: 54px 20px 46px;
  border: 1px dashed var(--m-border-strong);
  border-radius: var(--m-radius);
  background: var(--color-ivory-light, #fbf9f6);
}

.dir-empty[hidden] { display: none; }

.dir-empty > i {
  font-size: 1.5rem;
  color: var(--color-cloud-dark, #b6b6b0);
  margin-bottom: 12px;
  display: block;
}

.dir-empty h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
  color: var(--color-slate-dark, #1c2b2b);
}

.dir-empty p {
  max-width: 46ch;
  margin: 0 auto 20px;
  font-size: 0.9rem;
  color: var(--body-text-light, #5f5f5a);
}

@media (max-width: 768px) {
  .dir-toolbar {
    position: static;
    padding: 14px;
    gap: 12px;
  }

  .dir-search { flex: 1 1 100%; min-width: 0; }

  /* Chips scroll sideways rather than stacking into a tall block. */
  .dir-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .dir-chips::-webkit-scrollbar { display: none; }

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

@media (prefers-reduced-motion: reduce) {
  .dir-card,
  .dir-card-arrow,
  .dir-card-icon { transition: none; }
  .dir-card:hover { transform: none; }
}

/* Lead copy for the hub directories. It lives inside .dir rather than in
   .section-header because style.css hides `.section-header p` site-wide. */
.dir-intro {
  max-width: 64ch;
  margin: -18px auto 26px;
  text-align: center;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--body-text-light, #5f5f5a);
  text-wrap: pretty;
}

.dir-intro a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Province hub facts strip (tax-accountant-firm/<province>/). */
.prov-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

.prov-fact {
  padding: 14px 16px;
  background: var(--color-ivory-light, #fbf9f6);
  border: var(--m-border);
  border-radius: 14px;
}

.prov-fact-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-cloud-dark, #8b8b86);
  margin-bottom: 5px;
}

.prov-fact strong {
  font-size: 1rem;
  color: var(--color-slate-dark, #1c2b2b);
}

.prov-note {
  max-width: 75ch;
  margin: 0 0 30px;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--body-text-light, #5f5f5a);
}

/* ── Case study detail pages ───────────────────────────────────────────────
   /case-studies/<slug>.html — the narrative plus the CRA rules it turned on. */
.cs-detail { max-width: 78ch; }

.cs-summary {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 26px;
}

.cs-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin: 0 0 34px;
}

.cs-fact {
  padding: 14px 16px;
  background: var(--color-ivory-light, #fbf9f6);
  border: var(--m-border);
  border-radius: 14px;
}

.cs-fact span {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-cloud-dark, #8b8b86);
  margin-bottom: 5px;
}

.cs-fact strong {
  font-size: 1rem;
  color: var(--color-slate-dark, #1c2b2b);
}

.cs-detail h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  margin: 36px 0 14px;
}

.cs-rule {
  padding: 18px 20px;
  margin-bottom: 14px;
  border: var(--m-border);
  border-left: 4px solid var(--primary);
  border-radius: 12px;
  background: #fff;
}

.cs-rule h3 { font-size: 1.02rem; margin: 0 0 8px; }
.cs-rule p { margin: 0 0 8px; font-size: 0.94rem; line-height: 1.65; }
.cs-rule-risk { color: var(--body-text-light, #5f5f5a); margin-bottom: 0 !important; }

.cs-reviewed {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--color-ivory-dark, #e8e4dd);
  font-size: 0.84rem;
  color: var(--color-cloud-dark, #8b8b86);
}

.cs-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.cs-related-card {
  display: block;
  padding: 16px 18px;
  border: var(--m-border);
  border-radius: 14px;
  background: #fff;
  color: inherit;
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.cs-related-card:hover {
  border-color: rgba(204, 120, 92, 0.55);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -14px rgba(25, 25, 25, 0.3);
}

.cs-related-title {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.35;
  margin-bottom: 6px;
  color: var(--color-slate-dark, #1c2b2b);
}

.cs-related-desc {
  display: block;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--body-text-light, #5f5f5a);
}

@media (max-width: 768px) {
  .cs-facts { grid-template-columns: 1fr 1fr; }
  .cs-related { grid-template-columns: 1fr; }
}

/* ── Per-page case studies (/case-studies/<type>/<slug>.html) ─────────────
   One page per service / industry / niche / city, holding that page's own six
   engagements in full. Each <article> is anchored so a single study is
   linkable on its own. */
.pcs-wrap { max-width: 80ch; }

.pcs-toc {
  margin: 28px 0 40px;
  padding: 20px 24px;
  border: var(--m-border);
  border-radius: 16px;
  background: var(--color-ivory, #faf8f5);
}

.pcs-toc h2 {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: var(--color-cloud-dark, #8b8b86);
}

.pcs-toc ol { margin: 0; padding-left: 1.25em; }

.pcs-toc li { margin-bottom: 7px; font-size: 0.95rem; line-height: 1.45; }

.pcs-toc a {
  color: var(--color-slate-dark, #1c2b2b);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.pcs-toc a:hover {
  color: var(--primary, #cc785c);
  border-bottom-color: currentColor;
}

.pcs-study {
  margin: 0 0 44px;
  padding: 0 0 36px;
  border-bottom: 1px solid var(--color-ivory-dark, #e8e4dd);
  /* Anchor links land clear of the sticky header. */
  scroll-margin-top: 110px;
}

.pcs-study:last-of-type { border-bottom: 0; }

.pcs-study-kicker {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--primary, #cc785c);
  margin-bottom: 8px;
}

.pcs-study h2 {
  font-size: 1.45rem;
  line-height: 1.25;
  margin: 0 0 10px;
}

.pcs-study h3 {
  font-size: 1rem;
  margin: 22px 0 8px;
  color: var(--color-slate-dark, #1c2b2b);
}

.pcs-study p { line-height: 1.7; margin: 0 0 10px; }

.pcs-study-meta {
  font-size: 0.86rem;
  color: var(--body-text-light, #5f5f5a);
  margin: 0 0 4px !important;
}

.pcs-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 18px 0 6px;
}

.pcs-metric {
  padding: 14px 16px;
  border: var(--m-border);
  border-radius: 14px;
  background: #fff;
}

.pcs-metric span {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-cloud-dark, #8b8b86);
  margin-bottom: 4px;
}

.pcs-metric strong {
  display: block;
  font-size: 1.12rem;
  line-height: 1.2;
  color: var(--color-slate-dark, #1c2b2b);
}

.pcs-rule {
  margin: 22px 0 0;
  padding: 16px 20px;
  border-left: 3px solid var(--primary, #cc785c);
  border-radius: 0 12px 12px 0;
  background: var(--color-ivory, #faf8f5);
}

.pcs-rule h3 { margin: 0 0 6px; font-size: 0.94rem; }
.pcs-rule p { margin: 0; font-size: 0.92rem; line-height: 1.65; }

.pcs-back { margin-top: 26px; font-size: 0.9rem; }

@media (max-width: 768px) {
  .pcs-metrics { grid-template-columns: 1fr 1fr; }
  .pcs-study h2 { font-size: 1.2rem; }
  .pcs-toc { padding: 16px 18px; }
}