/* ——— Design Tokens ——— */
:root {
  --bg-primary: #F7F3EE;
  --bg-secondary: #EFE9E1;
  --bg-elevated: #FFFFFF;
  --text-primary: #2A2018;
  --text-secondary: #655746;
  --text-tertiary: #6E5E4E;
  --border-default: rgba(58, 46, 36, 0.12);
  --accent-primary: #2A2018;
  --accent-warm: #D2BEA5;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-hero: 120px;
  --content-max-width: 1120px;
  --card-gap: 24px;

  --shadow-card: 0 2px 8px rgba(42, 32, 24, 0.08);
  --shadow-elevated: 0 4px 16px rgba(42, 32, 24, 0.12);

  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-display: 'Lato', sans-serif;
}

/* ——— Reset ——— */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

/* ——— Accessibility ———
   A visible focus ring for keyboard users (dark on light surfaces, warm
   on the dark nav/hero/bands), and a skip link that appears on focus. */
:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: 1px;
}
.nav :focus-visible,
.hero :focus-visible,
.page-hero :focus-visible,
.band-dark :focus-visible {
  outline-color: var(--accent-warm);
}
[tabindex="-1"]:focus { outline: none; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent-primary);
  color: #FFFFFF;
  padding: 12px 20px;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 14px;
}
.skip-link:focus { left: 0; }

/* ——— Typography ——— */
.t-display {
  font-family: var(--font-serif);
  font-size: 56px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
}

.t-h2 {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.3;
}

.t-h3 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.35;
}

.t-body-large {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
}

.t-body {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
}

.t-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.t-button {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ——— Navigation ——— */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 40px;
  background: rgba(42, 32, 24, 0.3);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(210, 190, 165, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background 0.3s;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.nav-logo-mark {
  height: 32px;
  width: auto;
}

.nav-logo-text {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #FFFFFF;
}

.nav-links {
  display: flex;
  gap: var(--space-xl);
  list-style: none;
}

.nav-links a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 16px;
  line-height: 1.7;
  transition: color 0.2s;
}

.nav-links a:hover {
  color: #FFFFFF;
}

.nav-links .active {
  color: #FFFFFF;
  position: relative;
}

.nav-links .active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: var(--accent-warm);
}

/* ——— Interior pages —————————————————————————————
   Pages without a dark full-height hero. Offset the fixed nav so
   content isn't hidden beneath it, and give the nav a solid dark
   background so its white links stay readable over a cream page. */
body.interior { padding-top: 64px; }

body.interior .nav {
  background: var(--accent-primary);
  border-bottom: 1px solid rgba(210, 190, 165, 0.2);
}

/* ——— Buttons ——— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s, background 0.2s;
}

.btn-primary {
  background: var(--accent-primary);
  color: var(--bg-primary);
}

.btn-primary:hover {
  opacity: 0.9;
}

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-default);
}

.btn-secondary:hover {
  background: var(--bg-secondary);
}

/* ——— Section shared ——— */
.section {
  padding: var(--space-3xl) 40px;
}

.section-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.section-label {
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.section-heading {
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.section-desc {
  color: var(--text-secondary);
  margin-bottom: var(--space-xl);
  max-width: 640px;
}

/* ——— Hero ——— */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--space-hero) 40px;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(42, 32, 24, 0.85) 0%,
    rgba(42, 32, 24, 0.6) 50%,
    rgba(42, 32, 24, 0.3) 100%
  );
  z-index: 1;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--content-max-width);
  width: 100%;
  margin: 0 auto;
  padding-left: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
}

.hero-label {
  color: rgba(255, 255, 255, 0.7);
}

.hero-headline {
  color: #FFFFFF;
  max-width: 800px;
}

.hero-body {
  color: rgba(255, 255, 255, 0.8);
  max-width: 640px;
}

.hero .btn-primary {
  background: var(--accent-warm);
  color: var(--accent-primary);
}

/* Pause/play control for the ambient hero video (WCAG 2.2.2) */
.hero-pause {
  position: absolute;
  z-index: 3;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(42, 32, 24, 0.4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 14px;
  transition: background 0.2s;
}
.hero-pause:hover { background: rgba(42, 32, 24, 0.65); }

/* ——— Page Hero (interior pages with a background photo) ———
   Sits full-bleed under the fixed nav: margin-top cancels the
   body.interior offset, and the top padding clears the 64px nav. */
.page-hero {
  position: relative;
  overflow: hidden;
  margin-top: -64px;
  min-height: 68vh;
  display: flex;
  align-items: center;
  padding: calc(var(--space-4xl) + 64px) 40px var(--space-4xl);
}

.page-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(42, 32, 24, 0.88) 0%,
    rgba(42, 32, 24, 0.6) 55%,
    rgba(42, 32, 24, 0.35) 100%
  );
  z-index: 1;
}

.page-hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--content-max-width);
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
}

.page-hero .t-label { color: rgba(255, 255, 255, 0.7); }
.page-hero h1 { color: #FFFFFF; max-width: 760px; }
.page-hero .t-body-large { color: rgba(255, 255, 255, 0.85); max-width: 600px; }

/* ——— Philosophy Strip ——— */
.philosophy {
  background: var(--bg-secondary);
  padding: var(--space-3xl) 40px;
  text-align: center;
}

.philosophy-text {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text-secondary);
  font-style: italic;
}

/* ——— Editorial Split ——— */
.editorial {
  padding: var(--space-4xl) 40px;
}

.editorial-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3xl);
}

.editorial.reverse .editorial-inner {
  flex-direction: row-reverse;
}

.editorial-image {
  flex: 1 1 50%;
  min-height: 400px;
  border-radius: 4px;
  overflow: hidden;
}

.editorial-image img {
  width: 100%;
  height: 100%;
  min-height: 400px;
  object-fit: cover;
  display: block;
}

.editorial-content {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.editorial-content .t-label {
  color: var(--text-secondary);
}

.editorial-content .t-h2 {
  color: var(--text-primary);
}

.editorial-content .t-body-large {
  color: var(--text-secondary);
  max-width: 480px;
}

.editorial-content .btn {
  align-self: flex-start;
  margin-top: var(--space-sm);
}

/* ——— Comparison Table ——— */
.comparison {
  padding: var(--space-4xl) 40px;
  background: var(--bg-secondary);
}

.comparison-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.comparison-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.comparison-header .t-label {
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.comparison-header .t-h2 {
  color: var(--text-primary);
}

.comparison-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.comparison-col-header {
  padding: var(--space-lg);
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  border-bottom: 2px solid var(--accent-warm);
}

.comparison-col-header.ours {
  color: var(--text-primary);
}

.comparison-col-header.theirs {
  color: var(--text-tertiary);
}

.comparison-row {
  display: contents;
}

.comparison-cell {
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.comparison-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.comparison-icon.check {
  color: var(--accent-warm);
}

.comparison-icon.x {
  color: var(--text-tertiary);
  opacity: 0.5;
}

.comparison-cell-text {
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.6;
}

.comparison-cell.theirs .comparison-cell-text {
  color: var(--text-tertiary);
}

/* ——— Leadership ——— */
.leadership {
  padding: var(--space-4xl) 40px;
}

.leadership-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3xl);
}

.leadership-photo {
  flex: 0 0 400px;
  height: 520px;
  border-radius: 4px;
  overflow: hidden;
}

.leadership-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.leadership-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.leadership-content .t-label {
  color: var(--text-secondary);
}

.leadership-name {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--text-primary);
}

