/* Shared hero surfaces and spacing. Component typography stays in page-heroes.css. */
body :is(.pv-hero, .pv-company-hero, .pv-case-hero, .pv-case-video, .pvi-hero, .pvo-hero, .pvw-hero) {
  background-color: var(--pv-dark);
}

body .pv-hero::before {
  background:
    radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--pv-accent) 34%, transparent) 0%, color-mix(in srgb, var(--pv-accent) 13%, transparent) 38%, transparent 72%),
    linear-gradient(90deg, color-mix(in srgb, var(--pv-dark) 96%, transparent) 0%, color-mix(in srgb, var(--pv-dark) 78%, transparent) 34%, color-mix(in srgb, var(--pv-dark) 38%, transparent) 64%, color-mix(in srgb, var(--pv-dark) 4%, transparent) 100%);
}

body .pv-main :is(.pv-company-hero, .pv-case-hero, .pv-case-video, .pvi-hero, .pvo-hero, .pvw-hero) {
  background-image: radial-gradient(ellipse 82% 92% at 100% 0%, color-mix(in srgb, var(--pv-accent) 34%, transparent) 0%, color-mix(in srgb, var(--pv-accent) 14%, transparent) 40%, transparent 78%);
  background-repeat: no-repeat;
}

body :is(.pv-hero, .pv-company-hero, .pv-case-hero, .pv-case-video, .pvi-hero, .pvo-hero, .pvw-hero) > .pv-shell {
  padding-block-start: 70px;
}

body .pv-case.pv-case-editorial > .pv-case-hero > .pv-shell {
  padding-block-start: 100px;
}

body .pvi-filters a[aria-current] {
  background-color: var(--pv-dark);
  border-color: var(--pv-dark);
}

/* One sticky header: full width, centered contents, only the wordmark scales. */
body .wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  inset: auto 0 auto;
  top: 0;
  z-index: 1000;
  width: 100%;
  min-width: 100%;
  max-width: none;
  margin-inline: 0;
  justify-self: stretch;
  box-sizing: border-box;
  background: transparent;
}

body.admin-bar .wp-site-blocks > header.wp-block-template-part {
  top: 32px;
}

body:has(.pv-hero, .pv-company-hero, .pv-case-hero, .pv-case-video, .pvi-hero, .pvo-hero, .pvw-hero) .wp-site-blocks > header.wp-block-template-part {
  margin-bottom: -88px;
}

body .wp-site-blocks > header.wp-block-template-part > .pv-header {
  display: block;
  width: 100%;
  max-width: none;
  height: 88px;
  padding-block: 0;
  box-sizing: border-box;
  background: transparent;
}

body .wp-site-blocks > header.wp-block-template-part .pv-header-inner {
  height: 100%;
  min-height: 0;
  align-items: center;
  box-sizing: border-box;
}

@keyframes pv-header-scroll-state {
  from { background-color: transparent; backdrop-filter: blur(0); }
  to { background-color: color-mix(in srgb, var(--pv-dark) 88%, transparent); backdrop-filter: blur(12px); }
}

@keyframes pv-header-scroll-size {
  from { height: 88px; }
  to { height: 72px; }
}

@keyframes pv-header-scroll-logo {
  from { transform: scale(1); }
  to { transform: scale(.84); }
}

@supports (animation-timeline: scroll()) {
  body .wp-site-blocks > header.wp-block-template-part {
    animation: pv-header-scroll-state linear both;
    animation-timeline: scroll(root block);
    animation-range: 0px 100px;
  }

  body .wp-site-blocks > header.wp-block-template-part > .pv-header {
    animation: pv-header-scroll-size linear both;
    animation-timeline: scroll(root block);
    animation-range: 0px 100px;
  }

  body .wp-site-blocks > header.wp-block-template-part .pv-logotype {
    transform-origin: left center;
    animation: pv-header-scroll-logo linear both;
    animation-timeline: scroll(root block);
    animation-range: 0px 100px;
  }
}

/* The open mobile menu must escape the backdrop-filter's containing block. */
body .wp-site-blocks > header.wp-block-template-part:has(.is-menu-open) {
  animation: none;
  background: var(--pv-dark);
  backdrop-filter: none;
}

body .wp-site-blocks > header.wp-block-template-part:has(.is-menu-open) .pv-header {
  animation: none;
  height: 88px;
}

body .wp-site-blocks > header.wp-block-template-part:has(.is-menu-open) .pv-logotype {
  animation: none;
}

body .pv-header .wp-block-navigation__responsive-container.is-menu-open {
  position: fixed;
  inset: 0;
  z-index: 10001;
  width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  overflow-y: auto;
  background: var(--pv-dark);
}

body .pv-header .is-menu-open .wp-block-navigation__responsive-dialog {
  width: 100%;
  min-height: 100dvh;
  margin: 0;
}

body .pv-header .is-menu-open .wp-block-navigation__responsive-close {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--pv-dark);
}

@media (max-width: 782px) {
  body.admin-bar .wp-site-blocks > header.wp-block-template-part {
    top: 46px;
  }
}

/* Small case-study labels need normal-text contrast on the light section surface. */
body .pv-case-light .pv-case-number {
  color: var(--pv-accent-link);
}

/* Mobile homepage: dim only the decorative image, leaving text and controls opaque. */
@media (max-width: 760px) {
  body.home .pv-hero-media img {
    opacity: .8;
  }
  .pv-case-label h2 {
    hyphens: auto;
    overflow-wrap: break-word;
  }
}