/*
 * The Accounting Firm — public site stylesheet (Phase 2A foundation)
 * Mobile-first. Uses only custom properties from tokens.css + /theme.css.
 *
 *  1. Reset & base
 *  2. Typography
 *  3. Layout primitives
 *  4. Accessibility utilities
 *  5. Header & navigation
 *  6. Buttons & links
 *  7. Sections & patterns
 *  8. Forms & notices
 *  9. Footer
 * 10. Style guide (dev only)
 */

/* 1. Reset & base ------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height) + var(--space-s));
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
address { font-style: normal; }
main:focus { outline: none; }

::selection { background: color-mix(in srgb, var(--color-copper) 28%, transparent); }

/* 2. Typography -------------------------------------------------------- */

.display, .h1, .h2, .h3, h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  color: inherit;
  text-wrap: balance;
}

.display { font-size: var(--step-5); }
.h1, h1  { font-size: var(--step-4); }
.h2, h2  { font-size: var(--step-3); line-height: var(--leading-snug); }
.h3, h3  { font-size: var(--step-2); line-height: var(--leading-snug); }

.h4, h4 {
  font-family: var(--font-sans);
  font-size: var(--step-1);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.005em;
  line-height: var(--leading-snug);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-copper-text);
  margin-block-end: var(--space-xs);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  max-width: 58ch;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

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

.prose { max-width: var(--measure); }
.prose > * + * { margin-block-start: var(--space-s); }
.prose h2, .prose h3 { margin-block-start: var(--space-l); }
.prose ul, .prose ol { padding-inline-start: 1.25em; }
.prose li + li { margin-block-start: var(--space-3xs); }
.prose blockquote {
  margin: var(--space-m) 0;
  padding-inline-start: var(--space-m);
  border-inline-start: var(--rule-width) solid var(--color-copper);
  font-family: var(--font-serif);
  font-size: var(--step-2);
  line-height: var(--leading-snug);
}

a { color: var(--color-link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

code { font-family: var(--font-mono); font-size: 0.9em; }

/* 3. Layout primitives ------------------------------------------------- */

.container {
  width: 100%;
  max-width: calc(var(--container-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--space-2xl); }
.section--alt { background: var(--color-bg-alt); }
.section--navy {
  background: var(--color-navy);
  color: var(--color-on-dark);
}
.section--navy .lede, .section--navy .muted { color: var(--color-on-dark-muted); }
.section--navy .eyebrow { color: var(--color-copper); }
.section--navy a:not(.button) { color: var(--color-on-dark); }

.split { display: grid; gap: var(--space-l); }
@media (min-width: 56rem) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); }
}

.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s); margin-block-start: var(--space-l); }

/* 4. Accessibility utilities ------------------------------------------- */

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-s);
  inset-block-start: -10rem;
  z-index: var(--z-skip);
  padding: var(--space-2xs) var(--space-s);
  background: var(--color-navy);
  color: var(--color-on-dark);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-m);
}
.skip-link:focus { inset-block-start: var(--space-s); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

/* Website Management article preview (signed 15-minute link). */
.preview-notice {
  margin: 0;
  padding: var(--space-2xs) var(--gutter);
  background: var(--color-navy);
  color: #FFFFFF;
  font-size: var(--step--1);
  text-align: center;
}
.env-banner {
  padding: var(--space-3xs) var(--gutter);
  background: var(--color-copper-text);
  color: #FFFFFF;
  font-size: var(--step--1);
  text-align: center;
}

.icon { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }

/* 5. Header & navigation ----------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  border-block-end: var(--border-width) solid var(--color-border);
  backdrop-filter: saturate(1.4) blur(10px);
}

.utility-bar {
  display: none;
  border-block-end: var(--border-width) solid var(--color-border);
  font-size: var(--step--1);
  color: var(--color-text-muted);
}
.utility-bar__inner { display: flex; justify-content: space-between; align-items: center; min-height: 2.5rem; }
.utility-bar__contact { display: flex; gap: var(--space-m); }
.utility-bar__item { color: inherit; text-decoration: none; }
a.utility-bar__item:hover { color: var(--color-text); text-decoration: underline; }

/* Below 72rem: grid — brand | CTA | Menu on one row, navigation panel beneath. */
.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "brand cta toggle" "nav nav nav";
  align-items: center;
  column-gap: var(--space-s);
  min-height: var(--header-height);
}
.masthead > .brand { grid-area: brand; }
.masthead > .masthead__cta { grid-area: cta; }
.masthead > .nav-toggle { grid-area: toggle; }
.masthead > .site-nav { grid-area: nav; }

.brand { display: inline-flex; align-items: center; min-width: 0; text-decoration: none; color: var(--color-navy); }
.brand__logo { max-height: 3.375rem; width: auto; }   /* 54px header (owner: +20–25%); fits the 76px header */
.brand__wordmark { display: inline-flex; align-items: baseline; gap: 0.4em; }
.brand__name { font-family: var(--font-serif); font-size: clamp(1.1rem, 0.85rem + 1.4vw, 1.75rem); letter-spacing: -0.015em; line-height: 1; white-space: nowrap; }
.brand__suffix {
  font-size: 0.7rem;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: var(--weight-semibold);
  color: var(--color-copper-text);
}
.brand--dark { color: var(--color-on-dark); }

/* No-JS baseline: navigation is always visible beneath the brand row. */
.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m); }
.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: var(--space-2xs) 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.site-nav__link[aria-current="page"],
.site-nav__toggle[data-current="true"] { box-shadow: inset 0 calc(-1 * var(--rule-width)) 0 var(--color-copper); }
.site-nav__link:hover { color: var(--color-copper-text); }

.icon--chevron { width: 0.75em; height: 0.75em; transition: transform var(--duration-fast) var(--ease-out); }
[aria-expanded="true"] > .icon--chevron { transform: rotate(180deg); }

.site-nav__submenu { list-style: none; margin: 0; padding: 0 0 var(--space-xs) var(--space-s); }
.site-nav__sublink { display: block; padding: var(--space-3xs) 0; color: var(--color-text); text-decoration: none; }
.site-nav__sublink:hover .site-nav__sublabel { text-decoration: underline; }
.site-nav__sublink[aria-current="page"] .site-nav__sublabel { color: var(--color-copper-text); }
.site-nav__subdesc { display: block; font-size: var(--step--1); color: var(--color-text-muted); }

