/* Shared photographic opening: homepage brand duotones, deep shadows, and
   one restrained mesh. Layout and foreground compositions remain page-owned.
   New consumers use .lp-photo-header and --masthead-image. */
.services-hero.lp-header-variant { --masthead-image: url('/assets/localpixel/headers/services.webp'); }
.about-hero.lp-header-variant { --masthead-image: url('/assets/localpixel/headers/about.webp'); }
.blog-index-page .lp-editorial-header { --masthead-image: url('/assets/blog/duotone/what-to-automate-first-1280.webp'); --masthead-position: center top; }
.tool-page .lp-tools-header { --masthead-image: url('/assets/localpixel/headers/tools.webp'); --masthead-position: 70% center; }
.studio-page .intro.lp-header-variant { --masthead-image: url('/assets/localpixel/headers/studio-fal-office-v2.webp'); --masthead-tone: var(--color-ink); --masthead-position: 65% center; }
.web-hero.web-hero-immersive .web-hero-backdrop { mix-blend-mode: luminosity; }
/* Only established homepage tokens: charcoal and muted blue-grey.
   Variation comes from photography and these two related tones, not new hues. */
.services-hero.lp-header-variant,
.blog-index-page .lp-editorial-header,
.web-hero.web-hero-immersive,
.cap-apps .lp-service-masthead { --masthead-tone: var(--color-ink); }
.about-hero.lp-header-variant,
.tool-page .lp-tools-header,
.cap-consulting .lp-service-masthead,
.lp-automation-reset .lp-service-masthead { --masthead-tone: var(--color-surface-dusk); }

:is(.lp-photo-header, .web-hero.web-hero-immersive, .about-hero.lp-header-variant, .services-hero.lp-header-variant, .blog-index-page .lp-editorial-header, .tool-page .lp-tools-header, .studio-page .intro.lp-header-variant) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--masthead-tone, var(--color-ink, #17161b));
  background-image: var(--masthead-image, none);
  background-size: var(--masthead-size, cover);
  background-position: var(--masthead-position, center);
  background-blend-mode: luminosity;
  color: var(--color-bone, #f2f1f4);
}
:is(.lp-photo-header, .web-hero.web-hero-immersive, .about-hero.lp-header-variant, .services-hero.lp-header-variant, .blog-index-page .lp-editorial-header, .tool-page .lp-tools-header, .studio-page .intro.lp-header-variant)::before {
  content: '';
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 1;
  background: linear-gradient(90deg,rgba(15,17,16,.84) 0%,rgba(15,17,16,.72) 50%,rgba(15,17,16,.60) 100%);
}
:is(.lp-photo-header, .web-hero.web-hero-immersive, .about-hero.lp-header-variant, .services-hero.lp-header-variant, .blog-index-page .lp-editorial-header, .tool-page .lp-tools-header, .studio-page .intro.lp-header-variant)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .29;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='55' viewBox='0 0 55 55'%3E%3Cpath d='M0 55V0H55' fill='none' stroke='%23d6ecce' stroke-opacity='.15' stroke-width='.6'/%3E%3Ccircle cx='0' cy='0' r='1.1' fill='%23e0eade' fill-opacity='.24'/%3E%3C/svg%3E") repeat;
}
:is(.lp-photo-header, .web-hero.web-hero-immersive, .about-hero.lp-header-variant, .services-hero.lp-header-variant, .blog-index-page .lp-editorial-header, .tool-page .lp-tools-header, .studio-page .intro.lp-header-variant).has-hero-grid::after { content: none; }
:is(.lp-photo-header, .web-hero.web-hero-immersive, .about-hero.lp-header-variant, .services-hero.lp-header-variant, .blog-index-page .lp-editorial-header, .tool-page .lp-tools-header, .studio-page .intro.lp-header-variant) > :is(.lp-hero-grid, .web-constellation) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: .29;
}
/* Retire legacy second washes and duplicate decorative meshes. */
.web-hero.web-hero-immersive .web-hero-wash,
.services-hero.lp-header-variant .header-connections { display: none; }
.studio-page .intro.lp-header-variant .studio-hero-art { z-index: 0; }
.studio-page .intro.lp-header-variant :is(h1, .edition, .intro-bottom p, .intro-bottom > span, .studio-art-label) { color: var(--color-bone); }
.studio-page .intro.lp-header-variant .studio-hero-art::before { background: transparent; }
@media (min-width: 1025px) {
  .studio-page .site-header:not(.has-scrolled):not(.menu-open) .brand-mark { filter: brightness(0) invert(1); }
}
@media (min-width: 1025px) {
  .blog-index-page .lp-editorial-header {
    --masthead-size: 112% auto;
    --masthead-position: 80% top;
  }
}
@media (max-width: 640px) {
  .about-hero.lp-header-variant { --masthead-position: 62% center; }
  .blog-index-page .lp-editorial-header { --masthead-position: 62% top; }
  .tool-page .lp-tools-header { --masthead-position: 60% center; }
}