.story-group, .story-group > * { position: relative; }
.company-philosophy { background: #d5f2e8; }
.company-philosophy, .entry-band { position: relative; isolation: isolate; overflow: clip; }
.cta-inline-hint { display: inline-flex; align-items: center; gap: 16px; margin-top: 22px; font-size: 14px; font-weight: 700; }
.cta-inline-hint::after { content: '↗'; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid currentColor; border-radius: 50%; font-size: 20px; }
.contact-card::before { content: ''; position: absolute; right: -95px; bottom: -100px; width: 240px; height: 240px; border-radius: 50%; background: #0f7f7414; pointer-events: none; }
.contact-card--phone::before { background: #ffffff24; }
@media (prefers-reduced-motion: no-preference) {
  /* A window opens from the centre; no lateral travel of the content. */
  .company-philosophy.story-chapter { background: color-mix(in srgb,#bdebdc calc(var(--open,1) * 100%),#f7faf9); }
  .company-philosophy.story-chapter h3 { clip-path: inset(calc((1 - var(--open,1)) * 50%) 0); scale: calc(.9 + var(--open,1) * .1); }
  .company-purpose.story-chapter { clip-path: inset(0 calc((1 - var(--open,1)) * 14%) round calc((1 - var(--open,1)) * 100px)); }
  .company-purpose.story-chapter .purpose-image { scale: calc(1.3 - var(--open,1) * .3); }
  .company-purpose.story-chapter .editorial-display { clip-path: inset(calc((1 - var(--open,1)) * 100%) 0 0); translate: 0 calc((1 - var(--open,1)) * 60px); }
  .story-photo { clip-path: inset(calc((1 - var(--open,1)) * 20%) calc((1 - var(--open,1)) * 22%) round calc((1 - var(--open,1)) * 240px)); scale: calc(.85 + var(--open,1) * .15); }
  .recruit-message.story-chapter > .editorial-container > .editorial-display, .entry-band.story-chapter .editorial-display { clip-path: inset(0 0 calc((1 - var(--open,1)) * 100%)); scale: calc(.8 + var(--open,1) * .2); }
  .recruit-data.story-chapter { background: color-mix(in srgb,#b6fffe calc(var(--open,1) * 55%),#f7faf9); }

  /* Panels rise into place, with a restrained tilt instead of left/right entrances. */
  :is(.data-grid,.staff-cards,.contact-grid) > .story-item { transform: perspective(1000px) translateY(calc((1 - var(--open,1)) * 90px)) rotateX(calc((1 - var(--open,1)) * 12deg)) scale(calc(.88 + var(--open,1) * .12)); transform-origin: center bottom; }
  :is(.value-list,.welfare-list) > .story-item { clip-path: inset(0 0 calc((1 - var(--open,1)) * 100%)); }
  .value-list > .story-item .value-number { scale: calc(1.25 - var(--open,1) * .25); transform-origin: left top; }
  .survey-grid > .story-item .survey-ring img:last-child { mask-image: conic-gradient(#000 calc(var(--open,1) * 1turn),transparent 0); }
  .story-item:focus-within { --open: 1 !important; --inside: 1 !important; --action: 1 !important; }

  /* Card content follows the container. Buttons and their hit areas stay in place on hover. */
  .contact-card.story-item :is(h3,.contact-number) { clip-path: inset(0 0 calc((1 - var(--inside,1)) * 100%)); translate: 0 calc((1 - var(--inside,1)) * 32px); }
  .contact-card.story-item .button, .contact-card.story-item .cta-inline-hint { opacity: var(--action,1); translate: 0 calc((1 - var(--action,1)) * 18px); }
  .contact-card::before { scale: .55; transition: scale .65s var(--motion-ease); }
  .contact-card:is(:hover,:focus-within)::before { scale: 2.4; }
  .contact-card .contact-leaf { scale: 1; rotate: 0deg; transition: scale .65s var(--motion-ease), rotate .65s var(--motion-ease); }
  .contact-card:is(:hover,:focus-within) .contact-leaf { scale: 1.3; rotate: -18deg; }
  .cta-inline-hint::after { transition: rotate .45s, background .45s; }
  .contact-card:is(:hover,:focus-within) .cta-inline-hint::after { rotate: 45deg; background: #ffffff30; }
  .entry-band.story-chapter::before { content: ''; position: absolute; z-index: -1; width: 110vmax; height: 110vmax; left: 50%; top: 50%; translate: -50% -50%; border-radius: 50%; background: #e6f5f0; scale: calc(var(--open,1) * .9); }
  .entry-band.story-chapter h2 { clip-path: inset(0 0 calc((1 - var(--open,1)) * 100%)); }
  .entry-band .editorial-display { transition: letter-spacing .5s var(--motion-ease); }
  .entry-band:has(.button:is(:hover,:focus-visible)) .editorial-display { letter-spacing: .045em; }
}
@media (max-width: 780px) and (prefers-reduced-motion: no-preference) {
  :is(.data-grid,.staff-cards,.contact-grid) > .story-item { transform: translateY(calc((1 - var(--open,1)) * 50px)) scale(calc(.94 + var(--open,1) * .06)); }
}
@media print {
  .story-item, .story-photo, .story-chapter, .story-chapter :is(h2,h3,.editorial-display), .story-item :is(.value-number,h3,.contact-number,.button,.cta-inline-hint) { transform: none !important; clip-path: none !important; scale: none !important; translate: none !important; opacity: 1 !important; }
  .story-item .survey-ring img:last-child { mask-image: none !important; }
  .company-philosophy.story-chapter::before, .entry-band.story-chapter::before, .contact-card::before { display: none; }
}