/* Infinity OpEx: shared styles */

:root {
  --navy: #0B1F3A;
  --brass: #C9A66B;
  --bone: #F5F2EA;
  --white: #FFFFFF;
  --ink-on-navy: #E6E1D6;
  --rule-on-navy: rgba(245, 242, 234, 0.18);
  --rule: rgba(11, 31, 58, 0.16);
  /* Secondary text, on light grounds only. */
  --ink-soft: #4F5B6E;
  /* Brass for text and fine lines on bone or white. Light brass stays on navy. */
  --brass-text: #86672F;

  /* Newsreader semibold for headlines; Manrope for everything people read. */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-head: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  --gutter: clamp(20px, 5vw, 64px);
  --measure: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
}

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

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

/* Buttons */

.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 0.95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.btn-primary {
  background: var(--brass);
  color: var(--navy);
}
.btn-primary:hover { background: #D6B67F; }

.btn-secondary {
  background: transparent;
  color: var(--white);
  border-color: rgba(245, 242, 234, 0.55);
}
.btn-secondary:hover {
  border-color: var(--white);
  background: rgba(245, 242, 234, 0.06);
}

/* Home: opening */

.opening {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy);
  color: var(--white);
  min-height: min(92vh, 900px);
  display: flex;
  align-items: center;
  padding: clamp(96px, 14vh, 160px) 0;
}

.opening__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* Two stacked videos crossfade through the montage. */
.opening__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 1200ms ease;
}
.opening__video.is-active { opacity: 1; }

/* Navy wash: heavy behind the text, lighter toward the right so the line reads. */
.opening__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11, 31, 58, 0.94) 0%, rgba(11, 31, 58, 0.86) 45%, rgba(11, 31, 58, 0.45) 100%),
    linear-gradient(0deg, rgba(11, 31, 58, 0.55) 0%, rgba(11, 31, 58, 0) 40%);
}

.opening__inner { width: 100%; }

/* Room for the fixed header that sits over the opening. */
.has-overlay-header .opening { padding-top: clamp(150px, 20vh, 200px); }

.opening__toggle {
  position: absolute;
  right: var(--gutter);
  bottom: 28px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(245, 242, 234, 0.55);
  background: rgba(11, 31, 58, 0.4);
  color: var(--white);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.opening__toggle:hover { border-color: var(--white); }

/* Pause icon: two bars. Play icon when paused: a triangle. */
.opening__toggle-icon {
  width: 10px;
  height: 12px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.opening.is-paused .opening__toggle-icon {
  width: 0;
  height: 0;
  border-right: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid currentColor;
  margin-left: 3px;
}

@media (max-width: 640px) {
  .opening__media::after {
    background: linear-gradient(180deg, rgba(11, 31, 58, 0.82) 0%, rgba(11, 31, 58, 0.92) 100%);
  }
}

.opening__rule {
  width: 56px;
  height: 0;
  border: 0;
  border-top: 1px solid var(--brass);
  margin: 0 0 2.25rem;
}

.opening h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 5.2vw, 4.25rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  max-width: 17ch;
  margin: 0 0 2rem;
}

.opening p {
  color: var(--ink-on-navy);
  font-size: clamp(1.125rem, 1.5vw, 1.3rem);
  line-height: 1.6;
  max-width: 40em;
  margin: 0 0 2.75rem;
}

.opening__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

@media (max-width: 480px) {
  .opening__actions .btn {
    width: 100%;
    text-align: center;
  }
}

/* Shared section pieces */

.eyebrow {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-text);
  margin: 0 0 1rem;
}

.section-head { max-width: 44rem; margin-bottom: clamp(36px, 4.5vw, 60px); }

.section-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

.input-needed {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #8A2D1F;
  border: 1px dashed #8A2D1F;
  padding: 0.1rem 0.4rem;
  margin-left: 0.4rem;
  vertical-align: middle;
}

/* Home: what we do */

.services {
  background: var(--bone);
  padding: clamp(64px, 8vw, 108px) 0;
}

/* The path: three numbered stages joined by a brass line. */
.path {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3.5vw, 56px);
}

.stage { position: relative; }

.stage__marker {
  position: relative;
  height: 44px;
  margin-bottom: 28px;
}
.stage__marker span {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--brass);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}
/* Line from this marker to the next stage, ending in an arrowhead. */
.stage:not(:last-child) .stage__marker::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 52px;
  right: calc(-1 * clamp(28px, 3.5vw, 56px) + 8px);
  border-top: 1px solid var(--brass);
}
.stage:not(:last-child) .stage__marker::after {
  content: "";
  position: absolute;
  top: calc(50% - 4px);
  right: calc(-1 * clamp(28px, 3.5vw, 56px) + 8px);
  border-left: 7px solid var(--brass);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

.stage__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: 28px;
}

.stage__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.35rem;
  margin: 0 0 0.75rem;
}

.svc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.svc-list li { border-bottom: 1px solid var(--rule); }

.svc-list a,
.investors {
  display: block;
  position: relative;
  padding: 1.1rem 2rem 1.1rem 0;
  color: inherit;
  text-decoration: none;
}
.svc-list a::after,
.investors::after {
  content: "\2192";
  position: absolute;
  right: 0.25rem;
  top: 1.05rem;
  font-family: var(--font-head);
  color: var(--brass-text);
  transition: transform 150ms ease;
}
.svc-list a:hover::after,
.investors:hover::after { transform: translateX(4px); }
.svc-list a:hover .svc-name,
.investors:hover .svc-name { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 4px; }

.svc-name {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.35;
  margin-bottom: 0.3rem;
}
.svc-line {
  display: block;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.investors {
  margin-top: clamp(56px, 7vw, 88px);
  padding: 2rem 3rem 2rem 0;
  border-top: 1px solid var(--navy);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 12rem 16rem 1fr;
  align-items: baseline;
  gap: 1rem;
}
.investors .eyebrow { margin: 0; }
.investors .svc-name { font-size: 1.35rem; margin: 0; }
.investors::after { top: 2rem; font-size: 1.25rem; }

@media (max-width: 900px) {
  .path { grid-template-columns: 1fr; gap: 56px; }
  /* Path turns vertical: the line runs down the left from each marker. */
  .stage { padding-left: 64px; }
  .stage__marker { position: absolute; left: 0; top: 0; margin: 0; }
  .stage:not(:last-child) .stage__marker::before,
  .stage:not(:last-child) .stage__marker::after { display: none; }
  .stage:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 22px;
    top: 52px;
    bottom: -48px;
    border-left: 1px solid var(--brass);
  }
  .investors { grid-template-columns: 1fr; gap: 0.4rem; }
}

@media (max-width: 480px) {
  .stage { padding-left: 0; }
  .stage__marker { position: relative; margin-bottom: 20px; }
  .stage:not(:last-child)::after { display: none; }
}

/* Home: two ways to start */

.start {
  --paths-gap: clamp(32px, 5vw, 80px);
  background: var(--navy);
  color: var(--white);
  padding: clamp(64px, 8vw, 108px) 0;
}

.section-head--center { text-align: center; margin-left: auto; margin-right: auto; margin-bottom: 40px; }

/* Fork: origin dot, stem, crossbar, and a drop with an arrowhead to each path. */
.fork {
  position: relative;
  height: 96px;
  margin-bottom: 24px;
}
.fork span { position: absolute; display: block; }
.fork__origin {
  left: 50%; top: 0;
  width: 10px; height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--brass);
}
.fork__stem {
  left: 50%; top: 10px; height: 30px;
  border-left: 1px solid var(--brass);
}
.fork__bar {
  top: 40px;
  left: calc((100% - var(--paths-gap)) / 4);
  right: calc((100% - var(--paths-gap)) / 4);
  border-top: 1px solid var(--brass);
}
.fork__drop {
  top: 40px; bottom: 0;
  border-left: 1px solid var(--brass);
}
.fork__drop--a { left: calc((100% - var(--paths-gap)) / 4); }
.fork__drop--b { right: calc((100% - var(--paths-gap)) / 4); }
.fork__drop::after {
  content: "";
  position: absolute;
  bottom: -1px; left: -5px;
  border-top: 7px solid var(--brass);
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
}

.paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--paths-gap);
}

.way { position: relative; text-align: left; }
.way p { margin: 0 0 1rem; color: var(--ink-on-navy); }

.way__badge {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--navy);
  border: 1px solid var(--brass);
  color: var(--brass);
  font-family: var(--font-head);
  font-weight: 600;
}

.way__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  margin-bottom: 32px;
}

.way__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  line-height: 1.2;
  margin: 0 0 0.75rem;
}

.way .way__when {
  font-style: italic;
  color: var(--white);
  font-size: 1.1rem;
}

.way__label {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass) !important;
  margin: 1.75rem 0 0.75rem !important;
}

