/* V19: a real-photo chapter, live typography, and bounded scroll motion.
   Every base style is the readable final state; JS only enhances it. */

.work-scene{
  --photo-height:clamp(240px,64vw,310px);
  position:relative;
  isolation:isolate;
}
.work-scene .work-photo{
  position:absolute;inset:0 0 auto;max-width:none;
  height:var(--photo-height);overflow:hidden;z-index:-1;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 12px),transparent calc(100% - 2px));
  mask-image:linear-gradient(#000 calc(100% - 12px),transparent calc(100% - 2px));
}
.work-scene .work-photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 36%,rgba(4,30,66,.08) 51%,rgba(4,30,66,.65) 80%,var(--ink) 100%);
}
.work-scene .work-photo img{
  width:100%;height:100%;object-fit:cover;object-position:57% 42%;
  transform:scale(1);transform-origin:55% 45%;
}
.work-scene .work-heading{
  position:relative;padding-top:calc(var(--photo-height) - 60px);padding-bottom:40px;
}
.work-scene .section-kicker{
  position:absolute;top:28px;left:0;margin:0;padding:7px 10px;color:#fff;background:var(--ink);
}
.work-scene .section-kicker::after{background:var(--aqua);width:28px;height:2px}
.work-scene .section-title{
  font-size:clamp(56px,17vw,78px);line-height:1.16;letter-spacing:-.055em;
}
.work-scene .section-title>span{display:block}
.work-scene .work-heading>p:not(.section-kicker){color:#fff;margin-top:20px}
.work-content{padding-top:0;padding-bottom:64px}
.team-intro{border-top:1px solid var(--dark-line);padding-top:28px}
.work-verbs{grid-template-columns:minmax(0,1fr);gap:0;margin-top:40px}
.work-verb,.work-verb:first-child,.work-verb:nth-child(2){
  position:relative;border-top:1px solid var(--dark-line);padding-block:36px 40px;
}
.work-verb::before{
  content:"";position:absolute;inset:-1px 0 auto;height:2px;background:var(--aqua);
  transform-origin:left center;transform:scaleX(1);
}
.work-verb h3{font-size:clamp(64px,19.2vw,88px);line-height:1.25;letter-spacing:-.055em}
.verb-title .eyebrow{margin-bottom:12px}
.verb-title>p{margin-top:10px}
.service-points{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;margin-top:28px}
.service-points::before{display:none}
.work-action{padding-top:36px}
.report-visual{padding-bottom:12px}
.report-primary{transform:rotate(-3deg);transform-origin:60% 80%}
.report-secondary{transform:rotate(3deg);transform-origin:40% 20%}

@media(min-width:650px){
  .work-scene{--photo-height:400px}
  .work-scene .work-photo img{object-position:50% 42%}
  .work-scene .work-heading{padding-top:calc(var(--photo-height) - 96px);padding-bottom:48px}
  .work-scene .section-title{font-size:96px;line-height:1.13}
  .work-scene .section-kicker{top:36px}
  .work-verb,.work-verb:first-child,.work-verb:nth-child(2){
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);gap:32px;
    align-items:center;padding-block:48px;
  }
  .work-verb h3{font-size:clamp(58px,8vw,74px)}
  .service-points{margin:0;gap:12px 20px}
  .service-points li{font-size:12px}
}
@media(min-width:960px){
  .work-scene{--photo-height:clamp(440px,36vw,540px)}
  .work-scene .work-heading{padding-top:calc(var(--photo-height) - 128px);padding-bottom:56px}
  .work-scene .section-title{font-size:clamp(108px,10vw,144px);line-height:1.1}
  .work-scene .section-kicker{top:40px}
  .work-scene .work-heading>p:not(.section-kicker){margin-top:28px}
  .work-content{padding-top:0;padding-bottom:88px}
  .team-intro{padding-top:32px}
  .work-verbs{margin-top:56px;gap:0}
  .work-verb,.work-verb:first-child,.work-verb:nth-child(2){gap:64px;padding-block:56px}
  .work-verb h3{font-size:clamp(88px,8.3vw,118px)}
  .service-points{gap:16px 32px}
  .service-points li{font-size:15px}
  .work-action{padding-top:48px}
  .report-visual{padding-bottom:0}
}
@media(max-width:359px){
  .work-scene .section-title{font-size:56px}
  .work-verb h3{font-size:62px}
  .service-points{gap:10px 16px}
}

@media(prefers-reduced-motion:no-preference){
  .hero-intro{animation:hero-copy-enter .72s cubic-bezier(.16,1,.3,1) both}
  .hero-seo-row{animation:hero-copy-enter .8s .07s cubic-bezier(.16,1,.3,1) both}
  .hero-ending{animation:hero-copy-enter .8s .14s cubic-bezier(.16,1,.3,1) both}
  .motion-ready .work-scene .work-photo img{
    transform:scale(calc(1.08 - var(--scene-progress,1) * .08));
  }
  .motion-ready .work-verb::before{transform:scaleX(var(--step-progress,0));opacity:.45}
  .motion-ready .work-verb.is-active::before{opacity:1}
  .motion-ready .verb-title .eyebrow{transition:color .3s ease}
  .motion-ready .work-verb.is-active .eyebrow{color:var(--aqua)}
  .motion-ready .report-primary{transition:transform 1s cubic-bezier(.16,1,.3,1)}
  .motion-ready .report-secondary{transition:transform 1.1s .1s cubic-bezier(.16,1,.3,1)}
  .motion-ready .report-visual:not(.is-inview) .report-primary{transform:translate(1%,8%) rotate(-7deg)}
  .motion-ready .report-visual:not(.is-inview) .report-secondary{transform:translate(-8%,-28%) rotate(-9deg)}
}
@keyframes hero-copy-enter{
  from{opacity:.2;transform:translate3d(0,22px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@media(prefers-reduced-motion:reduce){
  .hero-intro,.hero-seo-row,.hero-ending{animation:none}
  .work-scene .work-photo img{transform:none}
  .work-verb::before{transform:none;opacity:1}
  .report-primary{transform:rotate(-3deg)}
  .report-secondary{transform:rotate(3deg)}
}