/* ==========================================================================
   sections.css - layout for each section, in scroll order.
   Mobile first. Columns stack and vertical rules become horizontal ones,
   which is handled once by .cols in base.css and repeated here only where a
   section needs something different.
   ========================================================================== */

/* ==========================================================================
   1. HERO
   Two column split divided by a vertical ink rule. The text column sits on
   the page grid; the cinematic panel bleeds to the right edge.
   ========================================================================== */

.hero {
  border-top: 0;
  padding: 0;
}

.hero__inner {
  display: grid;
  max-width: 1560px;
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.hero__inner > * { min-width: 0; }

.hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: calc(82px + var(--space-2xl)) var(--space-2xl);
}

.hero__text > * { max-width: 34rem; }

/* Hero scale type is set at 0.93 leading, which draws the line box tighter
   than the glyphs actually are. Italic descenders in the rust emphasis phrase
   will collide with whatever follows unless it is given real room. */
.hero__text .headline--hero { margin-bottom: var(--space-xl); }

/* The subhead sits above a hairline, per the brief. */
.hero__sub {
  padding-bottom: var(--space-l);
  border-bottom: var(--rule-hair);
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--mid);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m);
  margin-top: var(--space-l);
}

.hero__panel { position: relative; }

.hero__panel .cine {
  height: 100%;
  min-height: 320px;
  /* The photograph sits as a plate centred in the ink field rather than
     filling it. The panel is portrait and the photograph is landscape, so
     filling would crop more than half the image away and upscale what was
     left. Centring shows the whole frame, and displays it smaller than its
     source, so it stays sharp. The ink above and below is the letterbox. */
  display: grid;
  align-content: center;
}

.hero__panel .cine__media { height: auto; }

.hero__panel .cine__media img {
  height: auto;
  object-fit: contain;
}

@media (max-width: 899px) {
  .hero__inner { padding-right: 0; }
  .hero__panel { margin-left: calc(var(--gutter) * -1); }
  .hero__panel .cine { aspect-ratio: 4 / 3; min-height: 0; }
  .hero__actions .btn { width: 100%; }
}

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: stretch;
    padding-right: 0;
  }

  .hero__text {
    padding-right: clamp(2.5rem, 5vw, 5rem);
    border-right: var(--rule-ink);
  }

  .hero__panel .cine { min-height: 78vh; }
}


/* ==========================================================================
   2. THESIS
   One serif statement, then three columns divided by vertical hairlines,
   each opening with a small rust serif numeral.
   ========================================================================== */

.thesis__statement {
  max-width: 20ch;
  font-size: var(--text-display);
}


/* The CONTENTS block was removed in August 2026 along with the homepage
   contents list, the only thing that used it. */


/* ==========================================================================
   3. WHAT WE DO
   Four activation types in a divided grid, then the six categories as plain
   text separated by vertical rules.
   ========================================================================== */

.activations {
  display: grid;
  gap: 0;
  margin-top: var(--space-2xl);
}

.activation {
  padding-block: var(--space-l);
  border-top: var(--rule-hair);
}

.activation__title {
  font-size: var(--text-title);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-xs);
}

.activation__body { color: var(--mid); font-size: var(--text-small); }

/* The two column rules are bounded at both ends on purpose. An nth-child
   selector outweighs the plain class selector used in the four column block
   below, so if these were left open ended they would keep winning at desktop
   and strip the padding from every even item. */
@media (min-width: 760px) and (max-width: 1059px) {
  .activations { grid-template-columns: repeat(2, 1fr); }
  .activation { padding-inline: var(--space-l); }
  .activation:nth-child(odd) { padding-left: 0; }
  .activation:nth-child(even) { padding-right: 0; border-left: var(--rule-hair); }
}

/* Three across, not four. There are five activation types now, and five items
   in a four column grid leaves a row of four and an orphan. Three columns
   gives a clean three plus two, and the wider columns suit the body copy. */
@media (min-width: 1060px) {
  .activations { grid-template-columns: repeat(3, 1fr); }
  .activation { padding-inline: var(--space-m); border-left: var(--rule-hair); }
  .activation:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  .activation:nth-child(3n) { padding-right: 0; }
}