/* What the assessment hands back: three numbered outputs on hairlines. */
.outputs {
  list-style: none;
  counter-reset: out;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule-on-navy);
}
.outputs li {
  counter-increment: out;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule-on-navy);
  font-family: var(--font-head);
  font-size: 1.1rem;
  color: var(--white);
}
.outputs li::before {
  content: counter(out, decimal-leading-zero);
  font-size: 0.85rem;
  color: var(--brass);
  letter-spacing: 0.04em;
}

/* The defined projects that skip the assessment, as outlined tags. */
.triggers {
  list-style: none;
  margin: 0.25rem 0 1.75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.triggers li {
  font-family: var(--font-head);
  font-size: 0.98rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(201, 166, 107, 0.6);
  border-radius: 2px;
  color: var(--white);
}

@media (max-width: 760px) {
  .fork { display: none; }
  .paths { grid-template-columns: 1fr; gap: 72px; }
}

/* Home: proof */

.proof {
  background: var(--bone);
  padding: clamp(64px, 8vw, 108px) 0;
}

.proof__head {
  max-width: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.text-link {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--brass);
  padding-bottom: 2px;
}
.text-link::after { content: " \2192"; color: var(--brass-text); }
.text-link:hover { border-bottom-width: 2px; }

.hold-note {
  font-size: 0.95rem;
  color: #8A2D1F;
  margin: 0 0 40px;
}
.hold-note .input-needed { margin: 0 0.5rem 0 0; }

.results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--navy);
}
.result + .result { border-left: 1px solid var(--rule); }

.result a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 32px 24px 36px;
  color: inherit;
  text-decoration: none;
  transition: background-color 150ms ease;
}
.result:first-child a { padding-left: 0; }
.result:last-child a { padding-right: 0; }
.result a:hover { background: rgba(11, 31, 58, 0.03); }
.result a:hover .result__line { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 4px; }

/* Small charts drawn from each published figure. */
.result__chart {
  width: 100%;
  height: 120px;
  max-width: 260px;
  margin-bottom: 28px;
  overflow: visible;
}
.result__chart .axis { stroke: var(--navy); stroke-width: 1; }
.result__chart .tick { stroke: var(--navy); stroke-width: 1; }
.result__chart .bar { fill: var(--navy); }
.result__chart .bar--muted { fill: rgba(11, 31, 58, 0.18); }
.result__chart .dot { fill: var(--brass); }
.result__chart .dot--muted { fill: rgba(11, 31, 58, 0.3); }
.result__chart .link { fill: none; stroke: var(--brass); stroke-width: 1.5; stroke-dasharray: 4 4; }
.result__chart .arrow { fill: var(--brass); }
.result__chart .ring { fill: rgba(201, 166, 107, 0.18); stroke: var(--brass); stroke-width: 1.5; }
.result__chart .ring--muted { fill: none; stroke: rgba(11, 31, 58, 0.35); }
.result__chart .lbl { font-family: var(--font-head); font-size: 11px; fill: var(--ink-soft); }
.result__chart .lbl--strong { font-weight: 700; font-size: 13px; fill: var(--navy); }

.result__service {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-text);
  margin-bottom: 0.6rem;
  /* Two lines reserved so the result lines start level across columns. */
  min-height: 2.6em;
  line-height: 1.3;
}
.result__line {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.3;
  margin-bottom: 0.9rem;
}
.result__client {
  margin-top: auto;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--ink-soft);
}

.clients {
  margin-top: clamp(56px, 7vw, 88px);
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: baseline;
  gap: 2rem;
  flex-wrap: wrap;
}
.clients .eyebrow { margin: 0; }
.clients__hold { margin: 0; font-size: 0.95rem; color: #8A2D1F; }
.clients__hold .input-needed { margin: 0 0.5rem 0 0; }

@media (max-width: 1100px) {
  .results { grid-template-columns: 1fr 1fr; }
  .result:nth-child(3) { border-left: 0; }
  .result:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .result:nth-child(odd) a { padding-left: 0; }
  .result:nth-child(even) a { padding-right: 0; }
}

@media (max-width: 600px) {
  .results { grid-template-columns: 1fr; }
  .result + .result { border-left: 0; border-top: 1px solid var(--rule); }
  .result a { padding: 28px 0 32px; }
}

/* Home: why Infinity */

.why {
  background: var(--navy);
  color: var(--white);
  padding: clamp(64px, 8vw, 108px) 0;
}

.why__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: stretch;
}

/* Photo runs the full height of the statements beside it. */
.why__img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  object-position: 30% center;
}

.why__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  line-height: 1.15;
  margin: 0 0 clamp(28px, 4vw, 48px);
}

.reasons {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule-on-navy);
}

.reason {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 28px;
  padding: 32px 0;
  border-bottom: 1px solid var(--rule-on-navy);
}

.reason__icon {
  width: 48px;
  height: 48px;
  fill: none;
  stroke: var(--brass);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reason h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.7vw, 1.4rem);
  line-height: 1.3;
  margin: 0 0 0.5rem;
}
.reason p { margin: 0; color: var(--ink-on-navy); }

/* The INPUT NEEDED tag needs a lighter red to read on navy. */
.why .input-needed { color: #F2A99B; border-color: #F2A99B; }

@media (max-width: 900px) {
  .why__grid { grid-template-columns: 1fr; }
  .why__img { height: auto; min-height: 0; aspect-ratio: 16 / 10; object-position: center 40%; }
}

@media (max-width: 480px) {
  .reason { grid-template-columns: 1fr; gap: 16px; }
}

/* Home: industries */

.industries {
  background: var(--bone);
  padding: clamp(64px, 8vw, 108px) 0;
}

.ind-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
}

/* Photo panel with the name and line set over a navy fade at the foot. */
.ind {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  color: var(--white);
  text-decoration: none;
  background: var(--navy);
}
.ind img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}
.ind::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(11, 31, 58, 0) 25%, rgba(11, 31, 58, 0.78) 55%, rgba(11, 31, 58, 0.95) 85%);
}
.ind:hover img { transform: scale(1.03); }

.ind__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 28px 28px 32px;
  border-top: 0;
}
.ind__body::before {
  content: "";
  display: block;
  width: 40px;
  border-top: 1px solid var(--brass);
  margin-bottom: 18px;
}
.ind__name {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}
.ind__name::after { content: " \2192"; color: var(--brass); }
.ind__line {
  display: block;
  color: var(--ink-on-navy);
  font-size: 1rem;
  line-height: 1.5;
}
.ind .input-needed {
  position: absolute;
  top: 16px; left: 16px; right: 16px;
  z-index: 2;
  margin: 0;
  background: var(--navy);
  color: #F2A99B;
  border-color: #F2A99B;
  line-height: 1.4;
}

/* Private Equity panel: a report-style exhibit instead of a photo.
   Flat bars, one accent (brass) for the levers, gray for everything else. */
.ind--exhibit {
  background: var(--white);
  color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.ind--exhibit::before { display: none; }
.ind--exhibit .ind__line { color: var(--ink-soft); }
.ind--exhibit .ind__name::after { color: var(--brass-text); }

.ind__chart {
  position: absolute;
  top: 6%;
  left: 7%;
  width: 86%;
  height: auto;
}
.ind__chart text { font-family: var(--font-head); }
.ind__chart .kicker { font-size: 9px; font-weight: 600; letter-spacing: 0.12em; fill: var(--ink-soft); }
.ind__chart .grid { stroke: #ECE8DF; }
.ind__chart .base { stroke: var(--navy); }
.ind__chart .bar--total { fill: #B9C0CB; }
.ind__chart .bar--lever { fill: var(--brass); }
.ind__chart .bar--market { fill: #E9DFCB; }
.ind__chart .bar--exit { fill: var(--navy); }
.ind__chart .join { stroke: #9AA3B2; stroke-dasharray: 2 2; fill: none; }
.ind__chart .bracket { stroke: var(--brass-text); fill: none; }
.ind__chart .callout { font-size: 10.5px; font-weight: 700; fill: var(--brass-text); text-anchor: middle; }
.ind__chart .labels text { font-size: 10.5px; fill: var(--ink-soft); text-anchor: middle; }
.ind__chart .labels text.strong { font-weight: 700; fill: var(--navy); }
.ind__chart .note { font-size: 8.5px; font-style: italic; fill: var(--ink-soft); }

@media (max-width: 900px) {
  .ind-list { grid-template-columns: 1fr; }
  .ind__chart { top: 6%; left: 50%; width: auto; height: 52%; transform: translateX(-50%); }
  .ind { aspect-ratio: 16 / 10; }
}

@media (max-width: 480px) {
  .ind { aspect-ratio: 4 / 5; }
}

/* Home: talk to an operator. Closes the page the way the opening starts it:
   a plant behind a navy wash, the words on top. */

.talk {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding: clamp(112px, 15vw, 200px) 0;
}

.talk__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.talk::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at center, rgba(11, 31, 58, 0.78) 0%, rgba(11, 31, 58, 0.94) 70%);
}

.talk__inner { max-width: 760px; }

.talk__rule {
  width: 56px;
  height: 0;
  border: 0;
  border-top: 1px solid var(--brass);
  margin: 0 auto 2rem;
}

.talk h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 1.25rem;
}

.talk p {
  color: var(--ink-on-navy);
  font-size: clamp(1.125rem, 1.5vw, 1.3rem);
  margin: 0 0 2.5rem;
}
.talk .input-needed { color: #F2A99B; border-color: #F2A99B; }

@media (max-width: 480px) {
  .talk .btn { width: 100%; text-align: center; }
}

/* ===== Service pages ===== */

/* Section 1: Promise. Same idea as the homepage opening, with a still photo. */
.promise {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
  min-height: min(78vh, 760px);
  display: flex;
  align-items: flex-end;
  padding: clamp(170px, 22vh, 220px) 0 clamp(72px, 10vh, 112px);
}
.promise__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Mirrored so the subject sits on the open right side, clear of the text. */
.promise__img--mirror { transform: scaleX(-1); }
.promise::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(11, 31, 58, 0.94) 0%, rgba(11, 31, 58, 0.82) 45%, rgba(11, 31, 58, 0.35) 100%),
    linear-gradient(0deg, rgba(11, 31, 58, 0.6) 0%, rgba(11, 31, 58, 0) 45%);
}
.promise__inner { width: 100%; }

.crumbs ol {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.crumbs li { color: var(--brass); }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: rgba(245, 242, 234, 0.4); }
.crumbs a { color: var(--ink-on-navy); text-decoration: none; }
.crumbs a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--brass); }

