/* ==========================================================================
   Sagetor design system
   Editorial intelligence: warm neutral field, ink structure, bronze accent.
   ========================================================================== */

/* ---------- fonts (self-hosted, variable) ---------- */
@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/assets/fonts/newsreader-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/assets/fonts/newsreader-latin-wght-italic.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  /* palette */
  --ink: #2B211B;
  --ink-2: #3D2F27;
  --ivory: #FDF7F1;
  --panel: #F9E6D6;
  --stone: #E7D5C4;
  --bronze: #EFBE9C;
  --bronze-ink: #99401F;
  --brand-text: #99401F;
  --brand-deep: #B4552D;
  --bronze-light: #F0BE9B;
  --muted: #6E5A4E;
  --muted-dark: #E4CDBA;

  --paper: #FDF7F1;
  --apricot: #F9E6D6;
  --peach: #F4D2B8;
  --soft: #EFBE9C;
  --terracotta: #B4552D;
  --terracotta-deep: #99401F;

  /* type */
  --font-head: 'Inter', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;

  --step--1: 0.9375rem;
  --step-0: 1.0625rem;
  --step-1: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
  --step-2: clamp(1.4375rem, 1.25rem + 0.9vw, 1.75rem);
  --step-3: clamp(1.875rem, 1.45rem + 1.9vw, 2.625rem);
  --step-4: clamp(2.25rem, 1.6rem + 3vw, 3.625rem);
  --step-5: clamp(2.75rem, 1.9rem + 4.4vw, 4.75rem);
  --step-hero: clamp(3.25rem, 2rem + 6.6vw, 6.75rem);

  /* spacing */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: clamp(4.5rem, 3.5rem + 5vw, 8rem);
  --space-3xl: clamp(6rem, 4.5rem + 7vw, 11rem);

  /* structure */
  --container: 72rem;
  --container-narrow: 46rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 2px;
  --hairline: 1px solid var(--stone);

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.55s;
}

/* ---------- reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
[id] { scroll-margin-top: 5.5rem; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-s);
  text-wrap: balance;
}
p { margin: 0 0 var(--space-s); }
ul, ol { margin: 0 0 var(--space-s); padding-left: 1.25rem; }
a { color: inherit; text-decoration-color: var(--bronze); text-underline-offset: 3px; }
a:hover { color: var(--bronze-ink); }
main { display: block; }
::selection { background: var(--bronze); color: var(--ivory); }

:focus-visible {
  outline: 2px solid var(--bronze-ink);
  outline-offset: 3px;
  border-radius: var(--radius);
}
.on-ink :focus-visible, .site-footer :focus-visible { outline-color: var(--bronze-light); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--ivory);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-head);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus-visible { left: 0; color: var(--ivory); }

/* ---------- layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--space-2xl); }
.section--tight { padding-block: var(--space-xl); }
.section--ink {
  background: var(--ink);
  color: var(--ivory);
}
.section--ink.method { background: var(--brand-deep); }
.section--ink.method .kicker { color: #F3D9BE; }
.section--ink.method .kicker::before { background: #F3D9BE; }
.section--ink.method .section-intro { color: #F0DCC4; }
.section--ink.method .method__num { color: #F3D9BE; }
.section--ink.method .method__desc { color: #EBD3B6; }
.section--ink.method .method__steps { border-top-color: #A5714099; }
.section--ink.method .method__step::before { background: #F3D9BE; }
.section--ink.method .link-arrow::after { color: #F3D9BE; }
.section--ink a:hover { color: var(--bronze-light); }
.section--panel { background: var(--panel); }
.section + .section--hairline { border-top: var(--hairline); }

.grid { display: grid; gap: var(--space-m); }
@media (min-width: 46em) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62em) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--3 { gap: var(--space-l); }
}

.flow > * + * { margin-top: var(--space-s); }
.flow > h2 { margin-top: var(--space-l); }
.flow > h3 { margin-top: var(--space-m); }

/* ---------- kickers, headings, intros ---------- */
.kicker {
  font-family: var(--font-head);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze-ink);
  margin-bottom: var(--space-s);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.kicker::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--bronze);
  flex: none;
}
.section--ink .kicker { color: var(--bronze-light); }
.section--ink .kicker::before { background: var(--bronze-light); }

.section-heading {
  font-family: var(--font-serif);
  font-weight: 540;
  font-size: var(--step-4);
  letter-spacing: -0.018em;
  line-height: 1.06;
  max-width: 24ch;
}
.section-heading--sub { font-size: var(--step-2); }
.section-intro {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--muted);
  max-width: 58ch;
}
.section--ink .section-intro { color: var(--muted-dark); }

.lede {
  font-size: var(--step-1);
  line-height: 1.65;
  color: var(--muted);
  max-width: 60ch;
}

/* thesis statement: large serif editorial voice */
.thesis {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 450;
  font-size: var(--step-3);
  line-height: 1.3;
  letter-spacing: -0.012em;
  max-width: 30ch;
  color: var(--ink);
  margin: 0 0 var(--space-s);
  text-wrap: balance;
}
.thesis strong { font-weight: 620; font-style: italic; }
.section--ink .thesis { color: var(--ivory); }

/* numbered index style */
.index-num {
  font-family: var(--font-head);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--bronze-ink);
}
.section--ink .index-num { color: var(--bronze-light); }

/* ---------- buttons & links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 0.9rem 1.6rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--ivory);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--ink-2); color: var(--ivory); }
.btn::after {
  content: "\2192";
  font-family: var(--font-body);
  transition: transform var(--dur) var(--ease);
}
.btn:hover::after { transform: translateX(4px); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--ivory); }

.section--ink .btn, .btn--light { background: var(--ivory); border-color: var(--ivory); color: var(--ink); }
.section--ink .btn:hover, .btn--light:hover { background: var(--stone); border-color: var(--stone); color: var(--ink); }
.section--ink .btn--ghost { background: transparent; color: var(--ivory); border-color: var(--ivory); }
.section--ink .btn--ghost:hover { background: var(--ivory); color: var(--ink); }

.link-arrow {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.link-arrow::after {
  content: "\2192";
  color: var(--bronze-ink);
  transition: transform var(--dur) var(--ease);
}
a:hover .link-arrow::after, .link-arrow:hover::after { transform: translateX(4px); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-m); }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ivory);
  background: color-mix(in srgb, var(--ivory) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--stone); }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: 4.25rem;
}
.wordmark {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink);
}
.logo-mark { flex: none; }
.wordmark:hover { color: var(--ink); }
.wordmark__text {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.1875rem;
  letter-spacing: 0.22em;
}
.wordmark__rule {
  width: 1.35rem;
  height: 2px;
  background: var(--bronze);
  transform: translateY(-0.22rem) rotate(-14deg);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
.wordmark:hover .wordmark__rule, .wordmark:focus-visible .wordmark__rule { transform: translateY(-0.22rem) rotate(0deg); }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.nav__link:hover, .nav__link.is-active { border-bottom-color: var(--bronze); color: var(--ink); }
.nav__link--cta {
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  padding: 0.55rem 1.1rem;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__link--cta { background: var(--brand-text); border-color: var(--brand-text); color: var(--ivory); }
.nav__link--cta:hover, .nav__link--cta.is-active { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--ivory); border-bottom-color: var(--brand-deep); }

.nav__toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  padding: 0.55rem 0.9rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--ink);
  cursor: pointer;
}
.nav__toggle-icon { display: inline-flex; flex-direction: column; gap: 4px; width: 18px; }
.nav__toggle-icon span { height: 2px; background: var(--ink); transition: transform var(--dur) var(--ease); }
.nav__toggle[aria-expanded="true"] .nav__toggle-icon span:first-child { transform: translateY(3px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-icon span:last-child { transform: translateY(-3px) rotate(-45deg); }

@media (max-width: 47.99em) {
  .nav__toggle { display: inline-flex; }
  .nav__list {
    position: fixed;
    inset: 4.25rem 0 0 0;
    height: calc(100dvh - 4.25rem);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ivory);
    padding: var(--space-s) var(--gutter) var(--space-l);
    display: none;
  }
  .nav__list.is-open { display: flex; }
  .nav__link {
    display: block;
    font-size: 1.25rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--stone);
  }
  .nav__link.is-active { border-bottom-color: var(--bronze); }
  .nav__link--cta { margin-top: var(--space-m); text-align: center; padding: 0.9rem 1.1rem; }
  body.nav-open { overflow: hidden; }
}

/* ---------- signature line-grid system ----------
   Hairlines begin slightly unresolved and align into a grid
   when the element enters the viewport. Reduced motion or no-JS:
   lines are always resolved. */
