.works-story { background:#eef1f3; }
.work-reel { height:600svh; position:relative; }
.reel-stage { position:sticky; top:0; height:100svh; min-height:360px; overflow:hidden; isolation:isolate; background:var(--reel-bg,#17c0d9); color:var(--reel-ink,#17191c); }
.reel-header { position:absolute; top:27px; left:4%; right:4%; display:flex; align-items:center; gap:24px; z-index:5; }
.reel-header .overline { margin-right:auto; font-size:11px; }
.reel-count { font:500 32px/1 var(--display); white-space:nowrap; }
.reel-count>span+span { font-size:13px; opacity:.6; }
.reel-skip { display:flex; gap:12px; align-items:center; font-size:12px; padding:10px 0; }
.reel-header .site-motion-toggle { width:36px; height:36px; border-color:currentColor; color:inherit; }
.reel-header .site-motion-toggle .lucide { width:16px; }
.reel-skip:hover { text-decoration:underline; text-underline-offset:4px; }
.reel-backtype { position:absolute; left:2.5%; top:12%; right:0; font:700 160px/.95 var(--display); opacity:.1; pointer-events:none; transform:translateX(var(--reel-type-x,0px)); white-space:nowrap; }
.reel-frames { position:absolute; inset:0; pointer-events:none; }
.reel-frame { position:absolute; top:0; left:0; margin:0; transform-origin:center center; opacity:0; pointer-events:none; will-change:transform,opacity; }
.reel-image { display:block; position:relative; width:100%; box-shadow:0 28px 60px -25px #071c3066; }
.reel-image img { display:block; width:100%; height:auto; }
.reel-image:focus-visible { outline:4px solid var(--reel-ink); outline-offset:8px; }
.reel-image .reel-image-arrow { position:absolute; bottom:16px; right:16px; width:46px; height:46px; border-radius:50%; background:#fff; color:#17191c; display:grid; place-items:center; transition:background .2s,transform .2s; }
.reel-image:hover .reel-image-arrow { background:var(--amber); transform:rotate(45deg); }
.reel-tile-label { position:absolute; top:100%; left:0; right:0; padding-top:14px; font-size:18px; line-height:1.5; font-weight:600; opacity:var(--reel-grid-labels,0); transform-origin:top left; }
.reel-captions { position:absolute; left:4%; right:4%; bottom:77px; height:90px; pointer-events:none; }
.reel-caption { position:absolute; inset:0; display:flex; align-items:flex-end; gap:25px; justify-content:space-between; opacity:0; }
.reel-caption .overline { font-size:11px; margin-bottom:10px; }
.reel-caption h3 { font-size:32px; line-height:1.5; font-weight:700; }
.reel-caption>p { font-size:14px; max-width:360px; text-align:right; line-height:1.8; }
.reel-caption small { display:block; font-size:11px; margin-top:6px; }
.reel-bottom { position:absolute; left:4%; right:4%; bottom:24px; display:flex; align-items:center; gap:35px; z-index:5; }
.reel-steps { display:flex; flex:1; gap:16px; max-width:550px; }
.reel-steps button { flex:1; padding:10px 0 0; position:relative; text-align:left; font:500 11px var(--display); min-height:32px; color:inherit; }
.reel-steps button::before,.reel-steps button::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:currentColor; opacity:.22; }
.reel-steps button::after { opacity:1; transform:scaleX(var(--step-fill,0)); transform-origin:left; }
.reel-steps button[aria-current="step"] { font-weight:700; }
.reel-end-label { margin-left:auto; font:500 10px var(--display); }
.reel-stage.is-overview .reel-backtype { opacity:.065; }
.reel-stage.is-overview .reel-image-arrow { display:none; }
.works-overview .works-heading h2 { font-size:86px; }
.project-grid .project-info { flex-wrap:wrap; }
.project-grid .project-budget { padding:0; width:100%; display:flex; align-items:center; justify-content:space-between; text-align:left; gap:16px; }
.project-grid .project-budget strong { font-size:23px; white-space:nowrap; font-variant-numeric:tabular-nums; }
/* Shared row tracks keep text aligned even when a project title wraps. */
@media(min-width:761px) {
  #works-grid .project-grid { row-gap:0; }
  #works-grid .project { display:grid; grid-template-rows:subgrid; grid-row:span 7; row-gap:0; align-self:stretch; margin-bottom:70px; }
  #works-grid .project:nth-last-child(-n+2) { margin-bottom:0; }
  #works-grid .project-info,#works-grid .project-info>div:first-child { display:contents; }
  #works-grid .project-category { margin-top:22px; }
  #works-grid .project-budget { padding-top:20px; }
}
.overview-end { display:flex; justify-content:space-between; gap:30px; margin-top:50px; padding-top:28px; border-top:1px solid var(--line); }
@media(min-width:1700px) { .reel-backtype { font-size:210px; } .reel-caption h3 { font-size:38px; } }
@media(max-width:1000px) {
  .reel-backtype { font-size:125px; }
  .reel-caption h3 { font-size:27px; }
  .reel-caption>p { max-width:240px; font-size:12px; }
  .works-overview .works-heading h2 { font-size:72px; }
}
@media(max-width:760px) {
  .work-reel { height:600svh; }
  .reel-header { top:19px; left:20px; right:20px; gap:13px; }
  .reel-header .overline { font-size:8px; max-width:90px; }
  .reel-count { font-size:24px; } .reel-count>span+span { font-size:10px; }
  .reel-skip { gap:5px; font-size:10px; } .reel-skip .lucide { width:17px; }
  .reel-header .site-motion-toggle { width:30px; height:30px; }
  .reel-backtype { font-size:74px; top:18%; left:14px; }
  .reel-captions { left:20px; right:20px; bottom:80px; height:150px; }
  .reel-caption { align-items:flex-start; justify-content:flex-end; flex-direction:column; gap:12px; }
  .reel-caption .overline { font-size:9px; margin-bottom:7px; }
  .reel-caption h3 { font-size:23px; }
  .reel-caption>p { text-align:left; max-width:100%; font-size:12px; }
  .reel-caption small { font-size:10px; }
  .reel-bottom { left:20px; right:20px; bottom:22px; }
  .reel-steps { max-width:none; gap:14px; }
  .reel-end-label { display:none; }
  .reel-tile-label { font-size:17px; padding-top:14px; }
  .reel-image .reel-image-arrow { width:34px; height:34px; right:10px; bottom:10px; }
  .reel-image-arrow .lucide { width:18px; }
  .works-overview .works-heading { flex-wrap:wrap; gap:18px; }
  .works-overview .works-heading h2 { font-size:49px; }
  .overview-end { flex-direction:column; margin-top:36px; gap:28px; }
  .overview-end .text-link { justify-content:space-between; font-size:12px; }
}
@media(max-width:380px) {
  .reel-header { left:16px; right:16px; gap:10px; }
  .reel-caption h3 { font-size:20px; }
  .reel-backtype { font-size:62px; }
  .reel-captions { left:16px; right:16px; }
  .works-overview .works-heading h2 { font-size:41px; }
}
@media(max-height:600px) and (min-width:761px) {
  .reel-header { top:14px; }
  .reel-captions { bottom:55px; height:68px; }
  .reel-caption h3 { font-size:23px; }
  .reel-caption .overline { font-size:9px; margin-bottom:4px; }
  .reel-bottom { bottom:10px; }
}
.motion-paused .work-reel { display:none; }
@media(prefers-reduced-motion:reduce) { .work-reel { display:none; } }
/* Different framing languages for each real project. Screenshot pixels stay intact. */
.reel-scenery { position:absolute; inset:-14px; pointer-events:none; opacity:var(--case-detail,0); }
.reel-photo-echo { position:absolute; width:88%; height:auto; max-height:100%; object-fit:contain; left:6%; top:0; opacity:.5; transform:translateX(calc((var(--echo-index) * 2 - 1) * (18px + (1 - var(--case-reveal,0)) * 22px))) rotate(calc((var(--echo-index) * 2 - 1) * 5deg)); box-shadow:0 12px 30px #0003; }
.reel-image-trace { position:absolute; inset:0; pointer-events:none; opacity:var(--case-detail,0); --trace-progress:var(--case-reveal,0); --trace-weight:5px; }
.reel-image-trace>[data-edge] { position:absolute; display:block; background:var(--blue); box-shadow:0 0 16px #214de366; }
.reel-image-trace>[data-edge=top] { top:0; left:0; width:100%; height:var(--trace-weight); transform-origin:left; transform:scaleX(clamp(0,calc(var(--trace-progress) * 4),1)); }
.reel-image-trace>[data-edge=right] { top:0; right:0; width:var(--trace-weight); height:100%; transform-origin:top; transform:scaleY(clamp(0,calc(var(--trace-progress) * 4 - 1),1)); }
.reel-image-trace>[data-edge=bottom] { bottom:0; left:0; width:100%; height:var(--trace-weight); background:var(--amber); box-shadow:0 0 16px #f5a00066; transform-origin:right; transform:scaleX(clamp(0,calc(var(--trace-progress) * 4 - 2),1)); }
.reel-image-trace>[data-edge=left] { top:0; left:0; width:var(--trace-weight); height:100%; background:var(--amber); box-shadow:0 0 16px #f5a00066; transform-origin:bottom; transform:scaleY(clamp(0,calc(var(--trace-progress) * 4 - 3),1)); }
.reel-shutters { position:absolute; display:block; inset:0; overflow:hidden; }
.reel-shutters>span { position:absolute; display:block; left:0; top:calc(var(--shutter-index) * 25%); width:100%; height:25.2%; background:var(--amber); transform:translateX(calc(clamp(0,calc(var(--trace-progress) * 1.6 - var(--shutter-index) * .18),1) * var(--shutter-direction) * 102%)); }
.reel-shutters>span:nth-child(even) { background:var(--blue); }
.reel-shutters>span::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(125deg,transparent 0 30px,#ffffff30 31px 33px,transparent 34px 65px); }
.reel-frame[data-project=sumiyoshi] .reel-feature-label { font-size:18px; line-height:1.4; font-weight:700; }
.reel-frame[data-project=sumiyoshi] .reel-feature-label::before { content:''; display:inline-block; width:28px; height:4px; margin-right:12px; vertical-align:middle; background:var(--amber); }
.reel-frame[data-project=caskaders] .reel-feature-label { background:#176845; padding:6px 12px; width:max-content; max-width:100%; }
.reel-precision-corner { position:absolute; width:calc(12px + var(--case-reveal,0) * 36px); height:calc(12px + var(--case-reveal,0) * 36px); border-color:#17191c; border-style:solid; border-width:0; }
.reel-precision-corner[data-corner="0"] { left:0; top:0; border-left-width:1px; border-top-width:1px; }
.reel-precision-corner[data-corner="1"] { right:0; top:0; border-right-width:1px; border-top-width:1px; }
.reel-precision-corner[data-corner="2"] { left:0; bottom:0; border-left-width:1px; border-bottom-width:1px; }
.reel-precision-corner[data-corner="3"] { right:0; bottom:0; border-right-width:1px; border-bottom-width:1px; }
.reel-route-step { position:absolute; top:-24px; font:600 10px var(--display); padding-bottom:7px; border-bottom:2px solid #17191c; }
.reel-route-step:nth-child(1) { left:3%; }
.reel-route-step:nth-child(2) { left:44%; }
.reel-route-step:nth-child(3) { right:3%; }
.reel-route-step::after { content:''; position:absolute; bottom:-3px; left:0; height:4px; width:100%; background:#fff; transform:scaleX(var(--case-drift,0)); transform-origin:left; }
.reel-feature-nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; max-width:70%; }
.reel-feature-select { display:none; }
.reel-feature-nav button { font-size:11px; padding:10px 13px; border:1px solid currentColor; border-radius:0; background:transparent; }
.reel-feature-nav button[hidden] { display:none; }
.reel-feature-nav button[aria-current=step] { background:var(--reel-ink); color:var(--reel-bg); }
.reel-feature-nav button:focus-visible { outline:3px solid currentColor; outline-offset:3px; }
@media(max-width:760px) {
  .reel-feature-nav { gap:5px; max-width:69%; }
  .reel-feature-nav button { display:none; }
  .reel-feature-nav { width:60%; flex-shrink:0; }
  .reel-feature-select:not([hidden]) { display:block; max-width:100%; width:100%; height:44px; padding:8px; font-size:10px; color:var(--reel-ink); background:var(--reel-bg); border:1px solid currentColor; border-radius:0; }
  .reel-bottom { gap:18px; }
  .reel-route-step { font-size:8px; }
  .reel-image-trace { --trace-weight:3px; }
  .reel-frame[data-project=sumiyoshi] .reel-feature-label { font-size:13px; }
  .reel-photo-echo { opacity:.3; transform:rotate(calc((var(--echo-index) * 2 - 1) * 4deg)); }
}