/* Inter, self-hosted. The body stack named Inter for months without ever
   loading it, so every visitor without Inter installed locally silently got
   system sans instead — different metrics on Mac vs Windows vs Android.
   One variable file covers the whole 400-900 range the site uses (400, 600,
   700, 800, 900) instead of five static cuts. font-display: swap so text is
   readable immediately and reflows once the file lands. Latin loads first at
   47K; latin-ext (83K) only downloads if the page actually uses a character
   in its range. SIL Open Font License — see assets/fonts/OFL-inter.txt. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/fonts/inter-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Bodoni Moda, self-hosted — direction C's display face, chosen 2026-07-31.
   This replaces a stack of "Iowan Old Style", Palatino Linotype, Palatino,
   which are all effectively Apple-only: every Windows and Android visitor
   was reading the Georgia fallback instead, a noticeably different colour
   and rhythm on the type that carries the whole design. Now everyone gets
   the same face.

   Both cuts are needed, not just the roman: the two-tone headline device
   sets its second clause in italic, so without the italic file the browser
   would synthesise a slanted roman and the accent would look wrong.
   Variable across 400-900, latin subset only (the site has no latin-ext
   headline copy), font-display: swap so headlines paint immediately in the
   fallback and reflow once the file lands.
   SIL Open Font License — see assets/fonts/OFL-bodoni-moda.txt. */
@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/fonts/bodoni-moda-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Bodoni Moda";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/fonts/bodoni-moda-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --ink: #151718;
  --ink-2: #1a1e1c;
  --ink-soft: #363d3f;
  --paper: #f7f4ee;
  --paper-warm: #ebe4d7;
  --surface: #ffffff;
  --line: #d4cabd;
  --line-dark: rgba(247, 244, 238, 0.14);
  --forest: #1d342b;
  --forest-deep: #16281f;
  --forest-2: #2f5545;
  /* One brass, three surface-specific cuts. Same hue (33.3deg) and saturation
     (0.462) throughout — only lightness moves, so the accent stays one colour
     to the eye while clearing WCAG AA on whatever it sits on:
       --brass       fills and large display type only (button backgrounds).
                     As small text it fails everywhere: 2.94:1 on paper,
                     4.12:1 on forest.
       --brass-soft  accent TEXT on dark surfaces. 5.57:1 on forest,
                     6.48:1 on forest-deep, 7.53:1 on ink.
       --brass-ink   accent TEXT on light surfaces. 5.30:1 on paper,
                     4.60:1 on paper-warm, 5.82:1 on white.
     Same split for the greys: --fog-dim is a dark-surface grey (4.84:1 on ink)
     and fails on paper at 3.39:1, so --fog-ink covers light surfaces. */
  --brass: #b98544;
  --brass-soft: #cf9f63;
  --brass-ink: #835e30;
  --clay: #9a5841;
  --fog: #a9b3a8;
  --fog-dim: #7d8780;
  --fog-ink: #5f6a63;
  --white: #fffaf2;
  --shadow: 0 18px 40px rgba(21, 23, 24, 0.12);
  --radius: 8px;
  --max: 1160px;
  /* Georgia stays as the swap-time fallback only — it is the one serif
     present on every platform, so nothing shifts family mid-load. */
  --serif: "Bodoni Moda", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}

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

a {
  color: inherit;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 20;
  background: var(--white);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: var(--radius);
  transition: top 160ms ease;
}

.skip-link:focus {
  top: 16px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px clamp(18px, 5vw, 48px);
  background: rgba(247, 244, 238, 0.92);
  border-bottom: 1px solid rgba(21, 23, 24, 0.1);
  backdrop-filter: blur(16px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--white);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.brand-logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

/* 1.8vw rather than the original 2.6vw. It was first tightened because the nav
   had grown to eight flat items; grouping the offers under "What we do" has
   since taken it back to six, so that reason is gone — but the tighter value
   still earns its place. Measured with the six-item nav: 1.8vw holds one line
   down to 768px (iPad portrait), 2.6vw wraps at 768 and holds only to 820.
   The 30px maximum is untouched, so wide viewports are unaffected either way,
   and the visual difference is 4–7px at laptop widths. */
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.8vw, 30px);
  color: var(--ink-soft);
  font-size: 0.94rem;
}