.whowith {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: var(--rule-ink);
}

.whowith__line {
  max-width: 34ch;
  font-size: var(--text-title);
  margin-bottom: var(--space-l);
}

/* Plain text separated by vertical rules. Not pills, not chips. */
.categories {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--space-xs);
}

.categories li {
  padding-inline: clamp(0.75rem, 2vw, 1.5rem);
  border-left: var(--rule-hair);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.5rem);
  line-height: 1.3;
  color: var(--ink);
}

.categories li:first-child { padding-left: 0; border-left: 0; }


/* ==========================================================================
   4. HOW WE WORK
   Five steps as a divided row with large serif numerals.
   ========================================================================== */

.steps {
  display: grid;
  gap: 0;
  margin-top: var(--space-2xl);
}

.step {
  padding-block: var(--space-l);
  border-top: var(--rule-hair);
}

.step__title {
  font-size: var(--text-title);
  line-height: var(--leading-snug);
  margin-block: var(--space-s) var(--space-xs);
}

.step__body { color: var(--mid); font-size: var(--text-small); }

@media (min-width: 700px) and (max-width: 1059px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step { padding-inline: var(--space-l); }
  .step:nth-child(odd) { padding-left: 0; }
  .step:nth-child(even) { padding-right: 0; border-left: var(--rule-hair); }
}

@media (min-width: 1060px) {
  .steps { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .step { padding-inline: var(--space-m); border-left: var(--rule-hair); }
  .step:first-child { padding-left: 0; border-left: 0; }
  .step:last-child { padding-right: 0; }
}

.steps__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-l);
  margin-top: var(--space-2xl);
  padding-top: var(--space-l);
  border-top: var(--rule-ink);
}

.steps__footer p { max-width: 44ch; color: var(--mid); font-size: var(--text-small); }


/* ==========================================================================
   5. THE METHOD
   Artist column and brand column with the overlap between them, then the
   four statistics in a divided row.
   ========================================================================== */

.overlap { margin-top: var(--space-2xl); }

.overlap__label { margin-bottom: var(--space-2xs); }

.overlap__title {
  font-size: var(--text-title);
  margin-bottom: var(--space-m);
}

.overlap__items li {
  padding-block: var(--space-2xs);
  border-top: var(--rule-hair);
  color: var(--mid);
  font-size: var(--text-small);
}

/* The middle column. Deliberately the quiet centre of the diagram. */
.overlap__join { text-align: center; }

.overlap__join .overlap__title {
  font-style: italic;
  color: var(--rust);
  margin-bottom: var(--space-2xs);
}

.overlap__join p { font-size: var(--text-small); color: var(--mid); }

@media (min-width: 860px) {
  .overlap { align-items: center; }
}

/* Stat row. stats.js counts each numeral up once. */
.statband {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: var(--rule-ink);
}

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.7rem + 2.8vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  margin-top: var(--space-s);
  max-width: 24ch;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  line-height: 1.5;
}

.method__credit {
  margin-top: var(--space-2xl);
  padding-top: var(--space-l);
  border-top: var(--rule-hair);
}

.method__credit p { max-width: 62ch; color: var(--mid); font-size: var(--text-small); }

/* The gated offer. Promises a conversation, not a download. */
.gate {
  display: grid;
  gap: var(--space-l);
  margin-top: var(--space-2xl);
  padding-top: var(--space-l);
  border-top: var(--rule-ink);
}

@media (min-width: 860px) {
  .gate { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2xl); }
}

.gate__title { font-size: var(--text-title); margin-bottom: var(--space-2xs); }
.gate__body { max-width: 54ch; color: var(--mid); font-size: var(--text-small); }
.gate__cta { justify-self: start; }

/* Stacked variant for the contact page sidebar, where there is no room for
   the title and the button to sit side by side. */
.gate--stacked {
  margin-top: var(--space-xl);
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--space-m);
}


/* ==========================================================================
   6. PROOF
   Two case studies side by side, divided by a vertical ink rule. Each is
   typographic until real photography arrives. See the note in work.html for
   how to switch the cinematic opener on.
   ========================================================================== */

