/* Donun etusivu: tekijä, työnäyte ja sen yhteydessä kerrottu palvelu. */
.story-home .story-hero{grid-template-columns:.95fr 1fr;gap:9%;padding:34px 0 64px;align-items:center}
.story-home .story-hero .hero-work{height:520px;max-width:480px;width:100%;margin:0;position:relative;transform:rotate(-1.2deg);padding:12px 12px 0;background:var(--surface);border:1px solid var(--line);box-shadow:14px 14px 0 var(--accent);overflow:visible}
.story-home .story-hero .portrait-window{width:100%;position:relative;background:var(--surface-soft)}
.story-home .story-hero .portrait-window img{object-position:50% 27%}
.story-home .story-hero .hero-photo[data-scroll-depth]{transform:translate3d(0,var(--drift-y,0px),0) scale(1.06)}
.story-home .story-hero .hero-work-caption{height:68px;align-items:flex-start;justify-content:center;flex-direction:column;gap:3px;font-size:13px;line-height:1.4}
.story-home .hero-work-caption span{font-size:10px}
.story-home .story-intro h1{font-size:clamp(43px,5.15vw,68px);line-height:1.08}
.story-home .story-intro .hero-intro{max-width:450px;font-size:17px;line-height:1.75;margin:0 0 17px}
.story-home .story-intro .hero-note{max-width:420px;font-size:13px;line-height:1.8}
.story-home .story-intro .hero-actions{flex-wrap:wrap;gap:17px 24px;margin-top:26px}
.story-home .craft-rail{margin-top:6px;margin-bottom:10px}
.flow-divider{--flow-progress:.5;--flow-shift:0px;--flow-tilt:0deg;margin-block:8px 14px;overflow:hidden}
.flow-divider svg{display:block;width:100%;height:112px;overflow:visible}
.flow-line{stroke:var(--line);stroke-width:1.2}
.flow-trace{stroke:var(--accent-text);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--flow-progress))}
.flow-frame{transform-box:fill-box;transform-origin:center;fill:var(--paper);stroke:var(--ink);stroke-width:1.2}
.flow-frame path{fill:none;stroke:var(--accent-text);stroke-width:1.5}
.flow-frame-first{transform:translateX(var(--flow-shift)) rotate(var(--flow-tilt))}
.flow-frame-middle{transform:translateY(calc(var(--flow-shift) * -.35))}
.flow-frame-last{transform:translateX(calc(var(--flow-shift) * -1)) rotate(calc(var(--flow-tilt) * -1))}
.motion-ready .story-home .story-row .story-sample[data-reveal]{opacity:0;transform:translate3d(-32px,24px,0);transition:opacity .65s ease,transform .9s cubic-bezier(.2,.75,.25,1)}
.motion-ready .story-home .story-row .story-copy[data-reveal]{opacity:0;transform:translate3d(32px,24px,0);transition:opacity .65s ease .08s,transform .9s cubic-bezier(.2,.75,.25,1) .08s}
.motion-ready .story-home .story-row [data-reveal].is-revealed{opacity:1;transform:translate3d(0,0,0)}
.story-home .story-work{padding:0}
.story-row{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center;padding:70px 0;border-bottom:1px solid var(--line)}
.story-row:last-child{border-bottom:0}
.story-sample{margin:0;min-width:0}
.story-media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--surface-soft);text-decoration:none;isolation:isolate}
.story-media>img{width:100%;height:100%;object-fit:cover;display:block;transform:translate3d(0,var(--drift-y,0px),0) scale(1.08);transition:filter .2s}
.story-media:hover>img{filter:brightness(.9)}
.story-media:focus-visible{outline-offset:6px}
.sample-play{position:absolute;inset:0;display:grid;place-content:center;font-size:25px;color:#fff;text-shadow:0 2px 14px #000;pointer-events:none}
.sample-open{position:absolute;bottom:14px;right:14px;background:var(--accent);color:#111111;font-size:11px;font-weight:600;padding:9px 13px;transition:transform .2s}
.story-media:hover .sample-open{transform:translateY(-4px)}
.story-sample figcaption{padding:16px 0 0;display:flex;flex-direction:column;gap:5px;line-height:1.6}
.story-sample figcaption strong{font-size:13px;font-weight:600}
.story-sample figcaption span,.story-sample figcaption a{font-size:11px;color:var(--muted)}
.story-sample figcaption a{width:fit-content;text-decoration-color:var(--line)}
.story-sample figcaption a:hover{color:var(--ink);text-decoration-color:var(--accent-text)}
.story-copy{min-width:0}
.story-copy .eyebrow{margin-bottom:16px}
.story-copy h2{font-size:clamp(28px,3.4vw,43px);line-height:1.15;margin:0 0 25px}
.story-copy p:not(.eyebrow){font-size:15px;line-height:1.85;max-width:450px;color:var(--muted);margin-bottom:16px}
.story-copy .text-link{margin-top:7px}
.motion-ready .story-row .story-copy[data-reveal]{transition-delay:80ms}
.story-home .credit-strip{margin-bottom:45px}
.story-home .home-services{padding:8px 0 48px}
.story-home .home-services .portfolio-service-link{border-bottom-color:var(--accent-text)}
.story-home .portfolio-service-link>span:first-child{display:flex;align-items:baseline;gap:18px;font:inherit}
.portfolio-service-link small{font:400 11px/1.7 var(--sans);letter-spacing:0;color:var(--muted)}
.story-home .portfolio-service-link>span:last-child{color:var(--accent-text)}
.story-home .home-social{padding-block:44px}
.story-home .social-note{max-width:480px;color:var(--muted);font-size:14px;line-height:1.8;margin:18px 0 0}
.portfolio-gateway{padding:62px 0 30px}
.portfolio-gateway .eyebrow{margin-bottom:13px}
.portfolio-lead{font-size:14px;line-height:1.8;color:var(--muted);max-width:600px;margin:18px 0 0}
.story-home .portfolio-gateway .portfolio-switch{margin-bottom:28px}
.portfolio-doors{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:30px}
.portfolio-door{text-decoration:none;min-width:0}
.portfolio-door-image{overflow:hidden;aspect-ratio:16/10;background:var(--surface-soft)}
.portfolio-door-image img{width:100%;height:100%;object-fit:cover;display:block;transform:translate3d(0,var(--drift-y,0px),0) scale(1.08);transition:filter .2s}
.portfolio-door:hover img{filter:brightness(.88)}
.portfolio-door>span{display:grid;grid-template-columns:1fr auto;gap:7px 15px;padding:18px 0;border-bottom:1px solid var(--line)}
.portfolio-door strong{font-family:var(--serif);font-size:25px;font-weight:500;letter-spacing:-.04em}
.portfolio-door small{grid-column:1;font-size:11px;color:var(--muted);line-height:1.7}
.portfolio-door b{grid-column:2;grid-row:1/3;align-self:center;font-size:25px;font-weight:400;transition:transform .2s}
.portfolio-door:hover b{transform:translate(3px,-3px)}
.portfolio-gateway>.micro{margin-top:22px}
.story-home .closing-cta p:not(.eyebrow){font-size:13px;line-height:1.8;color:var(--muted);margin:15px 0 0;max-width:450px}
.story-home .closing-cta .eyebrow{margin-bottom:12px}
@media(max-width:900px){
 .story-home .story-hero{gap:7%;grid-template-columns:1fr 1.05fr}
 .story-home .story-hero .hero-work{height:450px;box-shadow:10px 10px 0 var(--accent)}
 .story-home .story-intro h1{font-size:48px}
 .story-home .story-intro .hero-intro{font-size:15px}
 .story-row{gap:7%;padding:52px 0}
 .story-copy h2{font-size:32px}
 .story-copy p:not(.eyebrow){font-size:14px}
}
@media(max-width:720px){
 .story-home .story-hero{grid-template-columns:1fr;gap:38px;padding:20px 0 38px}
 .story-home .story-hero .hero-work{height:395px;max-width:410px;justify-self:center;padding:9px 9px 0;box-shadow:8px 8px 0 var(--accent)}
 .story-home .story-hero .hero-work-caption{height:62px;font-size:12px}
 .story-home .story-intro h1{font-size:clamp(40px,10vw,62px)}
 .story-home .story-intro .hero-intro{font-size:16px;max-width:100%}
 .story-home .story-intro .hero-note{font-size:13px}
 .story-home .story-intro .eyebrow{margin-bottom:17px}
 .story-row{grid-template-columns:1fr;gap:30px;padding:38px 0}
 .story-media{aspect-ratio:4/3}
 .story-copy h2{font-size:32px;margin-bottom:20px}
 .story-copy p:not(.eyebrow){font-size:15px;line-height:1.8;max-width:100%}
 .story-sample figcaption{padding-top:12px}
 .story-home .credit-strip{margin-bottom:32px}
 .story-home .home-services{padding-bottom:30px}
 .flow-divider svg{height:78px;width:150%;max-width:none;margin-left:-25%}
 .story-home .portfolio-service-link>span:first-child{gap:10px}
 .story-home .home-social{padding-block:32px}
 .portfolio-gateway{padding-top:38px}
 .portfolio-doors{grid-template-columns:1fr;gap:28px;margin-top:23px}
 .portfolio-door strong{font-size:24px}
 .portfolio-door small{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
 .story-home .hero-work{transform:none!important}
 .story-home [data-scroll-depth]{transform:none!important}
 .story-home .sample-open,.story-home .portfolio-door b{transition:none;transform:none!important}
 .motion-ready .story-row .story-copy[data-reveal]{transition-delay:0ms}
 .flow-frame{transform:none!important}
 .flow-trace{stroke-dashoffset:0}
 .motion-ready .story-home .story-row [data-reveal]{opacity:1;transform:none!important;transition:none!important}
}
@media(hover:none){.story-media:hover .sample-open,.portfolio-door:hover b{transform:none}}