:root {
  --graphite: #1B1712;
  --paper: #F3EEE3;
  --white: #FFFFFF;
  --brass: #A8461E;
  --teal: #2B4A3B;
  --slate: #6C6252;
  --line: #E3DBC8;
  --line-dark: #2E281F;
  --max: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--white); }

body {
  margin: 0;
  font-family: 'Archivo', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--graphite);
  background: transparent;
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  position: relative;
  z-index: 0;
}

/* Ambient background glow: sits between the page's white canvas and its
   content. Shows through anywhere that doesn't paint its own opaque
   background (plain sections, margins outside .wrap, the blurred header)
   and is fully covered by sections that do (paper/dark blocks, cards).
   Gives the page continuous, subtle life without competing with content. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(620px circle at 10% 15%, rgba(168,70,30,0.10), transparent 62%),
    radial-gradient(680px circle at 90% 40%, rgba(43,74,59,0.10), transparent 62%),
    radial-gradient(560px circle at 30% 92%, rgba(168,70,30,0.07), transparent 60%);
  animation: ambientDrift 44s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes ambientDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2.5%, 2%, 0) scale(1.05); }
  100% { transform: translate3d(2%, -2.5%, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

h1, h2, h3, h4 {
  font-family: 'Fraunces', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1.1em; max-width: 62ch; color: var(--slate); }
a { color: inherit; }

.mono {
  font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  font-weight: 500;
  letter-spacing: 0;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- Header ---------- */
