/* UI Kit — website styles.
   Uses tokens from ../../colors_and_type.css */

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
}

/* ---------- Layout shell ---------- */
.af-shell { min-height: 100vh; display: flex; flex-direction: column; }
.af-main { flex: 1; }

/* ---------- Nav ---------- */
.af-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 56px;
  border-bottom: 1px solid var(--ink-200);
  background: var(--bg);
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(10px);
  background: rgba(251, 248, 242, 0.85);
}
.af-brand { cursor: pointer; display: inline-flex; }
.af-brand img { height: 42px; display: block; }
.af-nav-links { display: flex; gap: 36px; }
.af-nav-links a {
  font-family: var(--font-sans); font-size: 14px;
  color: var(--fg-2); text-decoration: none; cursor: pointer;
  letter-spacing: 0.01em; padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: all 120ms var(--ease-standard);
}
.af-nav-links a:hover { color: var(--fg-1); }
.af-nav-links a.active { color: var(--fg-1); border-bottom-color: var(--red-700); }
.af-cta {
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  padding: 10px 18px; background: var(--ink-800); color: var(--cream-50);
  border-radius: 2px; cursor: pointer; text-decoration: none;
  transition: background 120ms var(--ease-standard);
}
.af-cta:hover { background: var(--ink-900); }

/* ---------- Hero ---------- */
.af-hero {
  position: relative; overflow: hidden;
  min-height: 88vh;
  display: flex; align-items: center;
  padding: 120px 56px 96px;
  border-bottom: 1px solid var(--ink-200);
  isolation: isolate;
  background: var(--ink-900);
}
.af-hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: -2;
}
.af-hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(120deg, rgba(20,24,32,0.78) 0%, rgba(31,42,68,0.55) 55%, rgba(20,24,32,0.35) 100%);
}
.af-hero-inner { max-width: 880px; }
.af-hero-eyebrow { color: var(--cream-200); }
.af-hero-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(48px, 6vw, 88px); line-height: 1.02; letter-spacing: -0.025em;
  color: var(--cream-50); margin: 18px 0 22px;
}
.af-hero-lede {
  font-family: var(--font-display); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55;
  color: var(--cream-100); margin: 20px 0; max-width: 60ch; font-weight: 400;
}
.af-rule-accent { width: 56px; height: 2px; background: var(--red-700); margin: 20px 0; }
.af-rule-accent--light { background: var(--cream-50); opacity: 0.85; }
.af-hero-actions { display: flex; gap: 14px; margin-top: 28px; }
.btn-on-dark {
  font-family: var(--font-sans); font-size: 15px; font-weight: 500;
  padding: 12px 22px; border-radius: 2px; cursor: pointer;
  background: transparent; color: var(--cream-50);
  border: 1px solid var(--cream-200);
  transition: all 120ms var(--ease-standard);
}
.btn-on-dark:hover { background: var(--cream-50); color: var(--ink-900); }
@media (max-width: 820px) {
  .af-hero { padding: 80px 20px 64px; min-height: 78vh; }
}

.btn-primary, .btn-secondary {
  font-family: var(--font-sans); font-size: 15px; font-weight: 500;
  padding: 12px 22px; border-radius: 2px; cursor: pointer;
  border: 1px solid var(--ink-900);
  transition: all 120ms var(--ease-standard);
}
.btn-primary { background: var(--ink-800); color: var(--cream-50); border-color: var(--ink-800); }
.btn-primary:hover { background: var(--ink-900); }
.btn-secondary { background: transparent; color: var(--ink-900); }
.btn-secondary:hover { background: var(--cream-200); }

/* ---------- Sections ---------- */
.af-section { padding: 80px 56px; border-bottom: 1px solid var(--ink-200); }
.af-section-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 32px;
}
.af-section-link {
  font-family: var(--font-sans); font-size: 14px; color: var(--fg-2);
  text-decoration: none; cursor: pointer;
  border-bottom: 1px solid var(--ink-300);
}
.af-section-link:hover { color: var(--fg-1); border-bottom-color: var(--fg-1); }
.af-section-title {
  font-family: var(--font-display); font-weight: 500; font-size: 2.5rem;
  letter-spacing: -0.015em; margin: 4px 0 24px;
}

/* ---------- Essays ---------- */
.af-essay-lead {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px;
  padding: 28px 0; cursor: pointer;
  border-top: 2px solid var(--red-700);
  margin-bottom: 48px;
}
.af-essay-lead-body { padding-right: 32px; }
.af-essay-title--lead {
  font-size: 3rem; line-height: 1.05; letter-spacing: -0.02em;
  margin: 12px 0 16px;
}
.af-essay-lead-motif .af-weave {
  width: 100%; aspect-ratio: 4/3;
  background: var(--ink-800) url('assets/weave-texture.svg');
  position: relative;
}
.af-essay-lead-motif .af-weave::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 3px; background: var(--red-700);
}

.af-essay-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
}
.af-essay-card {
  cursor: pointer; padding-top: 20px;
  border-top: 1px solid var(--ink-300);
  transition: border-color 120ms var(--ease-standard);
}
.af-essay-card:hover { border-top-color: var(--red-700); }
.af-essay-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--fg-1); margin: 10px 0 10px;
}
.af-essay-dek {
  font-family: var(--font-serif); font-size: 15px; line-height: 1.5;
  color: var(--fg-2); margin: 0 0 16px;
}
.af-meta {
  font-family: var(--font-sans); font-size: 12px; color: var(--fg-3);
  letter-spacing: 0.02em; margin: 0;
}
.eyebrow {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--red-700); margin: 0;
}
.lede {
  font-family: var(--font-display); font-size: 1.375rem; line-height: 1.55;
  color: var(--fg-2); margin: 20px 0; max-width: 62ch; font-weight: 400;
}

/* ---------- Three P's ---------- */
.af-three-p-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px;
  margin-top: 32px;
}
.af-three-p-item { padding-top: 20px; border-top: 1px solid var(--ink-300); }
.af-three-p-letter {
  font-family: var(--font-display); font-size: 3.5rem; line-height: 1;
  color: var(--red-700); font-style: italic; margin: 0 0 8px;
}
.af-three-p-item h3 {
  font-family: var(--font-display); font-weight: 500; font-size: 1.625rem;
  margin: 0 0 8px;
}
.af-three-p-item p {
  font-family: var(--font-serif); font-size: 15px; line-height: 1.55;
  color: var(--fg-2); margin: 0;
}

/* ---------- Newsletter ---------- */
.af-newsletter {
  background: var(--ink-800); color: var(--cream-50);
  padding: 80px 56px;
  position: relative; overflow: hidden;
}
.af-newsletter::before {
  content: ""; position: absolute; inset: 0;
  background: url('assets/weave-texture.svg');
  opacity: 0.06; pointer-events: none;
}
.af-newsletter-inner { max-width: 720px; position: relative; }
.af-newsletter-eyebrow { color: var(--brass-500); }
.af-newsletter-title {
  font-family: var(--font-display); font-weight: 500; font-size: 2.75rem;
  line-height: 1.1; letter-spacing: -0.015em; margin: 14px 0 16px;
  color: var(--cream-50);
}
.af-newsletter-dek {
  font-family: var(--font-serif); font-size: 1.125rem; line-height: 1.55;
  color: var(--cream-200); max-width: 50ch; margin: 0 0 28px;
}
.af-newsletter-form { display: flex; gap: 10px; max-width: 480px; }
.af-newsletter-form input {
  flex: 1; font-family: var(--font-sans); font-size: 15px;
  padding: 12px 14px; border: none; border-radius: 2px;
  background: var(--cream-50); color: var(--ink-900);
}
.af-newsletter-form button {
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  padding: 12px 22px; background: var(--red-700); color: var(--cream-50);
  border: none; border-radius: 2px; cursor: pointer;
  transition: background 120ms var(--ease-standard);
}
.af-newsletter-form button:hover { background: var(--red-800); }
.af-newsletter-confirm {
  font-family: var(--font-display); font-style: italic; font-size: 1.125rem;
  color: var(--brass-300);
}

