/* Shared by all three pages. Loaded after each page's own <style>, so these rules win. */

/* ── Top nav: identical position on every page ── */
html{scrollbar-gutter:stable}             /* scrollbar (or Kreators' intro lock) no longer shifts the nav */
#kNav{--gut:clamp(22px,5vw,96px)}         /* Kreators' page gutter is narrower; the nav keeps the home one */
@media(min-width:861px){
  #kNav .k-cta.k-book{min-width:9.9em;justify-content:center}   /* "Book a call" = "Book the studio" width */
}

/* Service dropdown: a closed (or closing) panel must not catch the mouse. Its hover bridge used to slide
   under the cursor while the panel animated shut, reopening it in a loop. */
#kNav .k-drop:not(:hover):not(.k-open) .k-dp{pointer-events:none}

/* ── Page-to-page: nav stays put while the page underneath cross-fades (Chrome/Edge/Safari 18+) ── */
@view-transition{navigation:auto}
#kNav{view-transition-name:k-nav}
::view-transition-group(k-nav){animation:none}
::view-transition-old(k-nav){display:none}
::view-transition-new(k-nav){animation:none}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
/* Kreators fades its nav in after the intro; on later visits it should just be there */
html.k-navnow #kNav{opacity:1!important;transition:none!important}

/* ── Text painted with background-clip:text: give the paint area room so glyph overhang isn't cut ── */
.k-loc .k-lnk{padding:0 .08em;margin:0 -.08em}

/* ── Wipe-in headlines (.cl on Kreators, .k-cl on Home/Studio) reveal through a mask, and a mask hides
   everything outside the element's box: with tight line-height that cuts the tails of g/y/p/q.
   Once the wipe has finished the mask is dropped (site.js adds .k-unmask). ── */
.cl.k-unmask,.k-cl.k-unmask{-webkit-mask-image:none!important;mask-image:none!important}

/* ── Footer: privacy link inside the small footer bar ── */
.k-fpv{color:inherit;border-bottom:1px solid currentColor;padding-bottom:1px;transition:opacity .25s}
.k-fpv:hover{opacity:.6}

/* ── Booking panel (Calendly) ── */
html.k-lock{overflow:hidden}
#kBook{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,3vw,48px);background:var(--vig);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ez),visibility .35s}
#kBook.k-open{opacity:1;visibility:visible}
#kBook .k-bk{position:relative;width:min(1040px,100%);height:min(760px,100%);background:var(--bg);color:var(--ink);
  font-family:var(--f);display:flex;flex-direction:column}
#kBook .k-bkhd{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px clamp(16px,2vw,26px);border-bottom:1px solid var(--line)}
#kBook .k-bkhd b{font-weight:700;font-size:clamp(16px,1.4vw,22px);letter-spacing:-.04em}
#kBook .k-bkhd b em{font-style:normal;color:var(--pop)}
#kBook .k-bkx{background:none;border:0;cursor:pointer;color:var(--dim);font:inherit;font-size:13px;font-weight:600;display:inline-flex;gap:8px;align-items:center}
#kBook .k-bkx i{font-style:normal;font-weight:700;font-size:20px;line-height:.8;color:var(--pop)}
#kBook .k-bkx:hover{color:var(--ink)}
#kBook .k-bkx:focus-visible{outline:2px solid var(--pop);outline-offset:4px;border-radius:1px}
#kBook .k-bkbody{position:relative;flex:1;min-height:0}
#kBook iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--bg);
  opacity:0;transition:opacity .35s var(--ez)}
#kBook.k-ready iframe{opacity:1}
#kBook .k-bkft{padding:10px clamp(16px,2vw,26px);border-top:1px solid var(--line);font-size:11.5px;color:var(--dim)}
#kBook .k-bkft a{color:var(--ink);border-bottom:1px solid var(--line)}
#kBook .k-bord{position:absolute;inset:-1px;pointer-events:none;z-index:2}
#kBook .k-bord i{position:absolute;background:var(--pop);transition:transform .38s var(--ez)}
#kBook .k-bord i:nth-child(1){left:0;top:0;height:1px;width:100%;transform:scaleX(0);transform-origin:left}
#kBook .k-bord i:nth-child(2){right:0;top:0;width:1px;height:100%;transform:scaleY(0);transform-origin:top}
#kBook .k-bord i:nth-child(3){right:0;bottom:0;height:1px;width:100%;transform:scaleX(0);transform-origin:right}
#kBook .k-bord i:nth-child(4){left:0;bottom:0;width:1px;height:100%;transform:scaleY(0);transform-origin:bottom}
#kBook.k-open .k-bord i{transform:none}
#kBook.k-open .k-bord i:nth-child(2){transition-delay:.1s}
#kBook.k-open .k-bord i:nth-child(3){transition-delay:.2s}
#kBook.k-open .k-bord i:nth-child(4){transition-delay:.3s}

/* Loading state: a bar that creeps toward the end, plus words, until Calendly says it's ready */
#kBook .k-bkld{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  transition:opacity .3s var(--ez),visibility .3s}
#kBook.k-ready .k-bkld{opacity:0;visibility:hidden}
#kBook .k-bkld p{margin:0;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--dim)}
#kBook .k-bkld small{font-size:11.5px;color:var(--dim);opacity:0;transition:opacity .4s}
#kBook .k-bkld small a{color:var(--ink);border-bottom:1px solid var(--line)}
#kBook.k-slow .k-bkld small{opacity:1}
#kBook .k-bkbar{width:min(280px,60%);height:2px;background:var(--line);overflow:hidden}
#kBook .k-bkbar i{display:block;height:100%;width:100%;background:var(--pop);transform:scaleX(0);transform-origin:left}
#kBook.k-loading .k-bkbar i{transform:scaleX(.9);transition:transform 6s cubic-bezier(.1,.7,.2,1)}
#kBook.k-ready .k-bkbar i{transform:scaleX(1);transition:transform .2s}
@media(prefers-reduced-motion:reduce){#kBook.k-loading .k-bkbar i{transition:none;transform:scaleX(.5)}}