/* ===========================================================================
   Shared inner-page header (.sts-page-header)
   Used by every page that opens with the full-bleed states-side-header-section
   hero: About, Services, and each inner service page. Kept out of the
   per-page stylesheets so the rules live in one place.
   =========================================================================== */

/* --------------------------------------------------------------- 1. HERO -- */
/* Full-bleed header using the theme's states-side-header-section pattern: the photo
   fills the block, a scrim sits over it, and the content is bottom aligned.
   .container is already a flex column and the customizer CSS centres
   .single-post-header .container, so only the scrim and type need setting. */

/* theme sets this per-breakpoint (26/43/96px); scoping to the hero raises
   specificity so this wins at every width */
.sts-page-header.single-post-header .states-side-header-section__content {
    padding-bottom: 55px;
}

/* theme sets .single-post-header .container{gap:24px} - tighten the stack */
.sts-page-header.single-post-header .container { gap: 12px; }

.sts-page-header .overlay {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
}

/* 5.4vw put this at 74-83px on a 1366-1536 laptop, which read far too large.
   4.2vw lands it around 57-65px there while still growing on big displays. */
.sts-page-header .entry-title {
    font-size: clamp(36px, 4.2vw, 84px);
    line-height: 1.02;
    letter-spacing: -.01em;
    max-width: 22ch;
}

.sts-page-header .sts-hero-brand__logo img {
    width: 72px;
    height: auto;
}

.sts-page-header__intro {
    max-width: 760px;
    margin: 0;
    color: #FFFFFFB3;
    font-size: 18px;
    line-height: 1.6;
}

/* Breadcrumbs are pinned to the hero's top-left rather than sitting under the
   intro. #masthead is position:relative, so it occupies flow above the hero and
   the hero's top edge is already clear of the nav - this only needs breathing
   room, not a nav-height offset. The inner .container keeps the left edge
   flush with the H1 at every breakpoint. */
/* GSAP SplitText wraps every word in an inline-block. Inline-blocks sit on the
   text baseline, so the line box reserves descender space beneath them and the
   split heading measures taller than the same text unsplit - especially at
   line-height 1.02, which is tighter than the box an inline-block produces.
   The animation reverts the split when it finishes, that extra height
   disappears, and because the hero content is bottom-aligned the whole block
   drops by the difference: the logo, breadcrumbs and heading all shift down a
   few pixels the moment the animation ends.
   Aligning the word boxes to the top removes the descender gap, so the split
   and unsplit heading measure the same and nothing moves on revert. */
.sts-page-header .entry-title > div,
.sts-page-header .entry-title > span {
    vertical-align: top;
}

/* Breadcrumbs sit above the H1 in normal flow rather than being pinned over
   the hero, and centre with the heading and intro. The head styles already
   centre .single-post-header .container, so nothing needs overriding here -
   the list just needs its own items centred too. */
.sts-page-header .breadcrumbs {
    margin: 0 0 4px;
    color: #FFFFFF99;
    font-size: 16px;
    letter-spacing: .01em;
    text-align: center;
    pointer-events: auto;
}

.sts-page-header .breadcrumbs ol { gap: 12px; justify-content: center; }
.sts-page-header .breadcrumbs a { color: #ffffff; }
.sts-page-header .breadcrumbs .states-side-svg-icon svg { width: 16px; height: 16px; }

/* Optional hero call-to-action. Location pages open with one; the service
   pages don't, so this only applies where the element is actually present. */
.sts-page-header__cta {
    margin-top: 10px;
}

/* ------------------------------------------------------------- mobile ---- */
@media (max-width: 767px) {
    .sts-page-header { --custom-height: 0px; }
    .sts-page-header .entry-title { max-width: 100%; }
    .sts-page-header .breadcrumbs { font-size: 15px; }
    .sts-page-header .breadcrumbs ol { gap: 10px; }
}