.nav-links a {
  text-decoration: none;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--forest);
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* "What we do" disclosure. A native <details> rather than a scripted menu, so
   the offer list still opens if nav-menu.js is blocked or JS is off — that
   file only adds Escape, outside-click, and close-the-others. The offer set
   is the one that keeps growing, so grouping it (rather than About/FAQ/
   Learning Log, a fixed set of three) is what keeps the nav from refilling
   every time a page ships. */
.nav-menu {
  position: relative;
}

.nav-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  white-space: nowrap;
  list-style: none;
}

/* Both are needed: ::marker for standards-compliant engines, the -webkit
   pseudo-element for Safari, which still ignores list-style here. */
.nav-menu > summary::marker {
  content: "";
}

.nav-menu > summary::-webkit-details-marker {
  display: none;
}

.nav-menu > summary:hover,
.nav-menu > summary:focus-visible {
  color: var(--forest);
}

/* The section the current page belongs to, marked the same way an active
   top-level link is. */
.nav-menu-current > summary {
  color: var(--forest);
  text-decoration: underline;
  text-underline-offset: 5px;
}

.nav-caret {
  width: 6px;
  height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms ease;
}

.nav-menu[open] > summary .nav-caret {
  transform: translateY(1px) rotate(-135deg);
}

/* Setting `display` on a direct child of <details> overrides the UA rule that
   hides closed content, so this panel rendered permanently open over the hero
   until the :not([open]) rule below was added. Do not remove it: the panel
   needs `display: grid` when open, and that is exactly what breaks the
   native hiding. */
.nav-menu:not([open]) > .nav-panel {
  display: none;
}

.nav-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: grid;
  gap: 2px;
  min-width: 210px;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.nav-panel a {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  white-space: nowrap;
  text-decoration: none;
}

.nav-panel a:hover,
.nav-panel a:focus-visible {
  background: var(--paper-warm);
  color: var(--forest);
  text-decoration: none;
}

.nav-panel a[aria-current="page"] {
  color: var(--forest);
  font-weight: 700;
}

/* Once the nav wraps, a centred panel can hang off the viewport edge. Pin it
   to the left of its summary instead, where there is always room. */