.site-nav__extras { display: none; }

/* Header CTA: phones get it inside the menu panel (uncluttered header);
   tablet and up show it beside the Menu button / navigation. */
/* Scoped selectors so these win over the generic .button display rule. */
.masthead .masthead__cta { display: none; }
.no-js .masthead .masthead__cta { display: inline-flex; }  /* no-JS phones still see the CTA */
@media (min-width: 40rem) {
  .masthead .masthead__cta { display: inline-flex; }
  .site-nav .site-nav__cta { display: none; }
}

/* JS-enhanced mobile: collapsible panel. */
.js .nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2.75rem;
  padding: var(--space-2xs) var(--space-xs);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-m);
  background: var(--color-surface);
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.js .nav-toggle[hidden] { display: inline-flex; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block; width: 1.1rem; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 71.99rem) {
  .js .site-nav {
    display: none;
    padding-block: var(--space-s) var(--space-l);
    border-block-start: var(--border-width) solid var(--color-border);
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .js .site-nav[data-open="true"] { display: block; }
  .js .site-nav__list { flex-direction: column; gap: 0; }
  .js .site-nav__item { border-block-end: var(--border-width) solid var(--color-border); }
  .js .site-nav__link { width: 100%; justify-content: space-between; min-height: 3rem; font-size: var(--step-0); }
  .js .site-nav__submenu { display: none; }
  .js .site-nav__toggle[aria-expanded="true"] + .site-nav__submenu { display: block; }
  .js .site-nav__extras {
    display: grid;
    gap: var(--space-m);
    padding-block-start: var(--space-l);
  }
  .site-nav__contact { display: grid; gap: var(--space-2xs); }
  .site-nav__contact a { color: var(--color-text); }
  .site-nav__cta { justify-self: start; }
}

@media (min-width: 72rem) {
  .utility-bar { display: block; }
  .masthead { display: flex; gap: var(--space-m); }
  .masthead > .brand { margin-inline-end: auto; }
  .masthead > .masthead__cta { white-space: nowrap; flex-shrink: 0; }   /* on narrow desktops the logo yields, not the button */
  .js .nav-toggle, .js .nav-toggle[hidden] { display: none; }
  .site-nav__list { gap: var(--space-l); flex-wrap: nowrap; }
  .site-nav__item { position: relative; }
  .site-nav__submenu {
    position: absolute;
    inset-block-start: calc(100% + var(--space-2xs));
    inset-inline-start: calc(-1 * var(--space-m));
    z-index: var(--z-menu);
    min-width: 19rem;
    padding: var(--space-s) var(--space-m);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-block-start: var(--rule-width) solid var(--color-copper);
    box-shadow: var(--shadow-menu);
    display: none;
  }
  .site-nav__sublink { padding-block: var(--space-2xs); }
  /* No-JS: reveal on hover/focus. With JS: controlled by aria-expanded. */
  .no-js .site-nav__item--has-children:hover > .site-nav__submenu,
  .no-js .site-nav__item--has-children:focus-within > .site-nav__submenu,
  .site-nav__toggle[aria-expanded="true"] + .site-nav__submenu { display: block; }
}

/* 6. Buttons & links --------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 2.875rem;
  padding: 0.7em 1.4em;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-s);
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast), border-color var(--duration-fast);
}
.button--primary { background: var(--color-button-bg); color: var(--color-button-text); }
.button--primary:hover { background: color-mix(in srgb, var(--color-button-bg) 86%, var(--color-copper)); }
.button--secondary { background: transparent; color: var(--color-navy); border-color: var(--color-navy); }
.button--secondary:hover { background: var(--color-navy); color: var(--color-button-text); }
.button--on-dark { background: var(--color-on-dark); color: var(--color-navy); }
.button--on-dark:hover { background: var(--color-surface); }

.text-link {
  font-weight: var(--weight-semibold);
  color: var(--color-copper-text);
  text-decoration: none;
  border-block-end: var(--border-width) solid currentColor;
}
.text-link--on-dark { color: var(--color-on-dark); }

/* 7. Sections & patterns ----------------------------------------------- */

.hero { padding-block: var(--space-3xl) var(--space-2xl); }
.hero__inner { display: grid; gap: var(--space-m); max-width: 60rem; }
.hero__title { max-width: 16ch; }
.hero__inner::after {
  content: "";
  display: block;
  width: 4rem;
  height: var(--rule-width);
  background: var(--color-copper);
  margin-block-start: var(--space-l);
}

.feature-grid {
  display: grid;
  gap: var(--space-l) var(--space-xl);
  margin-block-start: var(--space-xl);
}
@media (min-width: 40rem) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.feature-grid__item { display: grid; gap: var(--space-2xs); padding-block-start: var(--space-s); border-block-start: var(--border-width) solid var(--color-border); }
.feature-grid__index { font-family: var(--font-serif); font-size: var(--step-1); color: var(--color-copper-text); }

.cta-band { display: grid; gap: var(--space-m); justify-items: start; max-width: 48rem; }
.cta-band--content { max-width: calc(var(--container-max) + 2 * var(--gutter)); } /* left edge = page content (service pages) */
.cta-band--content > .h2 { max-width: 28ch; }
.cta-band::before { content: ""; width: 3rem; height: var(--rule-width); background: var(--color-copper); }

.error-page__inner { display: grid; gap: var(--space-m); max-width: 44rem; }
.debug-detail { overflow: auto; max-height: 24rem; padding: var(--space-s); background: var(--color-surface); border: var(--border-width) solid var(--color-border); font-size: var(--step--1); }

/* 8. Forms & notices --------------------------------------------------- */

.field { display: grid; gap: var(--space-3xs); margin-block-end: var(--space-m); max-width: 36rem; }
.field__label { font-weight: var(--weight-semibold); font-size: var(--step--1); }
.field__required { font-weight: var(--weight-regular); color: var(--color-text-muted); }
.field__input {
  min-height: 3rem;
  padding: 0.65em 0.85em;
  background: var(--color-surface);
  border: var(--border-width) solid color-mix(in srgb, var(--color-text-muted) 70%, var(--color-border));
  border-radius: var(--radius-s);
}
.field__input:focus-visible { outline-offset: 1px; }
.field--invalid .field__input { border-color: var(--color-danger); border-width: 2px; }
.field__error { color: var(--color-danger); font-size: var(--step--1); font-weight: var(--weight-medium); }

.notice { margin: var(--space-m) 0 0; padding: var(--space-s) var(--space-m); border-inline-start: var(--rule-width) solid var(--color-navy); background: var(--color-info-bg); max-width: 48rem; }
.notice--warning { border-color: var(--color-danger); }

.form-demo { margin-block-start: var(--space-xl); }

/* 9. Footer ------------------------------------------------------------ */

.site-footer { background: var(--color-bg); border-block-start: var(--border-width) solid var(--color-border); }
.site-footer__inner {
  display: grid;
  gap: var(--space-xl);
  padding-block: var(--space-2xl);
}
@media (min-width: 48rem) { .site-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 0.8fr); } .site-footer__brand { grid-column: 1 / -1; } }
@media (min-width: 72rem) { .site-footer__inner { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 0.8fr); } .site-footer__brand { grid-column: auto; } }

