/* TIF Synergy — marketing site styles.
   Builds on assets/css/tokens.css (vendored from TaxLex).
   Marketing-site overrides + page-level components. */

/* ── Site-only gold contrast ramp ─────────────────────────────────
   --brand-gold (tokens.css, #b8963e) fails WCAG AA 4.5:1 on both light
   surfaces (2.58-2.81:1) and the forest background (3.58:1). These two
   variants are lightness-only adjustments of the same hue, tokenized
   here rather than in tokens.css: tokens.css mirrors the shared TaxLex
   design system and these two shades are specific to this marketing
   site. WCAG AA contrast fix, 2026-07-10; tokenized 2026-07-10. */
:root {
  --brand-gold-dk:      #836a2c; /* light backgrounds (cream/white/surface) */
  --brand-gold-on-dark: #cbae63; /* dark backgrounds (forest/ink) */
}

/* ── Reset / element defaults override ──────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

a { color: var(--brand-primary); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

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

ul { list-style: none; }

button { font-family: inherit; cursor: pointer; }

::selection { background: var(--brand-primary); color: var(--neutral-50); }

/* ── Layout ─────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 640px) {
  .container { padding: 0 20px; }
}

.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.section-lg { padding: 128px 0; }
@media (max-width: 768px) {
  .section { padding: 64px 0; }
  .section-lg { padding: 80px 0; }
}

.section-cream  { background: var(--bg); color: var(--text); }
.section-paper  { background: var(--surface); color: var(--text); }
.section-forest { background: var(--brand-primary); color: var(--neutral-50); }
.section-ink    { background: var(--neutral-900); color: var(--neutral-50); }

/* Forest and ink both used --brand-gold, but gold-on-forest only measures
   3.58:1 (fails WCAG AA 4.5:1) while gold-on-ink measures 6.25:1 (passes).
   Split so each background gets a value that actually clears 4.5:1.
   WCAG AA contrast fix, 2026-07-10. */
.section-forest .eyebrow { color: var(--brand-gold-on-dark); }
.section-ink .eyebrow { color: var(--brand-gold); }
.section-forest h1, .section-forest h2, .section-forest h3,
.section-ink h1, .section-ink h2, .section-ink h3 { color: var(--neutral-50); }
.section-forest .lede, .section-forest p,
.section-ink .lede, .section-ink p { color: rgba(247, 245, 240, 0.78); }
/* This rule's only live rendered instance today is the mailto link inside
   privacy.html's ink-section h2. There it clears 6.25:1 against the ink
   background, but with no other visual cue than colour (base `a` has no
   underline) it fails the WCAG 1.4.1 link-affordance test against its cream
   heading text (2.58:1, short of the 3:1 needed to read as a link by colour
   alone). Underlining, not recolouring, is the correct fix per WCAG's own
   guidance: it satisfies 1.4.1 regardless of the colour pairing. Buttons
   (.btn, .tool-tile) already carry `text-decoration: none !important` and
   are unaffected. On .section-forest specifically this colour still only
   reaches 3.58:1 against the background (fails 4.5:1 for normal text) but
   has no live rendered text instance today — .tool-tile's own <a> inherits
   this colour, but every visible child (h3/p/spans) has its own explicit
   colour, so nothing actually renders gold there. Left as a documented
   latent risk rather than recoloured pre-emptively; re-check if a plain
   body-text link is ever added inside a .section-forest block.
   WCAG AA contrast fix, 2026-07-12. */
.section-forest a, .section-ink a {
  color: var(--brand-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Typography ─────────────────────────────────────────────────── */
h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1.05; letter-spacing: -0.02em; color: var(--brand-primary); font-weight: 500; text-wrap: pretty; }
h2 { font-size: clamp(28px, 3.5vw, 40px); line-height: 1.15; letter-spacing: -0.015em; color: var(--brand-primary); font-weight: 500; }
h3 { font-size: clamp(20px, 2vw, 22px); line-height: 1.3; color: var(--brand-primary); font-weight: 500; font-family: var(--font-display); }
h4 { font-size: 16px; line-height: 1.4; color: var(--brand-primary); font-weight: 500; font-family: var(--font-body); }

p { font-size: 16px; line-height: 1.65; color: var(--text-2); text-wrap: pretty; }
.lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--text-2); max-width: 56ch; text-wrap: pretty; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* --brand-gold (#b8963e) only reaches 2.58:1 on cream / 2.81:1 on white —
     fails WCAG AA 4.5:1. Darkened, same hue, for use on cream/paper
     backgrounds. Dark-background contexts (forest/ink) override this below.
     WCAG AA contrast fix, 2026-07-10. */
  color: var(--brand-gold-dk);
  font-weight: 500;
  margin-bottom: 16px;
  display: inline-block;
}