.linegrid { display: block; width: 100%; }
.linegrid line {
  stroke: var(--stone);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition: transform 1.1s var(--ease);
}
.linegrid--ink line { stroke: #A5714033; }
.linegrid line.accent { stroke: var(--bronze); }
.linegrid--ink line.accent { stroke: var(--bronze); }

/* unresolved state (only when JS arms it) */
[data-linegrid]:not(.is-resolved) line:nth-child(3n+1) { transform: rotate(1.3deg) translateY(-3px); transform-origin: 20% 50%; }
[data-linegrid]:not(.is-resolved) line:nth-child(3n+2) { transform: rotate(-1.1deg) translateY(4px); transform-origin: 70% 50%; }
[data-linegrid]:not(.is-resolved) line:nth-child(3n)   { transform: rotate(0.8deg) translateY(-2px); transform-origin: 45% 50%; }
[data-linegrid].is-resolved line { transform: none; }

/* vertical variant (hero) */
[data-linegrid].linegrid--v:not(.is-resolved) line:nth-child(3n+1) { transform: rotate(2deg) translateX(-6px); transform-origin: 50% 15%; }
[data-linegrid].linegrid--v:not(.is-resolved) line:nth-child(3n+2) { transform: rotate(-1.6deg) translateX(7px); transform-origin: 50% 70%; }
[data-linegrid].linegrid--v:not(.is-resolved) line:nth-child(3n)   { transform: rotate(1.2deg) translateX(-4px); transform-origin: 50% 40%; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; color: var(--ink); }
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.75;
  pointer-events: none;
}
.hero__grid svg { width: 100%; height: 100%; }
.hero__content { position: relative; z-index: 1; padding-bottom: var(--space-l); }
.hero__brand {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin-bottom: var(--space-m);
}
.hero__title {
  font-family: var(--font-serif);
  font-weight: 520;
  font-size: var(--step-hero);
  letter-spacing: -0.022em;
  line-height: 1.0;
  max-width: 13ch;
  margin-bottom: var(--space-m);
}
.hero__title em { font-weight: 480; }
.hero__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.hero__lede {
  font-size: var(--step-1);
  line-height: 1.65;
  color: var(--muted);
  max-width: 54ch;
  margin-bottom: var(--space-l);
}

/* hero entrance: content settles into place on load (CSS-only, JS not required) */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.hero__content > * { animation: hero-rise 0.8s var(--ease) backwards; }
.hero__content > :nth-child(1) { animation-delay: 0.05s; }
.hero__content > :nth-child(2) { animation-delay: 0.15s; }
.hero__content > :nth-child(3) { animation-delay: 0.28s; }
.hero__content > :nth-child(4) { animation-delay: 0.4s; }

/* hero baseline strip below the banner */
.hero-meta-strip {
  border-bottom: var(--hairline);
}
.hero-meta-strip .inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-s);
  padding: 1.1rem 0;
  font-family: var(--font-head);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-meta-strip p { margin: 0; }
.hero-meta-strip .accent { color: var(--brand-text); }
.hero__banner-space { height: clamp(10rem, 24vw, 20rem); }

/* page header (interior pages) */
.page-header {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-2xl) var(--space-xl);
}
.page-header::after {
  content: "";
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 7px;
  background: linear-gradient(to right, var(--bronze) 0 30%, var(--brand-text) 30% 100%);
}
.page-header__lede { color: var(--muted); }
.page-strip {
  height: clamp(8rem, 18vw, 13rem);
  background: none;
}
.page-header__title { font-family: var(--font-serif); font-weight: 540; font-size: var(--step-5); letter-spacing: -0.02em; line-height: 1.04; max-width: 18ch; }
.page-header__lede { font-size: var(--step-1); max-width: 56ch; margin-bottom: 0; }

/* ---------- breadcrumbs ---------- */
.breadcrumbs { font-size: 0.875rem; margin-bottom: var(--space-m); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; color: var(--muted); }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--stone); }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--bronze-ink); text-decoration: underline; }

/* ---------- cards ---------- */
.card {
  border: var(--hairline);
  border-radius: var(--radius);
  background: var(--ivory);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover { border-color: var(--bronze); transform: translateY(-3px); }
.card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-m);
  text-decoration: none;
  color: inherit;
}
.card__kicker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-head);
  font-size: 0.78125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bronze-ink);
  margin-bottom: var(--space-xs);
}
.card__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--stone); }
.card__title { font-size: var(--step-2); margin-bottom: var(--space-xs); }
.card--article .card__title { font-size: var(--step-1); line-height: 1.3; }
.card__summary { color: var(--muted); font-size: var(--step--1); line-height: 1.65; flex-grow: 1; }
.card__more { margin: var(--space-s) 0 0; }

/* editorial index list (insights) */
.index-list { border-top: var(--hairline); }
.idx { border-bottom: var(--hairline); }
.idx__link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem var(--space-l);
  align-items: baseline;
  padding: var(--space-m) 0;
  text-decoration: none;
  color: inherit;
  transition: padding-left var(--dur) var(--ease);
}
.idx__link:hover { padding-left: 0.5rem; }
.idx__meta {
  grid-column: 1 / -1;
  font-family: var(--font-head);
  font-size: 0.78125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bronze-ink);
  margin: 0;
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.idx__title {
  font-family: var(--font-serif);
  font-weight: 540;
  font-size: var(--step-3);
  letter-spacing: -0.015em;
  line-height: 1.12;
  margin: 0;
  max-width: 28ch;
  transition: color var(--dur) var(--ease);
}
.idx__link:hover .idx__title { color: var(--bronze-ink); }
.idx__arrow { font-size: var(--step-2); color: var(--bronze-ink); transition: transform var(--dur) var(--ease); }
.idx__link:hover .idx__arrow { transform: translateX(6px); }
.idx__summary { grid-column: 1; color: var(--muted); font-size: var(--step--1); line-height: 1.65; margin: 0; max-width: 68ch; }
@media (max-width: 45.99em) { .idx__arrow { display: none; } }

/* capability entries (home + capabilities index) */
.cap-list { border-top: var(--hairline); }
.cap-item { border-bottom: var(--hairline); }
.cap-item__link {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  align-items: baseline;
  gap: var(--space-s) var(--space-m);
  padding: var(--space-m) 0;
  text-decoration: none;
  color: inherit;
  transition: padding-left var(--dur) var(--ease);
}
.cap-item__link:hover { padding-left: 0.5rem; }
.cap-item__title { font-family: var(--font-serif); font-weight: 540; font-size: var(--step-3); letter-spacing: -0.015em; margin: 0; transition: color var(--dur) var(--ease); }
.cap-item__link:hover .cap-item__title { color: var(--bronze-ink); }
.cap-item .index-num {
  font-size: var(--step-2);
  font-weight: 300;
  color: var(--stone);
  letter-spacing: 0;
  line-height: 1.2;
  transition: color var(--dur) var(--ease);
}
.cap-item__link:hover .index-num { color: var(--bronze); }
.cap-item__desc { grid-column: 2; color: var(--muted); font-size: var(--step--1); margin: 0; max-width: 62ch; }
.cap-item__arrow { font-size: var(--step-2); color: var(--bronze-ink); transition: transform var(--dur) var(--ease); }
.cap-item__link:hover .cap-item__arrow { transform: translateX(6px); }
@media (max-width: 45.99em) {
  .cap-item__link { grid-template-columns: 2.6rem 1fr; }
  .cap-item .index-num { font-size: var(--step-0); line-height: 1.9; }
  .cap-item__arrow { display: none; }
}

/* ---------- method diagram ----------
   Mobile/tablet: a vertical spine of steps.
   Desktop: a five-column timeline on a single rule, each step marked
   by a bronze tick, echoing the resolving line-grid. */
.method__steps {
  list-style: none;
  margin: var(--space-l) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid #A5714033;
}
.method__step {
  border-bottom: 1px solid #A5714033;
  padding: var(--space-m) 0;
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--space-s) var(--space-m);
  align-items: start;
}
.method__num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  color: var(--bronze-light);
  padding-top: 0.35rem;
}
.method__name { font-family: var(--font-serif); font-weight: 540; font-size: var(--step-2); margin-bottom: 0.35rem; color: var(--ivory); }
.method__desc { color: var(--muted-dark); font-size: var(--step--1); margin: 0; max-width: 62ch; }
@media (min-width: 62em) {
  .method__steps {
    grid-template-columns: repeat(5, 1fr);
    column-gap: var(--space-l);
    border-top: 1px solid #A5714033;
  }
  .method__step {
    display: block;
    border-bottom: none;
    padding: var(--space-m) 0 0;
    position: relative;
  }
  .method__step::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 2rem;
    height: 2px;
    background: var(--bronze);
  }
  .method__num { display: block; padding: 0 0 var(--space-s); }
  .method__desc { max-width: none; }
}

