/* Prose Section — About hero / origin / navy "what we do" panel */
.upside-prose { padding: var(--section-pad) 0; }
.upside-prose.surf-care  { background: var(--surface-care); }
.upside-prose.surf-white { background: #fff; }
.upside-prose.surf-navy  { background: transparent; }

/* Full width — fill the content container (the navy inset already does). */
.upside-prose-panel { max-width: none; }
.upside-prose.style-hero .upside-prose-panel { max-width: none; }

.upside-prose h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.08; margin: 10px 0 0; }
.upside-prose h2 { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.15; margin: 8px 0 0; }
.upside-prose-body { margin-top: 22px; font-size: 18px; color: var(--secdark); }
.upside-prose-body p { margin: 0 0 16px; }
.upside-prose-body p:last-child { margin-bottom: 0; }
.upside-prose.style-hero .upside-prose-body { font-size: 20px; }

/* Navy inset panel (§3 "what we do") */
.upside-prose.style-inset .upside-prose-panel {
  max-width: var(--maxw);
  background: linear-gradient(135deg, var(--dark) 0%, #0b3a68 100%);
  border-radius: var(--r-lg);
  padding: clamp(36px, 5vw, 64px);
  color: #fff;
}
/* White text on the dark surfaces. The inset panel ALWAYS sits on a dark
   gradient, so key the light text on .style-inset too — independent of the
   `surface` select (which may not persist on the block instance). */
.upside-prose.on-navy h1,
.upside-prose.on-navy h2,
.upside-prose.style-inset h1,
.upside-prose.style-inset h2 { color: #fff; }
/* Target the <p> directly — `.upside-section p` (upside.css) sets them dark and
   beats the inherited container color, so the panel body read dark-on-navy. */
.upside-prose.on-navy .upside-prose-body,
.upside-prose.style-inset .upside-prose-body,
.upside-prose.on-navy .upside-prose-body p,
.upside-prose.style-inset .upside-prose-body p { color: rgba(255, 255, 255, .9); }
.upside-prose.on-navy .upside-eyebrow,
.upside-prose.style-inset .upside-eyebrow { color: var(--sky); }
/* Two-tone accent reads light-blue on navy */
.upside-prose.on-navy h1 .accent,
.upside-prose.on-navy h2 .accent,
.upside-prose.style-inset h1 .accent,
.upside-prose.style-inset h2 .accent { color: #7FB7F0; }

/* Consecutive prose sections (the About intro: hero → origin → "what we do")
   flow as one unit. Without this each reserves a full section's padding top AND
   bottom, leaving ~192px of dead space between text blocks. */
.upside-prose + .upside-prose { padding-top: 0; }
.upside-prose:has(+ .upside-prose) { padding-bottom: 44px; }

@media (max-width: 767px) {
  .upside-prose { padding: 56px 0; }
  .upside-prose + .upside-prose { padding-top: 0; }
  .upside-prose:has(+ .upside-prose) { padding-bottom: 28px; }
  .upside-prose-body { font-size: 16px; }
}