.kicker {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 26px);
  color: var(--text-2);
  margin-top: 16px;
}

.section-forest .kicker, .section-ink .kicker { color: rgba(247, 245, 240, 0.7); }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  border: 1px solid transparent;
  transition: var(--motion-base);
  cursor: pointer;
}
.btn-primary {
  background: var(--brand-primary);
  color: var(--neutral-50);
}
.btn-primary:hover {
  background: var(--brand-primary-dk);
}
.btn-ghost {
  background: transparent;
  color: var(--brand-primary);
  border-color: rgba(26, 74, 58, 0.25);
}
.btn-ghost:hover {
  background: rgba(26, 74, 58, 0.06);
  border-color: var(--brand-primary);
}
.section-forest .btn-ghost, .section-ink .btn-ghost {
  color: var(--neutral-50);
  border-color: rgba(247, 245, 240, 0.3);
}
.section-forest .btn-ghost:hover, .section-ink .btn-ghost:hover {
  background: rgba(247, 245, 240, 0.08);
  border-color: var(--neutral-50);
}
.btn-gold {
  background: var(--brand-gold);
  color: var(--neutral-900);
}
.btn-gold:hover { background: #a8862e; }

/* ── Top nav ────────────────────────────────────────────────────── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 245, 240, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.site-nav .brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.site-nav .brand img { height: 34px; width: auto; }
.site-nav .links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.site-nav .links a {
  font-size: 14px;
  color: var(--text-2);
  text-decoration: none;
  transition: var(--motion-fast);
  font-weight: 500;
}
.site-nav .links a:hover { color: var(--brand-primary); text-decoration: none; }
.site-nav .links a.active,
.site-nav .links a[aria-current="page"] {
  color: var(--brand-primary);
  font-weight: 600;
  cursor: default;
  pointer-events: none;
  border-bottom: 2px solid var(--brand-gold);
  padding-bottom: 2px;
  margin-bottom: -2px;
}
.site-nav .links a.active:hover { text-decoration: none; }
.mobile-drawer a.active,
.mobile-drawer a[aria-current="page"] {
  color: var(--brand-gold);
  pointer-events: none;
}
.site-nav .cta { display: flex; align-items: center; gap: 12px; }
.site-nav .menu-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  color: var(--text);
}
@media (max-width: 860px) {
  .site-nav .links, .site-nav .cta .btn-ghost { display: none; }
  .site-nav .menu-toggle { display: inline-flex; }
}

/* ── Mobile drawer ──────────────────────────────────────────────── */
.mobile-drawer {
  position: fixed;
  inset: 72px 0 0 0;
  background: var(--neutral-900);
  color: var(--neutral-50);
  padding: 32px 24px;
  display: none;
  flex-direction: column;
  gap: 16px;
  z-index: 99;
}
.mobile-drawer.open { display: flex; }
.mobile-drawer a {
  color: var(--neutral-50);
  font-size: 20px;
  font-family: var(--font-display);
  padding: 12px 0;
  border-bottom: 1px solid rgba(247, 245, 240, 0.1);
  text-decoration: none;
}
.mobile-drawer a:hover { color: var(--brand-gold); }

/* ── Hero ───────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 120px 0 96px;
  overflow: hidden;
}
.hero.hero-forest {
  background: var(--brand-primary);
  color: var(--neutral-50);
}
.hero.hero-forest::before {
  content: "";
  position: absolute;
  right: -200px;
  top: -200px;
  width: 720px;
  height: 720px;
  border: 1px solid rgba(184, 150, 62, 0.15);
  border-radius: 50%;
  pointer-events: none;
}
.hero.hero-forest::after {
  content: "";
  position: absolute;
  right: -100px;
  top: -100px;
  width: 480px;
  height: 480px;
  border: 1px solid rgba(184, 150, 62, 0.25);
  border-radius: 50%;
  pointer-events: none;
}
.hero.hero-forest h1 { color: var(--neutral-50); }
.hero.hero-forest .lede { color: rgba(247, 245, 240, 0.78); }
/* Base .eyebrow is now darkened for light backgrounds — restore a gold that
   clears 4.5:1 against the forest background here. Same value as
   .section-forest .eyebrow. WCAG AA contrast fix, 2026-07-10. */
.hero.hero-forest .eyebrow { color: var(--brand-gold-on-dark); }
.hero .container { position: relative; z-index: 2; }
/* Heading keeps its tuned wrap; the lede is widened to meet the heading's
   right edge so the two text blocks align. Both cap in rem and fall back to
   the container width on smaller screens, so it stays responsive. */
.hero h1 { max-width: none; }
.hero .lede { margin-top: 24px; max-width: none; }
.hero .hero-actions { margin-top: 40px; display: flex; gap: 16px; flex-wrap: wrap; }

/* ── Sub-page hero (more compact) ───────────────────────────────── */
.hero-sub {
  padding: 96px 0 56px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
/* Matches darkened base .eyebrow value — hero-sub sits on the cream --bg.
   WCAG AA contrast fix, 2026-07-10. */
.hero-sub .eyebrow { color: var(--brand-gold-dk); }
.hero-sub h1 { max-width: none; }
.hero-sub .lede { margin-top: 20px; max-width: none; }

/* Section text spans the full container width so headings, ledes and body
   paragraphs align with the card grid / boxes below them (the widest element
   on the row). Covers left-aligned and centered (.text-center) sections;
   centered ones stay centered via their margin:auto. Scoped to direct
   children of a section .container, so cards, grids and split columns keep
   their own width. Fills the container at every breakpoint (responsive). */
.section > .container > h2,
.section > .container > .lede,
.section > .container > p {
  max-width: none;
}

/* ── Grids ──────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: 20px; }
}

/* ── Cards ──────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
  transition: var(--motion-base);
  position: relative;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card .num {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 400;
  /* 38px clears the large-text threshold (24px/18.66px-bold), so the
     3:1 large-text floor applies, not 4.5:1 — but --brand-gold still
     only reaches 2.81:1 on --surface (white), short even of 3:1.
     Reuses the same darkened ramp value rather than minting a third
     shade for a decorative numeral. WCAG AA contrast fix, 2026-07-10. */
  color: var(--brand-gold-dk);
  line-height: 1;
  margin-bottom: 12px;
}
.card h3 { color: var(--brand-primary); margin-bottom: 12px; }
.card p { font-size: 15px; }

/* Pillar card — sits on cream, gold pin top-right */
.pillar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  position: relative;
}
.pillar::before {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-gold);
}
.pillar .pillar-eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* .pillar sits on --surface (white) — same gold-on-light failure as
     .eyebrow (2.81:1). Same darkened value. WCAG AA contrast fix, 2026-07-10. */
  color: var(--brand-gold-dk);
  font-weight: 500;
  margin-bottom: 16px;
}
.pillar h3 {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--brand-primary);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 16px;
}
.pillar p { font-size: 15px; line-height: 1.6; color: var(--text-2); }
.pillar ul { margin-top: 16px; }
.pillar ul li {
  font-size: 14px;
  color: var(--text-2);
  padding-left: 18px;
  position: relative;
  margin-bottom: 6px;
}
.pillar ul li::before {
  content: "·";
  color: var(--brand-gold);
  position: absolute;
  left: 6px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.1;
}