/* ---------- Footer ---------- */
.af-footer { background: var(--ink-900); color: var(--cream-200); padding: 56px 56px 32px; }
.af-footer-inner {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px;
}
.af-footer-brand { display: flex; flex-direction: column; gap: 16px; }
.af-seal { height: 64px; }
.af-footer-tag {
  font-family: var(--font-serif); font-size: 14px; line-height: 1.5;
  color: var(--cream-300); max-width: 36ch; margin: 0;
}
.af-footer-col { display: flex; flex-direction: column; gap: 10px; }
.af-col-label {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brass-500); margin: 0 0 6px;
}
.af-footer-col a {
  font-family: var(--font-sans); font-size: 14px; color: var(--cream-200);
  text-decoration: none; cursor: pointer;
}
.af-footer-col a:hover { color: var(--cream-50); }
.af-footer-rule { height: 1px; background: var(--ink-700); margin: 40px 0 20px; }
.af-footer-base {
  display: flex; justify-content: space-between;
  font-family: var(--font-sans); font-size: 12px; color: var(--ink-400);
  letter-spacing: 0.04em;
}
.af-footer-motto { font-style: italic; font-family: var(--font-serif); }

/* ---------- Essays index ---------- */
.af-essays-index .af-page-title,
.af-about .af-page-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 4.25rem; line-height: 1.03; letter-spacing: -0.025em;
  margin: 10px 0 20px;
}
.af-filter-row {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 32px 0 24px;
}
.af-filter {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--ink-300); color: var(--fg-2);
  background: transparent; cursor: pointer;
  transition: all 120ms var(--ease-standard);
}
.af-filter:hover { border-color: var(--ink-800); color: var(--fg-1); }
.af-filter.active { background: var(--ink-800); color: var(--cream-50); border-color: var(--ink-800); }

.af-essays-list { border-top: 1px solid var(--ink-200); margin-top: 24px; }
.af-essay-row {
  display: grid; grid-template-columns: 220px 1fr; gap: 40px;
  padding: 32px 0; border-bottom: 1px solid var(--ink-200);
  cursor: pointer;
  transition: background 120ms var(--ease-standard);
}
.af-essay-row:hover { background: var(--cream-100); }
.af-essay-row-meta { display: flex; flex-direction: column; gap: 8px; }
.af-essay-row-body .af-essay-title { font-size: 2rem; margin: 0 0 8px; }

/* ---------- Reader ---------- */
.af-reader { max-width: 720px; margin: 0 auto; padding: 56px 40px 96px; }
.af-back {
  font-family: var(--font-sans); font-size: 13px; color: var(--fg-2);
  background: none; border: none; cursor: pointer; padding: 0;
  margin-bottom: 40px; letter-spacing: 0.01em;
}
.af-back:hover { color: var(--fg-1); }
.af-reader-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 3.5rem; line-height: 1.05; letter-spacing: -0.02em;
  margin: 10px 0 20px; color: var(--fg-1);
}
.af-reader-byline {
  font-family: var(--font-sans); font-size: 13px; color: var(--fg-3);
  display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 8px;
}
.af-dot { color: var(--ink-300); }
.af-reader-dek {
  font-family: var(--font-display); font-size: 1.375rem; line-height: 1.5;
  color: var(--fg-2); font-style: italic;
  max-width: 60ch; margin-bottom: 32px;
}
.af-reader-body {
  font-family: var(--font-serif); font-size: 1.125rem; line-height: 1.7;
  color: var(--fg-1);
}
.af-reader-body p { margin: 0 0 1.25em; max-width: 62ch; }
.af-reader-body blockquote {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.625rem; line-height: 1.3;
  border-left: 2px solid var(--red-700); padding-left: 24px;
  margin: 40px 0; max-width: 52ch; color: var(--fg-1);
}
.af-reader-foot {
  margin-top: 56px; padding-top: 32px;
  border-top: 1px solid var(--ink-200);
}
.af-ladder { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 24px; }
.af-ladder li {
  font-family: var(--font-display); font-size: 1.125rem;
  color: var(--fg-2); position: relative; padding-left: 18px;
}
.af-ladder li::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 10px; height: 2px; background: var(--red-700);
}

/* ---------- About ---------- */
.af-about-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  margin: 40px 0;
}
.af-about-grid h3 {
  font-family: var(--font-display); font-weight: 500; font-size: 1.5rem;
  margin: 0 0 16px;
}
.af-plain-list {
  list-style: none; padding: 0; margin: 0;
  font-family: var(--font-serif); font-size: 16px; line-height: 1.5;
  color: var(--fg-1);
}
.af-plain-list li {
  padding: 12px 0; border-bottom: 1px solid var(--ink-200);
}
.af-plain-list--neg li { color: var(--fg-3); text-decoration: line-through; text-decoration-color: var(--ink-300); }
.af-about blockquote {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.875rem; line-height: 1.3;
  border-left: 2px solid var(--red-700); padding-left: 28px;
  margin: 40px 0 12px; max-width: 58ch; color: var(--fg-1);
}
.af-about-note {
  font-family: var(--font-sans); font-size: 14px; color: var(--fg-3);
  letter-spacing: 0.04em; padding-left: 28px;
}

/* ---------- New Home sections ---------- */

/* Declaration */
.af-declaration {
  text-align: center;
  max-width: 880px; margin: 0 auto;
  padding-top: 96px; padding-bottom: 96px;
}
.af-declaration-quote {
  font-family: var(--font-display);
  font-size: 30px; line-height: 1.45;
  color: var(--ink-800);
  letter-spacing: -0.005em;
  margin: 0 0 32px;
}
.af-declaration-quote em { font-style: italic; }
.af-declaration .af-rule-accent { margin: 0 auto 28px; }
.af-declaration-tag {
  font-family: var(--font-sans);
  font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-2);
  margin: 0;
}

/* Mega title for Who We Serve */
.af-mega-title {
  font-family: var(--font-display);
  font-size: clamp(64px, 9vw, 132px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: var(--ink-900);
  margin: 8px 0 56px;
}
.af-who-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px;
  border-top: 1px solid var(--ink-200);
  padding-top: 48px;
}
.af-who-item h3 {
  font-family: var(--font-display);
  font-size: 32px; margin: 12px 0 12px;
  color: var(--ink-800);
}
.af-who-item p {
  font-family: var(--font-sans); color: var(--fg-2);
  font-size: 16px; line-height: 1.55; margin: 0;
}
.af-who-num {
  font-family: var(--font-display); font-style: italic;
  color: var(--red-700); font-size: 20px; margin: 0;
}