.promise h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 5.6vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 1.5rem;
}
.promise__line {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  line-height: 1.5;
  color: var(--ink-on-navy);
  max-width: 34em;
  margin: 0 0 2.5rem;
}
.promise__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

@media (max-width: 640px) {
  .promise::before {
    background: linear-gradient(180deg, rgba(11, 31, 58, 0.7) 0%, rgba(11, 31, 58, 0.94) 100%);
  }
}
@media (max-width: 480px) {
  .promise__actions .btn { width: 100%; text-align: center; }
}

/* Section 2: Opening. Two paragraphs beside a report-style exhibit. */
.svc-opening {
  background: var(--bone);
  padding: clamp(64px, 8vw, 108px) 0;
}
.svc-opening__grid {
  display: grid;
  grid-template-columns: 4.5fr 7.5fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.svc-opening__text p {
  font-size: clamp(1.1rem, 1.35vw, 1.25rem);
  line-height: 1.65;
  margin: 0 0 1.25rem;
}
.svc-opening__text p:first-of-type {
  font-size: clamp(1.3rem, 1.75vw, 1.55rem);
  line-height: 1.5;
  color: var(--navy);
}

.exhibit {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--rule);
  padding: clamp(20px, 2.5vw, 36px);
}
.exhibit__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1.25rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule);
}

/* Symptom-to-source tree: gray structure, brass for the one path that matters. */
.tree { display: block; width: 100%; height: auto; }
.tree text { font-family: var(--font-head); }
.tree .row { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; fill: var(--ink-soft); }
.tree .node { fill: var(--white); stroke: #B9C0CB; }
.tree .node--top { fill: var(--navy); stroke: var(--navy); }
.tree .node--hot { fill: #F6EEDF; stroke: var(--brass); stroke-width: 1.5; }
.tree .node-label { font-size: 14px; font-weight: 600; fill: var(--navy); text-anchor: middle; }
.tree .node-label--top { fill: var(--white); font-size: 14px; }
.tree .link { fill: none; stroke: #B9C0CB; }
.tree .link--hot { stroke: var(--brass); stroke-width: 2; }
.tree .cost { fill: var(--white); stroke: #B9C0CB; }
.tree .cost--hot { fill: var(--brass); stroke: var(--brass); }
.tree .cost-sign { font-size: 9px; font-weight: 700; fill: var(--ink-soft); text-anchor: middle; }
.tree .cost-sign--hot { fill: var(--navy); }
.tree .leaf { font-size: 13px; fill: var(--ink-soft); }
.tree .leaf--hot { font-weight: 700; fill: var(--navy); }
.tree .fix { fill: var(--brass); }
.tree .fix-label { font-size: 13px; font-weight: 700; fill: var(--navy); text-anchor: middle; }
.tree .note { font-size: 10.5px; font-style: italic; fill: var(--ink-soft); }

/* On phones the exhibit keeps a readable size and scrolls sideways inside its frame. */
.exhibit__scroll { overflow-x: auto; }
.svc-opening__grid > * { min-width: 0; }

@media (max-width: 960px) {
  .svc-opening__grid { grid-template-columns: 1fr; }
}
/* Stacked phone version of the tree. */
.tree-m { display: none; font-family: var(--font-head); }
.tree-m__row {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 1.1rem 0 0.5rem;
}
.tree-m__row:first-child { margin-top: 0; }
.tree-m__top {
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
  padding: 0.7rem 0.9rem;
}
.tree-m__chips,
.tree-m__leaves { list-style: none; margin: 0; padding: 0; }
.tree-m__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tree-m__chips li {
  border: 1px solid #B9C0CB;
  padding: 0.35rem 0.75rem;
  font-weight: 600;
  font-size: 0.95rem;
}
.tree-m__chips li.is-hot { border-color: var(--brass); background: #F6EEDF; }
.tree-m__leaves { border-left: 2px solid var(--brass); padding-left: 0.9rem; }
.tree-m__leaves li { display: flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0; color: var(--ink-soft); }
.tree-m__leaves li.is-hot { color: var(--navy); font-weight: 700; }
.tree-m__cost {
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid #B9C0CB;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.is-hot .tree-m__cost { background: var(--brass); border-color: var(--brass); color: var(--navy); }
.tree-m__fix {
  margin-left: auto;
  background: var(--brass);
  color: var(--navy);
  font-size: 0.8rem;
  padding: 0.2rem 0.6rem;
}
.tree-m__note { font-family: var(--font-body); font-style: italic; font-size: 0.8rem; color: var(--ink-soft); margin: 1rem 0 0; }

@media (max-width: 600px) {
  .exhibit__scroll { display: none; }
  .tree-m { display: block; }
}

/* Section 3: When to call. Six questions on navy, each tagged with what triggered it. */
.when {
  background: var(--navy);
  color: var(--white);
  padding: clamp(64px, 8vw, 108px) 0;
}
.when .section-head { max-width: 56rem; }
.when .section-head h2 { color: var(--white); }
.eyebrow--on-navy { color: var(--brass); }

.asks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule-on-navy);
}
.ask {
  padding: 36px 32px 40px 0;
  border-bottom: 1px solid var(--rule-on-navy);
}
.ask:not(:nth-child(3n + 1)) { padding-left: 32px; border-left: 1px solid var(--rule-on-navy); }

.ask__icon {
  width: 48px;
  height: 48px;
  fill: none;
  stroke: var(--brass);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 20px;
}
.ask__tag {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 0.6rem;
}
.ask__q {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  line-height: 1.35;
  margin: 0;
}

@media (max-width: 960px) {
  .asks { grid-template-columns: 1fr 1fr; }
  .ask:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .ask:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--rule-on-navy); }
}
@media (max-width: 600px) {
  .asks { grid-template-columns: 1fr; }
  .ask:nth-child(even) { padding-left: 0; border-left: 0; }
  .ask { display: grid; grid-template-columns: 48px 1fr; column-gap: 18px; padding: 28px 0; }
  .ask__icon { grid-row: span 2; margin: 0; }
}

/* Section 4: How we help. Tall photo beside a numbered list on hairlines. */
.help {
  background: var(--bone);
  padding: clamp(64px, 8vw, 108px) 0;
}
.help__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: stretch;
}
.help__grid > * { min-width: 0; }
.help__img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
  object-position: 40% 75%;
}
.help .section-head { margin-bottom: 32px; }

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--navy);
}
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}
.step::before {
  content: counter(step, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  color: var(--brass-text);
  padding-top: 0.15rem;
}
.step h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 0 0 0.3rem;
}
.step p { margin: 0; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.55; }

@media (max-width: 960px) {
  .help__grid { grid-template-columns: 1fr; }
  .help__img { height: auto; min-height: 0; aspect-ratio: 16 / 10; object-position: center 40%; }
}

/* Section 5: How the work runs. A five-phase timeline on deep navy. */
.runs {
  background: var(--navy);
  color: var(--white);
  padding: clamp(64px, 8vw, 108px) 0;
  scroll-margin-top: 80px;
}
.runs .section-head h2 { color: var(--white); }
.runs .input-needed { color: #F2A99B; border-color: #F2A99B; margin-left: 0; }

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
  position: relative;
}
/* The track the phases sit on. */
.timeline::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 22px;
  /* Ends at the last dot. */
  right: calc((100% - 4 * 28px) / 5 - 22px);
  border-top: 1px solid var(--brass);
}
.phase { position: relative; }
.phase__dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy);
  border: 1px solid var(--brass);
  color: var(--brass);
  font-family: var(--font-head);
  font-weight: 600;
  margin-bottom: 24px;
}
.phase--floor .phase__dot,
.phase--readout .phase__dot { background: var(--brass); color: var(--navy); }

