/* Shared layout and motion contract. Full experience remains the default. */
:root{--kunis-paper:#f2efe7;--kunis-ink:#173e4f;--kunis-ease:cubic-bezier(.22,.7,.18,1)}
html{scroll-behavior:smooth;scroll-padding-top:100px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.page-preparing,.page-departing{overflow:hidden}.page-preparing body>main{visibility:hidden}
.kb-submenu{z-index:20;min-width:164px;padding:9px;max-height:calc(100svh - 110px);overflow:auto}.kb-submenu[hidden]{display:none!important}.kb-submenu-link{display:flex;align-items:center;min-height:46px;padding:12px 16px}.kb-dropdown-trigger{min-height:44px;gap:6px}.kb-item{touch-action:manipulation}
.kb-contour,.browser-safe-edge,.browser-bottom-edge,[aria-hidden=true].ornament{pointer-events:none}
@media(max-width:700px){#kb-navigation{width:calc(100% - 20px);max-width:560px}.kb-bar{gap:5px;padding-inline:8px}.kb-items{gap:2px}.kb-item{padding-inline:8px;font-size:10px}.kb-space{min-width:0;flex:0}.nav-logo{flex-shrink:0}.theme-toggle{min-width:38px}.theme-toggle-label{display:none}.kb-submenu{left:0;right:auto}}
/* Dynamic viewport already excludes browser chrome: no second safe-area height. */
.apex-page #collection{height:100vh;height:100dvh}
.apex-page .room img{object-fit:cover}
.studio-active .apex-page #stage{height:var(--studio-height,100vh);height:max(100dvh,var(--studio-height,0px));inset:0 0 auto;width:100%;touch-action:pinch-zoom}
.apex-page #product{transform-origin:50% 96.875%}
.studio-active .apex-page #kb-navigation{z-index:70}
/* A continuous handoff, with no blank delay between the stage and content. */
.apex-page #studio-outro{height:clamp(120px,22svh,210px)}
.apex-page .room::after{transition:opacity .55s var(--kunis-ease)}
.apex-page #stage.studio-exited .room::after{opacity:1}
/* Static details live in the open band beneath the assembled logo. */
.coffee-opening-sticky{isolation:isolate}.coffee-opening-sticky>.coffee-assembly{z-index:2}
.intro-detail{position:absolute;left:0;right:0;top:53%;height:24%;overflow:hidden;pointer-events:none;z-index:1;visibility:hidden;color:#236487}
.intro-detailed .intro-detail{visibility:visible}
.intro-detail-title{position:absolute;top:0;left:12%;right:12%;margin:0;text-align:center;font-family:'Bodoni Moda','Summit Bodoni Moda',Georgia,serif;font-size:clamp(19px,2.3vw,30px);font-weight:400;line-height:1.2;letter-spacing:.025em;color:#236487b3}
.intro-detail svg{position:absolute;stroke:currentColor;stroke-width:1;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.25}
.intro-detail .intro-branch{left:-35px;top:36%;width:clamp(180px,29vw,320px);height:auto}
.intro-detail .intro-mini{right:27%;top:42%;width:48px;height:48px;opacity:.32}
.intro-detail.is-compact .intro-detail-title{font-size:18px;line-height:1.15}
.intro-detail.is-compact .intro-branch{top:25px;width:140px}
.intro-detail.is-compact .intro-mini{top:25px;width:26px;height:26px}
@media(max-width:700px){.intro-detail{top:52%;height:26%}.intro-detail-title{font-size:21px}.intro-detail .intro-branch{left:-40px;top:40%;width:220px}.intro-detail .intro-mini{right:19%;top:47%;width:42px;height:42px}}
@media(max-height:560px){.intro-detail{top:57%;height:20%}.intro-detail-title{font-size:18px}.intro-detail .intro-branch{width:160px;top:28%}.intro-detail .intro-mini{width:30px;height:30px;top:40%}}
@media(prefers-reduced-motion:reduce){.site-loader .loader-color use{animation:none;opacity:1}}
noscript .no-script{display:block}

/* Readable contact labels on paper, with a compact 44px glass call target. */
.contact-options{gap:8px;margin-bottom:30px}
.contact-option{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:330px;min-height:48px}
.contact-option>span{font:400 13px/1.5 'Libre Franklin',Arial,sans-serif;color:var(--azure,#173e4f)}
body .contact-options .contact-option button{display:grid;place-items:center;place-content:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:10px;background:linear-gradient(155deg,#4a87a0,#173e4f 70%);box-shadow:inset 0 1px 1px #f5ffffb3,inset 0 -1px 2px #092b3f,0 2px 5px #173e4f20;color:#fff;transition:transform .2s ease}
body .contact-options .contact-option button:hover{padding:0;transform:translateY(-1px)}
body .contact-options .contact-option button:active{transform:translateY(1px)}
.contact-options .phone-icon{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4}
@media(max-width:700px){.contact-option{max-width:none;gap:14px}.contact-options{margin-bottom:0}}

/* One centred invitation above the complete contact card. */
.contact-section .contact-heading{display:block;text-align:center;margin-bottom:clamp(28px,4vw,50px)}
.contact-section .contact-heading h2{width:100%;max-width:none;margin:0;font-size:clamp(44px,6vw,80px);line-height:1.1}

#kb-navigation a[aria-busy="true"]{opacity:.65;cursor:progress}