.site-footer__brand { display: grid; gap: var(--space-s); align-content: start; }
.site-footer__brand .brand__logo { max-height: 3.625rem; }   /* 58px footer (owner: +30–35%) */
/* Link columns: Services | Industries (widest labels) | Our Firm (shortest list). */
.site-footer__statement { color: var(--color-text-muted); max-width: 36ch; }
.site-footer__contact { display: grid; gap: var(--space-3xs); color: var(--color-text-muted); }
.site-footer__contact a { color: var(--color-text); text-decoration: none; }
.site-footer__address { white-space: nowrap; }   /* exactly two lines (explicit <br>), never a wrapped third */
.site-footer__contact a:hover { text-decoration: underline; }
.site-footer__heading {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-copper-text);
  margin-block-end: var(--space-s);
}
.site-footer__column ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.site-footer__column a { color: var(--color-text); text-decoration: none; }
.site-footer__column a:hover { text-decoration: underline; }

.site-footer__bar { background: var(--color-navy); color: var(--color-on-dark-muted); font-size: var(--step--1); }
.site-footer__bar-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2xs) var(--space-m); padding-block: var(--space-xs); }
.site-footer__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-m); }
.site-footer__legal a { color: var(--color-on-dark); text-decoration: none; }
.site-footer__legal a:hover { text-decoration: underline; }

/* Social links (all placements) */
.social-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3xs); }
.social-links__link {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;                 /* 44px touch target */
  height: 2.75rem;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  transition: color var(--duration-fast), background-color var(--duration-fast);
}
.social-links__link:hover { color: var(--color-copper-text); background: color-mix(in srgb, var(--color-copper) 10%, transparent); }
.social-links--header .social-links__link { width: 2.25rem; height: 2.25rem; } /* desktop pointer context; restrained */
.social-links--header .icon { width: 1rem; height: 1rem; }
.social-links--footer { margin-block-start: var(--space-2xs); margin-inline-start: -0.6rem; }

/* 10. Style guide (dev only) ------------------------------------------- */

.swatches { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); margin-block-start: var(--space-l); }
.swatch { display: grid; gap: var(--space-3xs); font-size: var(--step--1); }
.swatch__chip { height: 4rem; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-m); }
.swatch__name { font-weight: var(--weight-semibold); }
.swatch__chip[data-token="navy"] { background: var(--color-navy); }
.swatch__chip[data-token="copper"] { background: var(--color-copper); }
.swatch__chip[data-token="copper_text"] { background: var(--color-copper-text); }
.swatch__chip[data-token="bg"] { background: var(--color-bg); }
.swatch__chip[data-token="bg_alt"] { background: var(--color-bg-alt); }
.swatch__chip[data-token="surface"] { background: var(--color-surface); }
.swatch__chip[data-token="text"] { background: var(--color-text); }
.swatch__chip[data-token="text_muted"] { background: var(--color-text-muted); }
.swatch__chip[data-token="border"] { background: var(--color-border); }
.swatch__chip[data-token="button_bg"] { background: var(--color-button-bg); }
.swatch__chip[data-token="button_text"] { background: var(--color-button-text); }
.swatch__chip[data-token="link"] { background: var(--color-link); }
.swatch__chip[data-token="on_dark"] { background: var(--color-on-dark); }
.swatch__chip[data-token="on_dark_muted"] { background: var(--color-on-dark-muted); }
.type-specimen { display: grid; gap: var(--space-m); margin-block-start: var(--space-l); }

@media print {
  .site-header, .site-footer, .skip-link, .env-banner { display: none; }
  body { background: #FFFFFF; color: #000000; }
}

/* =====================================================================
 * PHASE 2B — content templates & components
 * All colours/spacing via tokens (palette remains globally adjustable).
 * ===================================================================== */

/* 11. Shared layout helpers --------------------------------------------- */

.container--narrow { max-width: calc(48rem + 2 * var(--gutter)); }
.section--tight { padding-block: var(--space-xl); }
.section-head { display: grid; gap: var(--space-xs); margin-block-end: var(--space-xl); max-width: 48rem; }
.section-head--split { max-width: none; }
@media (min-width: 56rem) {
  .section-head--split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: end; gap: var(--space-2xl); }
  .section-head--action { grid-template-columns: 1fr auto; }
}
.section-head .lede { margin: 0; }
.prose--lead > p:first-child { font-size: var(--step-1); line-height: 1.6; color: var(--color-text); }
/* Supporting text in the muted body colour (same token as .lede), e.g. homepage Who We Are. */
.prose--muted, .prose--muted > p:first-child { color: var(--color-text-muted); }
.empty-state { padding: var(--space-l) 0; color: var(--color-text-muted); }

