/* Broken Egg Labs — contact modal styles (clean, on-brand: cream card, bold
   display headline, playful). Independent of the WordPress theme CSS. */
.bke-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
}
.bke-modal.is-open { display: block; }
.bke-scrim {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 12, 0.55);
  backdrop-filter: blur(4px);
  animation: bke-fade 0.3s ease;
}
.bke-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(540px, 92vw);
  max-height: 92vh;
  overflow: auto;
  background: #f5f1e8;
  border-radius: 26px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.35);
  animation: bke-pop 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.bke-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #1a1410;
  color: #f5f1e8;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
.bke-close:hover { transform: rotate(90deg); background: #000; }
.bke-body { padding: clamp(26px, 5vw, 48px); }
.bke-eyebrow {
  font-family: "glddisplay", system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e0467e;
  margin: 0 0 6px;
}
.bke-title {
  font-family: "glddisplay", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(34px, 7vw, 52px);
  line-height: 0.95;
  color: #1a1410;
  margin: 0 0 12px;
}
.bke-sub { color: #5a544c; font-size: 16px; margin: 0 0 24px; }
.bke-form { display: flex; flex-direction: column; gap: 16px; }
.bke-hp { position: absolute; left: -9999px; opacity: 0; }
.bke-field { display: flex; flex-direction: column; gap: 6px; }
.bke-field span {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1a1410;
}
.bke-field input,
.bke-field textarea {
  font: inherit;
  font-size: 16px;
  padding: 13px 16px;
  border: 2px solid #d9d2c4;
  border-radius: 14px;
  background: #fffdf8;
  color: #1a1410;
  outline: none;
  transition: border-color 0.2s ease;
  width: 100%;
  resize: vertical;
}
.bke-field input:focus,
.bke-field textarea:focus { border-color: #e0467e; }
.bke-send {
  margin-top: 6px;
  font-family: "glddisplay", system-ui, sans-serif;
  font-weight: 900;
  font-size: 18px;
  padding: 16px 24px;
  border: none;
  border-radius: 999px;
  background: #1a1410;
  color: #f5f1e8;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
.bke-send:hover { transform: translateY(-2px); background: #e0467e; }
.bke-send:disabled { opacity: 0.6; cursor: default; transform: none; }
.bke-status { color: #c2356a; font-size: 14px; min-height: 1em; margin: 4px 0 0; }
.bke-success { display: none; text-align: center; padding: 20px 0; }
.bke-success-emoji { font-size: 48px; margin: 0 0 8px; }
.bke-success h3 { font-family: "glddisplay", system-ui, sans-serif; font-size: 30px; color: #1a1410; margin: 0 0 8px; }
.bke-success p { color: #5a544c; font-size: 16px; margin: 0; }
.bke-body.is-sent .bke-form,
.bke-body.is-sent .bke-eyebrow,
.bke-body.is-sent .bke-title,
.bke-body.is-sent .bke-sub { display: none; }
.bke-body.is-sent .bke-success { display: block; }

@keyframes bke-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bke-pop { from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* ---------------------------------------------------------------- replacement nav
   The original <header> is GSAP-pinned and folds jankily (only on the homepage),
   and GSAP sets its transform with inline !important so it can't be controlled.
   We hide it and use our own fixed clone (.bke-nav) that we fully control: a smooth
   auto-hide on scroll, consistent on every page, with correct light/dark colours. */
header:not(.bke-nav) { visibility: hidden !important; pointer-events: none !important; }
.bke-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  pointer-events: none;
  transition: transform 0.85s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
  will-change: transform;
}
.bke-nav.bke-preload-wait { opacity: 0; pointer-events: none; }
.bke-nav a,
.bke-nav .wrapper { pointer-events: auto; }
.bke-nav.bke-hide { transform: translateY(-130%); }
/* our nav is a <div>, so the theme's `header .logo svg` / `header .wrapper` rules
   don't match it — replicate the logo sizing and spacing here */
.bke-nav .wrapper { margin: 1.5rem 0; }
.bke-nav .logo svg { width: 5.3rem; }
@media (min-width: 48em) {
  .bke-nav .wrapper { margin: 2rem 0; }
  .bke-nav .logo svg { margin-right: 10em; }
}
@media (min-width: 90em) {
  .bke-nav .logo svg { width: 10.25rem; }
}
/* light text + logo on dark pages */
.bke-nav.is-dark #site-navigation .menu a { color: #f7f6f1 !important; }
.bke-nav.is-dark .logo .st0,
.bke-nav.is-dark .logo svg path { fill: #f7f6f1 !important; }
/* dark text + logo on light pages */
.bke-nav:not(.is-dark) #site-navigation .menu a { color: #2d2d2d !important; }
.bke-nav:not(.is-dark) .logo .st0,
.bke-nav:not(.is-dark) .logo svg path { fill: #2d2d2d !important; }

@media (prefers-reduced-motion: reduce) {
  .bke-nav { transition: none; }
}

/* ---------------------------------------------------------------- page transition
   Blur-and-unblur, matching the contact modal's scrim. On navigation we fade in a
   blurred translucent layer that covers the swap AND the theme's post-swap layout
   settle (so the new page never "blinks into place"), then fade it back out to reveal
   the settled page. Sits above content, below the modal. */
/* Soft dissolve. backdrop-filter / filter blur won't render over the theme's
   transforming content during a swap (the modal blur only works because that page is
   static), so we use a gentle same-colour fade instead of a hard wipe: the cover is
   set to the page's own background colour in JS, fades in (current page dissolves
   away), holds through the swap + layout settle, then fades out (new page dissolves
   in). No hard dark block, no blink. */
.bke-cover {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  background: rgba(20, 16, 12, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  /* force our own GPU layer so we paint above ASScroll's composited content */
  transform: translateZ(0);
  will-change: opacity;
  transition: opacity 0.55s ease;
}
.bke-cover.is-in {
  opacity: 1;
  pointer-events: all;
}
@media (prefers-reduced-motion: reduce) {
  .bke-cover { transition: opacity 0.3s ease; }
}

/* ---------------------------------------------------------------- Process slider
   The original GSAP pin-scroll for "The Process" never initialises (its track has
   no transform), so the section is stuck. Make it a clean drag-to-scroll strip
   instead (drag / wheel / swipe). GSAP isn't driving the track, so no conflict. */
#sectionPin {
  height: auto !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}
#sectionPin::-webkit-scrollbar { display: none; }
#sectionPin.bke-dragging { cursor: grabbing; }
#sectionPin.bke-dragging * { user-select: none; }
#sectionPin .pin-wrap { height: auto !important; }

@media (prefers-reduced-motion: reduce) {
  .bke-scrim, .bke-card { animation: none; }
  .bke-close:hover { transform: none; }
  .bke-send:hover { transform: none; }
}