/* Subjects */
.af-subjects .af-section-title { margin-bottom: 24px; }
.af-subject-list {
  list-style: none; padding: 0; margin: 24px 0 0;
  border-top: 1px solid var(--ink-200);
}
.af-subject-list li {
  display: grid; grid-template-columns: 80px 1fr;
  align-items: baseline;
  padding: 22px 4px;
  border-bottom: 1px solid var(--ink-200);
  transition: background 120ms var(--ease-standard);
}
.af-subject-list li:hover { background: var(--cream-100); }
.af-subject-num {
  font-family: var(--font-mono);
  font-size: 13px; color: var(--red-700);
  letter-spacing: 0.05em;
}
.af-subject-name {
  font-family: var(--font-display);
  font-size: 26px; color: var(--ink-800);
  letter-spacing: -0.01em;
}

/* Quality Bar / Rungs */
.af-ladder-section .lede { max-width: 720px; }
.af-rungs {
  list-style: none; padding: 0; margin: 32px 0 0;
}
.af-rung {
  display: grid; grid-template-columns: 200px 1fr;
  gap: 32px;
  padding: 32px 0;
  border-top: 1px solid var(--ink-200);
}
.af-rung:last-child { border-bottom: 1px solid var(--ink-200); }
.af-rung-meta { display: flex; flex-direction: column; gap: 4px; }
.af-rung-no {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.12em;
  color: var(--fg-2); margin: 0; text-transform: uppercase;
}
.af-rung-roman {
  font-family: var(--font-display); font-style: italic;
  font-size: 22px; color: var(--red-700); margin: 0;
}
.af-rung-body h3 {
  font-family: var(--font-display);
  font-size: 36px; margin: 0 0 8px;
  color: var(--ink-900); letter-spacing: -0.015em;
}
.af-rung-body p {
  font-family: var(--font-sans);
  font-size: 17px; color: var(--fg-2); margin: 0; line-height: 1.5;
}

/* Stance grid */
.af-stance-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  margin-top: 32px;
}
.af-stance-col {
  padding: 36px;
  background: var(--cream-100);
  border: 1px solid var(--ink-200);
}
.af-stance-col--no { background: transparent; }
.af-stance-mark {
  font-family: var(--font-display);
  font-size: 36px; margin: 0 0 8px;
  color: var(--red-700);
}
.af-stance-col--no .af-stance-mark { color: var(--ink-700); }
.af-stance-col h3 {
  font-family: var(--font-display);
  font-size: 24px; line-height: 1.25;
  color: var(--ink-900);
  margin: 8px 0 20px; letter-spacing: -0.01em;
}

/* Mobile */
@media (max-width: 820px) {
  .af-who-grid { grid-template-columns: 1fr; gap: 32px; }
  .af-stance-grid { grid-template-columns: 1fr; gap: 24px; }
  .af-rung { grid-template-columns: 1fr; gap: 8px; }
  .af-subject-list li { grid-template-columns: 56px 1fr; }
  .af-subject-name { font-size: 20px; }
  .af-declaration-quote { font-size: 22px; }
}

/* ---------- Revisions ---------- */

/* Full-width dividers between top-level Home sections */
.af-main > section + section,
.af-shell > .af-main > section + section { position: relative; }
.af-section { position: relative; }
.af-section + .af-section::before {
  content: ""; position: absolute; top: 0; left: -56px; right: -56px;
  border-top: 1px solid var(--ink-200);
}
@media (max-width: 820px) {
  .af-section + .af-section::before { left: -20px; right: -20px; }
}

/* Declaration full width */
.af-declaration {
  max-width: none; margin: 0;
  padding-left: 56px; padding-right: 56px;
}
.af-declaration-quote {
  max-width: 1100px; margin: 0 auto 32px;
  font-size: 28px;
}

/* Kill mega title — already swapped class. Remove any oversized spillover. */
.af-mega-title { font-family: var(--font-display); font-size: 48px; line-height: 1.1; margin: 8px 0 32px; letter-spacing: -0.015em; color: var(--ink-900); }

/* Who-we-serve as big clickable buttons */
.af-who-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  border-top: none; padding-top: 0;
}
.af-who-btn {
  position: relative;
  text-align: left;
  background: var(--cream-100);
  border: 1px solid var(--ink-200);
  border-radius: 2px;
  padding: 36px 32px 56px;
  cursor: pointer;
  font-family: inherit; color: inherit;
  transition: background 140ms var(--ease-standard), transform 140ms var(--ease-standard), border-color 140ms var(--ease-standard);
}
.af-who-btn:hover {
  background: var(--ink-800); border-color: var(--ink-800);
  transform: translateY(-2px);
}
.af-who-btn:hover h3,
.af-who-btn:hover .af-who-desc,
.af-who-btn:hover .af-who-num,
.af-who-btn:hover .af-who-arrow { color: var(--cream-50); }
.af-who-btn h3 {
  font-family: var(--font-display);
  font-size: 36px; line-height: 1.05;
  margin: 8px 0 12px;
  color: var(--ink-900); letter-spacing: -0.02em;
}
.af-who-desc {
  font-family: var(--font-sans);
  font-size: 15px; line-height: 1.5; color: var(--fg-2); margin: 0;
}
.af-who-num {
  font-family: var(--font-display); font-style: italic;
  color: var(--red-700); font-size: 18px; margin: 0;
}
.af-who-arrow {
  position: absolute; right: 24px; bottom: 20px;
  font-family: var(--font-display); font-size: 22px;
  color: var(--ink-700);
}
@media (max-width: 820px) {
  .af-who-grid { grid-template-columns: 1fr; }
}

/* Subject areas — 2 columns */
.af-subject-list {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  border-top: 1px solid var(--ink-200);
}
.af-subject-list li {
  border-bottom: 1px solid var(--ink-200);
}
.af-subject-name { font-size: 22px; }
@media (max-width: 820px) {
  .af-subject-list { grid-template-columns: 1fr; }
}

/* Quality bar — cleaner hierarchy */
.af-rung {
  grid-template-columns: 140px 1fr;
  align-items: baseline;
  padding: 28px 0;
}
.af-rung-meta { flex-direction: row; align-items: baseline; gap: 14px; }
.af-rung-no {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream-500);
}
.af-rung-roman {
  font-family: var(--font-display); font-style: italic;
  font-size: 18px; color: var(--red-700);
}
.af-rung-body h3 {
  font-size: 26px; margin: 0 0 6px; letter-spacing: -0.01em;
  color: var(--ink-800);
}
.af-rung-body p { font-size: 15px; color: var(--fg-2); }
@media (max-width: 820px) {
  .af-rung { grid-template-columns: 1fr; }
}

/* ---------- Cleanup pass ---------- */

/* Single, consistent section divider — kill the doubled ::before overlay */
.af-section + .af-section::before { content: none; }
.af-section { border-bottom: 1px solid var(--ink-200); padding: 96px 56px; }
.af-section:last-of-type { border-bottom: none; }
@media (max-width: 820px) {
  .af-section { padding: 64px 20px; }
}

/* Section header rhythm */
.af-section > .eyebrow + .af-section-title,
.af-section > .eyebrow + .af-page-title,
.af-section > .eyebrow + .af-mega-title { margin-top: 12px; }
.af-section > .af-section-title + .af-rule-accent,
.af-section > .af-page-title + .af-rule-accent { margin-top: 12px; margin-bottom: 32px; }