.dev-placeholder {
  margin: 0;
  padding: var(--space-s) var(--space-m);
  border: var(--border-width) dashed color-mix(in srgb, var(--color-text-muted) 45%, transparent);
  border-radius: var(--radius-m);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

/* 12. Media & placeholders ---------------------------------------------- */

.media { position: relative; overflow: hidden; background: var(--color-bg-alt); border-radius: var(--radius-s); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--natural img { height: auto; }   /* frame follows the image's own proportions (width/height attributes) */
.media--21x9 { aspect-ratio: 21 / 9; }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--4x3 { aspect-ratio: 4 / 3; }
.media--4x5 { aspect-ratio: 4 / 5; }
.media--1x1 { aspect-ratio: 1 / 1; }
.media--placeholder {
  background:
    linear-gradient(135deg, transparent 49.6%, color-mix(in srgb, var(--color-border) 70%, transparent) 50%, transparent 50.4%),
    var(--color-bg-alt);
  border: var(--border-width) solid var(--color-border);
}
.media__spec {
  position: absolute;
  inset-inline-start: var(--space-xs);
  inset-block-end: var(--space-xs);
  padding: 0.2em 0.6em;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-s);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

/* 13. Mega-menu (Services) ----------------------------------------------- */

.mega__inner { display: grid; gap: var(--space-s); padding-block-end: var(--space-xs); }
.mega__heading {
  margin: var(--space-2xs) 0 var(--space-3xs);
  font-size: 0.72rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-copper-text);
}
.mega__list { list-style: none; margin: 0; padding: 0; }
.mega__link {
  display: block;
  padding: var(--space-3xs) 0;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  color: var(--color-text);
  text-decoration: none;
}
.mega__link:hover { color: var(--color-copper-text); text-decoration: underline; }
.mega__link[aria-current="page"] { color: var(--color-copper-text); font-weight: var(--weight-semibold); }

@media (min-width: 72rem) {
  .masthead { position: relative; }
  .site-nav__item--mega { position: static; }
  .site-nav__submenu.mega {
    inset-inline: var(--gutter);
    inset-block-start: calc(100% - 1px);
    min-width: 0;
    padding: var(--space-l) var(--space-xl);
  }
  .mega__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl); }
  .mega__heading { margin-block: 0 var(--space-s); padding-block-end: var(--space-2xs); border-block-end: var(--border-width) solid var(--color-border); }
  .mega__link { min-height: 0; padding-block: var(--space-2xs); }
  /* Two columns read left to right, row by row (same reading order as the homepage Industries list). */
  .site-nav__submenu--columns { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-l); min-width: 36rem; }
  .no-js .site-nav__item--has-children:hover > .site-nav__submenu--columns,
  .no-js .site-nav__item--has-children:focus-within > .site-nav__submenu--columns,
  .site-nav__toggle[aria-expanded="true"] + .site-nav__submenu--columns { display: grid; }
}

/* 14. Page hero & breadcrumbs ------------------------------------------- */

.breadcrumbs { margin-block-end: var(--space-m); font-size: var(--step--1); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35em; color: var(--color-text-muted); }
.breadcrumbs li + li::before { content: "/"; margin-inline-end: 0.35em; color: var(--color-border); }
.breadcrumbs a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-text); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--color-text); }

.page-hero { padding-block: var(--space-xl) var(--space-2xl); border-block-end: var(--border-width) solid var(--color-border); }
.page-hero--compact { padding-block-end: var(--space-xl); }
.page-hero__grid { display: grid; gap: var(--space-xl); align-items: center; }
.page-hero__text { display: grid; gap: var(--space-s); }
.page-hero__text .lede { margin: 0; }
.page-hero__title { max-width: 20ch; }
@media (min-width: 56rem) {
  .page-hero--with-media .page-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); }
}

/* 15. Homepage ----------------------------------------------------------- */

.home-hero { padding-block: var(--space-2xl) var(--space-2xl); }
.home-hero__grid { display: grid; gap: var(--space-xl); align-items: center; }
.home-hero__text { display: grid; gap: var(--space-m); }
.home-hero__title { max-width: 14ch; }
.home-hero__lede { margin: 0; }
.home-hero__text::after { content: ""; width: 4rem; height: var(--rule-width); background: var(--color-copper); margin-block-start: var(--space-s); }
@media (min-width: 56rem) {
  .home-hero { padding-block: var(--space-3xl) var(--space-2xl); }
  .home-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); }
}

.practice-areas { display: grid; gap: var(--space-l) var(--space-xl); }
@media (min-width: 40rem) { .practice-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .practice-areas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.practice-area { display: grid; align-content: start; gap: var(--space-xs); padding-block-start: var(--space-m); border-block-start: var(--rule-width) solid var(--color-navy); }
.practice-area__index { font-family: var(--font-serif); color: var(--color-copper-text); }
.practice-area__list { display: grid; gap: var(--space-2xs); }
.practice-area__list a { color: var(--color-text); text-decoration: none; display: inline-flex; min-height: 1.75rem; align-items: center; }
.practice-area__list a:hover { color: var(--color-copper-text); text-decoration: underline; }

.industries-band__grid { display: grid; gap: var(--space-xl); }
@media (min-width: 56rem) { .industries-band__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); } }
.industries-band__list { display: grid; gap: 0; }
@media (min-width: 40rem) { .industries-band__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); } }
.section--navy a.industries-band__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s);
  padding-block: var(--space-s);
  border-block-end: var(--border-width) solid color-mix(in srgb, var(--color-on-dark) 18%, transparent);
  font-family: var(--font-serif);
  font-size: var(--step-2);
  line-height: 1.2;
  text-decoration: none;
  color: var(--color-on-dark);
}
.industries-band__link .icon { color: var(--color-copper); transition: transform var(--duration-fast) var(--ease-out); }
.industries-band__link:hover .icon { transform: translateX(4px); }

