/* Single component stylesheet for Studio and app pages. */
@font-face{font-family:Inter;src:url(fonts/inter.ttf);font-weight:100 900;font-display:swap}
@font-face{font-family:Caveat;src:url(fonts/caveat.ttf);font-weight:400 700;font-display:swap}
.studio-header,.studio-footer{box-sizing:border-box;color:#0f3b3a;font:400 17px/1.7 Inter,sans-serif;letter-spacing:normal}
.studio-header *,.studio-footer *{box-sizing:border-box}
.studio-header{display:flex;align-items:center;justify-content:space-between;gap:35px;width:100%;max-width:none;margin:0;padding:28px max(clamp(20px,5vw,72px),calc((100% - 1240px)/2)) 18px;min-height:98px;z-index:30;background:transparent}
.studio-header .studio-identity{display:block;width:180px;flex:none;margin-right:auto;text-decoration:none}
.shared-logo{display:block;width:100%;aspect-ratio:177/45;background:url(/studio-assets/approved-design.png) no-repeat;background-size:var(--art-size);background-position:var(--art-x) var(--art-y)}
.studio-header nav,.studio-footer nav{display:flex;align-items:center;gap:25px;flex-wrap:wrap;margin:0;padding:0;border:0;background:none;width:auto}
.studio-header nav a,.studio-footer nav a{font:400 14px/1.7 Inter,sans-serif;text-decoration:none;color:#0f3b3a;letter-spacing:normal;padding:0}
.studio-header a:focus-visible,.studio-footer a:focus-visible,.studio-menu-toggle:focus-visible{outline:3px solid #14514d;outline-offset:5px}
.studio-menu-toggle{display:none}
.studio-footer{display:flex;align-items:center;flex-wrap:wrap;gap:25px;max-width:1384px;margin:0 auto;padding:35px clamp(20px,5vw,72px);border-top:1px solid #e7e0d6;background:transparent;min-height:0}
.studio-footer .footer-logo{display:block;width:145px;flex:none}
.studio-footer p{font:600 22px/1.4 Caveat,cursive;margin:0 auto 0 0;color:#0f3b3a}
.studio-footer small{font:400 11px/1.5 Inter,sans-serif;color:#0f3b3a}
.app-information{display:flex;justify-content:center;flex-wrap:wrap;gap:24px;padding:24px 20px;border-top:1px solid #dedfd5;font:14px/1.5 Inter,sans-serif}
.app-information a{color:#0f3b3a}
@media(min-width:761px){body:has(>.studio-header){padding-top:98px}.studio-header{position:absolute;top:0;left:0;right:0}.studio-header.nav-returning{position:fixed;background:rgba(250,248,242,.98);box-shadow:0 1px 14px #1111110d;animation:studio-nav-return .18s ease-out}.studio-home .studio-header,.studio-contact .studio-header{mix-blend-mode:multiply}.studio-header.nav-returning{mix-blend-mode:normal}}
@keyframes studio-nav-return{from{transform:translateY(-100%)}to{transform:translateY(0)}}
@media(max-width:760px){.studio-header{position:relative;padding:22px clamp(20px,5vw,72px);min-height:88px;gap:20px;flex-wrap:nowrap}.studio-header .studio-identity{width:135px}.studio-menu-toggle{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:86px;min-height:44px;border:1px solid #cbd2c6;border-radius:10px;background:transparent;color:#0f3b3a;font:500 14px Inter,sans-serif;padding:8px 12px}.menu-bars{position:relative;width:18px;height:2px;background:currentColor}.menu-bars:before,.menu-bars:after{content:'';position:absolute;width:18px;height:2px;background:currentColor;left:0}.menu-bars:before{top:-5px}.menu-bars:after{top:5px}.mobile-menu-open .menu-bars{background:transparent}.mobile-menu-open .menu-bars:before{top:0;transform:rotate(45deg)}.mobile-menu-open .menu-bars:after{top:0;transform:rotate(-45deg)}.studio-header #studio-navigation{display:none;position:absolute;top:calc(100% - 2px);left:clamp(20px,5vw,72px);right:clamp(20px,5vw,72px);width:auto;margin:0;padding:12px;background:#fbf8f3;border:1px solid #dedfd5;border-radius:12px;box-shadow:0 12px 30px #193d3514}.studio-header.mobile-menu-open #studio-navigation{display:flex;flex-direction:column;align-items:stretch;gap:0}.studio-header #studio-navigation a{display:flex;align-items:center;min-height:48px;padding:12px;font-size:16px}.studio-footer{align-items:flex-start;gap:25px;padding:30px clamp(20px,5vw,72px)}.studio-footer nav{width:100%;gap:18px}.studio-footer .footer-logo{width:120px}}
@media(prefers-reduced-motion:reduce){.studio-header.nav-returning{animation:none}}

@media(min-width:761px){.studio-header{height:98px}}
@media(max-width:760px){.studio-header{height:88px}}

.studio-header .shared-logo,.studio-footer .shared-logo{display:block;max-width:100%;height:auto;aspect-ratio:auto;background:none;object-fit:contain}