header.site {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  max-width: var(--max);
  margin: 0 auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--graphite);
}
.brand svg { display: block; margin-right: 10px; }
@supports (gap: 1px) { .brand svg { margin-right: 0; } }
.brand-name {
  font-family: 'Fraunces', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
.navlinks {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0; padding: 0;
}
.navlinks li { margin-right: 30px; }
.navlinks li:last-child { margin-right: 0; }
@supports (gap: 1px) { .navlinks li { margin-right: 0; } }
.navlinks a {
  text-decoration: none;
  font-size: 0.95rem;
  color: var(--slate);
  border-bottom: 2px solid transparent;
  padding-bottom: 3px;
  transition: color .15s, border-color .15s;
}
.navlinks a:hover, .navlinks a.active {
  color: var(--graphite);
  border-color: var(--brass);
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  background: var(--graphite);
  color: var(--white);
  text-decoration: none;
  padding: 11px 20px;
  font-size: 0.92rem;
  font-weight: 500;
  border: 1px solid var(--graphite);
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover { background: var(--brass); border-color: var(--brass); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(27,23,18,0.18); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-outline {
  background: transparent;
  color: var(--graphite);
  border: 1px solid var(--line-dark);
}
.btn-outline:hover { background: var(--graphite); color: var(--white); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(27,23,18,0.14); }
.btn-outline:active { transform: translateY(0); box-shadow: none; }
.menu-toggle { display: none; background: none; border: none; cursor: pointer; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

/* ---------- Hero ---------- */
.hero {
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  position: relative;
  background-image: radial-gradient(circle, rgba(168,70,30,0.18) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  background-position: -6px -6px;
  animation: heroDotDrift 50s linear infinite;
}
@keyframes heroDotDrift {
  0%   { background-position: -6px -6px; }
  100% { background-position: -6px 594px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero { animation: none; }
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--white) 92%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero-grid {
  display: flex;
  align-items: stretch;
}
.hero-copy { flex: 1 1 56%; }
.hero-panel { flex: 1 1 44%; }
.hero-copy {
  position: relative;
  padding: 96px 48px 72px 28px;
  background: var(--paper);
  overflow: hidden;
}
.hero-copy::after {
  content: "";
  position: absolute;
  right: -90px; top: -60px;
  width: 340px; height: 340px;
  background: var(--brass);
  opacity: 0.06;
  transform: rotate(18deg);
}
.hero-copy::before {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: 0;
  background:
    radial-gradient(closest-side, rgba(168,70,30,0.12), transparent 70%) top right / 55% 55% no-repeat,
    radial-gradient(closest-side, rgba(43,74,59,0.10), transparent 70%) bottom left / 60% 60% no-repeat;
  animation: heroGlow 18s ease-in-out infinite alternate;
  pointer-events: none;
}
.hero-watermark {
  position: absolute;
  left: -40px; bottom: -60px;
  width: 260px; height: 260px;
  opacity: 0.05;
  pointer-events: none;
}
.hero-copy > .wrap { position: relative; z-index: 1; }
.hero-h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); max-width: 14ch; }
.hero-panel {
  position: relative;
  background: var(--graphite);
  color: var(--white);
  padding: 96px 40px 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
}
.hero-panel::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(closest-side, rgba(168,70,30,0.22), transparent 70%) top right / 65% 65% no-repeat,
    radial-gradient(closest-side, rgba(43,74,59,0.20), transparent 70%) bottom left / 70% 70% no-repeat;
  animation: heroGlow 16s ease-in-out infinite alternate;
  pointer-events: none;
}
.hero-panel > * { position: relative; z-index: 1; }
@keyframes heroGlow {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-3%, 3%, 0) scale(1.08); }
  100% { transform: translate3d(2%, -2%, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-panel::before { animation: none; }
}
.chips { display: flex; flex-wrap: wrap; margin-top: 24px; position: relative; }
.chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--white);
  background: var(--graphite);
  padding: 7px 14px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.chip.accent { background: var(--brass); color: var(--white); }
.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  color: var(--teal);
  margin-bottom: 18px;
}
.hero p.lead {
  font-size: 1.15rem;
  max-width: 46ch;
  margin-top: 18px;
}
.hero-ctas { display: flex; gap: 14px; margin-top: 30px; }
.hero-ctas > * + * { margin-left: 14px; }
@supports (gap: 1px) { .hero-ctas > * + * { margin-left: 0; } }

.ledger {
  border: 1px solid #3A342B;
  background: transparent;
}
.ledger-head {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  padding: 12px 18px;
  border-bottom: 1px solid #3A342B;
  color: #A99E8C;
}
.ledger-row {
  display: flex;
  align-items: flex-start;
  padding: 18px 18px;
  border-bottom: 1px solid #3A342B;
  gap: 16px;
}
.ledger-row:last-child { border-bottom: none; }
.ledger-row .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  color: var(--brass);
  font-weight: 500;
  white-space: nowrap;
  padding-top: 0.15em;
  flex: 0 0 auto;
}
.ledger-row .label { font-size: 0.92rem; line-height: 1.5; color: #D7D2C4; text-align: left; }
.ledger-foot {
  font-size: 0.78rem;
  color: #8C8272;
  padding: 12px 18px;
  border-top: 1px solid #3A342B;
}

/* ---------- Proof strip (replaces fake client logos) ---------- */
.proof-strip {
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.proof-strip .wrap {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 28px;
  gap: 0;
}
.proof-item {
  font-size: 0.85rem;
  color: var(--slate);
  padding-right: 28px;
  margin-right: 28px;
  border-right: 1px solid var(--line);
}
.proof-item:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.proof-item strong { color: var(--graphite); font-family: 'JetBrains Mono', monospace; font-weight: 500; }

/* ---------- Sections ---------- */
section { padding: 96px 0; }
section.tight { padding: 64px 0; }
.section-head { max-width: 640px; margin-bottom: 52px; }
.section-head p { margin-top: 14px; }

.divider { border: none; border-top: 1px solid var(--line); margin: 0; }

/* Spec-sheet row list (used for services on home + services page) */
.spec-list { border-top: 1px solid var(--line-dark); }
.spec-row {
  display: flex;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.spec-row > div:first-child { flex: 0 0 220px; }
.spec-row > div:last-child { flex: 1 1 auto; }
.spec-row h3 { margin: 0; }
.spec-row .idx {
  font-family: 'JetBrains Mono', monospace;
  color: var(--slate);
  font-size: 0.85rem;
}

/* Process steps (genuinely sequential -> numbered) */
.steps { display: flex; flex-wrap: wrap; border-top: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark); }
.step { flex: 1 1 25%; padding: 26px 22px; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); box-sizing: border-box; }
.step .n { font-family: 'JetBrains Mono', monospace; color: var(--brass); font-size: 0.85rem; display: block; margin-bottom: 10px; }

/* Locations */
.locations { display: flex; flex-wrap: wrap; border-top: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark); }
.location { flex: 1 1 33.33%; padding: 26px 24px; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); box-sizing: border-box; }
.location .tag { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--teal); }