.leadership-credentials {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--text-secondary);
}

.leadership-bio {
  color: var(--text-secondary);
  max-width: 520px;
  margin-top: var(--space-sm);
}

/* ——— CTA Banner ——— */
.cta-banner {
  background: var(--bg-secondary);
  padding: var(--space-4xl) 40px;
  text-align: center;
}

.cta-banner-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.cta-banner-headline {
  color: var(--text-primary);
}

/* ——— Footer ——— */
.footer {
  background: var(--bg-primary);
  border-top: 1px solid var(--border-default);
  padding: var(--space-3xl) 40px;
}

.footer-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: var(--space-xl);
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-sm);
}

.footer-brand-mark {
  height: 28px;
  width: auto;
}

.footer-brand-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.footer-text {
  color: var(--text-secondary);
}

.footer-links {
  list-style: none;
}

.footer-links li + li {
  margin-top: var(--space-md);
}

.footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 16px;
  line-height: 1.7;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: var(--text-primary);
}

/* ——— Responsive ——— */
@media (max-width: 768px) {
  .t-display { font-size: 38px; }
  .t-h2 { font-size: 26px; }
  .section, .editorial, .comparison, .leadership, .cta-banner, .philosophy, .footer { padding-left: 20px; padding-right: 20px; }
  .nav { padding: 0 20px; }

  /* Collapse nav links into a toggleable menu. Hide the standalone nav CTA
     on mobile so the bar doesn't overflow — Contact stays in the menu. */
  .nav > .btn { display: none; }
  .nav-links { display: none; }
  .nav-links.open { display: flex; flex-direction: column; position: fixed; top: 64px; left: 0; right: 0; background: rgba(42,32,24,0.95); padding: var(--space-lg); gap: var(--space-md); }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; }

  /* Tighten hero vertical padding on small screens */
  .hero { padding-top: var(--space-4xl); padding-bottom: var(--space-4xl); }
  .page-hero { min-height: 52vh; padding: calc(var(--space-3xl) + 64px) 20px var(--space-3xl); }

  /* Stack split sections */
  .editorial-inner, .editorial.reverse .editorial-inner, .leadership-inner { flex-direction: column; gap: var(--space-xl); }
  .leadership-photo { flex: 0 0 auto; width: 100%; height: 420px; }
  .editorial-image, .editorial-image img { min-height: 280px; }

  /* Comparison table to single column */
  .comparison-table { grid-template-columns: 1fr; }

  /* Footer stacks */
  .footer-inner { flex-direction: column; gap: var(--space-2xl); }
}

@media (min-width: 769px) {
  .nav-toggle { display: none; }
}

/* ——— Insights ——— */
.insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap); margin-top: var(--space-2xl); }
.insight-card { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-card); text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: box-shadow 0.2s; }
.insight-card:hover { box-shadow: var(--shadow-elevated); }
.insight-card-body { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); }
.insight-card .t-h3 { color: var(--text-primary); }
/* per-article colour: each card sets --tone/--tone-deep via a .tone-<name> class (assigned in tools/buildguide.py) */
:where(.insight-card) { --tone: #8A7560; --tone-deep: #5C4C3E; }
.insight-card { transition: box-shadow 0.25s, transform 0.25s; }
.insight-card:hover { transform: translateY(-3px); }
.tone-ochre { --tone: #B08A3A; --tone-deep: #7A5C1E; }
.tone-slate { --tone: #5B7284; --tone-deep: #374A59; }
.tone-clay  { --tone: #A8655A; --tone-deep: #74413A; }
.tone-moss  { --tone: #6A8562; --tone-deep: #45583F; }
.tone-plum  { --tone: #7E5A6E; --tone-deep: #533A48; }
.insight-card-head { position: relative; height: 150px; overflow: hidden; background: linear-gradient(135deg, var(--tone) 0%, var(--tone-deep) 100%); padding: var(--space-lg); display: flex; align-items: flex-end; }
.insight-card-head .t-label { position: relative; color: rgba(255,255,255,0.92); }
.insight-card-motif { position: absolute; right: -8px; top: -4px; width: 170px; height: auto; color: rgba(255,255,255,0.28); transition: transform 0.6s cubic-bezier(.2,.7,.2,1); }
.insight-card:hover .insight-card-motif { transform: translate(-6px, 4px) scale(1.04); }
.insight-card-body { border-top: 3px solid var(--tone); }
.insight-card-body .t-h3 { color: var(--tone-deep); }
@media (prefers-reduced-motion: reduce) { .insight-card, .insight-card-motif { transition: none; } .insight-card:hover { transform: none; } }
.article { max-width: 720px; margin: 0 auto; padding: var(--space-4xl) 40px; }
.article p { margin-bottom: var(--space-lg); }
.article h2 { margin: var(--space-xl) 0 var(--space-md); }
@media (max-width: 768px) { .insights-grid { grid-template-columns: 1fr; } .article { padding: var(--space-3xl) 20px; } }

/* ——— Contact ——— */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); margin-top: var(--space-2xl); }
.contact-form { display: flex; flex-direction: column; gap: var(--space-md); }
.contact-form label { font-family: var(--font-sans); font-size: 14px; color: var(--text-secondary); display: flex; flex-direction: column; gap: var(--space-xs); }
.contact-form input, .contact-form textarea { font-family: var(--font-sans); font-size: 16px; padding: 12px; border: 1px solid var(--border-default); border-radius: 2px; background: var(--bg-elevated); color: var(--text-primary); }
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-reassure { color: var(--text-secondary); margin: var(--space-sm) 0 var(--space-lg); max-width: 420px; }
.contact-form .btn { align-self: flex-start; margin-top: var(--space-sm); }
.contact-details { margin-top: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-sm); }
.booking-embed iframe { width: 100%; height: 840px; border: 0; border-radius: 4px; }
.thank-you-actions { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-xl); }
.hidden { position: absolute; left: -9999px; }
@media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } }

/* ——— Service detail list ——— */
.service-points { list-style: none; display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-sm); }
.service-points li { position: relative; padding-left: var(--space-lg); color: var(--text-secondary); font-size: 16px; line-height: 1.6; }
.service-points li::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; background: var(--accent-warm); border-radius: 50%; }

/* ——— Draw-in diagrams (services page) ———
   Line illustrations in the page's tone colours replace stock photos; each
   stroke draws itself when the block scrolls into view (pathLength="1"). */
