.pn-band {
  padding-block: var(--pn-band-space);
  padding-inline: max(var(--pn-gutter), calc((100% - var(--pn-wide)) / 2));
  border-bottom: var(--pn-rule);
}

.pn-band-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: .5rem 3rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.pn-band-head .pn-kicker { grid-row: 1 / span 2; padding-top: .9rem; border-top: 2px solid var(--pn-slate); align-self: start; }
.pn-band-head h2 { margin-bottom: .4em; }
.pn-band-head > :not(.pn-kicker) { grid-column: 2; }

.pn-panes {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--pn-silver);
  border: var(--pn-rule);
}
.pn-panes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pn-panes-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pn-pane { margin: 0; padding: clamp(1.5rem, 3.2vw, 2.75rem); background: var(--pn-sky); }
.pn-pane > :last-child { margin-bottom: 0; }

.pn-numbered { counter-reset: pane; }
.pn-numbered > .pn-pane::before {
  counter-increment: pane;
  content: counter(pane, decimal-leading-zero);
  display: block;
  margin-bottom: 2.5rem;
  color: var(--pn-squeegee);
  font-family: var(--ui-font-heading);
  font-size: 2.75rem;
  font-weight: 300;
  line-height: 1;
}

.pn-band-note { margin-top: 1.75rem; color: var(--pn-slate-soft); }

.pn-hero { background: var(--pn-white); border-bottom: var(--pn-rule); }
.pn-hero-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 1;
  max-height: 82vh;
  width: 100%;
  background: var(--pn-glass-deep);
}
.pn-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.pn-hero-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(16 30 46 / .62) 0%, rgb(16 30 46 / .2) 42%, rgb(16 30 46 / 0) 62%),
    linear-gradient(112deg, rgb(255 255 255 / 0) 38%, rgb(255 255 255 / .12) 50%, rgb(255 255 255 / 0) 62%);
}
.pn-hero-sash {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: 2fr 1fr;
  border: clamp(.4rem, 1vw, .8rem) solid rgb(255 255 255 / .92);
}
.pn-hero-sash span + span { border-left: 2px solid rgb(255 255 255 / .55); }
.pn-hero-line {
  position: absolute;
  z-index: 2;
  top: clamp(1.75rem, 6vw, 5rem);
  left: calc(var(--pn-gutter) + 1rem);
  max-width: min(58%, 12em);
  margin: 0;
  color: var(--pn-white);
  font-size: clamp(2rem, 4.8vw, 4.2rem);
  text-shadow: 0 1px 1.5rem rgb(8 18 28 / .35);
}
.pn-hero-caption {
  max-width: none;
  margin: 0;
  padding-block: 1.25rem;
  padding-inline: max(var(--pn-gutter), calc((100% - var(--pn-wide)) / 2));
  color: var(--pn-slate-soft);
  font-size: 1.05rem;
}

.pn-start { background: var(--pn-white); }
.pn-start .pn-pane { background: var(--pn-white); }
.pn-start h2 { font-size: clamp(2.2rem, 4.8vw, 3.8rem); margin: 0; }
.pn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 1.75rem; }
.pn-action {
  display: inline-block;
  padding: .85rem 1.6rem;
  background: var(--pn-squeegee);
  color: var(--pn-white);
  border-radius: var(--ui-radius-control);
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
}
.pn-action:hover { background: var(--pn-squeegee-deep); color: var(--pn-white); }
.pn-quiet-link { font-weight: 600; }

@media (max-width: 52rem) {
  .pn-band-head { grid-template-columns: 1fr; }
  .pn-band-head .pn-kicker { grid-row: auto; }
  .pn-band-head > :not(.pn-kicker) { grid-column: 1; }
  .pn-panes-2, .pn-panes-3 { grid-template-columns: 1fr; }
}

@media (max-width: 36rem) {
  .pn-hero-frame { aspect-ratio: 4 / 5; }
  .pn-hero-photo { object-position: 46% center; }
  .pn-hero-line { max-width: 80%; }
  .pn-hero-sash { grid-template-columns: 1fr; }
  .pn-hero-sash span + span { display: none; }
}