/* Case-study card */
.case {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.case-cover {
  background: var(--brand-primary);
  color: var(--neutral-50);
  padding: 40px;
  position: relative;
  min-height: 200px;
}
.case-cover .case-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* .case-cover background is --brand-primary — the exact pair flagged on
     the hero eyebrow (3.58:1). Same lightened value. WCAG AA contrast fix,
     2026-07-10. */
  color: var(--brand-gold-on-dark);
  font-weight: 500;
  margin-bottom: 12px;
}
.case-cover h3 {
  color: var(--neutral-50);
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.15;
  font-weight: 500;
}
.case-cover .case-tag {
  position: absolute;
  bottom: 24px;
  right: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(184, 150, 62, 0.7);
}
.case-body { padding: 28px 32px 32px; }
.case-body p { font-size: 15px; color: var(--text-2); }
.case-body .case-meta {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-3);
  display: flex;
  gap: 16px;
}

/* ── Split section (text + visual) ──────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 40px; } }
.split-visual {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 56px 40px;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Metric strip (numbers) ─────────────────────────────────────── */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-top: 56px;
  margin-top: 56px;
  border-top: 1px solid var(--border);
}
.section-forest .metrics, .section-ink .metrics { border-top-color: rgba(247, 245, 240, 0.15); }
@media (max-width: 860px) { .metrics { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
.metric .metric-num {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 500;
  color: var(--brand-primary);
  line-height: 1;
  letter-spacing: -0.01em;
}
.section-forest .metric-num, .section-ink .metric-num { color: var(--brand-gold); }
.metric .metric-label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 12px;
  font-weight: 500;
}
.section-forest .metric-label, .section-ink .metric-label { color: rgba(247, 245, 240, 0.6); }

/* ── Forms ──────────────────────────────────────────────────────── */
.form { display: grid; gap: 18px; max-width: 560px; }
.form-row { display: grid; gap: 6px; }
.form-row.row-2 { grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .form-row.row-2 { grid-template-columns: 1fr; } }
.form label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 500;
}
.form input, .form textarea, .form select {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  width: 100%;
  transition: var(--motion-fast);
}
.form input:focus, .form textarea:focus, .form select:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(26, 74, 58, 0.12);
}
.form textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.form .form-status {
  font-size: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  display: none;
}
.form .form-status.ok {
  display: block;
  background: var(--status-ok-bg);
  color: var(--status-ok);
  border: 1px solid var(--status-ok);
}
.form .form-status.err {
  display: block;
  background: var(--status-err-bg);
  color: var(--status-err);
  border: 1px solid var(--status-err);
}
.form .hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ── Footer ─────────────────────────────────────────────────────── */
.site-footer {
  background: var(--neutral-900);
  color: var(--neutral-50);
  padding: 80px 0 40px;
}
.site-footer h3 {
  color: var(--neutral-50);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-weight: 500;
  color: var(--brand-gold);
}
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(247, 245, 240, 0.1);
}
@media (max-width: 860px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
.site-footer .footer-brand img { height: 40px; width: auto; }
.site-footer .footer-brand p {
  margin-top: 20px;
  color: rgba(247, 245, 240, 0.55);
  font-size: 14px;
  max-width: 30ch;
}
.site-footer ul li { margin-bottom: 10px; }
.site-footer ul li a {
  color: rgba(247, 245, 240, 0.7);
  font-size: 14px;
  text-decoration: none;
}
.site-footer ul li a:hover { color: var(--brand-gold); }
.site-footer .footer-meta {
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.site-footer .footer-meta p, .site-footer .footer-meta a {
  /* 0.4 alpha over --neutral-900 renders ~#72716d, measuring 3.60:1 — fails
     WCAG AA 4.5:1. Raised opacity to clear it; hue/token unchanged.
     WCAG AA contrast fix, 2026-07-10. */
  color: rgba(247, 245, 240, 0.48);
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* ── Misc utilities ─────────────────────────────────────────────── */
.text-center { text-align: center; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; } .mt-5 { margin-top: 48px; } .mt-6 { margin-top: 64px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 32px; }
.divider {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: 56px 0;
}
.section-forest .divider, .section-ink .divider { background: rgba(247, 245, 240, 0.12); }

/* Inline accents */
.dot-gold { color: var(--brand-gold); font-weight: 700; }
.italic-accent { font-family: var(--font-display); font-style: italic; color: var(--text-2); }
.section-forest .italic-accent, .section-ink .italic-accent { color: rgba(247, 245, 240, 0.7); }

/* ── Suite portal ───────────────────────────────────────────────── */
.suite-frame {
  background: var(--bg);
  min-height: calc(100vh - 72px);
  padding: 80px 0;
}
.suite-frame .container { max-width: 1080px; }

.suite-login {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 56px 48px;
  max-width: 480px;
  margin: 0 auto;
}
.suite-login h1 { font-size: 36px; margin-bottom: 8px; }

.suite-loading, .suite-error, .suite-empty { padding-top: 8px; }

.suite-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}
.suite-header h1 { font-size: 36px; }

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none !important;
  color: inherit;
  transition: var(--motion-base);
  position: relative;
}
.tile:hover {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.tile .tile-mark {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--brand-primary);
  color: var(--neutral-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  position: relative;
}
.tile .tile-mark::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--brand-gold);
}
.tile h3 { font-family: var(--font-display); font-size: 22px; color: var(--brand-primary); font-weight: 500; }
.tile p { font-size: 14px; color: var(--text-2); }
.tile .tile-cta {
  margin-top: auto;
  padding-top: 12px;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--brand-gold);
  font-weight: 500;
}