:where(.diagram) { --tone: #8A7560; --tone-deep: #5C4C3E; }
.diagram { display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--tone-deep) 0%, var(--tone) 100%); color: rgba(255,255,255,0.9); }
/* diagrams sit next to the dark warm header, so their tones are pulled 60% toward it */
.diagram.tone-ochre { --tone: #7E653C; --tone-deep: #4A381A; }
.diagram.tone-slate { --tone: #5C5B5A; --tone-deep: #2F3132; }
.diagram.tone-clay { --tone: #7A5649; --tone-deep: #482D26; }
.diagram.tone-moss { --tone: #62634C; --tone-deep: #353628; }
.diagram.tone-plum { --tone: #6A5251; --tone-deep: #3A2A2B; }
.diagram svg { width: 78%; max-width: 440px; height: auto; }
.diagram svg * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.diagram.in svg * { animation: draw 1.4s cubic-bezier(.4,0,.2,1) forwards; }
.diagram svg rect, .diagram svg circle { opacity: 0; translate: -36px 0; } /* boxes glide in from the left as they draw (Evan msg 811, 2026-10-10) */
.diagram.in svg rect, .diagram.in svg circle { animation: draw 1.4s cubic-bezier(.4,0,.2,1) forwards, glide 1.1s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes glide { to { opacity: 1; translate: 0 0; } }
.diagram.in svg *:nth-child(2) { animation-delay: .12s; } .diagram.in svg *:nth-child(3) { animation-delay: .24s; }
.diagram.in svg *:nth-child(4) { animation-delay: .36s; } .diagram.in svg *:nth-child(5) { animation-delay: .48s; }
.diagram.in svg *:nth-child(6) { animation-delay: .6s; } .diagram.in svg *:nth-child(7) { animation-delay: .72s; }
.diagram.in svg *:nth-child(8) { animation-delay: .84s; } .diagram.in svg *:nth-child(9) { animation-delay: .96s; }
.diagram.in svg *:nth-child(10) { animation-delay: 1.08s; } .diagram.in svg *:nth-child(n+11) { animation-delay: 1.2s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.diagram svg text { opacity: 0; stroke-dasharray: none; }
.diagram.in svg text { animation: fadein 0.6s ease 1.1s forwards; }
@keyframes fadein { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .diagram svg * { stroke-dashoffset: 0; animation: none; opacity: 1; translate: none; } .diagram svg text { opacity: 1; } }
video.page-hero-img { z-index: 0; }

/* ——— Narrative homepage —————————————————————————————
   Story-driven scroll: alternating dark/light bands, scroll-reveal,
   and a nav that turns solid once you scroll past the hero. */

/* nav goes solid after scrolling off the hero (set by a small script;
   no-JS users simply keep the translucent nav) */
.nav.scrolled { background: var(--accent-primary); border-bottom-color: rgba(210, 190, 165, 0.2); }

/* bands */
.band-dark { background: var(--accent-primary); color: #FFFFFF; }
.band-accent { background: var(--bg-secondary); }

/* story sections */
.story { padding: var(--space-4xl) 40px; }
.story-inner { max-width: var(--content-max-width); margin: 0 auto; }
.story-inner.narrow { max-width: 820px; }

.story .t-label { display: block; color: var(--text-secondary); margin-bottom: var(--space-md); }
.band-dark .t-label { color: var(--accent-warm); }

.story-statement { font-family: var(--font-serif); font-size: 44px; font-weight: 400; line-height: 1.25; color: var(--text-primary); max-width: 900px; }
.band-dark .story-statement { color: #FFFFFF; }

.story-lead { color: var(--text-secondary); max-width: 680px; margin-top: var(--space-lg); }
.band-dark .story-lead { color: rgba(255, 255, 255, 0.82); }

.band-dark .btn-primary { background: var(--accent-warm); color: var(--accent-primary); }

/* the four-domain row */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--card-gap); margin-top: var(--space-2xl); }
.pillar { padding-top: var(--space-md); border-top: 2px solid var(--accent-warm); }
.pillar h3 { font-family: var(--font-serif); font-size: 20px; font-weight: 400; margin-bottom: var(--space-sm); }
.pillar p { color: var(--text-secondary); font-size: 15px; line-height: 1.6; }

/* outcomes */
.outcomes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl) var(--space-3xl); margin-top: var(--space-2xl); }
.outcome h3 { font-family: var(--font-serif); font-size: 24px; font-weight: 400; margin-bottom: var(--space-sm); }
.outcome p { color: var(--text-secondary); }

/* are we right for you */
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--card-gap); margin-top: var(--space-2xl); }
.fit-col { list-style: none; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 4px; padding: var(--space-lg); box-shadow: var(--shadow-card); }
.fit-head { font-family: var(--font-serif); font-size: 22px; margin-bottom: var(--space-md); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--border-default); }
.fit-col li + li { margin-top: var(--space-md); }
.fit-yes, .fit-no { display: flex; gap: 12px; align-items: flex-start; color: var(--text-secondary); font-size: 16px; line-height: 1.6; }
.fit-mark { flex: 0 0 auto; font-size: 18px; line-height: 1.4; }
.fit-yes .fit-mark { color: #5F7A5A; }
.fit-no .fit-mark { color: #9A5B4A; }
.fit-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 768px) { .fit { grid-template-columns: 1fr; } }

/* who we work with */
.audiences { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--card-gap); margin-top: var(--space-2xl); }
.audience { display: block; padding: var(--space-lg); background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 4px; box-shadow: var(--shadow-card); text-decoration: none; color: inherit; transition: box-shadow 0.2s; }
.audience:hover { box-shadow: var(--shadow-elevated); }
.audience h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 400; margin-bottom: var(--space-sm); color: var(--text-primary); }
.audience p { color: var(--text-secondary); font-size: 15px; line-height: 1.6; }
.audience .t-link { display: inline-block; margin-top: var(--space-sm); font-size: 14px; color: var(--accent-warm); }
.hub-grid { grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-lg); }
@media (max-width: 768px) { .audiences { grid-template-columns: 1fr; } }

/* scroll reveal (progressive enhancement; visible by default if JS off — see <noscript>) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1.2s ease-out, transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1); }
.reveal.in { opacity: 1; transform: none; }

/* words assemble into each headline once its .reveal wrapper is in view (motion.js
   splits the words and sets --i / --dx; without JS the headline simply shows) */
.story-statement .w {
  display: inline-block;
  opacity: 0;
  transform: translate(var(--dx, 0), 0.35em);
  filter: blur(2px);
  transition: opacity 1.3s ease-out, transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1), filter 1.3s ease-out;
  transition-delay: calc(var(--i, 0) * 95ms + 0.15s);
}
.reveal.in .story-statement .w { opacity: 1; transform: none; filter: none; }

/* cards and columns follow the headline in, one after another */
.reveal .pillar, .reveal .outcome, .reveal .fit-col, .reveal .audience {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.1s ease-out, transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.2s;
  transition-delay: calc(var(--i, 0) * 160ms + 0.7s);
}
.reveal.in .pillar, .reveal.in .outcome, .reveal.in .fit-col, .reveal.in .audience { opacity: 1; transform: none; }

