/* Tax with Integrity design system, concatenated from design-system/ on 2026-08-06.
   Order per _ds_manifest.json globalCssPaths. Google Fonts @import removed and
   enqueued separately by the child theme so it does not render-block via @import. */

/* ===== tokens/colors.css ===== */
/* Tax with Integrity: color tokens
   Reconciled 2026-07-31 to the real client logo extracted from the combined
   TWI + IBP lockup (PR #1164, core-documents/brand-assets/BRAND-TOKENS.md).
   Anchor values sampled from the extracted mark: navy #021A62 (TAX letterforms),
   blue #002DB7 (primary), royal #365DBE (light gradient stop), ink #020202.
   The brand gradient runs #021A62 to #365DBE (matches the TAX wordmark).
   The TWI mark is BLUE-based: no green or gold in the brand palette unless
   Malinda confirms one (the gold rule belongs to sister brand Integrity
   Bookkeeping Pros). CTAs are royal blue with white text. Growth green stays
   a functional success-state color only, never a brand surface. */
:root {
  /* Brand navy (logo letterforms) */
  --navy-950: #010D38;   /* footer, deepest surface */
  --navy-900: #02144D;
  --navy-700: #021A62;   /* PRIMARY brand navy, from the TAX letterforms */
  --navy-600: #0A2A85;   /* hover on navy surfaces */

  /* Brand blue and royal (logo gradient and checkmark) */
  --royal-700: #01238C;  /* deep accent text on soft surfaces */
  --royal-600: #002DB7;  /* PRIMARY brand blue */
  --royal-500: #365DBE;  /* light stop of the logo gradient */
  --royal-300: #9BAEDF;
  --royal-100: #D7DFF2;
  --royal-50:  #EBEFF9;

  /* Neutrals */
  --white:    #FFFFFF;
  --gray-50:  #F5F7FB;   /* section backgrounds */
  --gray-100: #EAEEF4;
  --gray-200: #D9E0EA;   /* borders, dividers */
  --slate-600:#415063;   /* strong slate */
  --slate-500:#5C6C81;   /* muted text */
  --ink:      #020202;   /* body text, the logo wordmark ink */

  /* CTA accent: royal blue with white text (blue-based brand, no gold) */
  --accent:          var(--royal-600);
  --accent-hover:    var(--royal-500);
  --accent-deep:     var(--royal-700);
  --accent-soft:     var(--royal-100);
  --accent-contrast: #FFFFFF;

  /* Semantic aliases */
  --text-heading: var(--navy-700);
  --text-body:    var(--ink);
  --text-muted:   var(--slate-500);
  --text-inverse: #FFFFFF;
  --text-inverse-muted: #B9C5E2;

  --surface-page:      #FFFFFF;
  --surface-section:   var(--gray-50);
  --surface-card:      #FFFFFF;
  --surface-navy:      var(--navy-700);
  --surface-navy-deep: var(--navy-950);
  --surface-tint:      var(--royal-50);

  --border:        var(--gray-200);
  --border-subtle: var(--gray-100);
  --border-strong: var(--royal-300);

  --focus-ring: rgba(0, 45, 183, 0.45);
  --error:      #C0453C;
  --error-bg:   #FBEDEC;
  --success:    #2E7D5B;  /* growth green, reserved for success states and proof marks */
  --success-bg: #E9F4EF;
}

/* ===== tokens/typography.css ===== */
/* Tax with Integrity: typography tokens */
:root {
  --font-heading: "Archivo", "Segoe UI", -apple-system, sans-serif;
  --font-body:    "Public Sans", "Segoe UI", -apple-system, sans-serif;

  /* Type scale: dominant H1, clearly stepped */
  --fs-display: clamp(42px, 5.6vw, 62px); /* @kind font */
  --fs-h1:      clamp(36px, 5vw, 52px); /* @kind font */
  --fs-h2:      clamp(28px, 3.6vw, 38px); /* @kind font */
  --fs-h3:      24px; /* @kind font */
  --fs-h4:      19px; /* @kind font */
  --fs-body-lg: 19px; /* @kind font */
  --fs-body:    17px; /* @kind font */
  --fs-small:   15px; /* @kind font */
  --fs-overline:13px; /* @kind font */

  --fw-body:     400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-heading:  700; /* @kind font */
  --fw-bold:     800; /* @kind font */

  --lh-display:    1.05; /* @kind font */
  --lh-heading:    1.12; /* @kind font */
  --lh-subheading: 1.3; /* @kind font */
  --lh-body:       1.62; /* @kind font */

  --ls-heading:  -0.02em; /* @kind font */
  --ls-overline:  0.13em; /* @kind font */
}

