/* Billboard treatment for the portrait panel (v24.2), all widths.
   One vertical gradient. First headline line sits behind the figure, second line in front of it.
   --u is a width unit that stops growing at 1520px so the poster does not balloon on very wide screens. */
.p2-cover { --u: min(1vw, 15.2px); display: block; position: relative; min-height: 0; overflow: hidden; isolation: isolate;
  padding: calc(var(--u) * 5) 0 0; border-top: 0;
  background: linear-gradient(180deg, var(--bg) 0%, #12305a 16%, #1d4a82 42%, #153763 66%, var(--bg) 92%); }
.hero--photo + .feature > .p2-cover::before { display: none; }
.p2-cover::after { display: block; content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: url('assets/grain.svg'); opacity: .5; mix-blend-mode: overlay; }

.p2-fig { position: absolute; z-index: 1; top: calc(var(--u) * .4); left: calc(50% - var(--u) * 16.5); right: auto;
  height: calc(var(--u) * 88); max-height: none; margin: 0; display: block; pointer-events: none; }
.p2-fig img { display: block; height: 100%; width: auto; max-width: none; transform: none;
  filter: contrast(1.05) saturate(.96); -webkit-mask-image: none; mask-image: none; }

.p2-bar.p2-main { position: relative; z-index: auto; margin-top: 0; }
.p2-title { margin: 0; width: auto; font-size: calc(var(--u) * 10.6); line-height: .86; letter-spacing: -.055em; }
.p2-title span { display: block; position: relative; white-space: nowrap; }
.p2-title span:first-child { z-index: 0; color: #f4f6f9; }
.p2-title span + span { z-index: 2; color: #ffffff; margin-top: calc(var(--u) * 30.5);
  text-shadow: 0 2px 26px rgba(6,14,26,.7), 0 0 2px rgba(6,14,26,.5); }

.p2-text { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 24px clamp(32px, 5vw, 88px); align-items: start; max-width: none; margin: calc(var(--u) * 4.5) 0 0;
  padding: 30px 0 clamp(72px, 8vw, 110px); border-top: 1px solid rgba(255,255,255,.16); }
.p2-lead { max-width: 30ch; }
.p2-body { max-width: 60ch; }

@media (max-width: 700px) {
  /* close the dead gap between the hero and the panel */
  .hero--photo .hero-copy { padding-bottom: 34px; }
  .hero--photo::after { display: none; }

  .p2-cover { padding-top: 9vw; }
  .p2-fig { top: 6vw; left: auto; right: -5vw; height: 215vw; }
  .p2-title { font-size: 16.6vw; }
  .p2-title span { white-space: normal; }
  .p2-title span + span { margin-top: 75vw; }
  .p2-text { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 9vw; padding: 26px 0 84px; }
  .p2-lead { font-size: 20px; max-width: none; }
  .p2-body { font-size: 17px; line-height: 1.72; max-width: none; }
}

/* ---- Photo billboards for the remaining panels (v24.3) ----
   Same system as the portrait panel: one image, one giant line of type set into it, text in two columns under a rule. */
.bb { --u: min(1vw, 15.2px); --fig-h: 50; --title-top: 33; position: relative; overflow: hidden; isolation: isolate; background: var(--bg); }
.bb::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: url('assets/grain.svg'); opacity: .5; mix-blend-mode: overlay; }
.bb-fig { position: absolute; inset: 0 0 auto 0; height: calc(var(--u) * var(--fig-h)); margin: 0; z-index: 0; overflow: hidden; background: var(--bg-2); }
.bb-fig picture { display: block; width: 100%; height: 100%; }
.bb-fig img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.bb-fig::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(8,17,28,.45) 14%, rgba(8,17,28,0) 36%, rgba(8,17,28,.25) 58%, rgba(8,17,28,.8) 84%, var(--bg) 100%),
    linear-gradient(0deg, rgba(24,62,112,.34), rgba(24,62,112,.34)); }
