/* HRPO case refinements: compact copy spacing, slower orange paths and scroll reveals. */
.hrpo-case .copy-section.first,
.hrpo-case .section-02-copy,
.hrpo-case .section-03-copy,
.hrpo-case .section-04-copy,
.hrpo-case .section-05-copy,
.hrpo-case .extracted-copy{
  display:block;
  min-height:0;
  height:auto;
  aspect-ratio:auto;
  padding:clamp(38px,3.2vw,56px) clamp(48px,7vw,80px) clamp(26px,2vw,36px);
  container-type:inline-size;
}
.hrpo-case .copy-section.first .copy-inner,
.hrpo-case .section-02-copy .copy-inner,
.hrpo-case .section-03-copy .copy-inner,
.hrpo-case .section-04-copy .copy-inner,
.hrpo-case .section-05-copy .copy-inner,
.hrpo-case .extracted-copy .copy-inner{
  position:static;
  width:67.7%;
  max-width:none;
  margin:0 auto;
}

/* The line motion is deliberately calm and consistent across every case section. */
.hrpo-case .section-01-line.is-visible path,
.hrpo-case .section-02-scene.is-visible .section-02-line path,
.hrpo-case .section-03-scene.is-visible .section-03-line path,
.hrpo-case .section-04-scene.is-visible .section-04-line path,
.hrpo-case .section-05-composition.is-visible .section-05-line path,
.hrpo-case .animated-section.is-visible .exact-section-line path{
  animation-duration:5.6s;
  animation-timing-function:cubic-bezier(.22,.66,.2,1);
}
.hrpo-case .section-04-scene.is-visible .section-04-rings path{
  animation-duration:3.4s;
}

/* Hidden states are enabled only after JavaScript has registered its observers. */
.hrpo-case.hrpo-motion-ready .copy-section .copy-inner{
  opacity:0;
  transform:translate3d(0,34px,0);
  transition:opacity 1s ease,transform 1.15s cubic-bezier(.2,.7,.2,1);
  will-change:opacity,transform;
}
.hrpo-case.hrpo-motion-ready .copy-section.is-copy-visible .copy-inner{
  opacity:1;
  transform:none;
  will-change:auto;
}
.hrpo-case img[data-src]{opacity:0}
.hrpo-case img.hrpo-image-loaded{opacity:1;transition:opacity .5s ease}
.hrpo-case .section-05-screen{
  position:absolute;
  z-index:2;
  left:30.2338%;
  top:56.7114%;
  display:block;
  width:60.8397%;
  height:40.4362%;
  object-fit:cover;
  object-position:center;
  pointer-events:none;
  background:#fff;
  border-radius:1.063cqw 1.063cqw 0 0;
}
/* The Figma scene contains a large white lead-in. Pull the scene and its path upward together. */
.hrpo-case .section-05-scene{margin-top:-7.5cqw}
.hrpo-case .section-05-composition>.section-05-line{transform:translateY(-7.5cqw)}
.hrpo-case .section-05-copy{position:relative;z-index:5}

@media(max-width:1440px){
  .hrpo-case .copy-section.first,
  .hrpo-case .section-02-copy,
  .hrpo-case .section-03-copy,
  .hrpo-case .section-04-copy,
  .hrpo-case .section-05-copy,
  .hrpo-case .extracted-copy{padding:40px clamp(48px,7vw,80px) 28px;container-type:normal}
  .hrpo-case .copy-section.first .copy-inner,
  .hrpo-case .section-02-copy .copy-inner,
  .hrpo-case .section-03-copy .copy-inner,
  .hrpo-case .section-04-copy .copy-inner,
  .hrpo-case .section-05-copy .copy-inner,
  .hrpo-case .extracted-copy .copy-inner{width:100%;max-width:780px}
}
@media(max-width:1024px){
  .hrpo-case .copy-section.first,
  .hrpo-case .section-02-copy,
  .hrpo-case .section-03-copy,
  .hrpo-case .section-04-copy,
  .hrpo-case .section-05-copy,
  .hrpo-case .extracted-copy{padding:36px clamp(32px,8vw,82px) 26px}
}
@media(max-width:767px){
  .hrpo-case .copy-section.first,
  .hrpo-case .section-02-copy,
  .hrpo-case .section-03-copy,
  .hrpo-case .section-04-copy,
  .hrpo-case .section-05-copy,
  .hrpo-case .extracted-copy{padding:30px 20px 22px}
}
@media(prefers-reduced-motion:reduce){
  .hrpo-case.hrpo-motion-ready .copy-section .copy-inner,
  .hrpo-case.hrpo-motion-ready .copy-section.is-copy-visible .copy-inner,
  .hrpo-case img[data-src],
  .hrpo-case img.hrpo-image-loaded{opacity:1;transform:none;transition:none;will-change:auto}
}