.hero-work .version{font:10px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:1.1px}
.hero-work .work-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;gap:10px}
.hero-work .version{font-size:9px;letter-spacing:.6px;color:var(--muted)}
.hero-work .browser{background:#e5e2d9;border:1px solid #bcb9af;border-radius:10px;overflow:hidden;box-shadow:0 22px 45px -25px #33352c60;transform:perspective(1400px) rotateY(calc(-3deg + 3deg * var(--p)));transform-origin:left center}
.hero-work .chrome{height:35px;display:flex;align-items:center;gap:12px;padding:0 13px;border-bottom:1px solid #ccc9c1;background:#e9e7df}
.hero-work .dots{display:flex;gap:4px}
.hero-work .dots i{width:5px;height:5px;border:1px solid #9f9f97;border-radius:50%}
.hero-work .address{font:8px ui-monospace,monospace;color:#76766b;text-align:center;flex:1}
.hero-work .window-icon{font-size:12px}
.hero-work .site-canvas{position:relative;height:402px;overflow:hidden}
.hero-work .old-site{position:absolute;inset:0;background:#e6e6e6;padding:18px 36px;color:#161616;font-family:"Times New Roman",serif}
.hero-work .old-inner{background:#fff;min-height:100%;border:2px outset #ddd;text-align:center;padding:13px 17px 9px}
.hero-work .old-title{font-size:22px;font-weight:bold;color:navy}
.hero-work .old-inner>em{font-size:11px}
.hero-work .old-nav{display:flex;justify-content:center;gap:4px;margin:13px 0 9px}
.hero-work .old-nav span{font:10px "Times New Roman",serif;background:#d2d0cc;border:2px outset #e3e1dc;padding:4px 8px}
.hero-work .old-inner hr{border:0;border-top:1px solid #aaa}
.hero-work .old-inner h3{text-align:left;font-size:13px;margin:9px 0 3px}
.hero-work .old-inner p{text-align:left;font-size:11px;line-height:1.4;margin:0 0 7px}
.hero-work .old-inner u{color:blue}
.hero-work .old-photo{float:right;width:97px;margin:4px 0 7px 12px;border:4px ridge #bebcae}
.hero-work .old-photo img{height:71px;width:100%;object-fit:cover;filter:saturate(.4)}
.hero-work .old-photo span{font-size:8px}
.hero-work .old-construction{clear:both;color:#8c1b19;background:#ffffbd;font-size:9px;padding:7px;margin-top:8px}
.hero-work .old-footer{font-size:8px;line-height:1.8;margin-top:12px;color:#6b6b6b}
.hero-work .old-footer b{font-family:monospace;letter-spacing:2px;background:#111;color:#0f0;padding:2px 3px}
.hero-work .new-site{position:absolute;inset:0;background:#f7f0df;color:#432c1e;clip-path:inset(0 var(--reveal) 0 0)}
.hero-work .bakery-nav{height:57px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 25px;border-bottom:1px solid #47302123}
.hero-work .bakery-nav b{font:bold 25px Georgia,serif;letter-spacing:-1px}
.hero-work .bakery-nav b>span{font-size:27px}
.hero-work .bakery-nav>span{font-size:8px}
.hero-work .bakery-grid{display:grid;grid-template-columns:1fr 47%;height:307px}
.hero-work .bakery-copy{padding:27px 12px 0 25px;position:relative}
.hero-work .bakery-kicker{display:block;font:6px ui-monospace,monospace;letter-spacing:.8px;margin-bottom:14px}
.hero-work .bakery-copy h2{font:normal clamp(25px,2.35vw,40px)/1.05 Georgia,serif;letter-spacing:-1.2px}
.hero-work .bakery-copy h2 em{font-weight:normal}
.hero-work .bakery-copy>p{font-size:8px;line-height:1.65;margin-top:12px}
.hero-work .bakery-button{background:#5e2e1c;color:#fff2d5;font-size:8px;padding:12px 11px;display:flex;justify-content:space-between;max-width:139px;margin-top:17px}
.hero-work .bakery-note{display:flex;gap:9px;align-items:center;margin-top:24px;font-size:7px;line-height:1.3}
.hero-work .bakery-note>span{font-size:26px}
.hero-work .bakery-photo{position:relative;overflow:hidden}
.hero-work .bakery-photo>img{width:100%;height:100%;object-fit:cover}
.hero-work .photo-stamp{position:absolute;right:12px;bottom:15px;background:#eecb65;color:#432c1e;display:flex;flex-direction:column;text-align:center;align-items:center;justify-content:center;border-radius:50%;width:66px;height:66px;font:9px/1.1 ui-monospace,monospace;transform:rotate(9deg);border:1px solid #fcebbe;outline:3px solid #eecb65}
.hero-work .photo-stamp>span{font-size:16px}
.hero-work .bakery-footer{height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 25px;gap:10px;font-size:6px;letter-spacing:.6px;border-top:1px solid #47302123}
.hero-work .bakery-footer>span:last-child{font:italic 9px Georgia,serif;letter-spacing:0}
.hero-work .reveal-line{position:absolute;top:0;bottom:0;left:calc(100% - var(--reveal));width:2px;background:var(--accent);opacity:0;pointer-events:none}
.hero-work .reveal-line span{position:absolute;top:12px;right:0;background:var(--accent);color:#fff;font:7px monospace;letter-spacing:.5px;padding:6px;white-space:nowrap}
.hero-work .demo-bottom{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-top:15px}
.hero-work .demo-bottom>span{font-size:9px;line-height:1.6;color:var(--muted)}
.hero-work .view-switch{display:flex;border:1px solid #c9c6bb;border-radius:25px;padding:3px;flex-shrink:0}
.hero-work .view-switch button{background:none;border:0;border-radius:20px;font-size:10px;padding:9px 15px;min-height:36px}
.hero-work .view-switch button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.hero-work .progress-track{height:2px;background:#d9d5ca;margin-top:22px}
.hero-work .progress-track>span{display:block;height:100%;width:0;background:var(--accent)}
.hero-work .transformation-caption{margin-top:11px;display:flex;align-items:center;justify-content:space-between;min-height:25px;gap:10px;font-size:10px;color:var(--muted)}
.hero-work .transformation-caption button{font-size:10px;background:transparent;border:0;text-decoration:underline;padding:8px}
@media(min-width:1600px){.hero-work .site-canvas{height:475px}
.hero-work .bakery-grid{height:380px}
.hero-work .bakery-copy{padding-top:40px}
.hero-work .old-site{padding:25px 50px}
.hero-work .old-inner{padding:25px}
.hero-work .old-inner p{font-size:14px}
.hero-work .old-photo{width:130px}
.hero-work .old-photo img{height:110px}}
@media(max-width:1100px){.hero-work .old-site{padding:15px 17px}
.hero-work .bakery-copy{padding-left:18px}
.hero-work .bakery-nav{padding:0 18px}
.hero-work .bakery-copy h2{font-size:27px}}
@media(max-width:760px){.hero-work .work-heading{padding-top:20px;background:var(--paper);margin-bottom:11px}
.hero-work .work-heading .eyebrow{font-size:8px;letter-spacing:.7px}
.hero-work .version{font-size:8px}
.hero-work .browser{transform:none}
.hero-work .site-canvas{height:382px}
.hero-work .chrome{height:31px}
.hero-work .old-site{padding:16px}
.hero-work .old-inner{padding:12px}
.hero-work .old-title{font-size:20px}
.hero-work .old-inner p{font-size:11px}
.hero-work .old-nav span{padding:4px}
.hero-work .old-photo{width:90px}
.hero-work .old-inner h3{font-size:12px}
.hero-work .bakery-nav{height:49px;padding:0 16px}
.hero-work .bakery-nav b{font-size:21px}
.hero-work .bakery-nav>span{font-size:6px}
.hero-work .bakery-nav b>span{font-size:22px}
.hero-work .bakery-grid{height:299px;grid-template-columns:53% 47%}
.hero-work .bakery-copy{padding:28px 10px 0 16px}
.hero-work .bakery-copy h2{font-size:27px;letter-spacing:-1px}
.hero-work .bakery-kicker{font-size:5px;letter-spacing:.3px}
.hero-work .bakery-button{padding:12px 8px;font-size:7px}
.hero-work .bakery-copy>p{font-size:7px}
.hero-work .bakery-note{font-size:6px}
.hero-work .bakery-footer{height:34px;padding:0 15px;font-size:4px;letter-spacing:.3px}
.hero-work .bakery-footer>span:last-child{font-size:7px}
.hero-work .photo-stamp{width:54px;height:54px;font-size:7px;bottom:22px;right:10px}
.hero-work .demo-bottom{margin-top:13px;gap:6px}
.hero-work .demo-bottom>span{font-size:8px;max-width:190px}
.hero-work .view-switch button{font-size:9px;padding:8px 12px;min-height:40px}
.hero-work .progress-track{margin-top:16px}
.hero-work .transformation-caption{font-size:9px;line-height:1.4}
.hero-work .mobile-pin{position:sticky;top:15px}}
@media(prefers-reduced-motion:reduce){.hero-work .mobile-pin{position:relative;top:auto}
.hero-work .browser{transform:none}}