.work-page{overflow-x:clip;background:var(--paper)}
.work-page main{overflow:clip}
.work-page header.nav .logo img{display:block;flex:none;width:40px;height:40px;margin:-7px}
.work-page header.nav .nav-links a[aria-current="page"]{color:#fff}
.work-page .foot .logo{gap:8px}
.work-page .foot .logo img{width:26px;height:26px;filter:invert(1)}
.work-page footer{background:var(--paper)}

.work-hero{position:relative;display:grid;place-items:center;min-height:calc(100svh - 84px);padding:72px 24px 96px;text-align:center}
.work-hero__copy{display:grid;justify-items:center}
.work-kicker{display:block;color:var(--fog);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.work-hero h1{max-width:1100px;margin-top:20px;font-size:clamp(52px,7.8vw,104px);font-weight:600;line-height:.92;letter-spacing:-.055em}
.work-hero h1 span{color:var(--forest)}
.work-hero__copy p{max-width:560px;margin-top:28px;color:var(--steel);font-size:clamp(15px,1.5vw,18px);line-height:1.6}
.work-scroll-cue{position:absolute;bottom:28px;left:50%;display:grid;justify-items:center;gap:10px;color:var(--fog);font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;transform:translateX(-50%)}
.work-scroll-cue span{display:block;width:1px;height:46px;background:linear-gradient(180deg,var(--mist),var(--fog));transform-origin:top;animation:work-cue 2.2s var(--ease) infinite}
@keyframes work-cue{0%,18%{transform:scaleY(.18);opacity:.35}55%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

.work-gallery{position:relative;display:flex;height:175vh;gap:2vw;overflow:hidden;background:var(--snow);padding:2vw;scroll-margin-top:0}
.work-column{position:relative;top:-45%;display:flex;flex:1 1 0;min-width:0;flex-direction:column;gap:2vw;will-change:transform}
.work-column:nth-child(2){top:-95%}
.work-column:nth-child(3){top:-45%}
.work-column:nth-child(4){top:-75%}
.work-column figure{position:relative;flex:0 0 auto;width:100%;aspect-ratio:4/5;overflow:hidden;background:var(--cloud)}
.work-column img{width:100%;height:100%;object-fit:cover;transform:scale(1.002)}
.work-column figcaption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.work-outro{display:grid;min-height:78svh;place-content:center;justify-items:center;padding:112px 24px;text-align:center}
.work-outro h2{max-width:900px;margin-top:18px;font-size:clamp(42px,6vw,78px);line-height:1;letter-spacing:-.045em}
.work-outro p{max-width:510px;margin-top:24px;color:var(--steel);font-size:16px;line-height:1.65}
.work-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;margin-top:30px;border-radius:14px;background:var(--forest);color:var(--snow);padding:14px 22px;font-size:15px;font-weight:500;transition:background .25s ease,transform .35s var(--ease),box-shadow .35s ease}
.work-cta:hover{background:var(--forest-deep);transform:translateY(-2px);box-shadow:0 12px 28px rgba(8,65,46,.18)}
.work-cta:hover .icon-arrow{transform:translateX(3px)}
.work-cta:focus-visible,.work-scroll-cue:focus-visible{outline:3px solid rgba(94,178,139,.48);outline-offset:4px}

@media(max-width:767px){
  .work-hero{min-height:auto;padding:64px 20px 76px}
  .work-hero h1{margin-top:16px;font-size:clamp(40px,11vw,44px);line-height:.98;letter-spacing:-.045em}
  .work-hero__copy p{max-width:340px;margin-top:22px;font-size:15px;text-wrap:balance}
  .work-scroll-cue{display:none}
  .work-gallery{display:grid;height:auto;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:12px;background:var(--paper);padding:0 20px 76px}
  .work-column,.work-column:nth-child(n){display:contents;top:auto;transform:none!important;will-change:auto}
  .work-column figure{border-radius:24px}
  .work-column img{transform:translate3d(0,var(--mobile-parallax-y,0px),0) scale(1.12);will-change:transform}
  .work-outro{min-height:auto;padding:92px 20px}
  .work-outro h2{font-size:clamp(38px,11.2vw,48px)}
  .work-outro p{font-size:15px}
  .work-cta{width:100%;max-width:350px}
}

@media(prefers-reduced-motion:reduce){
  .work-scroll-cue span{animation:none;transform:none;opacity:.7}
  .work-column,.work-column:nth-child(n){top:auto;transform:none!important;will-change:auto}
  .work-gallery{height:auto;align-items:start}
  .work-column{gap:2vw}
  .work-column img{transform:scale(1.002);will-change:auto}
  .work-cta:hover{transform:none}
}