/* Declaration polish */
.af-declaration { padding-top: 112px; padding-bottom: 112px; text-align: center; }
.af-declaration-quote {
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.5; max-width: 880px;
}
.af-declaration .af-rule-accent { margin-left: auto; margin-right: auto; }

/* Who-we-serve: title margin already normalized; ensure grid spacing */
.af-who .af-section-title { margin-bottom: 28px; }

/* Subjects: remove orphan border on last row in each column */
.af-subject-list li { padding: 20px 4px; }
.af-subject-list li:nth-last-child(-n+2) { border-bottom: none; }
@media (max-width: 820px) {
  .af-subject-list li:nth-last-child(-n+2) { border-bottom: 1px solid var(--ink-200); }
  .af-subject-list li:last-child { border-bottom: none; }
}

/* Quality bar: clearer hierarchy and consistent spacing */
.af-ladder-section .af-rule-accent { margin-bottom: 16px; }
.af-rungs { margin-top: 16px; }
.af-rung { padding: 26px 0; gap: 24px; align-items: baseline; }
.af-rung-meta { min-width: 0; }
.af-rung-no { color: var(--cream-500); }
.af-rung-roman { font-size: 16px; }
.af-rung-body h3 { font-size: 24px; color: var(--ink-900); }
.af-rung-body p { font-size: 15px; line-height: 1.55; max-width: 60ch; }

/* Stance: consistent cards */
.af-stance-grid { gap: 24px; }
.af-stance-col {
  background: var(--cream-100);
  border: 1px solid var(--ink-200);
  padding: 32px;
}
.af-stance-col--no { background: var(--bg); }
.af-stance-mark { font-size: 24px; margin-bottom: 4px; }
.af-stance-col h3 { font-size: 20px; margin: 6px 0 18px; }
.af-stance-col .af-plain-list li { padding: 8px 0; border-bottom: 1px dashed var(--ink-200); }
.af-stance-col .af-plain-list li:last-child { border-bottom: none; }

/* Plain list base */
.af-plain-list { list-style: none; padding: 0; margin: 0; font-family: var(--font-sans); color: var(--fg-2); font-size: 15px; line-height: 1.5; }
.af-plain-list--neg li { color: var(--fg-2); }

/* Footer: tighten spacing rhythm */
.af-footer { margin-top: 0; }

/* ====================================================================
   PASS 4 — bold section heads, smaller who-cards, work-list subjects,
   ladder rungs, squiggle declaration animation
   ==================================================================== */

/* Section header: bold display title + small mono section number,
   separated by full-width hairline (à la index.previous.html) */
.af-sec-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--ink-300);
  padding-bottom: 18px; margin-bottom: 48px;
  gap: 24px;
}
.af-sec-head .af-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0;
}
.af-sec-num {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-2);
  white-space: nowrap;
}
.af-sec-link { cursor: pointer; transition: color 120ms var(--ease-standard); }
.af-sec-link:hover { color: var(--red-700); }

/* Drop the old eyebrow stack on these sections — header replaces it */
.af-who > .eyebrow,
.af-subjects > .eyebrow,
.af-ladder-section > .eyebrow,
.af-stance > .eyebrow { display: none; }
.af-who .af-rule-accent,
.af-subjects .af-rule-accent,
.af-stance .af-rule-accent { display: none; }

/* ---------- WHO WE SERVE — bordered cards, smaller type ---------- */
.af-who-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.af-who-btn {
  position: relative; text-align: left;
  background: var(--bg);
  border: 1px solid var(--ink-300);
  padding: 36px 28px 56px;
  cursor: pointer;
  font-family: inherit; color: inherit;
  border-radius: 0;
  transition: background 200ms var(--ease-standard),
              border-color 200ms var(--ease-standard),
              transform 200ms var(--ease-standard);
}
.af-who-btn:hover {
  background: var(--cream-100);
  border-color: var(--ink-900);
  transform: none;
}
.af-who-btn h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px; line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 0 0 14px;
}
.af-who-desc {
  font-family: var(--font-sans);
  font-size: 14.5px; line-height: 1.55;
  color: var(--fg-2); margin: 0;
}
.af-who-arrow {
  position: absolute; right: 22px; bottom: 18px;
  font-family: var(--font-display); font-size: 20px;
  color: var(--ink-700);
  transition: transform 200ms var(--ease-standard), color 200ms var(--ease-standard);
}
.af-who-btn:hover .af-who-arrow {
  color: var(--red-700);
  transform: translateX(4px);
}
@media (max-width: 820px) {
  .af-who-grid { grid-template-columns: 1fr; }
}

/* ---------- SUBJECT AREAS — 2-col work-list ---------- */
.af-subject-list {
  list-style: none; padding: 0; margin: 0;
  columns: 2; column-gap: 64px; column-rule: 1px solid var(--ink-200);
  display: block;
  border-top: none;
}
.af-subject-item {
  break-inside: avoid;
  display: flex; gap: 18px; align-items: baseline;
  padding: 22px 4px;
  border-bottom: 1px dotted var(--ink-300) !important;
  transition: padding-left 200ms var(--ease-standard);
}
.af-subject-list li:last-child { border-bottom: none !important; }
.af-subject-item:hover { padding-left: 14px; background: transparent; }
.af-subject-item:hover .af-subject-name { color: var(--red-700); }
.af-subject-num {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--red-700); flex-shrink: 0;
  letter-spacing: 0.05em;
}
.af-subject-name {
  font-family: var(--font-display); font-weight: 500;
  font-size: 21px; line-height: 1.3;
  color: var(--ink-900);
  letter-spacing: -0.005em;
  transition: color 200ms var(--ease-standard);
}
@media (max-width: 820px) {
  .af-subject-list { columns: 1; }
}

/* ---------- HOW WE DRIVE CHANGE — ladder rungs ---------- */
.af-ladder-section { background: var(--cream-100); }
.af-ladder-intro {
  max-width: 640px; margin: 0 0 48px;
  font-family: var(--font-display); font-weight: 400;
  font-size: 19px; line-height: 1.55; color: var(--fg-2);
}
.af-ladder-intro em { color: var(--ink-900); font-style: italic; font-weight: 600; }
.af-rungs {
  list-style: none; padding: 0; margin: 0;
  border-top: 1px solid var(--ink-900);
}
.af-rung {
  display: grid;
  grid-template-columns: 80px 220px 1fr;
  gap: 32px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--ink-300);
  transition: padding-left 220ms var(--ease-standard), background 220ms var(--ease-standard);
}
.af-rung:hover { padding-left: 14px; background: rgba(122, 30, 37, 0.04); }
.af-rung-step {
  font-family: var(--font-display);
  font-style: italic; font-weight: 300;
  font-size: 42px; line-height: 1;
  color: var(--red-700);
}
.af-rung-name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 24px; letter-spacing: -0.01em;
  color: var(--ink-900);
}
.af-rung-desc {
  font-family: var(--font-sans);
  font-size: 15px; line-height: 1.55;
  color: var(--fg-2); max-width: 56ch;
}
@media (max-width: 820px) {
  .af-rung { grid-template-columns: 50px 1fr; gap: 16px; }
  .af-rung-desc { grid-column: 1 / -1; padding-left: 66px; }
}