/* soft parallax on headlines as they pass through the viewport (scroll-driven, CSS only) */
@supports (animation-timeline: view()) {
  .story-statement {
    animation: statement-drift linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  @keyframes statement-drift { from { translate: 0 28px; } to { translate: 0 -28px; } }
}

/* Honour reduced-motion: neutralise transitions/animations, show all
   reveal content immediately, and (via the homepage script) pause the video. */
/* ——— Living graphics (home page, 2026-10-08) ———
   Every figure draws itself when it scrolls into view (pathLength="1" strokes,
   --d = delay in seconds set inline on each element), then keeps breathing:
   dots travel the paths (SMIL, started from motion.js), boxes pulse, the
   spine sweeps, the dark bands carry a drifting node network on a canvas.
   Everything stops under prefers-reduced-motion (strokes stay fully drawn). */
.story-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: center; }
.story-split .story-statement { max-width: none; }
.living { margin: 0; color: var(--text-primary); }
.living svg { width: 100%; height: auto; display: block; overflow: visible; }
.living figcaption { margin-top: var(--space-md); font-size: 13px; line-height: 1.5; color: var(--text-secondary); text-align: center; }
.living-ring { max-width: 440px; width: 100%; justify-self: center; }
.living-curve { max-width: 400px; justify-self: center; }
.living .lbl { fill: currentColor; stroke: none; font-family: var(--font-sans); font-size: 12px; font-weight: 500; text-anchor: middle; opacity: 0; transition: opacity 1.2s ease-out; transition-delay: calc(var(--d, 0) * 1s + 0.3s); }
.living .lbl.serif { font-family: var(--font-serif); font-size: 17px; font-weight: 400; }
.living .lbl[text-anchor="start"] { text-anchor: start; } .living .lbl[text-anchor="end"] { text-anchor: end; }
.living .lbl.small { font-size: 11px; font-weight: 400; fill: var(--text-secondary); }
.living .lbl.dark { fill: var(--bg-primary); }
.living .lbl.dark.small { fill: var(--accent-warm); }
.living .box, .living .ln, .living .axis, .living .curve { stroke-dasharray: 1; stroke-dashoffset: 1; }
.living .ln.dashed { stroke-dasharray: 0.05 0.03; stroke-dashoffset: 0; clip-path: inset(100% 0 0 0); }
.living .box { fill: var(--bg-elevated); fill-opacity: 0; transition: fill-opacity 1s ease-out; transition-delay: calc(var(--d, 0) * 1s + 1.2s); }
.living .box.policy { fill: var(--accent-primary); stroke: var(--accent-primary); }
.living .axis { stroke: var(--border-default); stroke-width: 1; }
.living .curve.drag { stroke: var(--accent-warm); stroke-dasharray: 0.02 0.01; stroke-dashoffset: 0; clip-path: inset(0 100% 0 0); }
.living .curve.main { stroke-width: 2.2; }
.living .mover, .living .tip { fill: var(--accent-warm); stroke: none; }
.living .arc { stroke-dasharray: 1; stroke-dashoffset: 1; stroke: var(--accent-primary); }
.living .arc.first { stroke: var(--accent-warm); }
.living.on .arc { animation: draw 2.4s cubic-bezier(.4,0,.2,1) forwards, breathe 9s ease-in-out infinite alternate; animation-delay: calc(var(--d, 0) * 1s), calc(var(--d, 0) * 1s + 3s); }
.living .tip { fill: var(--accent-primary); }
.living .counter { font-size: 22px; }
.living.on .box, .living.on .ln, .living.on .axis { animation: draw 1.6s cubic-bezier(.4,0,.2,1) forwards; animation-delay: calc(var(--d, 0) * 1s); }
.living.on .ln.dashed { animation-name: draw-dashed; }
.living.on .curve.main, .living.on .curve.drag { animation: draw 6s linear forwards; animation-delay: calc(var(--d, 0) * 1s); }
.living.on .curve.drag { animation-name: draw-dotted; }
.living.on .lbl { opacity: 1; }
.living.on .box { fill-opacity: 1; }
.living.on .box:not(.policy) { animation: draw 1.6s cubic-bezier(.4,0,.2,1) forwards, breathe 7s ease-in-out calc(var(--d, 0) * 1s + 2s) infinite alternate; animation-delay: calc(var(--d, 0) * 1s), calc(var(--d, 0) * 1s + 2s); }
.living.on .box.policy { animation: draw 1.6s cubic-bezier(.4,0,.2,1) forwards, glow 6s ease-in-out infinite alternate; animation-delay: calc(var(--d, 0) * 1s), calc(var(--d, 0) * 1s + 2s); }
.living.on .tip { animation: tip-pulse 5s ease-in-out 6.6s infinite; }
@keyframes draw-dashed { to { clip-path: inset(0 0 0 0); } }
@keyframes draw-dotted { to { clip-path: inset(0 0 0 0); } }
@keyframes breathe { from { stroke-opacity: 1; } to { stroke-opacity: 0.55; } }
@keyframes glow { from { fill-opacity: 1; } to { fill-opacity: 0.78; } }
@keyframes tip-pulse { 0%, 100% { r: 4; fill-opacity: 1; } 50% { r: 7; fill-opacity: 0.45; } }

/* the four-domain spine: one node, a trunk, a bus and a drop to each pillar */
.spine { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--card-gap); position: relative; height: 96px; margin-top: var(--space-xl); margin-bottom: calc(var(--space-2xl) * -1 + 8px); }
.spine-node { position: absolute; left: 50%; top: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--accent-warm); box-shadow: 0 0 0 0 rgba(210, 190, 165, 0.5); transform: scale(0); }
.spine-trunk { position: absolute; left: 50%; top: 12px; width: 1px; height: 34px; background: var(--accent-warm); transform: scaleY(0); transform-origin: top; }
.spine-bus { grid-column: 1 / -1; grid-row: 1; margin: 46px calc((100% - 3 * var(--card-gap)) / 8) 0; height: 1px; background: var(--accent-warm); position: relative; overflow: hidden; transform: scaleX(0); transform-origin: center; }
.spine-bus::after { content: ''; position: absolute; top: 0; bottom: 0; left: -30%; width: 30%; background: linear-gradient(90deg, transparent, var(--text-primary), transparent); opacity: 0; }
.spine-drop { grid-row: 1; justify-self: center; width: 1px; height: 50px; margin-top: 46px; background: var(--accent-warm); transform: scaleY(0); transform-origin: top; }
.spine.on .spine-node { animation: pop 0.8s cubic-bezier(.2,.8,.3,1.2) forwards, node-breathe 7s ease-in-out 1.2s infinite; }
.spine.on .spine-trunk { animation: grow 0.9s cubic-bezier(.4,0,.2,1) 0.5s forwards; }
.spine.on .spine-bus { animation: grow-x 1.4s cubic-bezier(.4,0,.2,1) 1.2s forwards; }
.spine.on .spine-bus::after { animation: sweep 9s linear 3.2s infinite; }
.spine.on .spine-drop { animation: grow 0.9s cubic-bezier(.4,0,.2,1) forwards; }
.spine.on .spine-drop:nth-child(4) { animation-delay: 2.3s; } .spine.on .spine-drop:nth-child(5) { animation-delay: 2.45s; }
.spine.on .spine-drop:nth-child(6) { animation-delay: 2.6s; } .spine.on .spine-drop:nth-child(7) { animation-delay: 2.75s; }
@keyframes pop { to { transform: scale(1); } }
@keyframes grow { to { transform: scaleY(1); } }
@keyframes grow-x { to { transform: scaleX(1); } }
@keyframes node-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(210, 190, 165, 0.55); } 50% { box-shadow: 0 0 0 10px rgba(210, 190, 165, 0); } }
@keyframes sweep { 0% { left: -30%; opacity: 0; } 10% { opacity: 0.7; } 90% { opacity: 0.7; } 100% { left: 100%; opacity: 0; } }

