.visual-feature{background:var(--c-surface);padding:50px 0 65px}.vf-layout{grid-template-columns:1fr 1.65fr;align-items:center;gap:50px;display:grid}.vf-copy h2{font-family:var(--font-display);letter-spacing:-.035em;font-size:clamp(28px,3.2vw,44px);line-height:1.05}.vf-copy p{color:var(--c-fg-soft);max-width:40ch;margin-top:22px;font-size:15px;line-height:1.7}.vf-copy a{text-underline-offset:5px;margin-top:24px;text-decoration:underline;display:inline-block}.vf-art{isolation:isolate;view-timeline-name:--feature;view-timeline-axis:block;min-width:0;height:410px;position:relative}.vf-part{border:1px solid var(--c-line-strong);background:var(--c-canvas);color:var(--c-fg);border-radius:8px;position:absolute;box-shadow:0 16px 30px -22px #0005}.vf-art small{color:var(--c-muted);margin-bottom:16px;font-size:12px;display:block}.vf-caption{color:var(--c-muted);text-align:right;margin-top:24px;font-size:11px}.vf-domain{text-align:center;width:60%;padding:25px;font-size:clamp(18px,2vw,26px);top:25px;left:20%}.vf-connect{fill:none;width:100%;height:100%;stroke:var(--c-accent);stroke-width:2px;position:absolute;inset:0}.vf-domain-site,.vf-domain-mail{width:43%;min-height:160px;padding:20px;top:225px}.vf-domain-site{left:3%}.vf-domain-mail{right:3%}.vf-domain-mail b{font-size:clamp(12px,1.4vw,20px);font-weight:500}.vf-domain-mail span{color:var(--c-muted);margin-top:15px;font-size:11px;display:block}.vf-mini-photo{background:url(/frontend/examples/fictional-v1/full-site.webp) 50% 40%/cover;height:65px;margin-bottom:10px}.vf-files{width:25%;padding:20px;top:90px;left:0}.vf-files span{border-top:1px solid var(--c-line);padding:12px 0;font-size:12px;display:block}.vf-server{background:var(--c-fg);width:28%;color:var(--c-canvas);padding:20px;top:40px;left:31%}.vf-server small{color:inherit}.vf-server>div{opacity:.6;border:1px solid;border-radius:4px;height:42px;margin:10px 0}.vf-server b{font-size:11px;font-weight:400}.vf-host-page{width:39%;top:140px;right:0;overflow:hidden}.vf-address{border-bottom:1px solid var(--c-line);color:var(--c-muted);padding:13px;font-size:11px}.vf-host-page .vf-mini-photo{height:125px}.vf-host-page strong,.vf-host-page>span{padding:8px 15px;display:block}.vf-host-page>span{padding-bottom:20px;font-size:11px}.vf-mail{width:83%;height:300px;top:35px;left:0;overflow:hidden}.vf-mail-sidebar{border-right:1px solid var(--c-line);background:var(--c-surface-2);width:25%;padding:20px;font-size:12px;line-height:3;position:absolute;top:45px;bottom:0;left:0}.vf-letter{margin-left:25%;padding:24px}.vf-letter h3{font-size:22px}.vf-letter p{margin-top:15px;font-size:13px;line-height:1.5}.vf-letter>div{background:var(--c-line);width:80%;height:5px;margin-top:15px}.vf-phone{aspect-ratio:390/740;border:7px solid #252525;border-radius:24px;width:24%;padding:25px 14px;font-size:12px;top:160px;right:0}.vf-phone p{margin-top:25px;line-height:1.6}.vf-phone span{color:var(--c-accent);margin-top:35px;display:block}.vf-board{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding-top:60px;display:grid}.vf-board>div{border-top:1px solid var(--c-line-strong);padding-top:20px}.vf-task{min-height:110px;margin-top:15px;padding:20px 15px;font-size:13px;position:relative}.vf-task i{background:var(--c-accent);width:35%;height:4px;margin-top:25px;display:block}.vf-brief{width:35%;padding:25px;top:15px;left:0;transform:rotate(-4deg)}.vf-brief h3{font-size:24px}.vf-brief p{margin-top:20px;font-size:13px;line-height:2}.vf-wire{width:36%;padding:20px;top:80px;left:27%;transform:rotate(3deg)}.vf-wire>div{background:var(--c-line);height:30px;margin-top:15px}.vf-wire>div:nth-child(3){height:70px}.vf-finished{width:65%;bottom:0;right:0;overflow:hidden;transform:rotate(-2deg)}.vf-finished img,.vf-work-collage img{width:100%;height:auto;display:block}.vf-work-collage>div{width:64%;overflow:hidden}.vf-work-collage>div:first-child{top:0;left:0;transform:rotate(-4deg)}.vf-work-collage>div:nth-child(2){top:95px;right:0;transform:rotate(4deg)}.vf-work-collage>div:nth-child(3){width:50%;bottom:0;left:8%;transform:rotate(-2deg)}@supports (animation-timeline:view()){.vf-part{animation:linear both vf-arrive;animation-timeline:--feature;animation-range:entry 5% entry 90%}.vf-part:nth-child(2n){--vf-x:45px}.vf-part:nth-child(odd){--vf-x:-45px}@keyframes vf-arrive{0%{translate:var(--vf-x,20px) 45px}to{translate:0}}}@media (width<=800px){.vf-layout{grid-template-columns:1fr;gap:25px}.vf-art{height:380px}.vf-copy p{max-width:55ch}.vf-domain-site,.vf-domain-mail{top:210px}.vf-phone{min-width:100px}.vf-caption{text-align:left}.vf-board{gap:8px}.vf-task{padding:18px 10px;font-size:12px}.vf-brief{padding:15px}.vf-brief h3{font-size:20px}.vf-wire{padding:15px}.vf-work-collage>div{width:80%}.vf-work-collage>div:nth-child(3){width:65%}}@media (prefers-reduced-motion:reduce){.vf-part{animation:none!important}}:root[data-motion=off] .vf-part{animation:none!important}.vf-art{overflow:clip}.vf-phone{aspect-ratio:auto;height:240px;top:140px}.vf-phone span{margin-top:22px}@media (width<=800px){.vf-art{height:440px}.vf-phone{width:30%;height:270px;padding:20px 10px;top:145px}.vf-phone p{margin-top:18px}.vf-letter{padding:20px}.vf-letter p{font-size:12px}.vf-host-page{width:40%}}