/* ---------- evidence ---------- */
.evidence {
  display: grid;
  gap: var(--space-l) var(--space-m);
  margin-top: var(--space-l);
}
@media (min-width: 46em) { .evidence { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .evidence { grid-template-columns: repeat(4, 1fr); } }
.evidence__item { border-top: 3px solid var(--bronze); padding-top: var(--space-s); }
.evidence__value {
  font-family: var(--font-serif);
  font-size: var(--step-5);
  font-weight: 540;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: var(--space-xs);
}
.evidence__label { color: var(--muted); font-size: var(--step--1); line-height: 1.55; margin: 0; }
.evidence-note { color: var(--muted); font-size: 0.875rem; margin-top: var(--space-l); max-width: 70ch; }

/* ---------- sector list ---------- */
.sector-list {
  list-style: none;
  margin: var(--space-l) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: var(--hairline);
}
@media (min-width: 46em) { .sector-list { grid-template-columns: 1fr 1fr; column-gap: var(--space-l); } }
.sector-list li {
  border-bottom: var(--hairline);
  padding: 0.85rem 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--step-0);
}

/* ---------- pull quote / insight block ---------- */
.pullquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--step-3);
  line-height: 1.35;
  letter-spacing: -0.01em;
  max-width: 26ch;
  margin: 0;
}
.pullquote--body {
  font-size: var(--step-2);
  border-left: 2px solid var(--bronze);
  padding-left: var(--space-m);
  max-width: 34ch;
  margin-block: var(--space-l);
}

/* ---------- accordion (details/summary) ---------- */
.accordion { border-top: var(--hairline); }
.accordion__item { border-bottom: var(--hairline); }
.accordion__item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-s) 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step-1);
}
.accordion__item summary::-webkit-details-marker { display: none; }
.accordion__item summary::after {
  content: "+";
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--bronze-ink);
  transition: transform var(--dur) var(--ease);
  flex: none;
}
.accordion__item[open] summary::after { transform: rotate(45deg); }
.accordion__body { padding: 0 0 var(--space-m); color: var(--muted); max-width: 68ch; }
.accordion__body ul { margin-top: var(--space-xs); }

/* ---------- service page detail lists ---------- */
.svc-list {
  list-style: none;
  padding: 0;
  margin: var(--space-s) 0 0;
  display: grid;
  gap: 0.4rem 1.5rem;
}
@media (min-width: 46em) { .svc-list { grid-template-columns: 1fr 1fr; } }
.svc-list li {
  padding: 0.35rem 0 0.35rem 1.1rem;
  position: relative;
  color: var(--ink-2);
  font-size: var(--step--1);
}
.svc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 0.45rem;
  height: 1px;
  background: var(--bronze);
}

/* ---------- front page columns (homepage) ---------- */
.frontpage { border-top: 1px solid var(--ink); }
.fp-grid { display: grid; gap: 0; }
@media (min-width: 62em) { .fp-grid { grid-template-columns: 1.15fr 1.35fr 1fr; } }
.fp-col { padding: var(--space-l) var(--space-l) var(--space-l) 0; }
@media (min-width: 62em) {
  .fp-col { border-right: 1px solid var(--stone); }
  .fp-col + .fp-col { padding-left: var(--space-l); }
  .fp-col:last-child { border-right: none; padding-right: 0; }
}
@media (max-width: 61.99em) { .fp-col { border-bottom: 1px solid var(--stone); } .fp-col:last-child { border-bottom: none; } }
.colhead {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-text);
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--stone);
  margin-bottom: var(--space-m);
}
.colhead span:last-child { color: var(--muted); }
.thesis--drop::first-letter {
  font-family: var(--font-serif);
  font-size: 2.6em;
  float: left;
  line-height: 0.8;
  padding: 0.08em 0.14em 0 0;
  font-weight: 500;
  font-style: normal;
  color: var(--brand-text);
}
.fp-cap {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--stone);
  text-decoration: none;
  color: inherit;
}
.fp-cap:last-of-type { border-bottom: none; }
.fp-cap .rn { font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; color: var(--brand-text); padding-top: 0.1rem; }
.fp-cap h3 { font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.01em; margin: 0; transition: color var(--dur) var(--ease); }
.fp-cap:hover h3 { color: var(--brand-text); }
.fp-cap p { font-size: 0.875rem; color: var(--muted); margin: 0.3rem 0 0; line-height: 1.6; }
.fp-ev { padding: 0 0 1rem; border-bottom: 1px solid var(--stone); margin-bottom: 1rem; }
.fp-ev:last-of-type { border-bottom: none; margin-bottom: 0; }
.fp-ev b { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.2rem, 3vw, 2.9rem); line-height: 1; display: block; }
.fp-ev span { font-size: 0.8125rem; color: var(--muted); display: block; margin-top: 0.4rem; line-height: 1.55; }

/* ---------- engagement models ---------- */
.models {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-l);
}
@media (min-width: 62em) { .models { grid-template-columns: repeat(3, 1fr); gap: var(--space-l); } }
.model {
  border-top: 2px solid var(--bronze);
  padding-top: var(--space-s);
}
.model__kicker {
  font-family: var(--font-head);
  font-size: 0.78125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze-ink);
  margin-bottom: var(--space-xs);
}
.model__name { font-family: var(--font-serif); font-weight: 540; font-size: var(--step-2); margin-bottom: var(--space-xs); }
.model__desc { color: var(--muted); font-size: var(--step--1); margin: 0; }

/* ---------- CTA band ---------- */
.cta-band { text-align: left; }
.cta-band .section-heading { max-width: 20ch; }

/* ---------- article ---------- */
.article__header { padding-top: var(--space-xl); }
.article__kicker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-head);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze-ink);
  margin-bottom: var(--space-s);
}
.article__title { font-family: var(--font-serif); font-weight: 540; font-size: var(--step-5); letter-spacing: -0.02em; line-height: 1.05; max-width: 24ch; }
.article__standfirst {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 32ch;
  margin-bottom: var(--space-m);
}
.article__byline { color: var(--muted); font-size: 0.9375rem; }
.article__author { font-weight: 600; color: var(--ink); }
.article__rule { margin-top: var(--space-l); }
.article__body {
  font-family: var(--font-serif);
  font-size: 1.1875rem;
  line-height: 1.75;
  padding-block: var(--space-xl);
}
.article__body h2 {
  font-family: var(--font-head);
  font-size: var(--step-2);
  margin-top: var(--space-xl);
}
.article__body h3 { font-family: var(--font-head); font-size: var(--step-1); }
.article__body ul, .article__body ol { padding-left: 1.4rem; }
.article__body li { margin-bottom: 0.4rem; }
.article__body strong { font-weight: 650; }
.article__note {
  border: var(--hairline);
  border-left: 2px solid var(--bronze);
  padding: var(--space-m);
  margin-bottom: var(--space-2xl);
  background: var(--panel);
}
.article__note p { margin: 0; font-size: var(--step--1); color: var(--ink-2); }
.article__footer { padding-bottom: var(--space-2xl); }

/* drop cap on article opening */
.article__body > p:first-of-type::first-letter {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 3.4em;
  line-height: 0.82;
  float: left;
  padding: 0.08em 0.12em 0 0;
  color: var(--bronze-ink);
}

