/* ==========================================================================
   KAWAII-BOO — a local-business site built on the sticker UI study.
   Layout system, type scale, spacing, easing and component behaviour are
   reproduced value-for-value from the reference site's stylesheet.
   Palette and type follow the shop's existing brand (butter yellow, teal, pink, chocolate ink).
   ========================================================================== */

/* ---------- fonts (self-hosted Google Fonts, the same families the shop's current site uses) ---------- */
@font-face { font-family: "Fugaz One"; src: url("/fonts/kb/fugaz-one.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Yellowtail"; src: url("/fonts/kb/yellowtail.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("/fonts/kb/oswald.woff2") format("woff2"); font-weight: 200 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Abel"; src: url("/fonts/kb/abel.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/fonts/kb/montserrat.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ---------- reset (same "all: unset" strategy as the reference) ---------- */
:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; }
*, *::before, *::after { box-sizing: border-box; }
a, button { cursor: pointer; }
menu, ol, ul { list-style: none; }
img { max-width: 100%; }
::placeholder { color: unset; }
:where([hidden]) { display: none; }

/* ---------- tokens ---------- */
:root {
  --font-social: "Oswald", "Arial Narrow", Arial, sans-serif;     /* UI: nav, buttons, pills */
  --font-light: "Abel", "Arial Narrow", Arial, sans-serif;         /* running copy */
  --font-display: "Fugaz One", "Oswald", Arial, sans-serif;        /* chunky headings */
  --font-script: "Yellowtail", "Brush Script MT", cursive;         /* page titles + wordmark */
  --font-ui: "Montserrat", Arial, sans-serif;                      /* small labels, form fields */
  --white: #fff;
  --cement: #efefef;
  --black: #000;
  --grey-dark: #1d6b66;      /* deep teal band */
  --red: red;
  --grey-l: #6b4a35;
  --grey: #3e2510;          /* chocolate ink */
  --rose: #ff9ec7;
  --pink: #ff86b6;
  --butter: #f3f87c;
  --teal: #46ada5;
  --cream: #fffbea;
  --phantom: #c5cafb;
  --violet: #e6d9ff;
  --lavander: #d2b1ff;
  --purple: #7f40f3;
  --cyan: #a6ecf4;
  --mint: #7fe0c3;
  --lime: #f3f87c;
  --green: #f3f87c;
  --orange: #ff9f76;
  --grey-10: rgba(62, 37, 16, .1);
  --grey-20: rgba(62, 37, 16, .2);
  --grey-30: rgba(62, 37, 16, .3);
  --grey-40: rgba(62, 37, 16, .4);
  --grey-50: rgba(62, 37, 16, .5);
  --grey-60: rgba(62, 37, 16, .6);
  --grey-70: rgba(62, 37, 16, .7);
  --grey-80: rgba(62, 37, 16, .8);
  --grey-90: rgba(62, 37, 16, .9);
  --grey-100: #3e2510;

  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);

  --layout-columns-count: 4;
  --layout-columns-gap: 2.6666666667vw;
  --layout-margin: 5.3333333333vw;
  --layout-width: calc(var(--vw) - (2 * var(--layout-margin)));

  --spacer-xs: 10px;
  --spacer-s: 30px;
  --spacer-m: 50px;
  --spacer-l: 100px;
  --spacer-xl: 200px;
  --header-height: 15.4666666667vw;
  --gvh: 1vh;
  --vw: 100vw;
}
@media (min-width: 800px) {
  :root {
    --layout-columns-count: 12;
    --layout-columns-gap: 1.1574074074vw;
    --layout-margin: 2.3148148148vw;
    --header-height: 7.5vw;
  }
}

.theme-light { --theme-primary: #fff; --theme-secondary: #000; }

html {
  font-weight: 400;
  font-family: var(--font-social);
  scrollbar-width: none;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html.nav-open { overflow: hidden; }
body { min-height: 100vh; overscroll-behavior: none; -ms-overflow-style: none; scrollbar-width: none; background: #fff; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
h1, p { color: var(--grey); }
a, button, input, label, select, textarea { color: inherit; cursor: pointer; }
::selection { background-color: var(--pink); color: var(--grey); }
svg.icon circle[fill], svg.icon path[fill], svg.icon rect[fill] { fill: currentColor; }
@media (max-width: 800px) {
  br { display: none; }
  html, body { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
}
span.word { display: inline-block; }

.layout { background-color: var(--theme-primary); color: var(--theme-secondary); min-height: 100vh; display: flex; flex-direction: column; }
.layout-main { flex-grow: 1; }

/* ==========================================================================
   LOADER + WORLD BACKGROUND
   ========================================================================== */
.background {
  position: fixed; top: 0; left: 0; height: calc(var(--gvh, 1vh) * 100); width: 100%;
  padding-top: var(--header-height);
  background: #ffd9e8;
}
.background .radial {
  position: fixed; top: 0; left: 0; width: 100%; height: calc(var(--gvh, 1vh) * 100);
  background:
    radial-gradient(farthest-side at bottom left, #fff3b0, transparent 60%),
    radial-gradient(farthest-side at bottom right, #8fd6cc, transparent),
    radial-gradient(farthest-corner at top right, #ffb8d6, transparent 60%),
    radial-gradient(circle at center center, #fff, transparent 50%);
}
.loader { position: fixed; z-index: 20; top: 0; left: 0; height: calc(var(--gvh, 1vh) * 100); width: 100%; }
@media (max-width: 800px) { .loader { height: 100svh; } }
.loader svg.loader-logo { position: fixed; top: 50%; left: 40px; transform: translateY(-50%); height: 75px; width: 75px; overflow: visible; }
.loader .percent {
  position: absolute; bottom: 40px; right: 40px;
  font-size: 13.8888888889vw; line-height: 10.4166666667vw; font-weight: 700; color: var(--grey);
  font-variant-numeric: tabular-nums;
}
.loader .sentence { position: absolute; bottom: 40px; left: 40px; font-weight: 700; color: var(--grey); }

/* ==========================================================================
   WORLD (STICKER) LAYER
   ========================================================================== */
.world-bg { position: fixed; inset: 0; z-index: 0; transition: opacity 1s var(--ease-out-expo); }
.world-bg .tone { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease-in-out; }
.world-bg .tone.on { opacity: 1; }
.world-bg .tone[data-world="home"] {
  background:
    radial-gradient(ellipse 70% 70% at 10% 8%, #fff3b0 0%, transparent 60%),
    radial-gradient(ellipse 80% 70% at 95% 0%, #ffc0dc 0%, transparent 62%),
    radial-gradient(ellipse 90% 60% at 60% 100%, #d4f3ec 0%, transparent 65%),
    linear-gradient(135deg, #ffdcea, #fff0c2 55%, #ffd1e4);
}
.world-bg .tone[data-world="shop"] {
  background:
    radial-gradient(ellipse 60% 70% at 0% 10%, #bff1e6 0%, transparent 64%),
    radial-gradient(ellipse 65% 60% at 100% 0%, #fff0b0 0%, transparent 66%),
    radial-gradient(ellipse 70% 55% at 100% 80%, #ffcfe4 0%, transparent 66%),
    linear-gradient(160deg, #90d9ce, #6cc6bd 52%, #a8e2d6);
}
.world-bg .tone[data-world="visit"] {
  background:
    radial-gradient(ellipse 60% 70% at 0% 12%, #fffbaa 0%, transparent 64%),
    radial-gradient(ellipse 65% 62% at 100% 0%, #ffc4de 0%, transparent 66%),
    radial-gradient(ellipse 70% 55% at 100% 80%, #cdf2e8 0%, transparent 66%),
    linear-gradient(160deg, #fbfb98, #fff3b8 52%, #ffdbea);
}
/* the shop's doodle wall, faint, over every world */
.world-bg .tone::after { content: ""; position: absolute; inset: 0; background: url(/assets/img/doodle-pattern.webp) center / 560px repeat; opacity: .5; mix-blend-mode: soft-light; pointer-events: none; }
.ghost-title {
  position: fixed; z-index: 0; left: 50%; top: 0; transform: translateX(-50%);
  font-size: 25vw; line-height: 1; font-weight: 400; letter-spacing: -.02em; white-space: nowrap;
  color: #fff; opacity: 0; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.98) 0%, rgba(0,0,0,.78) 34%, rgba(0,0,0,.3) 62%, rgba(0,0,0,0) 90%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.98) 0%, rgba(0,0,0,.78) 34%, rgba(0,0,0,.3) 62%, rgba(0,0,0,0) 90%);
  padding-top: 0;
  margin-top: .4vw;
}
#worldRoot { position: relative; }
.sticker-stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.stk-world { position: absolute; inset: 0; }
.stk { position: absolute; left: 0; top: 0; will-change: transform, opacity; backface-visibility: hidden; pointer-events: none; }
.stk svg { display: block; overflow: visible; }
.clouds { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cloud {
  position: absolute; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,.55) 55%, rgba(255,255,255,0));
  filter: blur(22px); will-change: transform;
}

/* ==========================================================================
   HOME SECTION CHROME
   ========================================================================== */
.home { position: relative; height: calc(var(--gvh, 1vh) * 100); width: 100%; overflow: hidden; padding-top: var(--header-height); }
@media (max-width: 800px) { .home { height: 100svh; position: fixed; overscroll-behavior: contain; } }
.home .text-desc {
  position: fixed; left: 75px; bottom: 50px; color: var(--grey-60);
  user-select: none; font-size: 16px; line-height: 1.25; font-weight: 400; z-index: 1; pointer-events: none;
}
.home .text-desc.footer { display: flex; align-items: center; font-size: 14px; color: var(--grey-50); }
.home .text-desc .mouse { width: 15px; transform: translateY(25%); margin-right: 10px; }
@media (max-width: 800px) { .home .text-desc { display: none; } }
.home-layer {
  position: fixed; z-index: 9; top: 0; left: 0; height: calc(var(--gvh, 1vh) * 100); width: 100%;
  background-color: var(--grey-80); opacity: 0; display: none;
}
.home-stage { transition: opacity .3s; }

/* ==========================================================================
   HEADER + NAVIGATION OVERLAY
   ========================================================================== */
.header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 3; color: var(--grey);
  padding: 5.3333333333vw; user-select: none;
}
@media (min-width: 800px) { .header { padding: 2.7777777778vw; } }
.header .head { display: flex; justify-content: space-between; position: relative; z-index: 2; }
.header #logo { display: block; transition: opacity .25s; }
.header #logo:hover { cursor: pointer; opacity: .5; }
.wm { display: block; font-family: var(--font-social); font-weight: 700; font-size: 24px; line-height: 1; letter-spacing: -.055em; margin-top: -2px; }
.header .right { display: flex; }
.header .right > div { align-items: center; font-size: 14px; font-weight: 300; color: var(--grey); display: flex; }
@media (max-width: 800px) {
  .header .right .talents { opacity: 0; pointer-events: none; transition: opacity .5s; }
  .header .right .talents.open { opacity: 1; pointer-events: auto; }
}
.header .menu-btn { display: block; }
@media (min-width: 800px) { .header .menu-btn:hover .menu { transition: .15s; height: 18px; } }
.header .menu { top: 20px; right: 20px; width: 35px; height: 10px; display: flex; flex-direction: column; transition: .25s; justify-content: space-between; will-change: transform; }
.header .menu .bar-top, .header .menu .bar-bot { height: 2px; width: 100%; background: var(--grey); border-radius: 20px; }
.header .menu.open { transition: .25s; height: 2px; }

.button-talents {
  position: relative; display: flex; justify-content: center; align-items: center;
  height: 20px; min-width: 50px; width: fit-content; padding: 15px 20px; margin: -1px 20px -1px 10px;
  border-radius: 20px; cursor: pointer; overflow: hidden; transition: background .25s;
  background: var(--white);
}
.button-talents p { display: flex; white-space: pre-wrap; overflow: hidden; transition: color .25s; color: var(--grey); }
.button-talents span { font-size: 12px; font-weight: 700; }
@media (min-width: 800px) {
  .button-talents::before { content: ""; position: absolute; height: 45px; width: 110%; background: var(--grey); border-radius: 100%; transform: translateX(-100%); transition: transform .35s cubic-bezier(.245, 1, .48, .825); }
  .button-talents:hover p { color: var(--white) !important; }
  .button-talents:hover::before { transform: translateX(0); }
}
.nav-open .button-talents { background: var(--grey); }
.nav-open .button-talents p { color: var(--white); }

.navigation {
  background-color: #fff; position: fixed; z-index: 2; top: 0; left: 0; width: 100%;
  height: 100vh; clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 1s var(--ease-out-expo);
  display: flex; flex-direction: column; justify-content: center; overflow: hidden;
}
@media (max-width: 800px) { .navigation { height: 100svh; overscroll-behavior: contain; } }
.navigation.closed { pointer-events: none; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path 1s var(--ease-out-expo), visibility 0s linear 1s; }
.navigation.closed > * { opacity: 0; transition: opacity .5s ease-in-out; }
.navigation > * { transition: opacity .5s ease-in-out; }
.navigation .preview { position: fixed; left: 0; top: 0; width: 300px; aspect-ratio: 300 / 400; pointer-events: none; z-index: 0; will-change: transform; }
.navigation .preview .pv { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease-in-out; overflow: hidden; }
.navigation .preview .pv.on { opacity: 1; }
.navigation .preview .pv svg, .navigation .preview .pv img { width: 100%; height: 100%; display: block; object-fit: cover; }
.navigation .titles { padding-bottom: 2.2222222222vh; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }
.navigation .titles p {
  position: relative; width: fit-content; font-size: 11.1111111111vh; line-height: 11.1111111111vh;
  color: var(--grey-30); transition: color .5s, opacity .5s; cursor: pointer;
}
.navigation .titles p:hover { color: var(--grey); transition: color .5s; }
.navigation .titles p span { position: absolute; font-size: 3.8888888889vh; }
@media (max-width: 800px) {
  .navigation .titles { align-items: start; }
  .navigation .titles p { top: 7.6923076923vh; left: var(--layout-margin); font-size: 8.230769vh; line-height: 8.230769vh; }
}
.navigation .nav-cta { position: absolute; left: 2.6666666667vw; bottom: 4vw; transform: translateX(15%); z-index: 1; }
@media (max-width: 800px) { .navigation .nav-cta { bottom: 10px; height: fit-content; width: fit-content; transform: translate(15%, -15%); } }
.navigation .links { position: absolute; color: var(--grey-50); right: 2.6666666667vw; bottom: 2.6666666667vw; text-align: right; font-size: 12px; z-index: 1; }
@media (max-width: 800px) { .navigation .links { bottom: inherit; top: var(--header-height); } }
.navigation .links p { cursor: pointer; margin-top: 5px; transition: color .35s; color: var(--grey-50); }
.navigation .links a { font-size: 18px; transition: color .35s; display: inline-block; }
@media (min-width: 800px) {
  .navigation .links p:hover, .navigation .links a:hover { color: var(--grey); transition: color .35s; }
}
@media (max-width: 800px) {
  .navigation .links p, .navigation .links a { font-size: 2.1538461538vh; line-height: 2.1538461538vh; }
}

/* buttons */
.button-square {
  position: relative; display: flex; justify-content: center; align-items: center;
  height: 50px; min-width: 50px; width: fit-content; padding: 0 20px; font-size: 13px;
  border-radius: 10px; cursor: pointer; overflow: hidden; color: var(--grey);
}
.button-square p { display: flex; white-space: pre-wrap; overflow: hidden; }
.button-square.is-alpha { border: 1px solid var(--white); }
.button-square .arrow-cont { display: flex; align-items: center; }
.button-square .arrow { width: 12px; height: 50px; margin-left: 7px; z-index: 1; }
@media (min-width: 800px) {
  .button-square::before { content: ""; position: absolute; height: 100px; width: 110%; background: var(--grey); border-radius: 100%; transform: translateX(-100%); transition: transform .35s cubic-bezier(.245, 1, .48, .825); }
  .button-square:hover p { color: var(--white) !important; }
  .button-square:hover .arrow { transition: stroke .5s cubic-bezier(.245, 1, .48, .825) .2s; stroke: var(--white) !important; }
  .button-square:hover::before { transform: translateX(0); }
}
/* outlined variant used in the dark sections */
.button-outline {
  position: relative; display: inline-flex; justify-content: center; align-items: center;
  height: 50px; padding: 0 20px; font-size: 13px; border-radius: 10px; overflow: hidden;
  border: 1px solid #fff; color: #fff; cursor: pointer; font-weight: 500; gap: 7px;
}
.button-outline p { color: inherit; position: relative; z-index: 1; }
.button-outline svg { position: relative; z-index: 1; width: 12px; height: 12px; stroke: #fff; fill: none; transition: stroke .4s; }
.button-outline::before { content: ""; position: absolute; height: 100px; width: 110%; background: #fff; border-radius: 100%; transform: translateX(-100%); transition: transform .35s cubic-bezier(.245, 1, .48, .825); left: 0; }
@media (min-width: 800px) {
  .button-outline:hover::before { transform: translateX(0); }
  .button-outline:hover p { color: var(--grey); transition: color .3s .05s; }
  .button-outline:hover svg { stroke: var(--grey); transition: stroke .5s cubic-bezier(.245, 1, .48, .825) .2s; }
}

/* "Discover / Enter" pill */
.enter-btn {
  background-color: var(--white); height: 50px; min-width: 130px; border-radius: 200px; position: fixed;
  display: flex; align-items: center; user-select: none; z-index: 2; -webkit-tap-highlight-color: transparent;
}
.enter-btn .back { position: absolute; top: 0; left: 0; height: 100%; width: 100%; border-radius: 200px; z-index: -1; transition: background .5s; background: #fff; }
.enter-btn .arrow-circle {
  position: absolute; height: 40px; width: 40px; border-radius: 40px; top: 5px; left: 5px;
  display: flex; justify-content: center; align-items: center; transition: all .25s ease-out;
}
.enter-btn .arrow-circle .arrow { position: absolute; width: 16px; left: 12px; transition: all .25s ease-out; fill: none; stroke: var(--grey); }
.enter-btn .right-side { padding: 0 20px 0 65px; font-size: 15px; font-weight: 500; color: var(--grey); }
.enter-btn .right-side p { font-weight: 400; font-size: 12px; color: var(--grey-50); }
.enter-btn .enter { position: absolute; left: 20px; overflow: hidden; color: var(--grey); }
.enter-btn .enter span { opacity: 0; font-weight: 700; font-size: 16px; transform: translateY(18px); display: inline-flex; transition: all .25s ease-out; }
.enter-btn:hover .arrow-circle { top: 0; left: 0; width: 100%; height: 100%; transition: all .25s ease-out; }
.enter-btn:hover .arrow-circle .arrow { left: calc(100% - 28px); transition: all .5s ease-out; }
.enter-btn:hover .enter span { opacity: 1; transform: translateY(0); }
.enter-btn:hover .enter span:nth-child(1) { transition: all .15s ease-out .05s; }
.enter-btn:hover .enter span:nth-child(2) { transition: all .15s ease-out .1s; }
.enter-btn:hover .enter span:nth-child(3) { transition: all .15s ease-out .15s; }
.enter-btn:hover .enter span:nth-child(4) { transition: all .15s ease-out .2s; }
.enter-btn:hover .enter span:nth-child(5) { transition: all .15s ease-out .25s; }

/* world switcher (bottom-right) */
.nav-world-container { height: 60px; width: 280px; position: fixed; bottom: 50px; right: 65px; z-index: 2; }
@media (min-width: 800px) { .nav-world-container:hover { height: 370px; } }
.nav-world {
  position: fixed; bottom: 50px; right: 75px; height: 60px; width: 250px; border-radius: 15px;
  font-size: 14px; font-weight: 500; color: var(--grey); user-select: none;
}
@media (max-width: 500px) { .nav-world { bottom: 25px; width: 100%; left: 25px; height: 40px; } }
.nav-world .nw-section {
  opacity: 0; position: absolute; width: 250px; background: var(--white); height: 60px;
  display: flex; align-items: center; border-radius: 15px; cursor: pointer; transition: all .15s ease-out; overflow: hidden;
}
@media (max-width: 500px) { .nav-world .nw-section { left: 0; right: 5%; } }
.nav-world .nw-section:hover { height: 76px; width: 270px; margin-left: -15px; margin-top: -8px; transition: all .15s ease-out; }
.nav-world .nw-section:hover p { transform: translateX(10px); }
.nav-world .nw-section:hover .nw-thumb { width: 60px; height: 60px; }
.nav-world .nw-section p { margin-left: 70px; transition: transform .15s ease-out; color: var(--grey); }
.nav-world .nw-thumb { position: absolute; left: 6px; width: 50px; height: 50px; transition: all .25s; border-radius: 10px; overflow: hidden; }
.nav-world .nw-thumb svg { width: 100%; height: 100%; display: block; }
.nav-world .nw-section .nw-arrow { stroke: var(--grey); position: absolute; right: 15px; height: 15px; pointer-events: none; fill: none; }
.nav-world .nw-selected {
  position: absolute; width: 250px; height: 60px; background: var(--white); border-radius: 15px; z-index: 9;
  display: flex; align-items: center; cursor: pointer; transform-style: preserve-3d;
}
.nav-world .nw-selected::after {
  content: ""; width: 0; height: 0; margin: 8px auto; position: absolute; right: 15px;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid #000;
}
.nav-world .nw-selected.open::after { border-bottom: inherit; border-top: 7px solid #000; }
.nav-world .nw-selected .nw-thumb { margin-left: 0; position: absolute; }
.nav-world .nw-selected p { pointer-events: none; margin-left: 70px; color: var(--grey); }
/* phones: only the visible button takes taps while the list is closed, so stickers under the empty box stay tappable */
@media (max-width: 500px) {
  .nav-world-container, .nav-world, .nav-world .nw-section { pointer-events: none; }
  .nav-world .nw-selected { pointer-events: auto; }
  .nav-world-container.open .nw-section { pointer-events: auto; }
}
@media (max-width: 500px) {
  .nav-world .nw-selected { width: auto; padding-right: 30px; height: 40px; }
  .nav-world .nw-selected .nw-thumb { display: none; }
  .nav-world .nw-selected p { margin-left: 20px; }
}

/* custom cursor */
.cursor-container { position: fixed; top: 0; left: 0; height: 100vh; width: 100%; z-index: 40; pointer-events: none; overflow: hidden; mix-blend-mode: difference; }
.cursor-container .cursor {
  position: absolute; border-radius: 100%; width: 10px; height: 10px; background-color: var(--white); opacity: 1;
  transform: translate(-50%, -50%);
  transition: transform .6s var(--ease-out-expo);
}
.cursor-container .cursor.pointer { opacity: .5; transform: translate(-50%, -50%) scale(3); }
@media (hover: none) { .cursor-container { display: none; } }

/* custom scrollbar */
.scrollbar { position: fixed; right: 0; bottom: 0; top: 0; z-index: 30; padding: 1.6666666667vw 0; pointer-events: none; opacity: 0; transition: opacity .3s; }
.scrollbar.show { opacity: 1; }
.scrollbar .inner { height: 100%; position: relative; }
.scrollbar .thumb { min-height: 3.3333333333vw; width: .5555555556vw; position: absolute; right: .5555555556vw; border-radius: .2777777778vw; background: var(--grey-50); }
@media (max-width: 800px) { .scrollbar { display: none; } }

/* ==========================================================================
   PAGE SHELL (the card that slides up over the world)
   ========================================================================== */
.page { position: fixed; z-index: 10; top: 0; left: 0; width: 100%; pointer-events: none; transform: scale(.95) translate3d(0, 100vh, 0); display: none; }
.page .lenis {
  --vw: calc(100vw - var(--layout-margin) * 2);
  width: calc(100vw - var(--layout-margin) * 2); margin-left: var(--layout-margin); margin-top: var(--layout-margin);
  border-radius: 1.0416666667vw 1.0416666667vw 0 0; overflow-y: scroll;
  height: calc(var(--gvh, 1vh) * 100 - var(--layout-margin));
  background: var(--cream); pointer-events: all; -ms-overflow-style: none; scrollbar-width: none;
}
@media (max-width: 800px) {
  .page .lenis { border-radius: 10px 10px 0 0; height: 100svh; position: fixed; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
}
.page .lenis::-webkit-scrollbar { display: none; }
.page .page-container { overflow: hidden; width: 100%; background: var(--cream); position: relative; z-index: 3; }
.page .ariane { margin: 55px; padding: 0 var(--layout-margin); margin-left: calc(.6435185185 * var(--vw)); color: var(--grey-50); width: fit-content; position: relative; z-index: 1; font-size: 14px; }
@media (max-width: 800px) { .page .ariane { margin-top: 40px; margin-left: 0; } }
.page .ariane .home-link { transition: color .25s; cursor: pointer; }
.page .ariane .home-link:hover { color: var(--grey); transition: color .25s; }
.page .ariane .point { color: var(--grey); margin-left: 25px; position: relative; }
.page .ariane .point::after { content: ""; position: absolute; height: 3px; width: 3px; left: -15px; top: 50%; transform: translateY(-50%); border-radius: 3px; background-color: var(--grey-50); }

.button-cross { z-index: 3; position: absolute; top: 53px; transform: translate3d(0, 50%, 0); right: var(--layout-margin); display: flex; justify-content: center; align-items: center; -webkit-tap-highlight-color: transparent; }
.button-cross:hover svg { transform: rotate(90deg); transition: transform .35s ease-in-out; }
.button-cross svg { width: 11px; transition: transform .35s ease-in-out; }
@media (max-width: 800px) { .button-cross { top: 38px; } }

/* image + text reveal primitives */
.reveal-img { position: relative; overflow: hidden; }
.reveal-img .shutter { position: absolute; z-index: 1; width: 105%; height: calc(55% + 2px); background-color: var(--cream); left: -2.5%; will-change: transform; }
.reveal-img .shutter.top { top: -1px; }
.reveal-img .shutter.bot { bottom: -1px; }
.reveal-img > .art { position: relative; z-index: 0; display: block; width: 100%; height: 100%; will-change: transform; opacity: 0; }
.reveal-img > .art svg { display: block; width: 100%; height: 100%; }
.rt .word-mask { display: inline-block; }
.rt .prismic-words { display: inline; }

/* ==========================================================================
   STUDIO PAGE
   ========================================================================== */
.studio .section { width: calc(.9537037037 * var(--vw)); margin: 0 auto 150px; }
@media (max-width: 800px) { .studio .section { width: calc(.8974358974 * var(--vw)); margin: 0 auto var(--spacer-l); } }
.studio .section_title, .studio .s-title {
  font-size: 6.9444444444vw; letter-spacing: -.1736111111vw; line-height: .8; margin-bottom: 150px; color: #000; font-weight: 400;
}
@media (max-width: 800px) { .studio .section_title, .studio .s-title { font-size: 12.3076923077vw; margin-bottom: var(--spacer-s); } }
.studio .s-content { font-size: 1.1574074074vw; line-height: 1.3; font-weight: 300; color: var(--grey); }
@media (max-width: 800px) { .studio .s-content { font-size: 4.1025641026vw; } }
.studio .s-content p { color: var(--grey); display: block; }

.studio .intro .title { position: relative; width: calc(.4710648148 * var(--vw)); font-size: 3.7037037037vw; line-height: .9; letter-spacing: -.1736111111vw; font-weight: 400; color: var(--grey); }
.studio .intro .title p { display: block; color: var(--grey); }
.studio .intro .shutter-wrap { width: calc(.4710648148 * var(--vw)); margin: 60px auto 0; position: relative; overflow: hidden; }
.studio .intro .shutter-wrap .image-banner { width: 100%; height: auto; aspect-ratio: 1500 / 853; }
.studio .intro .arrow-down { width: calc(.0688657407 * var(--vw)); display: block; margin-left: auto; margin-right: 0; margin-top: var(--spacer-s); }
@media (max-width: 800px) {
  .studio .intro .title { width: calc(.8974358974 * var(--vw)); font-size: 8.2051282051vw; }
  .studio .intro .shutter-wrap { width: calc(.8974358974 * var(--vw)); }
}

.studio .first_section_title { width: calc(.390625 * var(--vw)); margin-left: calc(.0804398148 * var(--vw)); margin-bottom: 150px; }
.studio .first_section_container { display: grid; grid-template-columns: calc(.390625 * var(--vw)) calc(.4710648148 * var(--vw)); gap: calc(.0920138889 * var(--vw)); width: 100%; }
.studio .first_section_content { padding-left: calc(.0804398148 * var(--vw)); }
.studio .first_section .image { width: 100%; height: auto; aspect-ratio: 790 / 900; }
@media (max-width: 800px) {
  .studio .first_section_title { margin-bottom: var(--spacer-s); margin-left: 0; width: inherit; }
  .studio .first_section_container { grid-template-columns: 1fr; gap: var(--spacer-m); }
  .studio .first_section_content { padding-left: 0; }
  .studio .first_section .image { width: calc(.6666666667 * var(--vw)); margin-left: calc(.2307692308 * var(--vw)); aspect-ratio: 790 / 900; }
}

.studio .second_section { display: grid; }
.studio .second_section .s-title { width: calc(.4710648148 * var(--vw)); margin-left: calc(.1608796296 * var(--vw)); }
.studio .second_section_container { display: grid; grid-template-columns: calc(.4710648148 * var(--vw)) calc(.3101851852 * var(--vw)); gap: calc(.0920138889 * var(--vw)); }
.studio .second_section_container .image { height: auto; aspect-ratio: 855 / 813; }
@media (max-width: 800px) {
  .studio .second_section .s-title { width: calc(.6666666667 * var(--vw)); margin-left: calc(.2307692308 * var(--vw)); }
  .studio .second_section_container { grid-template-columns: 1fr; grid-template-rows: auto auto; }
}

.studio .third_section { display: grid; grid-template-columns: calc(.390625 * var(--vw)) calc(.4710648148 * var(--vw)); gap: calc(.0920138889 * var(--vw)); }
.studio .third_section .s-title { margin-bottom: 0; }
@media (max-width: 800px) { .studio .third_section > div:first-child { display: contents !important; } }
.studio .third_section .content { align-self: end; }
.studio .third_section .image { height: auto; aspect-ratio: 814 / 1036; }
@media (max-width: 800px) {
  .studio .third_section { grid-template-columns: 1fr; grid-template-rows: repeat(3, auto); gap: initial; }
  .studio .third_section .s-title { margin-bottom: inherit; }
  .studio .third_section .content { width: calc(.6666666667 * var(--vw)); margin-left: calc(.2307692308 * var(--vw)); margin-bottom: var(--spacer-l); }
  .studio .third_section .image { width: calc(.6666666667 * var(--vw)); grid-area: inherit; }
}

/* appventure (dark phone playground) */
.studio .appventure {
  padding: 110px 0; color: var(--white); background-color: var(--grey-dark); width: 100%; height: 100vh; position: relative;
  /* the .section rule sets a width/margin; the dark block is full-bleed */
  margin: 0 0 150px;
}
@media (max-width: 800px) { .studio .appventure { height: inherit; } }
.appventure .a-container {
  width: calc(.5515046296 * var(--vw)); position: relative; z-index: 1; margin: 0 auto;
  display: flex; flex-direction: column; justify-content: space-between; height: 100%;
}
.appventure .a-content { margin-bottom: 30px; width: calc(.390625 * var(--vw)); }
.appventure .a-content p { color: var(--white); }
.appventure .s-title { color: #fff; }
.appventure .a-column {
  position: absolute; top: 0; height: 100%; overflow: hidden; display: grid;
  grid-template-columns: calc(.1493055556 * var(--vw)) calc(.1493055556 * var(--vw)); gap: 1.1574074074vw;
}
.appventure .a-column.left { left: 0; transform: translate3d(-40%, 0, 0); }
.appventure .a-column.right { right: 0; transform: translate3d(40%, 0, 0); }
.appventure .inner-column { display: grid; gap: 20px; align-content: start; }
.appventure .single-cover { position: relative; width: 100%; will-change: transform; }
.appventure .single-cover svg { display: block; width: 100%; height: 100%; }
.info-bubble {
  padding: 30px 20px; background-color: var(--white); border-radius: 20px; width: calc(.3101851852 * var(--vw));
  position: fixed; z-index: 50; top: 0; left: 0; opacity: 0; color: var(--grey-dark); pointer-events: none;
  --vw: calc(100vw - var(--layout-margin) * 2);
}
.info-bubble .ib-title { font-size: 1.8518518519vw; line-height: .8; margin-bottom: 10px; color: var(--grey-dark); }
.info-bubble .ib-desc { font-size: 1.1574074074vw; line-height: 1.3; font-weight: 300; color: var(--grey-dark); }
@media (max-width: 800px) {
  .info-bubble { display: none; }
  .appventure .s-title { margin-bottom: 30px; }
  .appventure .a-container { display: block; margin-bottom: 50px; }
  .appventure .a-container, .appventure .a-content { width: calc(.8974358974 * var(--vw)); }
  .appventure .a-column { display: none; }
  .appventure .apps-container {
    display: grid; grid-template-columns: repeat(var(--appsNumber), calc(.7692307692 * var(--vw))); padding: 0 20px; grid-template-rows: 1fr;
    gap: calc(.1025641026 * var(--vw)); width: 100%; overflow-x: scroll; scroll-snap-type: x mandatory; scroll-padding: 20px; scrollbar-width: none;
  }
  .appventure .apps-container::-webkit-scrollbar { display: none; }
  .appventure .app-single { position: relative; scroll-snap-align: start; }
  .appventure .app-single .cover { height: auto; }
  .appventure .app-single .cover svg { width: 100%; height: auto; }
  .appventure .app-single .a-title { color: var(--white); font-size: 8.2051282051vw; margin: 30px 0 10px; display: block; }
  .appventure .app-single .a-desc { color: var(--white); font-size: 4.1025641026vw; line-height: 1.3; font-weight: 300; }
}
@media (min-width: 801px) { .apps-container { display: none; } }

/* sliding caption */
.studio .sliding-caption { display: grid; grid-template-rows: repeat(2, 1fr); width: max-content; margin-bottom: 0; }
.studio .sliding-caption .caption { font-size: 13.8888888889vw; line-height: 1; color: #000; white-space: nowrap; display: flex; align-items: center; gap: 0; }
.studio .sliding-caption .caption:first-child { animation: sliding 30s linear infinite; }
.studio .sliding-caption .caption:last-child { animation: sliding 30s linear infinite reverse; }
.studio .sliding-caption .caption .loader-logo { width: 8.1018518519vw; margin: 0 2vw; overflow: visible; flex: none; }
.studio .sliding-caption .caption .loader-logo path { stroke-width: 1; stroke: #141414; fill: none; }
@keyframes sliding { 0% { transform: translateZ(0); } to { transform: translate3d(-50%, 0, 0); } }

/* team */
.studio .team_content { width: calc(.6319444444 * var(--vw)); margin: 300px auto; font-size: 2.3148148148vw; line-height: 1.4; color: var(--grey); }
.studio .team_content .prismic-words { opacity: .62; }
.studio .team_title { width: calc(.4710648148 * var(--vw)); }
.studio .team .team_members .team-row { display: grid; grid-template-columns: repeat(7, calc(.1493055556 * var(--vw))); gap: calc(.0256410256 * var(--vw)); margin-bottom: calc(.0256410256 * var(--vw)); }
.studio .team .team_members .team-row:nth-child(2n) { position: relative; right: calc(.1493055556 * var(--vw)); }
.studio .team .team_members .member { display: flex; flex-direction: column; }
.studio .team .team_members .member .cover { height: auto; aspect-ratio: 307 / 388; margin-bottom: 10px; overflow: hidden; display: block; }
.studio .team .team_members .member .cover svg { display: block; width: 100%; height: 100%; }
.studio .team .team_members .member .name { font-size: 1.4467592593vw; line-height: 1.4; font-weight: 300; color: var(--grey); }
.studio .team .team_members .member .position { font-size: 1.1574074074vw; line-height: 1.4; font-weight: 300; color: var(--grey); }
@media (max-width: 800px) {
  .studio .team_content { width: inherit; font-size: 6.1538461538vw; margin: 100px auto; }
  .studio .team_title { width: calc(.6666666667 * var(--vw)); }
  .studio .team .team_members { grid-template-columns: repeat(2, calc(.4358974359 * var(--vw))); gap: 20px calc(.0256410256 * var(--vw)); display: grid; }
  .studio .team .team_members .team-row { display: none; }
  .studio .team .team_members .member .name { font-size: 3.5897435897vw; }
  .studio .team .team_members .member .position { font-size: 2.8205128205vw; }
}
@media (min-width: 801px) { .studio .team .team_members .member.mobile-only { display: none; } .studio .team .team_members .mobile-grid { display: none; } }
@media (max-width: 800px) { .studio .team .team_members .desktop-rows { display: none; } }

/* footer inside the page */
.p-footer { color: var(--white); background-color: #3a2212; padding: 110px 0; }
@media (max-width: 800px) { .p-footer { padding: 50px 0; } }
.p-footer .container { width: calc(.7928240741 * var(--vw)); margin: 0 auto; }
@media (max-width: 800px) { .p-footer .container { width: calc(.8974358974 * var(--vw)); } }
.p-footer .top { display: flex; justify-content: space-between; }
.p-footer .top .f-title { width: calc(.390625 * var(--vw)); font-size: 3.2407407407vw; line-height: .9; margin-bottom: 30px; letter-spacing: -1px; color: #fff; }
.p-footer .navigation-list li { transition: opacity .25s ease-out; margin-bottom: 10px; line-height: .75; opacity: .5; cursor: pointer; }
.p-footer .navigation-list li:hover, .p-footer .navigation-list li.is-active { opacity: 1; }
.p-footer .subtitle { font-size: 1.8518518519vw; line-height: 1; color: #fff; }
.p-footer .navigation-list a { color: #fff; }
.p-footer .separator { width: 100%; height: 1px; background-color: var(--white); opacity: .5; margin: 50px 0; display: block; }
.p-footer .bottom { display: flex; justify-content: space-between; }
.p-footer .bottom .column-block { max-width: calc(.2297453704 * var(--vw)); }
.p-footer .bottom .column-block li { font-size: 1.3888888889vw; color: #fff; }
.p-footer .bottom .column-block li a { display: flex; align-items: center; gap: 10px; }
.p-footer .bottom .column-block li a:hover .f-arrow { transform: translate3d(5px, 0, 0); }
.p-footer .bottom .column-block li a .f-arrow { transition: transform .25s ease-out; width: 16px; fill: #fff; }
.p-footer .bottom .column-block:not(.column-links) li { margin-bottom: 5px; opacity: .5; }
.p-footer .bottom .column-title { margin-bottom: 30px; color: var(--white); display: block; }
@media (max-width: 800px) {
  .p-footer .top { flex-direction: column; gap: 50px; }
  .p-footer .top .f-title { font-size: 10.2564102564vw; width: calc(.8974358974 * var(--vw)); }
  .p-footer .navigation-list ul { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); }
  .p-footer .navigation-list ul li { font-size: 6.1538461538vw; line-height: .9; }
  .p-footer .bottom { display: grid; grid-template-columns: calc(.4358974359 * var(--vw)) calc(.4358974359 * var(--vw)); justify-content: inherit; grid-template-rows: auto auto; gap: 30px calc(.0256410256 * var(--vw)); }
  .p-footer .bottom .column-block { max-width: inherit; }
  .p-footer .bottom .column-block li { font-size: 4.1025641026vw; margin-bottom: 5px; }
  .p-footer .bottom .column-block:last-child { grid-column: 2 / span 1; }
  .p-footer .bottom .column-block:not(.column-links) li { margin-bottom: 10px; opacity: .5; }
  .p-footer .bottom .subtitle { display: none; }
}

/* ==========================================================================
   CAREER PAGE
   ========================================================================== */
.career .section { width: calc(.9537037037 * var(--vw)); margin: 0 auto 150px; }
@media (max-width: 800px) { .career .section { width: calc(.8974358974 * var(--vw)); margin: 0 auto var(--spacer-l); } }
.career .c-title { font-size: 6.9444444444vw; letter-spacing: -.1736111111vw; line-height: .8; margin-bottom: 150px; color: #000; }
@media (max-width: 800px) { .career .c-title { font-size: 12.3076923077vw; margin-bottom: var(--spacer-s); } }
.career .c-content { font-size: 1.1574074074vw; line-height: 1.3; font-weight: 300; color: var(--grey); }
.career .c-content p { display: block; color: var(--grey); }
@media (max-width: 800px) { .career .c-content { font-size: 4.1025641026vw; } }
.career .intro .big-title { font-size: 17.5347222222vw; line-height: .8; text-align: center; margin-bottom: 70px; letter-spacing: -1.1574074074vw; color: #000; display: block; }
.career .intro .container { display: grid; grid-template-columns: calc(.3101851852 * var(--vw)) calc(.4710648148 * var(--vw)); gap: calc(.1724537037 * var(--vw)); align-items: end; }
.career .intro .container .c-content { margin-bottom: 30px; }
.career .intro .container .cover { aspect-ratio: 814 / 669; width: 100%; height: 100%; }
.career .intro .hiring { margin-top: 30px; }
@media (max-width: 800px) {
  .career .intro .big-title { font-size: 14.1025641026vw; letter-spacing: -.5128205128vw; }
  .career .intro .container { grid-template-columns: 1fr; grid-template-rows: repeat(3, auto); }
  .career .intro .container .c-content { width: calc(.6666666667 * var(--vw)); }
  .career .intro .container .cover { grid-row: 1; width: calc(.6666666667 * var(--vw)); margin-left: calc(.2307692308 * var(--vw)); }
}
.career .values { width: 100%; padding: 150px 0; min-height: 100dvh; overflow: hidden; position: relative; margin: 0 0 150px; }
.career .values .container { width: calc(.9537037037 * var(--vw)); margin: 0 auto; position: relative; z-index: 1; display: grid; grid-template-columns: calc(.4710648148 * var(--vw)) calc(.390625 * var(--vw)); gap: calc(.0920138889 * var(--vw)); }
.career .values .c-title { font-size: 5.787037037vw; }
.career .values .background { background-color: var(--green); position: absolute; top: 0; z-index: 0; width: 100%; height: 100%; padding: 0; left: 0; }
.career .cover-wide { width: calc(.9537037037 * var(--vw)); height: 100%; aspect-ratio: 1647 / 847; display: block; }
@media (max-width: 800px) {
  .career .values { padding: 50px 0; }
  .career .values .container { width: calc(.8974358974 * var(--vw)); grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .career .values .c-title { grid-row: 1; }
}
.career .work { width: calc(.7928240741 * var(--vw)); }
.career .work .header-grid { margin: 0 auto; display: grid; grid-template-columns: calc(.390625 * var(--vw)) calc(.2297453704 * var(--vw)); gap: calc(.1724537037 * var(--vw)); }
.career .work .header-grid .c-title { margin-bottom: 50px; }
.career .work .header-grid .c-content { width: calc(.3101851852 * var(--vw)); }
.career .work .header-grid .side-image { width: 100%; height: 100%; aspect-ratio: 391 / 269; }
.career .work .separator { height: 1px; width: 100%; background-color: var(--black); margin: 100px 0 50px; display: block; }
.career .work .keyword-container { display: grid; width: calc(.7123842593 * var(--vw)); grid-template-columns: calc(.3101851852 * var(--vw)) calc(.3101851852 * var(--vw)); gap: calc(.0920138889 * var(--vw)); }
.career .work .keyword { font-size: 2.8935185185vw; letter-spacing: -.0578703704vw; display: flex; gap: 1.1574074074vw; align-items: center; line-height: .8; margin-bottom: 20px; opacity: .2; transition: all .25s ease-out; color: #000; cursor: pointer; }
.career .work .keyword .k-arrow { opacity: 0; width: 1.3310185185vw; transform: translate3d(-10px, 0, 0); transition: all .25s ease-out; stroke: #000; fill: none; }
.career .work .keyword.isActive, .career .work .keyword:hover { cursor: pointer; opacity: 1; }
.career .work .keyword.isActive .k-arrow, .career .work .keyword:hover .k-arrow { display: block; opacity: 1; transform: translateZ(0); }
@media (max-width: 800px) {
  .career .work { width: calc(.8974358974 * var(--vw)); }
  .career .work .header-grid { grid-template-columns: calc(.6666666667 * var(--vw)); }
  .career .work .header-grid .c-title { margin-bottom: 30px; }
  .career .work .header-grid .c-content { width: calc(.6666666667 * var(--vw)); }
  .career .work .header-grid .side-image { display: none; }
  .career .work .separator { margin: 30px 0; }
  .career .work .keyword-container { grid-template-columns: calc(.8974358974 * var(--vw)); }
  .career .work .keyword { opacity: 1; font-size: 8.2051282051vw; margin-bottom: 0; display: inline-flex; }
}
.career .welcome { display: grid; grid-template-columns: calc(.390625 * var(--vw)) calc(.4710648148 * var(--vw)); gap: calc(.0920138889 * var(--vw)); }
.career .welcome .desktop-only { display: flex; flex-direction: column; justify-content: space-between; }
.career .welcome .cover { width: 100%; height: 100%; aspect-ratio: 675 / 744; grid-row: 1 / span 2; grid-column: 2; }
.career .welcome .c-title { margin-bottom: 0; }
.career .welcome .c-content { width: calc(.3101851852 * var(--vw)); margin-left: calc(.0804398148 * var(--vw)); }
@media (max-width: 800px) {
  .career .welcome { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .career .welcome .cover { grid-row: 2 / span 1; grid-column: 1; width: calc(.6666666667 * var(--vw)); }
  .career .welcome .c-content, .career .welcome .c-title { width: calc(.6666666667 * var(--vw)); margin-left: calc(.2307692308 * var(--vw)); }
  .career .welcome .c-content { grid-column: inherit; }
}
/* dropdown */
.dropdown { padding: 40px 0; opacity: 0; position: relative; cursor: pointer; display: block; }
.dropdown .d-inner { display: flex; flex-direction: column; justify-content: space-between; }
.dropdown .d-bar { position: absolute; left: 0; width: 100%; height: 1px; background-color: var(--black); }
.dropdown .d-bar.top { top: 0; }
.dropdown .d-bar.bot { bottom: 0; }
.dropdown .d-header { display: grid; grid-template-columns: 1fr 1.7939814815vw; align-items: center; }
.dropdown .d-title { font-size: 2.3148148148vw; line-height: 1.2; font-weight: 350; color: #000; }
.dropdown .d-cross { width: 100%; transition: transform .35s var(--ease-out-quart); fill: #000; }
.dropdown.is-open .d-cross { transform: rotate(-135deg); }
.dropdown .d-content { width: calc(.3101851852 * var(--vw)); margin-top: 100px; font-weight: 300; font-size: 1.1574074074vw; line-height: 1.3; color: var(--grey); overflow: hidden; }
.dropdown .d-content p { display: block; color: var(--grey); }
@media (max-width: 800px) {
  .dropdown .d-header { grid-template-columns: calc(.2051282051 * var(--vw)) calc(.6666666667 * var(--vw)); gap: calc(.0256410256 * var(--vw)); align-items: start; }
  .dropdown .d-header .d-title { font-size: 7.1794871795vw; grid-column-start: 2; }
  .dropdown .d-header .d-cross { grid-column-start: 1; grid-row: 1; width: 8.2051282051vw; }
  .dropdown .d-content { width: calc(.8974358974 * var(--vw)); font-size: 4.1025641026vw; }
}

/* ==========================================================================
   MISC
   ========================================================================== */
.skip { position: absolute; left: -9999px; }

/* running copy uses the light cut (weight 300 in the reference) */
.studio .s-content, .career .c-content, .dropdown .d-content, .info-bubble .ib-desc, .studio .team .member .name,
.studio .team .member .position, .appventure .app-single .a-desc, .home .text-desc, .p-footer .bottom .column-block li { font-family: var(--font-light); }
.studio .team .member .name, .studio .team .member .position { font-weight: 300; }
.home .text-desc { font-weight: 300; }

/* ==========================================================================
   KAWAII-BOO THEME LAYER (type, buttons, form, photo tiles)
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

/* wordmark (typeset stand-in until the real transparent logo arrives) */
.wm { display: flex; align-items: center; gap: 10px; font-family: var(--font-script); font-weight: 400; font-size: 34px; line-height: 1; letter-spacing: .04em; margin-top: -2px; color: var(--grey); }
.wm .wm-face { width: 44px; height: auto; flex: none; overflow: visible; }
.wm .wm-text { display: block; padding-top: 4px; }
@media (max-width: 800px) { .wm { font-size: 27px; } .wm .wm-face { width: 36px; } }

/* loader */
.loader svg.loader-logo { width: 112px; height: auto; }
.loader .percent { font-family: var(--font-display); font-weight: 400; }
.loader .sentence { font-family: var(--font-script); font-size: 30px; font-weight: 400; letter-spacing: .04em; }

/* ghost word + menu titles */
.ghost-title { font-family: var(--font-display); letter-spacing: -.01em; font-weight: 400; }
.navigation .titles p { font-family: var(--font-display); letter-spacing: 0; font-weight: 400; }
.home .text-desc { font-size: 17px; color: var(--grey-80); }
.home .text-desc.footer { color: var(--grey-70); }

/* buttons: round, ink-outlined, butter-filled on the light cards */
.header .button-talents span, .button-square span { font-family: var(--font-social); letter-spacing: .1em; font-weight: 600; }
.header .button-talents span { font-size: 13px; }
.enter-btn .right-side { font-family: var(--font-social); letter-spacing: .02em; }
.enter-btn .right-side p { font-family: var(--font-ui); letter-spacing: .04em; }
.button-outline { font-family: var(--font-social); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; border-radius: 999px; height: 52px; padding: 0 26px; border-width: 2px; }
.page .button-outline { border-color: var(--grey); color: var(--grey); background: var(--butter); }
.page .button-outline svg { stroke: var(--grey); }
.page .button-outline::before { background: var(--grey); }
@media (min-width: 800px) {
  .page .button-outline:hover p { color: var(--cream); }
  .page .button-outline:hover svg { stroke: var(--cream); }
}
.page .appventure .button-outline, .page .p-footer .button-outline, .page .button-outline.on-dark { border-color: #fff; color: #fff; background: transparent; }
.page .appventure .button-outline svg, .page .p-footer .button-outline svg, .page .button-outline.on-dark svg { stroke: #fff; }
.page .appventure .button-outline::before, .page .p-footer .button-outline::before, .page .button-outline.on-dark::before { background: #fff; }
@media (min-width: 800px) {
  .page .appventure .button-outline:hover p, .page .p-footer .button-outline:hover p, .page .button-outline.on-dark:hover p { color: var(--grey); }
  .page .appventure .button-outline:hover svg, .page .p-footer .button-outline:hover svg, .page .button-outline.on-dark:hover svg { stroke: var(--grey); }
}
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* page titles are script, statements and numbers are chunky */
.studio .s-title, .career .c-title { font-family: var(--font-script); font-weight: 400; letter-spacing: 0; line-height: 1.1; color: var(--grey); font-size: 8vw; margin-bottom: 110px; }
@media (max-width: 800px) { .studio .s-title, .career .c-title { font-size: 15vw; margin-bottom: var(--spacer-s); } }
.studio .intro .title { font-family: var(--font-display); font-weight: 400; font-size: 3.3vw; line-height: 1.1; letter-spacing: -.005em; color: var(--grey); }
@media (max-width: 800px) { .studio .intro .title { font-size: 7.4vw; } }
.studio .s-content, .career .c-content, .dropdown .d-content { font-family: var(--font-light); font-weight: 400; font-size: 1.32vw; line-height: 1.4; color: var(--grey); }
@media (max-width: 800px) { .studio .s-content, .career .c-content, .dropdown .d-content { font-size: 4.6vw; } }
.career .intro .big-title { font-family: var(--font-script); font-weight: 400; font-size: 22vw; line-height: .95; letter-spacing: 0; margin-bottom: 40px; color: var(--grey); }
@media (max-width: 800px) { .career .intro .big-title { font-size: 28vw; letter-spacing: 0; } }
.career .values .c-title { font-size: 7vw; }
.dropdown .d-title { font-family: var(--font-display); font-weight: 400; font-size: 2.1vw; letter-spacing: 0; color: var(--grey); }
.dropdown .d-bar { background-color: var(--grey); height: 2px; border-radius: 2px; }
.dropdown .d-cross { fill: var(--grey); }
@media (max-width: 800px) { .dropdown .d-header .d-title { font-size: 6.4vw; } }
.career .work .separator { background-color: var(--grey); height: 2px; }
.career .work .keyword { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; color: var(--grey); font-size: 2.7vw; }
.career .work .keyword .k-arrow { stroke: var(--grey); }
.studio .team_content { font-family: var(--font-light); font-size: 2.5vw; line-height: 1.28; color: var(--grey); }
@media (max-width: 800px) { .studio .team_content { font-size: 6.6vw; } }
.studio .team .team_members .member .name { font-family: var(--font-display); font-weight: 400; font-size: 1.5vw; color: var(--grey); }
.studio .team .team_members .member .position { font-family: var(--font-light); font-weight: 400; font-size: 1.2vw; color: var(--grey-70); }
@media (max-width: 800px) { .studio .team .team_members .member .name { font-size: 4.2vw; } .studio .team .team_members .member .position { font-size: 3.4vw; } }
.studio .sliding-caption .caption { font-family: var(--font-display); font-weight: 400; color: var(--grey); font-size: 12vw; }
.studio .sliding-caption .caption .loader-logo { width: 9vw; }
.studio .sliding-caption .caption .loader-logo path { stroke: var(--grey); stroke-width: 2; fill: var(--pink); }
.p-footer .f-title, .p-footer .subtitle { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; }
.p-footer .f-title { line-height: 1.05; }
.info-bubble { background: #fff; border: 2px solid var(--grey); }
.info-bubble .ib-title { font-family: var(--font-display); color: var(--grey); line-height: 1; }
.info-bubble .ib-desc { font-family: var(--font-light); font-weight: 400; color: var(--grey); font-size: 1.3vw; }

/* photos */
.reveal-img { border-radius: 22px; }
.reveal-img > .art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.appventure .single-cover img, .appventure .app-single .cover img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.appventure .single-cover { border-radius: 18px; overflow: hidden; }
@media (max-width: 800px) { .appventure .app-single .cover { aspect-ratio: 4 / 5; } .appventure .app-single .a-desc { font-weight: 400; } }
.studio .team .team_members .team-row { grid-template-columns: repeat(4, calc(.2086 * var(--vw))); }
.studio .team .team_members .team-row:nth-child(2n) { right: calc(.1 * var(--vw)); }
.studio .team .team_members .member .cover.cat { aspect-ratio: 1 / 1.1; border-radius: 24px; padding: 6%; display: grid; place-items: center; overflow: hidden; }
.studio .team .team_members .member .cover.cat svg { width: 100%; height: 100%; }

/* contact form (the all: unset reset means every field is styled here) */
.kb-form { display: grid; gap: 18px; margin-top: 34px; width: calc(.3601851852 * var(--vw)); }
.kb-form label { display: grid; gap: 7px; }
.kb-form label span { font-family: var(--font-ui); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-70); }
.kb-form input, .kb-form textarea { display: block; width: 100%; padding: 14px 18px; border: 2px solid var(--grey); border-radius: 16px; background: #fff; color: var(--grey); font-family: var(--font-light); font-size: 18px; line-height: 1.3; cursor: text; transition: box-shadow .25s, border-color .25s; }
.kb-form textarea { resize: vertical; min-height: 104px; }
.kb-form input:focus-visible, .kb-form textarea:focus-visible { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(70, 173, 165, .28); }
.kb-form .kb-send { justify-self: start; margin-top: 4px; }
.kb-note { min-height: 1.4em; font-family: var(--font-light); font-size: 17px; line-height: 1.35; color: var(--grey); }
@media (max-width: 800px) { .kb-form { width: 100%; } .career .work .header-grid .c-content { width: 100%; } .kb-form input, .kb-form textarea { font-size: 17px; } }

@media (prefers-reduced-motion: reduce) {
  .studio .sliding-caption .caption:first-child, .studio .sliding-caption .caption:last-child { animation: none; }
}

/* readability fixes */
.studio .appventure .s-title { color: #fff; }
.studio .s-content p + p, .career .c-content p + p, .dropdown .d-content p + p { margin-top: .75em; }
.studio .appventure .s-title { font-size: 7vw; }

@media (max-width: 800px) {
  .career .work .keyword { font-size: 8.4vw; margin-bottom: 4px; }
  .studio .third_section .s-title { margin-bottom: 24px; }
}

/* nav call button: real vertical padding (the box is still 50px tall, content stays centred) */
.button-square { padding: 8px 20px; }

/* ==========================================================================
   BIG BACK WORD + BIG CENTRED "DISCOVER" PILL
   ========================================================================== */
/* the word behind the stickers: solid, with a coloured under-edge so it reads on every world */
.ghost-title {
  font-size: 27vw; color: rgba(255, 255, 255, .97);
  text-shadow: 0 .55vw 0 var(--ghost-edge, rgba(255, 134, 182, .55)), 0 1.3vw 2.6vw rgba(62, 37, 16, .12);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 74%, rgba(0, 0, 0, .35) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 74%, rgba(0, 0, 0, .35) 100%);
}
.ghost-title[data-w="home"] { --ghost-edge: rgba(255, 134, 182, .6); }
.ghost-title[data-w="shop"] { --ghost-edge: rgba(24, 112, 106, .5); }
.ghost-title[data-w="visit"] { --ghost-edge: rgba(240, 160, 40, .6); }

/* Discover pill: centred, big, with a tapping hand and a pulse ring */
.enter-btn {
  --h: 88px; --ping: #ff86b6;
  height: var(--h); min-width: 310px; width: max-content; left: 0; right: 0; margin: 0 auto; top: auto; bottom: 50px;
  background: none; cursor: pointer;
}
.enter-btn[data-pill="butter"] { --ping: #ffc83d; }
.enter-btn[data-pill="mint"] { --ping: #46ada5; }
.enter-btn .back { box-shadow: 0 12px 30px rgba(62, 37, 16, .18), 0 0 0 3px var(--grey); }
.enter-btn .arrow-circle { height: calc(var(--h) - 16px); width: calc(var(--h) - 16px); top: 8px; left: 8px; border-radius: 50%; }
.enter-btn .arrow-circle .arrow { width: 26px; left: calc((var(--h) - 16px - 26px) / 2); stroke-width: 1.6; }
.enter-btn .right-side { padding: 0 40px 0 calc(var(--h) + 20px); font-size: 28px; line-height: 1.1; }
.enter-btn .right-side p { font-size: 15px; margin-bottom: 2px; }
.enter-btn .enter { left: 40px; }
.enter-btn .enter span { font-size: 30px; transform: translateY(34px); }
.enter-btn:hover .arrow-circle .arrow { left: calc(100% - 54px); }
.eb-ping { position: absolute; inset: 0; border-radius: 200px; border: 4px solid var(--ping); opacity: 0; pointer-events: none; animation: eb-ping 2.2s ease-out infinite; }
.eb-hand {
  position: absolute; right: -22px; bottom: -40px; width: 58px; pointer-events: none; transform-origin: 30% 10%;
  filter: drop-shadow(0 4px 0 rgba(59, 36, 20, .2)); animation: eb-tap 1.6s ease-in-out infinite;
}
.enter-btn:hover .eb-hand, .enter-btn:focus-visible .eb-hand { animation-duration: .7s; }
.enter-btn:focus-visible { outline: 4px solid var(--teal); outline-offset: 6px; }
@keyframes eb-ping { 0% { transform: scale(1); opacity: .75; } 70%, 100% { transform: scale(1.22, 1.5); opacity: 0; } }
@keyframes eb-tap { 0%, 100% { transform: rotate(-24deg) translate(0, 0); } 40% { transform: rotate(-24deg) translate(-9px, -13px); } 55% { transform: rotate(-24deg) translate(-9px, -13px) scale(.92); } 70% { transform: rotate(-24deg) translate(0, 0); } }
@media (prefers-reduced-motion: reduce) { .eb-ping { display: none; } .eb-hand { animation: none; transform: rotate(-24deg); } }

@media (max-width: 800px) {
  .ghost-title { font-size: 34vw; top: 11vh; margin-top: 0; }
  .enter-btn { --h: 72px; min-width: 262px; top: 27vh; bottom: auto; }
  .enter-btn .right-side { font-size: 23px; padding-right: 30px; }
  .enter-btn .right-side p { font-size: 13px; }
  .enter-btn .enter { left: 30px; }
  .enter-btn .enter span { font-size: 24px; }
  .eb-hand { width: 46px; right: -14px; bottom: -32px; }
}

/* ==========================================================================
   ACCESSIBILITY + LEGAL LAYER
   (text contrast, focus rings, pause-animations button, legal strip, keyboard-operable controls)
   ========================================================================== */
:root { --ink-soft: #5b4431; }   /* quiet text that still passes 4.5:1 on the pale backgrounds */

/* small text that used to be a faded brown */
.home .text-desc, .home .text-desc.footer { color: var(--ink-soft); }
.navigation .links, .navigation .links p { color: var(--ink-soft); }
.enter-btn .right-side p { color: var(--ink-soft); }
.page .ariane { color: var(--ink-soft); }
.page .ariane .home-link { text-decoration: underline; text-underline-offset: 3px; }
/* large menu words: dimmed, but still 3:1 */
.navigation .titles p { color: var(--grey-60); }
.navigation .titles p a { display: block; color: inherit; }
.navigation .titles p:hover, .navigation .titles p:focus-within { color: var(--grey); }
/* contact options on the Visit card: dimmed, but readable */
@media (min-width: 801px) { .career .work .keyword { opacity: .65; } }

/* focus rings: dark ring plus a white halo, so it shows on pale and on dark backgrounds alike */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--grey); outline-offset: 3px; box-shadow: 0 0 0 6px #fff;
}
.kb-form input:focus-visible, .kb-form textarea:focus-visible { outline: 3px solid var(--grey); border-color: var(--grey); box-shadow: 0 0 0 6px #fff; }
.enter-btn:focus-visible { outline: 4px solid var(--grey); outline-offset: 6px; box-shadow: 0 0 0 10px #fff; }
.apps-container:focus-visible { border-radius: 14px; }

/* pause / play animations */
.motion-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 2px solid var(--grey); border-radius: 999px;
  background: #fff; color: var(--grey); font-family: var(--font-social); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
  line-height: 1; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s;
}
.motion-btn:hover { background: var(--grey); color: #fff; }
.motion-btn .ic { width: 12px; height: 12px; flex: none; }
.motion-btn .ic-play { display: none; }
html.motion-off .motion-btn .ic-pause { display: none; }
html.motion-off .motion-btn .ic-play { display: block; }
.motion-btn.card-motion { position: absolute; top: 43px; right: calc(var(--layout-margin) + 44px); z-index: 3; }
@media (max-width: 800px) { .motion-btn.card-motion { top: 27px; right: calc(var(--layout-margin) + 38px); height: 34px; padding: 0 11px; font-size: 12px; } }
.menu-extra { margin-top: 20px; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.navigation .links .legal-row { display: flex; gap: 16px; margin-top: 0; font-size: 14px; }
.navigation .links .legal-row a { font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
html.motion-off .studio .sliding-caption .caption { animation: none !important; }
html.motion-off .eb-ping { display: none; }
html.motion-off .eb-hand { animation: none; transform: rotate(-24deg); }

/* real buttons and links where the layout used to have clickable boxes */
.dropdown .d-h { display: block; }
.dropdown .d-header { width: 100%; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.career .work .keyword { text-align: left; }
.p-footer .navigation-list a { display: block; }
.p-footer .navigation-list li:focus-within { opacity: 1; }

/* footer legal strip */
.p-footer .legal-strip {
  margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .35); display: flex; justify-content: space-between; align-items: flex-start; gap: 28px;
  font-family: var(--font-light); font-size: 16px; line-height: 1.45; color: rgba(255, 255, 255, .85);
}
.p-footer .legal-strip p { max-width: 640px; }
.p-footer .legal-strip nav { display: flex; gap: 24px; flex-wrap: wrap; }
.p-footer .legal-strip a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 800px) { .p-footer .legal-strip { flex-direction: column; margin-top: 40px; font-size: 15px; } }
.p-footer .legal-strip p { color: rgba(255, 255, 255, .88); }

.navigation .links .hours-line { margin: 0; font-size: 15px; letter-spacing: .02em; color: var(--ink-soft); }

/* ==========================================================================
   TOUCH TARGETS: every control is at least 44px in its short side on phones
   (the Close icon everywhere). Visual sizes stay the same; the tappable box grows.
   ========================================================================== */
.button-cross { top: 36px; right: calc(var(--layout-margin) - 17px); padding: 17px; transform: none; }
@media (max-width: 800px) {
  .button-cross { top: 21px; }
  /* header */
  .header #logo { padding: 8px 0; margin: -8px 0; }
  .header .menu-btn { padding: 8px; margin: -8px; }
  #visitBtn { display: flex; align-items: center; padding: 2px 0; margin: -2px 0; }
  .button-talents { height: 40px; padding: 0 20px; margin: 0 20px 0 10px; }
  /* cards */
  .page .ariane { margin-top: 28px; margin-bottom: 40px; display: flex; align-items: center; }
  .page .ariane .home-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 9px; margin: 0 -9px; }
  .motion-btn { height: 44px; padding: 0 14px; }
  .motion-btn.card-motion { top: 22px; height: 44px; }
  .dropdown .d-header { min-height: 44px; }
  .career .work .keyword { min-height: 44px; align-items: center; }
  /* footer */
  .p-footer a { display: flex; align-items: center; min-height: 44px; }
  .p-footer .navigation-list li, .p-footer .bottom .column-block li { margin-bottom: 0; }
  .p-footer .legal-strip nav a { display: inline-flex; padding: 0 8px; margin: 0 -8px; }
  /* menu overlay */
  .navigation .links a { display: inline-flex; align-items: center; min-height: 44px; }
  .navigation .links p { margin-top: 0; }
}

.work-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* Visit card: opening hours chip + call/directions buttons first on phones */
.open-line { display: inline-block; margin: 0 0 22px; padding: 9px 18px; background: var(--butter); border: 2px solid var(--grey); border-radius: 999px; font-family: var(--font-social); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); }
@media (max-width: 800px) {
  .career .intro .container { grid-template-rows: none; }
  .career .intro .container > div:first-child { display: contents; }
  .career .intro .container .open-line { grid-row: 1; justify-self: start; margin-bottom: 18px; }
  .career .intro .container .btn-row { grid-row: 2; margin: 0 0 34px; }
  .career .intro .container .cover { grid-row: 3; }
  .career .intro .container .c-content { grid-row: 4; margin-top: 34px; }
}

.button-cross { border-radius: 50%; }
.work-actions .button-outline { white-space: nowrap; }
@media (max-width: 800px) {
  .career .intro .container { row-gap: 0; }
  .career .intro .container .btn-row { margin-bottom: 30px; }
  .career .work .keyword { display: flex; width: 100%; }
}

/* phones: the menu's link block gets a soft solid backing so small links never sit directly on the preview photo */
@media (max-width: 800px) {
  .navigation .links { background: rgba(255, 251, 234, .94); padding: 10px 16px; border-radius: 18px; right: 4vw; }
}
@media (max-width: 800px) { .navigation .titles { margin-top: 96px; } }

/* ==========================================================================
   UI/UX AUDIT FIXES (2026-10-28)
   ========================================================================== */
/* Visit card: address chip under the hours chip (the answer to "where are you") */
.open-line.address-line { display: block; width: fit-content; max-width: 100%; margin-top: -6px; background: #fffbea; text-transform: none; letter-spacing: .02em; font-size: 15px; line-height: 1.35; border-radius: 20px; }
@media (max-width: 800px) {
  .career .intro .container .address-line { grid-row: 2; justify-self: start; margin: -4px 0 18px; }
  .career .intro .container .btn-row { grid-row: 3; }
  .career .intro .container .cover { grid-row: 4; }
  .career .intro .container .c-content { grid-row: 5; }
}

/* menu: inactive items stay readable over the preview picture */
.navigation .titles p { color: rgba(62, 37, 16, .86); }
.navigation .titles p:hover, .navigation .titles p:focus-within { color: var(--grey); }
.navigation .preview { opacity: .5; }

/* breadcrumb / legal links: WCAG 2.2 target size (24px minimum) */
.page .ariane .home-link { display: inline-flex; align-items: center; min-height: 24px; padding: 0 4px; margin: 0 -4px; }
.navigation .links .legal-row a { display: inline-flex; align-items: center; min-height: 24px; }

/* phones: home tagline says what and where (the long copy is hidden below 800px), scroll hint removed (it collided with the switcher) */
.home .home-tag { display: none; }
@media (max-width: 800px) {
  .home .text-desc.footer { display: none; }
  .home .home-tag {
    display: block; position: fixed; z-index: 1; left: 116px; right: 86px; bottom: 16px; padding: 8px 10px; border-radius: 16px;
    background: rgba(255, 251, 234, .92); color: var(--grey); font-family: var(--font-social); font-size: 13px; line-height: 1.25;
    letter-spacing: .03em; text-align: center; pointer-events: none; box-shadow: 0 4px 14px rgba(62, 37, 16, .12);
  }
  /* menu: titles top-left, the link block sits under them in two columns instead of covering them */
  .navigation .titles { margin-top: 0; padding-top: calc(var(--header-height) + 10px); justify-content: flex-start; }
  .navigation .titles p { top: 0; font-size: 7vh; line-height: 7.6vh; }
  .navigation .links {
    left: var(--layout-margin); right: var(--layout-margin); top: auto; bottom: 86px; text-align: left; padding: 0; background: none;
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; align-items: center;
  }
  .navigation .links .menu-extra { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; }
  .navigation .links .menu-extra .hours-line { flex: 1 1 100%; }
}
@media (max-width: 800px) {
  .home .home-tag br { display: inline; }
  .navigation { justify-content: flex-start; }
  .navigation .titles { padding-top: calc(var(--header-height) + 16px); }
}
/* the chat button must not sit on top of the open menu */
html.nav-open #kbChat .kc-launch, html.nav-open #kbChat .kc-tip { visibility: hidden; }

/* first paint = the real world: the big word is visible at once, the loader is a slow-device fallback */
.loader { opacity: 0; visibility: hidden; }
.loader.show { opacity: 1; visibility: visible; transition: opacity .25s ease-out; }
.ghost-title { opacity: 1; animation: ghost-in .7s cubic-bezier(.23, 1, .32, 1) both; }
@keyframes ghost-in { from { opacity: 0; } to { opacity: 1; } }
html:not(.kb-ready) .world-bg .tone[data-world="home"] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ghost-title { animation: none; } }