.numbered-points { display: grid; gap: var(--space-l) var(--space-xl); }
@media (min-width: 40rem) { .numbered-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .numbered-points { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.numbered-points__item { display: grid; gap: var(--space-2xs); align-content: start; padding-block-start: var(--space-s); border-block-start: var(--border-width) solid var(--color-border); }
.numbered-points__index { font-family: var(--font-serif); font-size: var(--step-1); color: var(--color-copper-text); }

/* 16. Cards & lists ------------------------------------------------------ */

.card-grid { display: grid; gap: var(--space-l); }
@media (min-width: 40rem) { .card-grid--2, .card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.insight-card { position: relative; display: grid; gap: var(--space-s); align-content: start; }
.insight-card__body { display: grid; gap: var(--space-2xs); }
.insight-card__category { margin: 0; }
.insight-card__title { font-family: var(--font-serif); font-size: var(--step-2); font-weight: var(--weight-regular); letter-spacing: -0.01em; }
.insight-card__link { color: var(--color-text); text-decoration: none; }
.insight-card__link::after { content: ""; position: absolute; inset: 0; }  /* whole card clickable */
.insight-card:hover .insight-card__link { text-decoration: underline; text-decoration-color: var(--color-copper); }
.insight-card__excerpt { margin: 0; }
.insight-card__meta { margin: 0; font-size: var(--step--1); color: var(--color-text-muted); }
.card-grid .insight-card:not(:has(.media)) { padding: var(--space-m); background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-m); }

/* Insights listing: one compact card style for every article, 1 → 2 (≈768px) → 4 (≈1200px) columns. */
.insight-grid { gap: var(--space-l) var(--space-m); }
@media (min-width: 46rem) { .insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* 768px windows incl. scrollbar */
@media (min-width: 72rem) { .insight-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }   /* 1200px windows incl. scrollbar */
/* Related insights under an article: same compact card, up to three per row; one or two cards keep
   the same width (left-aligned) so image sizes stay consistent. */
@media (min-width: 46rem) { .insight-related { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .insight-related { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.insight-card--compact { gap: var(--space-xs); }
.insight-card--compact .insight-card__body { gap: var(--space-3xs); }
.insight-card--compact .insight-card__title { font-size: var(--step-1); line-height: 1.3; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-block-start: var(--space-xl); }
.pagination__pages { display: flex; flex-wrap: wrap; gap: var(--space-3xs); list-style: none; margin: 0; padding: 0; }
.pagination a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; min-height: 2.5rem; padding-inline: var(--space-xs);
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-s); color: var(--color-text); text-decoration: none; }
.pagination a:hover { border-color: var(--color-navy); }
.pagination a[aria-current="page"] { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-button-text); font-weight: var(--weight-semibold); }
.tax-news__source { margin: 0; font-size: var(--step--1); font-weight: var(--weight-semibold); color: var(--color-text); }
.insight-feature { display: grid; gap: var(--space-l); margin-block-end: var(--space-2xl); position: relative; }
.insight-feature__body { display: grid; gap: var(--space-s); align-content: center; }
.insight-feature__body .lede { margin: 0; }
@media (min-width: 56rem) { .insight-feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); } }

.link-list { border-block-start: var(--border-width) solid var(--color-border); }
.link-list__item { border-block-end: var(--border-width) solid var(--color-border); }
.link-list__link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3xs) var(--space-m);
  padding-block: var(--space-s);
  color: var(--color-text);
  text-decoration: none;
}
.link-list__title { margin: 0; font-family: var(--font-sans); font-size: var(--step-0); font-weight: var(--weight-semibold); letter-spacing: 0; }
.link-list__text { grid-column: 1; color: var(--color-text-muted); font-size: var(--step--1); }
.link-list__arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--color-copper); transition: transform var(--duration-fast) var(--ease-out); }
.link-list__link:hover .link-list__title { text-decoration: underline; }
.link-list__link:hover .link-list__arrow { transform: translateX(4px); }

.feature-list { display: grid; gap: var(--space-m) var(--space-l); }
@media (min-width: 40rem) { .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feature-list__item { display: grid; gap: var(--space-2xs); align-content: start; padding-inline-start: var(--space-s); border-inline-start: var(--rule-width) solid var(--color-copper); scroll-margin-top: calc(var(--header-height) + var(--space-l)); }
.feature-list__item p { margin: 0; }

/* Compact, clickable industry cards (service pages): name + arrow, no description. */
.industry-cards { display: grid; gap: var(--space-xs); }
@media (min-width: 40rem) { .industry-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .industry-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.industry-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s);
  height: 100%;
  padding: var(--space-s) var(--space-m);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-m);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.industry-card:hover { border-color: var(--color-copper); box-shadow: 0 1px 0 var(--color-copper); }
.industry-card__title { margin: 0; font-family: var(--font-sans); font-size: var(--step-0); font-weight: var(--weight-semibold); letter-spacing: 0; line-height: 1.3; }
.industry-card__arrow { color: var(--color-copper); transition: transform var(--duration-fast) var(--ease-out); }
.industry-card:hover .industry-card__arrow { transform: translateX(4px); }

.steps { display: grid; gap: var(--space-m); counter-reset: none; }
.steps__item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-m); align-items: start; padding-block-start: var(--space-s); border-block-start: var(--border-width) solid var(--color-border); }
.steps__index { font-family: var(--font-serif); font-size: var(--step-2); line-height: 1; color: var(--color-copper-text); min-width: 2.2ch; }
.steps__item p { margin: var(--space-3xs) 0 0; }

.check-list { display: grid; gap: var(--space-xs); padding: 0; }
.check-list li { position: relative; padding-inline-start: 1.75em; }
.check-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.7em; width: 0.9em; height: var(--rule-width); background: var(--color-copper); }

.pill-links { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-block-start: var(--space-xs); }
.pill-links a, .filter-pills a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.35em 1em;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--step--1);
  text-decoration: none;
}
.pill-links a:hover, .filter-pills a:hover { border-color: var(--color-navy); }
.filter-pills { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.filter-pills a[aria-current="page"], .filter-pills a[aria-current="true"] { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-button-text); font-weight: var(--weight-semibold); text-decoration: underline; text-underline-offset: 0.2em; }   /* not colour alone */

/* 17. Content layout + section navigation -------------------------------- */

.content-layout { display: grid; gap: var(--space-l); padding-block: var(--space-xl) var(--space-2xl); }
.content-layout__main { display: grid; gap: var(--space-2xl); min-width: 0; }
.content-section { display: grid; gap: var(--space-m); scroll-margin-top: calc(var(--header-height) + var(--space-l)); }
.content-section > .h2 { max-width: 28ch; }
.content-section--compact { gap: var(--space-2xs); }
/* Service pages: tighter rhythm between sections than the editorial default. */
.content-layout--wide { padding-block: var(--space-xl); }
.content-layout--wide > .content-layout__main { gap: var(--space-xl); }
.content-layout--wide .content-section { gap: var(--space-s); }
@media (min-width: 64rem) {
  .content-layout { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--space-2xl); }
  .content-layout--single { grid-template-columns: minmax(0, 1fr); max-width: calc(52rem + 2 * var(--gutter)); }
  /* Service pages: no side navigation; content spans the page container (aligned with the hero).
     Paragraphs keep the reading measure (.prose); headings and card grids use the width. */
  .content-layout--wide { grid-template-columns: minmax(0, 1fr); }
  .content-layout--wide .content-section > .h2 { max-width: 40ch; }
  .content-layout--wide .feature-list--thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* 3 or 6 items; others stay 2-up (no orphan card) */
}