.bb-bar { position: relative; z-index: 2; width: min(100% - 2 * var(--gutter), 1280px); margin-inline: auto; padding-top: calc(var(--u) * var(--title-top)); }
.bb-title { margin: 0; font-family: 'Profile Display', Arial, sans-serif; font-weight: 800; font-size: calc(var(--u) * 10.6); line-height: .86;
  letter-spacing: -.055em; color: #fff; white-space: nowrap; text-wrap: nowrap; text-shadow: 0 2px 26px rgba(6,14,26,.7), 0 0 2px rgba(6,14,26,.5); }
.bb-text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px clamp(32px, 5vw, 88px); align-items: start;
  margin: calc(var(--u) * 4.5) 0 0; padding: 30px 0 clamp(72px, 8vw, 110px); border-top: 1px solid rgba(255,255,255,.16); }
.bb-text p { margin: 0; }
.bb-lead { font: 450 clamp(20px, 1.65vw, 24px)/1.42 'P2 Sans', 'Profile Sans', Arial, sans-serif; letter-spacing: -.012em; color: var(--text); max-width: 30ch; text-wrap: pretty; }
.bb-body { font: 400 17px/1.75 'P2 Sans', 'Profile Sans', Arial, sans-serif; color: #aebbcb; max-width: 60ch; text-wrap: pretty; }
.bb-cta .contact-button { margin-top: 0; }

.bb-learned { --fig-h: 50; --title-top: 33; --pos: 50% 38%; }
.bb-here    { --fig-h: 58; --title-top: 43; --pos: 50% 12%; }
.bb-for     { --fig-h: 48; --title-top: 31; --pos: 50% 55%; }
.bb-closing { --fig-h: 56; --title-top: 22; --pos: 50% 70%; }
.bb-here .bb-title, .bb-here .bb-text { text-align: left; }

@media (max-width: 700px) {
  .bb { --u: 1vw; }
  .bb-title { font-size: 16.6vw; white-space: normal; text-wrap: wrap; }
  .bb-text { grid-template-columns: 1fr; gap: 18px; margin-top: 9vw; padding: 26px 0 84px; }
  .bb-lead { font-size: 20px; max-width: none; }
  .bb-body { font-size: 17px; line-height: 1.72; max-width: none; }
  .bb-learned { --fig-h: 125; --title-top: 86; --pos: 50% 50%; }
  .bb-here    { --fig-h: 84;  --title-top: 62; --pos: 55% 20%; }
  .bb-for     { --fig-h: 100; --title-top: 66; --pos: 50% 50%; }
  .bb-closing { --fig-h: 118; --title-top: 34; --pos: 50% 60%; }
  .bb-closing .bb-title { font-size: 15.4vw; }
}

/* "Why I'm here.": one real frame of him mid-conversation, lighter and more natural than the other panels.
   Desktop: the photo holds the right side and dissolves into navy on the left. Phone: full width. */
.bb-here .bb-fig img { filter: brightness(.93) contrast(1.03) saturate(.95); }
.bb-here .bb-fig::after { background:
  linear-gradient(180deg, var(--bg) 0%, rgba(8,17,28,.3) 12%, rgba(8,17,28,0) 30%, rgba(8,17,28,.08) 55%, rgba(8,17,28,.78) 84%, var(--bg) 100%),
  linear-gradient(0deg, rgba(24,62,112,.14), rgba(24,62,112,.14)); }
@media (min-width: 701px) {
  .bb-here { --fig-h: 62; --title-top: 44; --pos: 50% 14%; }
  .bb-here .bb-fig { left: auto; right: 0; width: 60%; }
  .bb-here .bb-fig::after { background:
    linear-gradient(90deg, var(--bg) 0%, rgba(8,17,28,.75) 14%, rgba(8,17,28,0) 42%),
    linear-gradient(180deg, var(--bg) 0%, rgba(8,17,28,.3) 12%, rgba(8,17,28,0) 30%, rgba(8,17,28,.08) 58%, rgba(8,17,28,.8) 86%, var(--bg) 100%),
    linear-gradient(0deg, rgba(24,62,112,.14), rgba(24,62,112,.14)); }
}
@media (max-width: 700px) {
  .bb-here { --fig-h: 128; --title-top: 96; --pos: 50% 26%; }
}