/* audience glyphs draw in with their card */
.glyph { width: 40px; height: 40px; margin-bottom: var(--space-md); color: var(--accent-warm); display: block; }
.glyph * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.reveal.in .glyph * { animation: draw 1.6s cubic-bezier(.4,0,.2,1) forwards; animation-delay: calc(var(--i, 0) * 160ms + 1.1s); }
.reveal.in .glyph *:nth-child(2) { animation-delay: calc(var(--i, 0) * 160ms + 1.5s); }
.reveal.in .glyph *:nth-child(3) { animation-delay: calc(var(--i, 0) * 160ms + 1.9s); }
.reveal.in .glyph *:nth-child(4) { animation-delay: calc(var(--i, 0) * 160ms + 2.1s); }

/* node network and slow glow behind the dark bands */
.story.band-dark { position: relative; overflow: hidden; }
.story.band-dark .story-inner { position: relative; z-index: 1; }
.story.band-dark .net { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.8; }
.story.band-dark::before { content: ''; position: absolute; inset: -20%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, rgba(210, 190, 165, 0.14), transparent 55%); animation: band-glow 11s ease-in-out infinite alternate; }
@keyframes band-glow { from { transform: scale(0.85) translateY(-4%); opacity: 0.6; } to { transform: scale(1.1) translateY(4%); opacity: 1; } }

@media (max-width: 900px) {
  .story-split { grid-template-columns: 1fr; gap: var(--space-xl); }
  .living-ring { justify-self: start; max-width: 100%; }
  .living-ring .lbl.small { font-size: 13.5px; }
  .living-curve { justify-self: start; max-width: 340px; }
  .spine { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .story-statement { animation: none !important; translate: none !important; }
  .story-statement .w, .reveal .pillar, .reveal .outcome, .reveal .fit-col, .reveal .audience,
  .reveal .step, .reveal .insight-card, .reveal .contact-col, .reveal .service-points li { opacity: 1 !important; transform: none !important; filter: none !important; }
  .living *, .glyph *, .spine * { animation: none !important; stroke-dashoffset: 0 !important; clip-path: none !important; opacity: 1; transform: none !important; }
  .living .box { fill-opacity: 1; }
  .spine-bus::after { display: none; }
  .story.band-dark::before { animation: none !important; }
}

@media (max-width: 768px) {
  .story { padding: var(--space-3xl) 20px; }
  .story-statement { font-size: 30px; }
  .pillars { grid-template-columns: 1fr 1fr; }
  .outcomes { grid-template-columns: 1fr; }
}

/* ——— Footer legal / disclaimer ——— */
.footer-legal {
  max-width: var(--content-max-width);
  margin: var(--space-2xl) auto 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.footer-legal p { font-size: 12px; line-height: 1.6; color: var(--text-tertiary); }
.footer-legal a { color: var(--text-secondary); text-decoration: none; }
.footer-legal a:hover { color: var(--text-primary); }

/* ——— Long-form legal page (privacy, etc.) ——— */
.legal { max-width: 760px; margin: 0 auto; padding: var(--space-4xl) 40px; }
.legal h2 { font-family: var(--font-serif); font-size: 24px; font-weight: 400; margin: var(--space-xl) 0 var(--space-sm); }
.legal p { color: var(--text-secondary); margin-bottom: var(--space-md); }
.legal ul { color: var(--text-secondary); margin: 0 0 var(--space-md) var(--space-lg); }
.legal li { margin-bottom: var(--space-xs); }
@media (max-width: 768px) { .legal { padding: var(--space-3xl) 20px; } }

/* ——— Guides (long-form articles under /guides/) ——— */
.article-head { max-width: 720px; margin: 0 auto; padding: var(--space-3xl) 40px 0; }
.article-head .t-label { display: block; margin-bottom: var(--space-md); }
.article-byline { font-family: var(--font-sans); font-size: 15px; color: var(--text-secondary); margin-top: var(--space-md); }
.article .t-body-large { color: var(--text-secondary); }
.article p, .article li { font-size: 17px; line-height: 1.7; color: var(--text-primary); }
.article ul, .article ol { margin: 0 0 var(--space-lg) var(--space-lg); }
.article li { margin-bottom: var(--space-xs); }
.article h3 { margin: var(--space-lg) 0 var(--space-sm); }
.article table { width: 100%; border-collapse: collapse; margin: var(--space-md) 0 var(--space-lg); font-family: var(--font-sans); font-size: 15px; }
.article th, .article td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-default); vertical-align: top; }
.article th { font-weight: 500; color: var(--text-secondary); }
.article .note { font-size: 15px; color: var(--text-secondary); border-left: 2px solid var(--accent-warm); padding-left: var(--space-md); }
.article .sources { font-family: var(--font-sans); font-size: 14px; color: var(--text-secondary); border-top: 1px solid var(--border-default); padding-top: var(--space-lg); margin-top: var(--space-2xl); }
.article .sources li { font-size: 14px; line-height: 1.6; }
.article .sources a { color: inherit; }
@media (max-width: 768px) { .article-head { padding: var(--space-2xl) 20px 0; } .article table { font-size: 14px; } }

/* ——— Interior pages carry the home flow (2026-10-09, Evan: "the flow and feel of the
   Homepage to carry through to the rest of the website pages") ———
   Every page is built from the same parts as index.html: a video page hero (or a
   dark contour band for long-form pages), .story bands that alternate light / accent /
   dark, a label + .story-statement + .story-lead rhythm, .reveal wrappers with staggered
   children, and the dark "Begin with a conversation" band (.story-cta) at the end.
   motion.js is loaded on every page; each page carries the <noscript> rule for .reveal. */

