:root {
  --navy: #10182c;
  --navy-deep: #0c1222;
  --navy-raised: #16203a;
  --cream: #f1ead9;
  --cream-deep: #e8deca;
  --ink: #10182c;
  --gold: #a98c4b;
  --gold-readable: #d8bc77;
  --gold-dark: #a98c4b;
  --navy-muted: rgba(16, 24, 44, 0.72);
  --cream-muted: rgba(241, 234, 217, 0.76);
  --cream-quiet: rgba(241, 234, 217, 0.56);
  --cream-ghost: rgba(241, 234, 217, 0.07);
  --nav-border: rgba(216, 188, 119, 0.3);
  --nav-bg: rgba(12, 18, 34, 0.92);
  --gold-line: rgba(169, 140, 75, 0.35);
  --gold-line-strong: rgba(169, 140, 75, 0.7);
  --ink-line: rgba(16, 24, 44, 0.2);
  --cream-line: rgba(241, 234, 217, 0.2);
  --grid-line: rgba(169, 140, 75, 0.04);
  --focus: #d8bc77;
  --serif: "Instrument Serif", "Didot", "Bodoni MT", "Playfair Display", Georgia, serif;
  --mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --page-pad: clamp(1.2rem, 4vw, 4.5rem);
  --content-max: 90rem;
  --radius: 0;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background: var(--navy-deep);
  scroll-behavior: smooth;
}

body {
  background: var(--navy);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 0.92rem;
  line-height: 1.65;
  min-width: 20rem;
}

body::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27180%27 height=%27180%27 viewBox=%270 0 180 180%27%3E%3Cfilter id=%27noise%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.85%27 numOctaves=%273%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23noise)%27 opacity=%270.8%27/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 11.25rem 11.25rem;
  content: "";
  inset: 0;
  mix-blend-mode: soft-light;
  opacity: 0.04;
  pointer-events: none;
  position: fixed;
  z-index: 15;
}

a {
  color: inherit;
}

a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 5px;
}

.skip-link {
  background: var(--cream);
  color: var(--ink);
  left: 1rem;
  padding: 0.7rem 1rem;
  position: fixed;
  top: -5rem;
  z-index: 100;
}

.skip-link:focus {
  top: 1rem;
}

.site-header {
  align-items: center;
  background: #051433;
  border-bottom: 1px solid var(--nav-border);
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  min-height: 4.6rem;
  padding: 0 var(--page-pad);
  position: sticky;
  top: 0;
  z-index: 20;
}

.header-right {
  align-items: center;
  display: flex;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.header-logo {
  display: block;
  flex: 0 0 auto;
  height: 2.6rem;
  width: auto;
}

.header-logo img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: auto;
}

.wordmark {
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-decoration: none;
  text-transform: uppercase;
}

.wordmark span {
  color: var(--gold-readable);
}

nav {
  display: flex;
  gap: clamp(1rem, 3vw, 2.5rem);
}

nav a {
  color: var(--cream-muted);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  padding: 0.75rem 0;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
}

nav a::after {
  background: var(--gold-readable);
  bottom: 0.35rem;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 160ms ease;
  width: 100%;
}

nav a:hover::after,
nav a:focus-visible::after {
  transform: scaleX(1);
}

main {
  overflow: clip;
}

.hero {
  --hero-focal: 70% 50%;
  align-items: center;
  background:
    radial-gradient(circle at 72% 20%, rgba(169, 140, 75, 0.06), transparent 32%),
    radial-gradient(ellipse at 68% 34%, rgba(22, 32, 58, 0.88), var(--navy) 42%, var(--navy-deep) 82%);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: min(calc(100svh - 4.6rem), 54rem);
  padding: clamp(2rem, 5vh, 3.5rem) var(--page-pad) 2.5rem;
  position: relative;
}