/* ---------- forms ---------- */
.form { display: grid; gap: var(--space-m); max-width: 40rem; }
.form__row { display: grid; gap: var(--space-m); }
@media (min-width: 46em) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.4rem; }
.field label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9375rem;
}
.field .optional { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #FFFFFF;
  border: 1px solid var(--stone);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  width: 100%;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--bronze-ink);
  outline-offset: 1px;
  border-color: var(--bronze-ink);
}
.field__hint { font-size: 0.875rem; color: var(--muted); margin: 0; }
.field__error {
  font-size: 0.875rem;
  color: #8C2E1F;
  font-weight: 600;
  margin: 0;
  display: none;
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #8C2E1F; }
.field.has-error .field__error { display: block; }
.field--consent { grid-template-columns: auto 1fr; align-items: start; gap: 0.75rem; }
.field--consent input { width: 1.15rem; height: 1.15rem; margin-top: 0.3rem; accent-color: var(--bronze-ink); }
.field--consent label { font-weight: 400; font-family: var(--font-body); font-size: 0.9375rem; color: var(--ink-2); }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-status { border-radius: var(--radius); padding: var(--space-m); display: none; }
.form-status.is-visible { display: block; }
.form-status--success { border: 1px solid var(--bronze); background: var(--panel); }
.form-status--error { border: 1px solid #8C2E1F; background: #F6E8E4; }
.form-status h2 { font-size: var(--step-1); margin-bottom: 0.4rem; }
.form-status p { margin: 0; color: var(--ink-2); font-size: var(--step--1); }

/* ---------- footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--ivory);
  padding-block: var(--space-2xl) var(--space-l);
  margin-top: var(--space-2xl);
  position: relative;
  overflow: hidden;
}
.footer__watermark {
  position: absolute;
  right: -0.06em;
  bottom: -0.22em;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(6rem, 16vw, 15rem);
  letter-spacing: 0.02em;
  line-height: 1;
  color: #26221D;
  pointer-events: none;
  user-select: none;
}
.footer__meta {
  color: var(--muted-dark);
  font-family: var(--font-head);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 var(--space-m);
}
.site-footer .container { position: relative; z-index: 1; }
.page-home .site-footer, .section--ink + .site-footer { margin-top: 0; }
.footer__top {
  display: grid;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}
@media (min-width: 62em) { .footer__top { grid-template-columns: 1.2fr 2fr; } }
.footer__wordmark {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: 0.22em;
  margin-bottom: 0.35rem;
}
.footer__descriptor {
  font-family: var(--font-head);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze-light);
  margin-bottom: var(--space-m);
}
.footer__statement { color: var(--muted-dark); font-size: var(--step--1); max-width: 34ch; }
.footer__email a { color: var(--ivory); font-family: var(--font-head); font-weight: 600; text-decoration-color: var(--bronze-light); }
.footer__cols { display: grid; gap: var(--space-l); }
@media (min-width: 46em) { .footer__cols { grid-template-columns: repeat(3, 1fr); } }
.footer__heading {
  font-family: var(--font-head);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-dark);
  margin-bottom: var(--space-s);
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer__list a { color: var(--ivory); text-decoration: none; font-size: var(--step--1); }
.footer__list a:hover { color: var(--bronze-light); text-decoration: underline; }
.footer__rule { margin-bottom: var(--space-m); }
.linegrid--footer line { stroke: #A5714033; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-s);
  color: var(--muted-dark);
  font-size: 0.875rem;
}
.footer__bottom p { margin: 0; }
.footer__legal-links a { color: var(--muted-dark); }
.footer__legal-links a:hover { color: var(--bronze-light); }

/* ---------- legal pages ---------- */
.legal-notice {
  border: var(--hairline);
  border-left: 2px solid var(--bronze);
  background: var(--panel);
  padding: var(--space-m);
  font-size: var(--step--1);
  color: var(--ink-2);
  margin-bottom: var(--space-l);
}
.legal-body { max-width: var(--container-narrow); }
.legal-body h2 { font-size: var(--step-1); margin-top: var(--space-l); }
.legal-body p, .legal-body li { color: var(--ink-2); font-size: var(--step--1); }

/* ---------- 404 ---------- */
.page-404 .hero { min-height: 50vh; }

/* ---------- reveal on scroll ---------- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }
html.no-js [data-reveal] { opacity: 1; transform: none; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  [data-linegrid]:not(.is-resolved) line { transform: none; }
}

/* ---------- print ---------- */
@media print {
  .site-header, .site-footer, .nav, .btn, .skip-link { display: none; }
  body { background: #fff; color: #000; }
}


/* ==========================================================================
   Sagetor v7, warm, editorial, image-led
   ========================================================================== */

/* ---------- header: wordmark first on desktop, monogram on small screens ---------- */
.wordmark { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; color: var(--ink); }
.wordmark__text { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.2em; font-size: 1.0625rem; }
.logo-mark { flex: none; }
@media (min-width: 48em) { .wordmark .logo-mark { display: none; } .wordmark__text { font-size: 1.1875rem; letter-spacing: 0.22em; } }
@media (max-width: 47.99em) { .wordmark__text { font-size: 0.9375rem; letter-spacing: 0.18em; } }
.site-header { background: color-mix(in srgb, var(--paper) 90%, transparent); border-bottom: 1px solid transparent; }
.nav__link { font-family: var(--font-body); font-weight: 500; letter-spacing: 0; }
.nav__link--cta { background: var(--terracotta); border-color: var(--terracotta); color: #fff; border-radius: 2px; font-weight: 550; }
.nav__link--cta:hover, .nav__link--cta.is-active { background: var(--terracotta-deep); border-color: var(--terracotta-deep); color: #fff; }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font-body); font-weight: 550; font-size: 0.9375rem;
  letter-spacing: 0; padding: 1rem 1.7rem; border-radius: 2px;
  background: var(--terracotta); border: 1px solid var(--terracotta); color: #fff;
}
.btn:hover { background: var(--terracotta-deep); border-color: var(--terracotta-deep); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: color-mix(in srgb, var(--ink) 28%, transparent); }
.btn--ghost:hover { background: transparent; color: var(--ink); border-color: var(--ink); }

/* ---------- HERO: asymmetric split, photograph bleeds to the right edge ---------- */
.hero { background: var(--apricot); display: grid; grid-template-columns: 1fr; overflow: hidden; padding: 0; }
.hero__text {
  padding-inline: var(--gutter);
  padding-block: clamp(2.75rem, 2rem + 4vw, 5.5rem) clamp(3rem, 2.5rem + 4vw, 5.5rem);
  align-self: center; max-width: 40rem;
}
.hero__eyebrow { font-size: 0.9375rem; font-weight: 500; color: var(--terracotta-deep); margin-bottom: 1.1rem; }
.hero__title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(2.4rem, 1.5rem + 4.2vw, 4.25rem);
  line-height: 1.04; letter-spacing: -0.021em; margin: 0; color: var(--ink); max-width: 15ch;
}
.hero__title em { font-style: normal; }
.hero__lede {
  font-size: clamp(1.0625rem, 1rem + 0.32vw, 1.1875rem); line-height: 1.62;
  color: var(--ink-2); max-width: 46ch; margin: 1.5rem 0 2rem;
}
.hero__media { position: relative; min-height: 15rem; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 62em) {
  .hero { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); align-items: stretch; }
  .hero__text {
    padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
    padding-right: clamp(2.5rem, 4vw, 4.5rem);
    padding-block: clamp(4rem, 2rem + 6vw, 7rem);
    max-width: none;
  }
  .hero__media { min-height: min(76vh, 42rem); }
}
@media (max-width: 61.99em) {
  .hero__media { order: -1; aspect-ratio: 16 / 10; min-height: 0; }
  .hero__text { padding-block: clamp(2.25rem, 1.5rem + 4vw, 3.25rem) clamp(2.5rem, 2rem + 4vw, 3.5rem); }
}
@media (max-width: 30em) { .hero__media { aspect-ratio: 4 / 3; } }
.hero__media img { opacity: 0; transform: scale(1.03); animation: heroReveal 1s var(--ease) 0.1s forwards; }
@keyframes heroReveal { to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .hero__media img { opacity: 1; transform: none; animation: none; } }

/* ---------- proof strip ---------- */
.proof { background: var(--paper); border-bottom: 1px solid var(--stone); }
.proof__grid { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.75rem); padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
@media (min-width: 48em) { .proof__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .proof__grid { grid-template-columns: repeat(4, 1fr); } }
.proof__item { }
.proof__value {
  font-family: var(--font-serif); font-weight: 400; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
  line-height: 1; color: var(--terracotta-deep); margin: 0 0 0.15rem;
}
.proof__noun { font-weight: 600; font-size: 1rem; color: var(--ink); margin: 0 0 0.3rem; }
.proof__src { font-size: 0.875rem; line-height: 1.55; color: var(--muted); margin: 0; }

/* ---------- section furniture ---------- */
.section { padding-block: clamp(3.5rem, 2.5rem + 4.5vw, 6rem); }
.section--paper { background: var(--paper); }
.section--apricot { background: var(--apricot); }
.section-heading {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.875rem, 1.3rem + 2.2vw, 2.75rem);
  line-height: 1.1; letter-spacing: -0.016em; max-width: 20ch; color: var(--ink);
}
.section-lede { font-size: 1.0625rem; line-height: 1.65; color: var(--muted); max-width: 56ch; margin-top: 0.9rem; }
.kicker { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--terracotta-deep); margin-bottom: 0.6rem; display: block; }
.kicker::before { display: none; }