/* ===== tokens/spacing.css ===== */
/* Tax with Integrity: spacing, radii, layout tokens (4px base)
   Radii are intentionally varied by role: panels 20, cards 14, controls 8, badges 4. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --radius-sm:   4px;    /* badges, tags */
  --radius-md:   8px;    /* controls, buttons */
  --radius-lg:   14px;   /* cards */
  --radius-xl:   20px;   /* feature panels, photo frames */

  --container-max: 1160px;
  --container-pad: 24px;
  --section-y:     var(--space-9);
}

/* ===== tokens/effects.css ===== */
/* Tax with Integrity: shadows, focus, transitions, signature washes
   All shadows are navy-tinted, never gray. The royal wash mirrors the
   navy-to-royal gradient inside the logo's A and checkmark; use it surgically. */
:root {
  --shadow-xs:         0 1px 2px rgba(13, 29, 92, 0.10);
  --shadow-card:       0 1px 2px rgba(13, 29, 92, 0.05), 0 8px 24px rgba(13, 29, 92, 0.08);
  --shadow-card-hover: 0 2px 6px rgba(13, 29, 92, 0.08), 0 18px 42px rgba(13, 29, 92, 0.15);
  --shadow-lift:       0 24px 60px rgba(8, 19, 56, 0.22);
  --shadow-header:     0 1px 0 rgba(13, 29, 92, 0.08);

  --focus-shadow: 0 0 0 3px var(--focus-ring);

  --transition-fast: 130ms cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */

  /* Signature washes */
  --wash-navy:  linear-gradient(150deg, var(--navy-700) 0%, var(--navy-950) 100%);
  --wash-royal: linear-gradient(135deg, var(--navy-700) 0%, var(--royal-500) 100%);
  --wash-tint:  linear-gradient(180deg, var(--white) 0%, var(--royal-50) 100%);
}

/* ===== tokens/base.css ===== */
/* Tax with Integrity: base reset and element defaults */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  color: var(--text-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-subheading); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-subheading); }
p  { margin: 0 0 var(--space-4); }
a  { color: var(--royal-600); text-decoration: none; font-weight: var(--fw-semibold); }
a:hover { color: var(--navy-700); text-decoration: none; }
img { max-width: 100%; display: block; }
.lucide { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ===== styles.css ===== */
/* ============================================================
   Tax with Integrity: Design System v1 (Claude Code authored)
   Global component stylesheet. Imports all tokens, then defines
   every component class so specimen cards and pages share one source.
   ============================================================ */

/* ---- Layout helpers ---- */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.section  { padding: var(--section-y) 0; }
.section--tint { background: var(--surface-section); }
.section--wash { background: var(--wash-tint); }
.section--navy { background: var(--wash-navy); color: var(--text-inverse); }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--navy p { color: var(--text-inverse-muted); }
.stack > * + * { margin-top: var(--space-4); }

/* Inline links inside a dark section: the global royal-600/navy-700 link
   colors (above) are tuned for light backgrounds and disappear against
   .section--navy (and .section--photo, which is always paired with it).
   Flagged 2026-08-12 (Mario, Willmary) after in-body links on the homepage
   and about-page Blueprint bands were hard to read in both the normal and
   hover states. Revised same day: "inherit + underline-on-hover" bled onto
   the hero/CTA-band buttons too, since .btn is an <a> and every button in
   a .section--navy hero or cta-band picked up an unwanted hover underline.
   Scoped to :not(.btn) and set to a flat white in both states (no color or
   decoration change on hover) so it reads clearly against the dark wash
   without touching button styling. Applies globally since twi-design-system
   loads on every page. */
.section--navy a:not(.btn) { color: #FFFFFF; font-weight: var(--fw-semibold); }
.section--navy a:not(.btn):hover, .section--navy a:not(.btn):focus-visible { color: #FFFFFF; text-decoration: none; }

/* ---- Overline kicker (accent rule + royal label) ---- */
.overline {
  font-family: var(--font-heading);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--royal-600);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}
.overline::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--accent);
  display: inline-block;
}
.section--navy .overline { color: var(--royal-300); }