.cases { margin-top: var(--space-2xl); }

/* Marks a case study as a concept rather than delivered work. Sits above the
   kicker so it is read before the brand and artist names, not after them.
   Boxed rather than plain so it cannot be mistaken for a section eyebrow. */
.case__label {
  display: inline-block;
  margin-bottom: var(--space-s);
  padding: 0.35em 0.7em;
  border: 1px solid var(--rust);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--rust);
}

.case__kicker {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--rust);
}

.case__title {
  margin-top: var(--space-xs);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
}

/* The cinematic opener. Sits under the campaign title inside the left column,
   so the card and the name read as one unit. The 3:2 ratio matches both
   supplied cards, so nothing is cropped, and at column width the images
   render smaller than their source and stay sharp. */
.case__opener { margin-top: var(--space-l); }
.case__opener .cine { aspect-ratio: 3 / 2; }

.case__wins { margin-top: var(--space-l); }

.case__win {
  padding-block: var(--space-m);
  border-top: var(--rule-hair);
}

.case__win:last-child { padding-bottom: 0; }

.case__win dt {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: var(--space-2xs);
}

.case__win dd { color: var(--mid); font-size: var(--text-small); }


/* Track record. Names as text in a divided strip, no logo chips. */
.record {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: var(--rule-ink);
}


.strip + .strip { margin-top: var(--space-xl); }

.strip__label { margin-bottom: var(--space-m); }

.strip__list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: var(--space-xs);
}

.strip__list li {
  padding-inline: clamp(0.75rem, 2vw, 1.5rem);
  border-left: var(--rule-hair);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.6rem);
  line-height: 1.3;
  color: var(--ink);
}

.strip__list li:first-child { padding-left: 0; border-left: 0; }


/* ==========================================================================
   7. MEASUREMENT
   Two columns divided by a vertical rule. Hairline separated lists, no
   bullet dots.
   ========================================================================== */

.measure__anchor {
  max-width: 22ch;
  font-size: var(--text-display);
}

.measure__note {
  max-width: 56ch;
  margin-top: var(--space-m);
  color: var(--mid);
  font-size: var(--text-lead);
  line-height: 1.5;
}

.measure__cols { margin-top: var(--space-2xl); }

.measure__col-title {
  font-size: var(--text-title);
  padding-bottom: var(--space-s);
  margin-bottom: var(--space-2xs);
  border-bottom: var(--rule-ink);
}

.measure__list li {
  padding-block: var(--space-s);
  border-bottom: var(--rule-hair);
  color: var(--mid);
  font-size: var(--text-small);
}

.measure__list li:last-child { border-bottom: 0; }


/* ==========================================================================
   8. TEAM
   Four portraits in a divided row. Square images, name in grotesk semibold,
   role in Mid below.
   ========================================================================== */

.team {
  display: grid;
  gap: var(--space-l);
  margin-top: var(--space-2xl);
}

/* Circular portraits, every one the same size.
   The width is fixed rather than a percentage on purpose. The columns are not
   equal: the outer two sit flush to the page margin and carry no edge padding,
   so a percentage would render the end portraits noticeably larger than the
   middle two. A fixed width makes all four identical at every breakpoint. */
.member__media {
  aspect-ratio: 1 / 1;
  /* Sized from the viewport, not from the column. The columns are not equal:
     the outer two sit flush to the page margin and carry no edge padding, so
     anything percentage based renders the end portraits larger than the middle
     two. A viewport based clamp is identical in all four columns, and the
     upper bound is set below the narrowest column at every breakpoint so it
     never gets clipped back. */
  width: clamp(160px, 16vw, 200px);
  margin-bottom: var(--space-m);
  border-radius: 50%;
}

/* Square source images need no help: a centred crop is already right. This is
   for the one portrait original, 364x549, where a centred square crop would
   take the top off the head and fill the frame with torso. Anchoring to the
   top is the most centred the face can get, and in a circle that matters more
   than in a square, since the arc cuts in at the top and bottom. */
.member__media--top img { object-position: 50% 0; }

