/* Larger scroll scenes. Native sticky layout provides the pinning; JS only maps progress to visual properties. */
.photo-story-label, .photo-story-progress { display: none; }
.service-stack { display: flow-root; }
[data-scroll-stack] { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .is-flow-scene > .stack-panel { transform-origin: center top; scale: calc(.94 + var(--card-approach,1) * .06); translate: 0 calc((1 - var(--card-approach,1)) * 18px); }
  .is-flow-scene > .stack-panel:focus-within { scale: 1; translate: none; }
  .is-recruit-scene .recruit-band-word { left: 5%; width: max-content; white-space: nowrap; font-size: clamp(76px,13vw,188px); translate: calc(var(--recruit-progress,0) * -280px) 0; }
  .is-recruit-scene .recruit-band-word::after { content: ' · RECRUIT · RECRUIT'; }
  .is-recruit-scene .recruit-band-grid > div:first-child > img { translate: 0 calc((var(--recruit-progress,0) - .5) * -72px); }
  .is-recruit-scene .recruit-secondary > img { translate: 0 calc((var(--recruit-progress,0) - .5) * 112px); }
  .hero-scene.is-hero-scene { position: relative; height: calc(var(--hero-height) + 60svh); background: var(--cream); }
  .is-hero-scene .home-hero { position: sticky; top: var(--hero-pin,24px); transform-origin: center top; scale: calc(1 - var(--hero-progress,0) * .12); border-radius: calc(var(--hero-progress,0) * 64px); box-shadow: 0 calc(var(--hero-progress,0) * 28px) calc(var(--hero-progress,0) * 70px) #103b3c26; }

  .photo-story.is-photo-story { height: 190svh; position: relative; background: #f5f8f3; }
  .is-photo-story .photo-stage { position: sticky; top: 0; height: 100svh; overflow: clip; isolation: isolate; }
  .is-photo-story .photo-story-label { position: absolute; display: flex; flex-direction: column; gap: 6px; top: max(9svh,72px); width: 100%; text-align: center; font-weight: 700; font-size: 15px; z-index: 5; pointer-events: none; }
  .photo-story-label > span { font: 700 clamp(40px,7vw,100px)/1.1 var(--font-display); letter-spacing: -.045em; }
  .is-photo-story .photo-strip { position: absolute; inset: 0; display: block; overflow: visible; }
  .is-photo-story .photo-strip img { position: absolute; top: 55%; left: 50%; width: var(--spread-width,30%); height: auto; aspect-ratio: 1.25; max-width: none; border-radius: 8px; border: 6px solid white; box-shadow: 0 16px 48px #103b3c26; transform: translate(-50%,-50%) translate(var(--spread-x,0px),var(--spread-y,0px)) rotate(var(--spread-angle,0deg)); }
  .is-photo-story .photo-story-progress { position: absolute; display: block; width: 100px; height: 2px; background: #103b3c24; bottom: 9svh; left: calc(50% - 50px); }
  .photo-story-progress > span { display: block; height: 100%; background: var(--green); transform-origin: left; scale: var(--spread-progress,0) 1; }

  [data-scroll-stack].is-scroll-stack { position: relative; display: block; padding-bottom: 22svh; isolation: isolate; }
  .is-scroll-stack > .stack-panel { position: sticky; top: calc(var(--stack-top) - var(--site-header-height) + var(--header-visible-height)); transition: top .25s ease; z-index: var(--stack-order); margin-top: 0; margin-bottom: var(--stack-gap,32svh); min-height: var(--stack-height); transform-origin: center top; scale: calc(.96 + var(--card-approach,1) * .04 - var(--stack-depth,0) * .065); rotate: calc(var(--stack-depth,0) * -1deg); box-shadow: 0 -6px 38px #103b3c18; }
  .is-scroll-stack > .stack-panel:last-child { margin-bottom: 0; }
  .is-scroll-stack > .stack-panel::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #103b3c; opacity: calc(var(--stack-depth,0) * .12); pointer-events: none; z-index: 2; }
  .service-stack.is-scroll-stack { margin-top: 96px; --stack-gap: 48svh; }
  .service-stack.is-scroll-stack > .home-service-row { padding: 40px; }
  .service-stack.is-scroll-stack .home-service-photo img { aspect-ratio: auto; height: min(580px,calc(100svh - 300px)); }
  .charm-list.is-scroll-stack > .charm-row { grid-template-columns: 32% minmax(0,1fr); padding: 28px; background: #fff7ea; border: 1px solid #e5e9df; border-radius: 12px; align-items: center; }
  .charm-list.is-scroll-stack > .charm-row:nth-child(2) { grid-template-columns: minmax(0,1fr) 32%; background: #e6f5f0; }
  .charm-list.is-scroll-stack > .charm-row:nth-child(3) { background: #fff0ef; }
  .charm-list.is-scroll-stack > .charm-row > img { height: min(480px,calc(100svh - 320px)); }

  .home-about.is-about-scene .about-visual { position: sticky; top: 152px; }
  .home-about.is-about-scene .about-visual > img:first-child { scale: calc(1 - var(--about-progress,0) * .06); transform-origin: left center; border-radius: 0 calc(5px + var(--about-progress,0) * 42px) calc(5px + var(--about-progress,0) * 42px) 0; }
}
@media (max-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .is-recruit-scene .recruit-band-grid > div:first-child > img { translate: none; }
}
@media (max-width: 780px) and (prefers-reduced-motion: no-preference) {
  .photo-story.is-photo-story { height: 155svh; }
  .is-photo-story .photo-story-label { top: 7svh; font-size: 13px; }
  .is-photo-story .photo-strip img { top: 56%; border-width: 4px; }
  .is-photo-story .photo-story-progress { bottom: 6svh; }
}
@media print {
  .is-flow-scene > .stack-panel, .is-recruit-scene .recruit-band-word, .is-recruit-scene .recruit-band-grid > div > img { scale: none; translate: none; }
  .is-recruit-scene .recruit-band-word::after { content: none; }
  .hero-scene.is-hero-scene, .photo-story.is-photo-story { height: auto; }
  .is-hero-scene .home-hero, .is-photo-story .photo-stage, .home-about.is-about-scene .about-visual, [data-scroll-stack].is-scroll-stack > .stack-panel { position: relative; top: auto; scale: none; rotate: none; min-height: 0; box-shadow: none; }
  [data-scroll-stack].is-scroll-stack { padding: 0; }
  [data-scroll-stack].is-scroll-stack > .stack-panel { margin: 24px auto; }
  .is-scroll-stack > .stack-panel::after, .is-photo-story .photo-story-label, .is-photo-story .photo-story-progress { display: none; }
  .is-photo-story .photo-stage { height: auto; overflow: visible; }
  .is-photo-story .photo-strip { position: relative; display: grid; }
  .is-photo-story .photo-strip img { position: static; width: 100%; transform: none; }
}