/* ---------- capability cards ---------- */
.caps { display: grid; gap: 1.15rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
@media (min-width: 46em) { .caps { grid-template-columns: repeat(2, 1fr); } }
.cap-card {
  display: block; text-decoration: none; color: inherit; border-radius: 4px;
  padding: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
  background: var(--peach); transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cap-card:nth-child(2) { background: var(--apricot); }
.cap-card:nth-child(3) { background: var(--soft); }
.cap-card:nth-child(4) { background: var(--apricot); }
.cap-card:hover { transform: translateY(-2px); }
.cap-card h3 { font-family: var(--font-body); font-weight: 620; font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem);
  letter-spacing: -0.012em; margin: 0 0 0.55rem; color: var(--ink); }
.cap-card p { font-size: 0.9875rem; line-height: 1.6; color: var(--ink-2); margin: 0 0 1rem; max-width: 44ch; }
.cap-card__go { font-weight: 550; font-size: 0.9375rem; color: var(--terracotta-deep); }
.cap-card__go::after { content: " \2192"; }
@media (prefers-reduced-motion: reduce) { .cap-card:hover { transform: none; } }

/* ---------- engagement shapes ---------- */
.shapes { display: grid; gap: 1.15rem; margin-top: clamp(2rem, 1.5rem + 2vw, 2.75rem); }
@media (min-width: 52em) { .shapes { grid-template-columns: repeat(3, 1fr); } }
.shape { background: var(--paper); border: 1px solid var(--stone); border-radius: 4px; padding: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.shape__name { font-family: var(--font-body); font-weight: 620; font-size: 1.1875rem; margin: 0 0 0.5rem; color: var(--ink); }
.shape__when { font-size: 0.8125rem; font-weight: 600; color: var(--terracotta-deep); margin: 0 0 0.7rem; }
.shape p { font-size: 0.9375rem; line-height: 1.62; color: var(--muted); margin: 0; }
.disclosure { font-size: 0.9375rem; color: var(--muted); margin-top: 1.6rem; max-width: 62ch; }

/* ---------- point of view ---------- */
.pov { display: grid; gap: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); margin-top: clamp(2rem, 1.5rem + 2vw, 2.75rem); }
@media (min-width: 52em) { .pov { grid-template-columns: repeat(3, 1fr); } }
.pov__item h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.3125rem, 1.15rem + 0.7vw, 1.5625rem);
  line-height: 1.22; letter-spacing: -0.012em; margin: 0 0 0.6rem; color: var(--ink); }
.pov__item p { font-size: 0.9875rem; line-height: 1.65; color: var(--muted); margin: 0; }

/* ---------- insights ---------- */
.posts { display: grid; gap: 1.15rem; margin-top: clamp(2rem, 1.5rem + 2vw, 2.75rem); }
@media (min-width: 52em) { .posts { grid-template-columns: repeat(3, 1fr); } }
.post {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--paper); border: 1px solid var(--stone); border-radius: 4px;
  padding: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem); transition: border-color var(--dur) var(--ease);
}
.post:hover { border-color: var(--terracotta); }
.post__meta { font-size: 0.8125rem; color: var(--muted); margin: 0 0 0.7rem; }
.post__title { font-family: var(--font-body); font-weight: 620; font-size: 1.1875rem; line-height: 1.3;
  letter-spacing: -0.012em; margin: 0 0 0.6rem; color: var(--ink); }
.post__sum { font-size: 0.9375rem; line-height: 1.6; color: var(--muted); margin: 0 0 1.1rem; }
.post__go { margin-top: auto; font-weight: 550; font-size: 0.9375rem; color: var(--terracotta-deep); }
.post__go::after { content: " \2192"; }