.hero-photo,
.hero-scrim {
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.hero-photo {
  background-position: var(--hero-focal);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
}

.hero-photo picture,
.hero-photo img {
  display: block;
  height: 100%;
  width: 100%;
}

.hero-photo img {
  object-fit: cover;
  object-position: var(--hero-focal);
}

.hero-scrim {
  background:
    radial-gradient(circle at 72% 20%, rgba(169, 140, 75, 0.05), transparent 32%),
    radial-gradient(circle at 24% 32%, rgba(16, 24, 44, 0.32), transparent 52%),
    linear-gradient(90deg, rgba(12, 18, 34, 0.88) 0%, rgba(12, 18, 34, 0.76) 42%, rgba(12, 18, 34, 0.3) 100%);
  z-index: 1;
}

.hero-grid {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 4.25rem 4.25rem;
  inset: 0;
  mask-image: linear-gradient(to bottom, transparent, black 25%, black 80%, transparent);
  opacity: 0.85;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.hero::before,
.hero::after {
  content: "";
  pointer-events: none;
  position: absolute;
}

.hero::before {
  border-left: 1px solid var(--gold-line);
  bottom: 3rem;
  left: var(--page-pad);
  top: 3rem;
}

.hero::after {
  border-right: 1px solid var(--gold-line);
  border-top: 1px solid var(--gold-line);
  height: 2.5rem;
  right: var(--page-pad);
  top: 3rem;
  width: 2.5rem;
}

.hero::before,
.hero::after {
  z-index: 3;
}

.hero-content {
  max-width: var(--content-max);
  padding-left: clamp(1rem, 3vw, 3rem);
  position: relative;
  scroll-margin-top: 4.6rem;
  width: 100%;
  z-index: 4;
}

.eyebrow {
  align-items: center;
  color: var(--gold-readable);
  display: flex;
  font-size: 0.67rem;
  font-weight: 700;
  gap: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
  text-wrap: balance;
}

h1 {
  font-size: clamp(3.8rem, 7vw, 7.2rem);
  letter-spacing: -0.025em;
  line-height: 0.82;
  margin-top: 0;
  position: relative;
  z-index: 2;
}

h1 em {
  color: var(--cream);
  display: block;
  font-weight: 400;
}

.hero-monogram {
  color: var(--cream-ghost);
  font-family: var(--serif);
  font-size: clamp(12rem, 28vw, 30rem);
  letter-spacing: -0.13em;
  line-height: 0.68;
  -webkit-mask-image: linear-gradient(to right, black 0%, black 82%, transparent 100%);
  mask-image: linear-gradient(to right, black 0%, black 82%, transparent 100%);
  pointer-events: none;
  position: absolute;
  right: -0.02em;
  top: 12%;
  white-space: nowrap;
  z-index: 2;
}

.hero-monogram span {
  color: var(--gold-line);
}

.hero-intro {
  align-items: start;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: rgba(22, 32, 58, 0.55);
  border: 1px solid var(--gold-line);
  box-shadow: inset 0 1px 0 rgba(241, 234, 217, 0.14);
  display: grid;
  gap: 1.1rem;
  margin-top: clamp(2.5rem, 6vh, 4rem);
  max-width: min(48rem, 100%);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}

.hero-intro p {
  color: var(--cream-muted);
  font-size: clamp(0.95rem, 1.35vw, 1.13rem);
  max-width: 68ch;
}

.hero-intro-close {
  text-wrap: balance;
}

.hero-intro p.hero-guarantee {
  color: var(--cream);
}

.hero-guarantee {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.button {
  align-items: center;
  background: transparent;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  color: var(--cream-muted);
  display: inline-flex;
  font-size: 0.64rem;
  font-weight: 700;
  gap: 2rem;
  justify-content: space-between;
  letter-spacing: 0.1em;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.button-primary {
  border-color: var(--cream);
  color: var(--cream);
  min-width: 12.5rem;
}

.button-secondary {
  border-color: var(--gold-line);
  color: var(--cream-muted);
}

.button:hover,
.button:focus-visible {
  background: rgba(241, 234, 217, 0.06);
  border-color: var(--cream);
  color: var(--cream);
}

/* Dark button for cream bands: ink outline, fills ink on hover. */
.button-ink {
  border-color: var(--ink);
  color: var(--ink);
  gap: 1rem;
  justify-content: center;
  min-width: 12.5rem;
}

.button-ink:hover,
.button-ink:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}

/* Palantir-style header: logo and a compact solid Get Started button share
   the top row; the nav links sit on their own row beneath, so the button
   lands top-right directly above Team. */
.header-top {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-height: 3.6rem;
}

.header-cta {
  background: var(--cream);
  color: var(--navy);
  flex: 0 0 auto;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.35rem 0.8rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 160ms ease, color 160ms ease;
  white-space: nowrap;
}

.header-cta:hover,
.header-cta:focus-visible {
  background: var(--gold-readable);
  color: var(--navy);
}

/* Closing call-to-action band before the footer. */
.cta-section {
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.cta-section .section-heading {
  grid-column: 2;
}

/* The closing CTA is always filled navy. */
.cta-section .button-ink {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}

.cta-section .button-ink:hover,
.cta-section .button-ink:focus-visible {
  background: var(--navy-raised);
  border-color: var(--navy-raised);
  color: var(--cream);
}

.cta-copy {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  grid-column: 3;
  max-width: 34rem;
}

.cta-copy p {
  color: var(--navy-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.cta-copy .button {
  align-self: flex-start;
}

.section {
  display: grid;
  gap: 3rem 4rem;
  grid-template-columns: 4rem minmax(0, 0.85fr) minmax(18rem, 1fr);
  padding-bottom: clamp(4rem, 8vw, 7rem);
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
  padding-top: clamp(2.75rem, 5.5vw, 4.75rem);
  position: relative;
  scroll-margin-top: 4.5rem;
}

.section-heading {
  grid-column: 2 / -1;
}

.section-heading h2 {
  font-size: clamp(3rem, 5vw, 5.5rem);
  letter-spacing: -0.02em;
  line-height: 0.9;
  margin-top: 1.25rem;
}

.section-intro {
  align-self: end;
  border-top: 1px solid var(--ink-line);
  grid-column: 2 / -1;
  padding-top: 1rem;
}

.section-intro p {
  color: var(--navy-muted);
  margin-top: 1rem;
  max-width: 55ch;
}

.section-light {
  background: var(--cream);
  color: var(--ink);
}

.section-light .eyebrow,
.section-cream .eyebrow {
  color: var(--gold-dark);
}

.service-list {
  border-top: 1px solid var(--ink-line);
  grid-column: 2 / -1;
  list-style: none;
}

.service-list li {
  align-items: baseline;
  border-bottom: 1px solid var(--ink-line);
  display: grid;
  gap: 1rem 2rem;
  grid-template-columns: 4rem minmax(10rem, 0.7fr) minmax(16rem, 1fr);
  padding: clamp(1.4rem, 3vw, 2.4rem) 0;
}

.service-number {
  color: var(--gold-dark);
  font-size: 0.63rem;
  font-weight: 700;
}

.service-list h3 {
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  line-height: 1;
}

.service-list p {
  color: var(--navy-muted);
  max-width: 48ch;
}

.section-navy {
  background:
    radial-gradient(circle at 30% 20%, rgba(169, 140, 75, 0.05), transparent 34%),
    radial-gradient(ellipse at 30% 20%, rgba(22, 32, 58, 0.72), rgba(16, 24, 44, 0.92) 52%, var(--navy-deep) 100%),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    var(--navy-deep);
  background-size: auto, auto, 5rem 100%, auto;
}

.section-navy .section-navy::before,
.section-cream::before {
  content: "";
  height: 4rem;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
}

.section-navy::before {
  background: linear-gradient(to bottom, rgba(12, 18, 34, 0.3), transparent);
}

.section-cream::before {
  background: linear-gradient(to bottom, rgba(16, 24, 44, 0.1), transparent);
}

/* Clients is live; retain the supporting layout patterns for future approved content. */
.client-layout {
  display: grid;
  gap: clamp(2.5rem, 4vw, 4rem);
  grid-column: 2 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1rem;
}

.large-copy {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.6vw, 2.6rem);
  line-height: 1.14;
  max-width: 34ch;
}

.pending-panel {
  align-items: center;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  display: grid;
  gap: 1.4rem;
  grid-template-columns: auto 1fr;
  padding: clamp(1.4rem, 4vw, 2.7rem);
  position: relative;
}

.pending-panel::before,
.pending-panel::after {
  border-color: var(--gold-readable);
  border-style: solid;
  content: "";
  height: 0.75rem;
  position: absolute;
  width: 0.75rem;
}

.pending-panel::before {
  border-width: 1px 0 0 1px;
  left: -1px;
  top: -1px;
}

.pending-panel::after {
  border-width: 0 1px 1px 0;
  bottom: -1px;
  right: -1px;
}

.pending-mark {
  color: var(--gold-readable);
  font-family: var(--serif);
  font-size: 4rem;
  line-height: 1;
}

.pending-panel h3 {
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  line-height: 1;
  margin-top: 1rem;
}

.pending-panel p {
  color: var(--cream-muted);
  font-size: 0.8rem;
  margin-top: 0.8rem;
  max-width: 50ch;
}

.sector-line {
  border-bottom: 1px solid var(--cream-line);
  border-top: 1px solid var(--cream-line);
  display: grid;
  grid-column: 2 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
}

.sector-line li {
  color: var(--cream-muted);
  font-family: var(--serif);
  font-size: 0.9rem;
  font-style: italic;
  letter-spacing: 0;
  padding: 1rem;
  text-align: center;
  text-transform: none;
}

.sector-line li + li {
  border-left: 1px solid var(--cream-line);
}

.testimonial-carousel {
  display: grid;
  gap: 1rem;
  grid-auto-columns: calc((100% - 2rem) / 3);
  grid-auto-flow: column;
  grid-column: 2 / -1;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--gold-line) transparent;
  width: 100%;
}

.testimonial-card {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: rgba(22, 32, 58, 0.55);
  border: 1px solid var(--gold-line);
  box-shadow: inset 0 1px 0 rgba(241, 234, 217, 0.14);
  display: flex;
  flex-direction: column;
  min-height: 22rem;
  min-width: 0;
  padding: clamp(1.4rem, 3vw, 2rem);
  scroll-snap-align: start;
}

.testimonial-mark {
  color: var(--gold-line-strong);
  font-family: var(--serif);
  font-size: clamp(7rem, 12vw, 11rem);
  font-style: italic;
  line-height: 0.55;
  opacity: 0.55;
}

/* Quote cards share a row with tall video cards, so the card is much taller
   than its text. The auto margins center the quote in the leftover space —
   mark at top, byline at bottom — instead of pooling it all in one gap. */
.testimonial-quote {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.1vw, 2.35rem);
  line-height: 1.16;
  margin: auto 0;
}

.testimonial-video {
  /* 9:16 is the natural size; flex-grow lets the frame absorb the card's
     leftover height (video crops via object-fit) so short bylines don't
     leave blank space at the bottom of the card. */
  aspect-ratio: 9 / 16;
  flex: 1 0 auto;
  background: var(--navy-deep);
  border: 1px solid var(--gold-line);
  overflow: hidden;
  width: 100%;
}

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

.testimonial-byline {
  align-items: center;
  display: flex;
  gap: 0.85rem;
  margin-top: 1rem;
}

.testimonial-byline .testimonial-attribution {
  margin-top: 0;
}

.testimonial-headshot {
  align-items: center;
  border: 1px solid var(--gold-line-strong);
  border-radius: 50%;
  color: var(--gold-line-strong);
  display: flex;
  flex: none;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: italic;
  height: 3.4rem;
  justify-content: center;
  overflow: hidden;
  width: 3.4rem;
}

.testimonial-headshot img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* Byline names link out to each client's page; the gold underline and
   trailing arrow make the tap target obvious against the plain byline text. */
.testimonial-attribution a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--gold-line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.testimonial-attribution a::after {
  color: var(--gold-line-strong);
  content: "\00a0\2197";
  font-style: normal;
}

.testimonial-attribution a:hover,
.testimonial-attribution a:focus-visible {
  color: var(--gold-line-strong);
}

.testimonial-attribution,
.media-caption {
  color: var(--cream-muted);
  font-family: var(--serif);
  font-size: 1rem;
  font-style: italic;
  letter-spacing: 0;
  margin-top: 1rem;
  text-align: left;
  text-transform: none;
}

.media-panel {
  align-items: center;
  aspect-ratio: 16 / 9;
  background: var(--navy-deep);
  border: 1px solid var(--gold-line);
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.section-navy .media-panel,
.media-panel--glass {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: rgba(22, 32, 58, 0.55);
  box-shadow: inset 0 1px 0 rgba(241, 234, 217, 0.14);
}

.media-panel-placeholder {
  color: var(--cream-quiet);
  font-family: var(--serif);
  font-size: 0.9rem;
  font-style: italic;
}

.media-panel-play {
  color: var(--gold-line-strong);
  font-size: 2.4rem;
  line-height: 1;
  opacity: 0.55;
}

.section-cream {
  background:
    radial-gradient(circle at 30% 20%, rgba(241, 234, 217, 0.58), transparent 52%),
    var(--cream-deep);
  color: var(--ink);
}

/* Headline experience figures — partner-supplied, approved 2026-08-01.
   Source of truth: documents/facts/experience.md ("Headline experience stats").
   Two-column Experience composition (heading left, 2x2 stat-box grid right)
   is Tim's direction, 2026-08-01; see .experience-section overrides below. */
.headline-stats {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-column: 2 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.headline-stats li {
  border: 1px solid var(--gold-line);
  display: grid;
  gap: 0.75rem;
  padding: clamp(1.1rem, 2vw, 1.6rem);
}

/* Experience: heading occupies the section's middle column, the stat grid
   occupies the wide right column, sitting side by side and top-aligned —
   both are placed in the same grid row, so they share a top edge by default. */
.experience-section .section-heading {
  grid-column: 2;
}

.experience-section .headline-stats {
  grid-column: 3;
  margin-top: 0;
}

.headline-stat-value {
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(3.2rem, 5.4vw, 5.6rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 0.85;
  white-space: nowrap;
}

.headline-stat-mark {
  color: var(--gold-dark);
}

.headline-stat-label {
  color: var(--navy-muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
}

.team-section {
  padding-bottom: clamp(5rem, 9vw, 8rem);
  padding-top: clamp(2.75rem, 5.5vw, 4.75rem);
  row-gap: 1.5rem;
  scroll-margin-top: 4.6rem;
}

.team-section .section-heading {
  grid-column: 2 / -1;
  text-align: left;
}

.team-grid {
  border-top: 1px solid var(--gold-line);
  display: grid;
  grid-column: 2 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Five shared bands — portrait, role, name, bullets, education — so every card's
     names, bullet lists, and hairlines land on the same y even when a role kicker
     wraps. The bullets band is the flexible one (1fr): it top-aligns the bullet
     lists and lets the education blocks bottom-align on a single shared hairline. */
  grid-template-rows: auto auto auto 1fr auto;
}

.person {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  padding: clamp(1.2rem, 2.5vw, 2rem);
}

/* Structural wrapper only: role and name are placed on the card's shared bands. */
.person-copy {
  display: contents;
}

.person + .person {
  border-left: 1px solid var(--gold-line);
}

.portrait-placeholder {
  align-items: end;
  aspect-ratio: 1 / 1;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: rgba(22, 32, 58, 0.55);
  border: 1px solid var(--gold-line);
  box-shadow: inset 0 1px 0 rgba(241, 234, 217, 0.14);
  color: var(--gold-line-strong);
  display: flex;
  font-family: var(--serif);
  font-size: clamp(3.5rem, 8vw, 7.2rem);
  justify-content: flex-end;
  line-height: 0.78;
  overflow: hidden;
  padding: 0 0.2rem;
  position: relative;
}

.portrait-photo {
  padding: 0;
}

.portrait-photo img {
  display: block;
  filter: saturate(0.85);
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.portrait-photo::after {
  box-shadow: inset 0 1px 0 rgba(241, 234, 217, 0.14);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.portrait-placeholder::before {
  border-left: 1px solid var(--gold-readable);
  border-top: 1px solid var(--gold-readable);
  content: "";
  height: 1rem;
  left: -1px;
  position: absolute;
  top: -1px;
  width: 1rem;
  z-index: 2;
}

.person-role {
  border-top: 1px solid var(--gold-line);
  color: var(--cream-muted);
  font-family: var(--serif);
  font-size: 0.95rem;
  font-style: italic;
  letter-spacing: 0;
  margin-top: 1.3rem;
  padding-top: 1.2rem;
  text-transform: none;
}

.person h3 {
  font-size: clamp(1.75rem, 2.25vw, 2.4rem);
  line-height: 0.98;
  margin-top: 0.65rem;
  white-space: nowrap;
}

.person-points {
  align-content: start;
  color: var(--cream-muted);
  display: grid;
  font-size: 0.72rem;
  gap: 0.55rem;
  line-height: 1.45;
  list-style: none;
  margin-top: 1.1rem;
  padding-bottom: 1.4rem;
}

.person-points li {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: 0.3rem 1fr;
}

/* Square gold tick, matching the portrait corner tick and the site's hairline geometry. */
.person-points li::before {
  background: var(--gold-readable);
  content: "";
  height: 0.3rem;
  margin-top: 0.42em;
  width: 0.3rem;
}

/* Prose alternative to .person-points. It sits on the same shared band and carries
   the same type and colour, so a prose card and a bulleted card still line up. */
.person-bio {
  align-content: start;
  color: var(--cream-muted);
  display: grid;
  font-size: 0.72rem;
  gap: 0.75rem;
  line-height: 1.55;
  margin-top: 1.1rem;
  padding-bottom: 1.4rem;
}

.person-education {
  align-content: start;
  border-top: 1px solid var(--gold-line);
  display: grid;
  gap: 0.85rem;
  list-style: none;
  padding-top: 1.1rem;
}

/* Shield left, text right. A school with no shield either omits .edu-logo entirely
   (text-only, flush with the bullet copy above) or, when a sibling entry does carry a
   shield, keeps an empty .edu-logo so both school names share one left edge. */
.edu-item {
  align-items: center;
  display: flex;
  gap: 0.7rem;
  min-width: 0;
}

/* Square slot sized for a shield: the mark is height-constrained and centered inside
   a fixed width, so every entry's text starts at the same x. */
.edu-logo {
  align-items: center;
  display: flex;
  flex: none;
  height: 1.9rem;
  justify-content: center;
  width: 1.9rem;
}

/* Wide marks (athletics scripts, wordmarks) do not fit a shield square: contained inside
   1.9rem they render barely half as tall as a shield and read weakly. This modifier goes
   on the <ul> — not the individual entry — so every slot in that card widens together and
   all of the card's school names keep one left edge. Marks are flush left in the wider
   slot, so the mark column still starts at the card's content edge on every card. */
.person-education--wide-mark .edu-logo {
  justify-content: flex-start;
  width: 2.9rem;
}

.edu-logo img {
  display: block;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  opacity: 0.85;
  width: auto;
}

.edu-text {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.6rem;
  min-width: 0;
}

.edu-school {
  color: var(--cream);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.15;
}

.edu-year {
  color: var(--cream-quiet);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- FAQ (#faq) ----------
   Content source of truth: documents/facts/faq.md — edit that file first, then
   the markup in index.html. Native <details>/<summary>: independent-open, works
   with JavaScript disabled. Raised panels on navy, square corners, gold used only
   as hairlines and the +/- marker. */

.faq-section .section-heading h2 {
  margin-top: 1rem;
}

/* Left edge stays on the section content column with the kicker and heading; the
   measure is capped (not centered) so a one-line question and its +/- marker read
   as one unit instead of being split by a long empty run at desktop widths. The
   cap is wide enough to hold the answers' 60ch mono measure. */
.faq-list {
  display: grid;
  gap: 1rem;
  grid-column: 2 / -1;
  max-width: 48rem;
  min-width: 0;
}

.faq-item {
  background: var(--navy-raised);
  border: 1px solid var(--gold-line);
  box-shadow: inset 0 1px 0 rgba(241, 234, 217, 0.1);
  /* Scoped so only the disclosure boxes can animate to a keyword size. */
  interpolate-size: allow-keywords;
}

/* Native disclosure: strip every default marker in every engine. */
.faq-item summary {
  align-items: baseline;
  cursor: pointer;
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  list-style: none;
  min-height: 3rem;
  padding: clamp(1.2rem, 2.2vw, 1.6rem) clamp(1.2rem, 2.2vw, 1.75rem);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::marker {
  content: "";
  font-size: 0;
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.faq-q {
  color: var(--cream);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.15;
  text-wrap: balance;
}

.faq-marker {
  color: var(--gold-readable);
  flex: none;
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1;
  transition: opacity 160ms ease;
}

.faq-marker::before {
  content: "+";
}

.faq-item[open] .faq-marker::before {
  content: "\2013";
}

.faq-item summary:hover .faq-marker {
  opacity: 0.7;
}

.faq-answer {
  color: var(--cream-muted);
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.7;
  max-width: 60ch;
}

.faq-answer-inner {
  border-top: 1px solid var(--gold-line);
  margin: 0 clamp(1.2rem, 2.2vw, 1.75rem);
  padding: 1.2rem 0 clamp(1.2rem, 2.2vw, 1.6rem);
}

.faq-answer-inner > * + * {
  margin-top: 0.85rem;
}

/* Modern engines: animate the disclosure box itself, both directions. */
@supports selector(details::details-content) {
  .faq-item::details-content {
    block-size: 0;
    opacity: 0;
    overflow: hidden;
    transition:
      block-size 260ms ease,
      opacity 200ms ease,
      content-visibility 260ms;
    transition-behavior: allow-discrete;
  }

  .faq-item[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

/* Fallback: fade the answer in on open only. */
@supports not selector(details::details-content) {
  .faq-item[open] .faq-answer-inner {
    animation: faq-reveal 240ms ease both;
  }
}

@keyframes faq-reveal {
  from {
    opacity: 0;
    transform: translateY(-0.35rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.site-footer {
  align-items: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(169, 140, 75, 0.04), transparent 36%),
    var(--navy-deep);
  border-top: 1px solid var(--gold-line);
  color: var(--cream-quiet);
  display: grid;
  font-size: 0.58rem;
  gap: 1rem;
  grid-template-columns: 1fr auto 1fr;
  letter-spacing: 0.09em;
  padding: clamp(3.75rem, 7vw, 5rem) var(--page-pad);
  text-transform: uppercase;
}

.site-footer p:last-child {
  text-align: right;
}

@supports not ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
  .hero-intro,
  .portrait-placeholder,
  .testimonial-card,
  .section-navy .media-panel,
  .media-panel--glass {
    background: var(--navy-raised);
  }
}

@media (max-width: 900px) {
  .hero {
    --hero-focal: 75% 50%;
  }

  h1 {
    font-size: clamp(3.2rem, 9vw, 5rem);
  }

  .section-heading h2 {
    font-size: clamp(2.5rem, 6vw, 3.5rem);
  }

  .large-copy {
    font-size: clamp(1.7rem, 4vw, 2.3rem);
  }

  .person h3 {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
  }

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

  .section-heading {
    grid-column: 2;
  }

  .section-intro,
  .service-list,
  .client-layout,
  .sector-line,
  .headline-stats,
  .testimonial-carousel,
  .team-grid,
  .faq-list {
    grid-column: 2;
  }

  .experience-section .headline-stats {
    grid-column: 2;
    margin-top: clamp(2.5rem, 5vw, 4rem);
  }

  .testimonial-carousel {
    grid-auto-columns: calc((100% - 1rem) / 2);
  }

  .section-intro {
    max-width: 42rem;
  }

  .client-layout {
    grid-template-columns: 1fr;
  }

  .team-grid {
    gap: 2.5rem;
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .team-section {
    padding-top: 3rem;
    row-gap: 1.5rem;
    scroll-margin-top: 4.6rem;
  }

  /* Tablet: portrait left, copy stack right. Subgrid is dropped; the role, name,
     bullets, and education rows are placed explicitly in the copy column. */
  .person {
    column-gap: 1.5rem;
    display: grid;
    grid-row: auto;
    grid-template-columns: minmax(9rem, 0.7fr) minmax(14rem, 1.3fr);
    grid-template-rows: auto auto auto 1fr;
    padding: 1.5rem 0;
    row-gap: 0;
  }

  .person .portrait-placeholder {
    align-self: start;
    grid-column: 1;
    grid-row: 1 / span 4;
  }

  .person-role,
  .person h3,
  .person-points,
  .person-bio,
  .person-education {
    grid-column: 2;
  }

  .person-role {
    grid-row: 1;
    margin-top: 0;
  }

  .person h3 {
    grid-row: 2;
  }

  .person-points,
  .person-bio {
    grid-row: 3;
  }

  .person-education {
    align-self: end;
    grid-row: 4;
  }

  .person + .person {
    border-left: 0;
    border-top: 1px solid var(--gold-line);
  }
}

@media (max-width: 680px) {
  .site-header {
    align-items: stretch;
    display: block;
    min-height: auto;
    padding: 0;
  }

  .site-header .header-logo {
    display: block;
    height: 3.45rem;
    margin-left: var(--page-pad);
    padding: 0.45rem 0;
    width: min(8rem, calc(100% - var(--page-pad) - var(--page-pad)));
  }

  nav {
    border-top: 1px solid var(--nav-border);
    display: grid;
    gap: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow-x: auto;
  }

  /* Mobile: nav links and the CTA share one five-cell row. */
  .header-right {
    border-top: 1px solid var(--nav-border);
    display: grid;
    gap: 0;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .header-right nav {
    display: contents;
  }

  .header-cta {
    align-items: center;
    display: flex;
    font-size: 0.51rem;
    justify-content: center;
    letter-spacing: 0.08em;
    min-height: 2.4rem;
    padding: 0.55rem 0.25rem;
  }

  .cta-copy {
    grid-column: 2;
  }

  .cta-copy .button {
    align-self: flex-start;
    width: auto;
  }

  nav a {
    align-items: center;
    border-right: 1px solid var(--nav-border);
    display: flex;
    font-size: 0.51rem;
    justify-content: center;
    min-height: 2.4rem;
    padding: 0.55rem 0.25rem;
    text-align: center;
  }

  nav a:last-child {
    border-right: 0;
  }

  nav a::after {
    display: none;
  }

  .hero {
    --hero-focal: 72% 45%;
    align-items: start;
    min-height: auto;
    overflow-x: clip;
    padding-bottom: 2rem;
    padding-top: 1.5rem;
  }

  .hero-scrim {
    background:
      radial-gradient(circle at 72% 20%, rgba(169, 140, 75, 0.05), transparent 32%),
      radial-gradient(circle at 26% 30%, rgba(16, 24, 44, 0.34), transparent 52%),
      linear-gradient(90deg, rgba(12, 18, 34, 0.9), rgba(12, 18, 34, 0.68));
  }

  .hero::before {
    display: none;
  }

  .hero::after {
    height: 1.4rem;
    top: 1.8rem;
    width: 1.4rem;
  }

  .hero-content {
    padding-left: 0;
    scroll-margin-top: 5.85rem;
  }

  h1 {
    font-size: clamp(3.4rem, 13.5vw, 4.5rem);
  }

  .section-heading h2 {
    font-size: clamp(2rem, 8vw, 2.5rem);
  }

  .large-copy {
    font-size: clamp(1.6rem, 6.5vw, 1.7rem);
  }

  .person h3 {
    font-size: clamp(1.65rem, 7vw, 1.75rem);
  }

  .hero-monogram {
    font-size: 14.5rem;
    left: 50%;
    -webkit-mask-image: radial-gradient(ellipse at 50% 45%, black 28%, transparent 76%);
    mask-image: radial-gradient(ellipse at 50% 45%, black 28%, transparent 76%);
    opacity: 0.7;
    right: auto;
    top: 1.4rem;
    transform: translateX(-50%);
  }

  .hero-intro {
    gap: 0.85rem;
    margin-top: 1.6rem;
  }

  .hero-guarantee {
    font-size: 0.95rem;
  }

  .hero .logo-marquee {
    margin-top: 1.8rem;
  }

  .marquee-kicker {
    margin-bottom: 1rem;
  }

  .button {
    width: 100%;
  }

  .section {
    gap: 2rem 1rem;
    grid-template-columns: 1.2rem minmax(0, 1fr);
    scroll-margin-top: 5.8rem;
  }

  .headline-stats,
  .experience-section .headline-stats {
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 2rem;
  }

  .testimonial-carousel {
    grid-auto-columns: 85%;
  }

  .headline-stats li {
    gap: 0.5rem;
    padding: 0.9rem;
  }

  .headline-stat-value {
    font-size: clamp(2.2rem, 11vw, 3rem);
  }

  .headline-stat-label {
    font-size: 0.53rem;
    letter-spacing: 0.1em;
    line-height: 1.35;
  }

  .service-list li {
    gap: 0.5rem;
    grid-template-columns: 2rem 1fr;
  }

  .service-list p {
    grid-column: 2;
  }

  .pending-panel {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .pending-mark {
    display: none;
  }

  .sector-line {
    grid-template-columns: 1fr 1fr;
  }

  .sector-line li:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--cream-line);
  }

  .sector-line li:nth-child(4) {
    border-top: 1px solid var(--cream-line);
  }

  /* Mobile: a single column, and the credential is pulled up under the name so a
     card reads portrait, role, name, school, bio. In DOM order the education block
     is last, which put it between its own hairline and the next card's divider —
     two identical gold rules — where it read as the *next* person's credential.
     .person-copy is display: contents, so the role and the name are direct flex
     items here and `order` applies to them. Cross-axis alignment stays `stretch`:
     the role's gold rule must span the full card width, so shrink-to-fit is wrong. */
  .person {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: clamp(1.75rem, 7vw, 2.5rem) 0;
  }

  .person .portrait-placeholder {
    align-self: start;
    order: 1;
  }

  .person:first-child {
    padding-top: 0.75rem;
  }

  .team-grid {
    gap: 0;
    grid-column: 1 / -1;
  }

  .team-section .logo-marquee {
    grid-column: 1 / -1;
  }

  .team-section {
    padding-bottom: 2rem;
    padding-top: 2rem;
    row-gap: 1rem;
    scroll-margin-top: 5.85rem;
  }

  .portrait-placeholder {
    max-height: none;
    max-width: 100%;
    width: min(15rem, 68vw);
  }

  .person-role {
    margin-top: 0.875rem;
    order: 2;
    padding-top: 0.875rem;
  }

  .person h3 {
    font-size: clamp(1.35rem, 6vw, 1.65rem);
    margin-top: 0.35rem;
    order: 3;
  }

  /* Directly under the name, so the credential is unambiguously this person's.
     The hairline and its padding are dropped: the only gold rules left in a card
     are the one under the portrait and the divider to the next person. */
  .person-education {
    align-self: stretch;
    border-top: 0;
    gap: 0.7rem;
    margin-top: 0.8rem;
    max-width: 48ch;
    order: 4;
    padding-top: 0;
  }

  .person-points,
  .person-bio {
    margin-top: 1.15rem;
    order: 5;
    padding-bottom: 0;
  }

  .person-points {
    gap: 0.5rem;
    max-width: 48ch;
  }

  .edu-logo {
    height: 1.7rem;
    width: 1.7rem;
  }

  .person-education--wide-mark .edu-logo {
    width: 2.6rem;
  }

  .edu-school {
    font-size: 0.95rem;
  }

  .site-footer {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .site-footer p:last-child {
    text-align: left;
  }
}

/* The marquee is framed as a band: a hairline under the kicker and a hairline
   under the strip, matching the .sector-line treatment. The rules live outside
   the masked viewport so they stay full-width while the logos fade out, and so
   the strip still reads as a deliberate band once the kicker has scrolled up
   behind the sticky nav. */
.logo-marquee {
  border-bottom: 1px solid var(--cream-line);
  grid-column: 2 / -1;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  min-width: 0;
  padding-bottom: clamp(1rem, 2vw, 1.4rem);
}

.marquee-kicker {
  border-bottom: 1px solid var(--cream-line);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  margin-bottom: 1.3rem;
  padding-bottom: 0.85rem;
  text-transform: uppercase;
}

.section-cream .logo-marquee,
.section-cream .marquee-kicker {
  border-bottom-color: var(--ink-line);
}

.section-cream .marquee-kicker {
  color: var(--navy-muted);
}

.section-navy .marquee-kicker,
.hero .marquee-kicker,
.team-section .marquee-kicker {
  color: var(--cream-muted);
}

.hero .logo-marquee {
  margin-top: clamp(2rem, 5vh, 3.5rem);
}

.team-section .logo-marquee {
  margin-top: clamp(0.5rem, 1.5vw, 1.25rem);
}

.marquee-viewport {
  display: flex;
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  overflow: hidden;
}

.marquee-track {
  align-items: center;
  animation: marquee-scroll 45s linear infinite;
  display: flex;
  flex: none;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  list-style: none;
  margin: 0;
  padding: 0 clamp(1.25rem, 2.5vw, 2.25rem);
}

.logo-marquee:hover .marquee-track,
.logo-marquee:focus-within .marquee-track {
  animation-play-state: paused;
}

.marquee-track li {
  flex: none;
}

.marquee-track img {
  display: block;
  height: 30px;
  opacity: 0.85;
  width: auto;
}

.marquee-track img.logo-sm {
  height: 26px;
}

.marquee-track img.logo-tall {
  height: 46px;
}

@keyframes marquee-scroll {
  to {
    transform: translateX(-100%);
  }
}

@media (max-width: 680px) {
  .marquee-track img {
    height: 24px;
  }

  .marquee-track img.logo-sm {
    height: 21px;
  }

  .marquee-track img.logo-tall {
    height: 38px;
  }

  /* Narrow viewport: fade a quarter of the strip on each side so clipped logos
     read as "there is more" rather than as a hard crop against the navy, and
     slow the loop so the drift is calm at phone width. */
  .marquee-viewport {
    -webkit-mask-image: linear-gradient(to right, transparent, black 24%, black 76%, transparent);
    mask-image: linear-gradient(to right, transparent, black 24%, black 76%, transparent);
  }

  .marquee-track {
    animation-duration: 70s;
    gap: 3.25rem;
  }

  /* Tighter band padding on small screens. These live in this second
     max-width: 680px block because it follows the base marquee rules — the
     earlier 680px block is overridden by them at equal specificity. */
  .marquee-kicker {
    margin-bottom: 0.9rem;
    padding-bottom: 0.7rem;
  }

  .logo-marquee {
    padding-bottom: 1rem;
  }

  .faq-q {
    font-size: 1.08rem;
  }

  .faq-item summary {
    gap: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }

  .marquee-track {
    animation: none;
  }

  .marquee-track[aria-hidden="true"] {
    display: none;
  }

  .marquee-viewport {
    -webkit-mask-image: none;
    mask-image: none;
    overflow-x: auto;
  }

  /* FAQ disclosures open and close instantly — no size interpolation, no fade. */
  .faq-item {
    interpolate-size: numeric-only;
  }

  .faq-item::details-content {
    block-size: auto;
    opacity: 1;
    transition: none;
  }

  .faq-item[open] .faq-answer-inner {
    animation: none;
  }
}