/* ---------- DECLARATION — squiggle reveal ---------- */
.af-declaration-quote { line-height: 1.55; }
.squiggle {
  position: relative;
  display: inline;
  padding: 0 1px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 8' preserveAspectRatio='none'><path d='M0 5 Q 10 0 20 5 T 40 5 T 60 5 T 80 5' fill='none' stroke='%237A1E25' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 0.4em;
  transition: background-size 1100ms cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--squiggle-delay, 0ms);
}
.af-declaration.is-revealed .squiggle { background-size: 100% 0.4em; }

/* Stagger the reveal across the 9 phrases */
.af-declaration .squiggle:nth-of-type(1) { --squiggle-delay: 120ms; }
.af-declaration .squiggle:nth-of-type(2) { --squiggle-delay: 280ms; }
.af-declaration .squiggle:nth-of-type(3) { --squiggle-delay: 440ms; }
.af-declaration .squiggle:nth-of-type(4) { --squiggle-delay: 600ms; }
.af-declaration .squiggle:nth-of-type(5) { --squiggle-delay: 760ms; }
.af-declaration .squiggle:nth-of-type(6) { --squiggle-delay: 920ms; }
.af-declaration .squiggle:nth-of-type(7) { --squiggle-delay: 1080ms; }
.af-declaration .squiggle:nth-of-type(8) { --squiggle-delay: 1240ms; }
.af-declaration .squiggle:nth-of-type(9) { --squiggle-delay: 1400ms; }

@media (prefers-reduced-motion: reduce) {
  .squiggle { transition: none; background-size: 100% 0.4em; }
}

/* ====================================================================
   PASS 5 — softer squiggle, unified card hover, smaller section titles,
   hero video shifted right with sky bleed
   ==================================================================== */

/* Smaller section titles */
.af-sec-head .af-section-title {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 600;
  letter-spacing: -0.018em;
}
.af-sec-head { padding-bottom: 16px; margin-bottom: 36px; }

/* Softer, hand-drawn squiggle in muted grey */
.squiggle {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'><path d='M2 6 Q 8 2 14 6 T 27 5 Q 33 8 39 5 T 52 6 Q 58 2 65 6 T 79 5 Q 86 8 92 5 T 107 6 Q 113 3 118 6' fill='none' stroke='%23A39F94' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' opacity='0.85'/></svg>");
  background-size: 0% 0.55em;
  background-position: 0 95%;
  padding-bottom: 0.05em;
}
.af-declaration.is-revealed .squiggle { background-size: 100% 0.55em; }

/* ---------- Unified card / row hover ---------- */
/* Pattern: subtle slide-right + soft warm tint (matches the rung hover) */

.af-who-btn,
.af-subject-item,
.af-essay-card,
.af-essay-row,
.af-stance-col {
  transition: padding-left 220ms var(--ease-standard),
              background 220ms var(--ease-standard),
              border-color 220ms var(--ease-standard),
              transform 220ms var(--ease-standard) !important;
}

.af-who-btn { transform: none; }
.af-who-btn:hover {
  padding-left: 38px;
  background: rgba(122, 30, 37, 0.04);
  border-color: var(--ink-700);
  transform: none;
}
.af-who-btn:hover h3 { color: var(--red-700); }

.af-subject-item:hover {
  background: rgba(122, 30, 37, 0.04);
}

.af-essay-card {
  padding: 20px 16px 16px !important;
  border-top: 1px solid var(--ink-300) !important;
  border-bottom: none;
}
.af-essay-card:hover {
  padding-left: 30px !important;
  background: rgba(122, 30, 37, 0.04);
  border-top-color: var(--red-700) !important;
}
.af-essay-card:hover .af-essay-title { color: var(--red-700); }
.af-essay-title { transition: color 220ms var(--ease-standard); }

.af-essay-row { padding: 28px 16px; }
.af-essay-row:hover {
  padding-left: 30px;
  background: rgba(122, 30, 37, 0.04);
}
.af-essay-row:hover .af-essay-title { color: var(--red-700); }

.af-stance-col:hover {
  border-color: var(--ink-700);
  background: var(--cream-100);
}

/* ---------- Hero — shift video right, sky bleed on left ---------- */
.af-hero {
  background: linear-gradient(90deg, #6E8FB3 0%, #91AECC 38%, #A8C2DC 72%, #C5D7E8 100%);
}
.af-hero-video {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  width: auto;          /* preserve aspect, no zoom change */
  min-width: 78%;       /* ensure video covers the right portion fully */
  object-fit: cover;
  object-position: center center;
  z-index: -2;
}
.af-hero-scrim {
  background:
    linear-gradient(95deg,
      rgba(20,24,32,0.55) 0%,
      rgba(20,24,32,0.40) 35%,
      rgba(20,24,32,0.20) 70%,
      rgba(20,24,32,0.05) 100%);
}
@media (max-width: 820px) {
  .af-hero-video { min-width: 100%; }
}

/* ====================================================================
   PASS 6 — fix hero (sky-left + video-right two-panel),
   debug & unify card animations, smaller section heads,
   Who-We-Serve formatting cleanup
   ==================================================================== */

/* ---------- HERO: video right 64%, sky photo overlays left with feather ---------- */
.af-hero { background: #88A5C4; }
.af-hero-bg {
  position: absolute; inset: 0; z-index: -2;
  overflow: hidden;
}
/* Video pinned to the right 64% — preserves prior alignment */
.af-hero-video-wrap {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 64%;
  overflow: hidden;
}
.af-hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Sky photo overlays the left side, extending 6% past the video boundary,
   then masked to transparent so it feathers into the video underneath. */
.af-hero-sky {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 42%;
  background: url('assets/flagimg.png') right center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg,
    #000 0%, #000 70%, rgba(0,0,0,0.55) 86%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(90deg,
    #000 0%, #000 70%, rgba(0,0,0,0.55) 86%, rgba(0,0,0,0) 100%);
}
/* Subtle inner-video feather to soften any remaining seam */
.af-hero-blend {
  position: absolute; top: 0; bottom: 0; left: 0; width: 14%;
  background: linear-gradient(90deg,
    rgba(170,195,220,0.30) 0%,
    rgba(170,195,220,0.10) 55%,
    rgba(170,195,220,0)    100%);
  pointer-events: none;
}
.af-hero-scrim {
  background: linear-gradient(95deg,
    rgba(20,24,32,0.55) 0%,
    rgba(20,24,32,0.38) 38%,
    rgba(20,24,32,0.20) 70%,
    rgba(20,24,32,0.05) 100%);
}
@media (max-width: 820px) {
  .af-hero-sky { width: 0; display: none; }
  .af-hero-video-wrap { width: 100%; }
  .af-hero-blend { display: none; }
}

/* ---------- SECTION TITLES: smaller, consistent ---------- */
.af-sec-head .af-section-title {
  font-size: clamp(24px, 2.4vw, 32px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.012em;
  line-height: 1.1;
}
.af-sec-head { padding-bottom: 14px; margin-bottom: 32px; gap: 24px; }
.af-sec-num { font-size: 11px; }

/* ---------- SQUIGGLE: lighter, softer ---------- */
.squiggle {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'><path d='M2 6 Q 8 2 14 6 T 27 5 Q 33 8 39 5 T 52 6 Q 58 2 65 6 T 79 5 Q 86 8 92 5 T 107 6 Q 113 3 118 6' fill='none' stroke='%23B8B2A4' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' opacity='0.7'/></svg>");
}

/* ====================================================================
   UNIFIED CARD/ROW HOVER — single source of truth.
   Pattern: 200ms slide-right (8–14px) + warm tint + accent text shift.
   Override prior conflicting rules.
   ==================================================================== */

/* Reset prior conflicting hover background/border on subjects/cards */
.af-subject-list li:hover { background: transparent; }
.af-essay-card:hover { border-top-color: var(--ink-300) !important; }

/* Common transition */
.af-who-btn,
.af-subject-item,
.af-essay-card,
.af-essay-row,
.af-stance-col,
.af-rung {
  transition: transform 220ms var(--ease-standard),
              background-color 220ms var(--ease-standard),
              border-color 220ms var(--ease-standard),
              color 220ms var(--ease-standard) !important;
  will-change: transform;
}

/* No padding-shift hovers (those caused layout jitter); use translate */
.af-who-btn:hover,
.af-subject-item:hover,
.af-essay-card:hover,
.af-essay-row:hover,
.af-rung:hover {
  padding-left: initial;
  background: rgba(122, 30, 37, 0.05) !important;
}

.af-who-btn:hover {
  transform: translateY(-3px);
  border-color: var(--ink-900);
}
.af-who-btn:hover h3 { color: var(--red-700); }

.af-subject-item:hover { transform: translateX(8px); }
.af-subject-item:hover .af-subject-name { color: var(--red-700); }

.af-essay-card { padding: 20px 16px 16px !important; }
.af-essay-card:hover {
  transform: translateX(8px);
  border-top-color: var(--red-700) !important;
}
.af-essay-card:hover .af-essay-title { color: var(--red-700); }

.af-essay-row { padding: 28px 16px; }
.af-essay-row:hover { transform: translateX(8px); }
.af-essay-row:hover .af-essay-title { color: var(--red-700); }

.af-rung { padding: 26px 0 !important; }
.af-rung:hover { transform: translateX(10px); }
.af-rung:hover .af-rung-name { color: var(--red-700); }
.af-rung-name { transition: color 220ms var(--ease-standard); }

.af-stance-col:hover {
  transform: translateY(-2px);
  border-color: var(--ink-700);
  background: var(--cream-100);
}

/* ---------- WHO WE SERVE — formatting cleanup ---------- */
.af-who-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.af-who-btn {
  display: flex; flex-direction: column;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--ink-300);
  padding: 32px 28px 60px !important;
  cursor: pointer;
  font-family: inherit; color: inherit;
  border-radius: 0;
  min-height: 220px;
  position: relative;
}
.af-who-btn h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--ink-900);
  margin: 0 0 12px;
}
.af-who-desc {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
  max-width: 38ch;
}
.af-who-arrow {
  position: absolute;
  right: 24px; bottom: 22px;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink-700);
  transition: transform 220ms var(--ease-standard), color 220ms var(--ease-standard);
}
.af-who-btn:hover .af-who-arrow {
  color: var(--red-700);
  transform: translateX(4px);
}
@media (max-width: 820px) {
  .af-who-grid { grid-template-columns: 1fr; }
  .af-who-btn { min-height: auto; }
}