/* ---------- warm CTA (no dark panel) ---------- */
.cta-warm { background: var(--terracotta); color: #fff; }
.cta-warm .section-heading { color: #fff; max-width: 22ch; }
.cta-warm p { color: var(--paper); }
.cta-warm .btn { background: #fff; border-color: #fff; color: var(--terracotta-deep); }
.cta-warm .btn:hover { background: var(--paper); border-color: var(--paper); color: var(--terracotta-deep); }
.cta-warm .btn--ghost { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.cta-warm .btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.cta-warm :focus-visible { outline-color: #fff; }

/* ---------- compact footer ---------- */
.footer__watermark, .footer__rule, .linegrid { display: none !important; }
.site-footer { background: var(--ink); color: var(--paper); padding-block: clamp(2.75rem, 2rem + 3vw, 4rem); margin-top: 0; }
.footer__meta { display: none; }
.footer__top { display: grid; gap: 2rem; }
@media (min-width: 52em) { .footer__top { grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 3rem; } }
.footer__wordmark { font-weight: 600; letter-spacing: 0.2em; font-size: 1.0625rem; color: var(--paper); margin: 0 0 0.5rem; }
.footer__descriptor { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--bronze-light); font-size: 0.9375rem; margin: 0 0 0.75rem; }
.footer__statement { font-size: 0.9375rem; line-height: 1.6; color: var(--muted-dark); max-width: 34ch; }
.footer__email a { color: var(--paper); }
.footer__bottom { border-top: 1px solid rgba(253,247,241,.16); margin-top: 2.25rem; padding-top: 1.25rem; font-size: 0.8125rem; color: var(--muted-dark); }
.site-footer a:hover { color: var(--bronze-light); }

/* ---------- interior pages ---------- */
.page-header { padding-block: clamp(3rem, 2.5rem + 4vw, 5.5rem) clamp(2rem, 1.5rem + 2.5vw, 3.25rem); background: var(--apricot); }
.page-header::after { display: none; }
.page-header__title { font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(2.125rem, 1.5rem + 3vw, 3.5rem); line-height: 1.06; letter-spacing: -0.018em; max-width: 20ch; }
.page-header__lede { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.64; color: var(--ink-2); max-width: 56ch; }
.page-header + .section, .page-header + .section--hairline { padding-top: clamp(2.25rem, 1.75rem + 2vw, 3.5rem); }
.page-strip, .hero-meta-strip, .hero__banner-space, .hero__grid { display: none !important; }
.section--panel { background: var(--apricot); }
.section--ink { background: var(--ink); color: var(--paper); }
.section--ink.method { background: var(--apricot); color: var(--ink); }
.section--ink.method .section-heading, .section--ink.method .method__name { color: var(--ink); }
.section--ink.method .section-intro, .section--ink.method .method__desc { color: var(--muted); }
.section--ink.method .method__num { color: var(--terracotta-deep); font-family: var(--font-body); font-weight: 600; }
.section--ink.method .method__steps { border-top-color: var(--stone); }
.section--ink.method .method__step::before { background: var(--terracotta); }
.section--ink.method .kicker { color: var(--terracotta-deep); }
.section--ink.method a, .section--ink.method .link-arrow { color: var(--ink); }
.section--ink.method .link-arrow::after { color: var(--terracotta-deep); }
.section--ink.cta-band { background: var(--terracotta); color: #fff; }
.section--ink.cta-band .section-heading { color: #fff; }
.section--ink.cta-band .section-intro, .section--ink.cta-band p { color: var(--paper); }
.section--ink.cta-band .kicker { color: var(--paper); }
.section--ink.cta-band .btn { background: #fff; border-color: #fff; color: var(--terracotta-deep); }
.section--ink.cta-band .btn--ghost { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.section--ink.cta-band :focus-visible { outline-color: #fff; }
.thesis, .thesis--drop { font-family: var(--font-serif); font-style: normal; font-weight: 400;
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem); line-height: 1.42; letter-spacing: -0.012em;
  max-width: 34ch; color: var(--ink); }
.thesis--drop::first-letter { font-size: inherit; float: none; padding: 0; font-weight: inherit; color: inherit; line-height: inherit; }
.pull-quote, blockquote { border-left-color: var(--terracotta); }
a { text-decoration-color: color-mix(in srgb, var(--terracotta) 55%, transparent); }
a:hover { color: var(--terracotta-deep); }
::selection { background: var(--soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--terracotta-deep); outline-offset: 3px; }

/* form status clarity */
.form-note {
  background: var(--apricot); border-left: 3px solid var(--terracotta);
  padding: 0.9rem 1.1rem; border-radius: 2px; font-size: 0.9375rem; line-height: 1.6;
  color: var(--ink-2); margin-bottom: 1.5rem;
}

/* hero media fills the full band; picture is inline by default */
.hero__media { display: flex; }
.hero__media picture { display: block; width: 100%; height: 100%; }

/* capability cards: deliberate diagonal rhythm rather than arbitrary alternation */
.cap-card:nth-child(1), .cap-card:nth-child(4) { background: var(--peach); }
.cap-card:nth-child(2), .cap-card:nth-child(3) { background: var(--apricot); }
.cap-card:hover { background: var(--soft); }

/* laptop widths: give the hero text enough room to keep the two actions inline */
@media (min-width: 62em) and (max-width: 80em) {
  .hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .hero__text { padding-right: clamp(1.75rem, 3vw, 2.75rem); }
  .hero__title { font-size: clamp(2.4rem, 1.2rem + 3.6vw, 3.4rem); }
}

/* ==========================================================================
   v8, principal-led structure
   ========================================================================== */

/* the model: asymmetric editorial statement, no cards */
/* (removed: a .model layout block that collided with the engagement-card component) */

/* credibility list: rules, not boxes */
.creds { list-style: none; margin: clamp(1.75rem, 1.25rem + 2vw, 2.5rem) 0 0; padding: 0; max-width: 62rem; }
.creds li {
  padding: 1.05rem 0 1.05rem 2.25rem; border-top: 1px solid var(--stone);
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.0625rem); line-height: 1.6; color: var(--ink-2); position: relative;
}
.creds li:last-child { border-bottom: 1px solid var(--stone); }
.creds li::before {
  content: ""; position: absolute; left: 0; top: 1.6rem;
  width: 1.15rem; height: 2px; background: var(--terracotta);
}
.attribution {
  margin-top: 1.75rem; font-size: 0.9375rem; line-height: 1.65;
  color: var(--muted); max-width: 62ch; border-left: 2px solid var(--terracotta);
  padding-left: 1.1rem;
}

/* capability rows: numbered editorial list, deliberately not cards */
.caplist { list-style: none; margin: clamp(1.75rem, 1.25rem + 2vw, 2.5rem) 0 0; padding: 0; counter-reset: none; }
.caprow { border-top: 1px solid var(--stone); }
.caprow:last-child { border-bottom: 1px solid var(--stone); }
.caprow > a {
  display: grid; grid-template-columns: 3.25rem 1fr; gap: 0.5rem;
  padding: clamp(1.3rem, 1.1rem + 0.7vw, 1.85rem) 0; text-decoration: none; color: inherit;
  transition: background var(--dur) var(--ease);
}
.caprow > a:hover { background: color-mix(in srgb, var(--apricot) 55%, transparent); }
.caprow__n { font-size: 0.875rem; font-weight: 600; color: var(--terracotta); padding-top: 0.35rem; }
.caprow__name {
  display: block; font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); line-height: 1.15;
  letter-spacing: -0.014em; color: var(--ink); margin-bottom: 0.35rem;
}
.caprow__desc { display: block; font-size: 1rem; line-height: 1.62; color: var(--muted); max-width: 68ch; }
.caprow > a:hover .caprow__name { color: var(--terracotta-deep); }
@media (max-width: 34em) { .caprow > a { grid-template-columns: 2.25rem 1fr; } }
.themes {
  margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.25rem);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.65;
  color: var(--ink-2); max-width: 68ch;
}

/* principals: equal portraits, restrained */
.principals { display: grid; gap: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
@media (min-width: 52em) { .principals { grid-template-columns: repeat(2, 1fr); } }
.principal__photo {
  aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px;
  background: var(--peach); margin-bottom: 1.35rem; max-width: 22rem;
}
.principal__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.02);
  transition: filter 0.6s var(--ease), transform 0.6s var(--ease);
}
.principal:hover .principal__photo img { filter: grayscale(0); transform: scale(1.015); }
@media (prefers-reduced-motion: reduce) {
  .principal__photo img { transition: none; }
  .principal:hover .principal__photo img { transform: none; }
}
.principal__name {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); line-height: 1.15;
  letter-spacing: -0.014em; margin: 0 0 0.25rem; color: var(--ink);
}
.principal__role { font-size: 0.9375rem; font-weight: 600; color: var(--terracotta-deep); margin: 0 0 1rem; }
.principal__bio { font-size: 1rem; line-height: 1.68; color: var(--ink-2); margin: 0 0 0.9rem; max-width: 46ch; }
.principal__bio:last-child { color: var(--muted); margin-bottom: 0; }

/* form note: informative, deliberately not dominant */
.form-note {
  background: transparent; border-left: 2px solid var(--stone);
  padding: 0 0 0 0.9rem; border-radius: 0;
  font-size: 0.875rem; line-height: 1.6; color: var(--muted); margin-bottom: 1.75rem;
}
.form-note a { color: var(--terracotta-deep); }

/* placeholder portraits keep their colour; remove this class when real photographs land */
.principal__photo--placeholder img { filter: none; }
.principal:hover .principal__photo--placeholder img { transform: none; }

/* hero: give the headline room at large widths so it sits in four lines, not five */
.hero__title { max-width: 18ch; }
@media (min-width: 80em) { .hero { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); } }

/* ==========================================================================
   v9, depth, hierarchy, client pathways
   ========================================================================== */
:root { --brown: #43291D; --brown-text: #F0CDB2; --brown-accent: #E8A470; }

/* deep section: used once, for the lead capability, breaks the peach rhythm */
.section--deep { background: var(--brown); color: var(--paper); }
.section--deep .section-heading { color: var(--paper); }
.section--deep .section-lede, .section--deep p { color: var(--brown-text); }
.section--deep a { color: var(--paper); }
.section--deep :focus-visible { outline-color: var(--brown-accent); }
.section--deep .link-arrow { color: var(--paper); }
.section--deep .link-arrow::after { color: var(--brown-accent); }

.aigrid { display: grid; gap: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
@media (min-width: 46em) { .aigrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 74em) { .aigrid { grid-template-columns: repeat(4, 1fr); } }
.aigroup h3 {
  font-family: var(--font-body); font-weight: 620; font-size: 1.0625rem;
  color: var(--brown-accent); margin: 0 0 0.75rem; padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(240,205,178,.28);
}
.aigroup ul { list-style: none; margin: 0; padding: 0; }
.aigroup li { font-size: 0.9375rem; line-height: 1.5; color: var(--brown-text); padding: 0.4rem 0; }

/* client pathways: definition rows, deliberately not cards */
.paths { margin-top: clamp(2rem, 1.5rem + 2vw, 2.75rem); }
.path {
  display: grid; gap: 0.4rem 2.5rem; padding: 1.5rem 0; border-top: 1px solid var(--stone);
}
.path:last-child { border-bottom: 1px solid var(--stone); }
@media (min-width: 52em) { .path { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: baseline; } }
.path__who {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); line-height: 1.2;
  letter-spacing: -0.012em; color: var(--ink); margin: 0;
}
.path__what { font-size: 1rem; line-height: 1.62; color: var(--muted); margin: 0; max-width: 62ch; }
.path__what a { color: var(--terracotta-deep); text-decoration-color: color-mix(in srgb, var(--terracotta) 45%, transparent); }

/* portraits must never show an empty coloured box */
.principal__photo { background: var(--stone); }

/* ==========================================================================
   v10, capability pillars with visible depth
   ========================================================================== */
.hero__title { max-width: 14ch; }
@media (min-width: 62em) { .hero__title { font-size: clamp(3rem, 1.8rem + 4.4vw, 5rem); } }

.pillars { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
@media (min-width: 62em) {
  .pillars { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
}
.pillar { padding: 1.75rem 0; border-top: 1px solid var(--stone); }
.pillar__name {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); line-height: 1.15;
  letter-spacing: -0.014em; margin: 0 0 0.5rem; color: var(--ink);
}
.pillar__name a { text-decoration: none; color: inherit; }
.pillar__name a:hover { color: var(--terracotta-deep); }
.pillar__lead { font-size: 1rem; line-height: 1.6; color: var(--ink-2); margin: 0 0 0.85rem; max-width: 46ch; }
.pillar__svc { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; line-height: 1.75; color: var(--muted); }
.pillar__svc li { display: inline; }
.pillar__svc li:not(:last-child)::after { content: " · "; color: var(--soft); }
.pillar__more { display: inline-block; margin-top: 0.7rem; font-size: 0.875rem; font-weight: 550; color: var(--terracotta-deep); }
.pillar__more::after { content: " \2192"; }

/* intro paragraph under a section heading, larger than body */
.lead-para {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem); line-height: 1.42;
  letter-spacing: -0.01em; color: var(--ink); max-width: 40ch; margin: 0;
}
.intro-grid { display: grid; gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); }
@media (min-width: 62em) { .intro-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 2rem + 4vw, 5rem); } }
.intro-grid p:not(.lead-para) { font-size: 1.0625rem; line-height: 1.68; color: var(--muted); margin: 0; }

/* GP clinic call-out inside the AI band */
.clinic {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); padding-top: clamp(1.75rem, 1.5rem + 1.5vw, 2.5rem);
  border-top: 1px solid rgba(240,205,178,.28); display: grid; gap: 1.5rem;
}
@media (min-width: 62em) { .clinic { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(3rem, 2rem + 3vw, 4.5rem); } }
.clinic h3 {
  font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  line-height: 1.18; letter-spacing: -0.014em; color: var(--paper); margin: 0;
}
.clinic ul { list-style: none; margin: 0.9rem 0 0; padding: 0; }
.clinic li { font-size: 0.9375rem; line-height: 1.55; color: var(--brown-text); padding: 0.3rem 0 0.3rem 1.4rem; position: relative; }
.clinic li::before { content: ""; position: absolute; left: 0; top: 0.95rem; width: 0.8rem; height: 1px; background: var(--brown-accent); }
.clinic .boundary { font-size: 0.875rem; line-height: 1.6; color: rgba(240,205,178,.8); margin-top: 1.1rem; }

/* ==========================================================================
   v11, tighter homepage, real tablet behaviour
   ========================================================================== */

/* --- capability summaries: one line each, two then three columns --- */
.caps-summary { display: grid; gap: 0; margin-top: clamp(2rem, 1.5rem + 2vw, 2.75rem); border-top: 1px solid var(--stone); }
@media (min-width: 46em) { .caps-summary { grid-template-columns: repeat(2, 1fr); column-gap: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); } }
.capsum {
  display: block; text-decoration: none; color: inherit;
  padding: 1.1rem 0; border-bottom: 1px solid var(--stone);
}
.capsum__name {
  display: block; font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem); line-height: 1.2;
  letter-spacing: -0.013em; color: var(--ink); margin-bottom: 0.25rem;
}
.capsum:hover .capsum__name { color: var(--terracotta-deep); }
.capsum__desc { display: block; font-size: 0.9375rem; line-height: 1.55; color: var(--muted); max-width: 46ch; }
p.capsum__more { margin-top: 1.5rem; }