/* the nav sits translucent over an interior video hero, as it does over the home hero */
body.interior:has(.page-hero) .nav:not(.scrolled) { background: rgba(42, 32, 24, 0.3); border-bottom-color: rgba(210, 190, 165, 0.1); }
.page-hero { background: var(--accent-primary); }
.page-hero.compact { min-height: 48vh; }
.page-hero-inner .thank-you-actions { margin-top: 0; }
.page-hero .btn-primary { background: var(--accent-warm); color: var(--accent-primary); }
.page-hero .btn-secondary { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.5); }
.page-hero .btn-secondary:hover { background: rgba(255, 255, 255, 0.12); }

/* closing band, shared by every page */
.story-cta { text-align: center; }
.story-cta .story-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); }
.story-cta .story-statement { max-width: 820px; }
.story-cta .story-lead { margin: 0; max-width: 560px; }

/* long statements (a pull quote, a guide title) sit a size down */
.story-statement.sm { font-size: 34px; line-height: 1.3; }
.story-inner.narrow .story-statement { max-width: none; }

/* numbered process steps (approach, advisors) */
.steps { display: flex; flex-direction: column; gap: var(--space-xl); margin-top: var(--space-2xl); }
.step .t-h3 { margin-bottom: var(--space-sm); }
.step p { color: var(--text-secondary); max-width: 720px; }

/* split sections reuse the home grid; .reverse puts the figure on the right */
.story-split.reverse > :first-child { order: 2; }
.story-split .diagram { min-height: 400px; border-radius: 4px; overflow: hidden; }
.story-split .leadership-photo { width: 100%; max-width: 400px; justify-self: center; }
.story-split .story-lead { margin-top: var(--space-md); }
.story-split .service-points { margin-top: var(--space-lg); }
.story-split .btn { margin-top: var(--space-lg); align-self: flex-start; }
.story-split .leadership-content > .t-label { display: block; color: var(--text-secondary); margin-bottom: var(--space-md); }
.editorial-content .story-lead { margin-top: 0; }
.editorial-content .service-points { margin-top: var(--space-xs); }
.editorial-content .btn { margin-top: var(--space-sm); }
.story .service-points { margin-top: var(--space-lg); }
.legal-opener .story-inner { max-width: 680px; }

/* comparison table and card grids inside a story band */
.story .comparison-table { margin-top: var(--space-2xl); }
.story .insights-grid:first-child { margin-top: 0; }
.story .contact-grid { margin-top: 0; }

/* long-form opener: the dark band carries the title, lead and byline, aligned with the article column */
.article-opener .story-inner { max-width: 640px; }
.article-opener .story-lead { max-width: none; }
.article-opener .article-byline { color: rgba(255, 255, 255, 0.7); margin-top: var(--space-lg); }
.legal.reveal, .article.reveal { transition-duration: 0.9s; }

/* staggered children behind a headline (same timing as the home cards) */
.reveal .step, .reveal .contact-col, .reveal .service-points li {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.1s ease-out, transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 160ms + 0.7s);
}
.reveal .service-points li { transition-delay: calc(var(--i, 0) * 110ms + 0.9s); }
.reveal.in .step, .reveal.in .contact-col, .reveal.in .service-points li { opacity: 1; transform: none; }
/* cards keep their hover transition, so they enter by animation (backwards fill, then the card's own styles) */
.reveal .insight-card { opacity: 0; }
.reveal.in .insight-card { opacity: 1; animation: stagger-in 1.1s ease-out backwards; animation-delay: calc(var(--i, 0) * 160ms + 0.7s); }
@keyframes stagger-in { from { opacity: 0; transform: translateY(18px); } }

@media (max-width: 900px) {
  .story-split.reverse > :first-child { order: 0; }
  .story-split .leadership-photo { justify-self: start; }
}
@media (max-width: 768px) {
  .story-statement.sm { font-size: 26px; }
  .page-hero.compact { min-height: 40vh; }
}