.phase h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
}
.phase p {
  margin: 0 0 1rem;
  color: var(--ink-on-navy);
  font-size: 1rem;
  line-height: 1.55;
}
.phase__time { display: block; }

.shifts {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass);
}
.shifts svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--brass);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.runs__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 48px;
  margin: clamp(56px, 7vw, 88px) 0 0;
  border-top: 1px solid var(--rule-on-navy);
}
.runs__facts div { padding: 24px 0; border-bottom: 1px solid var(--rule-on-navy); }
.runs__facts dt {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.5rem;
}
.runs__facts dd { margin: 0; }

@media (max-width: 960px) {
  /* Timeline turns vertical: the track runs down the left. */
  .timeline { grid-template-columns: 1fr; gap: 0; }
  .timeline::before { top: 22px; bottom: 22px; left: 21px; right: auto; border-top: 0; border-left: 1px solid var(--brass); }
  .phase { padding: 0 0 36px 68px; }
  .phase__dot { position: absolute; left: 0; top: 0; margin: 0; }
  .phase h3 { padding-top: 0.55rem; }
  .runs__facts { grid-template-columns: 1fr; }
}

/* Section 6: What you have at the end. The deliverables beside sample report pages. */
.deliver {
  background: var(--bone);
  padding: clamp(64px, 8vw, 108px) 0;
  overflow: hidden;
}
.deliver__grid {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.deliver__grid > * { min-width: 0; }

.outs {
  list-style: none;
  counter-reset: out;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--navy);
}
.outs li {
  counter-increment: out;
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.outs li::before {
  content: counter(out, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--brass-text);
  padding-top: 0.1rem;
}
.outs h3 { font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; margin: 0 0 0.25rem; }
.outs p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.5; }

/* The page stack */
.docs { position: relative; margin: 0; padding: 0 0 0 0; }
.doc {
  background: var(--white);
  border-top: 4px solid var(--navy);
  padding: 26px 30px 22px;
  font-family: var(--font-head);
  color: var(--navy);
}
.doc--front {
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(11, 31, 58, 0.06), 0 30px 60px -12px rgba(11, 31, 58, 0.28);
  margin-right: 56px;
  margin-top: 64px;
}
.doc--back {
  position: absolute;
  top: 0;
  right: 0;
  width: 74%;
  height: 62%;
  box-shadow: 0 20px 40px -16px rgba(11, 31, 58, 0.22);
  opacity: 0.96;
}

.doc__meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.doc__title { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.2rem; letter-spacing: -0.005em; }
.doc__sub { font-family: var(--font-body); font-size: 0.85rem; color: var(--ink-soft); margin: 0 0 14px; }

