.bridge-headline {
  font-size: clamp(2.6rem, 5vw, 7rem);
  font-weight: 600;
  line-height: .97;
  letter-spacing: -.055em;
  overflow-wrap: anywhere;
}
.bridge-headline span { display: block; }
.bridge-headline span + span { color: #0066ff; }
.bridge-lead { max-width: 34rem; margin-top: 1.75rem; font-size: 1rem; line-height: 1.65; }
.project-bridge {
  padding: clamp(3rem, 7vw, 7rem) clamp(1.25rem, 3vw, 3rem);
  max-width: 1728px;
  margin-inline: auto;
  scroll-margin-top: 6rem;
}
.bridge-kicker, .bridge-number {
  font-family: ui-monospace, monospace;
  font-size: .75rem;
  letter-spacing: .12em;
  color: #0054cc;
}
.project-bridge h2 {
  font-size: clamp(2rem, 4vw, 4.5rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.045em;
  margin-block: .75rem;
}
.bridge-intro { max-width: 42rem; line-height: 1.65; }
.bridge-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 2rem;
  gap: 1px;
  border: 1px solid #ddd;
  background: #ddd;
}
.bridge-role { display: grid; align-content: start; grid-template-rows: auto auto 1fr auto; gap: .75rem; padding: clamp(1.25rem, 3vw, 2.5rem); background: #fff; }
.bridge-role h3 { font-size: clamp(1.35rem, 2.25vw, 2rem); font-weight: 600; line-height: 1.1; }
.bridge-role p, .bridge-example p { line-height: 1.6; }
.bridge-role a { color: #0054cc; text-decoration: underline; text-underline-offset: .2em; justify-self: start; }
.bridge-example { margin-top: 1.5rem; border-bottom: 1px solid #ddd; padding-bottom: 1rem; }
.bridge-example summary { cursor: pointer; font-weight: 600; padding-block: .5rem; }
.bridge-example p { margin-top: .5rem; max-width: 48rem; }
@media (max-width: 767px) {
  .bridge-grid { grid-template-columns: 1fr; }
}