/* Declaration: full width (squiggles removed) */
.af-declaration-quote {
  max-width: none !important;
  margin: 0 0 32px !important;
}

/* ====================================================================
   PASS 7 — final unification across the four mid-page sections.
   Hierarchy: section title (28-32) → card title (22) → body (15) → meta (12 mono).
   Lines: one hairline beneath section header; dotted dividers within lists.
   Hover: translateX(8px) + warm wash + accent text. Single source of truth.
   ==================================================================== */

/* ---------- Tokens reused below ---------- */
/* Card title */
.af-card-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 22px; line-height: 1.18; letter-spacing: -0.005em;
  color: var(--ink-900); margin: 0;
}
/* Card body */
.af-card-body {
  font-family: var(--font-sans); font-size: 14.5px; line-height: 1.55;
  color: var(--fg-2); margin: 0;
}
/* Numerical / mono accent */
.af-num {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em;
  color: var(--red-700);
}

/* ---------- WHO WE SERVE ---------- */
.af-who-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--ink-300);
  border-bottom: 1px solid var(--ink-300);
}
.af-who-btn {
  position: relative;
  display: flex; flex-direction: column; align-items: stretch;
  text-align: left;
  background: var(--bg);
  border: none !important;
  border-right: 1px solid var(--ink-300) !important;
  padding: 32px 28px 28px !important;
  min-height: 240px;
  cursor: pointer;
  font-family: inherit; color: inherit;
  border-radius: 0;
  transform: none !important;
}
.af-who-grid .af-who-btn:last-child { border-right: none !important; }
.af-who-btn h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 22px; line-height: 1.18; letter-spacing: -0.005em;
  color: var(--ink-900); margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-200);
  transition: color 220ms var(--ease-standard), border-color 220ms var(--ease-standard);
}
.af-who-desc {
  font-family: var(--font-sans); font-size: 14.5px; line-height: 1.55;
  color: var(--fg-2); margin: 0; flex: 1 1 auto;
}
.af-who-arrow {
  position: static !important;
  display: inline-block;
  margin-top: 24px;
  font-family: var(--font-display); font-size: 18px;
  color: var(--ink-700);
  transition: transform 220ms var(--ease-standard), color 220ms var(--ease-standard);
}
.af-who-btn:hover {
  background: rgba(122, 30, 37, 0.04) !important;
  transform: none !important;
}
.af-who-btn:hover h3 { color: var(--red-700); border-bottom-color: var(--red-700); }
.af-who-btn:hover .af-who-arrow { color: var(--red-700); transform: translateX(6px); }

@media (max-width: 820px) {
  .af-who-grid { grid-template-columns: 1fr; }
  .af-who-btn { border-right: none !important; border-bottom: 1px solid var(--ink-300) !important; min-height: auto; }
  .af-who-grid .af-who-btn:last-child { border-bottom: none !important; }
}

/* ---------- SUBJECT AREAS ---------- */
.af-subject-list {
  list-style: none; padding: 0; margin: 0;
  columns: 2; column-gap: 56px; column-rule: 1px solid var(--ink-200);
  display: block !important;
  border-top: 1px solid var(--ink-300);
}
.af-subject-item {
  break-inside: avoid;
  display: grid !important;
  grid-template-columns: 44px 1fr;
  align-items: baseline;
  gap: 16px;
  padding: 18px 8px !important;
  border-bottom: 1px dotted var(--ink-300) !important;
  transform: none !important;
  transition: background 220ms var(--ease-standard), padding-left 220ms var(--ease-standard) !important;
}
.af-subject-item:hover {
  background: rgba(122, 30, 37, 0.05) !important;
  padding-left: 18px !important;
  transform: none !important;
}
.af-subject-item:hover .af-subject-name { color: var(--red-700); }
.af-subject-num {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
  color: var(--red-700);
}
.af-subject-name {
  font-family: var(--font-display); font-weight: 500;
  font-size: 19px; line-height: 1.3;
  color: var(--ink-900); letter-spacing: -0.005em;
  transition: color 220ms var(--ease-standard);
}
.af-subject-list li:last-child { border-bottom: none !important; }
@media (max-width: 820px) {
  .af-subject-list { columns: 1; }
}

