/* A complete thought occupies each scene; movement supports the content. */
.study{--study-top-space:clamp(70px,6vw,100px);padding-top:var(--study-top-space)}
.study-intro{position:relative;min-height:calc(100svh - 78px - var(--study-top-space));align-items:center;padding-bottom:clamp(44px,6vw,82px)}
.study-intro>p{align-self:end;margin-bottom:clamp(25px,4vw,60px)}
.study-next{position:absolute;left:0;bottom:25px;display:inline-flex;align-items:center;gap:16px;border-bottom:1px solid #8eb9af;padding-bottom:6px;color:#b7ddd2;font-size:11px;font-weight:750}
.study-next span{font-size:17px;transition:transform .25s}
.study-next:hover span{transform:translateY(4px)}
.study-run{height:330svh}
.study-sticky{height:calc(100svh - 78px);min-height:0;top:78px;overflow:hidden;border-bottom:1px solid #63817c}
.study-visual,.study-copy{min-height:0}
.study-graphic{isolation:isolate}
.study-graphic>.study-scene{
  opacity:0;
  transform:translate3d(0,12px,0) scale(1.035);
  filter:blur(7px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform 1.05s cubic-bezier(.2,.7,.2,1),filter .7s ease;
  will-change:opacity,transform;
}
.study-visual[data-stage="0"] .study-graphic>.scene-0,
.study-visual[data-stage="1"] .study-graphic>.scene-1,
.study-visual[data-stage="2"] .study-graphic>.scene-2,
.study-visual[data-stage="3"] .study-graphic>.scene-3{
  opacity:1;
  transform:translate3d(0,var(--scene-pan,0px),0) scale(1.012);
  filter:blur(0);
}
.study-copy{position:relative}
.study-progress{height:1px;background:#54716d;margin-top:20px;overflow:hidden}
.study-progress span{display:block;width:var(--study-progress,0%);height:100%;background:#a6dacf;transition:width .18s linear}
.stage-content{margin:auto 0;max-width:520px}
.stage-controls{position:relative}
.stage-button{min-height:31px}
.stage-button i{transition:background .35s,height .35s,transform .35s;transform-origin:left center}
.stage-button:hover i{transform:scaleX(1.04);background:#a4d8cd}
.stage-button:focus-visible{outline-color:#b9e7dd}

/* The photograph is revealed, not replaced by abstract decoration. */
.hero-image>img{transform:translate3d(0,var(--hero-pan,0px),0) scale(1.015);will-change:transform}
.hero-image figcaption{transition:opacity .7s ease,transform .7s ease}
.pane-art img{transform:scale(1);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.pane-art-photo{background:#eeede9}
.pane-art-photo img{object-fit:contain;object-position:center}
.pane-art-photo::after{display:none}
.deliverable-tab:hover+.deliverable-tab{border-top-color:#9bb9b0}
.deliverable-pane:not([hidden]) .pane-art img{animation:pane-arrive .95s cubic-bezier(.2,.7,.2,1) both}
.deliverable-pane:not([hidden]) .pane-caption{animation:caption-arrive .65s cubic-bezier(.2,.7,.2,1) both}
@keyframes pane-arrive{from{opacity:.55;transform:scale(1.045)}to{opacity:1;transform:scale(1)}}
@keyframes caption-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.method-visual{position:relative;max-width:560px;height:clamp(190px,18vw,260px);overflow:hidden;margin:clamp(34px,4vw,55px) 0 0;background:#294247}
.method-visual img{width:100%;height:100%;object-fit:cover;object-position:center 48%;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.method-visual:hover img{transform:scale(1.035)}
.method-visual figcaption{position:absolute;bottom:0;left:0;right:0;padding:13px 16px;background:rgba(12,38,42,.82);font:9px/1.5 var(--mono);letter-spacing:.085em;color:#d9eee8}

@media(min-width:901px){
  .deliverables{padding:50px 0}
  .deliverables-intro{margin-bottom:22px}
  .deliverables h2{font-size:clamp(51px,4.6vw,74px)}
  .deliverable-tab{min-height:105px;padding:15px 20px 13px 0}
  .deliverable-tab strong{font-size:clamp(24px,2.05vw,34px)}
  .deliverable-panes{padding:14px 0 14px 20px}
  .pane-art{height:clamp(230px,22vw,310px)}
  .pane-caption{padding:14px 0 0}
  .pane-caption h3{font-size:clamp(24px,2.1vw,36px);margin-top:6px}
  .pane-caption p{line-height:1.55}
}

@media(prefers-reduced-motion:no-preference){
  .motion-enabled .hero-copy>.eyebrow{animation:hero-arrive .7s .05s both}
  .motion-enabled .hero-copy>h1{animation:hero-arrive .85s .12s both}
  .motion-enabled .hero-lead{animation:hero-arrive .8s .28s both}
  .motion-enabled .hero-actions{animation:hero-arrive .8s .4s both}
  .motion-enabled .hero-image{animation:image-arrive 1.05s .18s both}
  .motion-enabled .motion-reveal{opacity:0;transform:translate3d(0,25px,0)}
  .motion-enabled .motion-reveal.is-visible{opacity:1;transform:translate3d(0,0,0);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}
  .motion-enabled .method-list article:nth-child(2){transition-delay:.1s}
  .motion-enabled .method-list article:nth-child(3){transition-delay:.2s}
}
@keyframes hero-arrive{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes image-arrive{from{opacity:.15;clip-path:inset(5% 0 0 0)}to{opacity:1;clip-path:inset(0)}}

@media(max-width:900px){
  .study-intro{min-height:0;padding-bottom:28px;align-items:end}
  .study-intro>p{align-self:auto;margin-bottom:0}
  .study-next{position:static;grid-column:1/-1;margin-top:12px;width:max-content}
  .study-run{height:auto}
  .study-sticky{position:relative;top:auto;height:auto;display:flex;flex-direction:column;overflow:visible}
  .study-visual{height:clamp(310px,45svh,420px);flex:none}
  .study-copy{min-height:330px}
  .study-progress{margin-top:13px}
}
@media(max-width:680px){
  .study-next{margin-top:6px}
  .study-visual{height:clamp(230px,35svh,300px)}
  .study-copy{min-height:340px}
  .stage-content{margin:23px 0}
  .stage-content h3{font-size:clamp(34px,9vw,48px)}
  .study-progress{margin-top:10px}
  .method-visual{height:210px;margin-top:26px}
}
@media(min-width:901px) and (max-height:740px){
  .study h2{font-size:clamp(58px,5.6vw,86px)}
  .stage-content h3{font-size:clamp(34px,3.4vw,52px)}
  .study-copy{padding:24px}
  .stage-content>p:not(:first-child){font-size:12px;line-height:1.55;margin-top:14px}
  .stage-content ul{margin-top:16px}
  .visual-header,.visual-footer{padding:11px 15px}
}
@media(prefers-reduced-motion:reduce){
  .hero-image>img{transform:none!important}
  .study-graphic>.study-scene{filter:none!important;transform:none!important;transition:none!important}
  .study-progress span{transition:none!important}
  .deliverable-pane:not([hidden]) .pane-art img,.deliverable-pane:not([hidden]) .pane-caption{animation:none!important}
}