/* Black Bird Group Ltd -- commercial layer.
 *
 * Cinematic but restrained. The visual register the brief asks for is the
 * current European defence-sector one: video hero, very light navigation,
 * large type, sparse layouts, premium spacing, dark framing around the
 * hero. What it explicitly rules out is the "mysterious intelligence
 * agency" look, OSINT-community insider tone, and running commentary --
 * this site sells capability, not topicality.
 *
 * The audience assumption that drives the layout: someone met Black Bird
 * Group at an event and is checking the site an hour later on a phone. The
 * proposition has to land before anything else loads.
 */

/* ------------------------------------------------------------ video hero */

/* The tagline sits in the lower-left quadrant, so the hero aligns its
   content to the bottom and the copy column stops short of half width. */
.vhero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  /* Deep bottom padding lifts the block to roughly the middle-left of the
     frame rather than sitting it on the floor. */
  padding-block: clamp(7rem, 14vh, 10rem) clamp(7rem, 22vh, 15rem);
  background: #000;
  overflow: hidden;
}

/* The dark frame: the moving image sits inside an inset border rather than
   bleeding to the window edge. Deep black, not a tinted near-black -- the
   frame should read as an absence, not as another surface colour. */
.vhero-frame {
  position: absolute;
  inset: clamp(0.5rem, 1.2vw, 1.1rem);
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(236, 238, 231, 0.09);
}

.vhero-media,
.vhero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The generated placeholder plate. Given a slow drift of its own so the
   hero is never a still frame, even before the video decodes or if the
   file is missing entirely. */
.vhero-media {
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  animation: hero-drift 52s ease-in-out infinite alternate;
}

@keyframes hero-drift {
  from {
    transform: scale(1.06) translate3d(-1.1%, 0.4%, 0);
  }
  to {
    transform: scale(1.13) translate3d(1.1%, -0.4%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vhero-media {
    animation: none;
    transform: scale(1.04);
  }
}

/* Canvas first, video on top. The video only becomes visible once it has
   actually decoded a frame, so a missing, blocked or still-loading file
   degrades to the generated motion instead of a black rectangle. */
.vhero-video {
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}

.vhero-video.is-ready {
  opacity: 1;
}

.vhero-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
      95deg,
      rgba(5, 7, 5, 0.9) 0%,
      rgba(5, 7, 5, 0.7) 38%,
      rgba(5, 7, 5, 0.25) 78%,
      rgba(5, 7, 5, 0.45) 100%
    ),
    linear-gradient(to top, rgba(5, 7, 5, 0.85), transparent 45%);
}

/* No max-width: .wrap supplies the width and the auto margins that centre
   it, and a narrower max-width on the same element makes those margins
   centre the smaller box instead -- which pushed the tagline into the
   middle of the screen rather than the left edge of the measure. */
.vhero-body {
  position: relative;
  z-index: 1;
}

/* Landing copy sits further in from the left edge on a laptop, where the
   gutter itself has shrunk. The desktop position is unchanged. */
@media (min-width: 900px) and (max-height: 900px) {
  .vhero-body {
    padding-left: 3.5vw;
  }
}

.vhero .eyebrow {
  color: var(--brass);
}

/* The master-brand tagline. Raleway Light, very large, tight leading, and
   exactly two rows -- the <em> forces the break so it never reflows to
   three lines or collapses to one at an awkward width. */
.vhero h1 {
  margin-top: 1.5rem;
  /* Its own scale rather than --step-5: each row has to fit on one line at
     320px, and "the Unthinkable" is the longest string on the site. The
     lower bound is set from that, and build/shots.js fails on overflow if
     it is ever raised too far.
     Re-slanted to peak at ~1900px like the rest of the scale: it used to
     be at full size by 1440, which filled a laptop screen edge to edge. */
  font-size: calc(clamp(1.95rem, 0.11rem + 5.8vw, 7rem) * var(--ui-type));
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.025em;
  white-space: nowrap;
}

.vhero h1 em {
  font-style: normal;
  display: block;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 4vh, 3rem);
  z-index: 1;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(236, 238, 231, 0.55);
  text-decoration: none;
}

.scroll-cue::after {
  content: '';
  width: 1px;
  height: 2.5rem;
  background: linear-gradient(to bottom, var(--brass), transparent);
}

