/* [rpb_page_hero] - the simpler hero shared by all 7 subpages (eyebrow/H1/lead only,
   no proof strip/CTAs, gradient+photo combined on one background-image layer instead of
   two stacked divs like [rpb_hero]/Home). Values copied exactly from the approved
   reference's own CSS bundle: a genuinely SEPARATE ".page-hero" class from Home's own
   ".hero" (920px) - NOT a shared base class as first assumed, caught via live computed-
   style check (About rendered 610px on the reference, not 920px) after the user flagged
   subpages looking too tall. */
/* No background-color here anymore: the real photo now comes from the wrapping
   [vc_row type="full_width_background" bg_image="..."] itself (a sibling behind this
   section in the row's own DOM, not something this section renders) - an opaque
   background here would paint over it. overflow:hidden also moved to
   .rpb-page-hero-image (only needed to clip that div's own oversized parallax layer) so
   .rpb-page-hero-overlay's full-bleed breakout (below) can actually escape to the real
   viewport edges instead of being clipped by its own ancestor. */
.rpb-page-hero{min-height:610px;color:var(--rpb-white);position:relative}
/* Legacy-only (see the bg_image note on rpb_page_hero_shortcode) - only rendered when a
   page hasn't been migrated to the native [vc_row type="full_width_background"
   bg_image="..." parallax_bg="true"] pattern yet. Kept for backward compat during the
   page-by-page migration; delete once every page uses the native row background. */
.rpb-page-hero-image{position:absolute;inset:0;overflow:hidden}
.rpb-page-hero-image .parallax-layer{background-position:50% 45%;background-size:cover;position:absolute;inset:-25% 0;will-change:transform}
/* This div sits inside the row's own width-constrained content column (no more .shell),
   but still needs to visually bleed to match the row's own full-bleed background behind
   it - a standard CSS "breakout" (not a Salient-specific mechanism) makes that possible
   regardless of how narrow its actual DOM parent is. Native row overlay params only
   support a single gradient direction; this design uses two stacked gradients (horizontal
   fade + vertical fade), so it stays hand-rolled here rather than trying to force it
   through the row's own overlay params. */
.rpb-page-hero-overlay{background-size:cover;position:absolute;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw}
.rpb-page-hero-content{z-index:2;padding-top:230px;position:relative;animation:rpb-hero-fade-in .9s cubic-bezier(.16,1,.3,1) both}
/* Single post/portfolio heroes (rpb_single_page_hero()) render before the page's own
   .container.main-content wrapper even starts (single.php places the hero above it, for a
   genuinely full-bleed background) - so unlike every other page, there's no ambient
   container context for the row's native content-width mechanism to inherit here, and the
   text was rendering full-viewport-width edge to edge. Capped explicitly, scoped to this
   one page_class only - not a reintroduction of the site-wide .shell class that was
   deleted (see [[feedback-rpb-shell-row-type-mismatch]]), just the one remaining context
   that genuinely lacks ambient container width to inherit from. */
.rpb-single-page-hero .rpb-page-hero-content{width:min(1245px,100% - 195px);margin-inline:auto}
/* Same @keyframes name/definition as hero.css - duplicated (not shared) because this
   file is enqueued independently and can't assume hero.css also loaded on a given page. */
@keyframes rpb-hero-fade-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.rpb-page-hero-content{animation:none}}
/* H1 size unified across every subpage (explicit user instruction: subpage H1s - not
   Home's own [rpb_hero] - should all match, using the size Commercial needed for its
   longer heading text, rather than each page clamping independently). */
/* Salient's own "body h1{color:var(--nectar-page-text-color)}" beats plain inheritance
   from .rpb-page-hero's own color - see [[feedback-rpb-heading-color-inheritance]]. */
.rpb-page-hero h1{color:var(--rpb-white) !important;letter-spacing:-.065em;max-width:980px;margin:0;font-size:clamp(58px,7.4vw,108px);font-weight:400;line-height:.92}
.rpb-page-hero-lead{color:#ffffffc7 !important;max-width:650px;margin-top:34px;font-size:21px;line-height:1.55}

/* Commercial's heading is a longer phrase kept on one line at this shared size. */
.rpb-commercial-page-hero h1{white-space:nowrap}
/* What We Do's lead is a longer single-line phrase kept unwrapped on desktop. */
.rpb-what-we-do-hero .rpb-page-hero-lead{white-space:nowrap;max-width:900px}
/* Responsive rules for this shortcode live in css/responsive.css, not here. */