@media (max-width: 1100px) {
  .nav-panel {
    left: 0;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-caret {
    transition: none;
  }
}

.hero {
  position: relative;
  min-height: 82vh;
  display: grid;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(1100px 620px at 68% 30%, var(--forest-deep) 0%, transparent 62%),
    radial-gradient(700px 480px at 18% 82%, #1b2420 0%, transparent 60%),
    #141716;
}

.hero-constellation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 30px;
  padding: 9px 16px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: rgba(20, 23, 22, 0.5);
  color: var(--fog);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.pill-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 4px rgba(185, 133, 68, 0.18);
}

.g {
  font-style: italic;
  font-weight: 400;
  color: var(--clay);
}

.g-block {
  display: block;
  font-size: 0.72em;
  line-height: 1.15;
  margin-top: 8px;
}

h1 .g,
.section-intro .g,
.section-contrast .g,
.section-contact-mega .g {
  color: var(--brass-soft);
}

h1 .g {
  color: var(--brass);
  opacity: 0.85;
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(var(--max), calc(100% - 36px));
  margin: 0 auto;
  padding: 72px 0 88px;
  color: var(--white);
}

.eyebrow,
.section-kicker {
  margin: 0 0 14px;
  text-transform: uppercase;
}

/* The hero label. Every .eyebrow on the site sits inside a dark hero
   (.page-hero, .bs-hero, .pl-hero), so it takes the dark-surface cut.
   It was --brass until 2026-07-30: 4.12:1 on forest, failing AA on all
   eleven pages that use it. */
.eyebrow {
  color: var(--brass-soft);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

/* Numbered section markers (2026-07 design refresh): the number is mono and
   brass, the label carries the section's own colour, the rule trails off. */
.section-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  color: var(--clay);
}

/* Light surfaces are the default here — most sections are paper.

   flex:none because the default flex-shrink:1 let the number box narrow below
   its own content at phone widths, breaking "04" onto two lines as "0" / "4"
   wherever the label was long enough to compete for space (homepage 02/03,
   brand-systems 05/06). The digits are two characters; they never wrap. */
.kicker-no {
  color: var(--brass-ink);
  flex: none;
  white-space: nowrap;
}

.kicker-rule {
  flex: 0 1 110px;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
}

.section-intro .section-kicker,
.section-contrast .section-kicker,
.section-contact-mega .section-kicker {
  color: var(--fog);
}

/* ...and the dark bands flip the number to the dark-surface cut. */
.section-intro .kicker-no,
.section-contrast .kicker-no,
.section-contact-mega .kicker-no {
  color: var(--brass-soft);
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.02;
  letter-spacing: 0;
}

h1 {
  max-width: 860px;
  font-family: var(--serif);
  font-size: 4.35rem;
  font-weight: 700;
}

h2 {
  font-family: var(--serif);
  font-size: 2.45rem;
  max-width: 780px;
}

h3 {
  font-size: 1.08rem;
}

.hero-copy {
  max-width: 660px;
  margin: 22px 0 0;
  color: rgba(255, 250, 242, 0.86);
  font-size: 1.1rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 800;
  text-decoration: none;
}

.button-primary {
  background: var(--brass);
  color: #17120c;
}

.button-primary:hover,
.button-primary:focus-visible {
  background: #d09a55;
}

.button-secondary {
  border-color: rgba(255, 250, 242, 0.45);
  color: var(--white);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  border-color: var(--white);
  background: rgba(255, 250, 242, 0.08);
}

.section {
  padding: clamp(58px, 8vw, 104px) clamp(18px, 5vw, 48px);
}

.section-inner {
  width: min(var(--max), 100%);
  margin: 0 auto;
}

.section-intro {
  padding-top: 38px;
  padding-bottom: 38px;
  background: var(--forest);
  color: var(--white);
}

.intro-grid,
.systems-layout,
.contact-layout,
.process-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 6vw, 72px);
  align-items: start;
}

.intro-grid p:last-child,
.section-heading p,
.contact-layout p {
  margin-top: 0;
  color: var(--ink-soft);
  font-size: 1.02rem;
}

.section-intro .intro-grid p,
.section-contrast .section-heading p {
  color: rgba(255, 250, 242, 0.78);
}

.section-heading {
  margin-bottom: 32px;
}