@media (max-width: 700px) {
  .scroll-cue {
    display: none;
  }
}

/* ----------------------------------------------------------- page header */

.biz-head {
  padding-block: clamp(7rem, 14vh, 11rem) clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.biz-head-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.42;
}

.biz-head::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(11, 14, 11, 0.95) 20%,
    rgba(11, 14, 11, 0.6) 100%
  );
}

.biz-head > .wrap {
  position: relative;
  z-index: 1;
}

.biz-head h1 {
  margin-top: 1.25rem;
  font-size: var(--step-4);
  max-width: 20ch;
}

.biz-head .lede {
  margin-top: 1.5rem;
  color: rgba(236, 238, 231, 0.78);
}

/* ------------------------------------------------------- knowledge gap */

.gap-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 5rem);
}

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

.gap-points {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.gap-points li {
  padding-left: 1.5rem;
  border-left: 2px solid var(--brass);
  color: var(--muted);
}

.gap-points b {
  display: block;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* ------------------------------------------------------------- rhombi */

/* Four narrow rhombi stepping down from top left to bottom right, each
   carrying one capability. The skew is on the frame only; the image
   inside is counter-skewed so the picture itself is not distorted, and
   the label sits below the shape upright rather than inside it. */
.rhombi {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.6rem, 1.5vw, 1.5rem);
  align-items: start;
}

/* The clip belongs on a full-width stage, not on the grid itself. A skewed
   box is wider than its layout box; clipping at the grid's own edge sliced
   the outer two tiles off flat. Out here the lean runs into the page gutter
   the way it should, and only the viewport edge cuts it -- while the page
   still cannot be pushed sideways. */
.rhombi-stage {
  overflow-x: clip;
}

/* The step was 3.5 / 7 / 10.5rem, which together with taller tiles made
   the section deeper than a laptop viewport -- the heading and the bottom
   of the fourth tile were never on screen together. */
.rhombus:nth-child(2) {
  margin-top: clamp(0.75rem, 2vw, 2rem);
}

.rhombus:nth-child(3) {
  margin-top: clamp(1.5rem, 4vw, 4rem);
}

.rhombus:nth-child(4) {
  margin-top: clamp(2.25rem, 6vw, 6rem);
}

.rhombus a {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Positive skew, not negative. skewX(-14deg) shifts lower points left, so
   the shapes leaned "/" -- bottom-left to top-right, the opposite of the
   intended reading order. Positive skew leans them "\", top-left down to
   bottom-right, which is the direction the row itself steps in. */
.rhombus-shape {
  position: relative;
  display: block;
  aspect-ratio: 0.78;
  overflow: hidden;
  transform: skewX(20deg);
  display: flex;
  align-items: center;
  border: 1px solid rgba(236, 238, 231, 0.16);
  transition: border-color 0.3s var(--ease);
}

.rhombus a:hover .rhombus-shape {
  border-color: var(--brass);
}

.rhombus-img {
  position: absolute;
  inset: -10%;
  background-size: cover;
  background-position: center;
  /* Counter-skew, then scale so the corners cut off by the skew are still
     covered by image rather than by the frame's background. */
  transform: skewX(-20deg) scale(1.35);
  transition: transform 0.6s var(--ease);
}

.rhombus a:hover .rhombus-img {
  transform: skewX(-20deg) scale(1.44);
}

.rhombus-shape::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 7, 5, 0.92), rgba(5, 7, 5, 0.15) 62%);
  transition: background 0.4s var(--ease);
}

.rhombus a:hover .rhombus-shape::after {
  background: linear-gradient(to top, rgba(5, 7, 5, 0.95), rgba(5, 7, 5, 0.55) 100%);
}

/* Content sits on the picture, counter-skewed so the type is upright
   inside a slanted frame. The horizontal padding is deliberately generous:
   the slanted edges eat into the box at top and bottom. */
/* Centred in the shape, not sitting on its floor. The flex parent does
   the centring, so the block grows symmetrically when the hover copy
   opens instead of pushing itself off the bottom edge. */
.rhombus-content {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  padding: 1rem 1.5rem;
  transform: skewX(-20deg);
}

.rhombus-num {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--brass);
}

.rhombus-label {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
}

/* Revealed on hover or keyboard focus. grid-template-rows animates from
   0fr to 1fr, which transitions cleanly without hard-coding a height for
   copy of unknown length. */
