/* The site shell (header, phone menu, footer band, demo form). Positions that
   change with the window width are generated from layout.json into each
   page; this file holds everything that doesn't move.

   Nothing here may set an inherited property (font, color, line-height…) on
   html or body: each page document inherits from the page exactly as it
   inherited from the browser's defaults inside its Wix frame. */

html, body { margin: 0; }
body { background: rgb(248, 245, 238); }

/* ---- page documents (each one used to be a frame) ---- */
.frame { container: doc / inline-size; overflow-x: clip; }
.frame > .doc { display: block; }
/* inside a frame, a document that doesn't style its body gets the browser's 8px body margin;
   :where() keeps this at zero specificity so a document's own body rule always wins */
:where(.frame > .doc) { margin: 8px; }
.site-band { display: flow-root; }

/* ---- header ---- */
.site-header { position: relative; }
.site-header > * { position: absolute; box-sizing: border-box; }
.site-rule { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.site-logo { display: block; }
.site-logo picture, .site-logo-img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; }
.site-nav { position: static; }
.site-nav-item {
  position: absolute; display: block; box-sizing: border-box; padding: 0;
  font: 700 16px/22.4px "Space Grotesk", sans-serif; color: rgb(0, 0, 0); text-decoration: none; white-space: nowrap;
}
.site-nav-item span { position: relative; display: block; }
.site-nav-item:hover, .site-nav-item[aria-current="page"] { color: rgb(242, 198, 86); }
.site-nav-item[aria-current="page"] span::after {
  content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 1px; background: rgb(242, 198, 86);
}
.site-cta {
  display: block; background: rgb(253, 216, 59); border-radius: 300px; color: rgb(0, 0, 0); text-decoration: none;
}
.site-cta:hover { background: rgb(242, 198, 86); }
.site-cta > * { position: absolute; }
.site-cta-text { font: 700 15px/normal "Space Grotesk", sans-serif; white-space: nowrap; }
.site-cta-icon { fill: currentColor; }
.site-menu { margin: 0; padding: 0; border: 0; background: transparent; color: rgb(0, 0, 0); cursor: pointer; border-radius: 8px; }
.site-menu-icon { position: absolute; fill: currentColor; }

/* ---- phone and tablet menu ---- */
.site-menu-layer { position: fixed; inset: 0; z-index: 100; }
.site-menu-layer[hidden] { display: none; }
.site-menu-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }
.site-menu-panel {
  position: absolute; top: 0; bottom: 0; right: 0; left: 10%; background: rgb(255, 255, 255);
  transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.site-menu-layer.open .site-menu-panel { transform: none; }
.site-menu-panel nav { position: absolute; left: 20px; right: 20px; top: 24.5px; display: grid; row-gap: 20px; }
.site-menu-item {
  display: block; padding: 8px 0; font: 700 18px/25.2px "Space Grotesk", sans-serif; color: rgb(0, 0, 0); text-decoration: none;
}
.site-menu-item span { position: relative; }
.site-menu-item:hover, .site-menu-item[aria-current="page"] { color: rgb(242, 198, 86); }
.site-menu-item[aria-current="page"] span::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: rgb(242, 198, 86);
}
.site-menu-close {
  position: absolute; top: 25px; right: 20px; width: 40px; height: 40px; margin: 0; padding: 10px; border: 0;
  background: transparent; color: rgb(0, 0, 0); cursor: pointer;
}
.site-menu-close svg { display: block; width: 20px; height: 20px; fill: currentColor; }

/* ---- footer ---- */
.site-footer { background: rgb(0, 0, 0); }

/* ---- demo form (Wix form, redrawn) ---- */
.site-form-card {
  box-sizing: border-box; padding: 24px; background: rgb(255, 255, 255);
  /* Wix draws the border on a layer behind the card, so it takes no room */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); border-radius: 10.1px;
}
.site-form { margin: 0; display: flex; flex-direction: column; font: 400 16px/24px Inter, sans-serif; color: rgb(0, 0, 0); }
.site-form-title { margin: 0; font: 700 23px/34.5px Inter, sans-serif; }
.site-form-intro { margin: 25.5px 0 0; }
.site-form-label { display: block; margin: 24px 0 0; font: 400 14px/19.6px Inter, sans-serif; }
.site-form-label + .site-form-field { margin-top: 8px; }
.site-form-field {
  position: relative; display: flex; align-items: center; box-sizing: border-box; height: 42px; margin-top: 24px; padding: 0 12px 0 0;
  background: rgb(255, 255, 255); border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 6px;
}
.site-form-intro + .site-form-field { margin-top: 24px; }
.site-form-field input {
  flex: 1; min-width: 0; height: 40px; box-sizing: border-box; margin: 0; padding: 8px 2px 8px 0; text-indent: 12px;
  border: 0; border-radius: 6px; background: transparent; outline: none; font: 400 16px/24px Inter, sans-serif; color: rgb(0, 0, 0);
}
.site-form-field input::placeholder { color: rgb(110, 110, 110); opacity: 1; }
.site-form-field:focus-within { border-color: rgba(0, 0, 0, 0.6); }
.site-form-phone input { text-indent: 0; }
.site-form-country {
  display: flex; align-items: center; flex: none; width: 40px; height: 24px; margin: 0 0 0 12px; padding: 0;
  border: 0; background: transparent; color: rgb(0, 0, 0); cursor: pointer;
}
.site-form-country svg:first-child { width: 24px; height: 24px; }
.site-form-country svg:last-child { width: 16px; height: 16px; }
.site-form-submit {
  display: block; width: 100%; margin: 24px 0 0; padding: 11px 15px; border: 0; border-radius: 100px;
  background: rgb(253, 216, 59); color: rgb(0, 0, 0); font: 400 16px/19.2px Inter, sans-serif; text-align: center; cursor: pointer;
}
.site-form-submit:hover { background: rgb(242, 198, 86); }
/* SMS opt-in box: unticked by default; the record saves yes or no with the wording shown (Bo 2026-11-07). */
.site-form-sms { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; font: 400 12.5px/18px Inter, sans-serif; color: rgb(85, 85, 85); text-align: left; cursor: pointer; }
.site-form-sms input { width: 16px; height: 16px; margin: 1px 0 0; flex-shrink: 0; accent-color: rgb(138, 109, 0); }
.site-form-sms strong { color: rgb(20, 20, 20); font-weight: 600; }
.site-form-consent { margin: 12px 0 0; font: 400 12.5px/18px Inter, sans-serif; color: rgb(85, 85, 85); }
.site-form-consent a { color: rgb(0, 0, 0); text-decoration: underline; text-underline-offset: 2px; }
.site-form-consent a:hover { color: rgb(138, 109, 0); }
.site-form-status { margin: 12px 0 0; font: 400 14px/19.6px Inter, sans-serif; }

.site-legal { padding: 14px 16px; text-align: center; font: 13px/1.4 Barlow, Arial, sans-serif; color: #A1A1A6; background: #fff; }
.site-legal a { color: #8A6D00; text-decoration: none; }
.site-legal-note { font-size: 12px; }