.dark { background: var(--graphite); color: var(--white); }
.dark p { color: #C2B9A8; }
.dark .divider { border-color: var(--line-dark); }

.bio-grid { display: flex; gap: 40px; align-items: flex-start; }
.bio-grid > div:first-child { flex: 0 0 160px; }
.bio-grid > div:last-child { flex: 1 1 auto; }
.monogram {
  width: 120px; height: 120px;
  border: 1px solid var(--line-dark);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', sans-serif;
  font-weight: 700; font-size: 2rem;
  color: var(--graphite);
  background: var(--paper);
}

.track-row { display: flex; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.track-row > *:first-child { flex: 0 0 130px; }
.track-row > *:last-child { flex: 1 1 auto; }
.track-row .num { font-family: 'JetBrains Mono', monospace; color: var(--teal); font-size: 1.2rem; }

.contact-grid { display: flex; gap: 56px; flex-wrap: wrap; }
.contact-grid > div { flex: 1 1 360px; }

/* ---------- Article pages ---------- */
.article-body { max-width: 700px; }
.article-body h2 { margin-top: 2em; }
.article-body p { max-width: none; }
.byline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0 0;
  font-size: 0.9rem;
  color: var(--slate);
}
.byline .monogram-sm {
  width: 38px; height: 38px;
  border: 1px solid var(--line-dark);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', sans-serif;
  font-weight: 700; font-size: 0.85rem;
  background: var(--paper);
  flex-shrink: 0;
}
.pullquote {
  border-left: 3px solid var(--brass);
  padding: 4px 0 4px 22px;
  margin: 32px 0;
  font-family: 'Fraunces', sans-serif;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--graphite);
  max-width: 640px;
}
.article-nav-back {
  display: inline-block;
  margin-bottom: 24px;
  font-size: 0.9rem;
  color: var(--slate);
  text-decoration: none;
}
.article-nav-back:hover { color: var(--graphite); }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 0.85rem; color: var(--slate); margin-bottom: 6px; }
.field input, .field textarea {
  width: 100%;
  border: 1px solid var(--line-dark);
  padding: 11px 13px;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--white);
}
.field textarea { min-height: 120px; resize: vertical; }

footer.site {
  background: var(--graphite);
  color: #BFB6A4;
  padding: 56px 0 28px;
  margin-top: 40px;
}
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 40px; }
footer.site .wrap > div:first-child { flex: 1 1 320px; }
footer.site .wrap > div:not(:first-child) { flex: 1 1 140px; }
footer.site h4 { color: var(--white); font-size: 0.95rem; margin-bottom: 14px; }
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin-bottom: 8px; }
footer.site a { color: #BFB6A4; text-decoration: none; font-size: 0.92rem; }
footer.site a:hover { color: var(--white); }
.foot-bottom {
  max-width: var(--max);
  margin: 40px auto 0;
  padding: 20px 28px 0;
  border-top: 1px solid var(--line-dark);
  font-size: 0.82rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}
.foot-legal { display: flex; flex-wrap: wrap; }
.foot-legal a { color: #8C8272; text-decoration: none; margin-right: 18px; }
.foot-legal a:last-child { margin-right: 0; }
.foot-legal a:hover { color: var(--white); }

/* ---------- Carousel ---------- */
.carousel-section { padding: 0; }
.carousel { position: relative; overflow: hidden; }
.carousel-track {
  display: flex;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.carousel-slide {
  flex: 0 0 100%;
  min-height: 320px;
  display: flex;
  align-items: center;
}
.carousel-slide-inner { max-width: 640px; }
.carousel-slide h2 { color: var(--white); margin-bottom: 14px; }
.carousel-slide p { color: rgba(255,255,255,0.82); font-size: 1.05rem; margin-bottom: 26px; }
.carousel-idx {
  display: block;
  color: rgba(255,255,255,0.65);
  font-size: 0.82rem;
  margin-bottom: 18px;
  letter-spacing: 0.04em;
}
.carousel-slide .btn { color: var(--white); }
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.15);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.35);
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.carousel-arrow:hover { background: rgba(255,255,255,0.3); }
.carousel-prev { left: 24px; }
.carousel-next { right: 24px; }
.carousel-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}
.carousel-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .15s, transform .15s;
}
.carousel-dot.is-active { background: var(--white); transform: scale(1.2); }
@media (max-width: 860px) {
  .carousel-slide { padding: 56px 28px; }
  .carousel-arrow { width: 36px; height: 36px; font-size: 1.2rem; }
  .carousel-prev { left: 10px; }
  .carousel-next { right: 10px; }
}
@media (min-width: 861px) {
  .carousel-slide { padding: 72px 0; }
  .carousel-slide-inner { padding: 0 28px; margin: 0 auto; }
}