.rhombus-more {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.4s var(--ease), opacity 0.3s var(--ease);
}

.rhombus a:hover .rhombus-more,
.rhombus a:focus-visible .rhombus-more {
  grid-template-rows: 1fr;
  opacity: 1;
}

.rhombus-more > span {
  overflow: hidden;
}

.rhombus-text {
  display: block;
  padding-top: 0.6rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(236, 238, 231, 0.82);
}

/* Toward the right edge: the counter-skew pushes the bottom-left corner
   outside the shape, so a left-aligned link hung off it. */
.rhombus-read {
  display: block;
  text-align: right;
  margin-top: 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Touch has no hover; show the copy rather than hiding it behind a
   gesture that does not exist. */
@media (hover: none) {
  .rhombus-more {
    grid-template-rows: 1fr;
    opacity: 1;
  }
}

@media (max-width: 860px) {
  .rhombi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1rem;
  }
  .rhombus:nth-child(2) {
    margin-top: 2.5rem;
  }
  .rhombus:nth-child(3) {
    margin-top: 0;
  }
  .rhombus:nth-child(4) {
    margin-top: 2.5rem;
  }
}

/* One column on a phone. The skew comes off with it: a full-width shallow
   parallelogram does not read as a rhombus, it reads as a mistake. */
@media (max-width: 480px) {
  .rhombi {
    grid-template-columns: 1fr;
  }
  .rhombus {
    margin-top: 0 !important;
  }
  .rhombus-shape {
    aspect-ratio: 2.1;
    transform: none;
  }
  .rhombus-img {
    inset: 0;
    transform: none;
  }
  .rhombus-content {
    transform: none;
    padding: 1rem 1.1rem;
  }
  .rhombus a:hover .rhombus-img {
    transform: scale(1.05);
  }
}

/* ---------------------------------------------------------- questions */

/* Question-led rather than consultancy-led. Far more concrete than a list
   of service nouns, and it is how the customer actually arrives. */
.questions {
  background: var(--surface);
  border-block: 1px solid var(--line);
}

.question-list li {
  border-top: 1px solid var(--line);
}

.question-list li:first-child {
  border-top: 0;
}

.question {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}

.question-num {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}

.question p {
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1.28;
  letter-spacing: -0.01em;
  max-width: 30ch;
}

@media (max-width: 620px) {
  .question {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
}

/* ------------------------------------------------------- capabilities */

.caps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.cap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  background: var(--bg);
  text-decoration: none;
  color: inherit;
  transition: background 0.3s var(--ease);
}

.cap:hover {
  background: var(--surface);
}

.cap-figure {
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line);
  margin-bottom: 0.5rem;
}

.cap-num {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--brass);
}

.cap h3 {
  font-size: var(--step-2);
  font-weight: 300;
  letter-spacing: -0.01em;
}

.cap p {
  color: var(--muted);
  font-size: 0.96rem;
}

.cap .arrow-link {
  margin-top: auto;
  padding-top: 1rem;
}

/* ------------------------------------------------------------ pillars */

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(2rem, 5vw, 4rem);
}

.pillar {
  padding-top: 1.25rem;
  border-top: 2px solid var(--brass);
}

.pillar h3 {
  font-size: var(--step-1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.65rem;
}

.pillar p {
  color: var(--muted);
  font-size: 0.96rem;
}

/* ------------------------------------------------------------- approach */

.steps {
  counter-reset: step;
  display: flex;
  flex-direction: column;
}

.step {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
}

.step:last-child {
  border-bottom: 1px solid var(--line);
}

.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-size: var(--step-2);
  font-weight: 300;
  color: var(--brass);
  line-height: 1;
}

.step h3 {
  font-size: var(--step-1);
  margin-bottom: 0.5rem;
}

.step p {
  color: var(--muted);
  max-width: var(--measure);
}

@media (max-width: 620px) {
  .step {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

/* -------------------------------------------------------- track record */

/* No customer logos, no "trusted by", no identifiable case studies. The
   credibility on this site is the public think-tank record, and it is
   labelled as think-tank work rather than as a commercial deliverable. */
.record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 3.5rem);
  border: 1px solid var(--line);
  background: var(--surface);
}

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

.record-outlets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  margin-top: 1.5rem;
}

