.os-page{background:#f0f9ff}.os-shell{min-height:100svh;background:radial-gradient(ellipse at 72% 12%,#d2f1ff88,transparent 59%),linear-gradient(125deg,#f8fcff,#edf9ff 60%,#f8fcff)}
.os-header{height:76px;background:transparent;padding:0 6.8%;gap:54px}.os-header .brand{font-size:33px;letter-spacing:-1.6px}.os-header .desktop-nav{gap:36px}.os-header .desktop-nav a{font-weight:400;font-size:13px;position:relative;white-space:nowrap}.os-header .desktop-nav .os-current{font-weight:700}.os-current:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:#087bff}.os-header .contact{min-width:175px;padding:12px 22px;background:#f7fcff70}
.os-hero{position:relative;isolation:isolate;display:flex;align-items:center;aspect-ratio:1024 / 310;min-height:0;padding:0 6.8% 15px;overflow:visible;background:radial-gradient(ellipse at 75% 74%,#c8efff55,transparent 65%)}
.os-hero:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('assets/footer-clean-silk.svg') center / 100% 100% no-repeat;opacity:.45;transform:scaleY(-1)}
.os-copy{position:relative;z-index:2;width:51%;padding-bottom:12px;pointer-events:none}.os-copy h1{font-size:clamp(37px,5.55vw,100px);line-height:1.04;letter-spacing:-2.9px;font-weight:750;margin:0 0 15px;text-wrap:nowrap}.os-copy>p{font-size:clamp(17px,1.77vw,31px);line-height:1.3;letter-spacing:-.2px;color:#425f94;margin:0 0 17px}.os-cta{display:inline-flex;align-items:center;justify-content:center;gap:24px;pointer-events:auto;padding:13px 25px;font-size:clamp(13px,1.22vw,21px);font-weight:500;min-height:45px;box-shadow:none}
.os-art{position:absolute;z-index:1;right:0;top:-5px;width:49.05%;aspect-ratio:502 / 325;pointer-events:none;mask-image:linear-gradient(to right,transparent,#000 5%);-webkit-mask-image:linear-gradient(to right,transparent,#000 5%)}.os-art img{display:block;width:100%;height:auto;max-width:none}.os-art:after{content:'';position:absolute;inset:auto 0 -1px;height:5%;background:linear-gradient(transparent,#edf9ff80)}
@media(min-width:1500px){.os-header{height:100px}.os-header .brand{font-size:43px}.os-header .desktop-nav a{font-size:16px}.os-header .desktop-nav{gap:46px}.os-header .contact{font-size:16px;min-width:220px;padding:15px 26px}.os-copy h1{margin-bottom:23px}.os-copy>p{margin-bottom:25px}.os-cta{padding:17px 33px;min-height:58px}}
@media(min-width:901px) and (max-width:1150px){.os-header{height:66px;gap:38px}.os-header .desktop-nav{gap:28px}.os-header .brand{font-size:30px}.os-header .desktop-nav a{font-size:12px}.os-header .contact{min-width:145px;font-size:12px;padding:10px 17px}.os-copy h1{font-size:5.55vw;letter-spacing:-2.2px}.os-copy>p{font-size:1.77vw}.os-cta{font-size:13px;padding:12px 23px}}
@media(max-width:900px){.os-header{height:76px;padding:0 max(22px,env(safe-area-inset-left));gap:18px}.os-header .brand{font-size:30px}.os-hero{aspect-ratio:auto;display:flex;flex-direction:column;align-items:stretch;padding:38px 6.8% 0;min-height:0}.os-copy{width:100%;padding:0;max-width:680px;margin:0 auto}.os-copy h1{font-size:clamp(38px,7.5vw,66px);line-height:1.05;letter-spacing:-1.9px;text-wrap:balance;margin-bottom:20px}.os-copy>p{font-size:clamp(17px,2.6vw,22px);line-height:1.45;max-width:560px;margin-bottom:24px}.os-desktop-break{display:none}.os-cta{font-size:15px;min-height:49px;padding:14px 25px}.os-art{position:relative;top:auto;right:auto;width:calc(100% + 15.73%);margin:18px -7.865% 0;max-width:none;aspect-ratio:502 / 325;mask-image:linear-gradient(to bottom,transparent,#000 5%,#000 96%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 5%,#000 96%,transparent)}.os-art img{height:auto}.os-art:after{display:none}}
@media(max-width:480px){.os-hero{padding:27px 22px 0}.os-copy h1{font-size:clamp(32px,8.7vw,43px);letter-spacing:-1.3px;line-height:1.08}.os-copy>p{font-size:17px;margin-bottom:23px}.os-art{width:calc(100% + 44px);margin:25px -22px 0}.os-cta{gap:20px;font-size:14px;min-height:48px}.os-header{height:72px}}
@media(prefers-reduced-motion:reduce){.os-page *{scroll-behavior:auto}}
/* Keep the full sculpture above the hero instead of slicing it at the header. */
.os-shell{background-color:#eef9ff;background-image:url('assets/shmat-os-silk.svg');background-position:center top;background-size:100% auto;background-repeat:no-repeat}
.os-header{--os-header-height:76px;background:transparent}
.os-hero{background:none;isolation:auto;aspect-ratio:1024 / 310}
.os-hero:before{display:none}
.os-copy{z-index:2}
.os-art{top:-76px;width:49.0234375%;aspect-ratio:502 / 370;mask-image:linear-gradient(to right,transparent,#000 8%,#000);-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000)}
.os-art img{width:100%;height:auto}
.os-art:after{display:none}
@media(min-width:1500px){.os-art{top:-100px}}
@media(min-width:901px) and (max-width:1150px){.os-art{top:-66px}}
@media(max-width:900px){.os-hero{aspect-ratio:auto}.os-art{top:auto;width:calc(100% + 15.73%);aspect-ratio:502 / 370;margin:8px -7.865% 0;mask-image:linear-gradient(to bottom,transparent,#000 5%,#000 90%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 5%,#000 90%,transparent)}}
@media(max-width:480px){.os-art{width:calc(100% + 44px);margin:12px -22px 0}}