/* ---------- Bolder color accents ---------- */
.proof-strip { background: var(--graphite); border-bottom: none; }
.proof-item { color: rgba(255,255,255,0.75); border-right-color: rgba(255,255,255,0.18); }
.proof-item strong { color: var(--brass); }
.spec-row .idx { color: var(--brass); font-weight: 500; }
.section-head .eyebrow { font-weight: 600; }
h2 { position: relative; }

/* ---------- Motion: scroll reveal + card lift ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px) scale(0.985);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Stagger reveal timing for items inside the same list/grid, so groups
   feel like they arrive in sequence rather than as one flat block. */
.locations > .reveal:nth-child(1), .steps > .reveal:nth-child(1), .spec-list > .reveal:nth-child(1), .insight-grid > .reveal:nth-child(1) { transition-delay: 0s; }
.locations > .reveal:nth-child(2), .steps > .reveal:nth-child(2), .spec-list > .reveal:nth-child(2), .insight-grid > .reveal:nth-child(2) { transition-delay: .08s; }
.locations > .reveal:nth-child(3), .steps > .reveal:nth-child(3), .spec-list > .reveal:nth-child(3), .insight-grid > .reveal:nth-child(3) { transition-delay: .16s; }
.locations > .reveal:nth-child(4), .steps > .reveal:nth-child(4), .spec-list > .reveal:nth-child(4), .insight-grid > .reveal:nth-child(4) { transition-delay: .24s; }
.spec-list > .reveal:nth-child(5), .insight-grid > .reveal:nth-child(5) { transition-delay: .32s; }
.spec-list > .reveal:nth-child(6), .insight-grid > .reveal:nth-child(6) { transition-delay: .4s; }