.record-outlets li {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--muted);
}

/* ---------------------------------------------------------- positioning */

.europe {
  background: var(--forest);
  color: #fff;
  text-align: center;
}

.europe h2 {
  font-size: var(--step-4);
  max-width: 16ch;
  margin-inline: auto;
}

.europe-lines {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 2rem;
  font-size: var(--step-1);
  color: var(--cream);
}

/* -------------------------------------------------------------- briefing */

.briefing {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

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

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.field--wide {
  grid-column: 1 / -1;
}

.field label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.field input,
.field textarea,
.field select {
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
}

.field textarea {
  min-height: 7.5rem;
  resize: vertical;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--brass);
}

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

/* Consent sits above the button, not beside it: it has to be read before
   the form is sent, and the real site's HubSpot handover depends on it. */
.consents {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--muted);
  cursor: pointer;
  max-width: 34rem;
}

.consent input {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.2rem;
  accent-color: var(--brass);
}

.consent a {
  color: var(--brass);
}

/* Consents left, button right. They have to be read before sending, and
   putting them beside the action keeps that relationship visible. */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.form-status {
  font-size: 0.88rem;
  color: var(--brass);
}

/* ------------------------------------------------------- company facts */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.fact {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--surface);
}

.fact b {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.fact span {
  font-size: 0.98rem;
}

.facts--three {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

/* Section heading on the left, the definition card to its right and
   noticeably smaller -- it is a gloss on the brand, not a banner. */
.team-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(min(100%, 20rem), 0.85fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

@media (max-width: 820px) {
  .team-head {
    grid-template-columns: 1fr;
  }
}

.definition {
  margin: 0;
  padding: clamp(1.1rem, 2.2vw, 1.5rem) clamp(1.25rem, 2.5vw, 1.75rem);
  border-left: 3px solid var(--brass);
  background: var(--surface);
}

.definition blockquote {
  margin: 0;
}

.definition b {
  font-weight: 700;
}

.definition i {
  color: var(--muted);
  font-size: 0.9em;
}

.definition p + p {
  margin-top: 0.5rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------------------------------------------------------- company team */

.bizpeople {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: clamp(1.1rem, 2vw, 1.75rem);
  max-width: 52rem;
}

.bizperson {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* Placeholder portrait, not a photograph: publishing a face is a
   per-person security decision and cannot be made by a demo. */
.bizperson-photo {
  display: block;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line);
}

.bizperson h3 {
  margin-top: 0.2rem;
  font-size: var(--step-0);
  font-weight: 700;
}

.bizperson-role {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
}

.bizperson p:last-child {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--muted);
}

.bizperson {
  gap: 0.45rem;
}

/* ------------------------------------------------------- service pages */

.service-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

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

.service-aside {
  position: sticky;
  top: 6.5rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  background: var(--surface);
}

.service-aside h2 {
  font-size: var(--step-1);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.service-aside p {
  font-size: 0.92rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
  .service-aside {
    position: static;
  }
}

.deliverables li {
  display: flex;
  gap: 0.9rem;
  padding-block: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.deliverables li::before {
  content: '';
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.55rem;
  background: var(--brass);
}

.deliverables b {
  color: var(--ink);
  font-weight: 600;
}

/* The distinctive close: participants decide, then see what actually
   happened. The brief calls this the single most distinctive thing BBG
   delivers and says it should be visible rather than buried. */
.reveal-box {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--brass);
  background: rgba(184, 164, 111, 0.06);
}

.reveal-box h3 {
  font-size: var(--step-2);
  font-weight: 300;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

.reveal-steps {
  counter-reset: rstep;
  display: grid;
  gap: 0.9rem;
  margin-top: 1.25rem;
}

.reveal-steps li {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 0.85rem;
  color: var(--muted);
}

.reveal-steps li::before {
  counter-increment: rstep;
  content: counter(rstep);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--brass);
  padding-top: 0.15rem;
}

/* --------------------------------------------------------- partners page */

.partners-lock {
  max-width: 34rem;
  padding: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--line);
  background: var(--surface);
}

.partners-lock h2 {
  font-size: var(--step-2);
  margin-bottom: 1rem;
}

/* The Approach page closes with a button directly after body copy; without
   this it sits against the last line. */
.doc-section > p > .btn {
  margin-top: 1.5rem;
}