/* Local interaction and accessibility layer. Source compositions stay intact. */
html { scrollbar-gutter: stable; }
html.is-scroll-locked { overflow: hidden; }
.skip-link { position: fixed; z-index: 2147483647; top: 10px; left: 10px; padding: 12px 18px; background: #f4f0e7; color: #172c26; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
:focus-visible { outline: 2px dashed currentColor; outline-offset: 4px; }
.demo-form-note { font-family: var(--font-family-accent, 'Courier Prime', monospace); font-size: 12px; line-height: 1.35; opacity: .65; margin: 0 0 4px; }
.contact-form__status { line-height: 1.45; }
.contact-form__status:empty { display: none; }
.benefit-card:focus-within .benefit-card__metric { transform: translate(-50%,-45%) rotate(-7deg); }
.reveal-line-mask { padding-block: .2em; margin-block: -.2em; overflow: clip; }
.reveal-line { will-change: transform; }
model-viewer { --poster-color: transparent; --progress-bar-color: transparent; }
model-viewer::part(default-progress-bar), model-viewer::part(default-ar-button) { display: none; }
.cup-model-surface { width: 100%; height: 100%; background: transparent; pointer-events: none; }
.model-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: none; }
.model-has-error > .model-fallback { display: block; }
.model-has-error > model-viewer { visibility: hidden; }
.hero-transition__model-sticky { position: sticky; }
.hero-fallback { position: absolute; width: 70vmin; height: 70vmin; object-fit: contain; pointer-events: none; transform: translateY(-40px); }
.hero-fallback[hidden] { display: none; }
/* A single JS timeline drives terms consistently across supported browsers. */
.key-terms__media, .key-terms__image, .key-terms__intro,
.key-terms__panel, .key-terms__panel-content { animation: none !important; }
@media (min-width: 1024px) {
  .key-terms__panel { transform: translateX(0); }
  .key-terms__panel-content { transform: translateY(20vh); }
}
/* Explicit closing states allow rapid reopening without losing the top layer. */
dialog.modal.is-closing, dialog.legal.is-closing { clip-path: inset(0 0 100% 0); }
dialog.modal.is-closing .modal__screen,
dialog.modal.is-closing .modal__body { opacity: 0; transition-delay: 0s; }
dialog.modal.is-closing .modal__title-line { translate: 0 110%; transition-delay: 0s; }
dialog.modal.is-closing .modal__cup { translate: 0 80vh; }
.main-menu__panel { overflow-y: auto; overscroll-behavior: contain; }
dialog::before { content: ''; position: fixed; inset: -80px; z-index: 2147483647; background: url('/images/noise.svg') repeat; background-size:80px 80px; pointer-events:none; animation:global-noise .5s steps(1,end) infinite; }
.preloader.is-complete { display: none; }
html:not(.motion-ready) .preloader { pointer-events: none; }
@media (max-width: 1023.98px) {
  .key-terms__media, .key-terms__image, .key-terms__intro,
  .key-terms__panel, .key-terms__panel-content { transform: none !important; }
}
@media (max-width:767.98px) { dialog::before { animation:none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .formats { height: auto !important; }
  .formats__inner { position: relative !important; height: auto !important; overflow: visible !important; }
  .format-slide { position: relative !important; min-height: var(--screen-height,100vh); transform: none !important; }
  [data-js-formats-reveal] { transform: none !important; }
  .footer__wordmark-svg { height: 100% !important; }
  .footer__legal { transform: none !important; }
  .digital__phone { transform: rotate(-10deg) !important; }
  .cup-still { rotate: 0deg !important; }
  .image-button__image { animation: none !important; opacity: 0 !important; }
  .image-button__image:first-child { opacity: 1 !important; }
  .key-terms__panel-content { transform: none !important; }
}
@media (min-width:1024px) and (prefers-reduced-motion:reduce) {
  .key-terms__media { width:50% !important; }
  .key-terms__panel { padding-top:70px; }
}
.webonique-return-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-family-accent, 'Courier Prime', monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ivory, #f4f0e7);
  background: rgba(23, 44, 38, 0.75);
  backdrop-filter: blur(8px);
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(244, 240, 231, 0.25);
  text-decoration: none;
  transition: all 0.25s ease;
  z-index: 9999;
}
.webonique-return-btn:hover {
  background: rgba(244, 240, 231, 0.95);
  color: #172c26;
  border-color: #f4f0e7;
}
.is-recording .webonique-return-btn,
body.is-recording .webonique-return-btn,
[data-recording="true"] .webonique-return-btn {
  display: none !important;
}