.location, .step, .spec-row {
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.location:hover, .step:hover { background: rgba(168,70,30,0.06); transform: translateY(-3px); }
.spec-row:hover { border-bottom-color: var(--brass); }

.ledger-row { transition: background-color .2s ease; }
.ledger-row:hover { background: rgba(255,255,255,0.03); }

@media (max-width: 860px) {
  .navlinks { display: none; }
  .menu-toggle { display: block; }
  .hero-grid { flex-direction: column; }
  .step { flex: 1 1 50%; }
  .location { flex: 1 1 100%; }
  .bio-grid { flex-direction: column; }
  .contact-grid { flex-direction: column; }
  footer.site .wrap > div { flex: 1 1 45%; }
  .spec-row { flex-direction: column; gap: 8px; }
}

/* Insights card grid */
.insight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 8px;
}
.insight-card {
  border: 1px solid var(--line);
  padding: 30px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.insight-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 32px rgba(27,23,18,0.10);
  border-color: var(--graphite);
}
.insight-card .cat {
  display: inline-block;
  align-self: flex-start;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid currentColor;
  margin-bottom: 16px;
}
.insight-card .cat.cat-delivery { color: var(--graphite); }
.insight-card .cat.cat-staffing { color: var(--brass); }
.insight-card .cat.cat-ai { color: var(--teal); }
.insight-card .cat.cat-governance { color: var(--slate); }
.insight-card h3 { font-size: 1.15rem; margin: 0 0 10px; line-height: 1.3; }
.insight-card p.blurb { color: var(--slate); flex-grow: 1; margin-bottom: 16px; }
.insight-card .meta { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.insight-card .date { color: var(--slate); font-size: 0.8rem; font-family: 'JetBrains Mono', monospace; }
.insight-card a.more { color: var(--brass); font-size: 0.88rem; text-decoration: none; font-weight: 500; }
.insight-card a.more:hover { text-decoration: underline; }

.insight-featured {
  grid-column: 1 / -1;
  padding: 44px;
  background: var(--graphite);
  color: #fff;
  display: flex;
  flex-direction: column;
}
.insight-featured .cat { border-color: var(--brass); color: var(--brass); }
.insight-featured h3 { color: #fff; font-size: 1.7rem; max-width: 26ch; }
.insight-featured p.blurb { color: #D3CDBE; max-width: 60ch; font-size: 1.02rem; }
.insight-featured .date { color: #A69B89; }
.insight-featured a.more { color: var(--brass); }
.insight-featured:hover { transform: none; box-shadow: none; border-color: var(--graphite); }

.services-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.services-subnav a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  color: var(--graphite);
  border: 1px solid var(--line-dark);
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}
.services-subnav a:hover { background: var(--graphite); color: #fff; }

@media (max-width: 760px) {
  .insight-grid { grid-template-columns: 1fr; }
  .insight-featured h3 { font-size: 1.4rem; }
}

/* FAQ accordion */
.faq-list { margin-top: 8px; border-top: 1px solid var(--line); }
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.02rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.3rem;
  color: var(--brass);
  flex-shrink: 0;
  transition: transform .2s ease;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p { color: var(--slate); margin: 14px 0 0; max-width: 68ch; }

/* Header shadow once the page has scrolled */
header.site.is-scrolled { box-shadow: 0 4px 18px rgba(27,23,18,0.08); }

/* CV practice-match tool */
.cv-match-tool {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.cv-match-input { flex: 1 1 420px; }
.cv-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1.5px dashed var(--line-dark);
  padding: 28px 20px;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
  margin-bottom: 14px;
}
.cv-dropzone:hover, .cv-dropzone.is-dragover { border-color: var(--brass); background: rgba(168,70,30,0.05); }
.cv-dropzone-title { font-weight: 600; margin-bottom: 4px; }
.cv-dropzone-sub { font-size: 0.85rem; color: var(--slate); }
.cv-match-or {
  text-align: center;
  color: var(--slate);
  font-size: 0.82rem;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 10px 0;
}
.cv-match-input textarea {
  width: 100%;
  border: 1px solid var(--line-dark);
  padding: 13px;
  font-family: inherit;
  font-size: 0.95rem;
  min-height: 160px;
  resize: vertical;
  margin-bottom: 14px;
}
.cv-status { font-size: 0.85rem; color: var(--slate); min-height: 1.2em; margin-top: 10px; }
.cv-status.is-error { color: var(--brass); }

.cv-match-results {
  flex: 1 1 380px;
  border: 1px solid var(--line);
  padding: 30px;
  background: var(--paper);
  align-self: flex-start;
}
.cv-score-bars { margin: 18px 0 26px; }
.cv-score-row { margin-bottom: 14px; }
.cv-score-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-bottom: 5px;
}
.cv-score-label .kw { color: var(--slate); font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; }
.cv-score-track { height: 8px; background: var(--line); position: relative; }
.cv-score-fill { height: 100%; background: var(--brass); transition: width .5s ease; }
.cv-score-row.is-top .cv-score-fill { background: var(--teal); }
.cv-match-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.cv-match-note { font-size: 0.82rem; color: var(--slate); }

@media (max-width: 760px) {
  .cv-match-tool { flex-direction: column; }
}


/* =====================================================================
   Competitor-review pass (Sept 2026)
   Accessibility, contrast, hero alignment, and new components.
   ===================================================================== */
:root { --brass-light: #E07A4F; }   /* brass for dark backgrounds: 6.0:1 on graphite */

/* Skip link + main landmark */
.skip-link {
  position: absolute; left: 12px; top: -64px; z-index: 1000;
  background: var(--graphite); color: var(--white);
  padding: 10px 16px; font-size: 0.9rem; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; outline: 2px solid var(--brass-light); outline-offset: 2px; }
main { display: block; }
main:focus { outline: none; }

/* Header CTA: the generic `.navlinks a` rule was overriding `.btn`, leaving the
   button text at 2.98:1 and pushing it off-centre (3px bottom padding). */
.navlinks a.btn {
  color: var(--white);
  border: 1px solid var(--graphite);
  padding: 11px 20px;
}
.navlinks a.btn:hover, .navlinks a.btn:focus-visible { color: var(--white); border-color: var(--brass); }

/* Focus ring coverage for controls the original rule missed */
select:focus-visible, summary:focus-visible, .carousel-dot:focus-visible {
  outline: 2px solid var(--brass); outline-offset: 2px;
}
.hero-panel a:focus-visible, .dark a:focus-visible, footer.site a:focus-visible,
.carousel a:focus-visible, .carousel button:focus-visible, .insight-featured:focus-visible {
  outline-color: var(--brass-light);
}

/* Contrast on dark surfaces (brass on graphite was 3.0:1) */
.proof-item strong,
.ledger-row .num,
.step .n,
.insight-featured a.more,
.insight-featured .more { color: var(--brass-light); }
.insight-featured .cat { border-color: var(--brass-light); color: var(--brass-light); }
.carousel-slide p { color: rgba(255,255,255,0.92); }
.carousel-idx { color: rgba(255,255,255,0.88); }
.insight-featured .date { color: #C9BFAE; }
.insight-card .more { color: var(--brass); font-size: 0.88rem; font-weight: 500; }
.insight-card:hover .more { text-decoration: underline; }
.insight-featured .more { font-size: 0.88rem; font-weight: 500; }

/* Hero: align to the same 1120px container as the nav, and pull the primary
   CTA up so it is visible on a typical laptop viewport. */
.hero-copy { padding: 72px 48px 64px max(28px, calc(50vw - 560px + 28px)); }
.hero-panel { padding: 72px max(28px, calc(50vw - 560px + 28px)) 48px 40px; }
.hero-h1 { font-size: clamp(2.4rem, 5vw, 3.9rem); max-width: 16ch; }
@media (max-width: 860px) {
  .hero-copy { padding: 56px 28px 44px; }
  .hero-panel { padding: 44px 28px; }
}

/* Proof strip: link to the write-up behind a number */
.proof-src { color: var(--brass-light); margin-left: 6px; font-size: 0.85em; white-space: nowrap; }
.proof-src:hover { color: var(--white); }

/* Carousel pause control (WCAG 2.2.2) */
.carousel-pause {
  position: absolute; bottom: 12px; left: 24px;
  background: rgba(27,23,18,0.55); color: var(--white);
  border: 1px solid rgba(255,255,255,0.55);
  font-family: 'JetBrains Mono', monospace; font-size: 0.75rem;
  padding: 6px 12px; cursor: pointer; letter-spacing: 0.03em;
}
.carousel-pause:hover { background: rgba(27,23,18,0.8); }
@media (max-width: 860px) { .carousel-pause { left: 10px; } }

/* Insights: 3-up grid, article footer, CTA block */
.insight-grid.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .insight-grid.three { grid-template-columns: 1fr; } }
.insight-card .meta { gap: 12px; flex-wrap: wrap; }
.article-more { background: var(--paper); border-top: 1px solid var(--line); }
.article-cta {
  margin-top: 40px; padding: 32px 36px;
  background: var(--graphite); color: var(--white);
  display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.article-cta h3 { color: var(--white); margin: 0 0 6px; }
.article-cta p { color: #D3CDBE; margin: 0; max-width: 54ch; }
.article-cta .btn { background: var(--brass); border-color: var(--brass); }
.article-cta .btn:hover { background: var(--white); border-color: var(--white); color: var(--graphite); }

/* Services: related reading under each practice */
.related-reading { margin-top: 18px; font-size: 0.92rem; color: var(--slate); }
.related-reading .lbl {
  font-family: 'JetBrains Mono', monospace; font-size: 0.72rem;
  letter-spacing: 0.06em; text-transform: uppercase; margin-right: 10px;
}
.related-reading a { color: var(--brass); text-decoration: underline; text-underline-offset: 3px; margin-right: 14px; white-space: normal; }
.related-reading a:hover { color: var(--graphite); }

/* Contact form: select + checklist */
.field select {
  width: 100%; border: 1px solid var(--line-dark); padding: 11px 13px;
  font-family: inherit; font-size: 0.95rem; background: var(--white); color: var(--graphite);
}
.checklist { list-style: none; margin: 0 0 32px; padding: 0; }
.checklist li { padding: 9px 0 9px 26px; border-bottom: 1px solid var(--line); position: relative; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 10px; height: 10px; border: 2px solid var(--teal); }

/* ---- Review pass, follow-up fixes ---- */
footer.site p { color: #BFB6A4; }
.carousel-pause { background: var(--graphite); border-color: rgba(255,255,255,0.6); }
.carousel-pause:hover { background: #000; }
.insight-grid.three .insight-card .meta { flex-direction: column; align-items: flex-start; gap: 8px; }


/* =====================================================================
   Motion & polish pass (Sept 2026): "breathing" hero, magnetic buttons,
   cursor spotlight, draw-in glyphs, scroll progress. Everything animated
   is wrapped for prefers-reduced-motion, and pointer effects only run on
   devices with a fine pointer + hover.
   ===================================================================== */
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Hero network now lives on the dark panel, clear of the copy */

@media (prefers-reduced-motion: no-preference) {

  /* Hero entrance */
  .hero-copy .eyebrow, .hero-copy .hero-h1, .hero-copy p.lead, .hero-copy .hero-ctas, .hero-copy .chips,
  .hero-copy > .wrap > p:last-child { animation: heroRise .85s cubic-bezier(.2,.7,.3,1) both; }
  .hero-copy .hero-h1 { animation-delay: .08s; }
  .hero-copy p.lead { animation-delay: .2s; }
  .hero-copy .hero-ctas { animation-delay: .32s; }
  .hero-copy .chips { animation-delay: .44s; }
  .ledger-head, .ledger-row, .ledger-foot { animation: heroRise .8s cubic-bezier(.2,.7,.3,1) both; }
  .ledger-head { animation-delay: .1s; }
  .ledger-row:nth-of-type(1) { animation-delay: .2s; }
  .ledger-row:nth-of-type(2) { animation-delay: .3s; }
  .ledger-row:nth-of-type(3) { animation-delay: .4s; }
  .ledger-row:nth-of-type(4) { animation-delay: .5s; }
  .ledger-foot { animation-delay: .6s; }
  @keyframes heroRise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }

  .hero-h1 .ul { background-size: 0% .09em; animation: ulDraw 1s cubic-bezier(.2,.7,.3,1) .75s forwards; }
  @keyframes ulDraw { to { background-size: 100% .09em; } }
}
.hero-h1 .ul {
  background: linear-gradient(var(--brass), var(--brass)) no-repeat 0 94% / 100% .09em;
  padding-bottom: .05em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-h1 .ul { background-size: 0% .09em; }
}

/* Practice glyphs */
.pi { display:block; margin-bottom:14px; fill:none; stroke:var(--brass); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.pi circle { fill:var(--brass); stroke:none; }
.pi path { stroke-dasharray:100; stroke-dashoffset:0; }
.spec-row .pi { transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.spec-row:hover .pi { transform: translateY(-3px) scale(1.06); }
@media (prefers-reduced-motion: no-preference) {
  .spec-row.reveal:not(.is-visible) .pi path { stroke-dashoffset:100; }
  .spec-row.reveal.is-visible .pi path { transition: stroke-dashoffset 1.2s cubic-bezier(.2,.7,.3,1) .3s; }
  .spec-row.reveal:not(.is-visible) .pi circle { opacity:0; }
  .spec-row.reveal.is-visible .pi circle { transition: opacity .5s ease 1s; }
}
@media (max-width: 860px) { .pi { width:36px; height:36px; margin-bottom:8px; } }

/* Scroll progress */
.scroll-progress { position:fixed; top:0; left:0; right:0; height:3px; z-index:70; background:var(--brass); transform-origin:0 50%; transform:scaleX(var(--p,0)); pointer-events:none; }

/* Pointer-only effects */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion: no-preference) {
  .btn { transform: translate(var(--mx,0px), var(--my,0px)); }
  .btn:hover, .btn-outline:hover { transform: translate(var(--mx,0px), calc(var(--my,0px) - 2px)); }
  .btn:active, .btn-outline:active { transform: translate(var(--mx,0px), var(--my,0px)); }
  .insight-card, .spec-row, .location, .step, .location:hover, .step:hover {
    background-image: radial-gradient(280px circle at var(--sx,-999px) var(--sy,-999px), rgba(168,70,30,0.09), transparent 70%);
  }
  .dark .step, .dark .step:hover {
    background-image: radial-gradient(280px circle at var(--sx,-999px) var(--sy,-999px), rgba(224,122,79,0.18), transparent 70%);
  }
}


/* =====================================================================
   Hero orbit + breathing glows (Sept 2026)
   Five practices around one standard, on the dark panel so it can never
   collide with the headline or intro copy. Decorative; all motion is
   removed for prefers-reduced-motion.
   ===================================================================== */
.hero-orbit { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 176px; padding-top: 24px; }
.hero-network { display: block; width: 100%; height: auto; max-height: 240px; overflow: visible; }
.hn-ring { fill: none; stroke: var(--brass-light); stroke-width: 1; opacity: 0.22; }
.hn-line { stroke: var(--brass-light); stroke-width: 1.2; opacity: 0.4; stroke-dasharray: 3 6; }
.hn-node { fill: var(--graphite); stroke: #D7D2C4; stroke-width: 1.5; }
.hn-halo { fill: var(--brass-light); opacity: 0; transform-box: fill-box; transform-origin: center; }
.hn-label { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 11px; fill: #D7D2C4; }
.hn-hub { transform-box: fill-box; transform-origin: center; }
.hn-hub-disc { fill: var(--graphite); stroke: var(--brass-light); stroke-width: 1.5; }
.hn-ripple { fill: none; stroke: var(--brass-light); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.hn-pulse { fill: var(--brass-light); }
.hn-pulse-alt { fill: #9CC3BD; }
@media (max-width: 860px) {
  .hero-orbit { min-height: 150px; padding-top: 20px; }
  .hn-label { font-size: 15px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hn-line { animation: hnFlow 16s linear infinite; }
  .hn-halo { animation: hnHalo 6s ease-out infinite; }
  .hn-hub { animation: hnBreathe 5s ease-in-out infinite; }
  .hn-ripple { animation: hnRipple 4.6s ease-out infinite; }
  .hn-ripple-2 { animation-delay: -2.3s; }
  .hero-orbit { animation: heroRise .9s cubic-bezier(.2,.7,.3,1) .7s both; }
  @keyframes hnFlow { to { stroke-dashoffset: -108; } }
  @keyframes hnHalo { 0% { transform: scale(1); opacity: 0.45; } 100% { transform: scale(3); opacity: 0; } }
  @keyframes hnBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
  @keyframes hnRipple { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(2.7); opacity: 0; } }

  /* Slow breathing glow inside every dark section */
  .dark { position: relative; overflow: hidden; isolation: isolate; }
  .dark::before {
    content: ""; position: absolute; inset: -25%; z-index: -1; pointer-events: none;
    background:
      radial-gradient(closest-side, rgba(168,70,30,0.22), transparent 70%) top right / 55% 70% no-repeat,
      radial-gradient(closest-side, rgba(43,74,59,0.30), transparent 70%) bottom left / 60% 75% no-repeat;
    animation: heroGlow 20s ease-in-out infinite alternate;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hn-pulse { display: none; }
}

/* Home hero: trim the dead dotted band above and below the content so the
   headline, CTAs and orbit sit higher on the page. */
section.hero:not([style]) { padding-top: 40px; padding-bottom: 48px; }


/* Founder portrait (replaces the PT monogram on the About page) */
.founder-photo {
  display: block; width: 160px; height: 160px; flex: 0 0 160px;
  border-radius: 50%; object-fit: cover;
  background: var(--graphite);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--brass);
}
@media (max-width: 860px) { .founder-photo { width: 128px; height: 128px; flex-basis: auto; } }