.pareto { display: block; width: 100%; height: auto; margin-bottom: 10px; }
.pareto text { font-family: var(--font-head); }
.p-grid { stroke: #EEEBE4; }
.p-axis { stroke: var(--navy); }
.p-tick { font-size: 9px; fill: var(--ink-soft); }
.p-ylab { font-size: 9px; letter-spacing: 0.08em; fill: var(--ink-soft); text-anchor: middle; text-transform: uppercase; }
.p-bar { fill: #C9CFD8; }
.p-bar--hot { fill: var(--navy); }
.p-redact { fill: #D9DDE3; }
.p-cum { fill: none; stroke: var(--brass); stroke-width: 2; }
.p-dots circle { fill: var(--white); stroke: var(--brass); stroke-width: 1.5; }
.p-x { font-size: 10.5px; fill: var(--ink-soft); text-anchor: middle; }
.p-x--hot { font-weight: 700; fill: var(--navy); }

.doc__table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.doc__table th {
  text-align: left;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0 8px 6px 0;
  border-bottom: 1px solid var(--navy);
}
.doc__table td { padding: 8px 8px 8px 0; border-bottom: 1px solid #EEEBE4; color: var(--ink-soft); vertical-align: middle; }
.doc__table td:first-child { color: var(--ink-soft); width: 1.5rem; }
.doc__table td:nth-child(2) { font-weight: 600; color: var(--navy); white-space: nowrap; }
.doc__table tr.is-first td { background: #F8F2E6; }
.doc__table tr.is-first td:first-child { box-shadow: inset 3px 0 0 var(--brass); padding-left: 8px; color: var(--brass-text); font-weight: 700; }
.doc__table .tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--brass);
  color: var(--navy);
  vertical-align: 1px;
}
.redact { display: inline-block; width: 44px; height: 9px; border-radius: 2px; background: #D9DDE3; vertical-align: middle; }
/* Effort as three pips: filled pips show how much it takes. */
.effort { display: inline-block; width: 33px; height: 9px; vertical-align: middle; }
.effort.e1 { background:
  radial-gradient(circle at 4.5px 4.5px, var(--navy) 3.5px, transparent 4px) 0 0 / 12px 9px no-repeat,
  radial-gradient(circle at 4.5px 4.5px, #D9DDE3 3.5px, transparent 4px) 12px 0 / 12px 9px no-repeat,
  radial-gradient(circle at 4.5px 4.5px, #D9DDE3 3.5px, transparent 4px) 24px 0 / 12px 9px no-repeat; }
.effort.e2 { background:
  radial-gradient(circle at 4.5px 4.5px, var(--navy) 3.5px, transparent 4px) 0 0 / 12px 9px no-repeat,
  radial-gradient(circle at 4.5px 4.5px, var(--navy) 3.5px, transparent 4px) 12px 0 / 12px 9px no-repeat,
  radial-gradient(circle at 4.5px 4.5px, #D9DDE3 3.5px, transparent 4px) 24px 0 / 12px 9px no-repeat; }
.effort.e3 { background:
  radial-gradient(circle at 4.5px 4.5px, var(--navy) 3.5px, transparent 4px) 0 0 / 12px 9px no-repeat,
  radial-gradient(circle at 4.5px 4.5px, var(--navy) 3.5px, transparent 4px) 12px 0 / 12px 9px no-repeat,
  radial-gradient(circle at 4.5px 4.5px, var(--navy) 3.5px, transparent 4px) 24px 0 / 12px 9px no-repeat; }

.doc__foot {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.72rem;
  color: var(--ink-soft);
}
.doc__foot span:last-child { font-family: var(--font-head); font-style: normal; font-weight: 600; }

/* Back page: the loss map, partly hidden behind the front page. */
.doc__tree { display: block; width: 100%; height: auto; }
.t-top { fill: var(--navy); }
.t-node { fill: var(--white); stroke: #B9C0CB; }
.t-node--hot { fill: #F6EEDF; stroke: var(--brass); }
.t-link { fill: none; stroke: #C9CFD8; stroke-width: 1.2; }
.t-hot { fill: none; stroke: var(--brass); stroke-width: 2; }
.t-text { stroke: #C9CFD8; stroke-width: 5; stroke-linecap: round; }
.t-text--hot { stroke: var(--brass); }

@media (max-width: 1080px) {
  .deliver__grid { grid-template-columns: 1fr; }
  .docs { margin-top: 48px; }
}
@media (max-width: 640px) {
  .doc--back { display: none; }
  .doc--front { margin-right: 0; padding: 20px 16px 16px; }
  .doc__table th:nth-child(3), .doc__table td:nth-child(3) { display: none; }
  .doc__table td:nth-child(2) .tag { display: none; }
}

/* Section 7: Results. Each result as a report-style card on navy. */
.svc-results {
  background: var(--navy);
  color: var(--white);
  padding: clamp(64px, 8vw, 108px) 0;
}
.svc-results__head {
  max-width: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 24px;
}
.svc-results__head h2 { color: var(--white); }
.text-link--on-navy { color: var(--white); }
.text-link--on-navy::after { color: var(--brass); }
.svc-results__flag { font-size: 0.95rem; color: #F2A99B; margin: 0 0 40px; max-width: 60rem; }
.svc-results__flag .input-needed { color: #F2A99B; border-color: #F2A99B; margin: 0 0.5rem 0 0; }

.rcards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
.rcard a {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border-top: 4px solid var(--brass);
  padding: 22px 24px 26px;
  color: var(--navy);
  text-decoration: none;
  font-family: var(--font-head);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.45);
  transition: transform 150ms ease;
}
.rcard a:hover { transform: translateY(-3px); }
.rcard a:hover .rcard__title { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 4px; }

.rcard__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.rcard__meta span { color: var(--brass-text); white-space: nowrap; }

.rcard__chart { display: block; width: 100%; height: auto; margin-bottom: 18px; }
.rcard__chart text { font-family: var(--font-head); }
.c-grid { stroke: #EEEBE4; }
.c-axis, .c-zero { stroke: var(--navy); }
.c-tick { font-size: 10px; fill: var(--ink-soft); text-anchor: end; }
.c-ylab { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--ink-soft); text-anchor: middle; }
.c-bar--muted { fill: #C9CFD8; }
.c-bar--hot { fill: var(--navy); }
.c-redact { fill: #D9DDE3; }
.c-val { font-size: 12px; font-weight: 600; fill: var(--ink-soft); text-anchor: middle; }
.c-val--hot { font-weight: 700; fill: var(--navy); }
.c-x { font-size: 10.5px; fill: var(--ink-soft); text-anchor: middle; }
.c-x--hot { font-weight: 700; fill: var(--navy); }
.c-drop { fill: none; stroke: var(--brass); stroke-width: 1.5; stroke-dasharray: 3 3; }
.c-call { font-size: 11px; font-weight: 700; fill: var(--brass-text); }

.rcard__title { font-size: 1.15rem; font-weight: 600; line-height: 1.35; margin-bottom: 0.6rem; }
.rcard__client { margin-top: auto; font-family: var(--font-body); font-style: italic; font-size: 0.95rem; color: var(--ink-soft); }

@media (max-width: 1000px) {
  .rcards { grid-template-columns: 1fr; max-width: 560px; }
}

/* Section 8: Who does this work. The firm's one idea, and the seats behind it. */
.who {
  background: var(--bone);
  padding: clamp(64px, 8vw, 108px) 0;
}
.who__grid {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.who__lead {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(2.1rem, 4vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 1.5rem;
  padding-left: 24px;
  border-left: 3px solid var(--brass);
}
.who__text p:not(.eyebrow) { font-size: clamp(1.15rem, 1.5vw, 1.3rem); line-height: 1.6; margin: 0; max-width: 32em; }

.seats {
  background: var(--navy);
  color: var(--white);
  padding: clamp(28px, 3vw, 40px);
}
.seats__head {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-on-navy);
}
.seats__list { list-style: none; margin: 0; padding: 0; }
.seats__list li {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-on-navy);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.2rem;
}
.seats__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.seats__list svg {
  flex: none;
  width: 40px;
  height: 40px;
  fill: none;
  stroke: var(--brass);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 900px) {
  .who__grid { grid-template-columns: 1fr; }
}

/* Section 9: Common questions. Accordion on white, one answer open at a time. */
.faq {
  background: var(--white);
  padding: clamp(64px, 8vw, 108px) 0;
  border-top: 1px solid var(--rule);
}
.faq__grid {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.faq__head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1.15;
  margin: 0 0 1.5rem;
}
.faq__more { color: var(--ink-soft); margin: 0; }
.faq__more .text-link { display: inline-block; margin-top: 0.6rem; }

.faq__list { border-top: 1px solid var(--navy); }
.qa { border-bottom: 1px solid var(--rule); }
.qa summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
  color: var(--navy);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }
/* Plus that turns to minus when open. */
.qa summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--brass-text), var(--brass-text)) center / 14px 1.5px no-repeat,
    linear-gradient(var(--brass-text), var(--brass-text)) center / 1.5px 14px no-repeat;
  transition: transform 150ms ease;
}
.qa[open] summary::after {
  background: linear-gradient(var(--brass-text), var(--brass-text)) center / 14px 1.5px no-repeat;
}
.qa__a { padding: 0 48px 26px 0; }
.qa__a p { margin: 0; color: var(--ink-soft); font-size: 1.08rem; line-height: 1.65; }
.qa__a .input-needed { margin-left: 0.25rem; }

@media (max-width: 900px) {
  .faq__grid { grid-template-columns: 1fr; gap: 32px; }
  .qa__a { padding-right: 0; }
}

/* Section 10: Related services, then the contact band. */
.related {
  background: var(--bone);
  padding: clamp(64px, 8vw, 108px) 0;
}
.rel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
.rel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  color: var(--navy);
  text-decoration: none;
  border: 1px solid var(--rule);
  overflow: hidden;
}
.rel img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 600ms ease;
}
.rel:hover img { transform: scale(1.03); }
.rel__body { display: flex; flex-direction: column; padding: 24px 26px 28px; border-top: 3px solid var(--brass); position: relative; z-index: 1; background: var(--white); flex: 1; }
.rel__group {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-text);
  margin-bottom: 0.5rem;
}
.rel__name { font-family: var(--font-head); font-weight: 600; font-size: 1.3rem; line-height: 1.25; margin-bottom: 0.6rem; }
.rel__name::after { content: " \2192"; color: var(--brass-text); }
.rel:hover .rel__name { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 4px; }
.rel__line { color: var(--ink-soft); font-size: 1rem; line-height: 1.55; }

.talk--svc { padding: clamp(100px, 13vw, 170px) 0; }
.talk__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.talk__flag { margin: 1rem 0 0 !important; font-size: 0.9rem !important; }

@media (max-width: 960px) {
  .rel-list { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 480px) {
  .talk__actions .btn { width: 100%; text-align: center; }
}

/* Turnaround opening: a single report page beside the text. */
.doc--solo {
  margin: 0;
  box-shadow: 0 2px 4px rgba(11, 31, 58, 0.06), 0 30px 60px -12px rgba(11, 31, 58, 0.25);
}
.bridge { display: block; width: 100%; height: auto; margin: 6px 0 4px; }
.bridge text { font-family: var(--font-head); }
.b-grid { stroke: #EEEBE4; }
.b-axis { stroke: var(--navy); }
.b-ylab { font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--ink-soft); text-anchor: middle; }
.b-total { fill: var(--navy); }
.b-step { fill: var(--brass); }
.b-actual { fill: #C9CFD8; }
.b-join { stroke: #9AA3B2; stroke-dasharray: 2 2; fill: none; }
.b-redact { fill: #D9DDE3; }
.b-bracket { stroke: var(--brass-text); stroke-width: 1.5; fill: none; }
.b-call { font-size: 11px; font-weight: 700; fill: var(--brass-text); }
.b-x { font-size: 11px; fill: var(--ink-soft); text-anchor: middle; }
.b-x--strong { font-weight: 700; fill: var(--navy); }
.b-narrow { display: none; }
.b-xn { font-size: 17px; fill: var(--ink-soft); text-anchor: middle; }

@media (max-width: 600px) {
  .bridge { overflow: visible; margin-bottom: 36px; }
  .bridge .b-x { display: none; }
  .b-narrow { display: inline; }
  .b-ylab { font-size: 15px; }
  .b-call { font-size: 15px; }
}

/* When to call, scorecard version: each question shown as a KPI tile with its trend. */
.when--kpi { background: var(--navy); }
.when__head {
  max-width: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
}
.when__note { margin: 0; font-style: italic; font-size: 0.85rem; color: rgba(230, 225, 214, 0.65); }

.kpis {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.kpi {
  background: var(--white);
  color: var(--navy);
  padding: 20px 22px 24px;
  border-top: 3px solid var(--brass);
  font-family: var(--font-head);
  display: flex;
  flex-direction: column;
}
.kpi__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.kpi__label { color: var(--navy); }
.kpi__period { color: var(--ink-soft); letter-spacing: 0.06em; text-transform: none; font-weight: 500; font-size: 0.75rem; }
.kpi__value { display: flex; align-items: center; gap: 10px; margin: 12px 0 10px; }
.kpi__redact { display: inline-block; width: 84px; height: 22px; border-radius: 3px; background: #E3E6EB; }
.kpi__status {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8A2D1F;
  background: #F7E7E2;
  padding: 3px 8px;
  border-radius: 2px;
}
.kpi__chart { display: block; width: 100%; height: auto; margin-bottom: 16px; overflow: visible; }
.kpi__chart text { font-family: var(--font-head); }
.k-line { fill: none; stroke: var(--navy); stroke-width: 2; stroke-linejoin: round; }
.k-area { fill: rgba(11, 31, 58, 0.07); }
.k-end { fill: var(--brass); stroke: var(--white); stroke-width: 1.5; }
.k-target, .k-plan { fill: none; stroke: var(--brass); stroke-width: 1.5; stroke-dasharray: 4 3; }
.k-tlab { font-size: 9px; font-weight: 600; fill: var(--brass-text); text-anchor: end; }
.k-tlab--start { text-anchor: start; }
.k-bar { fill: #C9CFD8; }
.k-bar--hot { fill: var(--navy); }
.k-gap { fill: rgba(201, 166, 107, 0.22); }
.kpi__q {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.35;
}

@media (max-width: 1000px) {
  .kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .kpis { grid-template-columns: 1fr; }
}

/* ===== Six-block service template ===== */

/* Block 4: How we help and what you get, beside a sample plan. */
.work { background: var(--bone); padding: clamp(64px, 8vw, 108px) 0; }
.work__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.work__grid > * { min-width: 0; }
.work .section-head { margin-bottom: 28px; }
.work .step { padding: 16px 0; }

.gets { margin-top: 32px; }
.gets__head {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-text);
  margin: 0 0 12px;
}
.gets ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gets li {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
  background: var(--white);
  border-left: 3px solid var(--brass);
  padding: 12px 14px;
}

.work__side { display: flex; flex-direction: column; gap: 28px; }
.gets--side { margin-top: 0; }
.gantt { width: 100%; border-collapse: collapse; font-family: var(--font-head); font-size: 0.82rem; margin: 6px 0 4px; }
.gantt th {
  text-align: left;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0 8px 8px 0;
  border-bottom: 1px solid var(--navy);
}
.gantt th:nth-child(3), .gantt th:nth-child(4), .gantt th:nth-child(5) { width: 15%; }
.gantt td { padding: 11px 8px 11px 0; border-bottom: 1px solid #EEEBE4; color: var(--ink-soft); }
.gantt td:first-child { font-weight: 600; color: var(--navy); white-space: nowrap; }
/* On the smallest phones the table scrolls inside its card instead of widening the page. */
@media (max-width: 360px) { .tease__doc--html { overflow-x: auto; } }
.gantt td[colspan] {
  position: relative;
  padding: 0;
  /* Faint phase dividers behind the bars. */
  background:
    linear-gradient(90deg, transparent calc(33.33% - 0.5px), #E8E4DB calc(33.33% - 0.5px), #E8E4DB calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px)),
    linear-gradient(90deg, transparent calc(66.66% - 0.5px), #E8E4DB calc(66.66% - 0.5px), #E8E4DB calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px));
}
.g-bar {
  position: absolute;
  top: 50%;
  height: 12px;
  margin-top: -6px;
  left: calc(var(--s) / 3 * 100%);
  width: calc((var(--e) - var(--s)) / 3 * 100% - 8px);
  background: var(--navy);
  border-radius: 2px;
}
.g-bar--hot { background: var(--brass); }
.g-st { display: inline-block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 7px; border-radius: 2px; background: #EEF0F3; color: var(--ink-soft); white-space: nowrap; }
.g-st--ok { background: #E4EFE6; color: #2E6B3C; }
.g-st--risk { background: #F7E7E2; color: #8A2D1F; }

/* Block 5: one featured result, large. */
.feature__head { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; margin-bottom: 28px; }
.feature { background: var(--white); padding: clamp(64px, 8vw, 108px) 0; border-top: 1px solid var(--rule); }
.feature__card {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  background: var(--bone);
  border-top: 4px solid var(--navy);
  padding: clamp(24px, 3vw, 44px);
  color: var(--navy);
  text-decoration: none;
}
.feature__card > * { min-width: 0; }
.feature__chart svg { display: block; width: 100%; height: auto; }
.feature__chart text { font-family: var(--font-head); }
.feature__text { display: flex; flex-direction: column; font-family: var(--font-head); }
.feature__tag { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-text); margin-bottom: 0.9rem; }
.feature__title { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 600; line-height: 1.2; margin-bottom: 0.9rem; }
.feature__client { font-family: var(--font-body); font-style: italic; color: var(--ink-soft); margin-bottom: 1.5rem; }
.feature__more { font-weight: 600; align-self: flex-start; border-bottom: 1px solid var(--brass); padding-bottom: 2px; }
.feature__more::after { content: " \2192"; color: var(--brass-text); }
.feature__card:hover .feature__title { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 5px; }
.feature__flag { margin-top: 1.25rem; }
.feature__flag .input-needed { margin: 0; white-space: normal; }

/* Block 6: who does this work, beside the contact card, over a photo. */
.closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--white);
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--navy);
}
.closing__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.closing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(11, 31, 58, 0.95) 0%, rgba(11, 31, 58, 0.88) 55%, rgba(11, 31, 58, 0.7) 100%);
}
.closing__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.closing__grid > * { min-width: 0; }
.closing__who h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 4vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 1.25rem;
  padding-left: 22px;
  border-left: 3px solid var(--brass);
}
.closing__who > p:not(.eyebrow) { color: var(--ink-on-navy); font-size: clamp(1.1rem, 1.4vw, 1.25rem); line-height: 1.6; margin: 0 0 1.75rem; max-width: 34em; }
.seat-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.seat-chips li {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 7px 12px;
  border: 1px solid rgba(201, 166, 107, 0.55);
  color: var(--white);
}

.closing__card {
  background: var(--white);
  color: var(--navy);
  padding: clamp(28px, 3vw, 40px);
  border-top: 4px solid var(--brass);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.closing__card-head { font-family: var(--font-head); font-weight: 600; font-size: 1.6rem; margin: 0; }
.closing__card > p { margin: 0 0 8px; color: var(--ink-soft); }
.closing__card .btn { text-align: center; }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-ghost:hover { background: rgba(11, 31, 58, 0.05); }
.closing__flag { margin: 0 !important; }
.closing__related {
  margin: 12px 0 0 !important;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-head);
  font-size: 0.85rem;
  line-height: 1.6;
}
.closing__related a { color: var(--navy); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--brass); }

@media (max-width: 1000px) {
  .work__grid, .feature__card, .closing__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .gets ul { grid-template-columns: 1fr; }
  .gantt th:nth-child(2), .gantt td:nth-child(2) { display: none; }
  .gantt td:first-child { white-space: normal; }
}

/* ===== Short marketing service template ===== */

/* 1. Hook: the service name small, a provocative headline large. */
.hook__label {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 1.25rem;
}
.promise--hook h1 { max-width: 15ch; }

/* 2. Curiosity: one statement, three teasers, one redacted exhibit. */
.tease { background: var(--bone); padding: clamp(72px, 9vw, 120px) 0; }
.tease__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.tease__grid > * { min-width: 0; }
.tease h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 2rem;
}
.tease__list { list-style: none; margin: 0 0 2rem; padding: 0; border-top: 1px solid var(--navy); }
.tease__list li {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  padding: 16px 0 16px 28px;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.tease__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 12px; height: 2px;
  background: var(--brass-text);
}
.tease__doc .doc__title { font-size: 1.5rem; margin-bottom: 8px; }
.tease__doc .doc__title--next { margin-top: 32px; }

/* 3. Proof: one result, very large, on navy. */
.proofband { background: var(--white); color: var(--navy); padding: clamp(80px, 10vw, 140px) 0; border-top: 1px solid var(--rule); }
.proofband .eyebrow { color: var(--brass-text); }
.proofband h2 {
  max-width: 22ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 4.6vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 2rem;
}
.proofband__flag { margin: 1.25rem 0 0; }
.proofband .input-needed { margin: 0; }

@media (max-width: 960px) {
  .tease__grid { grid-template-columns: 1fr; }
}

/* Exhibits on the short service pages. Navy ink, gray structure, one brass highlight. */
.ex { display: block; width: 100%; height: auto; margin: 8px 0 4px; overflow: visible; }
.ex text { font-family: var(--font-head); }
.ex-grid { stroke: #EEEBE4; }
.ex-axis { stroke: var(--navy); }
.ex-ink { fill: var(--navy); }
.ex-hot { fill: var(--brass); }
.ex-muted { fill: #C9CFD8; }
.ex-redact { fill: #D9DDE3; }
.ex-leg { font-size: 13px; fill: var(--ink-soft); }
.ex-x { font-size: 13px; fill: var(--ink-soft); text-anchor: middle; }
.ex-y { font-size: 13px; font-weight: 600; fill: var(--navy); text-anchor: end; }
.ex-line { fill: none; stroke: var(--navy); stroke-width: 2.5; stroke-linejoin: round; }
.ex-area { fill: rgba(11, 31, 58, 0.07); }
.ex-band { fill: rgba(201, 166, 107, 0.22); }
.ex-end { fill: var(--brass); stroke: var(--white); stroke-width: 2; }
.ex-ref { fill: none; stroke: var(--brass); stroke-width: 2; stroke-dasharray: 6 4; }
.ex-reflab { font-size: 13px; font-weight: 700; fill: var(--brass-text); text-anchor: end; }

.tease__doc .doc__table { margin-top: 8px; font-size: 0.92rem; }
.tease__doc .doc__table td:nth-child(2) { font-weight: 400; }
.g-bar--muted { background: #C9CFD8; }

.spqdc { width: 100%; border-collapse: collapse; font-family: var(--font-head); margin-top: 8px; }
.spqdc th { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); padding: 0 0 10px; text-align: center; }
.spqdc tbody th { text-align: left; font-size: 0.95rem; letter-spacing: 0; text-transform: none; color: var(--navy); padding: 10px 0; border-top: 1px solid #EEEBE4; }
.spqdc td { text-align: center; border-top: 1px solid #EEEBE4; }
.sq { display: inline-block; width: 22px; height: 22px; border-radius: 3px; vertical-align: middle; }
.sq--win { background: var(--navy); }
.sq--miss { background: var(--brass); }
.spqdc__key { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-family: var(--font-head); font-size: 0.8rem; color: var(--ink-soft); }
.spqdc__key .sq { width: 12px; height: 12px; }
.spqdc__key .sq--miss { margin-left: 14px; }

.checks { list-style: none; counter-reset: ck; margin: 8px 0 0; padding: 0; font-family: var(--font-head); }
.checks li {
  counter-increment: ck;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid #EEEBE4;
  font-weight: 600;
  color: var(--navy);
}
.checks li::before {
  content: "";
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.5l3.2 3.2L16 8' fill='none' stroke='%23C9A66B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat;
}
.checks li.is-last::before { background-color: var(--brass); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.5l3.2 3.2L16 8' fill='none' stroke='%230B1F3A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.hook__label .input-needed { color: #F2A99B; border-color: #F2A99B; letter-spacing: 0.06em; }

/* ===== Shared header ===== */

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--brass);
  color: var(--navy);
  font-family: var(--font-head);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-head);
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
.site-header.is-solid { box-shadow: 0 1px 0 var(--rule-on-navy); }

/* Pages without a full-bleed opening start below the fixed header. */
body:not(.has-overlay-header) { padding-top: 116px; }

/* On the homepage the header sits clear over the opening until you scroll. */
.has-overlay-header .site-header:not(.is-solid) { background: transparent; }
.has-overlay-header .site-header:not(.is-solid) .utility { border-bottom-color: rgba(245, 242, 234, 0.12); }

.utility {
  border-bottom: 1px solid var(--rule-on-navy);
  font-size: 0.8rem;
}
.utility__inner { display: flex; justify-content: flex-end; }
.utility__nav { display: flex; gap: 1.75rem; }
.utility__nav a {
  display: block;
  padding: 0.55rem 0;
  color: var(--ink-on-navy);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.utility__nav a:hover { color: var(--white); }

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 80px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--white);
  text-decoration: none;
}
.brand__logo { display: block; height: 48px; width: auto; }
.brand__flag { color: #F2A99B; border-color: #F2A99B; margin: 0; font-size: 0.6rem; }

.site-nav { display: flex; align-items: center; gap: 2.25rem; }

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2rem;
}
.menu__item { position: static; }
.menu__item:has(.panel--list) { position: relative; }

.menu__trigger,
.menu__link {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--white);
  background: none;
  border: 0;
  padding: 0.5rem 0;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-bottom: 1px solid transparent;
}
.menu__trigger::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--brass);
  border-bottom: 1.5px solid var(--brass);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 150ms ease;
}
.menu__trigger[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.menu__trigger:hover,
.menu__link:hover,
.menu__trigger[aria-expanded="true"] { border-bottom-color: var(--brass); }

.header-cta { padding: 0.75rem 1.25rem; font-size: 0.95rem; }
.menu-utility { display: none; }

/* Dropdown panels */
.panel {
  display: none;
  background: var(--navy);
  border-top: 1px solid var(--rule-on-navy);
  box-shadow: 0 24px 48px rgba(11, 31, 58, 0.35);
}
.menu__trigger[aria-expanded="true"] + .panel { display: block; }

.panel a {
  color: var(--ink-on-navy);
  text-decoration: none;
  font-weight: 400;
}
.panel a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 4px; }
.panel ul { list-style: none; margin: 0; padding: 0; }
.panel li { padding: 0.45rem 0; }

/* Services and Training: full-width panel with grouped columns. */
.panel--mega {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
}
.panel__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1.3fr 1fr;
  gap: 2.5rem;
  padding-top: 40px;
  padding-bottom: 44px;
}
.panel__head {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 0.9rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule-on-navy);
}
.panel__all {
  display: inline-block;
  margin-top: 1.75rem;
  font-weight: 600 !important;
  color: var(--white) !important;
  border-bottom: 1px solid var(--brass);
  padding-bottom: 2px;
}
.panel__all::after { content: " \2192"; color: var(--brass); }

/* Industries and About: short list under the trigger. */
.panel--list {
  position: absolute;
  top: calc(100% + 22px);
  left: -1.5rem;
  min-width: 15rem;
  padding: 1rem 1.5rem;
}

/* Phone and tablet: menu opens as a full panel under the masthead. */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: 1px solid rgba(245, 242, 234, 0.4);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.55rem 0.9rem;
  border-radius: 2px;
  cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  position: relative;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -5px; }
.nav-toggle__bars::after { top: 5px; }

@media (max-width: 1080px) {
  body:not(.has-overlay-header) { padding-top: 72px; }
  .utility { display: none; }
  .masthead { height: 72px; }
  .brand__flag { display: none; }
  .nav-toggle { display: inline-flex; }

  .site-nav {
    display: none;
    position: fixed;
    top: 72px; left: 0; right: 0; bottom: 0;
    overflow-y: auto;
    background: var(--navy);
    border-top: 1px solid var(--rule-on-navy);
    padding: 8px var(--gutter) 40px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .site-header.is-open .site-nav { display: flex; }

  .menu { flex-direction: column; gap: 0; }
  .menu__item { border-bottom: 1px solid var(--rule-on-navy); }
  .menu__trigger,
  .menu__link {
    width: 100%;
    justify-content: space-between;
    padding: 1.1rem 0;
    font-size: 1.15rem;
    border-bottom: 0;
  }
  .menu__trigger:hover,
  .menu__link:hover,
  .menu__trigger[aria-expanded="true"] { border-bottom: 0; }

  .panel,
  .panel--mega,
  .panel--list {
    position: static;
    box-shadow: none;
    border-top: 0;
    min-width: 0;
    padding: 0 0 1rem;
    background: none;
  }
  .panel__grid { grid-template-columns: 1fr; gap: 1.25rem; padding: 0; }
  .panel__head { margin-top: 0.5rem; }

  .menu-utility {
    display: block;
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
  }
  .menu-utility a {
    display: block;
    padding: 0.55rem 0;
    color: var(--ink-on-navy);
    text-decoration: none;
  }
  .header-cta { margin-top: 1.75rem; text-align: center; padding: 0.95rem 1.25rem; }
}

/* ===== Shared footer ===== */

.site-footer {
  background: var(--navy);
  color: var(--ink-on-navy);
  font-size: 0.95rem;
  border-top: 1px solid var(--rule-on-navy);
}
.site-footer a { color: var(--ink-on-navy); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 4px; }
.site-footer .btn-primary { color: var(--navy); }
.site-footer .btn-primary:hover { color: var(--navy); text-decoration: none; }

.footer__top {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: clamp(40px, 6vw, 96px);
  padding: clamp(64px, 8vw, 96px) 0 56px;
}

.footer__brand .brand__logo { height: 52px; }
.footer__idea {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--ink-on-navy);
  margin: 1rem 0 1.75rem;
}

.footer__nav {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2rem;
}
.footer__head {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 1rem;
}
.footer__head a { color: var(--brass); }
.footer__head--gap { margin-top: 2rem; }
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li { padding: 0.3rem 0; line-height: 1.45; }
.footer__contact .input-needed { margin-left: 0; color: #F2A99B; border-color: #F2A99B; }
.footer__col .input-needed { color: #F2A99B; border-color: #F2A99B; }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 24px 0 32px;
  border-top: 1px solid var(--rule-on-navy);
  font-family: var(--font-head);
  font-size: 0.85rem;
}
.footer__bottom p { margin: 0; }
.footer__bottom ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.5rem; }

@media (max-width: 900px) {
  .footer__top { grid-template-columns: 1fr; }
  .footer__nav { grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; }
}
@media (max-width: 480px) {
  .footer__nav { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Homepage, short version: service names only in the path. */
.services .svc-list a { padding: 0.85rem 2rem 0.85rem 0; }
.services .svc-name { margin-bottom: 0; }

/* The PE value bridge reused inside an exhibit page. */
.tease__doc .ind__chart.pe-ex { position: static; transform: none; width: 100%; height: auto; margin: 8px 0 4px; }
@media (max-width: 900px) { .tease__doc .ind__chart.pe-ex { width: 100%; height: auto; } }

/* ===== Results pages ===== */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.promise--short { min-height: min(56vh, 520px); }
.promise--result h1 { max-width: 20ch; font-size: clamp(2.2rem, 4.6vw, 3.8rem); }
.hook__label a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(201, 166, 107, 0.5); }
.results-all { background: var(--bone); padding: clamp(56px, 7vw, 96px) 0; }
.svc-results__flag--light { color: #8A2D1F; }
.svc-results__flag--light .input-needed { color: #8A2D1F; border-color: #8A2D1F; margin: 0 0.5rem 0.4rem 0; }
.rcards--all { grid-template-columns: repeat(3, 1fr); }
.rcards--all .rcard a { box-shadow: none; border: 1px solid var(--rule); border-top: 4px solid var(--brass); }
.tease__more { margin: 1.5rem 0 0; font-family: var(--font-head); font-size: 0.95rem; color: var(--ink-soft); }
.tease__more a { color: var(--navy); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--brass); }
.tease__flags { margin: 1.25rem 0 0; line-height: 2; }
.tease__flags .input-needed { margin: 0; }
.c-track { fill: #E3E6EB; }
.c-pill { fill: #F6EEDF; stroke: var(--brass); }
.c-pilltext { font-size: 9.5px; font-weight: 700; fill: var(--navy); text-anchor: middle; }
.c-ms { fill: var(--white); stroke: var(--navy); stroke-width: 2; }
.c-ms--hot { fill: var(--brass); stroke: var(--brass); }
.c-bracket { fill: none; stroke: var(--brass-text); stroke-width: 1.5; }
@media (max-width: 1000px) { .rcards--all { grid-template-columns: 1fr 1fr; max-width: none; } }
@media (max-width: 640px) { .rcards--all { grid-template-columns: 1fr; } }

/* ===== About section ===== */
.facts { margin: 4px 0 0; }
.facts div { display: grid; grid-template-columns: 9rem 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid #EEEBE4; font-family: var(--font-head); }
.facts dt { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); padding-top: 3px; }
.facts dd { margin: 0; font-weight: 600; color: var(--navy); }
.facts .input-needed { display: inline-block; margin: 4px 0 0; }

.leader { background: var(--white); padding: clamp(64px, 8vw, 104px) 0; border-top: 1px solid var(--rule); }
.leader__grid { display: grid; grid-template-columns: 3fr 9fr; gap: clamp(24px, 4vw, 64px); }
.leader h2 { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 0 0 1rem; }
.leader p { font-size: 1.12rem; line-height: 1.65; max-width: 44em; margin: 0 0 1rem; }
.leader__note { font-size: 0.9rem !important; font-style: italic; color: var(--ink-soft); }
.leader__role .input-needed { vertical-align: middle; }

.clients-band { background: var(--bone); padding: 36px 0; border-top: 1px solid var(--rule); }
.clients-band .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1.5rem; }
.clients-band .eyebrow { margin: 0; }
.clients-band .clients__hold { margin: 0; }

.principles { background: var(--bone); color: var(--navy); padding: clamp(64px, 8vw, 108px) 0; }
.principles h2 { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.75rem); margin: 0 0 clamp(32px, 4vw, 52px); }
.principles__list { list-style: none; counter-reset: pr; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.principles__list li { counter-increment: pr; border-top: 2px solid var(--brass); padding-top: 20px; }
.principles__list li::before { content: counter(pr, decimal-leading-zero); display: block; font-family: var(--font-head); font-weight: 600; color: var(--brass-text); margin-bottom: 12px; }
.principles__list h3 { font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; line-height: 1.3; margin: 0 0 0.6rem; }
.principles__list p { margin: 0 0 0.6rem; color: var(--ink-soft); font-size: 1rem; line-height: 1.55; }
.principles .input-needed { margin: 0; }

.tease__body { font-size: 1.1rem; margin: -0.75rem 0 1.75rem; color: var(--ink-soft); }
.seats-table td { white-space: normal !important; }
.seats-table td { padding: 12px 8px 12px 0; font-size: 0.95rem; }

.ways { background: var(--bone); padding: clamp(64px, 8vw, 108px) 0; }
.ways h2 { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.75rem); margin: 0 0 clamp(32px, 4vw, 52px); }
.ways__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ways__list li { background: var(--white); border-top: 4px solid var(--navy); padding: 28px 26px 30px; }
.ways__n { font-family: var(--font-head); font-weight: 600; color: var(--brass-text); }
.ways__list h3 { font-family: var(--font-head); font-weight: 600; font-size: 1.4rem; margin: 10px 0 0.6rem; }
.ways__list p { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.ways__rule { margin: 32px 0 0; font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; padding-left: 16px; border-left: 3px solid var(--brass); }

@media (max-width: 960px) {
  .principles__list { grid-template-columns: 1fr 1fr; }
  .ways__list { grid-template-columns: 1fr; }
  .leader__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .principles__list { grid-template-columns: 1fr; }
  .facts div { grid-template-columns: 1fr; gap: 4px; }
}

/* ===== Contact, thank you, legal ===== */
.promise--contact { min-height: min(52vh, 480px); }
.promise--contact .input-needed, .promise--short .promise__line .input-needed { color: #F2A99B; border-color: #F2A99B; }
.contact { background: var(--bone); padding: clamp(56px, 7vw, 96px) 0; }
.contact__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.contact__grid > * { min-width: 0; }
.form { background: var(--white); border-top: 4px solid var(--navy); padding: clamp(24px, 3vw, 40px); }
.form__head, .book__head { font-family: var(--font-head); font-weight: 600; font-size: 1.5rem; margin: 0 0 1.25rem; }
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--font-head); font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; color: var(--navy); }
.field input, .field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--navy);
  background: var(--white);
  border: 1px solid #9AA3B2;
  border-radius: 2px;
  padding: 12px 14px;
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--brass); outline-offset: 1px; border-color: var(--navy); }
.field [aria-invalid="true"] { border-color: #8A2D1F; }
.form__error { color: #8A2D1F; font-family: var(--font-head); font-weight: 600; margin: 0 0 16px; }
.form .btn { border: 0; cursor: pointer; }
.form__flag { margin: 14px 0 0; }
.form__flag .input-needed { margin: 0; }
.book { background: var(--navy); color: var(--white); padding: clamp(24px, 3vw, 36px); margin-bottom: 24px; }
.book p { color: var(--ink-on-navy); margin: 0 0 1.25rem; }
.book .btn-ghost { color: var(--white); border-color: rgba(245, 242, 234, 0.6); }
.book .input-needed { color: #F2A99B; border-color: #F2A99B; }
.facts--contact div { grid-template-columns: 6rem 1fr; }

.legal { background: var(--bone); padding: clamp(48px, 6vw, 88px) 0 clamp(64px, 8vw, 108px); }
.legal__inner { max-width: 760px; }
.legal h1 { font-family: var(--font-head); font-weight: 600; font-size: clamp(2.2rem, 4vw, 3rem); margin: 0 0 0.5rem; }
.legal__meta { color: var(--ink-soft); margin: 0 0 2.5rem; }
.legal h2 { font-family: var(--font-head); font-weight: 600; font-size: 1.25rem; margin: 2rem 0 0.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.legal p { margin: 0; }

@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } }

/* ===== Continuous pages: Capabilities, Industries, Training ===== */
.promise--page { min-height: min(52vh, 480px); }

/* Sticky bar of sections, just under the fixed header. */
.subnav {
  position: sticky;
  top: var(--header-h, 114px);
  z-index: 40;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 6px 18px -12px rgba(11, 31, 58, 0.35);
}
.subnav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 26px;
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav__list::-webkit-scrollbar { display: none; }
.subnav__list a {
  display: block;
  white-space: nowrap;
  padding: 16px 0 14px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.subnav__list a:hover { color: var(--navy); }
.subnav__list a.is-active { color: var(--navy); border-bottom-color: var(--brass); }

.chapter { scroll-margin-top: calc(var(--header-h, 114px) + 56px); }

.chapter__band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
  padding: clamp(72px, 9vw, 120px) 0;
}
.chapter__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.chapter__img.promise__img--mirror { transform: scaleX(-1); }
.chapter__band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(11, 31, 58, 0.95) 0%, rgba(11, 31, 58, 0.84) 50%, rgba(11, 31, 58, 0.4) 100%);
}
.chapter__name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
  max-width: 18ch;
}
.chapter__hook {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.3;
  color: var(--brass);
  margin: 0 0 0.75rem;
  max-width: 30ch;
}
.chapter__line { color: var(--ink-on-navy); font-size: 1.1rem; line-height: 1.55; margin: 0 0 1.75rem; max-width: 40em; }
.chapter__band .hook__label .input-needed { color: #F2A99B; border-color: #F2A99B; }

.chapter .tease { padding: clamp(56px, 7vw, 96px) 0; }
.chapter:nth-of-type(even) .tease { background: var(--white); }
.tease__h {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 1.75rem;
}
.tease--solo .tease__text { max-width: 640px; }

.proofline { background: var(--navy); color: var(--white); padding: clamp(36px, 4vw, 52px) 0; }
.proofline__inner { display: grid; gap: 0.5rem; }
.proofline .eyebrow { color: var(--brass); margin: 0; }
.proofline__result { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.2; margin: 0; max-width: 32ch; }
.proofline__act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 0.75rem; }
.proofline .text-link { color: var(--white); }
.proofline .text-link::after { color: var(--brass); }
.proofline .input-needed { color: #F2A99B; border-color: #F2A99B; margin: 0; }

/* Training exhibits */
.train-table td { white-space: normal !important; }
.train-table td:first-child { font-weight: 600; color: var(--navy); width: 30%; }
.standard { font-family: var(--font-head); margin-top: 8px; }
.standard__row { display: grid; grid-template-columns: 9rem 1fr; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid #EEEBE4; }
.standard__label { font-weight: 600; color: var(--navy); line-height: 1.25; }
.standard__label small { font-weight: 400; color: var(--ink-soft); }
.standard__cells { display: flex; flex-wrap: wrap; gap: 6px; }
.topic { width: 26px; height: 26px; border-radius: 3px; }
.topic--plan { background: var(--navy); }
.topic--day { background: var(--brass); }
.standard__note { font-family: var(--font-body); font-size: 0.92rem; color: var(--ink-soft); margin: 14px 0 0; padding-top: 14px; border-top: 1px solid #EEEBE4; }

@media (max-width: 560px) {
  .standard__row { grid-template-columns: 1fr; gap: 8px; }
  .topic { width: 22px; height: 22px; }
}