.web-style-intro{position:relative;min-height:640px;height:calc(100svh - 98px);overflow:hidden;isolation:isolate}
.intro-caption{position:absolute;top:24px;left:5vw;right:5vw;display:flex;justify-content:space-between;align-items:center;z-index:2;gap:20px;font-size:11px;letter-spacing:.15em;color:#74776e}
.style-motion-toggle{font:inherit;letter-spacing:.04em;color:inherit;background:none;border:1px solid #7775;border-radius:24px;padding:8px 14px;cursor:pointer}
.style-stream{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:100%;min-width:1100px;height:auto;overflow:visible}
.style-stream-text,.style-measure{font-family:Arial,Helvetica,sans-serif;font-size:104px;font-weight:900;letter-spacing:-5px;fill:#20221f}
.intro-next{position:absolute;bottom:30px;left:5vw;right:5vw;display:flex;justify-content:space-between;text-decoration:none;font-size:13px;color:#62655d}.intro-next span{font-size:24px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#web-design-details{scroll-margin-top:40px;padding-bottom:90px}
@media(max-width:600px){.web-style-intro{min-height:540px}.intro-caption{font-size:9px;letter-spacing:.08em}.style-stream{min-width:1000px}}

.style-stream{transition:opacity .4s,filter .4s}.show-gallery .style-stream{opacity:0;filter:blur(8px);pointer-events:none}
.style-gallery{position:relative;width:min(1180px,90%);margin:85px auto 80px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;visibility:hidden}
.style-card{margin:0;opacity:0;transform:translateY(65px) scale(.75) rotate(-4deg);transition:opacity .5s,transform .75s cubic-bezier(.2,1.3,.4,1);transition-delay:calc(var(--i)*.12s)}
.style-card img{display:block;width:100%;aspect-ratio:5/3;border-radius:9px;box-shadow:0 14px 26px #0002;border:1px solid #0001}.style-card figcaption{margin-top:10px;font-size:12px;color:#63665f}
.show-gallery .style-gallery{visibility:visible}.show-gallery .style-card{opacity:1;transform:translateY(0) scale(1) rotate(0)}
.web-style-intro.show-gallery{height:auto;min-height:calc(100svh - 98px)}
@media(max-width:700px){.style-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px}}
@media(prefers-reduced-motion:reduce){.style-card,.style-stream{transition:none}}

/* Reference: three parallel curved lanes, with independently timed sweeps. */
.style-stream{position:absolute;inset:0;width:100%;min-width:0;height:100%;transform:none;overflow:hidden}
.style-lane{position:absolute;left:-100px;top:15%;width:calc(100% + 200px);height:100%;overflow:visible}
.style-stream-text{font-size:30px;font-weight:900;letter-spacing:-1px;fill:#20221f}
@media(max-width:600px){.style-stream{min-width:0}.style-lane{left:-160px;width:calc(100% + 320px);top:10%}.style-stream-text{font-size:29px}}

/* Give each moving style name more breathing room. */
.style-stream-text{font-size:25px;font-weight:800;letter-spacing:.25px;word-spacing:5px}
@media(max-width:600px){.style-stream-text{font-size:24px;letter-spacing:.2px;word-spacing:4px}}

.style-stream-text{font-size:22px;font-weight:750;letter-spacing:.6px;word-spacing:7px}
@media(max-width:600px){.style-stream-text{font-size:21px;letter-spacing:.4px;word-spacing:6px}}

.web-style-intro .style-stream{display:none}
.web-entry-transition{position:fixed;inset:0;z-index:1000;pointer-events:none;overflow:hidden;display:flex;align-items:center;justify-content:center}
.entry-white-circle{position:absolute;inset:0;background:#fff;clip-path:circle(0% at 0% 100%)}
.entry-word{position:relative;opacity:0;white-space:nowrap;font-family:Arial,Helvetica,sans-serif;font-size:clamp(88px,20vw,320px);font-weight:900;letter-spacing:-.075em;line-height:1;color:#191b19}

.entry-stream{position:absolute;inset:0;overflow:hidden;opacity:0;pointer-events:none}.entry-stream .style-lane{top:0}

/* Stacked image gallery: only the photo treatment from the reference. */
.style-gallery{display:block;position:relative;width:100%;height:440px;margin:100px auto 60px;--spread:clamp(55px,12.3vw,160px);--photo-width:clamp(150px,22vw,240px)}
.style-gallery::before{content:"";position:absolute;inset:45% 8% 0;background:linear-gradient(90deg,#57534e17 1px,transparent 1px),linear-gradient(#57534e17 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse at 50% 0,#000,transparent 70%);pointer-events:none}
.style-gallery .style-card{position:absolute;left:50%;top:65px;width:var(--photo-width);margin:0;z-index:var(--layer);opacity:0;transform:translate(-50%,0);transition:transform .95s cubic-bezier(.22,1.25,.4,1),opacity .4s;transition-delay:calc(var(--i)*.15s)}
.show-gallery .style-gallery .style-card{opacity:1;transform:translate(calc(-50% + var(--slot)*var(--spread)),var(--lift))}
.style-card:has(.gallery-photo:hover),.style-card:has(.gallery-photo:focus-visible),.style-card:has(.is-dragging){z-index:100}
.gallery-photo{--drag-x:0px;--drag-y:0px;position:relative;transform:translate(var(--drag-x),var(--drag-y)) rotate(var(--angle));transition:transform .6s cubic-bezier(.2,1.4,.4,1);cursor:grab;touch-action:pan-y;user-select:none;outline-offset:8px;border-radius:20px}
.gallery-photo:hover,.gallery-photo:focus-visible{transform:translate(var(--drag-x),var(--drag-y)) rotate(var(--angle)) scale(1.1)}
.gallery-photo.is-dragging{cursor:grabbing;transition:none;transform:translate(var(--drag-x),var(--drag-y)) rotate(var(--angle)) scale(1.12)}
.style-gallery .style-card img{width:100%;aspect-ratio:1;object-fit:cover;object-position:center;border-radius:20px;box-shadow:0 10px 26px #0002;pointer-events:none}
@media(max-width:600px){.style-gallery{height:360px;--spread:clamp(32px,9vw,54px);--photo-width:clamp(130px,36vw,175px);margin-top:85px}.style-gallery .style-card{top:60px}}
@media(prefers-reduced-motion:reduce){.style-gallery .style-card,.gallery-photo{transition:none}}

/* Four real portfolio previews, with the original fan-out and drag interaction. */
.style-gallery{--spread:clamp(78px,20vw,270px);--photo-width:clamp(195px,29vw,360px)}
.style-gallery .style-card img{aspect-ratio:1.15;object-position:top center}
@media(max-width:600px){.style-gallery{--spread:clamp(46px,18vw,105px);--photo-width:clamp(155px,44vw,225px)}}

.style-gallery .gallery-photo{background:#171918;overflow:hidden;box-shadow:0 10px 26px #0002}
.style-gallery .style-card video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;border-radius:18px;pointer-events:none}

/* Size the phone showcase to its cards, not the full viewport. */
@media (max-width:700px) {
 .web-style-intro,
 .web-style-intro.show-gallery { height:auto; min-height:0; padding:24px 0 20px; }
 .intro-caption { position:relative; top:auto; left:auto; right:auto; margin:0 24px; }
 .web-style-intro .style-gallery { height:clamp(190px,52vw,290px); margin:28px auto 12px; }
 .web-style-intro .style-gallery .style-card { top:24px; }
 .intro-next { position:relative; bottom:auto; left:auto; right:auto; margin:0 24px; padding:14px 0; border-top:1px solid #62655d25; align-items:center; }
 #web-design-details.web-approach { padding-top:32px; }
}