.section-heading h2,
.intro-grid h2 {
  margin-bottom: 16px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.service-card {
  min-height: 245px;
  padding: 26px 24px 30px;
  background: transparent;
  border: 1px solid rgba(21, 23, 24, 0.16);
  border-radius: var(--radius);
  transition: background 0.25s ease, border-color 0.25s ease;
}

/* The hover affordance belongs to .service-card-link, not .service-card. Four
   of the seven services have no page yet, and giving every card a hover state
   made all seven look clickable when only three go anywhere. */
.service-card-link {
  position: relative;
}

.service-card-link:hover,
.service-card-link:focus-within {
  background: #fffdf8;
  border-color: rgba(154, 88, 65, 0.45);
}

.service-card-link h3 a {
  text-decoration: none;
}

/* Stretched link: the whole card is the click target, but the accessible name
   is just the heading. Wrapping the card in an <a> instead would make the link
   text the heading plus the entire description paragraph. */
.service-card-link h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.service-card-link h3 a:focus-visible {
  outline: none;
}

.service-card-link h3 a:focus-visible::after {
  outline: 2px solid var(--brass-ink);
  outline-offset: 3px;
}

/* pointer-events:none because this sits on top of the stretched ::after and
   was swallowing clicks — the one spot on the card that advertises "clickable"
   was the only spot that was not. It is decorative and aria-hidden, so it has
   no reason to be a hit target. */
.service-arrow {
  position: absolute;
  right: 22px;
  bottom: 22px;
  color: var(--brass-ink);
  pointer-events: none;
  transition: transform 0.25s ease;
}

.service-card-link:hover .service-arrow,
.service-card-link:focus-within .service-arrow {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .service-arrow {
    transition: none;
  }
}

.service-card h3 {
  font-family: var(--serif);
  font-size: 1.22rem;
  line-height: 1.25;
}

.service-number {
  display: inline-block;
  margin-bottom: 30px;
  color: var(--clay);
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
}

.service-card p,
.process-item p,
.system-steps p,
.contact-note {
  margin: 12px 0 0;
  color: var(--ink-soft);
}

.section-contrast {
  background: var(--ink);
  color: var(--white);
}

.system-steps {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.system-steps li {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 18px 0;
  border-top: 1px solid rgba(21, 23, 24, 0.14);
}

.system-steps li:last-child {
  border-bottom: 1px solid rgba(21, 23, 24, 0.14);
}

.section-contrast .system-steps li {
  border-top-color: rgba(255, 250, 242, 0.18);
}

.section-contrast .system-steps li:last-child {
  border-bottom-color: rgba(255, 250, 242, 0.18);
}

/* The step list runs on paper (ai-business-brain) and on the dark contrast
   band (index), so the label takes whichever cut its surface calls for. */
.system-steps span {
  color: var(--brass-ink);
  font-weight: 900;
}

.section-intro .system-steps span,
.section-contrast .system-steps span,
.section-contact-mega .system-steps span {
  color: var(--brass-soft);
}

.system-steps p {
  margin: 0;
  color: var(--ink-soft);
}

.section-contrast .system-steps p {
  color: rgba(255, 250, 242, 0.76);
}

.process-list {
  display: grid;
  gap: 22px;
}

.process-item {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.section-contact {
  background: var(--paper-warm);
}

.contact-panel {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.contact-label {
  margin: 0 0 10px;
  color: var(--clay);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
}

.contact-panel a {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--forest);
}

/* Homepage mega contact (2026-07 design refresh) — dark bookend that mirrors
   the hero. Subpages keep the original .section-contact treatment. */
.section-contact-mega {
  background:
    radial-gradient(900px 520px at 78% 12%, var(--forest-deep) 0%, transparent 60%),
    #141716;
  color: var(--white);
  padding-top: clamp(88px, 10vw, 130px);
}

.section-contact-mega .contact-layout {
  align-items: end;
}

.section-contact-mega .contact-layout p {
  color: var(--fog);
}

.contact-mega-title {
  max-width: none;
  font-size: clamp(2.5rem, 4.5vw, 3.6rem);
  line-height: 1;
  margin-bottom: 16px;
}

.start-cta {
  display: flex;
  align-items: center;
  gap: 20px;
  text-decoration: none;
}

.start-ring {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--brass);
  color: #17120c;
  display: grid;
  place-items: center;
  font-size: 24px;
  transition: transform 0.3s ease, background 0.3s ease;
}

.start-cta:hover .start-ring,
.start-cta:focus-visible .start-ring {
  transform: translate(3px, -3px);
  background: var(--brass-soft);
}

.start-label {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--white);
}

.start-sub {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fog-dim);
}

.contact-mail {
  display: inline-block;
  margin-top: 28px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(207, 159, 99, 0.4);
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--brass-soft);
  text-decoration: none;
}

.contact-mail:hover,
.contact-mail:focus-visible {
  color: var(--white);
}

.section-contact-mega .contact-note {
  color: var(--fog-dim);
  font-size: 0.85rem;
}