/* The four headshots come from four different shoots: grey, mottled beige,
   grey, and black backgrounds, at four different colour temperatures. Side by
   side on a bone page that reads as untidy rather than as a team. Desaturating
   unifies them and matches the black and white hero photograph.
   To go back to colour, delete this one rule. */
.member__media img { filter: grayscale(1) contrast(1.02); }

.member__name {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.member__role {
  margin-top: var(--space-3xs);
  font-size: var(--text-small);
  color: var(--mid);
}

.member__bio {
  margin-top: var(--space-s);
  padding-top: var(--space-s);
  border-top: var(--rule-hair);
  font-size: var(--text-small);
  color: var(--mid);
}

/* If a bio ever runs to more than one paragraph, add a rule dropping the
   hairline and top padding on the second. All four are single paragraphs
   today, so there is nothing here to keep. */

/* Bounded at both ends for the same reason as the activation grid above:
   nth-child outweighs the plain class selector used in the four column block. */
@media (min-width: 600px) and (max-width: 999px) {
  .team { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .member { padding: 0 var(--space-l) var(--space-l); }
  .member:nth-child(odd) { padding-left: 0; }
  .member:nth-child(even) { padding-right: 0; border-left: var(--rule-hair); }
  .member:nth-child(n + 3) { padding-top: var(--space-l); border-top: var(--rule-hair); }
}

@media (min-width: 1000px) {
  .team { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .member { padding: 0 var(--space-m); border-left: var(--rule-hair); }
  .member:first-child { padding-left: 0; border-left: 0; }
  .member:last-child { padding-right: 0; }
}


/* ==========================================================================
   9. CONTACT
   ========================================================================== */

.contact {
  display: grid;
  gap: var(--space-2xl);
}

@media (min-width: 960px) {
  .contact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: 0;
  }
  .contact__pitch { padding-right: var(--space-2xl); }
  .contact__side { padding-left: var(--space-2xl); border-left: var(--rule-ink); }
}

.contact__pitch p { max-width: 40ch; color: var(--mid); font-size: var(--text-small); }

/* With no form, the email address is the action. Set at display size so it
   reads as the thing to do rather than as a footnote. */
.contact__note { margin-top: var(--space-l); }

.next-steps { margin-top: 0; }

.next-step {
  padding-block: var(--space-m);
  border-top: var(--rule-hair);
}

.next-step dt {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: var(--space-3xs);
}

.next-step dd { max-width: 38ch; color: var(--mid); font-size: var(--text-small); }


.contact__email {
  display: inline-block;
  margin-top: var(--space-s);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 0.9rem + 2.4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  word-break: break-word;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  transition: color var(--ui-duration) var(--ease),
              border-color var(--ui-duration) var(--ease);
}

.contact__email:hover { color: var(--rust); border-bottom-color: var(--rust); }

/* The phone sits under the email as the second way in. Deliberately a step
   down in size: email is still the primary action on this page. */
.contact__phone {
  display: block;
  width: fit-content;
  margin-top: var(--space-s);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 0.85rem + 1.5vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--mid);
  border-bottom: 1px solid var(--rule);
  transition: color var(--ui-duration) var(--ease),
              border-color var(--ui-duration) var(--ease);
}

.contact__phone:hover { color: var(--rust); border-bottom-color: var(--rust); }


/* ==========================================================================
   PAGE HEADER
   Opens every page other than the home page.
   ========================================================================== */

.pagehead {
  padding-block: calc(82px + var(--space-2xl)) var(--space-2xl);
  border-top: 0;
}

.pagehead__headline {
  max-width: 16ch;
  font-size: var(--text-hero);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-hero);
}

/* Same descender clearance as the hero headline. */
.pagehead__headline + .lede { margin-top: var(--space-xl); }


/* ==========================================================================
   CLOSING CALL TO ACTION
   Ends every page other than contact, so there is always a next step.
   ========================================================================== */

.cta-band {
  display: grid;
  gap: var(--space-l);
}

@media (min-width: 860px) {
  .cta-band {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2xl);
  }
}

.cta-band__title { font-size: var(--text-display); }