.section-nav__mobile { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-m); background: var(--color-surface); }
.section-nav__mobile summary { padding: var(--space-xs) var(--space-s); min-height: 2.75rem; font-weight: var(--weight-semibold); font-size: var(--step--1); cursor: pointer; }
.section-nav__mobile ul { list-style: none; margin: 0; padding: 0 var(--space-s) var(--space-xs); }
.section-nav__mobile a { display: block; padding: var(--space-2xs) 0; color: var(--color-text); }
.section-nav__desktop { display: none; }
@media (min-width: 64rem) {
  .section-nav__mobile { display: none; }
  .section-nav__desktop { display: block; position: sticky; top: calc(var(--header-height) + var(--space-l)); }
  .section-nav__label { font-size: 0.72rem; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-muted); margin-block-end: var(--space-xs); }
  .section-nav__desktop ul { list-style: none; margin: 0; padding: 0; border-inline-start: var(--border-width) solid var(--color-border); }
  .section-nav__desktop a { display: block; padding: var(--space-2xs) var(--space-s); margin-inline-start: -1px; border-inline-start: var(--rule-width) solid transparent; color: var(--color-text-muted); text-decoration: none; font-size: var(--step--1); }
  .section-nav__desktop a:hover { color: var(--color-text); }
  .section-nav__desktop a[aria-current="true"] { color: var(--color-text); border-color: var(--color-copper); font-weight: var(--weight-semibold); }
}

/* 18. FAQ ---------------------------------------------------------------- */

.faq-list { border-block-start: var(--border-width) solid var(--color-border); }
.faq { border-block-end: var(--border-width) solid var(--color-border); }
.faq__question { display: flex; justify-content: space-between; align-items: center; gap: var(--space-m); padding-block: var(--space-s); cursor: pointer; list-style: none; min-height: 3rem; }
.faq__question::-webkit-details-marker { display: none; }
.faq__title { margin: 0; font-family: var(--font-sans); font-size: var(--step-0); font-weight: var(--weight-semibold); letter-spacing: 0; line-height: 1.4; }
.faq__icon { position: relative; flex: none; width: 1rem; height: 1rem; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; background: var(--color-copper); transition: transform var(--duration-fast) var(--ease-out); }
.faq__icon::after { transform: rotate(90deg); }
.faq[open] .faq__icon::after { transform: rotate(0deg); }
.faq__question:hover .faq__title { color: var(--color-copper-text); }
.faq__answer { padding-block-end: var(--space-m); color: var(--color-text); max-width: var(--measure); }

.faq-page__layout { display: grid; gap: var(--space-xl); }
.faq-page__controls { display: grid; gap: var(--space-m); align-content: start; }
.faq-page__categories ul { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.faq-page__categories a {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.35em 1em;
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-text); font-size: var(--step--1); text-decoration: none;
}
.faq-page__categories a[aria-current="true"] { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-button-text); }
.faq-page__categories a[aria-current="true"] .muted { color: var(--color-on-dark-muted); }
.faq-group { display: grid; gap: var(--space-s); margin-block-end: var(--space-xl); scroll-margin-top: calc(var(--header-height) + var(--space-l)); }
@media (min-width: 64rem) {
  .faq-page__layout { grid-template-columns: 17rem minmax(0, 1fr); gap: var(--space-2xl); }
  .faq-page__controls { position: sticky; top: calc(var(--header-height) + var(--space-l)); }
  .faq-page__categories ul { flex-direction: column; flex-wrap: nowrap; }
  .faq-page__categories a { border-radius: var(--radius-s); width: 100%; }
}

/* 19. Article ------------------------------------------------------------ */

.article__header { padding-block: var(--space-xl) var(--space-l); }
.article__header .container { display: grid; gap: var(--space-s); }
.article__title { max-width: 22ch; }
.article__intro { margin: 0; }
.article__meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m); margin: 0; font-size: var(--step--1); color: var(--color-text-muted); }
.article__media { margin-block-end: var(--space-xl); }
.article__layout { display: grid; gap: var(--space-l); padding-block-end: var(--space-2xl); max-width: calc(48rem + 2 * var(--gutter)); }
.article__body { max-width: none; }
.article__body h2 { scroll-margin-top: calc(var(--header-height) + var(--space-l)); }
/* Article tables: ruled comparison table; on narrow screens each row becomes a stacked card
   (cells labelled from data-label), so the page never scrolls sideways. */