.trust-line {
  margin: 16px 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.hero .trust-line,
.page-hero .trust-line {
  color: rgba(255, 250, 242, 0.6);
}

.hero .trust-line {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site-footer {
  padding: 24px clamp(18px, 5vw, 48px);
  background: #0f1312;
  color: rgba(255, 250, 242, 0.78);
  font-size: 0.9rem;
}

/* Homepage column footer (2026-07 design refresh) */
.site-footer-columns {
  padding-top: 44px;
  padding-bottom: 44px;
  border-top: 1px solid var(--line-dark);
}

.footer-grid {
  width: min(var(--max), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 40px;
  align-items: start;
}

.footer-grid p {
  width: auto;
  margin: 0;
}

.footer-id {
  display: grid;
  gap: 10px;
  justify-items: start;
}

.footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.footer-col-title {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fog-dim);
}

.footer-cols ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.footer-cols a {
  color: rgba(255, 250, 242, 0.72);
  text-decoration: none;
}

.footer-cols a:hover,
.footer-cols a:focus-visible {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-footer p {
  width: min(var(--max), 100%);
  margin: 0 auto;
}

.site-footer .footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto 10px;
}

.footer-brand img {
  display: block;
  border-radius: 6px;
}

.footer-tagline {
  font-family: var(--serif);
  font-style: italic;
  /* Bodoni Moda is a high-contrast didone: its thin strokes are hairlines,
     and at 14.4px in italic on the dark footer they nearly disappear. The
     old Iowan/Palatino stack was low-contrast and did not need this. 560
     thickens the thins without making it read bold — it is the smallest
     serif on the site, so it is the only place that needs the help. */
  font-weight: 560;
  font-size: 1.02rem;
  color: rgba(255, 250, 242, 0.92);
}

@media (max-width: 920px) {
  h1 {
    font-size: 3.15rem;
  }

  h2 {
    font-size: 2.05rem;
  }

  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .intro-grid,
  .systems-layout,
  .contact-layout,
  .process-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .site-header {
    position: relative;
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .nav-links {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 20px;
    row-gap: 8px;
    font-size: 0.88rem;
  }

  .hero {
    min-height: 74vh;
  }

  .hero-pill {
    letter-spacing: 0.12em;
    max-width: 100%;
  }

  .hero-content {
    width: calc(100vw - 36px);
    max-width: calc(100vw - 36px);
    padding: 56px 0 68px;
  }

  .eyebrow,
  .section-kicker {
    letter-spacing: 0.08em;
  }

  .eyebrow {
    max-width: 32ch;
  }

  h1 {
    max-width: 10em;
    font-size: 1.78rem;
  }

  h2 {
    max-width: 11.5em;
    font-size: 1.46rem;
  }

  .hero-copy {
    max-width: 32ch;
    font-size: 1rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: min(100%, 280px);
  }

  .button {
    width: 100%;
  }

  .service-grid {
    grid-template-columns: 1fr;
  }

  .system-steps li {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .contact-panel a {
    font-size: 1rem;
  }

  .contact-mega-title {
    font-size: 2.1rem;
  }

  .start-ring {
    width: 60px;
    height: 60px;
    font-size: 20px;
  }

  .start-label {
    font-size: 1.15rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ---- Subpage components (added 2026-07-02, core-5 expansion) ---- */

.page-hero {
  background: var(--forest, #1d342b);
  color: var(--paper, #f7f4ee);
  padding: 96px 24px 64px;
}

.page-hero .section-inner {
  display: grid;
  gap: 16px;
  max-width: 760px;
}

.page-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.1;
  margin: 0;
}

.page-hero p {
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 60ch;
  margin: 0;
}

.prose {
  max-width: 68ch;
  display: grid;
  gap: 16px;
}

.prose h2 {
  margin: 8px 0 0;
}

.check-list,
.value-list {
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: 8px;
  line-height: 1.6;
}

.faq-list {
  display: grid;
  gap: 20px;
  max-width: 760px;
}

/* --paper-warm, not --warm-paper. The name was transposed, so the variable
   never resolved and the hardcoded fallback did all the work. Invisible while
   that fallback happened to equal the token; the Admiralty swap exposed it —
   every other surface went cool and these cards stayed the old warm cream. */
.faq-item {
  background: var(--paper-warm);
  border-radius: 8px;
  padding: 24px;
}

.faq-item h2 {
  font-size: 1.15rem;
  margin: 0 0 8px;
}

.faq-item p {
  margin: 0;
  line-height: 1.6;
}

.nav-links a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---- Learning Log components (added 2026-07-10) ---- */

.prose h3 {
  margin: 4px 0 0;
  font-size: 1.2rem;
}

.prose blockquote {
  margin: 0;
  padding: 16px 20px;
  background: var(--paper-warm);
  border-left: 3px solid var(--brass);
  border-radius: 0 var(--radius) var(--radius) 0;
  line-height: 1.6;
}

.prose pre {
  background: var(--forest);
  color: var(--paper);
  padding: 20px;
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: 0.88rem;
  line-height: 1.7;
  margin: 0;
}

.prose code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
}

.prose :not(pre) > code {
  background: var(--paper-warm);
  padding: 1px 6px;
  border-radius: 4px;
}

.prose .table-scroll {
  overflow-x: auto;
}

.prose table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
}

.prose th,
.prose td {
  border: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.prose th {
  background: var(--paper-warm);
}

.article-meta {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 0;
}

.page-hero .article-meta {
  color: var(--paper-warm);
}

.log-list {
  display: grid;
  gap: 20px;
  max-width: 760px;
}

.log-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  display: grid;
  gap: 8px;
}

.log-card h2 {
  margin: 0;
  font-size: 1.35rem;
}

.log-card p {
  margin: 0;
  line-height: 1.6;
}

.credit-block {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* Legal pages + SMS consent form (A2P compliance pass, 2026-07-11) */

.footer-legal {
  margin-top: 8px;
  font-size: 0.85rem;
  color: rgba(255, 250, 242, 0.62);
}

.footer-legal a {
  color: rgba(255, 250, 242, 0.82);
  text-underline-offset: 3px;
}

.legal-body h2 {
  font-size: 1.5rem;
  margin-top: 40px;
}

.legal-body p,
.legal-body li {
  color: var(--ink-soft);
}

.legal-meta {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.consent-form {
  display: grid;
  gap: 18px;
  max-width: 640px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.form-field {
  display: grid;
  gap: 6px;
}

.form-field label {
  font-weight: 700;
  font-size: 0.94rem;
}

.form-field input,
.form-field textarea {
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgba(21, 23, 24, 0.28);
  border-radius: var(--radius);
}

.form-field input:focus-visible,
.form-field textarea:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 1px;
}

.consent-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.consent-check input[type="checkbox"] {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.consent-check label {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.form-links {
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.form-note {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0;
}

/* Contact NAP block (business name/address/phone) */
.contact-divider {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 18px 0;
}

.contact-nap {
  font-style: normal;
  font-size: 0.98rem;
  color: var(--ink-soft);
  line-height: 1.7;
}

.contact-nap a {
  display: inline;
  font-size: 1rem;
  font-weight: 700;
  color: var(--forest);
}

/* ---- Founder portrait + staged media figures (2026-07 visual pass) ---- */

.founder-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}

.founder-portrait {
  margin: 0;
  display: grid;
  gap: 12px;
}

.founder-portrait img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line-dark);
}

.founder-portrait figcaption {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fog);
}

.founder-copy > .section-kicker:first-child {
  margin-top: 0;
}

/* Staged brain figures — reuse the homepage .bv-frame treatment, but allow a
   caption with a lead-in and stack two stages with clear separation. */
.stage-figure {
  margin: 0 0 clamp(36px, 5vw, 56px);
}

.stage-figure:last-child {
  margin-bottom: 0;
}

.stage-figure .bv-frame {
  position: relative;
  border-radius: calc(var(--radius) + 2px);
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--line);
}

/* Source recordings are near-square; trim the dead space top and bottom so the
   figure does not eat a full screen of height. The graph sits centred, so an
   even crop is safe. */
.stage-figure .bv-frame {
  aspect-ratio: 3 / 2;
}

.stage-figure video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stage-figure .brainviz-caption {
  margin-top: 14px;
  max-width: 68ch;
}

.stage-figure .brainviz-caption strong {
  color: var(--ink);
}

/* Stage three is a still, not a clip. It is a wide 1600x836 export, so let it
   keep its own ratio rather than inheriting the 3/2 video crop. */
.stage-figure-final .bv-frame {
  aspect-ratio: auto;
}

.stage-figure-final .bv-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.stage-note {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  max-width: 68ch;
  font-size: 0.94rem;
  color: var(--ink-soft);
  display: grid;
  gap: 14px;
}

.stage-note p {
  margin: 0;
}

.stage-note strong {
  color: var(--ink);
}

.stage-note-fine {
  font-size: 0.86rem;
  color: var(--fog-ink);
}

/* Responsive 16:9 YouTube embed. aspect-ratio on the wrapper keeps the iframe
   from causing layout shift and holds the ratio at every width. */
.video-embed {
  margin: 20px 0 0;
  display: grid;
  gap: 10px;
  width: 100%;
}

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line-dark);
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-embed figcaption {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fog-dim);
}

/* On the dark production band the desk photo's caption needs the light rule. */
.section-contrast .desk-figure img {
  border-color: var(--line-dark);
}

.section-contrast .desk-figure figcaption {
  color: var(--fog-dim);
}

/* Environment photograph inside a .prose column. It intentionally stays on the
   prose measure (the parent's 68ch cap wins) so the image aligns with the text
   block rather than breaking the column. */
.desk-figure {
  margin: 12px 0 0;
  display: grid;
  gap: 10px;
  width: 100%;
}

.desk-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.desk-figure figcaption {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
}

@media (max-width: 860px) {
  .founder-layout {
    grid-template-columns: 1fr;
  }
}

/* Booking page (/book/) — GoHighLevel booking widget.
   form_embed.js sets an explicit inline height once it has measured the
   iframe's content. The floor below is what shows before that lands, and if
   the script is blocked entirely — without it the iframe collapses to the
   ~150px default and the calendar looks broken. An explicit height taller
   than the floor still wins, so a tall widget is unaffected. */
.booking-widget {
  margin-bottom: 24px;
}

.booking-widget iframe {
  display: block;
  min-height: 600px;
}

/* Inline links inside a contact panel's supporting copy stay body-sized.
   .contact-panel a is deliberately large for the primary action; secondary
   links sitting inside .contact-note should not inherit that treatment. */
.contact-panel .contact-note a {
  display: inline;
  font-size: inherit;
  font-weight: 700;
}

/* SMS consent submission error — the detail in parentheses is the raw reason
   (HTTP status or network error), useful when someone reports a failure but
   secondary to the instruction above it. */
.consent-error-detail {
  color: var(--clay);
  font-family: var(--mono);
  font-size: 0.82em;
}

/* Available to screen readers, removed from the visual layout. Used for table
   captions where the surrounding headings already carry the meaning visually. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* A warm-paper band, so a section can read as a distinct chapter between the
   two paper sections around it. Sibling of .section-contrast above. */
.section-warm {
  background: var(--paper-warm);
}

/* Generated-media label. /brand-systems makes a public, unqualified promise
   that anything we generate carries a visible label, so this lives here in
   the shared sheet rather than in one page's stylesheet — the standard has to
   be identical everywhere it is used, and a second copy is a second thing to
   forget.

   It sits ABOVE the media in normal flow, not overlaid on it. As an overlay it
   covered artwork as soon as the viewport got narrow enough — on the Content
   Machine diagram it landed on the title — and an honesty label that obscures
   the thing it is labelling is a bad trade. Above the frame it is equally
   visible at every width and can never cover anything. */
.ai-badge {
  display: inline-block;
  /* justify-self/align-self because `inline-block` does not stop a grid or flex
     parent from stretching the badge to the full column. `.page-hero
     .section-inner` is a grid, and the badge rendered as a full-width brass bar
     across the hero until these were added. */
  justify-self: start;
  align-self: start;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #17120c;
  background: var(--brass);
  border-radius: 4px;
  padding: 5px 9px;
  font-weight: 700;
}