.cta-band__body {
  margin-top: var(--space-s);
  max-width: 44ch;
  color: var(--mid);
  font-size: var(--text-small);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m);
}

@media (max-width: 559px) { .cta-band__actions .btn { width: 100%; } }

/* Sits under a homepage teaser and sends the visitor to the full page. */
.section__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m);
  margin-top: var(--space-xl);
  padding-top: var(--space-l);
  border-top: var(--rule-ink);
}


/* ==========================================================================
   DEPLOYMENT BRIEF v4 COMPONENTS
   The media value argument: problem, program, components, proof.
   ========================================================================== */

/* ---- The program: a bordered anatomy strip -------------------------------
   Raised off the bone page with a hairline box, so the shape of the offer
   reads as a single object rather than four loose columns. */

.anatomy {
  margin-top: var(--space-2xl);
  background: var(--bone-warm);
  border: var(--rule-ink);
  display: grid;
  gap: 0;
}

.anatomy__item { padding: var(--space-l); }

.anatomy__item + .anatomy__item { border-top: var(--rule-hair); }

.anatomy__num {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--rust);
  margin-bottom: var(--space-s);
}

.anatomy__title {
  font-size: var(--text-title);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2xs);
}

.anatomy__body { color: var(--mid); font-size: var(--text-small); }

@media (min-width: 900px) {
  .anatomy { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .anatomy__item + .anatomy__item {
    border-top: 0;
    border-left: var(--rule-hair);
  }
}

/* .anatomy__close removed: the homepage copy brief dropped the closing line
   under the program strip, and nothing else used the rule. */

/* .creditline removed in August 2026 along with the credibility line strip,
   the only thing that used it. */

/* ---- The components: two by two, names and kickers only ------------------ */

.components {
  display: grid;
  gap: 0;
  margin-top: var(--space-2xl);
}

.component {
  padding-block: var(--space-l);
  border-top: var(--rule-hair);
}

/* Numerals as ornament, same serif italic as .anatomy__num but set in faint
   grey rather than rust. The labels below them are already rust, and the
   design rule is no more than two rust elements per section: rust numerals
   here would have made six.

   Roman, like every numbered list on the homepage. The inner pages use zero
   padded arabic (01, 02) for their longer sequences. Both are sanctioned by
   the design system; the split is by page, so keep it. */
.component__num {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--faint);
  margin-bottom: var(--space-xs);
}

.component__label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: var(--space-2xs);
}

.component__kicker {
  font-family: var(--font-display);
  font-size: var(--text-title);
  line-height: var(--leading-snug);
  color: var(--ink);
}

@media (min-width: 760px) {
  .components { grid-template-columns: repeat(2, 1fr); }
  .component { padding-inline: var(--space-l); }
  .component:nth-child(odd) { padding-left: 0; }
  .component:nth-child(even) { padding-right: 0; border-left: var(--rule-hair); }
}

/* ---- Pull quote band ----------------------------------------------------- */

.pullquote {
  background: var(--bone-warm);
  border-top: var(--rule-ink);
  border-bottom: var(--rule-ink);
  padding-block: var(--space-2xl);
}

.pullquote p {
  max-width: 30ch;
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}

.pullquote em {
  display: block;
  font-style: italic;
  color: var(--rust);
}

/* ---- Dark band: accountability -------------------------------------------
   The light page inverted. Not a cinematic band: no photograph and no amber,
   so it does not count against the three image bands the design brief allows. */

.section--dark {
  background: var(--dark-bg);
  color: var(--dark-text);
  border-top: 0;
}

.section--dark .eyebrow { color: var(--rust-light); }
.section--dark .headline { color: var(--dark-text); }
.section--dark .em { color: var(--rust-light); }

.pledges { margin-top: var(--space-2xl); }

/* .pledges is an <ol> on the homepage, so the marker has to go. */
.pledges { list-style: none; }

/* Rust inside a dark band is --rust-light, which measures 5.8:1 on ink.
   Plain --rust does not clear AA there. */
.pledge__num {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--rust-light);
  margin-bottom: var(--space-s);
}

