/* =====================================================================
   Bachmagic — rebuilt from the Webflow export (bach-magic.webflow.css).
   Class names are kept from Webflow so the layout matches 1:1.
   Fonts come from Adobe Fonts kit jkm2yqv (neutronic, franklin-gothic-atf).
   ===================================================================== */

:root {
  --chocolate: #ff6e00;
  --midnight-blue: #3a2565;
  --orange: #ee7a06;
  --font-display: neutronic, sans-serif;
  --font-body: franklin-gothic-atf, sans-serif;
  /* Webflow interaction easings */
  --ease-move: cubic-bezier(0.848, -0.017, 0, 1.001);
  --ease-fade: cubic-bezier(0.766, 0.007, 0, 1.007);
}

/* ---------- base (normalize + Webflow defaults that matter) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100%;
  overflow-x: clip;
  color: #333;
  background-color: var(--midnight-blue);
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
}
img { border: 0; vertical-align: middle; max-width: 100%; display: inline-block; }
a { background-color: transparent; }
input, textarea, button { color: inherit; font: inherit; margin: 0; }
textarea { overflow: auto; }

h1 {
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  line-height: 44px;
}
p {
  letter-spacing: 1px;
  margin-top: 0;
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

/* ---------- Webflow grid / helpers ---------- */
.w-row::before, .w-row::after { content: " "; display: table; grid-area: 1 / 1 / 2 / 2; }
.w-row::after { clear: both; }
.w-col { float: left; width: 100%; min-height: 1px; padding-left: 10px; padding-right: 10px; position: relative; }
.w-col-6 { width: 50%; }
.w-inline-block { max-width: 100%; display: inline-block; }
.w-button {
  color: #fff; line-height: inherit; cursor: pointer; background-color: #3898ec;
  border: 0; border-radius: 0; padding: 9px 15px; text-decoration: none; display: inline-block;
}
input.w-button { -webkit-appearance: button; appearance: button; }
.w-form { margin: 0 0 15px; }
.w-form-done { text-align: center; padding: 20px; }
.w-form-fail { margin-top: 10px; padding: 10px; }
.w-input {
  color: #333; vertical-align: middle; background-color: #fff; border: 1px solid #ccc;
  width: 100%; height: 38px; margin-bottom: 10px; padding: 8px 12px; font-size: 14px;
  line-height: 1.42857; display: block;
}
.w-input::placeholder { color: #999; }
.w-input:focus { border-color: #3898ec; outline: 0; }
textarea.w-input { height: auto; }
.w-nav-brand { float: left; color: #333; text-decoration: none; position: relative; }
[hidden] { display: none !important; }

@media screen and (max-width: 767px) {
  .w-row { margin-left: 0; margin-right: 0; }
  .w-col { width: 100%; left: auto; right: auto; }
}

/* ---------- layout ---------- */
.section { height: 100vh; position: relative; isolation: isolate; }
.padding-global { padding-left: 5%; padding-right: 5%; }
.padding-global.info-section { padding-top: 4rem; }
.container-large { width: 100%; max-width: 80rem; margin-left: auto; margin-right: auto; }
.container-small { width: 100%; max-width: 48rem; margin-left: auto; margin-right: auto; }

.header-100svh { justify-content: flex-end; align-items: center; min-height: 100svh; max-height: 60rem; display: flex; }
.header-100svh.middle-align { justify-content: center; }
.header-100svh-2 { justify-content: center; align-items: center; min-height: 100svh; max-height: 60rem; display: flex; }
.header-100svh-3 { align-items: center; min-height: 100svh; max-height: 60rem; display: flex; }
.padding-section-large { align-items: center; padding-top: 7rem; padding-bottom: 7rem; display: flex; }

.max-width-medium { text-align: center; flex-direction: column; align-items: flex-end; width: 100%; max-width: 40rem; display: flex; }
.max-width-medium-2 { width: 100%; max-width: 30rem; }

/* margins (order matters — mirrors the Webflow stylesheet cascade) */
.margin-bottom { margin-top: 0; margin-left: 0; margin-right: 0; }
.margin-top { margin-bottom: 0; margin-left: 0; margin-right: 0; }
.margin-small { margin: 1.5rem; }
.margin-medium { margin: 2rem; }
.margin-bottom.margin-small { text-align: left; margin-left: 0; margin-right: 0; }
.margin-top.margin-medium { margin-left: 0; }

.text-align-center { text-align: center; }
.text-color-white { color: #fff; }
.text-color-white.align-right { text-align: right; }
.text-size-medium { font-size: 1.125rem; }
.text-size-medium.text-color-white { text-align: left; font-size: 20px; line-height: 28px; }
.text-size-medium.text-color-white.align-right { text-align: right; justify-content: flex-end; max-width: 30rem; display: flex; }
.text-size-medium.text-color-white.middle-align { text-align: center; }

.heading-style-h1 { text-transform: uppercase; font-size: 3.5rem; font-weight: 700; line-height: 1.2; }
.heading-style-h1.white { color: #fff; letter-spacing: 1px; }
.heading-style-h1.white.align-righ { text-align: right; margin-bottom: 0; line-height: 1.2; }
.heading-style-h1.white.middle-align { text-align: center; }
.heading-style-h2 { text-transform: uppercase; font-family: var(--font-display); font-size: 3rem; font-weight: 700; line-height: 1.2; }
.heading-style-h2.white { color: #fff; }
.heading-style-h2.white.margin-16 { margin-bottom: 16px; }

.columns { align-items: center; padding-top: 7rem; padding-bottom: 7rem; display: flex; }
.button-group-2 { gap: 1rem; flex-wrap: wrap; align-items: center; display: flex; }
.waveform { display: block; width: 100%; height: auto; }
.button-wrapper { justify-content: center; width: 100%; margin-top: 2rem; margin-bottom: 2rem; display: flex; }

/* ---------- buttons ---------- */
.button {
  color: #fff;
  text-align: center;
  letter-spacing: 1px;
  background-color: transparent;
  border: 1px solid #ff6f00;
  border-radius: 7px;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  /* hover lift = Webflow "button hover" interaction */
  transition: transform 250ms cubic-bezier(0.965, -0.005, 0, 0.989),
              background-color 200ms ease, border-color 200ms ease;
}
.button:hover {
  border-color: var(--chocolate);
  background-color: var(--chocolate);
  transform: translateY(-10px);
  transition-timing-function: cubic-bezier(0.906, 0.001, 0, 0.995), ease, ease;
}
.button.white { letter-spacing: 1px; border-color: #fff; }
.button.white:hover { border-color: var(--midnight-blue); background-color: var(--midnight-blue); }
.button.submit { justify-self: start; align-self: flex-start; }
.button.submit:hover { transform: none; }
.button[disabled] { opacity: 0.7; cursor: progress; }

/* ---------- navbar ---------- */
.navbar4_component-2 {
  z-index: 1000;
  background-color: transparent;
  align-items: center;
  width: 100%;
  min-height: 4.5rem;
  padding-left: 5%;
  padding-right: 5%;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
}
.navbar4_container-2 { justify-content: space-between; align-items: center; width: 100%; max-width: 80rem; height: 100%; margin-left: auto; margin-right: auto; display: flex; }
.navbar4_logo-link { padding-left: 0; pointer-events: auto; }
.navbarlogo {
  min-width: 100%; max-width: 150px; height: auto; margin-top: 4px;
  opacity: 0;                    /* driven by scroll in main.js */
  transition: opacity 300ms linear;
}

/* ---------- background videos ---------- */
.header7_background-video-wrapper,
.header33_background-video-wrapper { z-index: -1; position: absolute; inset: 0; background-color: #000; }
.video-overlay-layer { z-index: 1; background-color: rgba(0, 0, 0, 0.25); position: absolute; inset: 0; }
.video-overlay-layer-2 { z-index: 1; background-color: rgba(0, 0, 0, 0); position: absolute; inset: 0; }
.bg-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; color: #fff; }
.bg-video video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background-size: cover; background-position: 50% 50%;
  pointer-events: none;
}
.bg-video video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }

.color-div { z-index: -1; background-color: var(--midnight-blue); position: absolute; inset: 0; }
.color-div.orange { background-color: var(--orange); }

/* ---------- intro logo (Webflow "Logo animation" on page load) ---------- */
.intro-logo {
  opacity: 0;
  scale: 0;
  translate: 0 200px;
}
.is-loaded .intro-logo {
  opacity: 1;
  scale: 1;
  translate: 0 0;
  transition:
    opacity 1000ms cubic-bezier(0.561, 0.112, 0, 0.907),
    scale 1000ms cubic-bezier(0.661, -0.005, 0, 0.931),
    translate 500ms cubic-bezier(0.655, 0.024, 0, 0.978);
}

/* ---------- section entrance animations (Webflow "section animation") ---------- */
.anim .a-item { opacity: 0; }
.anim-left  .a-item { translate: -300px 0; }
.anim-right .a-item { translate: 300px 0; }
.anim-up    .a-item { translate: 0 300px; }
.anim .a-scale { scale: 0.5; }

.anim.is-in .a-item {
  opacity: 1;
  translate: 0 0;
  transition: translate 500ms var(--ease-move), opacity 500ms var(--ease-fade);
}
.anim.is-in .a-d1 { transition-delay: 100ms; }
.anim.is-in .a-d2 { transition-delay: 200ms, 200ms, 0ms, 0ms, 0ms; }
.anim.is-in .a-scale { scale: 1; transition: scale 500ms cubic-bezier(0.165, 0.84, 0.44, 1) 300ms; }
/* the button's own hover transition must stay snappy after it has entered */
.anim.is-in .button.a-item {
  transition: translate 500ms var(--ease-move) 200ms, opacity 500ms var(--ease-fade) 200ms,
              transform 250ms cubic-bezier(0.965, -0.005, 0, 0.989), background-color 200ms ease, border-color 200ms ease;
}
.anim.is-in .button.a-item:hover {
  transition: translate 500ms var(--ease-move) 200ms, opacity 500ms var(--ease-fade) 200ms,
              transform 250ms cubic-bezier(0.906, 0.001, 0, 0.995), background-color 200ms ease, border-color 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .intro-logo, .anim .a-item, .anim .a-scale { opacity: 1 !important; translate: none !important; scale: none !important; transition: none !important; }
}

/* ---------- contact modal ---------- */
.pop-up-modal {
  z-index: 2000;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: fixed;
  inset: 0;
  opacity: 0;
}
.pop-up-modal.is-open {
  opacity: 1;
  transition: opacity 500ms cubic-bezier(0.918, -0.005, 0.035, 0.995);
}
.modal-backround { backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); background-color: rgba(0, 0, 0, 0.15); width: 100%; height: 100%; }
.modal-container {
  background-color: var(--midnight-blue);
  border-radius: 4px;
  width: 100%;
  max-width: 40rem;
  max-height: 100vh;
  overflow-y: auto;
  padding: 32px;
  display: block;
  position: absolute;
}
.close-modal {
  width: 2.5rem; height: 2.5rem; position: absolute; top: 16px; right: 32px;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.icon-1x1-custom1-2 { width: 100%; height: auto; transition: rotate 250ms ease; }
.close-modal:hover .icon-1x1-custom1-2 { rotate: 180deg; }

.form-2 { gap: 16px; flex-direction: column; justify-content: space-between; display: flex; }
.form-field-wrapper { position: relative; }
.form-field-2col { gap: 1.5rem; grid-template-columns: 1fr 1fr; display: grid; }
.form-field-2col .span-2 { grid-column: span 2; }
.form-input-2 {
  color: #000;
  background-color: #fff;
  border: 1px solid rgba(119, 119, 119, 0.37);
  border-left-color: rgba(187, 187, 187, 0.37);
  border-radius: 8px;
  height: auto;
  min-height: 2.75rem;
  margin-bottom: 0;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
}
.form-input-2:focus { border-color: #000; }
.form-input-2::placeholder { color: rgba(0, 0, 0, 0.6); }
.form-input-2.is-text-area { min-height: 8rem; padding-top: 0.75rem; padding-bottom: 0.75rem; overflow: auto; }
.form-input-2.is-text-area.minna { min-height: 8rem; max-height: 8rem; font-weight: 500; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.recaptcha { margin-left: auto; margin-right: auto; overflow: visible; }
.turnstile:empty { display: none; }

.success-message-2 { color: #fff; background-color: transparent; border: 1px solid #fff; border-radius: 8px; font-family: var(--font-display); }
.text-block-9 { font-size: 16px; }
.error-message-2 { color: #333; text-align: center; background-color: #ff5558; border-radius: 8px; font-family: var(--font-display); font-weight: 700; }

/* ---------- responsive (Webflow breakpoints) ---------- */
@media screen and (max-width: 991px) {
  .padding-section-large { padding-top: 6rem; padding-bottom: 6rem; }
  .margin-bottom { margin-top: 0; margin-left: 0; margin-right: 0; }
  .margin-top { margin-bottom: 0; margin-left: 0; margin-right: 0; }
  .heading-style-h1 { font-size: 3.25rem; }
  .heading-style-h2 { font-size: 2.75rem; }
}
@media screen and (max-width: 767px) {
  .padding-section-large { padding-top: 4rem; padding-bottom: 4rem; }
  .margin-bottom { margin-top: 0; margin-left: 0; margin-right: 0; }
  .margin-top { margin-bottom: 0; margin-left: 0; margin-right: 0; }
  .text-size-medium { font-size: 1rem; }
  .heading-style-h1 { font-size: 2.5rem; }
  .heading-style-h2 { font-size: 2.25rem; }
  .margin-small { margin: 1.25rem; }
  .margin-medium { margin: 1.5rem; }
  .margin-bottom.margin-small { margin-left: 0; margin-right: 0; }
  .margin-top.margin-medium { margin-left: 0; }
  .navbar4_component-2 { min-height: 4rem; }
  .form-field-2col.is-mobile-1col { grid-template-columns: 1fr; }
  .form-field-2col.is-mobile-1col .span-2 { grid-column: auto; }
  .column { display: none; }
}
@media screen and (max-width: 479px) {
  .margin-bottom { margin-top: 0; margin-left: 0; margin-right: 0; }
  .margin-top { margin-bottom: 0; margin-left: 0; margin-right: 0; }
  .heading-style-h1.white { font-size: 2.3rem; }
  .columns { flex-direction: column; }
  .pop-up-modal { width: 100vw; }
  .modal-container { width: 95vw; padding: 24px; }
  .column { display: none; }
}