/* Shared styles for every designaari page */
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;overflow-x:clip;font-family:'Inter Tight',sans-serif;color:#141414;background:#fff;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block}
[hidden]{display:none!important}
.serif{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400}
.px{font-family:'Silkscreen',monospace;font-weight:400;letter-spacing:.02em;text-transform:uppercase}

/* buttons */
.pill{display:inline-flex;align-items:center;padding:18px 30px;border-radius:999px;background:#141414;color:#fff;font-size:18px;font-weight:500;text-decoration:none;white-space:nowrap;border:none;cursor:pointer;font-family:inherit}
.pill.outline{background:none;color:#141414;border:2px solid #141414;font-weight:600}
.circle{width:60px;height:60px;border-radius:50%;background:#141414;color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;text-decoration:none;flex:none}
.btns{display:flex;gap:10px;flex-wrap:wrap}

/* header */
.site-header{position:absolute;z-index:40;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:28px 7%;pointer-events:none}
.site-header>*{pointer-events:auto}
.site-nav{display:flex;align-items:center;gap:30px;padding:14px 30px 14px 22px;border-radius:999px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.06);font-size:18px}
.site-nav a{text-decoration:none;color:#6A6A6A}
.site-nav a[aria-current="page"]{color:#141414;font-weight:600}
.site-nav .logo{display:flex;align-items:center;gap:6px;font-family:'Silkscreen',monospace;font-weight:700;font-size:20px;color:#141414}
.site-nav .logo img{width:14px;height:32px;image-rendering:pixelated;flex:none}
.home .site-nav a{color:#141414}

/* footer strip */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-size:16px;border-top:1px solid #3A3A3A;padding-top:24px}
.foot nav{display:flex;gap:18px;flex-wrap:wrap}
.foot a{color:#fff}

@media (max-width:820px){
  .site-header{padding:16px 5%}
  .site-nav{gap:16px;padding:12px 18px;font-size:15px}
  .site-nav .hide-sm,.site-header .head-cta .pill{display:none}
  .site-nav .logo{font-size:16px}
  .circle{width:52px;height:52px;font-size:20px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* loading screen */
@keyframes ldbounce{0%{transform:translateY(0) scale(1.04,.96)}18%{transform:translateY(-8px) scale(1,1)}100%{transform:translateY(-90px) scale(.98,1.02)}}
@keyframes ldshadow{0%{transform:scale(1);opacity:.35}100%{transform:scale(.55);opacity:.12}}
@keyframes ldspin{to{transform:rotate(360deg)}}
@keyframes ldfill{from{width:0}to{width:100%}}
#loader{position:fixed;inset:0;z-index:300;background:#F4F1EA;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .45s ease;cursor:pointer}
#loader.out{opacity:0}
#loader .lift{height:360px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
#loader .bounce{animation:ldbounce .42s cubic-bezier(.2,.6,.4,1) infinite alternate}
#loader .badge{position:relative;width:270px;height:270px;animation:ldspin 2.2s linear infinite}
#loader .badge svg{position:absolute;inset:0}
#loader canvas{position:absolute;left:87px;top:63px;width:96px;height:128px;image-rendering:pixelated;image-rendering:crisp-edges}
#loader .shadow{width:170px;height:18px;border-radius:50%;background:#141414;animation:ldshadow .42s cubic-bezier(.2,.6,.4,1) infinite alternate}
#loader .bar{display:block;width:200px;height:12px;border:2px solid #141414;padding:2px;box-sizing:content-box}
#loader .bar span{display:block;height:100%;background:repeating-linear-gradient(90deg,#DC3F44 0 16px,#F4F1EA 16px 20px);animation:ldfill 1.7s steps(10) both}
@media (max-width:820px){#loader .lift{height:300px;transform:scale(.8)}}