/* --- tighter variants --- */
.creds--tight { margin-top: 0; }
.creds--tight li { padding-block: 0.8rem; font-size: 1rem; }
.paths--tight .path { padding: 1.15rem 0; }
.paths--tight .path__what { font-size: 0.9375rem; line-height: 1.55; }
@media (min-width: 52em) { .paths--tight .path { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 0.3rem 2rem; } }
.posts--tight .post { padding: 1.25rem; }
.posts--tight .post__sum { display: none; }
.posts--tight .post__title { font-size: 1.0625rem; }
.principal__bio { margin-bottom: 0; }
.clinic p { margin-bottom: 0.9rem; }

/* --- TABLET: 768px, 834px, 1024px --- */
@media (min-width: 48em) and (max-width: 61.99em) {
  /* balanced side-by-side hero rather than a tall stack */
  .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; }
  .hero__media { order: 0; aspect-ratio: auto; min-height: 0; }
  .hero__text {
    padding-left: var(--gutter); padding-right: clamp(1.5rem, 2.5vw, 2.25rem);
    padding-block: clamp(2.5rem, 2rem + 3vw, 4rem); max-width: none; align-self: center;
  }
  .hero__title { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3rem); max-width: 13ch; }
  .hero__lede { font-size: 1rem; line-height: 1.58; margin: 1.1rem 0 1.5rem; }
  .btn { padding: 0.85rem 1.35rem; font-size: 0.875rem; }

  /* two-column capability layouts */
  .pillars { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 2.25rem; }
  .aigrid { grid-template-columns: repeat(2, 1fr); }

  /* portraits stay side by side */
  .principals { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .principal__photo { max-width: none; }
  .principal__bio { font-size: 0.9375rem; line-height: 1.6; }

  /* moderate spacing, avoid cramped nav and cards */
  .section { padding-block: clamp(3rem, 2.5rem + 3vw, 4.25rem); }
  .posts { grid-template-columns: repeat(3, 1fr); gap: 0.85rem; }
  .posts--tight .post { padding: 1.05rem; }
  .path { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 0.3rem 1.5rem; }
  .clinic { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 2rem; }
  .nav__list { gap: 1.1rem; }
  .nav__link { font-size: 0.875rem; }
}

/* 1024px specifically: keep two columns but let type breathe */
@media (min-width: 62em) and (max-width: 66em) {
  .hero__title { font-size: clamp(2.5rem, 1.5rem + 3.4vw, 3.1rem); }
  .hero__lede { font-size: 1rem; }
}

/* ==========================================================================
   v12, length discipline
   ========================================================================== */
.section { padding-block: clamp(2.75rem, 2rem + 3.2vw, 4.5rem); }

/* portraits sized for a page, not a gallery */
.principal__photo { max-width: 17rem; margin-bottom: 1.1rem; }
@media (max-width: 51.99em) {
  .principals { gap: 2rem; }
  .principal__photo { max-width: 11rem; }
  .principal__bio { font-size: 0.9375rem; line-height: 1.6; }
}

/* capability summaries: tighter rows */
.capsum { padding: 0.9rem 0; }
.capsum__desc { font-size: 0.9062rem; line-height: 1.5; }

/* pathways: tighter on small screens */
.paths--tight .path { padding: 0.95rem 0; }
.paths--tight .path__who { font-size: 1.125rem; }
.paths--tight .path__what { font-size: 0.9062rem; line-height: 1.5; }

/* AI band: two columns from small-tablet up, tighter copy */
@media (min-width: 30em) { .aigrid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; } }
.aigroup li { padding: 0.3rem 0; font-size: 0.9062rem; }
.clinic { gap: 1.25rem; }
.clinic p { font-size: 0.9375rem; line-height: 1.6; }

/* writing: a compact list on small screens, cards from tablet up */
@media (max-width: 51.99em) {
  .posts--tight { gap: 0; border-top: 1px solid var(--stone); }
  .posts--tight .post { border: none; border-bottom: 1px solid var(--stone); border-radius: 0; padding: 0.9rem 0; background: transparent; }
  .posts--tight .post__go { display: none; }
  .posts--tight .post__meta { margin-bottom: 0.25rem; font-size: 0.75rem; }
  .posts--tight .post__title { font-size: 1rem; margin: 0; }
}

/* footer: two columns of links on phones instead of one long stack */
@media (max-width: 51.99em) {
  .footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1.25rem; }
  .footer__statement { max-width: none; }
  .site-footer { padding-block: 2.25rem 1.5rem; }
}
.creds--tight li { padding-block: 0.7rem; font-size: 0.9688rem; }
.attribution { font-size: 0.875rem; }

/* restore the four-column AI grid on wide screens (the small-screen rule above must not win) */
@media (min-width: 74em) { .aigrid { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }

/* final length discipline */
.section { padding-block: clamp(2.5rem, 1.9rem + 2.8vw, 3.9rem); }
.principal__photo { max-width: 15rem; }
@media (min-width: 74em) { .caps-summary { grid-template-columns: repeat(3, 1fr); } }
.paths--tight .path { padding: 0.8rem 0; }
.posts--tight .post { padding: 1rem; }
.cta-warm .section-lede { margin-top: 0.6rem; }
.site-footer { padding-block: clamp(2.25rem, 1.8rem + 1.6vw, 3rem); }
.hero__text { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.section-heading { margin-bottom: 0.4rem; }
.aigrid { margin-top: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }
.clinic { margin-top: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); padding-top: clamp(1.4rem, 1.2rem + 1vw, 2rem); }

/* principals read as an editorial entry rather than a stacked card on wide screens */
@media (min-width: 62em) {
  .principal { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); column-gap: 1.5rem; align-items: start; }
  .principal__photo { grid-column: 1; grid-row: 1 / span 3; max-width: none; margin-bottom: 0; }
  .principal__name, .principal__role, .principal__bio { grid-column: 2; }
  .principal__bio { max-width: none; }
  .principals { gap: clamp(2rem, 1.5rem + 2vw, 3rem); }
}
@media (min-width: 48em) and (max-width: 61.99em) { .principal__photo { max-width: 12rem; } }

/* last of the vertical slack */
.creds--tight li { padding-block: 0.6rem; }
.aigroup li { padding: 0.25rem 0; }
.clinic p { margin-bottom: 0.7rem; }
.section-lede { margin-top: 0.5rem; }
.intro-grid { align-items: start; }
p.capsum__more { margin-top: 1.1rem; }

/* writing: a clean three-column index rather than cards */
.posts--tight { border-top: 1px solid var(--stone); gap: 0; }
@media (min-width: 52em) { .posts--tight { grid-template-columns: repeat(3, 1fr); column-gap: clamp(1.5rem, 1rem + 2vw, 2.75rem); } }
.posts--tight .post {
  background: transparent; border: none; border-bottom: 1px solid var(--stone);
  border-radius: 0; padding: 0.9rem 0;
}
.posts--tight .post:hover .post__title { color: var(--terracotta-deep); }
.posts--tight .post__sum, .posts--tight .post__go { display: none; }
.posts--tight .post__meta { font-size: 0.75rem; margin-bottom: 0.2rem; }
.posts--tight .post__title { font-size: 1rem; line-height: 1.35; margin: 0; }
.section { padding-block: clamp(2.4rem, 1.8rem + 2.5vw, 3.6rem); }
@media (min-width: 62em) { .hero__media { min-height: min(68vh, 38rem); } }
.site-footer { padding-block: clamp(2rem, 1.6rem + 1.4vw, 2.6rem); }
.footer__bottom { margin-top: 1.5rem; padding-top: 1rem; }

/* v13: the operating model, stated plainly under the hero.
   Breadth invites scepticism, so how the work is staffed is answered before
   the six capabilities are shown. Numbered so it reads as a single position. */
.opmodel {
  display: grid; gap: 0; margin: clamp(1.75rem, 1.25rem + 2vw, 2.75rem) 0 0;
  counter-reset: opmodel; border-top: 1px solid var(--stone);
}
@media (min-width: 56em) { .opmodel { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 1rem + 3vw, 4rem); } }
.opmodel > div {
  counter-increment: opmodel; border-bottom: 1px solid var(--stone);
  padding: 1rem 0 1rem 2.25rem; position: relative;
}
.opmodel > div::before {
  content: counter(opmodel); position: absolute; left: 0; top: 1.05rem;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--terracotta); font-variant-numeric: tabular-nums;
}
.opmodel dt { font-weight: 600; color: var(--ink); line-height: 1.4; margin: 0 0 0.3rem; }
.opmodel dd { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--muted); max-width: 48ch; }

