/* A real, isolated website becomes the visual story. */
.web-story{position:relative;background:#080b0b;color:#f4f4ee;isolation:isolate;scroll-margin-top:0;--web-accent:#c3cb9b}
.web-story.web-enhanced{height:470svh}
.web-sticky{position:relative;min-height:760px;height:100svh;max-height:1200px;padding:110px max(5vw,24px) 27px;display:flex;flex-direction:column;gap:20px;overflow:hidden}
.web-enhanced .web-sticky{position:sticky;top:0;min-height:640px}
.web-heading,.web-caption,.web-footer{position:relative;z-index:3;width:100%;max-width:1280px;margin:0 auto}
.web-product-line{display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.15em;font-weight:500}
.web-product-line>span:first-child{color:#7c857a}.web-product-line>span:last-child{letter-spacing:0;color:#9ca299;font-weight:400}.web-product-line i{height:12px;width:1px;background:#3d433a}
.web-heading-row{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:17px}
.web-heading h2{font-size:clamp(32px,4vw,60px);line-height:1.12;font-weight:500;letter-spacing:-.05em;margin:0}.web-heading h2 span{color:#9ba58b}.web-heading>p{font-size:12px;color:#9ca39a;margin-top:12px;line-height:1.6}
.web-mobile-break{display:none}.web-project-link{color:#e0e8d2;flex-shrink:0;display:flex;gap:22px;align-items:center;padding:12px 18px;border:1px solid #89937570;border-radius:30px;font-size:11px;text-decoration:none;background:#bdcaa809;transition:background .2s}.web-project-link:hover{background:#bdcaa820}.web-project-link>span{font-size:18px;color:var(--web-accent)}
.web-stage{position:relative;flex:1;min-height:240px;width:100%;max-width:1300px;margin:0 auto;perspective:1600px;isolation:isolate}
.web-ambient{position:absolute;inset:-15% -10%;background:radial-gradient(ellipse at 50% 50%,#83947320,transparent 62%);pointer-events:none}
.web-ambient::before,.web-ambient::after{content:'';position:absolute;left:50%;top:50%;width:85%;height:60%;border:1px solid #c3cb9b0b;border-radius:50%;transform:translate(-50%,-50%) rotate(-18deg)}.web-ambient::after{transform:translate(-50%,-50%) rotate(18deg);width:70%;height:80%}
.web-stage-label{position:absolute;top:20%;left:1%;font-size:11px;letter-spacing:.12em;color:#c3cb9b}.web-stage-label>span{display:block;font-size:7px;letter-spacing:.18em;color:#747f70;margin-top:9px}
.web-browser{position:absolute;left:50%;top:50%;width:800px;border:1px solid #b5c5a536;border-radius:12px;background:#243e38;box-shadow:0 36px 90px #0008,0 0 60px #93a7740b;overflow:hidden;transform:translate(-50%,-50%);transform-origin:center;will-change:transform}
.web-browser-bar{height:32px;background:#1b211d;display:flex;align-items:center;justify-content:space-between;padding:0 13px;gap:20px;border-bottom:1px solid #a6b9951a}.web-window-dots{display:flex;gap:5px}.web-window-dots i{width:5px;height:5px;border-radius:50%;background:#67705e}.web-window-dots i:first-child{background:#b87867}.web-window-dots i:nth-child(2){background:#b6aa71}.web-address{width:45%;text-align:center;font-size:8px;letter-spacing:.04em;color:#a4af9a;padding:3px;background:#ffffff05;border-radius:4px}.web-browser-plus{color:#a4af9a;font-size:13px}
.web-browser-screen{height:520px;overflow:hidden;position:relative}.web-browser iframe{width:1200px;height:780px;border:0;display:block;transform:scale(.666666667);transform-origin:0 0;pointer-events:none;background:#243e38}
.web-preview-fallback{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:28px;background:#243e38;pointer-events:none}.web-preview-fallback img{width:80%}.web-preview-fallback span{font-size:16px;color:#f4efdf}.web-browser.is-loaded .web-preview-fallback{display:none}
.web-phone{position:absolute;left:73%;top:50%;height:410px;width:205px;padding:6px;border:1px solid #b4baa360;background:#1b211d;border-radius:29px;box-shadow:0 24px 60px #0009;opacity:0;transform:translate(-50%,-50%);will-change:transform;overflow:hidden}
.web-phone-screen{position:relative;height:100%;overflow:hidden;border-radius:23px;background:#243e38}.web-phone iframe{position:absolute;top:27px;left:0;width:390px;height:746px;border:0;display:block;transform:scale(.49);transform-origin:0 0;pointer-events:none;background:#243e38}.web-phone-island{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:#101610;width:58px;height:14px;border-radius:15px}.web-phone-home{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);width:58px;height:3px;border-radius:4px;background:#f4efdf90}
.web-design-note{position:absolute;display:flex;align-items:center;gap:10px;font-size:9px;color:#9fab95;letter-spacing:.02em}.web-design-note--top{right:3%;top:20%}.web-design-note--top i{width:5px;height:5px;background:#c3cb9b;border-radius:50%;box-shadow:0 0 12px #c3cb9b60}.web-design-note--bottom{bottom:10%;left:3%}.web-design-note--bottom i{font-style:normal;font-size:20px}.web-size-label{position:absolute;bottom:5%;right:8%;font-size:8px;letter-spacing:.15em;color:#b0bb9c;opacity:0}.web-size-label i{font-style:normal;margin:0 17px}
.web-caption{display:flex;align-items:center;gap:22px;min-height:58px}.web-step-count{font-size:10px;letter-spacing:.1em;color:#96a57e;white-space:nowrap}.web-caption h3{font-size:18px;letter-spacing:-.025em;font-weight:500;margin:0 0 6px}.web-caption p{font-size:11px;line-height:1.6;color:#929c8d;margin:0}.web-caption-tag{margin-left:auto;font-size:9px;color:#8c9786;white-space:nowrap}
.web-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #bacba41a;padding-top:16px}.web-footer>p{font-size:8px;color:#88937e;text-align:right}.web-step-nav{display:flex;gap:26px}.web-step-nav button{color:#7f8a78;background:none;border:0;font:inherit;font-size:10px;cursor:pointer;padding:5px 0;white-space:nowrap}.web-step-nav button>span{font-size:8px;margin-right:8px;opacity:.5}.web-step-nav button[aria-pressed=true]{color:#dae4c2}.web-step-nav button:hover{color:#e8eddd}.web-step-nav[hidden]{display:none}
.web-progress{height:2px;position:absolute;bottom:0;left:0;right:0;background:#b2c29b10}.web-progress i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#61734b,#d0dcb0);transform:scaleX(0);transform-origin:left}
.web-noscript{font-size:12px;color:#a8b099}.studio-section__links{flex-wrap:wrap}
@media(max-width:1000px){.web-stage-label,.web-design-note{display:none}.web-caption-tag{display:none}.web-heading-row{gap:16px}.web-heading h2{font-size:clamp(30px,4.5vw,46px)}.web-step-nav{gap:16px}.web-footer{align-items:flex-start;flex-direction:column;gap:8px}.web-footer>p{text-align:left}.web-sticky{gap:17px}}
@media(max-width:600px){.web-sticky{padding:96px 20px 22px;gap:16px;min-height:720px}.web-enhanced .web-sticky{min-height:620px}.web-heading-row{display:block;margin-top:18px}.web-heading h2{font-size:35px;line-height:1.1}.web-mobile-break{display:block}.web-product-line{font-size:8px;gap:9px;letter-spacing:.12em}.web-product-line>span:last-child{font-size:8px}.web-heading>p{font-size:11px;max-width:330px}.web-project-link{position:relative;display:inline-flex;margin-top:16px;padding:7px 12px;font-size:10px;gap:16px}.web-stage{min-height:210px;margin-top:-8px}.web-caption{gap:13px;align-items:flex-start;min-height:90px}.web-step-count{font-size:8px;margin-top:5px}.web-caption h3{font-size:16px;line-height:1.3}.web-caption p{font-size:10px;max-width:260px}.web-footer{padding-top:10px;gap:12px}.web-step-nav{width:100%;justify-content:space-between;gap:8px}.web-step-nav button{font-size:8px;white-space:normal;text-align:left}.web-step-nav button>span{display:block;margin:0 0 5px;font-size:7px}.web-footer>p{font-size:7px}.web-size-label{bottom:0;right:6%;font-size:6px}.web-story.web-enhanced{height:400svh}}
@media (prefers-reduced-motion:reduce){.web-story.web-enhanced{height:auto}.web-enhanced .web-sticky,.web-sticky{position:relative;height:auto;max-height:none;min-height:0}.web-stage{flex:none;height:440px}.web-browser,.web-phone{will-change:auto}}html[data-short-viewport="true"] .web-story.web-enhanced{height:auto}html[data-short-viewport="true"] .web-enhanced .web-sticky,html[data-short-viewport="true"] .web-sticky{position:relative;height:auto;max-height:none;min-height:0}html[data-short-viewport="true"] .web-stage{flex:none;height:440px}html[data-short-viewport="true"] .web-browser,html[data-short-viewport="true"] .web-phone{will-change:auto}
@media (max-width:600px) and (prefers-reduced-motion:reduce){.web-stage{height:270px}}@media (max-width:600px){html[data-short-viewport="true"] .web-stage{height:270px}}

/* The static fallback remains proportionate without script. */
.web-story:not(.web-enhanced) .web-browser{width:min(800px,95%)}
.web-story:not(.web-enhanced) .web-browser-screen{height:auto;aspect-ratio:800/520}
.web-story:not(.web-enhanced) .web-browser iframe{display:none}
.web-story:not(.web-enhanced) .web-stage{flex:none;height:clamp(260px,45vw,560px)}
.web-story:not(.web-enhanced) .web-sticky{height:auto;max-height:none}
.web-story:not(.web-enhanced) .web-preview-fallback span{font-size:clamp(10px,1.3vw,16px)}

/* Keep website content below the simulated system area. */
.web-phone-status{position:absolute;top:13px;left:20px;right:17px;height:12px;display:flex;align-items:center;justify-content:space-between;color:#f4efdf;pointer-events:none}
.web-phone-status>span{font-size:6px;font-weight:600;letter-spacing:.02em}
.web-phone-status svg{width:22px;height:8px}
.web-size-label{bottom:auto;right:auto;white-space:nowrap;transform:translateX(-50%)}

/* An actual parent-page hit target stops Safari routing gestures into iframes. */
.web-browser-screen::after,.web-phone-screen::after{content:'';position:absolute;inset:0;z-index:10;background:transparent;pointer-events:auto;touch-action:pan-y pinch-zoom}