/* Focused Live Wire art refinement. The layout, source photos and brand art stay intact.
   Every paint/forest file has real RGBA transparency. No screenshot is used as a page. */
:root {
  --header-rest: 96px;
  --header-compact: 76px;
  --header-visible: var(--header-rest);
  --contour-art: url('/livewire/assets/paint/topographic-contours.svg');
}
/* Preserve the document's header slot; only its painted surface and contents compact. */
.site-header {
  height: var(--header-rest);
  background: transparent;
  box-shadow: none;
  isolation: isolate;
  pointer-events: none;
}
.site-header.is-compact { --header-visible: var(--header-compact); }
.site-header::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: var(--header-visible);
  background: var(--ink);
  z-index: -1;
  transition: height 180ms ease;
}
.site-header::after {
  top: calc(var(--header-visible) - 13px);
  height: 50px;
  background: var(--ink);
  clip-path: none;
  -webkit-mask: url('/livewire/assets/paint/dark-brush-edge-header.webp') center / 100% 100% no-repeat;
  mask: url('/livewire/assets/paint/dark-brush-edge-header.webp') center / 100% 100% no-repeat;
  mask-mode: alpha;
  transform: rotate(180deg);
  z-index: -1;
  transition: top 180ms ease;
}
.header-inner {
  height: var(--header-visible);
  pointer-events: auto;
  transition: height 180ms ease;
}
.brand img { transform-origin: top left; transition: transform 180ms ease; }
.site-header.is-compact .brand img { transform: scale(.84); }
.site-header .main-nav { pointer-events: auto; }
/* The original live headline stays exactly where it was; the physical paint sits behind it. */
.brush-highlight::before {
  inset: -21% -7.5% -20%;
  background: url('/livewire/assets/paint/headline-red-brush.webp') center / 100% 100% no-repeat;
  clip-path: none;
  transform: rotate(-2deg);
}
.brush-highlight::after { content: none; }
.hero::before {
  background-image: var(--contour-art);
  background-size: 1450px auto;
  background-position: 15% 30%;
  opacity: .72;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(50% + 88px);
  background: var(--paper) var(--contour-art) 15% 30% / 1450px auto;
  -webkit-mask: url('/livewire/assets/paint/hero-paper-brush-mask.webp') right center / 100% 100% no-repeat;
  mask: url('/livewire/assets/paint/hero-paper-brush-mask.webp') right center / 100% 100% no-repeat;
  mask-mode: alpha;
  pointer-events: none;
  z-index: 1;
}
.hero-layout { z-index: 2; }
.hero-copy::before { content: none; }
.hero-photo { clip-path: none; -webkit-mask: none; mask: none; }
.hero-treeline {
  position: absolute;
  inset: auto 0 -1px;
  height: 155px;
  background: url('/livewire/assets/paint/forest-foreground.webp') right bottom / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 1;
}
/* Keep the original HTML service-area sign above both paint and foreground branches. */
.hero-photo .wood-sign, .hero-photo .photo-note { z-index: 2; }
/* Nonidentical, full-width paint plates. Only the margins are distressed. */
.trust-band::before, .trust-band::after, .power-cta::before, .power-cta::after {
  height: 45px;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-mode: alpha;
  background: var(--ink);
  pointer-events: none;
}
.trust-band { background-image: url('/livewire/assets/grain.svg'); }
.trust-band::before {
  top: -34px;
  -webkit-mask-image: url('/livewire/assets/paint/dark-brush-edge-trust-top.webp');
  mask-image: url('/livewire/assets/paint/dark-brush-edge-trust-top.webp');
}
.trust-band::after {
  bottom: -33px;
  -webkit-mask-image: url('/livewire/assets/paint/dark-brush-edge-trust-bottom.webp');
  mask-image: url('/livewire/assets/paint/dark-brush-edge-trust-bottom.webp');
}
.contour-section {
  background-image: var(--contour-art);
  background-size: 1500px auto;
  background-position: center 25%;
}
.services, .membership {
  background-image: var(--contour-art);
  background-size: 1700px auto;
  background-position: 20% 65%;
}
.services .section-heading, .membership-card { position: relative; }
/* Mask the photograph itself, rather than painting a paper frame on top. */
.about { padding-bottom: 85px; }
.about::after { content: none; }
.about-photo { overflow: visible; border-radius: 0; }
.about-photo > img {
  clip-path: none;
  -webkit-mask: url('/livewire/assets/paint/neighbor-photo-brush-mask.webp') center / 100% 100% no-repeat;
  mask: url('/livewire/assets/paint/neighbor-photo-brush-mask.webp') center / 100% 100% no-repeat;
  mask-mode: alpha;
}
.about-photo::after {
  inset: 0;
  clip-path: none;
  background: linear-gradient(0deg, #101c20b3, transparent 43%);
  -webkit-mask: url('/livewire/assets/paint/neighbor-photo-brush-mask.webp') center / 100% 100% no-repeat;
  mask: url('/livewire/assets/paint/neighbor-photo-brush-mask.webp') center / 100% 100% no-repeat;
  mask-mode: alpha;
}
/* The scenery has its own stacking context, below original Sparky and all live copy. */
.power-cta {
  isolation: isolate;
  overflow: visible;
  background-image: url('/livewire/assets/grain.svg');
  background-size: 160px;
}
.power-cta::before {
  top: -34px;
  -webkit-mask-image: url('/livewire/assets/paint/dark-brush-edge-cta.webp');
  mask-image: url('/livewire/assets/paint/dark-brush-edge-cta.webp');
  z-index: 0;
}
.power-cta::after {
  bottom: -33px;
  -webkit-mask-image: url('/livewire/assets/paint/dark-brush-edge-header.webp');
  mask-image: url('/livewire/assets/paint/dark-brush-edge-header.webp');
  z-index: 0;
}
.power-landscape, .power-landscape > span {
  position: absolute;
  pointer-events: none;
  user-select: none;
}
.power-landscape { inset: 0; z-index: 0; }
.cta-mountain-ridge {
  right: 0; bottom: 0;
  width: min(930px, 77%); height: 100%;
  background: url('/livewire/assets/paint/cta-mountain-ridge.webp') right bottom / auto 100% no-repeat;
  opacity: .42;
}
.cta-distant-forest {
  inset: auto 0 0;
  height: 67%;
  background: url('/livewire/assets/paint/forest-distant.webp') right bottom / auto 100% no-repeat;
  opacity: .35;
}
.cta-foreground-forest {
  inset: auto 0 -1px;
  height: calc(100% + 118px);
  background: url('/livewire/assets/paint/forest-foreground.webp') right bottom / 100% 100% no-repeat;
}
.power-grid { position: relative; z-index: 1; }
.power-actions { position: relative; z-index: 2; }
/* The approved original Sparky bitmap and existing location-card composition are untouched. */
.cta-mascot { z-index: 2; }
.footer-scenery {
  background-image: url('/livewire/assets/paint/forest-foreground.webp');
  background-size: cover;
  background-repeat: no-repeat;
  opacity: .38;
}
@media (min-width: 1550px) {
  .hero::after { width: calc(50% + 108px); }
  .cta-foreground-forest { height: calc(100% + 143px); }
}
@media (max-width: 1280px) { :root { --header-rest: 89px; --header-compact: 73px; } }
@media (max-width: 1100px) {
  .hero::after { width: calc(48% + 80px); }
  .cta-foreground-forest { height: calc(100% + 94px); }
}
@media (max-width: 900px) {
  :root { --header-rest: 79px; --header-compact: 65px; }
  .js .main-nav[data-open='true'] { top: var(--header-visible); }
  .hero::after { width: calc(49% + 65px); }
  .about { padding-bottom: 86px; }
  .cta-foreground-forest { height: calc(100% + 88px); }
  .cta-mountain-ridge { width: 83%; opacity: .37; }
}
@media (max-width: 640px) {
  :root { --header-rest: 73px; --header-compact: 61px; }
  .site-header.is-compact .brand img { transform: scale(.85); }
  .site-header::after { height: 37px; top: calc(var(--header-visible) - 9px); }
  .js .main-nav[data-open='true'] { top: var(--header-visible); }
  .brush-highlight::before {
    inset: -25% -7% -24%;
    background-image: url('/livewire/assets/paint/headline-red-brush-mobile.webp');
  }
  .hero::after { content: none; }
  .hero-layout::after {
    content: '';
    position: absolute;
    left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); bottom: -29px;
    height: 44px;
    background: var(--paper);
    -webkit-mask: url('/livewire/assets/paint/hero-paper-brush-mask-mobile.webp') center / 100% 100% no-repeat;
    mask: url('/livewire/assets/paint/hero-paper-brush-mask-mobile.webp') center / 100% 100% no-repeat;
    mask-mode: alpha;
    pointer-events: none;
  }
  .hero-photo { clip-path: none; -webkit-mask: none; mask: none; }
  .hero-treeline { height: 95px; }
  .hero::before, .contour-section { background-size: 980px auto; }
  .services, .membership { background-size: 1100px auto; }
  .trust-band::before, .trust-band::after, .power-cta::before, .power-cta::after {
    height: 36px;
    /* Crop at near-native detail; do not shrink 2400px of brush marks into 320px. */
    -webkit-mask-size: 800px 48px;
    mask-size: 800px 48px;
    -webkit-mask-position: 62% center;
    mask-position: 62% center;
  }
  .trust-band::before, .power-cta::before { top: -25px; }
  .trust-band::after, .power-cta::after { bottom: -25px; }
  .about { padding-bottom: 80px; }
  .cta-foreground-forest {
    height: calc(100% + 120px);
    background-size: 154% 100%;
    background-position: right bottom;
    opacity: .97;
  }
  .cta-mountain-ridge {
    width: 100%; height: 78%;
    background-size: auto 100%; background-position: 62% bottom;
    opacity: .28;
  }
  .cta-distant-forest { height: 40%; opacity: .3; }
  .power-actions { isolation: isolate; }
  .power-actions::before {
    content: ''; position: absolute; inset: -6px -12px -12px;
    border-radius: 25px; background: #101c20a8; z-index: -1; pointer-events: none;
  }
  .footer-scenery { background-size: auto 100%; background-position: right bottom; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header::before, .site-header::after, .header-inner, .brand img { transition: none; }
}
@media print {
  .power-landscape, .hero-treeline { display: none !important; }
  .hero::after, .hero-layout::after { content: none; }
  .about { padding-bottom: 22px; }
  .about-photo > img { -webkit-mask: none; mask: none; }
}
/* Keep the no-JavaScript navigation accessible without a fixed-height clipping slot. */
html:not(.js) .site-header { height: auto; min-height: var(--header-rest); background: var(--ink); }
html:not(.js) .site-header::before { height: 100%; }
html:not(.js) .site-header::after { top: calc(100% - 14px); }
/* Keep the distant plate edge out of the wide-desktop reading area. Atmospheric
   fades apply only to scenery inside the charcoal CTA, never to painted edges. */
.cta-distant-forest {
  inset: 0;
  height: auto;
  background-size: cover;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%);
  mask-image: linear-gradient(to bottom, transparent, #000 40%);
  opacity: .24;
}
.cta-mountain-ridge {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%);
  mask-image: linear-gradient(to right, transparent, #000 18%);
}