/* ── Utility helpers (replace inline style="" attrs; enables strict CSP) ── */
/* Lists: standard rule + larger variant used inside .card on services pages */
.list-rule        { padding: 12px 0; border-bottom: 1px solid var(--border); }
.list-rule--lg    { padding: 14px 0; border-bottom: 1px solid var(--border); }
.list-rule:last-child,
.list-rule--lg:last-child { border-bottom: 0; }
.ul-stack-tight   { margin-top: 16px; }
.ul-stack-tighter { margin-top: 8px; }
.ul-indent-20     { padding-left: 20px; }

/* Text colour helpers (used on <strong> tags) */
.text-brand-primary { color: var(--brand-primary); }
.text-brand-gold    { color: var(--brand-gold); }

/* Centered hero-actions / h2 clamps */
.justify-center        { justify-content: center; }
.heading-clamp-18ch    { max-width: 18ch; margin: 0 auto; }
.heading-clamp-22ch    { max-width: 22ch; margin: 0 auto; }
.heading-clamp-24ch    { max-width: 24ch; margin: 0 auto; }
.heading-clamp-26ch    { max-width: 26ch; margin: 0 auto; }
.lede-clamp-36ch       { max-width: 36ch; margin: 16px auto 0; }

/* Contact page info-block: label + line */
.info-label {
  /* Sits on .section-cream (--bg, cream #f7f5f0) — same gold-on-light
     failure as .eyebrow (2.58:1). Only used on this cream background
     sitewide, so reusing the same darkened value for consistency.
     WCAG AA contrast fix, 2026-07-10. */
  color: var(--brand-gold-dk);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.info-line {
  font-size: 18px;
  color: var(--brand-primary);
  font-family: var(--font-display);
  margin-top: 4px;
}

/* Card on dark surfaces (services #ai) */
.card-on-dark {
  background: rgba(247, 245, 240, 0.05);
  border-color: rgba(247, 245, 240, 0.15);
}
.card-on-dark h3 { color: var(--neutral-50); }
.card-on-dark .list-rule,
.card-on-dark .list-rule--lg { border-bottom-color: rgba(247, 245, 240, 0.12); }
.card-on-dark p.small { color: rgba(247, 245, 240, 0.7); }
/* .text-brand-gold (services.html #advisory engagement-spectrum labels) sits on
   .card-on-dark's own background: a 5% cream wash over --brand-primary, which
   blends to ~#255343, darker than the solid forest the gold-on-dark ramp was
   tuned against. --brand-gold-on-dark only reaches 4.08:1 there (short of
   4.5:1). Independently computed for this blend, the required lightness lands
   on the same value already minted for the trial-banner-on-forest blend
   (#d5bd81, 4.77:1 here) — reused rather than minting a third near-identical
   on-dark shade. WCAG AA contrast fix, 2026-07-12. */
.card-on-dark .text-brand-gold { color: #d5bd81; }

/* Inverted pull-quote card (about page) */
.quote-card-inverted {
  background: var(--brand-primary);
  color: var(--neutral-50);
  border-color: var(--brand-primary);
}
.quote-card-inverted .quote-body {
  font-family: var(--font-display);
  font-size: 18px;
  font-style: italic;
  color: rgba(247, 245, 240, 0.85);
  line-height: 1.5;
}
.quote-card-inverted .quote-attrib {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(247, 245, 240, 0.15);
}
.quote-card-inverted .quote-name {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--neutral-50);
}
.quote-card-inverted .quote-role {
  font-size: 12px;
  /* .quote-card-inverted's background is the solid --brand-primary forest —
     the exact pairing already flagged on the hero eyebrow (3.58:1 with the
     unsplit --brand-gold). Same lightened value used there.
     WCAG AA contrast fix, 2026-07-12. */
  color: var(--brand-gold-on-dark);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Index featured-work visual block + inverted logo */
.split-visual--gold {
  background: rgba(184, 150, 62, 0.06);
  border-color: rgba(184, 150, 62, 0.2);
}
.logo-inverted {
  height: 120px;
  opacity: 0.85;
  filter: brightness(0) invert(1);
}

/* Extra spacing helpers used on hero-sub variants */
.hero--padded-xl   { padding: 160px 0 120px; }

/* Card body padding (contact form card) */
.card--padded-xl   { padding: 40px; }
.card-h3-mb-24     { margin-bottom: 24px; }

/* Inline anchor inside dark CTA (services bottom CTA links the gold accent) */
.link-on-dark-gold { color: var(--brand-gold); }

/* 404 page heading clamp with top margin (replaces inline on <h1>/<p>) */
.heading-clamp-18ch-mt-16 { max-width: 18ch; margin: 16px auto 0; }
.lede-clamp-48ch          { max-width: 48ch; margin: 24px auto 0; }