/* Home: capital path. Assembles once like a puzzle: slots wait on the chart, pieces glide in from the left and settle one by one, the curve clicks in between them, the marker runs the finished path. Then it rests. Timing per element in --d (seconds); generated by scratchpad build_path.py. */
.living-path { max-width: 700px; width: 100%; justify-self: end; }
.story-split.story-split-figure { grid-template-columns: 0.9fr 1.1fr; }
.living-path svg { overflow: hidden; } /* pieces fly in from outside the figure and must not spill over the copy or widen the page */
.living-path svg.tall { display: none; }
.living-path .base { stroke: var(--border-default); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.9; }
.living-path .guide { stroke: var(--border-default); stroke-width: 1; opacity: 0; transform: translateX(var(--tx, 0)); transition: transform 1.1s cubic-bezier(.2,.8,.2,1), opacity 0.5s ease-out; transition-delay: calc(var(--d, 0) * 1s); }
.living-path .ghost { stroke: var(--accent-warm); stroke-width: 1.2; stroke-dasharray: 2 6; opacity: 0; transition: opacity 0.8s ease-out; transition-delay: calc(var(--d, 0) * 1s); }
.living-path .slot { stroke: var(--accent-warm); stroke-width: 1.2; stroke-dasharray: 3 4; opacity: 0; }
.living-path .drop { stroke: var(--border-default); stroke-width: 1; stroke-dasharray: 0.06 0.06; stroke-dashoffset: 0; opacity: 0.7; clip-path: inset(100% 0 0 0); transition: clip-path 0.7s ease-out; transition-delay: calc(var(--d, 0) * 1s); }
.living-path .area { fill: var(--accent-warm); fill-opacity: 0; stroke: none; transform: translateY(60px); transform-box: fill-box; transition: fill-opacity 0.8s ease-out, transform 0.8s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--d, 0) * 1s); }
.living-path .curve.main { stroke: var(--accent-primary); stroke-width: 2.6; }
.living-path .ln.dashed.route { stroke: var(--text-secondary); stroke-width: 1.4; opacity: 0.7; }
.living-path .piece { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--r, 0deg)); transform-box: fill-box; transform-origin: center; transition: transform 1.1s cubic-bezier(.2,.7,.2,1), opacity 0.35s ease-out; transition-delay: calc(var(--d, 0) * 1s); }
.living-path .ring { stroke: var(--accent-warm); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.living-path .node { fill: var(--accent-primary); stroke: var(--bg-primary); stroke-width: 2; opacity: 0; transition: opacity 0.3s ease-out; transition-delay: calc(var(--d, 0) * 1s); }
.living-path .pulse { stroke: var(--accent-warm); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.living-path .step { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; fill: var(--accent-warm); stroke: none; opacity: 0; transition: opacity 0.6s ease-out; transition-delay: calc(var(--d, 0) * 1s); }
.living-path .lbl.title { font-family: var(--font-serif); font-size: 21px; font-weight: 500; fill: var(--text-primary); }
.living-path .lbl.small { font-size: 14px; }
.living-path .lbl.route-lbl { font-style: italic; font-size: 13.5px; }
.living-path .lbl.caption { font-size: 20px; }
.living-path .mover { fill: var(--accent-warm); stroke: var(--bg-primary); stroke-width: 1.5; }
@keyframes slot-wait { 0% { opacity: 0; } 25% { opacity: 0.9; } 90% { opacity: 0.9; } 100% { opacity: 0; } }
@keyframes snap { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(2.1); } }
.living.on.living-path .base { animation: draw 1.2s ease-out forwards; animation-delay: calc(var(--d, 0) * 1s); }
.living.on.living-path .guide { opacity: 0.6; transform: none; }
.living.on.living-path .ghost { opacity: 0.55; }
.living.on.living-path .slot { animation: slot-wait var(--dur, 2s) linear forwards; animation-delay: calc(var(--d, 0) * 1s); }
.living.on.living-path .drop { clip-path: inset(0 0 0 0); }
.living.on.living-path .area { fill-opacity: 0.09; transform: none; }
.living.on.living-path .piece { opacity: 1; transform: none; }
.living.on.living-path .pulse { animation: snap 0.7s ease-out forwards; animation-delay: calc(var(--d, 0) * 1s); }
.living.on.living-path .curve.main { animation: draw 0.7s cubic-bezier(.4,0,.2,1) forwards; animation-delay: calc(var(--d, 0) * 1s); }
.living.on.living-path .ring { animation: draw 0.8s cubic-bezier(.4,0,.2,1) forwards; animation-delay: calc(var(--d, 0) * 1s); }
.living.on.living-path .node, .living.on.living-path .step { opacity: 1; }
.resilience { margin-top: var(--space-lg); padding-left: var(--space-md); border-left: 2px solid var(--accent-warm); }
.resilience .t-label { display: block; margin-bottom: var(--space-xs); }
.resilience p { margin: 0; color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) { .living-path .mover, .living-path .slot, .living-path .pulse, .living-path .ghost { display: none; } .living-path .guide { opacity: 0.6; } .living-path .drop { clip-path: none; } .living-path .area { fill-opacity: 0.09; transform: none; } .living-path .piece { opacity: 1; } }
@media (max-width: 900px) { .living-path { justify-self: start; max-width: 560px; } .story-split.story-split-figure { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .living-path svg.wide { display: none; } .living-path svg.tall { display: block; } .living-path .lbl.title { font-size: 16px; } .living-path .lbl.small { font-size: 11.5px; } .living-path .lbl.caption { font-size: 17px; } }

/* Interior pages: motion on every page (Evan msg 811, 2026-10-10: "animations for all the other pages").
   Same vocabulary as the home page: everything draws once from the left and rests. */
/* About: the headshot fades in slowly and settles; name, credentials and bio follow one by one */
.reveal .leadership-photo img { opacity: 0; transform: scale(1.06); transition: opacity 3.4s ease-out, transform 5s cubic-bezier(.2,.7,.2,1); transition-delay: 0.3s; }
.reveal.in .leadership-photo img { opacity: 1; transform: none; }
.reveal .leadership-content > * { opacity: 0; transform: translateX(-14px); transition: opacity 1.1s ease-out, transform 1.2s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 180ms + 0.9s); }
.reveal.in .leadership-content > * { opacity: 1; transform: none; }
/* Steps (approach, advisors): a rail draws down beside the steps and a node lights as each step lands */
.steps { position: relative; padding-left: 36px; }
.steps::before { content: ''; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 1px; background: var(--accent-warm); transform: scaleY(0); transform-origin: top; transition: transform 2.8s cubic-bezier(.4,0,.2,1) 0.5s; }
.reveal.in .steps::before { transform: none; }
.steps .step { position: relative; }
.steps .step::before { content: ''; position: absolute; left: -36px; top: 7px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent-warm); box-shadow: 0 0 0 4px var(--bg-primary); transform: scale(0); transition: transform 0.7s cubic-bezier(.2,.8,.3,1.2); transition-delay: calc(var(--i, 0) * 160ms + 1s); }
.reveal.in .steps .step::before { transform: scale(1); }
/* Approach: comparison rows slide in from the left, the marks pop after */
.reveal .comparison-col-header, .reveal .comparison-cell { opacity: 0; transform: translateX(-16px); transition: opacity 0.9s ease-out, transform 1s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 110ms + 0.6s); }
.reveal.in .comparison-col-header, .reveal.in .comparison-cell { opacity: 1; transform: none; }
.reveal .comparison-icon { transform: scale(0); transition: transform 0.6s cubic-bezier(.2,.8,.3,1.2); transition-delay: calc(var(--i, 0) * 110ms + 1.2s); }
.reveal.in .comparison-icon { transform: scale(1); }
/* Insights: each card's motif draws itself once the card is in */
.reveal .insight-card-motif * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.reveal.in .insight-card-motif * { animation: draw 1.6s cubic-bezier(.4,0,.2,1) forwards; animation-delay: calc(var(--i, 0) * 160ms + 1.3s); }
.reveal.in .insight-card-motif *:nth-child(2) { animation-delay: calc(var(--i, 0) * 160ms + 1.8s); }
.reveal.in .insight-card-motif *:nth-child(3) { animation-delay: calc(var(--i, 0) * 160ms + 2.3s); }
/* Contact: fields follow the column in */
.reveal .contact-form > label, .reveal .contact-form > button { opacity: 0; transform: translateX(-14px); transition: opacity 0.9s ease-out, transform 1s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 120ms + 1s); }
.reveal.in .contact-form > label, .reveal.in .contact-form > button { opacity: 1; transform: none; }
/* Approach dark band: one curve compounds, one erodes; draws once from the same starting point */
.living-drift { max-width: 580px; width: 100%; justify-self: end; color: #FFFFFF; }
.living-drift .axis { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; }
.living-drift .node { fill: var(--accent-warm); opacity: 0; transition: opacity 0.5s ease-out; transition-delay: calc(var(--d, 0) * 1s); }
.living-drift .curve.main { stroke: var(--accent-warm); stroke-width: 2.6; }
.living-drift .curve.drift { stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.6; stroke-dasharray: 0.018 0.012; stroke-dashoffset: 0; clip-path: inset(0 100% 0 0); }
.living-drift .tip { fill: var(--accent-warm); opacity: 0; transform-box: fill-box; transform-origin: center; }
.living-drift .lbl.dark { font-family: var(--font-serif); font-size: 19px; fill: #FFFFFF; }
.living-drift .lbl.dark.small { font-family: var(--font-sans); font-size: 13px; fill: var(--accent-warm); }
.living.on.living-drift .node { opacity: 1; }
.living.on.living-drift .curve.main { animation: draw 3.2s cubic-bezier(.4,0,.2,1) forwards; animation-delay: calc(var(--d, 0) * 1s); }
.living.on.living-drift .curve.drift { animation: draw-dotted 3.2s cubic-bezier(.4,0,.2,1) forwards; animation-delay: calc(var(--d, 0) * 1s); }
.living.on.living-drift .tip { animation: tip-once 1.2s ease-out forwards; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes tip-once { 0% { opacity: 0; transform: scale(0.4); } 60% { opacity: 1; transform: scale(1.4); } 100% { opacity: 1; transform: scale(1); } }
/* Advisors: the gap. The corporation and the portfolio draw, then four pieces of our mandate glide in from the left into waiting slots. */
.living-gap { max-width: 540px; width: 100%; justify-self: end; }
.living-gap svg { overflow: hidden; }
.living-gap .frame { stroke: var(--text-secondary); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.living-gap .box { stroke: var(--text-primary); stroke-width: 1.4; }
.living-gap .slot { stroke: var(--accent-warm); stroke-width: 1.2; stroke-dasharray: 3 4; opacity: 0; }
.living-gap .piece { opacity: 0; transform: translateX(var(--tx, 0)); transition: transform 1.1s cubic-bezier(.2,.7,.2,1), opacity 0.35s ease-out; transition-delay: calc(var(--d, 0) * 1s); }
.living-gap .tile { fill: var(--bg-elevated); stroke: var(--accent-primary); stroke-width: 1.4; }
.living-gap .tile-lbl { font-size: 15px; fill: var(--text-primary); }
.living-gap .pulse { stroke: var(--accent-warm); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.living-gap .lbl.small { font-size: 13px; }
.living.on.living-gap .frame { animation: draw 2s cubic-bezier(.4,0,.2,1) forwards; animation-delay: calc(var(--d, 0) * 1s); }
.living.on.living-gap .box { animation: draw 1.6s cubic-bezier(.4,0,.2,1) forwards; animation-delay: calc(var(--d, 0) * 1s); }
.living.on.living-gap .slot { animation: slot-wait var(--dur, 2s) linear forwards; animation-delay: calc(var(--d, 0) * 1s); }
.living.on.living-gap .piece { opacity: 1; transform: none; }
.living.on.living-gap .pulse { animation: snap-soft 0.7s ease-out forwards; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes snap-soft { 0% { opacity: 0.8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.08); } }
@media (max-width: 900px) { .living-drift, .living-gap { justify-self: start; max-width: 100%; } }
/* Advisors: the study (Evan msg 814, 2026-10-10). Two portfolios assemble from the left; without the structure the last quarter leaves to pay the tax, with it the bar stays whole. No dollar figures in the graphic; the numbers sit in the table below it. */
.study .story-lead { max-width: 760px; }
.living-keep { max-width: 640px; width: 100%; margin: var(--space-xl) 0 0; }
.living-keep svg { overflow: hidden; }
.living-keep .lbl { font-family: var(--font-serif); font-size: 19px; fill: var(--text-primary); text-anchor: start; opacity: 0; }
.living-keep .lbl.small { font-family: var(--font-sans); font-size: 13px; fill: var(--text-secondary); }
.living-keep .lbl.warm { fill: var(--text-secondary); }
.living-keep .slot { stroke: var(--accent-warm); stroke-width: 1.2; stroke-dasharray: 3 4; opacity: 0; }
.living-keep .piece { opacity: 0; transform: translateX(var(--tx, 0)); transition: transform 1.1s cubic-bezier(.2,.7,.2,1), opacity 0.35s ease-out; transition-delay: calc(var(--d, 0) * 1s); }
.living-keep .tile { fill: var(--bg-elevated); stroke: var(--accent-primary); stroke-width: 1.4; }
.living-keep .pulse { stroke: var(--accent-warm); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.living.on.living-keep .lbl { animation: fade-in 0.8s ease-out forwards; animation-delay: calc(var(--d, 0) * 1s); }
.living.on.living-keep .slot { animation: slot-wait var(--dur, 2s) linear forwards; animation-delay: calc(var(--d, 0) * 1s); }
.living.on.living-keep .piece { opacity: 1; transform: none; }
.living.on.living-keep .piece.leaves { animation: leave 1.4s cubic-bezier(.4,0,.2,1) forwards; animation-delay: 3.6s; }
.living.on.living-keep .pulse { animation: snap-soft 0.7s ease-out forwards; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes leave { to { transform: translateX(40px); opacity: 0.28; } }
@keyframes fade-in { to { opacity: 1; } }
.study-table { width: 100%; border-collapse: collapse; margin: var(--space-xl) 0 var(--space-md); font-family: var(--font-sans); font-size: 16px; font-variant-numeric: tabular-nums; }
.study-table th, .study-table td { text-align: left; vertical-align: top; padding: 14px 12px; border-bottom: 1px solid var(--border-default); }
.study-table thead th { font-family: var(--font-serif); font-weight: 400; font-size: 18px; color: var(--text-primary); }
.study-table tbody th { font-weight: 400; color: var(--text-secondary); width: 40%; }
.study-table td:last-child { color: var(--text-primary); }
.study-table sup { font-size: 11px; margin-left: 2px; }
.study-subhead { font-family: var(--font-serif); font-weight: 400; font-size: 26px; line-height: 1.2; margin: var(--space-xl) 0 var(--space-sm); color: var(--text-primary); }
.study-sublead { max-width: 640px; color: var(--text-secondary); }
.study-table-funding { margin-top: var(--space-md); }
.study-points { margin-top: var(--space-lg); }
.study-notes { margin-top: var(--space-md); padding-left: 1.3em; font-size: 13px; line-height: 1.55; color: var(--text-secondary); max-width: 820px; }
.study-notes li + li { margin-top: 6px; }
.reveal .study-table tbody tr { opacity: 0; transform: translateX(-16px); transition: opacity 0.6s ease-out, transform 0.8s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 110ms + 0.5s); }
.reveal.in .study-table tbody tr { opacity: 1; transform: none; }
.reveal .study-notes { opacity: 0; transition: opacity 0.8s ease-out 1.4s; }
.reveal.in .study-notes { opacity: 1; }
@media (max-width: 600px) { .study-table { font-size: 14px; } .study-table th, .study-table td { padding: 10px 6px; } .study-table thead th { font-size: 16px; } .study-table tbody th { width: 34%; } }
@media (prefers-reduced-motion: reduce) {
  .reveal .leadership-photo img, .reveal .leadership-content > *, .reveal .comparison-col-header, .reveal .comparison-cell, .reveal .comparison-icon, .reveal .contact-form > label, .reveal .contact-form > button { opacity: 1 !important; transform: none !important; }
  .steps::before, .steps .step::before { transform: none !important; }
  .insight-card-motif * { stroke-dashoffset: 0 !important; animation: none !important; }
  .living-drift .node, .living-drift .tip { opacity: 1; } .living-drift .curve.drift { clip-path: none; }
  .living-gap .slot, .living-gap .pulse { display: none; } .living-gap .piece { opacity: 1; transform: none; }
  .living-keep .slot, .living-keep .pulse { display: none; } .living-keep .piece, .living-keep .lbl { opacity: 1; transform: none; animation: none; } .living-keep .piece.leaves { transform: translateX(40px); opacity: 0.28; }
  .reveal .study-table tbody tr, .reveal .study-notes { opacity: 1 !important; transform: none !important; }
}