:root{
  --brand:#2c9867; --ease-out:cubic-bezier(.22,1,.36,1);
}

/* Core hero layout */
.hero-stage{position:relative; height:100svh; isolation:isolate; background:#fff;}
.hero-photo{position:absolute; inset:0; overflow:hidden; background:#000;}
.hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.035);
  transition:opacity .8s var(--ease-out), transform 1.2s var(--ease-out);
}
/* Pattern overlay: start with 40px white frame + pattern on top of image */
.hero-pattern{position:absolute; inset:40px; pointer-events:none;
  background-color:transparent;
  background-image:var(--pattern-url);
  background-repeat:repeat;
  background-size: 260px auto; /* tweak scale as needed */
  opacity:1;
  transition: opacity .8s var(--ease-out), inset .8s var(--ease-out);
  /* Optional subtle shadow on the frame while it’s inset */
  box-shadow: 0 20px 50px rgba(0,0,0,.15);
  border-radius: 16px;
}

/* Sequence:
   0) initial: blank (image hidden), pattern overlay visible
   1) image fades in behind pattern
   2) pattern fades out + inset collapses to 0 (full-bleed)
*/
.hero-seq-1 .hero-img{opacity:1; transform:scale(1);}
.hero-seq-2 .hero-pattern{opacity:0; inset:0; box-shadow:none; border-radius:0;}

#hero { 
  position: relative; 
  min-height: 100svh; 
  overflow: clip; /* contain painting + scrolling */
}