/* ---- Buttons ---- */
.btn {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 13px 22px;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--lg { padding: 16px 30px; font-size: var(--fs-body); }
.btn--sm { padding: 9px 16px; font-size: var(--fs-overline); }
.btn .lucide { width: 18px; height: 18px; }

.btn--primary {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: var(--shadow-xs);
}
/* :hover repeats the color explicitly: the global `a:hover { color: ... }`
   rule (0,1,1) otherwise outranks .btn--primary's own color (0,1,0) on
   specificity alone, so the button text was silently flipping to navy-700
   on hover. Flagged 2026-08-12. Same fix applied to .btn--secondary below. */
.btn--primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-card); transform: translateY(-1px); color: var(--accent-contrast); }

.btn--secondary {
  background: var(--navy-700);
  color: #fff;
}
.btn--secondary:hover { background: var(--navy-600); transform: translateY(-1px); color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--navy-700);
  border-color: var(--border-strong);
}
.btn--ghost:hover { background: var(--royal-50); border-color: var(--royal-500); }

.section--navy .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.35); }
.section--navy .btn--ghost:hover { background: rgba(255,255,255,0.08); border-color: #fff; }

.btn[disabled], .btn.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* ---- Service badges (flat, 4px radius; never pill or button shaped) ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-overline);
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: var(--royal-50);
  color: var(--navy-700);
}
.badge--navy { background: var(--navy-700); color: #fff; }
.badge--accent { background: var(--accent-soft); color: var(--accent-deep); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; }

/* ---- Response promise cue (signature brand element) ---- */
.promise {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  color: var(--navy-700);
}
.promise .lucide { width: 20px; height: 20px; color: var(--accent-deep); flex: none; }
.promise span em { font-style: normal; color: var(--slate-500); font-weight: var(--fw-body); }
.section--navy .promise, .site-footer .promise { color: #fff; }
.section--navy .promise .lucide, .site-footer .promise .lucide { color: var(--royal-300); }
.section--navy .promise span em, .site-footer .promise span em { color: var(--text-inverse-muted); }

/* ---- Call and text contact lines (phone-first conversion) ---- */
.contact-line {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--navy-700);
  text-decoration: none;
}
.contact-line .lucide { width: 20px; height: 20px; color: var(--royal-600); flex: none; }
.contact-line small { display: block; font-family: var(--font-body); font-weight: var(--fw-body); font-size: var(--fs-overline); color: var(--text-muted); letter-spacing: 0.02em; }
.contact-line:hover { color: var(--royal-600); }
.section--navy .contact-line, .site-footer .contact-line { color: #fff; }
.section--navy .contact-line .lucide, .site-footer .contact-line .lucide { color: var(--royal-300); }
.section--navy .contact-line small, .site-footer .contact-line small { color: var(--text-inverse-muted); }

/* ---- Verified list item (documented and defensible cue) ---- */
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-3); }
.check-list .lucide { width: 20px; height: 20px; color: var(--success); flex: none; margin-top: 3px; }
.section--navy .check-list .lucide { color: var(--royal-300); }

/* ---- Cards ---- */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }

.service-card { position: relative; display: flex; flex-direction: column; }
.service-card .svc-icon {
  width: 52px; height: 52px; border-radius: var(--radius-md);
  display: inline-grid; place-items: center;
  background: var(--royal-50); color: var(--navy-700);
  transition: background var(--transition-base), color var(--transition-base);
}
.service-card .svc-icon .lucide { width: 26px; height: 26px; }
.service-card:hover .svc-icon { background: var(--navy-700); color: #fff; }
.service-card h3 { margin: var(--space-4) 0 var(--space-2); }
.service-card p { color: var(--text-muted); margin: 0 0 var(--space-4); }
.service-card .arrow { font-family: var(--font-heading); font-weight: 600; color: var(--royal-600); font-size: var(--fs-small); margin-top: auto; display: inline-flex; align-items: center; gap: 6px; }
.service-card .arrow .lucide { width: 16px; height: 16px; }

/* Featured service card: the signature S-Corp strategy surface */
.service-card--feature {
  background: var(--wash-navy);
  border: none;
  color: var(--text-inverse);
}
.service-card--feature h3 { color: #fff; }
.service-card--feature p { color: var(--text-inverse-muted); }
.service-card--feature .svc-icon { background: rgba(255,255,255,0.12); color: var(--royal-300); }
.service-card--feature:hover .svc-icon { background: var(--royal-300); color: var(--navy-950); }
.service-card--feature .arrow { color: var(--royal-300); }

.stat-card { text-align: left; }
.stat-card .stat-num {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 44px;
  color: var(--navy-700);
  line-height: 1;
  letter-spacing: -0.03em;
}
.stat-card .stat-num em { color: var(--accent-deep); font-style: normal; }
/* Phrase variant: use when the figure is only meaningful with its words (an address, a place name).
   Never leave a bare number standing alone if it does not read as a statistic. */
.stat-card .stat-num--phrase { font-size: var(--fs-h3); letter-spacing: -0.01em; line-height: 1.2; }
.stat-card .stat-label { color: var(--text-muted); font-size: var(--fs-small); margin-top: var(--space-2); }

.testimonial-card { background: var(--wash-tint); border-color: var(--royal-100); }
.testimonial-card .qmark { color: var(--royal-300); margin-bottom: var(--space-3); }
.testimonial-card .qmark .lucide { width: 30px; height: 30px; }
.testimonial-card .quote { font-size: var(--fs-body-lg); color: var(--ink); line-height: 1.5; margin: 0 0 var(--space-5); }
.testimonial-card .who { padding-top: var(--space-3); border-top: 1px solid var(--royal-100); }
.testimonial-card .who b { display: block; color: var(--navy-700); font-family: var(--font-heading); }
.testimonial-card .who span { font-size: var(--fs-small); color: var(--text-muted); }

/* ---- Blueprint step (named markers; order carried by layout, never numbers) ---- */
.bp-step { border-radius: var(--radius-lg); padding: var(--space-5); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); }
.bp-step .bp-name {
  font-family: var(--font-heading);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--royal-300);
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.bp-step .bp-name::before { content: ""; width: 16px; height: 2px; background: var(--royal-300); }
.bp-step h4 { color: #fff; margin-bottom: var(--space-2); }
.bp-step p { color: var(--text-inverse-muted); font-size: var(--fs-small); margin: 0; }
.bp-step--light { background: var(--surface-card); border-color: var(--border-subtle); box-shadow: var(--shadow-card); }
.bp-step--light .bp-name { color: var(--accent-deep); }
.bp-step--light .bp-name::before { background: var(--accent); }
.bp-step--light h4 { color: var(--navy-700); }
.bp-step--light p { color: var(--text-muted); }

/* ---- Form fields ---- */
.field { display: block; margin-bottom: var(--space-5); }
.field > label { display: block; font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-small); color: var(--navy-700); margin-bottom: var(--space-2); }
.field .hint { font-size: var(--fs-small); color: var(--text-muted); margin-top: 6px; }
.control {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.control::placeholder { color: #98A4B5; }
.control:focus { outline: none; border-color: var(--royal-500); box-shadow: var(--focus-shadow); }
textarea.control { min-height: 108px; resize: vertical; }
.field.is-error .control { border-color: var(--error); background: var(--error-bg); }
.field.is-error .hint { color: var(--error); }

/* ---- FAQ accordion ---- */
.faq-item { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); margin-bottom: var(--space-3); overflow: hidden; }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-body); color: var(--navy-700);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .lucide { width: 20px; height: 20px; color: var(--royal-600); flex: none; transition: transform var(--transition-base); }
.faq-item[open] summary .lucide { transform: rotate(45deg); }
.faq-item .faq-body { padding: 0 var(--space-5) var(--space-5); color: var(--text-muted); }

/* ---- Comparison block (their way vs the firm's way) ---- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.compare .compare-col { border-radius: var(--radius-lg); padding: var(--space-6); }
.compare .compare-col h4 { margin-bottom: var(--space-4); }
.compare .compare-col--plain { background: var(--surface-section); border: 1px solid var(--border-subtle); }
.compare .compare-col--plain h4 { color: var(--slate-600); }
.compare .compare-col--brand { background: var(--wash-navy); color: var(--text-inverse); }
.compare .compare-col--brand h4 { color: var(--royal-300); }
.compare .compare-col--brand p, .compare .compare-col--brand li { color: var(--text-inverse-muted); }

/* ---- Author bio (real person, framed head high) ---- */
.author-bio { display: flex; gap: var(--space-5); align-items: center; }
.author-bio .bio-photo { width: 96px; height: 96px; border-radius: var(--radius-xl); object-fit: cover; object-position: center 22%; box-shadow: var(--shadow-card); flex: none; }
.author-bio .bio-name { font-family: var(--font-heading); font-weight: var(--fw-semibold); color: var(--navy-700); }
.author-bio .bio-title { font-size: var(--fs-small); color: var(--text-muted); }
.author-bio .bio-creds { font-size: var(--fs-small); color: var(--slate-600); margin-top: var(--space-1); }

/* ---- Photo frame (hero and about portraits) ---- */
.photo-frame { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lift); position: relative; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.photo-frame .photo-caption {
  position: absolute; left: var(--space-4); bottom: var(--space-4);
  background: rgba(8, 19, 56, 0.82); color: #fff;
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: var(--fs-small);
}
.photo-frame .photo-caption b { font-family: var(--font-heading); display: block; }
.photo-frame .photo-caption span { color: var(--text-inverse-muted); font-size: var(--fs-overline); }

/* ---- Global header ---- */
.site-header {
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(1.4) blur(8px);
  box-shadow: var(--shadow-header);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky; top: 0; z-index: 50;
}
.site-header .bar { display: flex; align-items: center; gap: var(--space-6); height: 76px; }
.site-header .brand { display: flex; align-items: center; gap: var(--space-3); }
.site-header .brand img { height: 44px; width: auto; }
.site-header nav { display: flex; gap: var(--space-5); margin-left: var(--space-4); }
.site-header nav a { font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: var(--fs-small); color: var(--slate-600); }
.site-header nav a:hover { color: var(--navy-700); }
.site-header .spacer { flex: 1; }
.site-header .header-actions { display: flex; align-items: center; gap: var(--space-4); }

/* ---- Global footer (deep navy; legal cluster mandatory) ---- */
.site-footer { background: var(--surface-navy-deep); color: var(--text-inverse-muted); }
.site-footer .grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-7); padding: var(--space-9) 0 var(--space-7); }
.site-footer h4 { color: #fff; font-size: var(--fs-small); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: var(--space-4); }
.site-footer a { color: var(--text-inverse-muted); display: block; margin-bottom: var(--space-2); font-size: var(--fs-small); }
.site-footer a:hover { color: #fff; }
.site-footer .nap { font-style: normal; line-height: 1.7; font-size: var(--fs-small); }
.site-footer .footer-brand img { height: 44px; width: auto; margin-bottom: var(--space-4); background: #fff; padding: 8px 12px; border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.site-footer .sister-note { font-size: var(--fs-overline); color: var(--text-inverse-muted); margin-top: var(--space-4); line-height: 1.6; }
.site-footer .legal { border-top: 1px solid rgba(255,255,255,0.12); padding: var(--space-4) 0; display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; font-size: var(--fs-overline); color: var(--text-inverse-muted); }
.site-footer .legal-links { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.site-footer .legal-links a { display: inline; margin: 0; font-size: var(--fs-overline); }

/* ---- Page layouts: utility and editorial ---- */
/* 404: ships as theme 404.php, no Page-only chrome dependencies */
.layout-404 { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: var(--space-9) var(--container-pad); background: var(--wash-tint); }
.layout-404 .code { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: 92px; color: var(--royal-100); line-height: 1; letter-spacing: -0.04em; }
.layout-404 h1 { font-size: var(--fs-h2); margin-top: var(--space-3); }
.layout-404 .recovery { display: flex; gap: var(--space-4); justify-content: center; margin-top: var(--space-6); flex-wrap: wrap; }

/* Thank you: confirmation, next steps, reassurance */
.layout-thanks { max-width: 640px; margin: 0 auto; padding: var(--space-9) var(--container-pad); text-align: center; }
.layout-thanks .confirm-icon { width: 64px; height: 64px; border-radius: var(--radius-md); background: var(--success-bg); color: var(--success); display: inline-grid; place-items: center; margin-bottom: var(--space-5); }
.layout-thanks .confirm-icon .lucide { width: 32px; height: 32px; }
.layout-thanks .next-steps { text-align: left; margin-top: var(--space-6); }

/* Legal long form: readable single column, not a marketing template */
.layout-legal { max-width: 760px; margin: 0 auto; padding: var(--space-8) var(--container-pad) var(--space-9); }
.layout-legal .updated { font-size: var(--fs-small); color: var(--text-muted); margin-bottom: var(--space-6); }
.layout-legal h1 { font-size: var(--fs-h2); }
.layout-legal h2 { font-size: var(--fs-h3); margin-top: var(--space-7); }
.layout-legal p, .layout-legal li { line-height: 1.75; color: var(--slate-600); }
.layout-legal .toc { background: var(--surface-section); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-6); }
.layout-legal .toc a { display: block; margin-bottom: var(--space-2); font-size: var(--fs-small); }

/* Blog archive: card grid hub */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.post-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.post-card .post-cover { aspect-ratio: 16 / 9; background: var(--wash-royal); }
.post-card .post-cover img { width: 100%; height: 100%; object-fit: cover; }
.post-card .post-body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.post-card .post-meta { font-size: var(--fs-overline); color: var(--text-muted); margin-bottom: var(--space-2); }
.post-card h3 { font-size: var(--fs-h4); margin-bottom: var(--space-3); }
.post-card .arrow { margin-top: auto; }

/* Blog post: readable single column with meta line and CTA */
.layout-post { max-width: 760px; margin: 0 auto; padding: var(--space-8) var(--container-pad) var(--space-9); }
.layout-post .post-meta { font-size: var(--fs-small); color: var(--text-muted); margin-bottom: var(--space-5); }
.layout-post p, .layout-post li { font-size: var(--fs-body-lg); line-height: 1.75; color: var(--slate-600); }
.layout-post h2 { margin-top: var(--space-7); }
.layout-post .post-cta { background: var(--wash-navy); color: var(--text-inverse); border-radius: var(--radius-xl); padding: var(--space-6); margin-top: var(--space-7); }
.layout-post .post-cta h3 { color: #fff; }
.layout-post .post-cta p { color: var(--text-inverse-muted); font-size: var(--fs-body); }

/* ---- Utility ---- */
.eyebrow-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.muted { color: var(--text-muted); }
.lead { font-size: var(--fs-body-lg); color: var(--slate-600); line-height: 1.55; }

/* Visible breadcrumb for non-home marketing pages. */
.twi-breadcrumb { background: var(--surface-page); border-bottom: 1px solid var(--border-subtle); }
.twi-breadcrumb .container { display: flex; align-items: center; gap: var(--space-2); padding-top: var(--space-3); padding-bottom: var(--space-3); color: var(--text-muted); font-size: var(--fs-small); }
.twi-breadcrumb a { color: var(--royal-700); font-weight: var(--fw-semibold); }
.twi-breadcrumb a:hover { color: var(--royal-500); }