.article__body table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.article__body th, .article__body td { padding: var(--space-2xs) var(--space-xs); border-block-end: var(--border-width) solid var(--color-border); text-align: start; vertical-align: top; }
.article__body caption { caption-side: top; text-align: start; color: var(--color-text-muted); padding-block-end: var(--space-2xs); }
.article__body thead th { color: var(--color-text); font-weight: var(--weight-semibold); border-block-end: var(--rule-width) solid var(--color-navy); }
.article__body tbody th { font-weight: var(--weight-semibold); color: var(--color-text); }
@media (max-width: 40rem) {
  .article__body table, .article__body caption, .article__body tbody, .article__body tr, .article__body th, .article__body td { display: block; width: 100%; }
  .article__body thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .article__body tbody tr { padding-block: var(--space-xs); border-block-end: var(--rule-width) solid var(--color-navy); }
  .article__body tbody th, .article__body td { border: 0; padding: var(--space-3xs) 0; }
  .article__body td[data-label]::before { content: attr(data-label) ": "; font-weight: var(--weight-semibold); color: var(--color-text); }
}
.article__toc details { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-m); padding: var(--space-xs) var(--space-s); background: var(--color-bg-alt); }
.article__toc summary { font-weight: var(--weight-semibold); font-size: var(--step--1); cursor: pointer; min-height: 2rem; }
.article__toc ol { margin: var(--space-xs) 0 0; padding-inline-start: 1.25em; display: grid; gap: var(--space-3xs); font-size: var(--step--1); }
.article__toc a { color: var(--color-text); }
@media (min-width: 72rem) {
  /* Body column stays centred under the headline; the TOC sits in the left margin. */
  .article__layout--toc { max-width: calc(var(--container-max) + 2 * var(--gutter)); grid-template-columns: minmax(0, 1fr) minmax(0, 48rem) minmax(0, 1fr); gap: var(--space-xl); }
  .article__layout--toc .article__toc { grid-column: 1; justify-self: end; width: min(15rem, 100%); }
  .article__layout--toc .article__body { grid-column: 2; }
  .article__toc details { position: sticky; top: calc(var(--header-height) + var(--space-l)); background: none; border: 0; padding: 0; }
  .article__toc summary { pointer-events: none; list-style: none; font-size: 0.72rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-muted); }
  .article__toc summary::-webkit-details-marker { display: none; }
}
.article__cta { margin-block-start: var(--space-xl); padding: var(--space-m); border-inline-start: var(--rule-width) solid var(--color-copper); background: var(--color-bg-alt); }
.article__cta p { margin: 0; }
.article__disclaimer { font-size: var(--step--1); }
.article__related-topics { padding-block-end: var(--space-2xl); }

/* 20. Insights landing / news -------------------------------------------- */

.insights-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-m); margin-block-end: var(--space-xl); }   /* items shrink on 320px phones */
@media (min-width: 72rem) { .insights-toolbar { grid-template-columns: auto 1fr auto; align-items: center; } }
.search-field { display: flex; gap: var(--space-2xs); }
.search-field .field__input { min-width: 0; flex: 1; }

.news-list { border-block-start: var(--border-width) solid var(--color-border); }
.news-list__item { display: grid; gap: var(--space-3xs); padding-block: var(--space-s); border-block-end: var(--border-width) solid var(--color-border); }
.news-list__meta { display: flex; gap: var(--space-s); margin: 0; font-size: var(--step--1); color: var(--color-text-muted); }
.news-list__source { font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-navy); }
.news-list__link { color: var(--color-text); font-weight: var(--weight-medium); text-decoration: none; }
.news-list__link:hover { text-decoration: underline; }
.news-list__link .icon--external { display: inline-block; width: 0.8em; height: 0.8em; margin-inline-start: 0.25em; vertical-align: baseline; color: var(--color-text-muted); }
.news-list__summary { margin: 0; font-size: var(--step--1); }
.tax-news__note { font-size: var(--step--1); }

/* 21. Reviews ------------------------------------------------------------- */

.reviews__summary { display: flex; align-items: baseline; gap: var(--space-xs); margin: 0; }
.reviews__rating { font-family: var(--font-serif); font-size: var(--step-4); line-height: 1; }
.reviews__list { display: grid; gap: var(--space-l); }
@media (min-width: 56rem) { .reviews__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.review { padding-block-start: var(--space-s); border-block-start: var(--rule-width) solid var(--color-copper); }
.review__text { margin: 0; font-family: var(--font-serif); font-size: var(--step-1); }

/* 22. Contact ------------------------------------------------------------- */

.contact-hero__grid { display: grid; gap: var(--space-xl); }
.contact-hero__grid .lede { margin-block: var(--space-s) 0; }
@media (min-width: 56rem) { .contact-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: start; } }
.contact-options { display: grid; gap: var(--space-s); margin: 0; padding: var(--space-m); background: var(--color-bg-alt); border-radius: var(--radius-m); }
.contact-options div { display: grid; gap: 0.1em; }
.contact-options dt { font-size: 0.72rem; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-muted); }
.contact-options dd { margin: 0; }
.contact-options a { color: var(--color-text); }

#message, #book { scroll-margin-top: var(--header-height); }
#message:focus, #book:focus { outline: none; }
.form-grid { display: grid; gap: 0 var(--space-m); }
@media (min-width: 40rem) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .field--full { grid-column: 1 / -1; } }
.form-grid .field { max-width: none; }
textarea.field__input { min-height: 9rem; resize: vertical; }
select.field__input {
  appearance: none;
  /* Chevron as an inline SVG data URI (allowed by CSP img-src data:) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%234F5A66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85em center;
  background-size: 1rem;
  padding-inline-end: 2.5em;
}
.field--choices { border: 0; padding: 0; margin: 0 0 var(--space-m); }
.choices { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m); margin-block-start: var(--space-2xs); }
.choice { display: inline-flex; align-items: center; gap: 0.5em; min-height: 2.75rem; cursor: pointer; }
.choice input { width: 1.15rem; height: 1.15rem; accent-color: var(--color-navy); }
.field--honeypot { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.captcha-slot { margin-block: var(--space-s) var(--space-m); }
.error-summary { margin-block-end: var(--space-m); padding: var(--space-m); border: var(--rule-width) solid var(--color-danger); border-radius: var(--radius-m); background: var(--color-surface); }
.error-summary ul { margin: var(--space-2xs) 0 0; padding-inline-start: 1.25em; }
.error-summary a { color: var(--color-danger); font-weight: var(--weight-medium); }
.confirmation { display: grid; gap: var(--space-s); padding: var(--space-l); background: var(--color-surface); border-inline-start: var(--rule-width) solid var(--color-copper); }
.confirmation:focus { outline: none; }
.scheduler { display: grid; gap: var(--space-m); }
.scheduler__placeholder { min-height: 14rem; display: grid; align-items: center; }
.scheduler__fallback { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s); margin: 0; }

/* 23. Office / location / leadership -------------------------------------- */

.office-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
@media (min-width: 56rem) { .office-block { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl); } }
.office-block__details { display: grid; gap: var(--space-s); }
.office-block__address { font-size: var(--step-1); line-height: 1.5; }