/* ---------- HOW WE DRIVE CHANGE ---------- */
.af-ladder-section { background: var(--cream-100); }
.af-ladder-intro {
  margin: 0 0 32px; max-width: 640px;
  font-family: var(--font-display); font-size: 18px; line-height: 1.55;
  color: var(--fg-2); font-weight: 400;
}
.af-ladder-intro em { color: var(--ink-900); font-style: italic; font-weight: 600; }
.af-rungs {
  list-style: none; padding: 0; margin: 0;
  border-top: 1px solid var(--ink-900);
  border-bottom: 1px solid var(--ink-300);
}
.af-rung {
  display: grid !important;
  grid-template-columns: 64px 220px 1fr;
  gap: 28px; align-items: baseline;
  padding: 22px 8px !important;
  border-bottom: 1px dotted var(--ink-300);
  transform: none !important;
  transition: background 220ms var(--ease-standard), padding-left 220ms var(--ease-standard) !important;
}
.af-rungs li:last-child { border-bottom: none; }
.af-rung:hover {
  background: rgba(122, 30, 37, 0.05) !important;
  padding-left: 22px !important;
  transform: none !important;
}
.af-rung:hover .af-rung-name { color: var(--red-700); }
.af-rung-step {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 28px; line-height: 1; color: var(--red-700);
}
.af-rung-name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 21px; letter-spacing: -0.008em;
  color: var(--ink-900);
  transition: color 220ms var(--ease-standard);
}
.af-rung-desc {
  font-family: var(--font-sans); font-size: 14.5px; line-height: 1.55;
  color: var(--fg-2); max-width: 56ch;
}
@media (max-width: 820px) {
  .af-rung { grid-template-columns: 44px 1fr; gap: 14px; }
  .af-rung-desc { grid-column: 1 / -1; padding-left: 58px; }
}

/* ---------- WHAT WE ARE — AND WHAT WE ARE NOT ---------- */
.af-stance-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 1px solid var(--ink-300);
  border-bottom: 1px solid var(--ink-300);
}
.af-stance-col {
  padding: 32px 32px 32px !important;
  background: var(--bg) !important;
  border: none !important;
  border-right: 1px solid var(--ink-300) !important;
  transform: none !important;
  transition: background 220ms var(--ease-standard) !important;
}
.af-stance-grid > .af-stance-col:last-child { border-right: none !important; }
.af-stance-col:hover { background: rgba(122, 30, 37, 0.03) !important; transform: none !important; }
.af-stance-head {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px;
}
.af-stance-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border: 1px solid currentColor;
  font-family: var(--font-display); font-size: 14px; line-height: 1;
}
.af-stance-col--yes .af-stance-mark { color: var(--ink-800); }
.af-stance-col--no  .af-stance-mark { color: var(--red-700); }
.af-stance-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--fg-2); margin: 0;
}
.af-stance-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 22px; line-height: 1.2; letter-spacing: -0.005em;
  color: var(--ink-900);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-200);
}
.af-stance-list { list-style: none; padding: 0; margin: 0; }
.af-stance-list li {
  font-family: var(--font-sans); font-size: 14.5px; line-height: 1.55;
  color: var(--fg-2);
  padding: 12px 0;
  border-bottom: 1px dotted var(--ink-300);
}
.af-stance-list li:last-child { border-bottom: none; }
.af-stance-list--neg li {
  text-decoration: line-through;
  text-decoration-color: rgba(122, 30, 37, 0.4);
  text-decoration-thickness: 1px;
}
@media (max-width: 820px) {
  .af-stance-grid { grid-template-columns: 1fr; }
  .af-stance-col { border-right: none !important; border-bottom: 1px solid var(--ink-300) !important; }
  .af-stance-grid > .af-stance-col:last-child { border-bottom: none !important; }
}

/* ====================================================================
   PASS 8 — match index.previous.html's section hover patterns exactly.
   - Who-we-serve: bg→paper, border→ink, no slide, .25s
   - Subject areas: title→red only, no bg/slide
   - Rungs: padding-left 14px + faint red wash
   - Stance: no hover
   ==================================================================== */

/* WHO WE SERVE — restore p-card behavior, fix color contrast */
.af-who-btn {
  background: var(--bg) !important;
  border: 1px solid var(--ink-300) !important;
  border-right: 1px solid var(--ink-300) !important;
  transition: background 250ms var(--ease-standard),
              border-color 250ms var(--ease-standard) !important;
  padding: 36px 32px 32px !important;
  transform: none !important;
}
.af-who-btn:hover {
  background: var(--cream-100) !important;
  border-color: var(--ink-900) !important;
  padding: 36px 32px 32px !important;
}
/* Reset prior hover-shifts on inner elements */
.af-who-btn h3,
.af-who-btn:hover h3 {
  color: var(--ink-900);
  border-bottom: none;
  padding-bottom: 0;
  margin: 0 0 14px;
}
.af-who-btn:hover .af-who-arrow { color: var(--ink-900); transform: none; }

/* Restore proper grid spacing (prior pass set border-right; revert to gap) */
.af-who-grid {
  border-top: none;
  border-bottom: none;
  gap: 20px;
}
.af-who-btn {
  border-right: 1px solid var(--ink-300) !important;
}

/* SUBJECT AREAS — title color shift only (no bg, no slide) */
.af-subject-item,
.af-subject-item:hover {
  background: transparent !important;
  padding: 18px 8px !important;
  transform: none !important;
}
.af-subject-item:hover .af-subject-name { color: var(--red-700); }

/* RUNGS — keep padding-left + faint red wash (already matches previous) */
.af-rung {
  padding: 22px 8px !important;
  transition: padding-left 250ms var(--ease-standard),
              background 250ms var(--ease-standard) !important;
}
.af-rung:hover {
  padding-left: 22px !important;
  background: rgba(122, 30, 37, 0.04) !important;
}
.af-rung:hover .af-rung-name { color: var(--ink-900); }

/* STANCE — no hover */
.af-stance-col,
.af-stance-col:hover {
  background: var(--bg) !important;
  transform: none !important;
}

/* Who-we-serve hover contrast fix — earlier pass turned text cream-50
   when the hover bg was navy; bg is now cream-100, so text must stay dark. */
.af-who-btn:hover h3       { color: var(--ink-900) !important; }
.af-who-btn:hover .af-who-desc  { color: var(--fg-2) !important; }
.af-who-btn:hover .af-who-arrow { color: var(--ink-900) !important; }

/* ====================================================================
   PASS 9 — weave navy + brass + red through the middle sections so they
   don't all read as cream/black/red. Restrained, palette-grounded.
   ==================================================================== */

/* ---------- DECLARATION — brass ornament on tag line ---------- */
.af-declaration .af-rule-accent { background: var(--brass-500); width: 72px; height: 2px; }
.af-declaration-tag {
  color: var(--brass-700) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  display: inline-flex; align-items: center; gap: 14px;
}
.af-declaration-tag::before,
.af-declaration-tag::after {
  content: ""; display: inline-block;
  width: 28px; height: 1px; background: var(--brass-500);
}
.af-declaration { text-align: center; }
.af-declaration-tag {
  margin-left: auto !important; margin-right: auto !important;
}