.pledge__title {
  font-size: var(--text-title);
  line-height: var(--leading-snug);
  color: var(--dark-text);
  margin-bottom: var(--space-xs);
}

.pledge__body { color: var(--dark-mid); font-size: var(--text-small); }

.section--dark .cols > * + * { border-top-color: var(--dark-rule); }

@media (min-width: 860px) {
  .section--dark .cols > * + * {
    border-top: 0;
    border-left: 1px solid var(--dark-rule);
  }
}

/* ---- Two questions, two answers ------------------------------------------ */

.qa { margin-top: var(--space-2xl); }

.qa__item {
  padding-block: var(--space-l);
  border-top: var(--rule-hair);
}

.qa__q {
  font-size: var(--text-title);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-xs);
}

.qa__a { max-width: 62ch; color: var(--mid); font-size: var(--text-small); }


/* ---- Measurement subsection ---------------------------------------------- */

.measure__detail {
  margin-top: var(--space-2xl);
  padding-top: var(--space-l);
  border-top: var(--rule-ink);
}

.measure__detail .qa { margin-top: var(--space-m); }

/* ---- Dual benefit --------------------------------------------------------- */

.dual { margin-top: var(--space-2xl); }

.dual__title {
  font-size: var(--text-title);
  line-height: var(--leading-snug);
  color: var(--ink);
  margin-bottom: var(--space-xs);
}

.dual__body { color: var(--mid); font-size: var(--text-small); }

/* ---- Lead time note -------------------------------------------------------
   Sits beside the closing call to action on how-we-work. Set in serif at
   title size so it reads as the urgent fact rather than as body copy. */

.steps__footer-text { max-width: 46ch; }

.leadtime {
  font-family: var(--font-display);
  font-size: var(--text-title);
  line-height: var(--leading-snug);
  color: var(--ink);
  margin-bottom: var(--space-s);
}


/* ==========================================================================
   LEGAL PAGES
   Long form text at a readable measure. Privacy policy only, for now.
   ========================================================================== */

.legal { max-width: 68ch; }

.legal__section + .legal__section {
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: var(--rule-hair);
}

.legal__title {
  font-size: var(--text-title);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-s);
}

.legal p { color: var(--mid); font-size: var(--text-small); }
.legal p + p { margin-top: var(--space-s); }
.legal strong { color: var(--ink); font-weight: 600; }

.legal ul { margin-top: var(--space-s); list-style: none; }
.legal li + li { margin-top: var(--space-s); }

.legal li {
  position: relative;
  padding-left: var(--space-m);
  color: var(--mid);
  font-size: var(--text-small);
}

/* A short rust rule rather than a bullet, to stay in the broadsheet idiom. */
.legal li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 1px;
  background: var(--rust);
}

/* The cookie table is genuinely tabular, so it is a table. It scrolls inside
   its own wrapper rather than widening the page on a narrow screen. */
.legal__table-wrap {
  margin-top: var(--space-m);
  overflow-x: auto;
}

.legal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
  text-align: left;
}

.legal__table th {
  padding: var(--space-xs) var(--space-s) var(--space-xs) 0;
  border-bottom: var(--rule-ink);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.legal__table td {
  padding: var(--space-s) var(--space-s) var(--space-s) 0;
  border-bottom: var(--rule-hair);
  color: var(--mid);
  vertical-align: top;
}

.legal__table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  color: var(--ink);
  white-space: nowrap;
}

.legal__updated { margin-top: var(--space-m); color: var(--faint); }

/* Unfilled facts. Loud on purpose: a legal page that ships with a placeholder
   inside it is worse than having no page at all, so these are meant to be
   impossible to miss and impossible to mistake for real copy.
   Nothing uses this today. It is kept deliberately, because the privacy policy
   will be revised and this is the mechanism that stops a half finished draft
   going live. Wrap an unknown fact in <span class="todo">, and delete the whole
   span, not just its text, when you fill it in. */
.todo {
  background: var(--rust);
  color: var(--bone);
  padding: 0.1em 0.45em;
  font-family: var(--font-body);
  font-size: 0.92em;
  font-weight: 600;
  letter-spacing: 0.04em;
}