/* Contact office map: Google Maps embed in the right column (4:3). */
.map-embed { position: relative; width: 100%; aspect-ratio: 4 / 3; min-height: 15rem; border: var(--border-width) solid var(--color-border); background: var(--color-surface); overflow: hidden; }
.map-embed__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.detail-list { display: grid; gap: var(--space-2xs); margin: 0; }
.detail-list div { display: flex; flex-wrap: wrap; gap: 0 var(--space-xs); }
.detail-list dt { font-weight: var(--weight-semibold); }
.detail-list dt::after { content: ":"; }
.detail-list dd { margin: 0; }

.leader { display: grid; gap: var(--space-l); align-items: start; }
@media (min-width: 48rem) { .leader { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-2xl); } }
.leader__photo { max-width: 22rem; }
.leader__body { display: grid; gap: var(--space-s); }
.leader__body .lede { margin: 0; }
.leader__title { margin: 0; }
.leader__memberships { margin: var(--space-2xs) 0 0; font-size: var(--step--1); color: var(--color-text-muted); max-width: 60ch; }
.leader__memberships-label { display: block; font-weight: var(--weight-semibold); color: var(--color-text); }
.reviews--compact .button-row { margin-block-start: var(--space-s); }
.person-card { display: grid; gap: var(--space-2xs); }

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

/* Polish from Phase 2B visual review */
.contact-form { margin-block-start: var(--space-m); }
.faq-page__categories a { gap: 0.4em; }

/* =====================================================================
 * PHASE 2C — integrations (reCAPTCHA, Calendly, reviews, Chatbase)
 * ===================================================================== */

.captcha-slot { display: grid; gap: var(--space-2xs); margin-block: var(--space-s) var(--space-m); scroll-margin-top: calc(var(--header-height) + var(--space-l)); }
.captcha-slot:focus { outline: none; }
/* reCAPTCHA v3 is invisible; Google permits hiding its floating badge when the
   notice below is shown in the form (it is). */
.grecaptcha-badge { visibility: hidden; }
.captcha-notice { margin: 0; font-size: var(--step--1, 0.875rem); color: var(--color-text-muted, inherit); }
.captcha-notice a { color: inherit; text-decoration: underline; }

.scheduler__frame {
  display: block;
  width: 100%;
  height: 46rem;               /* Calendly inline view incl. time slots */
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-m);
  background: var(--color-surface);
}
@media (max-width: 39.99rem) { .scheduler__frame { height: 62rem; } }   /* stacked mobile layout */
@media (min-width: 24rem) { .scheduler__fallback .text-link { white-space: nowrap; } }   /* wraps on 320px phones (no sideways scroll) */

.review { display: grid; gap: var(--space-xs); align-content: start; }
.review__stars { margin: 0; color: var(--color-copper-text); letter-spacing: 0.1em; font-size: var(--step--1); }
.review__meta { display: flex; align-items: center; gap: var(--space-2xs); margin: 0; font-size: var(--step--1); color: var(--color-text-muted); }
.review__meta a { color: var(--color-text); }
.review__photo { width: 32px; height: 32px; border-radius: var(--radius-pill); }
.reviews__attribution { font-size: var(--step--1); margin-block-start: var(--space-s); }
.reviews__source { font-weight: 600; color: var(--color-text); }
.review__note { margin: 0; font-size: var(--step--1); }
.review__source { justify-self: start; font-size: var(--step--1); }

/* Chatbase (existing firm chatbot).
   - Starts collapsed: the auto-opening greeting bubble is suppressed.
   - Launcher matches the site palette (the dashboard still has the old orange).
   - Hidden while the mobile menu is open. */
#chatbase-message-bubbles { display: none !important; }
#chatbase-bubble-button {
  box-shadow: 0 6px 20px -6px rgb(15 28 46 / 0.45) !important;
}
#chatbase-bubble-button:focus-visible { outline: 3px solid var(--color-copper) !important; outline-offset: 3px !important; }
@media (max-width: 39.99rem) {
  /* Leave the bottom of the page readable on phones. */
  body[data-chatbase] .site-footer__bar { padding-bottom: 4.5rem; }
}
@media (min-width: 40rem) {
  /* Tablet/laptop widths: keep the legal links clear of the bubble (bottom-right, ~4.5rem wide);
     wide screens, where the centred container already leaves room, are unchanged. */
  body[data-chatbase] .site-footer__bar-inner {
    padding-inline-end: max(var(--gutter), min(4.75rem, calc(4.75rem + var(--gutter) - (100vw - var(--container-max)) / 2)));
  }
}
.nav-open #chatbase-bubble-button,
.nav-open #chatbase-bubble-window,
.nav-open #chatbase-message-bubbles { display: none !important; }

/* The HTML `hidden` attribute must win over component display rules
   (e.g. .button { display: inline-flex }). Placed last so equal-specificity
   component rules cannot override it; more specific state rules
   (.js .nav-toggle[hidden]) still apply as designed. */
[hidden] { display: none; }

/* ------------------------------------------------------------------ *
 * Legal pages only (Privacy Policy, Terms of Use — templates/pages/legal.php).
 * ~900px reading column, smaller section headings, even rhythm, subtle
 * rules between sections. Nothing here applies to any other page.
 * ------------------------------------------------------------------ */
.legal-page__container { max-width: calc(56.25rem + 2 * var(--gutter)); }
.legal-page__hero { padding-block: var(--space-l) var(--space-m); }
.legal-page__hero .h1 { font-size: var(--step-4); }
.legal-page__section { padding-block: var(--space-m) var(--space-xl); }
.legal-page__body { max-width: none; line-height: var(--leading-body); }
.legal-page__body > * + * { margin-block-start: var(--space-xs); }
.legal-page__body h2 {
  font-size: var(--step-2);
  margin-block-start: var(--space-l);
  padding-block-start: var(--space-m);
  border-block-start: var(--border-width) solid var(--color-border);
}
.legal-page__body > h2:first-child { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; }
.legal-page__body h3 { font-size: var(--step-1); margin-block-start: var(--space-m); }
.legal-page__body h2 + *, .legal-page__body h3 + * { margin-block-start: var(--space-2xs); }
.legal-page__body ul, .legal-page__body ol { padding-inline-start: 1.4em; }
.legal-page__body li::marker { color: var(--color-copper-text); }
@media (max-width: 40rem) {
  .legal-page__body h2 { margin-block-start: var(--space-m); padding-block-start: var(--space-s); }
}