/* ---------- WHO WE SERVE — accent strip on top of each card ---------- */
.af-who-btn { position: relative; padding-top: 38px !important; }
.af-who-btn::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  transition: height 250ms var(--ease-standard);
}
.af-who-grid > .af-who-btn:nth-child(1)::before { background: var(--ink-800); }
.af-who-grid > .af-who-btn:nth-child(2)::before { background: var(--red-700); }
.af-who-grid > .af-who-btn:nth-child(3)::before { background: var(--brass-500); }
.af-who-btn:hover::before { height: 6px; }
.af-who-btn .af-who-arrow { color: var(--cream-500) !important; font-size: 22px !important; }
.af-who-btn:hover .af-who-arrow { color: var(--ink-900) !important; transform: translateX(4px) !important; }

/* ---------- SUBJECT AREAS — left red rule on hover, brass middle dot ---------- */
.af-subject-item {
  border-left: 3px solid transparent !important;
  padding-left: 12px !important;
  transition: border-color 250ms var(--ease-standard),
              background 250ms var(--ease-standard) !important;
}
.af-subject-item:hover {
  border-left-color: var(--red-700) !important;
  background: rgba(122, 30, 37, 0.04) !important;
  padding-left: 12px !important;
}
.af-subject-num {
  color: var(--brass-700) !important;
  font-weight: 500;
}
.af-subject-item:hover .af-subject-num { color: var(--red-700) !important; }

/* ---------- HOW WE DRIVE CHANGE — navy ground, cream type, brass step ---------- */
.af-ladder-section {
  background: var(--ink-800) !important;
  color: var(--cream-100);
}
.af-ladder-section .af-section-title { color: var(--cream-50) !important; }
.af-ladder-section .af-sec-num { color: var(--cream-400); }
.af-ladder-section .af-sec-head { border-bottom-color: rgba(244, 231, 198, 0.2); }
.af-ladder-intro { color: var(--cream-200) !important; }
.af-ladder-intro em { color: var(--brass-500) !important; }
.af-rungs {
  border-top: 1px solid var(--brass-500) !important;
  border-bottom: 1px solid rgba(244, 231, 198, 0.18) !important;
}
.af-rung {
  border-bottom-color: rgba(244, 231, 198, 0.14) !important;
}
.af-rung-step { color: var(--brass-500) !important; }
.af-rung-name { color: var(--cream-50) !important; }
.af-rung-desc { color: var(--cream-200) !important; }
.af-rung:hover {
  background: rgba(200, 162, 74, 0.08) !important;
}
.af-rung:hover .af-rung-name { color: var(--brass-500) !important; }

/* ---------- WHAT WE ARE / NOT — yin/yang: navy positive, cream negative --- */
.af-stance-grid { gap: 0; border-top: none !important; border-bottom: none !important; }
.af-stance-col {
  border: 1px solid var(--ink-300) !important;
  padding: 36px 32px 32px !important;
}
.af-stance-col + .af-stance-col { border-left: none !important; }

.af-stance-col--yes {
  background: var(--ink-800) !important;
  color: var(--cream-100);
  border-color: var(--ink-800) !important;
}
.af-stance-col--yes .af-stance-mark {
  color: var(--brass-500) !important;
  border-color: var(--brass-500) !important;
}
.af-stance-col--yes .af-stance-label { color: var(--cream-300) !important; }
.af-stance-col--yes .af-stance-title {
  color: var(--cream-50) !important;
  border-bottom-color: rgba(244, 231, 198, 0.22) !important;
}
.af-stance-col--yes .af-stance-list li {
  color: var(--cream-200);
  border-bottom-color: rgba(244, 231, 198, 0.16);
}

.af-stance-col--no {
  background: var(--cream-50) !important;
  color: var(--ink-900);
}
.af-stance-col--no .af-stance-mark { color: var(--red-700); border-color: var(--red-700); }
.af-stance-col--no .af-stance-list--neg li {
  text-decoration-color: rgba(122, 30, 37, 0.5);
}

@media (max-width: 820px) {
  .af-stance-col + .af-stance-col { border-left: 1px solid var(--ink-300) !important; border-top: none !important; }
}

/* ====================================================================
   PASS 10 — revert navy on "What we are", lighter navy for ladder,
   uniform dark-blue top stripe for all Who cards
   ==================================================================== */

/* Who-we-serve: same dark blue stripe on every card */
.af-who-grid > .af-who-btn:nth-child(1)::before,
.af-who-grid > .af-who-btn:nth-child(2)::before,
.af-who-grid > .af-who-btn:nth-child(3)::before { background: var(--ink-800); }

/* How we drive change: switch to lighter navy */
.af-ladder-section { background: var(--ink-700) !important; }

/* What we are: revert to cream parity with What we are not */
.af-stance-col--yes {
  background: var(--cream-50) !important;
  color: var(--ink-900);
  border-color: var(--ink-300) !important;
}
.af-stance-col--yes .af-stance-mark {
  color: var(--ink-800) !important;
  border-color: var(--ink-800) !important;
}
.af-stance-col--yes .af-stance-label { color: var(--fg-2) !important; }
.af-stance-col--yes .af-stance-title {
  color: var(--ink-900) !important;
  border-bottom-color: var(--ink-200) !important;
}
.af-stance-col--yes .af-stance-list li {
  color: var(--fg-2) !important;
  border-bottom-color: var(--ink-200) !important;
}

/* ====================================================================
   PASS 11 — push flag slightly more right; center nav links
   ==================================================================== */

/* Hero — narrow video wrap from 64% → 60% so the flag sits further right.
   Sky overlay widens correspondingly to maintain the 6% feather overlap. */
.af-hero-video-wrap { width: 60% !important; }
.af-hero-sky        { width: 46% !important; }

/* Nav — three-column grid so the center links are visually centered */
.af-nav {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.af-brand    { justify-self: start; }
.af-nav-links{ justify-self: center; }
.af-cta      { justify-self: end; }

/* ====================================================================
   PASS 12 — wider feather between sky and video; localized dark
   overlay under text instead of full-bleed scrim
   ==================================================================== */

/* Wider feather: sky panel fades over a much longer range */
.af-hero-sky {
  -webkit-mask-image: linear-gradient(90deg,
    #000 0%, #000 40%, rgba(0,0,0,0.85) 60%,
    rgba(0,0,0,0.5) 78%, rgba(0,0,0,0.2) 92%, rgba(0,0,0,0) 100%) !important;
          mask-image: linear-gradient(90deg,
    #000 0%, #000 40%, rgba(0,0,0,0.85) 60%,
    rgba(0,0,0,0.5) 78%, rgba(0,0,0,0.2) 92%, rgba(0,0,0,0) 100%) !important;
}

/* Wider color blend on the video side to meet the sky in the middle */
.af-hero-blend {
  width: 28% !important;
  background: linear-gradient(90deg,
    rgba(170,195,220,0.45) 0%,
    rgba(170,195,220,0.22) 45%,
    rgba(170,195,220,0.08) 75%,
    rgba(170,195,220,0)    100%) !important;
}

/* Remove dark overlay entirely */
.af-hero-scrim {
  background: none !important;
  display: none !important;
}

/* Hand-drawn underline accents on the declaration */
.af-uline {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  color: inherit;
  margin: 0 0.08em;
}
.af-uline-svg {
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: -0.22em;
  width: 106%;
  height: 0.42em;
  color: var(--ink-300);
  overflow: visible;
  pointer-events: none;
}
.af-uline-svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s cubic-bezier(.65,.05,.25,1);
}
.af-declaration.is-revealed .af-uline-svg path {
  stroke-dashoffset: 0;
}