/* v13: the proof table.
   Four columns a buyer actually asks about. Scrolls inside its own container
   on narrow screens so the page body never scrolls sideways; below 46em it
   restacks into labelled blocks, because a seven-row table is unreadable at
   390px however it scrolls. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.tablewrap { margin-top: clamp(1.5rem, 1rem + 2vw, 2.25rem); }
.proof { width: 100%; border-collapse: collapse; text-align: left; }
.proof th, .proof td { vertical-align: top; }
.proof thead th {
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--terracotta-deep);
  padding: 0 1.25rem 0.7rem 0; border-bottom: 1px solid var(--terracotta);
}
.proof tbody th, .proof tbody td {
  font-size: 0.9375rem; line-height: 1.55; padding: 1.1rem 1.25rem 1.1rem 0;
  border-bottom: 1px solid var(--stone); color: var(--muted); font-weight: 400;
}
.proof tbody th { color: var(--ink); font-weight: 600; }
@media (min-width: 46em) {
  .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .proof { min-width: 46rem; }
  .proof tbody th { width: 24%; }
}
/* narrow screens: each row becomes its own labelled block */
@media (max-width: 45.99em) {
  .proof, .proof tbody, .proof tr, .proof th, .proof td { display: block; }
  .proof thead { display: none; }
  .proof tr { border-bottom: 1px solid var(--terracotta); padding-bottom: 1.1rem; margin-bottom: 1.1rem; }
  .proof tr:last-child { border-bottom: none; margin-bottom: 0; }
  .proof tbody th, .proof tbody td { border-bottom: none; padding: 0 0 0.55rem; }
  .proof tbody th { font-size: 1rem; padding-bottom: 0.7rem; }
  .proof tbody td::before {
    content: attr(data-label); display: block;
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--terracotta-deep); margin-bottom: 0.15rem;
  }
}

/* v13: mobile height.
   A first-time visitor on a phone should reach the contact CTA without a long
   scroll. These rules only apply below 46em; the desktop layout is unchanged. */
@media (max-width: 45.99em) {
  /* the two principals read as a pair, not a stack: portraits side by side */
  .principals { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
  .principal__photo { max-width: none; margin-bottom: 0.7rem; }
  .principal__name { font-size: 1.0625rem; }
  .principal__role { font-size: 0.75rem; }
  .principal__bio { font-size: 0.875rem; line-height: 1.55; }

  /* the operating model and capability list carry their own rhythm; tighten it */
  .opmodel > div { padding-block: 0.8rem; }
  .opmodel dd { font-size: 0.9rem; }
  .capsum { padding-block: 0.8rem; }

  /* the footer is navigation, not a page: two columns and less air */
  .footer__cols { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1rem; }
  .site-footer { padding-block: 2.2rem; }
  .footer__statement { display: none; }   /* the practice is described on every page above it */
}

/* v13: desktop rhythm.
   The homepage had generous band padding sized for a longer page. With four
   content bands instead of six, the same padding reads as drift rather than
   air, so the upper bound comes down. Small screens keep their existing value. */
@media (min-width: 62em) {
  .section { padding-block: clamp(2.4rem, 1.6rem + 2vw, 3rem); }
  .hero__media { min-height: min(62vh, 34rem); }
  .page-home .cta-warm { padding-block: 2.6rem; }
}
@media (min-width: 62em) {
  .opmodel { margin-top: 1.75rem; }
  .caps-summary { margin-top: 1.75rem; }
  .site-footer { padding-block: clamp(2.2rem, 1.8rem + 1vw, 2.8rem); }
  .page-home .principals { margin-top: 1.75rem; }
}

/* the AI band now uses the two-column intro grid, whose paragraph colour is
   tuned for light backgrounds. On the dark band it must win back the light one. */
.section--deep .intro-grid p:not(.lead-para) { color: var(--brown-text); }

/* v13: WCAG 2.2 AA corrections found by measuring every rendered text node.
   Two systematic failures, both on brand surfaces:
   (a) body copy on the terracotta CTA band sat at 4.11:1 against a 4.5:1
       requirement. The paper tone clears it at 4.62:1 and stays on-brand.
   (b) the capability index numerals sat at 1.34:1 against a 3:1 requirement
       for large text. A warm taupe keeps them quiet at 4.24:1. */
.cta-warm p { color: var(--paper); }
.cta-band .section-lede, .cta-warm .section-lede, .cta-warm .kicker, .cta-band .kicker { color: var(--paper); }
.cta-warm .section-intro, .cta-band .section-intro { color: var(--paper); }
.cap-item .index-num { color: #8A7261; }
.hero__brand { color: var(--terracotta-deep); }

/* v14: multi-paragraph principal profiles.
   A later rule had zeroed the bio paragraph margin, which was harmless while
   each profile was a single paragraph. With three paragraphs the text ran
   together, so consecutive bios get their spacing back. The grid also
   distributed the leftover height of the shorter profile between its rows,
   which pushed the second profile's role and text down the column. */
.principal__bio + .principal__bio { margin-top: 0.9rem; }
@media (min-width: 62em) { .principal { align-content: start; } }

/* ===========================================================================
   v15: editorial rhythm.
   The site had become dense because each section carried several ideas in a
   small vertical space. The fix is spacing and hierarchy, not more copy:
   a consistent lead block at the top of every section, more room beneath
   headings, wider gaps between cards, and body text on phones that is
   comfortable rather than compressed.
   =========================================================================== */

/* A section opens with a kicker, a heading and at most one line of lede.
   The measure is deliberately narrow so the eye stops before the detail. */
.section-lead { max-width: 46rem; }
.section-lead .kicker { margin-bottom: 0.75rem; }
.section-lead .section-heading { margin-bottom: 0.9rem; }
.section-lead .section-lede { margin-top: 0; max-width: 44ch; }
.section-lead + * { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.section-body { max-width: 62ch; margin-top: clamp(1.5rem, 1rem + 2vw, 2.25rem); }
p.section-more { margin-top: clamp(1.5rem, 1rem + 2vw, 2.25rem); }

/* Two columns of prose keep line length short without shrinking the type. */
.prose-2col { display: grid; gap: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
@media (min-width: 56em) {
  .prose-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
  .prose-2col > .boundary { grid-column: 1 / -1; }
}
.prose-2col p { margin: 0; max-width: 60ch; }
.section--deep .prose-2col p { color: var(--brown-text); }

/* Headings need room to breathe before the text that explains them. */
.section-heading { margin-bottom: 0.75rem; }
.section-heading--sub { margin-bottom: 0.55rem; }

/* Cards: more air inside and between them. The capability list was the
   tightest thing on the homepage, and its description type was the smallest. */
.capsum { padding-block: 1.35rem; }
.capsum__name { margin-bottom: 0.45rem; }
.capsum__desc { font-size: 1rem; line-height: 1.6; }
.caps-summary { row-gap: 0; }
@media (min-width: 46em) { .caps-summary { column-gap: clamp(2.5rem, 2rem + 3vw, 4.5rem); } }

/* The operating model is the most important block on the page. Give it
   weight and space rather than compressing it into a tidy grid. */
.opmodel > div { padding: 1.35rem 0 1.35rem 2.5rem; }
.opmodel dt { font-size: 1.0625rem; margin-bottom: 0.45rem; }
.opmodel dd { font-size: 1rem; line-height: 1.65; max-width: 52ch; }
@media (min-width: 56em) { .opmodel { column-gap: clamp(2.5rem, 2rem + 3vw, 4.5rem); } }

/* Credentials list: one idea per line, with room around each. */
.creds--tight li { padding-block: 0.95rem; font-size: 1.0625rem; }
.attribution { margin-top: 1.5rem; }

/* Phones: readable body text, and space between blocks rather than inside them. */
@media (max-width: 45.99em) {
  .opmodel > div { padding: 1.15rem 0 1.15rem 2.25rem; }
  .opmodel dd { font-size: 0.9375rem; line-height: 1.65; }
  .capsum { padding-block: 1.15rem; }
  .capsum__desc { font-size: 0.9375rem; line-height: 1.6; }
  .creds--tight li { padding-block: 0.85rem; font-size: 1rem; }
  .principal__bio { font-size: 0.9375rem; line-height: 1.65; }
  .principals { gap: 1.5rem; }
  .section-lead + * { margin-top: 1.75rem; }
  .section { padding-block: 2.75rem; }
}

/* v16: narrative blocks.
   Two short passages on About tell the practice's origin and the meaning of
   its name. They read as prose rather than as a grid of claims, so they get a
   single narrow column and generous space between paragraphs. */
.narrative { max-width: 60ch; }
.narrative p { margin: 0 0 1.25rem; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); }
.narrative p:last-child { margin-bottom: 0; }
@media (max-width: 45.99em) { .narrative p { font-size: 1rem; line-height: 1.68; margin-bottom: 1.1rem; } }